页面调整优化

zxl

1 天以前 b7ce92d35fde3704297163010c320e336a5dd681

 pages/tabbar/user/my.vue

@@ -1,136 +1,117 @@
<template>
  <view class="user">
    <!-- 个人信息 -->
    <view class="header-wrapper" @click="userDetail"
      :style="{ backgroundColor: '#e9cc80', backgroundImage: `url(${base64image2.userInfoBg})` }">
    <view class="status_bar">
      <!-- 这里是状态栏 -->
    </view>
    <view class="header"  @click="userDetail" :style="{ backgroundImage: `url(${base64image2.userInfoBg})` }">
      <view class="header">
      <view class="head-1">
        <image v-if="userInfo.face" :src="endpoint + '/' + userInfo.face"></image>
        <image v-else :src="userImage"></image>
      </view>
      <view class="head-2" v-if="userInfo.id">
        <view class="user-name">{{ userInfo.nickName }}</view>
          <!-- <view class="member-name"> 会员名: {{ userInfo.username ? userInfo.username : '未设置' }}</view> -->
      </view>
      <view class="head-2" v-else>
        <view class="user-name">登录/注册</view>
      </view>
      <u-icon style="display: flex;align-items: flex-start;" name="arrow-right"></u-icon>
    </view>
   <!-- <button  type="default" @click="goTOSuccess">立即查看</button> -->
   <view class="member-gradient-bg" v-if="prizeActivity.enableStatus === 'ON'" 
  :style="{ backgroundImage: `url(${base64image.prizeActivityBg})` }" 
  >
    <view class="member-gradient-bg" @click="gotoPrizeActivity" >
      <!-- <view class="activity-content">
    
        <view class="activity-icon">
          <view class="floating-btn-content">
            <text class="floating-btn-icon">🎁</text>
          </view>

        </view>
    
        <view class="activity-info">
          <p class="activity-name">{{ prizeActivity.activityName }}</p>
          <p class="activity-desc">{{ prizeActivity.activityDes }}</p>
          <p class="activity-desc">{{ formatDate(prizeActivity.beginTime) }} - {{ formatDate(prizeActivity.endTime)}}</p>
        </view>
        <view class="activity-enter">
          <text class="enter-text">立即参与</text>
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view> -->
    </view>
   </view>
    <!-- 积分，优惠券，关注， -->
    <div class="pointBox box">
      <u-row text-align="center" gutter="16" class="point">
        <u-col text-align="center" span="4" @click="navigateTo('/pages/mine/deposit/operation')">
          <view>余额</view>
          <view class="money">{{ walletNum | unitPrice }}</view>
        </u-col>

        <u-col text-align="center" span="4" @click="navigateTo('/pages/cart/coupon/myCoupon')">
          <view>优惠券</view>
          <view>{{ couponNum || 0 }}</view>
        </u-col>

        <u-col text-align="center" span="4" @click="navigateTo('/pages/mine/myTracks')">
          <view>足迹</view>
          <view>{{ footNum || 0 }}</view>
        </u-col>
      </u-row>
      <div class="pointBox1">
        <view class="point">
          <view class="point-col" @click="navigateTo('/pages/cart/coupon/myCoupon')">
            <view class="point-item">
              <text class="label">优惠券</text>
              <text class="value">{{ couponNum || 0 }}</text>
              <text class="label">张</text>
            </view>
          </view>
          <view class="point-col" @click="navigateTo('/pages/mine/deposit/operation')">
            <view class="point-item">
              <text class="label">余额</text>
              <text class="value">{{ walletNum | unitPrice }}</text>
            </view>
          </view>
        </view>
      <!-- 我的订单，代付款 -->
      <view class="order">
          <view class="order-header" @click="navigateTo('/pages/order/myOrder?status=0')">
            <view class="left">我的订单</view>
            <view class="right">
              <text>全部订单</text>
              <u-icon name="arrow-right" size="24" color="#999"></u-icon>
            </view>
          </view>
          <view class="order-content">
        <view class="order-item" @click="navigateTo('/pages/order/myOrder?status=1')">
          <div class="bag bag2">
            <u-icon name="bag-fill" size="35" color="#fff"></u-icon>
          </div>
              <view class="icon-box">
                <image src="/static/tool/待付款.png" mode="aspectFit"></image>
              </view>
          <view>待付款</view>
        </view>
            <view class="order-item" @click="navigateTo('/pages/order/myOrder?status=2')">
              <view class="icon-box">
                <image src="/static/tool/待发货.png" mode="aspectFit"></image>
              </view>
              <view>待发货</view>
            </view>
        <view class="order-item" @click="navigateTo('/pages/order/myOrder?status=3')">
          <div class="bag bag3">
            <u-icon name="car-fill" size="35" color="#fff"></u-icon>
          </div>
              <view class="icon-box">
                <image src="/static/tool/待收货.png" mode="aspectFit"></image>
              </view>
          <view>待收货</view>
        </view>
        <view class="order-item" @click="navigateTo('/pages/order/evaluate/myEvaluate')">
          <div class="bag bag4">
            <u-icon name="star-fill" size="35" color="#fff"></u-icon>
          </div>
              <view class="icon-box">
                <image src="/static/tool/评价中心.png" mode="aspectFit"></image>
              </view>
          <view>待评价</view>
        </view>
        <view class="order-item" @click="navigateTo('/pages/order/afterSales/afterSales')">
          <div class="bag bag5">
            <u-icon name="server-fill" size="35" color="#fff"></u-icon>
          </div>
              <view class="icon-box">
                <image src="/static/tool/我的订单-退货_售后.png" mode="aspectFit"></image>
              </view>
          <view>售后</view>
        </view>
        <view class="order-item" @click="navigateTo('/pages/order/myOrder?status=0')">
          <div class="bag bag1">
            <u-icon name="order" size="35" color="#fff"></u-icon>
          </div>
          <view>我的订单</view>
        </view>
      </view>
    </div>
    </view>
    <view class="member-gradient-bg" v-if="prizeActivity.enableStatus === 'ON'"
      :style="{ backgroundImage: `url(${base64image.prizeActivityBg})` }">
      <view class="member-gradient-bg" @click="gotoPrizeActivity">
      </view>
    </view>

   
   <!-- 视频相关， -->
   <div class="pointBox box" style="margin-top: 20rpx;">
     <view class="order">
    <!-- <div class="pointBox box" style="margin-top: 20rpx;">
      <view class="order-content">
       <view class="order-item" @click="jumpToVideoHome()">
         <view>
          <view class="icon-box">
           <text class="iconfont">&#xe676;</text>
         </view>
         <view>我的视频</view>
       </view>
       <view class="order-item" @click="navigateTo('/pages/mine/myAttention')">
         <view>
           <text class="iconfont">&#xe66f;</text>
          <view class="icon-box">
            <image src="/static/mine/myfavorite.png" mode="aspectFit"></image>
         </view>
         <view>我的关注</view>
       </view>
<!--        <view class="order-item" @click="navigateTo('/pages/mine/myCollect/myCollect')">
         <view>
           <text class="iconfont">&#xe608;</text>
         </view>
         <view>收藏列表</view>
       </view -->
      <view class="order-item" @click="navigateTo('/pages/mine/activity/myActivity')">
        <view>
          <text class="iconfont">&#xe635;</text>
          <view class="icon-box">
            <image src="/static/mine/prize-activity.png" mode="aspectFit"></image>
        </view>
        <view>我的活动</view>
      </view>
<!--       <view class="order-item" @click="navigateTo('/pages/mine/myTracks')">
        <view>
          <text class="iconfont">&#xe738;</text>
        </view>
        <view>浏览记录</view>
      </view> -->
     </view>
   </div>
    </div> -->
   
    <!-- 常用工具 -->
   <view class="pointBox box" style="margin-top: 20rpx;">
@@ -405,10 +386,12 @@

<style lang="scss" scoped>
   @import url("/pages/subComponents/static/bgStyle.css");

html,
body {
  overflow: auto;
}

  .floating-btn-content {
    display: flex;
    flex-direction: column;
@@ -417,12 +400,14 @@
    z-index: 1;
    position: relative;
  }

  .floating-btn-icon {
    font-size: 75rpx;
    color: white;
    filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2));
    margin-bottom: 5rpx;
  }

  .floating-btn-text {
    font-size: 20rpx;
    color: white;
@@ -431,6 +416,7 @@
    text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.2);
    white-space: nowrap;
  }

.member-gradient-bg {
   width: 98%;
   height: 250rpx;
@@ -441,11 +427,14 @@
        background-size: cover;
   background-position: center;
   background-repeat: no-repeat;

     &:active {
       transform: scale(0.98);
     }

  cursor: pointer; // 增加点击指针样式
  overflow: hidden; // 防止内容溢出

  .activity-content {
    width: 100%;
    height: 100%;
@@ -462,6 +451,7 @@
    margin-right: 24rpx;
    border-radius: 16rpx;
    overflow: hidden;

    image {
      width: 100%;
      height: 100%;
@@ -472,6 +462,7 @@
  // 活动信息区域
  .activity-info {
    flex: 1;

    .activity-name {
      font-size: 32rpx;
      font-weight: bold;
@@ -479,6 +470,7 @@
      margin: 0 0 8rpx 0;
      text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.1);
    }

    .activity-desc {
      font-size: 22rpx;
      color: rgba(255,255,255,0.9);
@@ -491,15 +483,18 @@
    display: flex;
    align-items: center;
    margin-top: 12rpx;

    .countdown-label {
      font-size: 20rpx;
      color: rgba(255,255,255,0.8);
      margin-right: 8rpx;
    }

    .countdown-box {
      display: flex;
      align-items: center;
    }

    .countdown-item {
      display: inline-block;
      width: 36rpx;
@@ -512,6 +507,7 @@
      text-align: center;
      margin: 0 4rpx;
    }

    .countdown-sep {
      color: #fff;
      font-size: 22rpx;
@@ -523,6 +519,7 @@
  .activity-enter {
    display: flex;
    align-items: center;

    .enter-text {
      font-size: 24rpx;
      color: #fff;
@@ -541,9 +538,11 @@
  padding: 0 40rpx;
  box-sizing: border-box;
}

/* 会员信息 */
.vip-info {
  flex: 1;

  .vip-level {
    font-size: 40rpx;
    font-weight: bold;
@@ -576,6 +575,7 @@
  width: 60rpx;
  height: 60rpx;
}

/* 特权标识 */
.vip-badge {
  padding: 8rpx 20rpx;
@@ -598,33 +598,36 @@

.user {
   background: #e7e7e7;

  .header-wrapper {
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: bottom;
  }

  .header {
    max-width: 100%;
    padding: calc(50rpx + var(--status-bar-height)) 30rpx 0 6%;
    height: calc(360rpx);
    background-size: cover;
    border-bottom-left-radius: 30rpx;
    border-bottom-right-radius: 30rpx;
    background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
    color: #ffffff;
    padding: 100rpx 30rpx 0 5%;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;

    .head-1 {
      text-align: center;
      width: 152rpx;
      width: 140rpx;
      position: relative;
      display: flex;
      align-items: center;
      margin-top: 20rpx;

      image {
        width: 152rpx;
        height: 144rpx;
        width: 140rpx;
        height: 140rpx;
        border-radius: 50%;
        margin-bottom: 30rpx;
        border: 3px solid #fff;
        box-sizing: border-box;
      }

      .edti-head {
@@ -657,30 +660,52 @@
  }

  .point {
    text-align: center;
    width: 100%;
    height: 120rpx;
    display: flex;
    align-items: center;

    .point-col {
      flex: 1;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;

      &:not(:last-child)::after {
        content: "";
        position: absolute;
        left: 100%;
        top: 50%;
        transform: translate(-50%, -50%);
        height: 40rpx;
        width: 1rpx;
        background-color: #ccc;
      }

      .point-item {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: baseline;

        .value {
          color: #1f1b13;
          font-size: 34rpx;
          font-weight: bold;
          margin: 0 20rpx 0 20rpx;
        }

        .label {
          color: #999;
          font-size: 24rpx;
        }
      }
    }
  }

  .order-content {
    height: 160rpx;

    font-size: $font-sm;
    // #ifdef MP-WEIXIN
    padding: 24rpx;

    // #endif
    .u-col {
      view {
        color: $u-main-color;
        font-size: 28rpx;
      }

      view:last-child {
        margin-top: 8rpx;
        color: $main-color;
        font-size: $font-lg;
      }
    }
  }

  .order {
    height: 140rpx;
    text-align: center;
    font-size: $font-sm;
    display: flex;
@@ -688,24 +713,72 @@
    align-items: center;
    padding: 0 3%;
    color: #666;

    .order-item {
      position: relative;
      line-height: 1.5;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .icon-box {
        width: 60rpx;
        height: 60rpx;
        margin-bottom: 10rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .order {
    background: #fff;
    border-radius: 20rpx;
    box-shadow: 0 4rpx 24rpx 0 #f6f6f6;
    margin: 0 20rpx;
    padding-bottom: 20rpx;
   
    .order-item {
      position: relative;
      line-height: 2em;
      width: 96rpx;
    .order-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx 30rpx 10rpx 30rpx;

      :first-child {
        font-size: 48rpx;
        margin-bottom: 12rpx;
      .left {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
      }

      .right {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: #999;

        text {
          margin-right: 4rpx;
        }
      }
    }
  }

}

.pointBox1 {
  position: relative;
  z-index: 10;
  background: #f5f5f5;
  border-radius: 40rpx 40rpx 0 0;
  box-shadow: 0 -4rpx 24rpx 0 rgba(0, 0, 0, 0.05);
  margin-top: 40rpx;
}

.box {
@@ -718,32 +791,13 @@

.user-name {
  font-size: 34rpx;
  font-weight: bolder;
  color: #1f1b13;
}

.bag {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  margin: 0 auto;
}

.bag1 {
  background: #ff4a48;
}

.bag2 {
  background: #ff992f;
}

.bag3 {
  background: #009ee0;
}

.bag4 {
  background: #00d5d5;
}

.bag5 {
  background: #28ccb0;
.member-name {
  margin-top: 25rpx;
  font-size: 28rpx;
  color: #8d867a;
}
</style>