feat(mine): 我的页面改版调整

pages/mine/index.vue

@@ -1,147 +1,52 @@
 <template>
   <view class="content">
     <!-- 上方头部 -->
-    <view>
+    <view class="header-container">
-      <view class="topBox">
+      <view class="user-info-wrapper">
-        <view class="top_inder">
+        <view class="avatar-container">
-          <view class="top_left">
-            <view class="left_img">
           <image
-                class="headerimg"
+            class="avatar-image"
             :src="
               userInfo.headPath
                 ? userInfo.headPath
                 : userInfo.settleCountryCircularIcon
             "
-                mode=""
+            mode="aspectFill"
           >
           </image>
         </view>
-
+        <view class="user-details">
-            <view class="left_text">
+          <view class="user-name-and-level">
-              <view class="name_box">
+            <text class="user-name">{{ userInfo.memberCode }}</text>
-                <view class="tTit1">{{ userInfo.memberCode }}</view>
+            <view class="svip-badge">
+              <text class="svip-text">{{ userInfo.pkGradeVal || '-' }}</text>
+            </view>
+          </view>
+          <view class="awards-container">
+            <view class="award-tag">
+              <!-- <u-icon name="star-fill" color="#FAD65A" size="14"></u-icon> -->
+              <text class="award-label">荣誉奖衔:</text>
+              <text class="award-value">{{
+                userInfo.pkMaxAwardsVal || userInfo.pkAwardsVal || '无'
+              }}</text>
+            </view>
+            <view class="award-tag">
+              <!-- <u-icon name="star-fill" color="#FAD65A" size="14"></u-icon> -->
+              <text class="award-label">当月奖衔:</text>
+              <text class="award-value">{{
+                userInfo.pkAwardsVal || '无'
+              }}</text>
+            </view>
+          </view>
+        </view>
+      </view>
       <view
-                  style="margin-left: 20rpx"
+        class="settings-icon-container"
-                  class="level_tag level_tag--primary"
+        @click="goTo('/pages/userData/index')"
       >
-                  <text class="level_value">{{
-                    userInfo.pkGradeVal || '-'
-                  }}</text>
-                </view>
-              </view>
-              <view class="level_box">
-                <view style="display: flex; flex-direction: column; gap: 10rpx">
-                  <view class="level_tag">
-                    <u-icon name="star" color="#005BAC" size="14"></u-icon>
-                    <text class="level_label">荣誉奖衔</text>
-                    <text class="level_value">{{
-                      userInfo.pkMaxAwardsVal || userInfo.pkAwardsVal
-                    }}</text>
-                  </view>
-                  <view class="level_tag">
-                    <u-icon name="star" color="#005BAC" size="14"></u-icon>
-                    <text class="level_label">当月奖衔</text>
-                    <text class="level_value">{{
-                      userInfo.pkAwardsVal || '-'
-                    }}</text>
-                  </view>
-                </view>
-              </view>
-            </view>
-          </view>
-          <view class="top_right" @click="goTo('/pages/userData/index')">
-            <view class="ricon">
         <u-icon color="#ffffff" size="22" name="setting-fill"></u-icon>
       </view>
     </view>
-        </view>
-      </view>
-
-      <!-- <view class="ju_grade" v-if="false">
-        <view class="jugrade_flex">
-          <view class="ju_left">
-            <view v-if="awards.tarAwardsName" class="yestDay">
-              <view class="yes_t">奖衔晋升</view>
-              <view class="ju_left_bottom sprint-progress-container">
-                <view
-                  class="sprint-current-progress"
-                  :style="{ width: sprintProgress.percentageString }"
-                ></view>
-                <view class="cha sprint-progress-text">
-                  晋升
-                  <span class="award-name">{{ awards.tarAwardsName }}</span>
-                  小区仅需
-                  <span class="award-amount">{{
-                    sprintProgress.achieved
-                  }}</span>
-                </view>
-              </view>
-            </view>
-            <view class="yestDay">
-              <view class="yes_t">昨日业绩</view>
-              <view
-                :class="
-                  awards.aNewPv != 0 && awards.bNewPv != 0
-                    ? 'ju_left_bottom1'
-                    : 'ju_left_bottom'
-                "
-              >
-                <view
-                  class="current-progress"
-                  :style="{
-                    width: yesPercent(awards.aNewPv, awards.bNewPv),
-                  }"
-                ></view>
-                <view class="cha">
-                  左区 {{ awards.aNewPv || 0 }}/右区 {{ awards.bNewPv || 0 }}
-                </view>
-              </view>
-            </view>
-            <view class="yestDay">
-              <view class="yes_t">当月业绩</view>
-              <view
-                :class="
-                  awards.aMonthPv != 0 && awards.bMonthPv != 0
-                    ? 'ju_left_bottom1'
-                    : 'ju_left_bottom'
-                "
-              >
-                <view
-                  class="current-progress"
-                  :style="{
-                    width: yesPercent(awards.aMonthPv, awards.bMonthPv),
-                  }"
-                ></view>
-                <view class="cha">
-                  左区 {{ awards.aMonthPv || '0.00' }}/右区
-                  {{ awards.bMonthPv || '0.00' }}
-                </view>
-              </view>
-            </view>
-            <view class="yestDay">
-              <view class="yes_t">{{ '历史业绩' }}</view>
-              <view
-                :class="
-                  awards.aSumPv != 0 && awards.bSumPv != 0
-                    ? 'ju_left_bottom1'
-                    : 'ju_left_bottom'
-                "
-              >
-                <view
-                  class="current-progress"
-                  :style="{
-                    width: yesPercent(awards.aSumPv, awards.bSumPv),
-                  }"
-                ></view>
-                <view class="cha">
-                  左区 {{ awards.aSumPv }}/右区 {{ awards.bSumPv }}</view
-                >
-              </view>
-            </view>
-          </view>
-        </view>
-      </view> -->
 
     <!-- 新增信息展示 -->
     <view
@@ -255,12 +160,20 @@
     <view class="my_order">
       <view class="my_title">
         <text class="thetitle">{{ '我的订单' }}</text>
-          <view class="findallorder" @click="goTo('/pages/mine/order/index')">
+        <!-- <view class="findallorder" @click="goTo('/pages/mine/order/index')">
           <text>{{ '全部订单' }}</text>
           <u-icon name="arrow-right" color="#999999" size="16rpx"></u-icon>
-          </view>
+        </view> -->
       </view>
       <view class="order_flex thepadding" style="justify-content: center">
+        <view
+          class="theorderflex1"
+          style="margin-bottom: 0"
+          @click="goOrder('')"
+        >
+          <image class="order_img2" src="../../static/images/myorder_1.png" />
+          <view class="order_text">全部订单</view>
+        </view>
         <view
           class="theorderflex1"
           style="margin-bottom: 0"
@@ -394,7 +307,6 @@
         :text="'退出登录'"
       ></u-button>
     </view>
-    </view>
     <cl-tabbar :current="4"></cl-tabbar>
     <u-popup
       :show="pswShow"
@@ -1085,174 +997,117 @@ export default {
     #005bac 25%,
     #f2f2f2 40%
   ); // background-position: top;
+}
 
-  .topBox {
+.header-container {
-    padding: 43rpx 0 20rpx 0;
-
-    .top_inder {
   display: flex;
   justify-content: space-between;
+  align-items: flex-start;
+  padding: 40rpx 0;
+  color: #ffffff;
+  position: relative;
+  padding-bottom: 30rpx; // Add some bottom padding
+}
 
-      .top_left {
+.user-info-wrapper {
   display: flex;
+  align-items: center;
+  gap: 24rpx;
+}
 
-        .left_img {
+.avatar-container {
-          width: 90rpx;
+  width: 110rpx;
-          height: 90rpx;
+  height: 110rpx;
   border-radius: 50%;
-          border: 5rpx solid #ffffff;
+  border: 4rpx solid rgba(255, 255, 255, 0.5);
-          margin-right: 18rpx;
+  overflow: hidden;
+  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
 
-          .headerimg {
+  .avatar-image {
     width: 100%;
     height: 100%;
-            border-radius: 50%;
   }
 }
 
-        .left_text {
+.user-details {
-          color: #ffffff;
   display: flex;
   flex-direction: column;
-          justify-content: center;
+  gap: 16rpx;
-          gap: 12rpx;
+}
 
-          .name_box {
+.user-name-and-level {
   display: flex;
   align-items: center;
+  gap: 16rpx;
 
-            .tTit1 {
+  .user-name {
-              font-size: 32rpx;
+    font-size: 36rpx;
-              font-family: Source Han Sans CN;
     font-weight: bold;
-              margin-right: 0;
+    color: #fff;
   }
 
-            .kuang {
+  .svip-badge {
-              background-color: rgba(0, 0, 0, 0.25);
+    background: linear-gradient(145deg, #fde468, #fad02c);
-              padding: 14rpx 18rpx;
-              border-radius: 40rpx;
-              font-size: 20rpx;
-            }
-          }
-
-          .level_box {
-            display: flex;
-            flex-direction: column;
-            align-items: flex-start;
-            gap: 10rpx;
-          }
-
-          .level_tag {
-            background: linear-gradient(145deg, #c5d8e8, #afc8de, #9ab5d0);
-            border: 1rpx solid #8ca3b8;
-            padding: 6rpx 18rpx;
-            border-radius: 50px;
-            display: inline-flex;
-            align-items: center;
-            gap: 10rpx;
-            position: relative;
-            overflow: hidden;
-            color: #003e7c;
-            box-shadow:
-              inset 0 1px 1px rgba(255, 255, 255, 0.3),
-              0 1px 2px rgba(0, 0, 0, 0.15);
-          }
-
-          .level_tag--primary {
-            background: linear-gradient(145deg, #fde468, #fad02c, #e5b40a);
-            border: 1rpx solid #c8a000;
     color: #5d4203;
+    padding: 4rpx 16rpx;
+    border-radius: 50px;
+    font-size: 22rpx;
+    font-weight: 600;
     box-shadow:
       inset 0 1px 1px rgba(255, 255, 255, 0.4),
       0 1px 2px rgba(0, 0, 0, 0.15);
+    border: 1rpx solid #c8a000;
+  }
 }
 
-          .level_label {
+.awards-container {
-            font-size: 20rpx;
+  display: flex;
-            opacity: 0.9;
+  flex-direction: column;
+  gap: 8rpx;
+  align-items: flex-start;
 }
 
-          .level_value {
+.award-tag {
+  background-color: rgba(255, 255, 255, 0.15);
+  padding: 8rpx 16rpx;
+  border-radius: 50px;
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
   font-size: 22rpx;
-            font-weight: 600;
+
+  .award-label {
+    opacity: 0.8;
   }
+  .award-value {
+    font-weight: 500;
   }
 }
 
-      .top_right {
+.settings-icon-container {
-        position: absolute;
+  padding: 10rpx;
-        top: 40rpx;
+  background-color: rgba(255, 255, 255, 0.1);
-        right: 3%;
+  border-radius: 50%;
-        color: #ffffff;
-        .rtitle {
-          font-size: 22rpx;
-          font-family: PingFang SC;
-          font-weight: 400;
-        }
-      }
-    }
-
-    .grade_left {
   display: flex;
   align-items: center;
-      font-size: 12px;
+  justify-content: center;
-      color: #005bac;
+  cursor: pointer;
-      font-weight: 400;
+  margin-top: 10rpx; // Align vertically with user name
-      // margin-left: 20rpx;
-      .gra_left1 {
-        background: #ffffff;
-        border: 1rpx solid #ffffff;
-        border-radius: 20rpx 0 20rpx 20rpx;
-        // margin-right: 30rpx;
-        padding: 6rpx 20rpx;
-        display: flex;
-        align-items: center;
-
-        .gra_icon {
-          width: 26rpx;
-          height: 26rpx;
-          margin-right: 6rpx;
-        }
-      }
-      // .gra_left1:last-child {
-      //   margin-left: 20rpx;
-      // }
 }
 
-    .grade_flex {
-      display: flex;
-      align-items: center;
-      color: #ffffff;
-    }
-
-    .btom_inder {
-      display: flex;
-      align-items: center; // margin-top: 24rpx;
-
-      .jxbox {
-        width: 65rpx;
-        height: 65rpx;
-        margin-right: 26rpx;
-
-        .jximg {
-          width: 100%;
-          height: 100%;
-        }
-      }
-    }
-  }
 .jiangxian {
   display: flex;
   color: #ffffff;
   align-items: center;
   margin: 0rpx 0 10rpx 0;
 }
+
 .yt1 {
   font-weight: 600;
   font-size: 18px;
   margin-left: 10rpx;
 }
+
 .hisImg {
   width: 50rpx;
   height: 50rpx;
@@ -1263,10 +1118,12 @@ export default {
   flex: 1;
   text-align: center;
 }
+
 .jxTit1 {
   font-weight: 600;
   font-size: 24rpx;
 }
+
 .contentLink {
   .linktitle {
     font-size: 28rpx;
@@ -1300,7 +1157,6 @@ export default {
     margin-left: 25rpx;
   }
 }
-}
 
 ::v-deep .u-line {
   border: none !important;

pages/pay/index.vue

@@ -420,7 +420,7 @@
               <div style="white-space: nowrap">{{ '收货地址' }}</div>
               <div>
                 {{ orderData.recProvince }}{{ orderData.recCity
-                }}{{ orderData.recAddress }}
+                }}{{ orderData.recCounty }}{{ orderData.recAddress }}
               </div>
             </div>
           </div>
@@ -456,7 +456,7 @@
               <div style="white-space: nowrap">{{ '收货地址' }}</div>
               <div>
                 {{ orderData.recProvince }}{{ orderData.recCity
-                }}{{ orderData.recAddress }}
+                }}{{ orderData.recCounty }}{{ orderData.recAddress }}
               </div>
             </div>
           </div>
@@ -492,7 +492,7 @@
               <div style="white-space: nowrap">{{ '收货地址' }}</div>
               <div>
                 {{ orderData.recProvince }}{{ orderData.recCity
-                }}{{ orderData.recAddress }}
+                }}{{ orderData.recCounty }}{{ orderData.recAddress }}
               </div>
             </div>
           </div>