个人中心及聊天主页

src/pages.json

@@ -31,12 +31,6 @@
 				"navigationBarTitleText": "交换名片申请"
 			}
 		},
-		{
-			"path": "pages/index/chat",
-			"style": {
-				"navigationBarTitleText": "聊天"
-			}
-		},
 		{
 			"path": "pages/find/find",
 			"style": {
@@ -72,12 +66,36 @@
 			"style": {
 				"navigationBarTitleText": "客户管理"
 			}
+		}, 
+		{
+			"path": "pages/mine/myShare",
+			"style": {
+				"navigationBarTitleText": "我的分享"
+			}
 		},
 		{
 			"path": "pages/mine/myWallet",
 			"style": {
 				"navigationBarTitleText": "我的钱包"
 			}
+		},
+		{
+			"path": "pages/mine/serviceRemind",
+			"style": {
+				"navigationBarTitleText": "服务号提醒设置"
+			}
+		},
+		{
+			"path": "pages/chat/index",
+			"style": {
+				"navigationBarTitleText": "消息"
+			}
+		},
+		{
+			"path": "pages/chat/chat",
+			"style": {
+				"navigationBarTitleText": "聊天"
+			}
 		}
 		
 		

src/pages/chat/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="cx-chat-index">
+    <!--头部-->
+    <div class="headDiv">
+      <div class="searchDiv">
+        <img class="searchPic" src="/static/images/search.png">
+        <input class="inputText" type="text" placeholder="名称">
+      </div>
+      <div class="imgDiv">
+        <img class="pic" src="/static/images/cardHolder.png">
+      </div>
+    </div>
+
+    <!--功能选项-->
+    <div class="optionsDiv">
+      <div class="detailDiv">
+        <p class="imgBox customer">
+          <img class="img" src="/static/images/customer.png">
+        </p>
+        <span class="text">指尖客服</span>
+      </div>
+      <div class="detailDiv">
+        <p class="imgBox blackList">
+          <img class="img" src="/static/images/blackList.png">
+        </p>
+        <span class="text">黑名单</span>
+      </div>
+      <div class="detailDiv">
+        <p class="imgBox group">
+          <img class="img" src="/static/images/group.png">
+        </p>
+        <span class="text">我的联盟</span>
+      </div>
+      <div class="detailDiv">
+        <p class="imgBox message">
+          <img class="img" src="/static/images/message.png">
+        </p>
+        <span class="text">评论/点赞</span>
+      </div>
+    </div>
+
+    <!--聊天列表-->
+    <div class="chatListDiv">
+      
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      
+    }
+  }
+}
+</script>
+
+<style lang="less">
+
+</style>
+

src/pages/index/index.vue

@@ -1,13 +1,12 @@
 <template>
     <div class="cx-card">
         <movable-area class="moveMenuBox">
-            <movable-view class="moveMenuCont" v-if="modelSwitchType == 'show'" :x="tran" :y="vert" @touchend="handleTouchEnd" direction="all" damping="30" friction="5" @change="handleChange">
-                <img class="moveMenuPic" src="/static/images/buoy.png">
-            </movable-view>
-            <movable-view class="moveMenuCont" v-if="modelSwitchType == 'card'" :x="tran" :y="vert" @touchend="handleTouchEnd" direction="all" damping="30" friction="5" @change="handleChange">
-                <img class="moveMenuPic" src="/static/images/headPic5.jpg">
-                <p class="text">聊一聊</p>
+            <movable-view class="moveMenuCont" :x="tran" :y="vert" @touchend="handleTouchEnd" direction="all" damping="30" friction="5" @change="handleChange">
+                <img class="moveMenuPic" src="/static/images/buoy.png" v-if="modelSwitchType == 'show'">
+                <img class="moveMenuPic" src="/static/images/headPic5.jpg" v-if="modelSwitchType == 'card'">
+                <p class="text" v-if="modelSwitchType == 'card'">聊一聊</p>
             </movable-view>
+            
             <div class="subject">
                 <div class="topPic">
                   <img class="pic" src="/static/images/Computer-Background.jpg">
@@ -647,7 +646,7 @@
             showWhoCollecMe() {
               wx.navigateTo({
                 url: './showWhoCollecMe'
-            });
+              });
             }
         },
         onPageScroll(e) {

src/pages/mine/mine.vue

@@ -75,7 +75,7 @@
       </div>
 
       <!--服务号提醒-->
-      <div class="optionsBox">
+      <div class="optionsBox" @click="toServiceRemind()">
         <div class="imgBox">
           <img class="img" src="/static/images/mine-remind.png">
           <p class="text" v-show="false">●</p>
@@ -162,6 +162,11 @@ export default {
         url: './customerManage'
       });
     },
+    toServiceRemind() {
+      wx.navigateTo({
+        url: './serviceRemind'
+      });
+    },
     tests(e) {
       console.log(e);
       let arr = ['保存至相册', '分享给好友', '转发至朋友圈'];

src/pages/mine/myShare.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="cx-my-share">
+    
+    <!--头部-->
+    <div class="headDiv">
+      <!--统计文字-->
+      <div class="textBox">
+        <div class="textDiv">
+          <p class="text" @click="todayCont()" :class="selectType == 'today' ? 'select' : 'noSelect'">今日统计</p>
+          <div class="empty" v-if="selectType == 'today'"></div>
+        </div>
+        <div class="textDiv">
+          <p class="text" @click="allCont()" :class="selectType == 'all' ? 'select' : 'noSelect'">总数据</p>
+          <div class="empty" v-if="selectType == 'all'"></div>
+        </div>
+      </div>
+      <div class="optionsDiv">
+        <div class="detailDiv">
+          <p class="num" v-text="selectType == 'today' ? todayStatistics.shareNum : allStatistics.shareNum"></p>
+          <p class="text">分享内容数</p>
+        </div>
+        <div class="empty"></div>
+        <div class="detailDiv">
+          <p class="num" v-text="selectType == 'today' ? todayStatistics.shareNum : allStatistics.shareNum"></p>
+          <p class="text">被查看人数</p>
+        </div>
+        <div class="empty"></div>
+        <div class="detailDiv">
+          <p class="num" v-text="selectType == 'today' ? todayStatistics.looksCardNum : allStatistics.looksCardNum"></p>
+          <p class="text">查看名片人数</p>
+        </div>
+      </div>
+    </div>
+
+    <!--选项-->
+    <div class="chooseOptions">
+      <p class="text" :class="(looksType === 'all') ? 'selectOpt' : ''" @click="allsCont()">全部</p>
+      <p class="text" :class="(looksType === 'article') ? 'selectOpt' : ''" @click="articleCont()">文章</p>
+      <p class="text" :class="(looksType === 'video') ? 'selectOpt' : ''" @click="videoCont()">视频</p>
+    </div>
+
+    <!--文章列表-->
+    <div class="contentListDiv" v-if="looksType == 'article'" v-for="(item, index) in articleData" :key="index">
+      <div class="imgDiv">
+        <img class="articleImg" :src="item.articleImg">
+        <img class="play" src="/static/images/play2.png" v-if="item.isvideo">
+      </div>
+      <div class="surveyDiv">
+        <p class="articleTitle">{{item.articleTitle}}</p>
+        <p class="timeText">{{item.lastLooksTime}}</p>
+        <div class="looksDiv">
+          <div class="looksUser">
+            <p class="user"></p>
+            <p class="user"></p>
+            <p class="user"></p>
+            <p class="user"></p>
+            <p class="user"></p>
+            <p class="user"></p>
+            <p class="user"></p>
+            <p class="user"></p>
+          </div>
+          <p class="looksNum">查看:{{item.articleLooksNum}}</p>
+          <p class="more">&gt;</p>
+        </div>
+      </div>
+    </div>
+    
+    <!---->
+
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      todayStatistics: {userId: 101, type: 'today', shareNum: 3, looksDataNum: 476, looksCardNum: 200},
+      allStatistics: {userId: 101, type: 'all', shareNum: 4, looksDataNum: 478, looksCardNum: 300},
+      selectType: 'today',
+      looksType: 'article',
+      articleData: [
+        {userId: 101, type: 'article', articleImg: '../../static/images/testPic4.png', isvideo: false, articleTitle: '全球确诊病例超75万，美国超18万人将要嗝屁', lastLooksTime: '2020-02-02 14:00:45', articleLooksNum: 3000},
+        {userId: 101, type: 'article', articleImg: '../../static/images/testPic4.png', isvideo: true, articleTitle: '全球确诊病例超75万，美国超18万人将要嗝屁', lastLooksTime: '2020-02-02 14:00:45', articleLooksNum: 3000},
+        {userId: 101, type: 'article', articleImg: '../../static/images/testPic4.png', isvideo: false, articleTitle: '全球确诊病例超75万，美国超18万人将要嗝屁', lastLooksTime: '2020-02-02 14:00:45', articleLooksNum: 3000},
+        {userId: 101, type: 'article', articleImg: '../../static/images/testPic4.png', isvideo: false, articleTitle: '全球确诊病例超75万，美国超18万人将要嗝屁', lastLooksTime: '2020-02-02 14:00:45', articleLooksNum: 3000}
+      ],
+      videoData: [
+        {userId: 101, type: 'video', articleImg: '../../static/images/testPic4.png', isvideo: true, articleTitle: '全球确诊病例超75万，美国超18万人将要嗝屁', lastLooksTime: '2020-02-02 14:00:45', articleLooksNum: 3000},
+        {userId: 101, type: 'video', articleImg: '../../static/images/testPic4.png', isvideo: true, articleTitle: '全球确诊病例超75万，美国超18万人将要嗝屁', lastLooksTime: '2020-02-02 14:00:45', articleLooksNum: 3000}
+      ],
+      allData: [
+        {userId: 101, type: 'article', articleImg: '../../static/images/testPic4.png', isvideo: false, articleTitle: '全球确诊病例超75万，美国超18万人将要嗝屁', lastLooksTime: '2020-02-02 14:00:45', articleLooksNum: 3000},
+        {userId: 101, type: 'article', articleImg: '../../static/images/testPic4.png', isvideo: true, articleTitle: '全球确诊病例超75万，美国超18万人将要嗝屁', lastLooksTime: '2020-02-02 14:00:45', articleLooksNum: 3000},
+        {userId: 101, type: 'article', articleImg: '../../static/images/testPic4.png', isvideo: false, articleTitle: '全球确诊病例超75万，美国超18万人将要嗝屁', lastLooksTime: '2020-02-02 14:00:45', articleLooksNum: 3000},
+        {userId: 101, type: 'article', articleImg: '../../static/images/testPic4.png', isvideo: false, articleTitle: '全球确诊病例超75万，美国超18万人将要嗝屁', lastLooksTime: '2020-02-02 14:00:45', articleLooksNum: 3000},
+        {userId: 101, type: 'video', articleImg: '../../static/images/testPic4.png', isvideo: true, articleTitle: '全球确诊病例超75万，美国超18万人将要嗝屁', lastLooksTime: '2020-02-02 14:00:45', articleLooksNum: 3000},
+        {userId: 101, type: 'video', articleImg: '../../static/images/testPic4.png', isvideo: true, articleTitle: '全球确诊病例超75万，美国超18万人将要嗝屁', lastLooksTime: '2020-02-02 14:00:45', articleLooksNum: 3000}
+      ]
+    }
+  },
+  onLoad() {
+
+  },
+  methods: {
+    todayCont() {
+      this.selectType = 'today';
+    },
+    allCont() {
+      this.selectType = 'all';
+    },
+    allsCont() {
+      this.looksType = 'all';
+    },
+    articleCont() {
+      this.looksType = 'article';
+    },
+    videoCont() {
+      this.looksType = 'video';
+    }
+  }
+}
+</script>
+
+<style lang="less">
+
+</style>
+
+
+

src/pages/mine/serviceRemind.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="cx-service-remind">
+    <!--名片被浏览提醒-->
+    <div class="cardLooks">
+      <p class="text">名片被浏览提醒</p>
+      <switch class="switchPic" checked color="#4FA5FA"></switch>
+    </div>
+
+    <!--名片被收藏提醒-->
+    <div class="cardLooks">
+      <p class="text">名片被收藏提醒</p>
+      <switch class="switchPic" color="#4FA5FA"></switch>
+    </div>
+
+    <!--名片交换提醒-->
+    <div class="cardLooks">
+      <p class="text">名片交换提醒</p>
+      <switch class="switchPic" color="#4FA5FA"></switch>
+    </div>
+
+    <!--新留言/点赞提醒-->
+    <div class="cardLooks">
+      <p class="text">新留言/点赞提醒</p>
+      <switch class="switchPic" color="#4FA5FA"></switch>
+    </div>
+
+    <!--聊一聊消息提醒-->
+    <div class="cardLooks">
+      <p class="text">聊一聊消息提醒</p>
+      <switch class="switchPic" color="#4FA5FA"></switch>
+    </div>
+
+    <!--文章/视频服务号推送-->
+    <div class="articlePush">
+      <p class="text">文章/视频服务号推送</p>
+    </div>
+
+    <!--早上推送-->
+    <div class="cardLooks">
+      <p class="text">早上推送</p>
+      <switch class="switchPic" checked color="#4FA5FA"></switch>
+    </div>
+
+    <!--早上推送时间-->
+    <div class="cardLooks">
+      <p class="text">早上推送时间</p>
+      <!-- <switch class="switchPic" checked color="#4FA5FA"></switch> -->
+    </div>
+
+    <!--中午推送-->
+    <div class="cardLooks">
+      <p class="text">中午推送</p>
+      <switch class="switchPic" checked color="#4FA5FA"></switch>
+    </div>
+
+    <!--中午推送时间-->
+    <div class="cardLooks">
+      <p class="text">中午推送时间</p>
+      <!-- <switch class="switchPic" checked color="#4FA5FA"></switch> -->
+    </div>
+
+    <!--下午推送-->
+    <div class="cardLooks">
+      <p class="text">下午推送</p>
+      <switch class="switchPic" checked color="#4FA5FA"></switch>
+    </div>
+
+    <!--下午推送时间-->
+    <div class="cardLooks">
+      <p class="text">下午推送时间</p>
+      <!-- <switch class="switchPic" checked color="#4FA5FA"></switch> -->
+    </div>
+
+    <!--晚上推送-->
+    <div class="cardLooks">
+      <p class="text">晚上推送</p>
+      <switch class="switchPic" checked color="#4FA5FA"></switch>
+    </div>
+
+    <!--晚上推送时间-->
+    <div class="cardLooks">
+      <p class="text">晚上推送时间</p>
+      <!-- <switch class="switchPic" checked color="#4FA5FA"></switch> -->
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+
+    }
+  }
+}
+</script>
+
+<style lang="less">
+
+</style>
+
+
+

src/static/less/cx-style.less

@@ -2127,7 +2127,97 @@
   }
 }
 
-/*聊一聊*/
+/*消息主页*/
+.cx-chat-index {
+  .headDiv {
+    padding: 20rpx 30rpx 0 30rpx;
+    box-sizing: border-box;
+    width: 750rpx;
+    height: 80rpx;
+    display: flex;
+    .searchDiv {
+      padding: 0 29rpx;
+      width: 606rpx;
+      height: 60rpx;
+      display: flex;
+      border-radius: 46.5rpx;
+      border: 1rpx solid #797979;
+      .searchPic {
+        margin: 14rpx 20rpx 14rpx 0;
+        width: 32rpx;
+        height: 32rpx;
+      }
+      .inputText {
+        margin-top: 9rpx;
+        width: 495rpx;
+        height: 42rpx;
+        font-size: 30rpx;
+        line-height: 42rpx;
+        letter-spacing: 1.85rpx;
+      }
+    }
+    .imgDiv {
+      margin-top: 3rpx;
+      margin-left: 30rpx;
+      width: 54rpx;
+      height: 54rpx;
+      .pic {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  .optionsDiv {
+    margin-top: 40rpx;
+    padding: 0 44rpx;
+    box-sizing: border-box;
+    width: 750rpx;
+    height: 155rpx;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    .detailDiv {
+      width: 108rpx;
+      height: 153rpx;
+      .imgBox {
+        width: 100%;
+        height: 100rpx;
+        border-radius: 20rpx;
+        .img {
+          margin: 20rpx;
+          width: 60rpx;
+          height: 60rpx;
+        }
+      }
+      .text {
+        margin-top: 20rpx;
+        width: 108rpx;
+        height: 33rpx;
+        text-align: center;
+        color: #434656;
+        font-size: 24rpx;
+        line-height: 33rpx;
+      }
+      .customer {
+        background-color: #50A8FC;
+      }
+      .blackList {
+        background-color: #434656;
+      }
+      .group {
+        background-color: #F5A623;
+      }
+      .message {
+        background-color: #F0CC03;
+      }
+    }
+  }
+  .optionsDiv:first-child {
+      
+  }
+}
+
+/*聊一聊页面*/
 .cx-chat {
   @width: 56rpx;
   @height: 56rpx;
@@ -2951,7 +3041,7 @@
         height: auto;
         display: flex;
         .childs:not(:last-child) {
-            margin-right: 75rpx;
+          margin-right: 75rpx;
         }
         .childs:first-child {
           margin-left: 70rpx;
@@ -2989,7 +3079,197 @@
   }
 }
 
-/*我的钱包*/
+/*我的分享(个人中心)*/
+.cx-my-share {
+  .headDiv {
+    padding-bottom: 30rpx;
+    box-sizing: border-box;
+    width: 750rpx;
+    height: 219rpx;
+    background: linear-gradient(#42C5FF, #50A8FC);
+    .textBox {
+      margin-left: 30rpx;
+      width: 100%;
+      height: auto;
+      display: flex;
+      .textDiv {
+        margin-top: 20rpx;
+        width: 120rpx;
+        height: 52rpx;
+        &:first-child {
+          margin-right: 40rpx;
+        }
+        .text {
+          width: 120rpx;
+          height: 42rpx;
+          color: #fff;
+          text-align: center;
+          font-size: 30rpx;
+          line-height: 42rpx;
+        }
+        .select {
+          font-weight: 500;
+        }
+        .noSelect {
+          font-weight: 400;
+        }
+        .empty {
+          margin: 6rpx auto;
+          width: 60rpx;
+          height: 4rpx;
+          border-top: 4rpx solid #fff;
+        }
+      }
+    }
+    .optionsDiv {
+      margin-top: 30rpx;
+      padding: 0 60rpx;
+      box-sizing: border-box;
+      width: 100%;
+      height: auto;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      .detailDiv {
+        width: 120rpx;
+        height: 90rpx;
+        .num {
+          max-width: 120rpx;
+          height: 42rpx;
+          color: #fff;
+          font-size: 30rpx;
+          text-align: center;
+          line-height: 42rpx;
+        }
+        .text {
+          margin-top: 20rpx;
+          width: 100%;
+          height: 28rpx;
+          color: #fff;
+          font-size: 20rpx;
+          text-align: center;
+          line-height: 28rpx;
+        }
+      }
+      .empty {
+        margin-top: 20rpx;
+        width: 1rpx;
+        height: 50rpx;
+        border-left: 1rpx solid #E5E5E5;
+      }
+    }
+  }
+  .chooseOptions {
+    margin: 30rpx 0 10rpx 30rpx;
+    width: 750rpx;
+    height: 42rpx;
+    display: flex;
+    .selectOpt {
+      color: #50A8FC !important;
+    }
+    .text:not(:last-child) {
+      margin-right: 40rpx;
+    }
+    .text {
+      width: 60rpx;
+      height: 42rpx;
+      font-size: 30rpx;
+      color: #434656;
+      line-height: 42rpx;
+    }
+  }
+  .contentListDiv {
+    margin-left: 30rpx;
+    margin-top: 30rpx;
+    padding-bottom: 20rpx;
+    box-sizing: border-box;
+    width: 691rpx;
+    height: 171rpx;
+    display: flex;
+    border-bottom: 1rpx solid #E5E5E5;
+    .imgDiv {
+      position: relative;
+      width: 150rpx;
+      height: 150rpx;
+      .articleImg {
+        width: 100%;
+        height: 100%;
+      }
+      .play {
+        position: absolute;
+        top: 45rpx;
+        left: 45rpx;
+        width: 60rpx;
+        height: 60rpx;
+      }
+    }
+    .surveyDiv {
+      margin-left: 20rpx;
+      width: 515rpx;
+      height: auto;
+      .articleTitle {
+        width: 100%;
+        height: 42rpx;
+        color: #434656;
+        font-size: 30rpx;
+        line-height: 42rpx;
+        overflow: hidden;
+        text-overflow:ellipsis;
+        white-space: nowrap;
+      }
+      .timeText {
+        margin-top: 10rpx;
+        width: 306rpx;
+        height: 28rpx;
+        color: #9B9B9B;
+        font-size: 20rpx;
+        line-height: 28rpx;
+      }
+      .looksDiv {
+        margin-top: 34rpx;
+        display: flex;
+        .looksUser {
+          width: 360rpx;
+          height: 38rpx;
+          display: flex;
+          .user:first-child {
+            margin-left: 2rpx;
+          }
+          .user:not(:last-child) {
+            margin-right: 10rpx;
+          }
+          .user {
+            width: 36rpx;
+            height: 36rpx;
+            border-radius: 18rpx;
+            background-color: #D8D8D8;
+            border: 1rpx solid #979797;
+          }
+        }
+        .looksNum {
+          margin-top: 5rpx;
+          margin-left: 10rpx;
+          width: 110rpx;
+          height: 28rpx;
+          text-align: center;
+          color: #50A8FC;
+          font-size: 20rpx;
+          line-height: 28rpx;
+        }
+        .more {
+          width: 16rpx;
+          height: 26rpx;
+          line-height: 26rpx;
+          font-weight: 500;
+          color: #c7c7cc;
+          line-height: 26rpx;
+        }
+      }
+    }
+  }
+}
+
+/*我的钱包(个人中心)*/
 .cx-my-wallet {
   .headDiv {
     padding: 25rpx 0;
@@ -3127,6 +3407,46 @@
     }
 }
 
+/*服务号提醒设置(个人中心)*/
+.cx-service-remind {
+  &:first-child {
+    border-top: 1rpx solid #E5E5E5;
+  }
+  .cardLooks {
+    width: 750rpx;
+    height: 88rpx;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    border-bottom: 1rpx solid #E5E5E5;
+    .text {
+      margin: 24rpx 0 22rpx 30rpx;
+      max-width: 230rpx;
+      height: 42rpx;
+      font-size: 30rpx;
+      color: #434656;
+      line-height: 42rpx;
+    }
+    .switchPic {
+       margin-top: 11rpx;
+    }
+  }
+  .articlePush {
+    padding: 60rpx 0 33rpx 30rpx;
+    box-sizing: border-box;
+    width: 750rpx;
+    height: 130rpx;
+    border-bottom: 1rpx solid #E5E5E5;
+    .text {
+      width: 228rpx;
+      height: 33rpx;
+      color: #434656;
+      font-size: 24rpx;
+      line-height: 33rpx;
+    }
+  }
+}
+
 /*可移动菜单*/
 .moveMenuBox {
   width: 750rpx;