个人中心

src/pages.json

@@ -66,6 +66,18 @@
 			"style": {
 				"navigationBarTitleText": "认证"
 			}
+		},
+		{
+			"path": "pages/mine/customerManage",
+			"style": {
+				"navigationBarTitleText": "客户管理"
+			}
+		},
+		{
+			"path": "pages/mine/myWallet",
+			"style": {
+				"navigationBarTitleText": "我的钱包"
+			}
 		}
 		
 		

src/pages/cardHolder/cardHolder.vue

@@ -196,7 +196,7 @@ export default {
       this.tran = e.detail.x;
       this.vert = e.detail.y;
       if (this.tran <= 188) {
-          console.log('超过中间线了');
+          // console.log('超过中间线了');
           this.tran = 0;
       } else {
           this.tran = 350;

src/pages/index/index.vue

@@ -182,7 +182,7 @@
                           </div>
 
                           <div class="articleBox1">
-                            <img class="articlePic1" src="/static/images/testPic.png">
+                            <img class="articlePic1" src="/static/images/testPic2.png">
                           </div>
 
                           <div class="articleCont1">
@@ -193,7 +193,7 @@
 
                           <div class="articleBox2">
                             <img class="articlePic2" src="/static/images/testPic2.png">
-                            <img class="articlePic3" src="/static/images/testPic3.png">
+                            <img class="articlePic3" src="/static/images/testPic2.png">
                           </div>
 
                           <div class="articleCont2">
@@ -203,7 +203,7 @@
                           </div>
 
                           <div class="articleCont3">
-                            <img class="articlePic4" src="/static/images/testPic3.png">
+                            <img class="articlePic4" src="/static/images/testPic2.png">
                             <p class="text">
                               文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
                             </p>
@@ -255,7 +255,7 @@
                         <div class="modelBox" v-if="showIndex == 3">
                           <div class="eventArticleBox">
                             <img class="eventArticlePic1" src="/static/images/testPic2.png">
-                            <img class="eventArticlePic2" src="/static/images/testPic3.png">
+                            <img class="eventArticlePic2" src="/static/images/testPic2.png">
                           </div>
                         </div>
 
@@ -547,7 +547,7 @@
 
                         <div class="region3">
                           <div class="imgBox">
-                            <img class="contPic" src="/static/images/testPic5.png">
+                            <img class="contPic" src="/static/images/testPic2.png">
                           </div>
                           <div class="bottomDiv">
                             <p class="text">2020-02-03 14:00</p>
@@ -575,7 +575,7 @@
 
                         <div class="region5">
                           <div class="imgBox">
-                            <img class="contPic" src="/static/images/testPic5.png">
+                            <img class="contPic" src="/static/images/testPic2.png">
                             <p class="text">晨练的十大好处</p>
                           </div>
                           <div class="wordDiv">
@@ -604,7 +604,8 @@
                 modelSwitchType: 'card',
                 showIndex: 0,
                 tran: 350,    //横轴
-                vert: 500     //纵轴
+                vert: 500,     //纵轴
+                windowHeight: 0
             }
         },
 
@@ -623,7 +624,6 @@
                 this.modelSwitchType = 'show';
             },
             panel(e) {
-                console.log(e);
                 if (e.currentTarget.dataset.index != this.showIndex) {
                     this.showIndex = e.currentTarget.dataset.index;
                 } else {
@@ -631,54 +631,31 @@
                 }
             },
             handleTouchEnd(e) {
-
-                //方式1：
-                // let xNumLeft = 20 / 750 * wx.getSystemInfoSync().windowWidth;
-                // let xNumRight = 680 / 750 * wx.getSystemInfoSync().windowWidth;
-                // let x = e.mp.changedTouches[0].pageX;
-                // let average = 375 / 750 * wx.getSystemInfoSync().windowWidth;
-                // let yNum = e.mp.changedTouches[0].pageY;
-
-                // if (x <= average) {
-                //     this.tran = 0;
-                //     this.vert = yNum;
-                // } else {
-                //     this.tran = 700;
-                //     this.vert = yNum;
-                // }
-
-                //方式2：
-                // this.tran = e.mp.changedTouches[0].pageX;
-                // this.vert = e.mp.changedTouches[0].pageY - 15;
-
-                // if (this.tran <= 188) {
-                //     console.log('超过中间线了');
-                //     this.tran = 0;
-                // } else {
-                //     this.tran = 350;
-                // }
-                // console.log('X:', this.tran);
-                // console.log('Y:', this.vert);
-                // console.log(wx.getSystemInfoSync());
-            },
-            handleChange(e) {
-              // console.log(e);
-              this.tran = e.detail.x;
-              this.vert = e.detail.y;
-              if (this.tran <= 188) {
-                  console.log('超过中间线了');
-                  this.tran = 0;
+              if (e.mp.changedTouches[0].pageX <= 188) {
+                this.tran = 0;
+              } else {
+                this.tran = 350;
+              }
+              if (this.windowHeight > 0) {
+                this.vert = e.mp.changedTouches[0].pageY - this.windowHeight;
               } else {
-                  this.tran = 350;
+                this.vert = e.mp.changedTouches[0].pageY
               }
-              console.log('X:', this.tran);
-              console.log('Y:', this.vert);
+            },
+            handleChange(e) {
             },
             showWhoCollecMe() {
               wx.navigateTo({
                 url: './showWhoCollecMe'
             });
             }
+        },
+        onPageScroll(e) {
+          if (e.scrollTop > 0) {
+            this.windowHeight = e.scrollTop
+          } else {
+            this.windowHeight = 0
+          }
         }
     }
 </script>

src/pages/mine/authentication.vue

@@ -43,9 +43,7 @@
     </div>
 
     <!--提交按钮-->
-    <div>
-      <p>提交</p>
-    </div>
+    <p class="commitBtn">提交</p>
 
   </div>
 </template>
@@ -54,8 +52,11 @@
 export default {
   data () {
     return {
-      userName: '康娟'
+      userName: ''
     }
+  },
+  onLoad (options) {
+    this.userName = options.userName;
   }
 }
 </script>

src/pages/mine/customerManage.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="cx-customer-manage">
+    
+    <!--头部-->
+    <div class="headDiv">
+        <div class="options">
+          <img class="pic" src="/static/images/mine-crm/crm-collect.png">
+          <p class="text">谁收藏了我</p>
+        </div>
+        <div class="options">
+          <img class="pic" src="/static/images/mine-crm/crm-looks-me.png">
+          <p class="text">谁看过我</p>
+        </div>
+        <div class="options">
+          <img class="pic" src="/static/images/mine-crm/crm-share.png">
+          <p class="text">我的分享</p>
+        </div>
+    </div>
+
+    <!--统计-->
+    <div class="statisticsDiv">
+      <!--今日统计-->
+      <div class="statisticsDetail">
+        <p class="title">今日统计</p>
+        <div class="options">
+          <div class="childs">
+            <p class="num">476</p>
+            <p class="times">被访问次数</p>
+          </div>
+          <div class="empty"></div>
+          <div class="childs">
+            <p class="num">476</p>
+            <p class="times">被收藏次数</p>
+          </div>
+          <div class="empty"></div>
+          <div class="childs">
+            <p class="num">10</p>
+            <p class="times">分享次数</p>
+          </div>
+        </div>
+      </div>
+
+      <!--本月统计-->
+      <div class="statisticsDetail">
+        <p class="title">本月统计</p>
+        <div class="options">
+          <div class="childs">
+            <p class="num">476</p>
+            <p class="times">被访问次数</p>
+          </div>
+          <div class="empty"></div>
+          <div class="childs">
+            <p class="num">476</p>
+            <p class="times">被收藏次数</p>
+          </div>
+          <div class="empty"></div>
+          <div class="childs">
+            <p class="num">10</p>
+            <p class="times">分享次数</p>
+          </div>
+        </div>
+      </div>
+
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      
+    }
+  }
+}
+</script>
+
+<style lang="less">
+
+</style>
+
+
+
+

src/pages/mine/mine.vue

@@ -25,7 +25,7 @@
 
       <!--基本信息-->
       <div class="userInfoDivBox">
-        <div class="optionsDiv toRight">
+        <div class="optionsDiv toRight" @click="toWallet()">
           <img class="img" src="/static/images/money.png">
           <p class="num">{{userInfo.myMoney}}</p>
           <p class="text">我的钱包</p>
@@ -37,7 +37,7 @@
           <p class="text">商品管理</p>
         </div>
 
-        <div class="optionsDiv">
+        <div class="optionsDiv" @click="toCustomerManage()">
           <img class="img" src="/static/images/CRM.png">
           <p class="num">{{userInfo.myCustomerNum}}人</p>
           <p class="text">客户管理</p>
@@ -65,7 +65,7 @@
       </div>
 
       <!--认证-->
-      <div class="optionsBox">
+      <div class="optionsBox" @click="toAuthen(userInfo.name)">
         <div class="imgBox">
           <img class="img" src="/static/images/mine-authen.png">
           <p class="text" v-show="true">●</p>
@@ -114,6 +114,8 @@
         <p class="toMore">&gt;</p>
       </div>
 
+      <p @longpress="tests">测试长按保存图片/分享</p>
+
     </movable-area>
   </div>
 </template>
@@ -138,7 +140,6 @@ export default {
       this.tran = e.detail.x;
       this.vert = e.detail.y;
       if (this.tran <= 188) {
-          console.log('超过中间线了');
           this.tran = 0;
       } else {
           this.tran = 350;
@@ -146,6 +147,43 @@ export default {
       // console.log('X:', this.tran);
       // console.log('Y:', this.vert);
     },
+    toAuthen(name) {
+      wx.navigateTo({
+        url: './authentication?userName=' + name
+      });
+    },
+    toWallet() {
+      wx.navigateTo({
+        url: './myWallet'
+      });
+    },
+    toCustomerManage() {
+      wx.navigateTo({
+        url: './customerManage'
+      });
+    },
+    tests(e) {
+      console.log(e);
+      let arr = ['保存至相册', '分享给好友', '转发至朋友圈'];
+      wx.showActionSheet({
+        itemList: arr,
+        success (res) {
+          console.log(res.tapIndex);
+          switch (res.tapIndex)
+          {
+            case 0:
+              console.log('保存至相册');
+              break;
+            case 1:
+              console.log('分享给好友');
+              break;
+            case 2:
+              console.log('转发至朋友圈');
+              break;
+          }
+        }
+      });
+    }
   }
 
 }

src/pages/mine/myWallet.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="cx-my-wallet">
+    
+    <!--头部DIV-->
+    <div class="headDiv">
+      <p class="num">900.00</p>
+      <p class="text">账户余额</p>
+      <p class="cash">提现</p>
+    </div>
+
+    <p>组件组件组件组件组件组件组件组件组件组件组件</p>
+
+    <!--明细-->
+    <div class="detailDiv" v-for="(item, index) in walletInfo" :key="index">
+      <p class="text">{{item.title}}</p>
+      <div class="timeAndAmount">
+        <p class="time">{{item.time}}</p>
+        <p class="amount" v-text="(item.type == 'income') ? '+' + item.num : '-' + item.num" :class="(item.type == 'income') ? 'reds' : 'greens'"></p>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      walletInfo: [
+        {userId: 101, balance: '900.00', title: '分销佣金', type: 'income', time: '2020-02-02 14:00', num: '6.00'},
+        {userId: 101, balance: '900.00', title: '成功提现', type: 'expend', time: '2020-02-02 14:00', num: '300.00'},
+        {userId: 101, balance: '900.00', title: 'VIP开通', type: 'expend', time: '2020-02-02 14:00', num: '99.00'},
+        {userId: 101, balance: '900.00', title: '分享成功得红包', type: 'income', time: '2020-02-02 14:00', num: '6.00'}
+      ]
+    }
+  }
+}
+</script>
+
+
+<style lang="less">
+
+</style>
+

src/static/images/presonAuthentication.svg

@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1585211884747" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8487" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M0 512C0 229.234759 229.234759 0 512 0s512 229.234759 512 512-229.234759 512-512 512S0 794.765241 0 512z m419.310345 194.630621a35.310345 35.310345 0 0 0 49.399172 1.271172l335.518897-311.931586a35.310345 35.310345 0 0 0-48.075035-51.729655l-309.124413 289.544827-145.125518-149.645241a35.310345 35.310345 0 1 0-50.688 49.169655l168.112552 173.320828z" p-id="8488" fill="#f4ea2a"></path></svg>

src/static/less/cx-style.less

@@ -2869,12 +2869,209 @@
     width: 100%;
     height: 137rpx;
     display: flex;
-    .pic {
+    .pic:not(:last-child) {
       margin-right: 158rpx;
+    }
+    .pic {
       width: 202rpx;
       height: 137rpx;
     }
   }
+  .commitBtn {
+    margin: 129rpx auto;
+    width: 530rpx;
+    height: 96rpx;
+    color: #fff;
+    font-size: 36rpx;
+    line-height: 96rpx;
+    text-align: center;
+    border-radius: 48rpx;
+    background-color: #50A8FC;
+    box-shadow: 0 6rpx 10rpx 0 rgba(4, 62, 119, 0.36);
+  }
+}
+
+/*客户管理(个人中心)*/
+.cx-customer-manage {
+  .headDiv {
+    padding-top: 40rpx;
+    // padding-left: 65rpx;
+    box-sizing: border-box;
+    width: 750rpx;
+    height: 191rpx;
+    display: flex;
+    background:linear-gradient(#88D3FE, #50A8FC);
+    .options:first-child {
+      margin-left: 84rpx;
+    }
+    .options {
+      width: 120rpx;
+      height: 111rpx;
+      flex: 1;
+      .pic {
+        margin-left: 26rpx;
+        width: 68rpx;
+        height: 68rpx;
+      }
+      .text {
+        margin-top: 10rpx;
+        width: 120rpx;
+        height: 33rpx;
+        color: #fff;
+        font-size: 24rpx;
+        text-align: center;
+        line-height: 33rpx;
+      }
+    }
+  }
+  /*统计详情*/
+  .statisticsDiv {
+      width: 750rpx;
+      height: 560rpx;
+      background-color: #F5F5F5;
+    .statisticsDetail {
+      margin-bottom: 20rpx;
+      padding-top: 30rpx;
+      padding-left: 30rpx;
+      box-sizing: border-box;
+      width: 750rpx;
+      height: 260rpx;
+      background-color: #fff;
+      .title {
+        width: 120rpx;
+        height: 42rpx;
+        font-size: 30rpx;
+        color: #434656;
+        line-height: 42rpx;
+      }
+      .options {
+        margin-top: 30rpx;
+        margin-bottom: 70rpx;
+        width: 750rpx;
+        height: auto;
+        display: flex;
+        .childs:not(:last-child) {
+            margin-right: 75rpx;
+        }
+        .childs:first-child {
+          margin-left: 70rpx;
+        }
+        .empty {
+          margin-top: 20rpx;
+          margin-right: 75rpx;
+          width: 1rpx;
+          height: 50rpx;
+          border-left: 1rpx solid #e5e5e5;
+        }
+        .childs {
+          width: 100rpx;
+          height: 82rpx;
+          .num {
+            margin-left: 24rpx;
+            width: 53rpx;
+            height: 42rpx;
+            color: #434656;
+            font-size: 30rpx;
+            line-height: 42rpx;
+          }
+          .times {
+            margin-top: 20rpx;
+            width: 100rpx;
+            height: 28rpx;
+            font-size: 20rpx;
+            color: #9B9B9B;
+            text-align: center;
+            line-height: 28rpx;
+          }
+        }
+      }
+    }
+  }
+}
+
+/*我的钱包*/
+.cx-my-wallet {
+  .headDiv {
+    padding: 25rpx 0;
+    box-sizing: border-box;
+    width: 750rpx;
+    height: 200rpx;
+    background: linear-gradient(#42C5FF, #50A8FC);
+    .num {
+      width: 100%;
+      height: 50rpx;
+      color: #fff;
+      font-size: 36rpx;
+      line-height: 50rpx;
+      text-align: center;
+    }
+    .text {
+      margin-top: 6rpx;
+      width: 100%;
+      height: 33rpx;
+      color: #fff;
+      font-size: 24rpx;
+      text-align: center;
+      line-height: 33rpx;
+    }
+    .cash {
+      margin: 20rpx auto;
+      padding: 1rpx 22rpx;
+      box-sizing: border-box;
+      width: 100rpx;
+      height: 40rpx;
+      border-radius: 30rpx;
+      color: #50A8FC;
+      font-size: 24rpx;
+      text-align: center;
+      line-height: 33rpx;
+      background-color: #fff;
+    }
+  }
+  .detailDiv {
+    margin-top: 30rpx;
+    padding: 0 30rpx 30rpx 30rpx;
+    box-sizing: border-box;
+    width: 750rpx;
+    height: 120rpx;
+    border-bottom: 1rpx solid #e5e5e5;
+    .text {
+      min-width: 120rpx;
+      height: 42rpx;
+      color: #4A4A4A;
+      font-size: 30rpx;
+      line-height: 42rpx;
+    }
+    .timeAndAmount {
+      margin-top: 10rpx;
+      width: 100%;
+      height: 42rpx;
+      display: flex;
+      flex-flow: row nowrap;
+      justify-content: space-between;
+      .time {
+        margin-top: 4rpx;
+        width: 212rpx;
+        height: 33rpx;
+        color: #9B9B9B;
+        font-size: 24rpx;
+        line-height: 33rpx;
+      }
+      .amount {
+        min-width: 91rpx;
+        height: 42rpx;
+        font-size: 30rpx;
+        line-height: 42rpx;
+      }
+    }
+  }
+  /*字体颜色(金额)*/
+  .reds {
+    color: #DD2037;
+  }
+  .greens {
+    color: #2F924D;
+  }
 }
 
 /*客服自动回复设置(个人中心)*/