menduner/src/views/personal/pointsMall/index.vue

<!-- 积分商城 -->
<template>
  <div class="default-width white-bgc px-3 pt-5 pb-10">
    <div class="statisticsBox">
      <div class="mt-2">
        <span style="font-size: 20px; color: #333; line-height: 28px; font-weight: bold;" class="ml-10">您当前可用积分</span>
        <span style="font-size: 14px; color: #777; line-height: 24px; cursor: pointer;" class="ml-2" @click="toPointsDetails">积分明细</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">{{ integral }}</span>
      </div>
    </div>
    <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>
</template>

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

const toPointsDetails = () => {
  router.push({ path: '/myPublicRecruitment', query: { tab: 2 } })
}

const tab = ref(+route.query?.tab || 1)
</script>
<style lang="scss" scoped>
.statisticsBox {
  padding: 10px 0;
  border-radius: 10px;
  background-color: var(--default-bgc);
  // background-color: #f3f3f3;
  // font-family: 宋体, SimSun;
}
</style>