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

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

definePage({
  name: 'xsb-my',
  islogin: false,
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '星闪豹我的',
    disableScroll: true,
  },
})
const tabList = ref([
  { title: '待支付', icon: `${StaticUrl}/1.png`, name: 'xsb-order' },
  { title: '待收货', icon: `${StaticUrl}/2.png`, name: 'xsb-order' },
  { title: '已完成', icon: `${StaticUrl}/6.png`, name: 'xsb-order' },
  { title: '退款售后', icon: `${StaticUrl}/3.png`, name: 'common-afterSalesList' },
])

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

<template>
  <view class="page-class page-xsb 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="header relative h-408rpx rounded-18px">
      <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" />
          <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 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' })">
            <image
              :src="`${StaticUrl}/user-setting.png`"
              class="h48rpx w48rpx"
            />
            <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)">
            <image :src="item.icon" class="h56rpx w56rpx" />
            <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>
          <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 w90%">
                <Zcontact>联系平台客服</Zcontact>
              </view>
            </template>
          </wd-cell>
        </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-group>
      </wd-card>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.header {
 background: linear-gradient( 113deg, #F7FFDC 0%, #E0FF8E 25%, #F2FFCE 51%, #E3FF98 83%, #F6FFD6 100%);
}
</style>