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',
  },
})
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())
</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">
                中数未来(广州)信息技术有限公司
              </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">
              <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="router.push({ name: item.name })">
            <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 title="联系平台客服" custom-title-class="cell-title" clickable is-link>
            <template #icon>
              <image :src="`${StaticUrl}/5.png`" class="h50rpx w50rpx" />
            </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%);
}

.page-class {
  :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;
    }
  }
}
</style>