menduner/src/views/personal/components/integralShow.vue

<!--  -->
<template>
  <div class="statisticsBox">
    <div class="mt-2">
      <span style="font-size: 20px; color: #333; line-height: 28px; font-weight: bold;" class="ml-10">{{ props.title }}</span>
      <span style="font-size: 14px; color: #777; line-height: 24px; cursor: pointer;" class="ml-2" @click="integralRulesClick">{{ $t('points.integralRules') }}</span>
    </div>
    <div class="d-flex justify-space-between align-end my-1">
      <span style="font-size: 42px; color: #10897bba; line-height: 50px;" class="ml-10 cursor-pointer" @click="router.push({ path: '/pointsManagement', query: { tab: 2 } })">{{ integral }}</span>
      <span style="font-size: 16px; color: #787d82; line-height: 24px;" class="mr-8">
        <!-- 积分商城 -->
        <template v-if="props.showMall">
          <span>积分土豪的都喜欢来这里，</span>
          <span style="color: #10897be8; cursor: pointer;" @click="handleClickMall">{{ $t('points.handpickMall') }}</span>
        </template>
        <!-- 任务中心 -->
        <template v-if="props.taskCenter">
          <span style=" color: var(--v-primary-base); cursor: pointer;" @click="router.push({ path: '/personalTaskCenter' })">赚取积分</span>
          <!-- <span style="color: #10897be8; cursor: pointer;" @click="router.push({ path: '/personalTaskCenter' })">《<span style=" color: var(--v-primary-base);">任务中心</span>》</span> -->
        </template>
      </span>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'; const router = useRouter()
defineOptions({name: 'myRegistration-integralShow'})
const props = defineProps({
  title: {
    type: String,
    default: '您当前赚取积分'
  },
  showMall: {
    type: Boolean,
    default: true
  },
  taskCenter: {
    type: Boolean,
    default: false
  },
})
const integral = '135'

// 积分规则
const integralRulesClick = () => {
  window.open('/personalIntegralRules')
}

// 跳转臻选商城
const handleClickMall = () => {
  window.open('/pointsManagement')
}
</script>
<style lang="scss" scoped>
.statisticsBox {
  padding: 10px 0;
  border-radius: 10px;
  background-color: var(--default-bgc);
  // background-color: #f3f3f3;
  // font-family: 宋体, SimSun;
}
</style>