个人中心

src/assets/less/my.less

@@ -4,7 +4,7 @@
   .my_title {
     height: 112px;
     width: 100%;
-    background-color:  #61A9C0;;
+    background-color: #61A9C0;
     // position: fixed;
     // top: 0;
     // left: 0;
@@ -21,74 +21,88 @@
     justify-content: center;
     color: #999;
     font-size: 20px;
-    text-align: center;
+
     .line {
       padding: 0 20px;
     }
   }
-  .my-collect {
-    width: 720px;
-    height: 150px;
-    background: linear-gradient(to right, #e5401c, #ff914f);
+
+  .my-collect-box {
+   
+    margin:  25px 30px;
     border-radius: 20px;
-    margin: 300px auto 0;
-    padding: 30px;
-    justify-content: space-between;
-    align-items: center;
-    .collect-content {
-      flex-direction: column;
+    flex-direction: column;
+    background-color: #fff;
+    .task-box{
+      width: 690px;
+      padding: 8px 30px 30px 30px;
+      border-radius: 20px;
+      .task-rukou-img{
+        width: 100%;
+        border-radius: 20px;
+      }
+    }
+
+    .my-collect {
+      width: 690px;
+      height: 150px;
+      
+      border-radius: 20px;
+      padding: 30px;
       justify-content: space-between;
-      height: 100%;
-      flex-grow: 1;
+      align-items: center;
 
-      .coin_wrap {
+      .collect-content {
         flex-direction: column;
-        .coin {
-          display: inline-block;
-          color: #fff;
+        justify-content: space-between;
+        height: 100%;
+        flex-grow: 1;
+
+        .book_coin {
+          color: #333;
         }
-        text {
-          color: white;
+
+        .collect-info {
+          .vip-card {
+            background-color: #61A9C0;;
+            color: #cd8119;
+            border: 1px solid rgba(205, 129, 25, 1);
+            border-radius: 22px;
+            padding: 4px 15px;
+            font-size: 26px;
+            margin-left: 15px;
+          }
+
+          color: #000;
+          flex-direction: row;
+
+          .title {
+            font-size: 30px;
+            font-weight: bold;
+          }
         }
       }
-      .arrow {
-        float: right;
-      }
-      .collect-info {
-        .vip-card {
-          color: #f8e2b2;
-          border: 1px solid #F8E2B2;
-          border-radius: 22px;
-          padding: 4px 15px;
-          font-size: 26px;
-          margin-left: 15px;
-        }
-        color: white;
-        flex-direction: row;
-        .title {
-          font-size: 30px;
-          font-weight: bold;
-        }
+
+      .pay-btn {
+        width: 150px;
+        height: 60px;
+        background-color: #61A9C0;
+        border-radius: 30px;
+        align-items: center;
+        text-align: center;
+        color: #fff;
+        font-size: 30px;
       }
     }
-    .pay-btn {
-      width: 150px;
-      height: 60px;
-      background-color: #fff2d6;
-      border-radius: 30px;
-      align-items: center;
-      text-align: center;
-      color: #0a0e2e;
-      font-size: 30px;
-    }
   }
+
   .user-info__wrap {
-    background-color:#61A9C0;
+    background-color: #61A9C0;
     padding: 40px 30px 80px 30px;
     align-items: center;
-    margin-bottom: 140px;
+   
     width: 100%;
-    justify-content: space-between;
+
     image {
       width: 124px;
       height: 124px;
@@ -99,18 +113,20 @@
     }
 
     text {
-      color: black;
+      color: #fff;
       font-size: 30px;
     }
   }
+
   .uesr-info__message {
     flex-direction: column;
     justify-content: space-around;
     height: 124px;
+
     .un-Login {
       width: 120px;
       height: 50px;
-      background-color: #fff;
+      background-color: #61A9C0;
       border-radius: 30px;
       border: 1px solid #ffffff;
       justify-content: center;
@@ -120,82 +136,101 @@
     }
   }
 
-  .operator-item__wrap {
-    width: 100%;
+  .my_coupon_text {
+    width: 95%;
+    background-color: white;
+    margin: 0 auto;
+
+    text {
+      font-size: 30px;
+      font-weight: 900;
+      margin: 10px 40px;
+      color: #000000;
+
+    }
+  }
+
+  .my_coupon {
+    height: 200px;
+    width: 95%;
+    background-color: white;
+    margin: 0 auto 30px;
+    border-radius: 20px;
+
+    .operator-item {
+      margin: 0 auto;
+
+      image {
+        margin-top: 30px;
+        height: 134px;
+        width: 300px;
+      }
+    }
+  }
+
+  .operator-wrap {
     flex-direction: column;
-    background-color: #fff;
-    margin-bottom: 220px;
-    .task_wrap {
-      height: 200px;
-      background-color: #f2f2f2;
-      .task_wrap_item {
-        background-color: white;
-        width: 100%;
-        height: 90%;
-        .operator-item {
-          flex-direction: column;
-          text-align: center;
-          margin: 0 auto;
+    padding: 0 30px;
+    border-radius: 50px;
+
+    .operator-item__wrap {
+      flex-direction: column;
+      background-color: #fff;
+      margin-bottom: 220px;
+      border-radius: 20px;
+      .operator-item {
+        padding: 34px 26px;
+        border-bottom: 2px solid #f7f7f7;
+        justify-content: space-between;
+        align-items: center;
+
+        .item-name {
+          flex: 1;
+
+          .orange {
+            color: #cd8119;
+          }
+
           image {
-            height: 50px;
-            width: 50px;
+            width: 40px;
+
+            margin-right: 40px;
           }
+
           text {
-            font-size: 28px;
-            margin-top: 5px;
-            color: #333333;
-            font-weight: 400;
+            font-size: 30px;
+            color: #545454;
+
+            .red {
+              color: #ef5952;
+            }
           }
         }
-      }
-    }
-    .operator-item {
-      padding: 34px 26px;
-      border-bottom: 2px solid #f7f7f7;
-      justify-content: space-between;
-      align-items: center;
 
-      .item-name {
-        flex: 1;
-        .orange {
-          color: #cd8119;
-        }
-        image {
-          width: 40px;
-          margin-right: 40px;
-        }
+        .info-text {
+          align-items: center;
 
-        text {
-          font-size: 30px;
-          color: #545454;
-          .red {
-            color: #ef5952;
+          text {
+            font-size: 24px;
+            color: #999;
+            margin-right: 20px;
           }
-        }
-      }
-
-      .info-text {
-        align-items: center;
 
-        text {
-          font-size: 24px;
-          color: #999;
-          margin-right: 20px;
+          .arrow {
+            width: 12px;
+          }
         }
 
-        .arrow {
-          width: 12px;
+        .operator-button {
+          background-color: #ef5952;
+          width: 116px;
+          height: 44px;
+          border-radius: 4px;
+          color: #fff;
+          text-align: center;
+          font-size: 26px;
         }
       }
-      .operator-button {
-        background-color: #ef5952;
-        width: 116px;
-        height: 44px;
-        border-radius: 4px;
-        color: #fff;
-        text-align: center;
-        font-size: 26px;
-      }
     }
   }
 
@@ -204,4 +239,4 @@
     height: 100%;
     background-color: rgba(0, 0, 0, 0.4);
   }
-}
+}

src/views/My/index.ux

@@ -1,155 +1,96 @@
 <template>
   <div class="user-wrap">
     <div class="my_title"><text>我的</text></div>
-    <list style="width:100%">
-      <list-item type="mycollect" style="height:440px">
-        <stack style="background-color:#fff">
-          <div class="user-info__wrap">
-             <image
-              src="../../assets/imgs/user_login.png"
-              if="{{haslogin && loginPhone}}"
-            ></image>
-            <image src="../../assets/imgs/user_logo.png" else></image>
-            <div class="uesr-info__message">
-              <text class="user-name" if="{{haslogin && loginPhone}}"
-                >书友{{ user.id }}</text
-              >
-              <text class="un-Login" @click="goToLogin" else>未登录</text>
-              <text>ID：{{ user.id }}</text>
-              <!-- <text class="vip-card" if="{{user.is_vip}}">免费阅读卡还剩{{ user.vip_days }}</text> -->
-            </div>
-           
-          </div>
-          <div class="my-collect">
-            <!-- if="{{user.is_vip}}" -->
-            <div class="collect-content">
-              <div class="coin_wrap">
-                <div>
-                  <!--  -->
-                  <text>我的账户</text>
-                  <text class="collect-info"
-                    ><span class="vip-card" if="{{user.is_vip}}"
-                      >免费阅读卡还剩{{ user.vip_days }}</span
-                    ></text
-                  >
-                </div>
-                <div style="padding:5px">
-                  <text class="book_coin">书币: </text>
-                  <text class="coin">{{ user.balance }}</text>
-                </div>
-              </div>
-            </div>
-            <text class="pay-btn" @click="pageChange('Pay')">充值</text>
+    <div class="user-info__wrap">
+      <image
+        src="../../assets/imgs/user_login.png"
+        if="{{haslogin && loginPhone}}"
+      ></image>
+      <image src="../../assets/imgs/user_logo.png" else></image>
+      <div class="uesr-info__message">
+        <text class="user-name" if="{{haslogin && loginPhone}}"
+          >书友{{ user.id }}</text
+        >
+        <text class="un-Login" @click="goToLogin" else>未登录</text>
+        <text>ID：{{ user.id }}</text>
+      </div>
+    </div>
+    
+
+    <div class="my-collect-box">
+      <div class="my-collect">
+          <div class="collect-content">
+        <text class="collect-info"
+          ><span class="title">我的账户</span
+          ><span class="vip-card" if="{{user.is_vip}}"
+            >免费阅读卡还剩{{ user.vip_days }}</span
+          ></text
+        >
+        <text class="book_coin">书币:{{ user.balance }}</text>
+      </div>
+      <text class="pay-btn" @click="pageChange('Pay')">充值</text>
+      </div>
+      <div class="task-box">
+        <image class="task-rukou-img" src="../../assets/imgs/task-rukou.png"></image>
+      </div>
+    </div>
+    <div class="operator-wrap">
+      <div class="operator-item__wrap">
+        <div class="operator-item" for="item in set_list" @click="pageChange(item.url)">
+          <div class="item-name">
+            <image src="{{item.icon}}"></image>
+            <text>{{item.title}}</text>
           </div>
-        </stack>
-      </list-item>
-      <list-item type="myitem">
-        <div class="operator-item__wrap">
-          <div class="task_wrap">
-            <div class="task_wrap_item">
-              <div @click="pageChange('Task')" class="operator-item">
-                <image src="../../assets/imgs/task.png"></image>
-                <text>任务福利</text>
-              </div>
-              <div class="operator-item" @click="pageChange('Sign')">
-                <image src="../../assets/imgs/sign.png"></image>
-                <text>签到记录</text>
-              </div>
-              <div class="operator-item" @click="pageChange('Recharge')">
-                <image src="../../assets/imgs/recharge_record.png"></image>
-                <text>充值记录</text>
-              </div>
-              <div class="operator-item" @click="pageChange('Consume')">
-                <image src="../../assets/imgs/consume_record.png"></image>
-                <text>消费记录</text>
-              </div>
-            </div>
+          <div class="info-text" if="{{item.arrow}}">
+            <image
+              class="arrow"
+              src="../../assets/imgs/arrow-right.png"
+            ></image>
           </div>
-
-          <div class="operator-item" @click="showCustomerQrcode">
-            <div class="item-name">
-              <image src="../../assets/imgs/customer.png"></image>
-              <text>联系客服</text>
-            </div>
-            <div class="info-text">
-              <image
-                class="arrow"
-                src="../../assets/imgs/arrow-right.png"
-              ></image>
-            </div>
+        </div>
+        <div class="operator-item" @click="showCustomerQrcode">
+          <div class="item-name">
+            <image src="../../assets/imgs/customer.png"></image>
+            <text>联系客服</text>
           </div>
-          <div class="operator-item" @click="pageChange('Agreement')">
-            <div class="item-name">
-              <image src="../../assets/imgs/Agreement.png"></image>
-              <text>用户协议</text>
-            </div>
-            <div class="info-text">
-              <image
-                class="arrow"
-                src="../../assets/imgs/arrow-right.png"
-              ></image>
-            </div>
+          <div class="info-text">
+            <image
+              class="arrow"
+              src="../../assets/imgs/arrow-right.png"
+            ></image>
           </div>
-          <div class="operator-item" @click="pageChange('Privacy')">
-            <div class="item-name">
-              <image src="../../assets/imgs/Privacy.png"></image>
-              <text>隐私协议</text>
-            </div>
-            <div class="info-text">
-              <image
-                class="arrow"
-                src="../../assets/imgs/arrow-right.png"
-              ></image>
-            </div>
+        </div>
+        <div class="operator-item" @click="pageChange('Phone')">
+          <div class="item-name">
+            <image src="../../assets/imgs/binding.png"></image>
+            <text if="{{!(haslogin && loginPhone)}}"> 登录绑定</text>
+            <text else>退出登录</text>
           </div>
-          <div class="operator-item" @click="pageChange('Phone')">
-            <div class="item-name">
-              <image src="../../assets/imgs/binding.png"></image>
-              <text if="{{!(haslogin && loginPhone)}}"> 登录绑定</text>
-              <text else>退出登录</text>
-            </div>
-            <div class="info-text">
-              <text if="{{!(haslogin && loginPhone)}}"></text>
-              <text else>已绑定手机号</text>
-              <image
-                class="arrow"
-                src="../../assets/imgs/arrow-right.png"
-              ></image>
-            </div>
+          <div class="info-text">
+            <text if="{{!(haslogin && loginPhone)}}"></text>
+            <text else>已绑定手机号</text>
+            <image
+              class="arrow"
+              src="../../assets/imgs/arrow-right.png"
+            ></image>
           </div>
-          <div
-            class="operator-item"
-            @click="pageChange('Cancellation', { fee: user.balance })"
-            if="{{!send_order_id && haslogin && loginPhone}}"
-          >
-            <div class="item-name">
-              <image src="../../assets/imgs/Privacy.png"></image>
-              <text>注销账号</text>
-            </div>
-            <div class="info-text">
-              <image
-                class="arrow"
-                src="../../assets/imgs/arrow-right.png"
-              ></image>
-            </div>
-          </div></div
-      ></list-item>
-      <list-item type="bottominfo">
-        <div class="bottom-info">
-          <!-- <text @click="pageChange('Agreement')">用户协议</text>
+        </div>
+      </div>
+    </div>
+
+    <div class="bottom-info">
+      <text @click="pageChange('Agreement')">用户协议</text>
       <text class="line">|</text>
       <text @click="pageChange('Privacy')">隐私协议</text>
       <text if="{{!send_order_id &&  haslogin && loginPhone}}" class="line"
         >|</text
-      > -->
-          <!-- <text
-            if="{{!send_order_id && haslogin && loginPhone}}"
-            @click="pageChange('Cancellation', { fee: user.balance })"
-            >注销账号</text
-          > -->
-        </div>
-      </list-item></list
-    >
+      >
+      <text
+        if="{{!send_order_id && haslogin && loginPhone}}"
+        @click="pageChange('Cancellation', { fee: user.balance })"
+        >注销账号</text
+      >
+    </div>
   </div>
 </template>
 
@@ -157,8 +98,8 @@
 import router from '@system.router'
 import { getUserInfo } from '../../api/index'
 import prompt from '@system.prompt'
-import webview from '@system.webview'
 import storage from '@system.storage'
+import webview from '@system.webview'
 export default {
   props: {
     tabindex: {
@@ -171,12 +112,36 @@ export default {
       user: {},
       haslogin: undefined,
       loginPhone: undefined,
-      send_order_id: ''
+      send_order_id: '',
+      set_list :[
+        {
+          icon:"../../assets/imgs/sign.png",
+          title:"签到记录",
+          url:"Sign",
+          arrow:true,
+        },{
+          icon:"../../assets/imgs/recharge_record.png",
+          title:"充值记录",
+          url:"Recharge",
+          arrow:true,
+        },{
+          icon:"../../assets/imgs/consume_record.png",
+          title:"消费记录",
+          url:"Consume",
+          arrow:true,
+        }
+      ],
     }
   },
   async onInit() {
     this.$watch('tabindex', 'watchPropsChange')
     this.$on('refreshData', this.broadevt)
+  },goToLogin(){
+    if(!(this.haslogin && this.loginPhone)){
+      router.push({
+        uri: `/views/Phone`
+      })
+    }  
   },
   async getUser() {
     let user = await getUserInfo()
@@ -201,12 +166,6 @@ export default {
   },
   showCustomerQrcode() {
     this.$emit('customer')
-  },goToLogin(){
-    if(!(this.haslogin && this.loginPhone)){
-      router.push({
-        uri: `/views/Phone`
-      })
-    }  
   },
   pageChange(page, params) {
     if (page == 'Phone' && this.haslogin) {
@@ -225,13 +184,12 @@ export default {
       }
     }
     if (page == 'Privacy') {
-      let privacy = this.$app.$def.manifest.config.data.yinsi_addr;
       webview.loadUrl({
-          url:privacy,
-          showloadingdialog: true
-        })
-      }
-    else {
+        url:
+          'https://zhuishuyun.oss-cn-hangzhou.aliyuncs.com/qapp/privacy/qingm_privacy.htm',
+        showloadingdialog: true
+      })
+    } else {
       router.push({
         uri: `/views/${page}`,
         params: params ? params : {}
@@ -258,7 +216,7 @@ export default {
           color: '#9900FF'
         }
       ],
-      success: function (data) {
+      success: function(data) {
         if (data.index == 1) {
           prompt.showToast({
             message: '取消操作'
@@ -270,31 +228,31 @@ export default {
           console.log(data)
           storage.delete({
             key: 'hasLogin',
-            success: function (data) {
+            success: function(data) {
               self.getUser()
               console.log('handling success')
             },
-            fail: function (data, code) {
+            fail: function(data, code) {
               console.log(`handling fail, code = ${code}`)
             }
           })
           storage.delete({
             key: 'loginPhone',
-            success: function (data) {
+            success: function(data) {
               console.log('handling success')
             },
-            fail: function (data, code) {
+            fail: function(data, code) {
               console.log(`handling fail, code = ${code}`)
             }
           })
         }
       },
-      cancel: function () {
+      cancel: function() {
         prompt.showToast({
           message: '取消操作'
         })
       },
-      fail: function (data, code) {
+      fail: function(data, code) {
         console.log(`handling fail, code = ${code}`)
       }
     })