menduner/src/views/mall copy/index.vue

<!-- 门墩儿商城 -->
 <template>
  <div style="background-color: var(--default-bgc);">
    <div class="default-width white-bgc px-3 pt-5 pb-10">
      <div class="statisticsBox">
        <div class="mt-2">
          <span style="line-height: 28px;" class="ml-10 font-size-20 font-weight-bold color-333">您当前可用积分</span>
          <span v-if="getToken()" @click="router.push('/recruit/personal/personalCenter/wallet?key=1')" style="cursor: pointer;">
            <span style="line-height: 24px;" class="ml-2 color-666 font-size-14">积分明细</span>
            <v-icon class="font-size-16 color-666" style="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 v-if="getToken()" style="font-size: 42px; color: #10897bba; line-height: 50px;" class="ml-10 cursor-pointer" @click="router.push('/recruit/personal/personalCenter/wallet?key=1')">{{ accountData.point }}</span>
          <span v-else style="font-size: 30px; line-height: 50px;" class="ml-10 cursor-pointer color-primary" @click="handleLogin">请先登录</span>
        </div>
        <div v-if="getToken()" class="color-666 font-size-14 cursor-pointer text-end mr-5 commonHover2" @click="handleToTaskCenter">赚取积分</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 :point="accountData.point" @login="handleLogin" @toTaskCenter="handleToTaskCenter"></exchange>
        </div>
        <!-- 积分兑换记录 -->
        <div v-if="tab === 2">
          <exchangeRecords></exchangeRecords>
        </div>
      </div>
    </div>
  </div>

  <!-- 快速登录 -->
  <loginPage v-if="showLogin" @loginSuccess="loginSuccess" @close="loginClose"></loginPage>
</template>

<script setup>
defineOptions({name: 'personal-pointsMall'})
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()
import { getToken } from '@/utils/auth'
import Snackbar from '@/plugins/snackbar'
import exchangeRecords from './exchangeRecords.vue'
import exchange from './exchange.vue'
import loginPage from '@/views/common/loginDialog.vue'

const getPositionList = () => {
  if (route.query) router.replace({ path: route.path })
}
const tab = ref(+route.query?.tab || 1)

const userStore = useUserStore()
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]
})

const showLogin = ref(false)
const handleLogin = () => {
  showLogin.value = true // 打开快速登录弹窗
  // Snackbar.warning('您还未登录，请先登录后再试')
}

// 快速登录
const loginSuccess = () => {
  showLogin.value = false
  Snackbar.success('登录成功')
  window.location.reload()  
}

const loginClose = () => {
  showLogin.value = false
  Snackbar.warning('您已取消登录')
}

// 跳转任务中心
const handleToTaskCenter = () => {
  router.push('/recruit/personal/personalCenter/memberBenefits/taskCenter')
}
</script>

<style lang="scss" scoped>
.statisticsBox {
  padding: 10px 0;
  border-radius: 10px;
  background-color: var(--default-bgc);
}
</style>