purchase-let/pages/my/my.vue

<template>
  <view>
    <up-navbar title="我的" bgColor="rgba(0,0,0,0)" :autoBack="true">
    </up-navbar>
    <view class="user-info">
      <image class="bg" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/e3a7b202404261113002322.webp"
        mode="widthFix"></image>
      <view class="u-card">
        <up-avatar :src="userInfo.avatar" size="80"></up-avatar>
        <view class="content">
          <view class="u-phone">{{userInfo.nickname}}</view>
          <view class="u-id">ID: {{userInfo.id}}</view>
        </view>
      </view>
    </view>

    <view class="order-info-box">
      <view class="order-info">
        <view class="info-head">我的订单</view>
        <view class="info-list">
          <view class="list-item" @click="navTo(1)">
            <image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/f335a202404261401535608.png"></image>
            <view class="">待付款</view>
            <view class="badge" v-if="orderCount.no_pay">{{orderCount.no_pay}}</view>
          </view>
          <view class="list-item" @click="navTo(2)">
            <image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/53747202405061509465296.png"></image>
            <view class="">待发货</view>
            <view class="badge" v-if="orderCount.waiting">{{orderCount.waiting}}</view>
          </view>
          <view class="list-item" @click="navTo(3)">
            <image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/45241202404261403353935.png"></image>
            <view class="">待收货</view>
            <view class="badge" v-if="orderCount.receiving">{{orderCount.receiving}}</view>
          </view>
          <!-- <view class="list-item">
            <image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/96915202404261403582769.png"></image>
            <view class="">售后/退款</view>
          </view> -->
          <view class="list-item" @click="navTo()">
            <image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/abdcd202404261406199643.png"></image>
            <view class="">全部订单</view>
          </view>
        </view>
      </view>
    </view>

    <view class="card">
      <up-cell-group>
        <up-cell title="我的地址" :isLink="true" url="/pagesOrder/addressList/addressList"></up-cell>
      </up-cell-group>
    </view>

    <view class="card">
      <up-cell-group>
        <up-cell title="意见反馈" :isLink="true"></up-cell>
        <up-cell title="关于我们" :isLink="true"></up-cell>
        <up-cell title="退出登录" :isLink="true" @click="logout"></up-cell>
      </up-cell-group>
    </view>
  </view>
</template>

<script setup>
  import { ref } from "vue";
  import useUserStore from "@/store/user";
  import { orderCountApi } from "@/api/order.js";
  
  const userStore = useUserStore();
  
  const userInfo = userStore.userInfo;
  
  const orderCount = ref({
    no_pay: 0,
    receiving: 0,
    waiting: 0
  })
  const getOrderCount = ()=>{
    orderCountApi().then(res=>{
      orderCount.value = res.data;
    })
  }
  getOrderCount();
  
  const navTo = (type=0) => {
    uni.navigateTo({
      url: `/pagesOrder/order/order?type=${type}`
    })
  }
  
  const logout = ()=>{
    userStore.setToken('');
    userStore.setUserInfo({});
    uni.reLaunch({
      url: '/pages/login/login'
    })
  }
</script>

<style lang="scss">
  .user-info {
    overflow: hidden;
    position: relative;
    width: 750rpx;
    height: 450rpx;
    /* #ifdef H5 */
    height: 350rpx;
    /* #endif */

    .bg {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }

    .u-card {
      box-sizing: border-box;
      padding: 50rpx 0 50rpx 50rpx;
      display: flex;
      position: absolute;
      bottom: 50rpx;
      left: 0;
      z-index: 2;

      .content {
        width: 500rpx;
        padding-left: 30rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .u-phone {
          font-size: 32rpx;
          margin-bottom: 16rpx;
        }

        .u-id {
          font-size: 24rpx;
        }
      }
    }
  }

  .order-info-box {
    margin: 20rpx;
    height: 140rpx;
    position: relative;

    .order-info {
      height: 220rpx;
      width: 710rpx;
      background-color: #fff;
      border-radius: 14rpx;
      position: absolute;
      top: -80rpx;
      left: 0;
      z-index: 3;
      background-image: url('https://lihai001.oss-cn-chengdu.aliyuncs.com/def/a8863202404261349533191.png');
      background-size: 28% 100%;
      background-position: right;
      background-repeat: no-repeat;
      
      .info-head{
        margin-left: 20rpx;
        margin-top: 20rpx;
        margin-bottom: 20rpx;
        font-size: 32rpx;
      }
      
      .info-list{
        height: 110rpx;
        display: flex;
        font-size: 26rpx;
        
        .list-item{
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          position: relative;
          image{
            width: 64rpx;
            height: 64rpx;
          }
          .badge{
            position: absolute;
            top: 0;
            right: 20%;
            width: 30rpx;
            height: 30rpx;
            border-radius: 50%;
            text-align: center;
            line-height: 30rpx;
            font-size: 22rpx;
            color: #fff;
            background-color: #F55726;
          }
        }
      }
    }
  }
  
  .card{
    margin: 20rpx;
    background-color: #fff;
    border-radius: 14rpx;
    overflow: hidden;
  }
</style>