menduner/src/views/mall/index.vue

<!-- 门墩儿商城 -->
 <template>
  <div style="background-color: var(--default-bgc); height: 100vh; overflow-y: auto;">
    <div class="default-width white-bgc px-3 pt-5 pb-10" style="min-height: 100vh;">
      <div class="statisticsBox">
        <div class="mt-2">
          <span style="font-size: 20px; color: var(--color-333); line-height: 28px; font-weight: bold;" class="ml-10">您当前可用积分</span>
          <span @click="toPointsDetails" style="cursor: pointer;">
            <span style="font-size: 14px; color: var(--color-666); line-height: 24px;" class="ml-2">积分明细</span>
            <v-icon style="font-size: 16px; color: var(--color-666); line-height: 16px; margin-left: 2px;">mdi-help-circle-outline</v-icon>
          </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="toPointsDetails">{{ accountData.point }}</span>
        </div>
      </div>
      <!-- <v-tabs v-model="tab" class="mt-1" align-tabs="start" color="primary" bg-color="#fff" @update:model-value="getPositionList()"> -->
      <v-tabs v-model="tab" class="mt-1" align-tabs="start" color="primary" bg-color="#fff" @update:model-value="getPositionList">
        <v-tab :value="1">{{ $t('points.exchange') }}</v-tab>
        <v-tab :value="2">{{ $t('points.exchangeRecords') }}</v-tab>
      </v-tabs>
      <div class="mt-5">
        <!-- 积分兑换 -->
        <div v-if="tab === 1">
          <exchange></exchange>
        </div>
        <!-- 积分兑换记录 -->
        <div v-if="tab === 2">
          <exchangeRecords></exchangeRecords>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import exchange from './exchange.vue'
import exchangeRecords from './exchangeRecords.vue'
import { ref } from 'vue'
import { useUserStore } from '@/store/user'
import { useRoute } from 'vue-router'; const route = useRoute()
import { useRouter } from 'vue-router'; const router = useRouter()
defineOptions({name: 'personal-pointsMall'})

const toPointsDetails = () => {
  router.push({ path: '/recruit/personal/personalCenter/wallet' })
}

const getPositionList = () => {
  if (route.query) router.replace({ path: route.path }) // 不留记录的清除跳转带过来的参数
}
const tab = ref(+route.query?.tab || 1)

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

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

</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;
}
</style>