city-gather/src/subPack-xsb/commonTab/components/my.vue

<script setup lang="ts">
import { StaticUrl } from '@/config'
import router from '@/router'

const tabList = ref([
  { title: '待支付', icon: ``, name: 'xsb-order', status: 'paddingPay' },
  { title: '进行中', icon: ``, name: 'xsb-order', status: 'ing' },
  { title: '已完成', icon: ``, name: 'xsb-order', status: 'completed' },
  { title: '退款售后', icon: ``, name: 'common-afterSalesList', status: '' },
])

const { token, userInfo, getUserAvatar } = storeToRefs(useUserStore())
useUserStore().getUserInfo()
function handleGo(item: { name: string, status: string }) {
  // if (item.name === 'common-afterSalesList') {
  //   useGlobalToast().show('此功能暂未开放')
  //   return
  // }
  router.push({ name: item.name, params: { status: item.status } })
}
</script>

<template>
  <view class="page-xsb page-class bg-#F9F9F9 dark:bg-[var(--wot-dark-background)]">
    <wd-navbar
      title="个人中心" custom-style="background-color: transparent !important;" :bordered="false"
      safe-area-inset-top fixed :z-index="99"
    />
    <view class="relative h-408rpx rounded-18px" :style="{ background: `linear-gradient( 180deg, var(--them-color) 0%, rgba(255,255,255,0) 100%)` }">
      <view class="absolute bottom-100rpx left-0 box-border w-full flex items-center justify-between pl48rpx pr58rpx">
        <template v-if="!token">
          <!-- <image :src="`${StaticUrl}/9.png`" alt="" class="h100rpx w100rpx" /> -->
          <i class="iconfont text-100rpx text-[var(--them-color)]">&#xe654;</i>
          <view class="text-32rpx font-semibold">
            请登录后使用完整功能
          </view>
          <wd-button custom-class="login-btn" @click="router.replace({ name: 'smqjh-login' })">
            登录
          </wd-button>
        </template>
        <template v-else>
          <view class="flex items-center">
            <image :src="getUserAvatar" alt="" class="h100rpx w100rpx flex-shrink-0 rounded-full" />
            <view class="ml20rpx flex-1">
              <view class="text-32rpx font-semibold">
                {{ userInfo.nickName }}
              </view>
              <view class="mt12rpx w-fit rounded-8rpx bg-white px12rpx py4rpx text-24rpx text-[var(--them-color)] opacity-70">
                {{ userInfo.channelName }}
              </view>
            </view>
          </view>
          <view class="flex flex-col items-center" @click="router.push({ name: 'common-user-center' })">
            <wd-icon name="setting" size="22px" color="var(--them-color)" />
            <view class="mt12rpx text-24rpx text-[var(--them-color)]">
              账户设置
            </view>
          </view>
        </template>
      </view>
    </view>
    <view class="relative z-50 -mt48rpx">
      <wd-card>
        <template #title>
          <view class="flex items-center justify-between">
            <view class="text-32rpx font-semibold">
              订单列表
            </view>
            <view class="flex items-center" @click="router.push({ name: 'xsb-order' })">
              <view class="text-28rpx">
                查看全部
              </view>
              <wd-icon name="arrow-right" size="18px" />
            </view>
          </view>
        </template>
        <view class="grid grid-cols-4 gap-4">
          <view v-for="item in tabList" :key="item.title" class="flex flex-col items-center justify-center" @click="handleGo(item)">
            <i class="iconfont text-56rpx text-[var(--them-color)]">
              {{ item.icon }}
            </i>
            <view class="mt20rpx text-24rpx">
              {{ item.title }}
            </view>
          </view>
        </view>
        <view class="h20rpx" />
      </wd-card>
    </view>
    <view class="item-cell mt20rpx">
      <wd-card custom-class="card">
        <wd-cell-group custom-class="cell-group">
          <wd-cell title="收货地址" custom-title-class="cell-title" clickable is-link @click="router.push({ name: 'common-addressList' })">
            <template #icon>
              <image :src="`${StaticUrl}/4.png`" class="h50rpx w50rpx" />
            </template>
          </wd-cell>
          <!-- #ifdef MP-WEIXIN -->
          <wd-cell custom-title-class="cell-title" clickable is-link>
            <template #icon>
              <image :src="`${StaticUrl}/5.png`" class="h50rpx w50rpx" />
            </template>
            <template #title>
              <view class="ml20rpx w100%">
                <Zcontact>联系平台客服</Zcontact>
              </view>
            </template>
          </wd-cell>
          <!-- #endif -->
        </wd-cell-group>
      </wd-card>
    </view>
    <view class="item-cell mt20rpx">
      <wd-card custom-class="card">
        <wd-cell-group custom-class="cell-group">
          <wd-cell title="积分" custom-title-class="cell-title" clickable is-link @click="router.push({ name: 'common-integral' })">
            <template #icon>
              <image :src="`${StaticUrl}/7.png`" class="h50rpx w50rpx" />
            </template>
          </wd-cell>
          <!-- <wd-cell title="评价" custom-title-class="cell-title" clickable is-link>
            <template #icon>
              <image :src="`${StaticUrl}/8.png`" class="h50rpx w50rpx" />
            </template>
          </wd-cell> -->
          <wd-cell title="优惠券" custom-title-class="cell-title" clickable is-link @click="router.push({ name: 'xsb-coupon' })">
            <template #icon>
              <image :src="`${StaticUrl}/xsb-my-coupon.png`" class="h50rpx w50rpx" />
            </template>
          </wd-cell>
        </wd-cell-group>
      </wd-card>
    </view>
  </view>
</template>

<style lang="scss" scoped>

</style>