city-gather/src/pages/my/index.vue

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

definePage({
  name: 'smqjh-my',
  layout: 'tabbar',
  islogin: false,
  style: {
    navigationBarTitleText: '个人中心',
    navigationStyle: 'custom',
    disableScroll: true,
  },
})
const tabList = ref([
  { title: '待支付', icon: `${StaticUrl}/1.png`, name: 'smqjh-order' },
  { title: '待收货', icon: `${StaticUrl}/2.png`, name: 'smqjh-order' },
  { title: '已完成', icon: `${StaticUrl}/6.png`, name: 'smqjh-order' },
  { title: '退款售后', icon: `${StaticUrl}/3.png`, name: 'common-afterSalesList' },
])
onMounted(() => {
  useUserStore().getUserInfo()
})
const { token, userInfo, getUserAvatar } = storeToRefs(useUserStore())
function handleLoginOut() {
  useGlobalMessage().confirm({
    title: '提示',
    msg: '确定要退出登录吗？',
    success: async () => {
      useUserStore().$reset()
      useSmqjhCartStore().$reset()
      useAddressStore().$reset()
      router.replace({ name: 'smqjh-login' })
    },
  })
}
function handleGo(item: { name: string }) {
  if (item.name === 'common-afterSalesList') {
    useGlobalToast().show('此功能暂未开放')
    return
  }
  router.push({ name: item.name })
}
</script>

<template>
  <view class="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="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: 'smqjh-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 v-if="token" class="mt80rpx flex items-center justify-center">
      <wd-button @click="handleLoginOut">
        退出登录
      </wd-button>
    </view>
  </view>
</template>

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

.page-class {
  height: calc(100vh - var(--window-top) - 150rpx);
  :deep() {
    .login-btn {
      min-width: 0 !important;
      width: 180rpx;
    }

    .cell-title {
      padding-left: 20rpx;
    }
  }

}

.item-cell {
  :deep() {
    .card {
      padding: 0 !important;
    }
    .cell-group{
      overflow: hidden;
      border-radius: 12rpx;
    }
    .wd-cell__right{
      width: 60rpx !important;
      flex: unset !important;
    }
  }
}
</style>