个人中心样式 格式化调整

.eslintrc.json

@@ -47,7 +47,7 @@
     ],
     "quotes": [
       "warn",
-      "double",
+      "single",
       {
         "avoidEscape": true,
         "allowTemplateLiterals": true
@@ -59,7 +59,7 @@
     ],
     "semi": [
       "warn",
-      "always"
+      "never"
     ]
   }
 }

package.json

@@ -2,7 +2,7 @@
   "name": "zsy_quick_app",
   "version": "1.0.0",
   "subversion": {
-    "toolkit": "0.6.5"
+    "toolkit": "0.6.6"
   },
   "description": "",
   "scripts": {
@@ -16,7 +16,7 @@
     "babel-eslint": "^10.0.1",
     "eslint": "^5.12.1",
     "eslint-plugin-hybrid": "0.0.5",
-    "hap-toolkit": "^0.6.5",
+    "hap-toolkit": "^0.6.6",
     "less": "^3.10.3",
     "less-loader": "^5.0.0"
   },

src/api/index.js

@@ -9,3 +9,8 @@ import fly from "./fly";
 export const demoApi = () => {
   return fly.get("/books/male/index");
 };
+
+//充值记录
+export const rechargeApi = () => {
+  return fly.get("/order/chargeRecordLists");
+};

src/api/utils.js

@@ -1,12 +1,14 @@
 import fly from "./fly";
 import qs from "qs";
-import storage from '@system.storage';
-import device from '@system.device';
-
+import storage from "@system.storage";
+import device from "@system.device";
+import request from '@system.request';
+import media from '@system.media';
+import prompt from '@system.prompt';
 // 获取token
 let token = null;
 export const getToken = async () => {
-  if (getToken.promise) return getToken.promise
+  if (getToken.promise) return getToken.promise;
 
   if (!token) token = (await storage.get({ key: "token" })).data;
 
@@ -21,14 +23,16 @@ export const getToken = async () => {
     });
   }
 
-  getToken.promise = getToken.promise.finally(() => {
-    getToken.promise = null;
-  }).then(r => {
-    return setToken(r);
-  })
+  getToken.promise = getToken.promise
+    .finally(() => {
+      getToken.promise = null;
+    })
+    .then(r => {
+      return setToken(r);
+    });
 
   return getToken.promise;
-}
+};
 
 // 登录
 export const login = async () => {
@@ -42,50 +46,111 @@ export const login = async () => {
   let ret = await fly.post("/login", data);
   console.log("login over");
   return ret;
-}
+};
 
 // 检测数据结果
-export const checkResult = (r) => {
+export const checkResult = r => {
   if (!r.data.code) {
     return r.data.data;
   } else {
-    return Promise.reject(r)
+    return Promise.reject(r);
   }
-}
+};
 
 // 刷新token
 const refreshToken = () => {
-  return fly.get("/RefreshToken", {
-    token: token.token
-  }).then(r => {
-    return checkResult(r)
-  }).catch(e => {
-    console.error('刷新token失败')
-    return Promise.reject(e)
-  })
-}
+  return fly
+    .get("/RefreshToken", {
+      token: token.token
+    })
+    .then(r => {
+      return checkResult(r);
+    })
+    .catch(e => {
+      console.error("刷新token失败");
+      return Promise.reject(e);
+    });
+};
 
 // 检查token的有效期
-const checkToken = (t) => {
-  return new Date() < t.time
-}
+const checkToken = t => {
+  return new Date() < t.time;
+};
 
 // 设置token
-const setToken = async (t) => {
+const setToken = async t => {
   token = formatToken(t);
   await storage.set({ key: "token", value: token });
   return t.token;
-}
+};
 
 // 清除token
 export const clearToken = async () => {
-  token = null
-  await storage.delete({ key: 'token' })
-}
+  token = null;
+  await storage.delete({ key: "token" });
+};
 
 // 处理token的格式
-const formatToken = (t) => {
-  t.token = 'Bearer ' + t.token
-  t.time = t.time * 1000 - 5 * 1000 * 60
-  return t
-}
+const formatToken = t => {
+  t.token = "Bearer " + t.token;
+  t.time = t.time * 1000 - 5 * 1000 * 60;
+  return t;
+};
+
+// 下载图片
+export const downImg = photoPath => {
+  //获取图片名
+  let list = photoPath.split(".");
+  let timeValue = new Date().valueOf();
+  /* 获取图片后缀 */
+  let photoExt = list[list.length - 1];
+  /* 设置要保存的图片名 */
+  let filename = `${timeValue}.${photoExt}`;
+  request.download({
+    url: photoPath,
+    filename: filename,
+    success: data => {
+      request.onDownloadComplete({
+        token: data.token,
+        success: data => {
+          /* 保存图片 */
+          media.saveToPhotosAlbum({
+            uri: data.uri,
+            success: () => {
+              prompt.showToast({
+                message: "图片保存成功！"
+              });
+            },
+            fail: (data, code) => {
+              if (code == 201) {
+                prompt.showToast({
+                  message: "授权成功后才能保存图片哦"
+                });
+              } else if (code == 202) {
+                prompt.showToast({
+                  message: "请刷新后重试"
+                });
+              } else if (code == 300) {
+                prompt.showToast({
+                  message: "图片保存失败"
+                });
+              }
+            }
+          });
+        },
+        fail: (data, code) => {
+          if (code == 1000) {
+            prompt.showToast({
+              message: "图片下载失败"
+            });
+          } else if (code == 1001) {
+            prompt.showToast({
+              message: "下载任务不存在"
+            });
+          }
+        }
+      });
+    },
+    fail: () => {}
+  });
+};

src/app.ux

@@ -28,7 +28,8 @@ export default {
   createShortcut: it.hasCreateShortCut,
   data: {
     backClickCount: 0,
-    cutomerQrcode: "https://cdn-novel.iycdm.com/static/img/kefu.jpg"
+    cutomerQrcode: "https://cdn-novel.iycdm.com/static/img/kefu20190331.png",
+    weChat:"wxlxf1099"
   }
 };
 </script>

src/assets/less/index.less

@@ -42,7 +42,7 @@
   align-items: center;
 
   .customer-popup {
-    width: 610px;
+    width: 600px;
     border-radius: 6px;
     background-color: #fff;
     flex-direction: column;
@@ -50,17 +50,38 @@
 
     .title {
       width: 100%;
-      font-size: 36px;
+      font-size: 30px;
       text-align: center;
       color: #333;
-      padding: 30px 0;
+      line-height:104px;
       border-bottom: 2px solid #f7f7f7;
     }
+    .desc{
+      margin:40px 80px;
+      font-size:28px;
+      color:#666;
+      text-align: center;
 
+    }
     image {
-      margin: 20px 0;
-      width: 400px;
-      height: 400px;
+      margin: 0 auto 10px;
+      width: 280px;
+      height: 280px;
+    }
+    .duplication{
+      margin-bottom: 40px;
+    }
+    .duplication-text{
+      font-size:24px;
+    }
+    .duplication-button{
+      color:#EF5952;
+      border:2px solid #EF5952;
+      padding:2px 8px;
+      border-radius: 20px;
+      font-size:20px;
+     margin-left:10px;
+
     }
   }
 }

src/assets/less/my.less

@@ -2,54 +2,25 @@
   flex-direction: column;
 
   .user-info__wrap {
-    background-color: #3284ff;
-    padding: 40px;
+    background-color: #fff;
+    padding: 40px 30px;
 
     image {
-      width: 160px;
-      height: 160px;
-      border-radius: 100px;
+      width: 124px;
+      height: 124px;
+      border-radius: 80px;
+      border-color:#EBEBEB;
+      border-width:2px;
       margin-right: 40px;
     }
 
     text {
-      color: #fff;
-      font-size: 32px;
+      color: #333;
+      font-size: 30px;
     }
   }
 
-  .user-coin__wrap {
-    background-color: #3284ff;
-    justify-content: space-between;
-    align-items: center;
-    padding: 40px 120px;
-    
-    .user-rest {
-      flex-direction: row;
-      justify-content: flex-start;
-      align-items: center;
-      
-      text {
-        color: #fff;
-        font-size: 32px;
-      }
-
-      .rest-coin {
-        color: #ff6060;
-        font-weight: bold;
-      }
-    }
-
-    .pay-btn {
-      background-color: #ff6060;
-      color: #fff;
-      width: 100px;
-      height: 48px;
-      line-height: 48px;
-      text-align: center;
-      border-radius: 6px;
-    }
-  }
+  
 
   .operator-item__wrap {
     flex-direction: column;
@@ -72,6 +43,9 @@
         text {
           font-size: 30px;
           color: #545454;
+          .red{
+            color:#EF5952;
+          }
         }
       }
 
@@ -88,6 +62,15 @@
           width: 12px;
         }
       }
+      .operator-button{
+        background-color: #EF5952;
+        width: 116px;
+        height:44px;
+        border-radius: 4px;
+        color:#fff;
+        text-align: center;
+        font-size: 26px;
+      }
     }
   }
 

src/manifest.json

@@ -9,6 +9,15 @@
     {
       "name": "system.app"
     },
+    { 
+      "name": "system.clipboard" 
+    },
+    { 
+      "name": "system.media" 
+    },
+    { 
+      "name": "system.request" 
+    },
     {
       "name": "system.prompt"
     },
@@ -142,4 +151,4 @@
       }
     }
   }
-}
+}

src/views/Index/index.ux

@@ -24,15 +24,22 @@
       </div>
     </div>
     <div class="stack-popup" @click="closeWrap" if="showPopup">
-      <div class="customer-popup" @click="copyWechat">
+      <div class="customer-popup">
         <text class="title">联系客服</text>
-        <image src="{{$app.$def.data.cutomerQrcode}}"></image>
+        <text class="desc">
+          复制微信号或者保存二维码到本地至微信添加客服好友
+        </text>
+        <image src="{{$app.$def.data.cutomerQrcode}}" @longpress="saveImg"></image>
+        <div class="duplication"><text class="duplication-text">微信号:{{$app.$def.data.weChat}}</text><text class="duplication-button" @click="duplication">复制</text></div>
       </div>
     </div>
   </stack>
 </template>
 
 <script>
+import clipboard from '@system.clipboard';
+import prompt from '@system.prompt';
+import {downImg} from '../../api/utils.js';
 export default {
   private: {
     tabbar: [
@@ -93,8 +100,20 @@ export default {
   closeWrap() {
     this.showPopup = false;
   },
-  copyWechat(e) {
-    e.stopPropagation();
+  //复制客服微信
+  duplication() {
+    clipboard.set({
+      text: this.$app.$def.data.weChat,
+      success: function (data) {
+        prompt.showToast({
+          message: '复制成功！'
+        })
+      },
+    })
+  },
+  //长按保存图片
+  saveImg() {
+    downImg(this.$app.$def.data.cutomerQrcode);
   },
   openCustomer() {
     this.showPopup = true;

src/views/My/index.ux

@@ -4,17 +4,18 @@
       <image src="http://thirdwx.qlogo.cn/mmopen/dOnU7xaqjEYxcrJjHWw4HnyXer3EgjuyibYjzM1ncrtQVpgX8icrXYCnwLpd8htFvg1jrAc88PdE2gVkmKnYByAHrULcMlyOwY/132"></image>
       <text>ID：123123123</text>
     </div>
-    <div class="user-coin__wrap">
-      <div class="user-rest">
-        <text>您还剩</text>
-        <text class="rest-coin">52222</text>
-        <text>书币</text>
-      </div>
-      <text class="pay-btn" @click="pageChange('Pay')">充值</text>
-    </div>
     <div class="operator-item__wrap">
       <div class="operator-item">
         <div class="item-name">
+          <image src="../../assets/imgs/declining.png"></image>
+          <text>您还剩<span class="red">5000</span>书币</text>
+        </div>
+        <text class="operator-button" @click="pageChange('Pay')">
+         充值
+        </text>
+      </div>
+      <div class="operator-item" @click="toUrl('https://sitenlp5w4yepme7xrqz.zhuishuyun.com/sign')">
+        <div class="item-name">
           <image src="../../assets/imgs/sign.png"></image>
           <text>签到</text>
         </div>
@@ -22,8 +23,6 @@
           <image class="arrow" src="../../assets/imgs/arrow-right.png"></image>
         </div>
       </div>
-    </div>
-    <div class="operator-item__wrap">
       <div class="operator-item" @click="pageChange('Recharge')">
         <div class="item-name">
           <image src="../../assets/imgs/recharge_record.png"></image>
@@ -80,6 +79,11 @@ export default {
     router.push({
       uri: `/views/${page}`
     })
+  },
+  toUrl(url) {
+    router.push({
+      uri: url
+    })
   }
 }
 </script>

src/views/Recharge/index.ux

@@ -44,11 +44,17 @@
 
 <script>
 import router from "@system.router";
-
+import {rechargeApi} from "../../api/index";
 export default {
   private: {
     rechargeList: [1, 2, 3, 4, 5, 6, 76, 78]
   },
+   onReady(){
+    console.log('asdasd')
+    rechargeApi().then(r=>{
+      console.log(r,'a')
+    })
+  },
   toPay() {
     router.push({
       uri: "/views/Pay"