menduner/src/views/integral/pointsManagement/components/integralShow.vue

<!--  -->
<template>
  <div class="statisticsBox d-flex">
    <div class="d-flex mt-2" style="flex: 1;">
      <div v-for="(val, i) in list" :key="i" :style="{'margin-left': val.showRules ? '0' : '200px'}">
        <div>
          <span class="ml-10 item-title">{{ val.title }}</span>
          <span v-if="val.showRules" class="ml-5 rules cursor-pointer" @click="integralRulesClick">
            {{ $t('points.integralRules') }}
            <v-icon style="font-size: 16px; color: var(--color-666); line-height: 16px; margin-left: 1px;">mdi-help-circle-outline</v-icon>
          </span>
        </div>
        <div>
          <span v-if="val.value === 'balance'" class="ml-10 item-value">{{ accountData[val.value] && accountData[val.value] > 0 ? (accountData[val.value]) : 0 }}</span>
          <span v-else class="ml-10 item-value">{{ accountData[val.value] || 0 }}</span>
        </div>
      </div>
    </div>
    <div class="d-flex align-end">
      <span style="font-size: 16px; color: #787d82; line-height: 24px;" class="mr-8">
        <template v-if="props.showMall">
          <span class="mall-text" @click="handleClickMall">{{ $t('points.handpickMall') }}</span>
        </template>
        <template v-if="props.taskCenter">
          <span class="septal-line"></span>
          <span class="mall-text" @click="router.push({ path: '/recruit/personal/personalCenter/memberBenefits/taskCenter' })">赚取积分</span>
        </template>
      </span>
    </div>
  </div>
</template>

<script setup>
defineOptions({name: 'myRegistration-integralShow'})
import { ref } from 'vue'
import { useUserStore } from '@/store/user'
import { useRouter } from 'vue-router'; const router = useRouter()

const props = defineProps({
  showMall: {
    type: Boolean,
    default: true
  },
  taskCenter: {
    type: Boolean,
    default: false
  },
  // 招聘端
  isEnterprise: {
    type: Boolean,
    default: false
  }
})

const list = ref([
  { title: '您当前剩余积分', value: 'point', showRules: true },
  // { title: '您当前余额', value: 'balance', showRules: false },
])

const userStore = useUserStore()
let accountData = ref(JSON.parse(localStorage.getItem('userAccount')) || {})

userStore.$subscribe((mutation, state) => {
  if (Object.keys(state.userAccount).length) accountData.value = state.userAccount
})

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

// 跳转门墩儿商城
const handleClickMall = () => {
  window.open('/pointsExchange')
}
</script>

<style lang="scss" scoped>
.statisticsBox {
  padding: 10px 0;
  border-radius: 10px;
  background-color: var(--default-bgc);
  // background-color: var(--color-f3);
  // font-family: 宋体, SimSun;
}
.mall-text {
  color: var(--color-666);
  cursor: pointer;
  &:hover {
    color: var(--v-primary-base);
  }
}
.item-title {
  font-size: 20px; 
  color: var(--color-333); 
  line-height: 28px; 
  font-weight: bold;
}
.item-value {
  font-size: 42px; 
  color: #00B760;
  line-height: 50px;
}
.rules {
  font-size: 14px; 
  color: var(--color-666); 
  line-height: 24px; 
}
</style>