purchase-let/pages/my/my.vue

<template>
  <view>
    <up-navbar title="我的" bgColor="rgba(0,0,0,0)">
      <template #left>
        <view></view>
      </template>
    </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="https://shop.lihaink.cn/static/images/f1.png" size="80"></up-avatar>
        <view class="content">
          <view class="u-phone">151****6699</view>
          <view class="u-id">ID: 6655</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">
            <image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/f335a202404261401535608.png"></image>
            <view class="">待付款</view>
          </view>
          <view class="list-item">
            <image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/45241202404261403353935.png"></image>
            <view class="">待收货</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"></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"></up-cell>
      </up-cell-group>
    </view>
  </view>
</template>

<script setup>
  import { ref } from "vue";
  
  const navTo = (type=0) => {
    uni.navigateTo({
      url: `/pagesOrder/order/order?type=${type}`
    })
  }
</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;
          image{
            width: 64rpx;
            height: 64rpx;
          }
        }
      }
    }
  }
  
  .card{
    margin: 20rpx;
    background-color: #fff;
    border-radius: 14rpx;
    overflow: hidden;
  }
</style>