uniapp 购买记录样式修改

yudao-ui-app/pages/member_equity/index.vue

@@ -61,7 +61,7 @@
                </view>
              </view>
            </view>
-           <u-navbar leftIcon="" title="会员申请"></u-navbar>
+           <u-navbar leftIcon="" title="会员权益"></u-navbar>
          </view>
 </template>
 

yudao-ui-app/pages/member_others/index.vue

@@ -33,8 +33,27 @@
             <text class="text-content">{{item.gearRemarks}}</text>
           </view>
         </view>
-        <view class="member-prompt">
+     <!--   <view class="member-prompt">
           * 办理三个项目即可升级会员2，会员2享XX权益。
+        </view> -->
+      </view>
+    </view>
+    <view class="box-privilege">
+      <view class=""></view>
+      <view class="box-title">
+        <image src='../../static/images/memberTitle.png'></image>
+      </view>
+      <view class="privilege-list">
+        <view class="privilege-left">
+          <image src='../../static/images/money_look.png'></image>
+          <view class="privilege-text">
+            <text>查看充值注意事项！</text>
+            <text>点击右侧按钮</text>
+          </view>
+        </view>
+        <view class="privilege-right" @click="handleRule">
+          <text>查看</text>
+           <view></view>
         </view>
       </view>
     </view>
@@ -145,6 +164,11 @@
       }
     },
     methods: {
+      handleRule(){
+        uni.navigateTo({
+          url:'/pages/member_rule/index'
+        })
+      },
      async verify(phone){
         if(this.form.userPhone == this.form.confirmPhone){
           const res = await memberByHomeGradeInfo(phone)
@@ -237,7 +261,7 @@
   .box {
     margin-top: 10%;
     position: relative;
-    padding: 8% 40rpx 30rpx 40rpx;
+    padding: 4% 40rpx 10% 40rpx;
     min-height: 100vh;
     background: url(../../static/images/bg.png);
     background-size: cover;
@@ -442,7 +466,7 @@
       box-shadow: 0px 0px 15px -5px #000;
       border-radius: 36rpx;
       width: 100%;
-      margin-top: 12%;
+      margin-top: 9%;
       border-radius: 20px;
       box-sizing: border-box;
       border: 1px solid transparent;
@@ -457,20 +481,20 @@
 
       .box-title {
         position: absolute;
-        top: -9%;
+        top: -37rpx;
         left: -203rpx;
         margin-left: 50%;
 
         image {
           width: 406rpx;
-          height: 87rpx;
+          height: 88rpx;
           position: relative;
           display: flex;
           align-items: center;
           justify-content: center;
 
           &::before {
-            content: '特权详情';
+            content: '注意事项';
             position: absolute;
             font-size: 34rpx;
             font-family: Adobe Heiti Std;
@@ -483,32 +507,66 @@
       }
 
       .privilege-list {
-        margin: 84rpx 10rpx 40rpx 10rpx;
+        width: 100%;
+        margin: 54rpx 30rpx 20rpx 30rpx;
+        min-height: 110rpx;
+        background: #FFFFFF;
+        border-radius: 20rpx;
         display: flex;
+        align-items: center;
         justify-content: space-between;
+        padding: 3% 20rpx 1% 20rpx;
 
-        .privilege-item {
+        .privilege-left {
           display: flex;
-          flex-direction: column;
           align-items: center;
           justify-content: space-between;
-          background: #fff;
-          padding: 16rpx 16rpx;
           border-radius: 20rpx;
-          margin: 0 10rpx;
 
           image {
-            width: 96rpx;
+            width: 68rpx;
-            height: 96rpx;
+            height: 64rpx;
-            border-radius: 50%;
+            margin-right: 12rpx;
-            margin-bottom: 15rpx;
           }
 
           .privilege-text {
-            color: #000000;
+            display: flex;
-            line-height: 36rpx;
+            flex-direction: column;
-            text-align: center;
+            text:nth-child(1){
-            font-size: 26rpx;
+              font-size: 30rpx;
+              font-family: PingFang SC;
+              font-weight: 400;
+              color: #000000;
+            }
+            text:nth-child(2){
+            font-size: 24rpx;
+            font-family: PingFang SC;
+            font-weight: 400;
+            color: #FB394B;
+            }
+          }
+        }
+        .privilege-right{
+          background-image: url("../../static/images/others-button.png");
+          background-size: 144rpx 64rpx;
+          font-size: 28rpx;
+          font-family: PingFang SC;
+          font-weight: 400;
+          color: #FFFFFF;
+          width: 144rpx;
+          height: 64rpx;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          position: relative;
+          view {
+            position: absolute;
+            right: 0;
+            top: -24%;
+            width: 18rpx;
+            height: 6rpx;
+            background: #FEAC49;
+            border-radius: 3rpx;
           }
         }
 
@@ -517,7 +575,7 @@
 
     .box-submit {
       background: linear-gradient(#FFC82B, #FD7A32);
-      margin-top: 9%;
+      margin-top: 4%;
       display: flex;
       justify-content: center;
       align-items: center;

yudao-ui-app/pages/member_record/index.vue

@@ -13,12 +13,12 @@
         <view v-show="item.refundStatus != 0">{{list[item.refundStatus]}}</view>
       </view>
         <view class="item-text">
-        <text>充值档次：{{item.grade}}</text>
         <text>日期：{{$util.timestampToTime(item.stringCreateTime)}}</text>
+        <text>充值档次：{{item.grade}}</text>
         </view>
   </view>
   <u-empty v-show="!memberData.length" text="暂无数据" mode="list"></u-empty>
-  <u-navbar autoBack  title="购买纪录"></u-navbar>
+  <u-navbar autoBack  title="购买记录"></u-navbar>
   </view>
 </template>
 
@@ -101,7 +101,6 @@
   .box {
     margin-top: 10%;
       padding: 20% 40rpx;
-      height: 100vh;
       background: url(../../static/images/memberBg.png);
       background-size: cover;
       background-repeat: no-repeat;
@@ -157,10 +156,11 @@
         }
 
         .item-text{
-          padding: 34rpx 12rpx;
+          padding: 20rpx 12rpx;
           background: #fff;
           margin-top: 20rpx;
           display: flex;
+          flex-direction: column;
           justify-content: space-between;
           font-size: 30rpx;
         }

yudao-ui-app/pages/member_renew/index.vue

@@ -30,11 +30,30 @@
             <text class="text-content">{{item.gearRemarks}}</text>
           </view>
         </view>
-        <view class="member-prompt">
+    <!--    <view class="member-prompt">
           * 办理三个项目即可升级会员2，会员2享XX权益。
-        </view>
+        </view> -->
       </view>
       </view>
+      <view class="box-privilege">
+        <view class=""></view>
+        <view class="box-title">
+          <image src='../../static/images/memberTitle.png'></image>
+        </view>
+        <view class="privilege-list">
+          <view class="privilege-left">
+            <image src='../../static/images/money_look.png'></image>
+            <view class="privilege-text">
+              <text>查看充值注意事项！</text>
+              <text>点击右侧按钮</text>
+            </view>
+          </view>
+          <view class="privilege-right" @click="handleRule">
+            <text>查看</text>
+             <view></view>
+          </view>
+        </view>
+      </view>
     <paymentMember :payMode='payMode' :pay_close="pay_close" @onChangeFun='onChangeFun' :payInfo="payInfo"></paymentMember>
     <button class="box-submit" @click="goPay">立即充值</button>
   </view>
@@ -118,6 +137,11 @@ import store from '@/store/index';
      }
     },
     methods: {
+      handleRule(){
+        uni.navigateTo({
+          url:'/pages/member_rule/index'
+        })
+      },
       handleMember(value,index){
         if(!!parseInt(value.isExist))  return
         if(this.activeIndex.includes(index)){
@@ -202,7 +226,7 @@ import store from '@/store/index';
 <style lang="scss" scoped>
  .box {
    position: relative;
-    padding: 8% 40rpx 30rpx 40rpx;
+   padding: 4% 40rpx 10% 40rpx;
     min-height: 100vh;
    background: url(../../static/images/bg.png);
    background-size: cover;
@@ -403,87 +427,120 @@ import store from '@/store/index';
       }
     }
      }
+.box-privilege {
+      box-shadow: 0px 0px 15px -5px #000;
+      border-radius: 36rpx;
+      width: 100%;
+      margin-top: 9%;
+      border-radius: 20px;
+      box-sizing: border-box;
+      border: 1px solid transparent;
+      background-image: linear-gradient(#FFD55D, #FD752F),
+        linear-gradient(to bottom, #FFEBB2, #FDCB3B);
+      background-origin: border-box;
+      background-clip: content-box, border-box;
+      border-radius: 20px;
+      display: flex;
+      flex: 1;
+      position: relative;
 
-   .box-privilege {
+      .box-title {
-     box-shadow: 0px 0px 15px -5px #000;
+        position: absolute;
-     border-radius: 36rpx;
+        top: -37rpx;
-     width: 100%;
+        left: -203rpx;
-     margin-top: 12%;
+        margin-left: 50%;
-     border-radius: 20px;
-     box-sizing: border-box;
-     border: 1px solid transparent;
-     background-image: linear-gradient(#FFD55D, #FD752F),
-       linear-gradient(to bottom, #FFEBB2, #FDCB3B);
-     background-origin: border-box;
-     background-clip: content-box, border-box;
-     border-radius: 20px;
-     display: flex;
-     flex: 1;
-     position: relative;
 
-     .box-title {
+        image {
-       position: absolute;
+          width: 406rpx;
-       top: -9%;
+          height: 88rpx;
-       left: -203rpx;
+          position: relative;
-       margin-left: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
 
-       image {
+          &::before {
-         width: 406rpx;
+            content: '注意事项';
-         height: 87rpx;
+            position: absolute;
-         position: relative;
+            font-size: 34rpx;
-         display: flex;
+            font-family: Adobe Heiti Std;
-         align-items: center;
+            font-weight: normal;
-         justify-content: center;
+            color: #FF4B47;
+            text-shadow: 1px 5px 5px rgba(255, 195, 30, 0.78);
+          }
+        }
 
-         &::before {
+      }
-           content: '特权详情';
-           position: absolute;
-           font-size: 34rpx;
-           font-family: Adobe Heiti Std;
-           font-weight: normal;
-           color: #FF4B47;
-           text-shadow: 1px 5px 5px rgba(255, 195, 30, 0.78);
-         }
-       }
 
-     }
+      .privilege-list {
+        width: 100%;
+        margin: 54rpx 30rpx 20rpx 30rpx;
+        min-height: 110rpx;
+        background: #FFFFFF;
+        border-radius: 20rpx;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 3% 20rpx 1% 20rpx;
 
-     .privilege-list {
+        .privilege-left {
-       margin: 84rpx 10rpx 40rpx 10rpx;
+          display: flex;
-       display: flex;
+          align-items: center;
-       justify-content: space-between;
+          justify-content: space-between;
+          border-radius: 20rpx;
 
-       .privilege-item {
+          image {
-         display: flex;
+            width: 68rpx;
-         flex-direction: column;
+            height: 64rpx;
-         align-items: center;
+            margin-right: 12rpx;
-         justify-content: space-between;
+          }
-         background: #fff;
-         padding: 16rpx 16rpx;
-         border-radius: 20rpx;
-         margin: 0 10rpx;
 
-         image {
+          .privilege-text {
-           width: 96rpx;
+            display: flex;
-           height: 96rpx;
+            flex-direction: column;
-           border-radius: 50%;
+            text:nth-child(1){
-           margin-bottom: 15rpx;
+              font-size: 30rpx;
-         }
+              font-family: PingFang SC;
+              font-weight: 400;
+              color: #000000;
+            }
+            text:nth-child(2){
+            font-size: 24rpx;
+            font-family: PingFang SC;
+            font-weight: 400;
+            color: #FB394B;
+            }
+          }
+        }
+        .privilege-right{
+          background-image: url("../../static/images/others-button.png");
+          background-size: 144rpx 64rpx;
+          font-size: 28rpx;
+          font-family: PingFang SC;
+          font-weight: 400;
+          color: #FFFFFF;
+          width: 144rpx;
+          height: 64rpx;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          position: relative;
+          view {
+            position: absolute;
+            right: 0;
+            top: -24%;
+            width: 18rpx;
+            height: 6rpx;
+            background: #FEAC49;
+            border-radius: 3rpx;
+          }
+        }
 
-         .privilege-text {
+      }
-           color: #000000;
+    }
-           line-height: 36rpx;
-           text-align: center;
-           font-size: 26rpx;
-         }
-       }
-
-     }
-   }
 
    .box-submit {
      background: linear-gradient(#FFC82B, #FD7A32);
-      margin-top: 9%;
+      margin-top: 6%;
      display: flex;
      justify-content: center;
      align-items: center;