Merge branch 'yuhao' of http://code.qutaovip.com/lihai/pad_spa into lihai

# Conflicts:
#	src/pages/customerMan/details/index.vue

package.json

@@ -31,7 +31,7 @@
     "@vue/cli-service": "^3.5.0",
     "@vue/test-utils": "1.0.0-beta.29",
     "babel-core": "7.0.0-bridge.0",
-    "babel-eslint": "^10.0.1",
+    "babel-eslint": "^8.2.2",
     "babel-jest": "^23.6.0",
     "cross-env": "^5.2.1",
     "eslint": "^5.8.0",
@@ -39,6 +39,8 @@
     "husky": "^4.3.0",
     "less": "^3.0.4",
     "less-loader": "^4.1.0",
+    "postcss-px-to-viewport": "^1.1.1",
+    "postcss-pxtorem": "^5.1.1",
     "vue-template-compiler": "^2.5.21"
   },
   "eslintConfig": {

src/App.vue

@@ -1,27 +1,28 @@
 <template>
-    <div id="app">
-        <router-view></router-view>
-    </div>
+  <div id="app">
+    <keep-alive>
+      <router-view v-if="$route.meta.keepAlive"></router-view>
+    </keep-alive>
+    <router-view v-if="!$route.meta.keepAlive"></router-view>
+  </div>
 </template>
 
 <script>
 export default {
-    data() {
-        return {
-            list:[]
-        }
-    },
-    mounted: function () {
-        
-    },
-    created: function () {
-        
-    },
-    methods: {
-        
+  data () {
+    return {
+      list: []
     }
+  },
+  mounted: function () {
+
+  },
+  created: function () {
+
+  },
+  methods: {
+  }
 }
 </script>
 <style scoped>
-	
 </style>

src/components/common/layout/layout.vue

@@ -7,22 +7,27 @@
     </div>
     <div class="content">
       <header>
-
         <div class="back-icon"
              v-if="isback"
              @click="goBack"><img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/back.png"
                alt=""></div>
         <div>
           <div class="left"
-              v-if="menuIndex==0 && $route.path === '/home'">
+               v-if="menuIndex==0 && $route.path === '/home'">
             <div class="address">{{userInfo.store_name}}</div>
           </div>
         </div>
-        <div class="center" v-if="$route.name">
+        <div class="center"
+             v-if="$route.name">
           {{$route.name}}
         </div>
         <div class="right">
-          <div class="news"><img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/news.png"></div>
+          <div @click="onAppMessage"
+               class="news">
+            <span class="dot"
+                  v-show="hasUnreadMessage"></span>
+            <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/news.png" />
+          </div>
           <div class="head-img"><img :src="userInfo.avatar_url"></div>
           <el-dropdown trigger="click"
                        placement="top"
@@ -41,11 +46,184 @@
         <router-view></router-view>
       </div>
     </div>
+    <minePupop :show="msgPupopVisible">
+      <div class="block">
+        <div class="title">
+          <div @click="clearUnreadMsgsByType(0)"
+               class="clear">
+            <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/clearMsg.png"
+                 alt="">
+            <div class="">清除未读</div>
+          </div>
+          <div class="txt">消息</div>
+          <div class="delete-pupop"
+               @click="closeMsgPanel">
+            <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/delete.png"
+                 alt />
+          </div>
+        </div>
+        <div class="msg-con">
+          <van-list v-model="mainPanelMsgListLoading"
+                    :finished="mainPanelMsgListFinished"
+                    finished-text="没有更多了"
+                    @load="getMainPanelMessageList"
+                    :immediate-check="false">
+            <div class="order-msg">
+              <div class="success">
+                <div class="flex justify-between"
+                     @click="toMsgDetail(1)">
+                  <div class="desc flex items-center">
+                    <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png"
+                         alt="" />
+                    <div class="title">预约成功信息</div>
+                  </div>
+                  <div class="count flex flex-column justify-center items-center">
+                    <!-- <div class="time">10:23</div> -->
+                    <div class="num"
+                         v-if="orderSuccessUnreadNum">{{orderSuccessUnreadNum}}</div>
+                  </div>
+                </div>
+              </div>
+              <div class="cancel">
+                <div class="flex justify-between"
+                     @click="toMsgDetail(2)">
+                  <div class="desc flex items-center">
+                    <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/cancelOrder.png"
+                         alt="" />
+                    <div class="title">预约取消信息</div>
+                  </div>
+                  <div class="count flex flex-column justify-center items-center">
+                    <!-- <div class="time">10:23</div> -->
+                    <div class="num"
+                         v-if="orderCancelUnreadNum">{{orderCancelUnreadNum}}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="ready-msg flex justify-between items-center"
+                 v-for="(item, index) in msgPanelList"
+                 :key="index"
+                 @click="readMsgToOrderDetails(item)">
+              <div class="content-bar flex flex-column">
+                <div class="desc-info">{{item.project_name}}</div>
+                <div class="desc-time">{{`${item.device_name} (${item.room}) 还有${item.minute}分钟开始` | ellipsis(80)}}</div>
+              </div>
+              <div class="count flex flex-column items-center">
+                <div class="time">{{item.create_time}}</div>
+                <div class="dot"
+                     v-if="!item.is_read && allUnread"></div>
+              </div>
+            </div>
+          </van-list>
+        </div>
+      </div>
+    </minePupop>
+    <minePupop :show="msgSuccessDetailPupopVisible">
+      <div class="block detail">
+        <div class="title">
+          <div @click="backMsgPanel"
+               class="back flex items-center">
+            <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/back.png"
+                 alt="" />
+          </div>
+          <div class="txt">消息</div>
+          <div class="delete-msg flex items-center"
+               @click="clearUnreadMsgsByType(1)">
+            <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/clearMsg.png"
+                 alt />
+            <div class="">清除未读</div>
+          </div>
+        </div>
+        <div class="detail-msg-con">
+          <van-list v-model="detailSuccessMsgListLoading"
+                    :finished="detailSuccessMsgListFinished"
+                    finished-text="没有更多了"
+                    @load="getMessageByType(orderMsgType)"
+                    :immediate-check="false">
+            <div class="msg-bar flex justify-between items-center"
+                 v-for="(item, index) in msgSuccessDetailList"
+                 :key="index"
+                 @click="readMsgToOrderDetails(item)">
+              <div class="info flex">
+                <div class="name">{{item.nickname}}</div>
+                <div class="project">成功预约{{item.order_time}}</div>
+                <!-- {{item.nickname | ellipsis(50)}} -->
+              </div>
+              <div class="flex flex-column items-center">
+                <div class="time">{{item.create_time}}</div>
+                <div class="dot"
+                     v-if="!item.is_read && successUnread"></div>
+              </div>
+            </div>
+          </van-list>
+        </div>
+      </div>
+    </minePupop>
+    <minePupop :show="msgCancelDetailPupopVisible">
+      <div class="block detail">
+        <div class="title">
+          <div @click="backMsgPanel"
+               class="back flex items-center">
+            <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/back.png"
+                 alt="" />
+          </div>
+          <div class="txt">消息</div>
+          <div class="delete-msg flex items-center"
+               @click="clearUnreadMsgsByType(2)">
+            <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/clearMsg.png"
+                 alt />
+            <div class="">清除未读</div>
+          </div>
+        </div>
+        <div class="detail-msg-con">
+          <van-list v-model="detailCancelMsgListLoading"
+                    :finished="detailCancelMsgListFinished"
+                    finished-text="没有更多了"
+                    @load="getMessageByType(orderMsgType)"
+                    :immediate-check="false">
+            <div class="msg-bar flex justify-between items-center"
+                 v-for="(item, index) in msgCancelDetailList"
+                 :key="index"
+                 @click="readMsgToOrderDetails(item)">
+              <div class="info flex">
+                <div class="name">{{item.nickname}}</div>
+                <div class="project">取消预约{{item.order_time}}</div>
+                <!-- {{item.msg | ellipsis(50)}} -->
+              </div>
+              <div class="flex flex-column items-center">
+                <div class="time">{{item.create_time}}</div>
+                <div class="dot"
+                     v-if="!item.is_read"></div>
+              </div>
+            </div>
+          </van-list>
+        </div>
+      </div>
+    </minePupop>
+    <audio ref="orderSuccessMp3"
+           id="orderSuccessMp3"
+           muted>
+      <source src="@/assets/audio/order_success.mp3" />
+    </audio>
+    <audio ref="orderReadyMp3_15"
+           id="orderReadyMp3_15"
+           muted>
+      <source src="@/assets/audio/order_ready_15.mp3" />
+    </audio>
+    <audio ref="orderReadyMp3_5"
+           id="orderReadyMp3_5"
+           muted>
+      <source src="@/assets/audio/order_ready_5.mp3" />
+    </audio>
   </div>
 </template>
 
 <script type="text/javascript">
+import { mapMutations } from 'vuex'
+import vanList from 'vant/lib/list';
+import 'vant/lib/list/style';
 import leftMenu from './leftMenu'
+import minePupop from "../../../components/minePupop/index.vue";
 import api from '@/server/home'
 
 
@@ -58,27 +236,120 @@ export default {
       isback: false,
       userInfo: {
         name: '333'
-      }
+      },
+      msgPupopVisible: false,
+      msgSuccessDetailPupopVisible: false,
+      msgCancelDetailPupopVisible: false,
+      timer: null,
+      timer1: null,
+      wsInstance: null,
+      hasUnreadMessage: null,
+      msgPanelList: [],
+      mainPanelMsgListLoading: false,
+      mainPanelMsgListFinished: false,
+      mainPanelMessagePage: 1,
+      mainPanelMessageLimit: 5,
+      type: 0,
+      orderSuccessUnreadNum: null,
+      orderCancelUnreadNum: null,
+      detailMessageLimit: 10,
+      detailSuccessMessagePage: 1,
+      msgSuccessDetailList: [],
+      detailSuccessMsgListLoading: false,
+      detailSuccessMsgListFinished: false,
+      detailCancelMessagePage: 1,
+      msgCancelDetailList: [],
+      detailCancelMsgListLoading: false,
+      detailCancelMsgListFinished: false,
+      MsgType: null,
+      successUnread: true,
+      cancelUnread: true,
+      allUnread: true,
     }
   },
-  created () {
+  async created () {
     this.getUserInfo()
+    console.log('开始连接...')
+    let token = this.$store.state.comVal.token || localStorage.getItem('token')
+    //申请一个WebSocket对象，参数是服务端地址，同http协议使用http://开头一样，WebSocket协议的url使用ws://开头，另外安全的WebSocket协议使用wss://开头
+    this.wsInstance = new WebSocket(`wss://ws.ijolijoli.com?access_token=${token}`);
+    this.wsInstance.onopen = () => {
+      //当WebSocket创建成功时，触发onopen事件
+      console.log("连接成功");
+      this.timer = setInterval(() => {
+        this.wsInstance.send(JSON.stringify({ type: 'ping' }));
+      }, 30000);
+    }
+    this.wsInstance.onmessage = (e) => {
+      //当客户端收到服务端发来的消息时，触发onmessage事件，参数e.data包含server传递过来的数据
+      console.log('收到消息', e.data)
+      let data = JSON.parse(e.data);
+      if (data.data.type === 'order_success') {
+        console.log('预约成功信息播报')
+        this.$refs.orderSuccessMp3.play()
+      } else if (data.data.type === 'order_ready') {
+        // TODO: 播报动态语音还是固定的语音有待产品商榷
+        console.log('项目即将开始信息播报')
+        if (data.data.minute == 15) {
+          this.$refs.orderReadyMp3_15.play()
+        } else if (data.data.minute == 5) {
+          this.$refs.orderReadyMp3_5.play()
+        }
+      }
+      console.log(data)
+    }
+    this.wsInstance.onclose = (e) => {
+      //当客户端收到服务端发送的关闭连接请求时，触发onclose事件
+      console.log("连接已关闭");
+    }
+    this.wsInstance.onerror = (e) => {
+      //如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
+      console.log(e);
+    }
+
+    await this.queryHasUnreadMessage()
+    this.timer1 = setInterval(async () => {
+      await this.queryHasUnreadMessage()
+    }, 20000)
+  },
+  mounted () { },
+  beforeDestroy () {
+    // 关闭WebSocket连接并清除定时器
+    this.wsInstance.close()
+    clearInterval(this.timer)
+    clearInterval(this.timer1)
   },
   components: {
     leftMenu,
+    minePupop,
+    vanList
   },
   methods: {
+    ...mapMutations(['SAVE_COMMON_VALUE']),
     getUserInfo () {
       let that = this
       api.getUserInfo().then(res => {
         if (res.code == 200) {
           this.userInfo = res.data
-
         }
       })
     },
     loginOut () {
+      this.SAVE_COMMON_VALUE({
+        'key': 'token',
+        'value': null
+      })
+      this.SAVE_COMMON_VALUE({
+        'key': 'isLogin',
+        'value': false
+      })
       localStorage.removeItem('token');
+
+      // 关闭WebSocket连接并清除定时器
+      this.wsInstance.close()
+      clearInterval(this.timer)
+      clearInterval(this.timer1)
+
       this.$router.replace('/login')
     },
     changeMenu (index) {
@@ -89,7 +360,167 @@ export default {
     },
     goBack () {
       this.$router.back()
-    }
+    },
+    async queryHasUnreadMessage () {
+      let resp = await api.hasUnreadMessage()
+      if (resp.code === 200) {
+        this.hasUnreadMessage = resp.data ? true : false
+      }
+    },
+    async getMainPanelMessageList (page = this.mainPanelMessagePage) {
+      // setTimeout(async() => {
+      let resp = await api.getMessageList({ page: page, limit: this.mainPanelMessageLimit })
+      if (resp.code = 200) {
+        this.orderSuccessUnreadNum = resp.data.reserved
+        this.orderCancelUnreadNum = resp.data.cancel
+
+        if (this.mainPanelMessagePage === 1) {
+          this.msgPanelList = resp.data.list
+        } else {
+          this.msgPanelList = [...this.msgPanelList, ...resp.data.list]
+        }
+
+        this.mainPanelMessagePage++
+        this.mainPanelMsgListLoading = false;
+        if (this.msgPanelList.length >= resp.data.total) {
+          this.mainPanelMsgListFinished = true;
+        }
+      }
+      // }, 1000);
+    },
+    async getMessageByType (type, page = this.detailSuccessMessagePage) {
+      if (type === 1) {
+        let resp = await api.getMessageByType({ type: type, page: page, limit: this.detailMessageLimit })
+        if (resp.code = 200) {
+
+          if (this.detailSuccessMessagePage === 1) {
+            this.msgSuccessDetailList = resp.data.list
+          } else {
+            this.msgSuccessDetailList = [...this.msgSuccessDetailList, ...resp.data.list]
+          }
+
+          this.detailSuccessMessagePage++
+          this.detailSuccessMsgListLoading = false;
+          if (this.msgSuccessDetailList.length >= resp.data.total) {
+            this.detailSuccessMsgListFinished = true;
+          }
+        }
+      } else if (type === 2) {
+        let resp = await api.getMessageByType({ type: type, page: page, limit: this.detailMessageLimit })
+        if (resp.code = 200) {
+          this.msgCancelDetailList = [...this.msgCancelDetailList, ...resp.data.list]
+
+          if (this.detailSuccessMessagePage === 1) {
+            this.msgCancelDetailList = resp.data.list
+          } else {
+            this.msgCancelDetailList = [...this.msgCancelDetailList, ...resp.data.list]
+          }
+
+          this.detailCancelMessagePage++
+          this.detailCancelMsgListLoading = false;
+          if (this.msgCancelDetailList.length >= resp.data.total) {
+            this.detailCancelMsgListFinished = true;
+          }
+        }
+      }
+    },
+    onAppMessage () {
+      this.msgPanelList = []
+      this.mainPanelMessagePage = 1
+      this.mainPanelMsgListLoading = false
+      this.mainPanelMsgListFinished = false
+      this.getMainPanelMessageList(1)
+      this.msgPupopVisible = true
+    },
+    closeMsgPanel () {
+      this.msgPupopVisible = false
+    },
+    toMsgDetail (param) {
+      this.msgPupopVisible = false
+      // this.getMessageByType(param)
+      if (param === 1) {
+        this.msgSuccessDetailList = []
+        this.detailSuccessMessagePage = 1
+        this.detailSuccessMsgListLoading = false
+        this.detailSuccessMsgListFinished = false
+        this.getMessageByType(param, 1)
+
+        this.msgSuccessDetailPupopVisible = true
+      } else {
+        this.msgCancelDetailList = []
+        this.detailCancelMessagePage = 1
+        this.detailCancelMsgListLoading = false
+        this.detailCancelMsgListFinished = false
+
+        this.getMessageByType(param, 1)
+
+        this.msgCancelDetailPupopVisible = true
+      }
+      this.orderMsgType = param
+      console.log(this.orderMsgType)
+    },
+    backMsgPanel () {
+      this.msgSuccessDetailPupopVisible = false
+      this.msgCancelDetailPupopVisible = false
+
+      this.getMainPanelMessageList()
+      this.msgPupopVisible = true
+    },
+    async clearUnreadMsgsByType (type) {
+      let resp = await api.clearMessage({ type: type })
+      if (resp.code === 200) {
+        if (type === 1) {
+          this.getMessageByType(this.orderMsgType)
+          this.successUnread = false
+        } else if (type === 2) {
+          this.getMessageByType(this.orderMsgType)
+          this.cancelUnread = false
+        } else if (type === 0) {
+          this.getMainPanelMessageList()
+          this.allUnread = false
+        }
+      }
+    },
+    async readMsgToOrderDetails (source) {
+      // console.log(source)
+      if (!source.is_read) {
+        let clearMsgByIdResp = await api.clearMessageById({ id: source.id })
+        if (clearMsgByIdResp.code === 200) {
+          this.getMainPanelMessageList()
+        }
+      }
+      if (source.type === 'BUY' || source.type === 'BUY_CARD') return
+      // return
+      let orderInfoResp = await api.getOrderInfo({ id: source.order_id })
+      if (orderInfoResp.code === 200) {
+        if (orderInfoResp.data.order_data.status == 0) {
+          // 跳转前关闭所有弹窗
+          this.msgPupopVisible = false
+          this.msgSuccessDetailPupopVisible = false
+          this.msgCancelDetailPupopVisible = false
+
+          this.$router.push({
+            path: '/confirmOrder/details',
+            query: {
+              id: source.order_id
+            }
+          })
+        } else {
+          this.msgPupopVisible = false
+          this.msgSuccessDetailPupopVisible = false
+          this.msgCancelDetailPupopVisible = false
+
+          this.$router.push({
+            path: "/historicalOrder/details",
+            query: {
+              id: source.order_id
+            }
+          });
+        }
+      } else {
+        this.$message.error("未查到此订单")
+      }
+    },
   },
   computed: {
     routerItems () {
@@ -109,6 +540,14 @@ export default {
         }
       }
       return resultArr;
+    },
+    orderMsgType: {
+      get () {
+        return this.MsgType
+      },
+      set (val) {
+        this.MsgType = val
+      }
     }
   },
 }
@@ -118,6 +557,25 @@ export default {
 <style lang="less" scoped>
 @import url(../../../style/root.less);
 
+.flex {
+  display: flex;
+}
+.flex-column {
+  flex-direction: column;
+}
+.justify-center {
+  justify-content: center;
+}
+.justify-between {
+  justify-content: space-between;
+}
+.justify-around {
+  justify-content: space-around;
+}
+.items-center {
+  align-items: center;
+}
+
 .layout {
   height: 100vh;
   display: flex;
@@ -126,7 +584,8 @@ export default {
 .menu-wrapper {
   height: 100%;
   text-align: center;
-  overflow: auto;
+  overflow-y: auto;
+  overflow-x: hidden;
   background-color: #fa7d22;
 
   .el-menu {
@@ -181,6 +640,16 @@ export default {
       .news {
         width: 24px;
         height: 24px;
+        position: relative;
+        .dot {
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          background-color: #e54635;
+          position: absolute;
+          right: 2px;
+          top: 2px;
+        }
 
         img {
           width: 100%;
@@ -217,4 +686,147 @@ export default {
     background-color: #f7f8fa;
   }
 }
+.dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background-color: #ff6945;
+  margin-top: 10px;
+}
+.dot-activated {
+  background-color: #fff;
+}
+.block {
+  width: 540px;
+  height: 400px;
+  padding: 20px;
+  box-sizing: border-box;
+  background: #ffffff;
+  border-radius: 8px;
+  position: relative;
+  .title {
+    display: flex;
+    justify-content: space-between;
+    font-size: 14px;
+    .clear {
+      display: flex;
+      align-items: center;
+      color: #999999;
+      img {
+        width: 32px;
+        height: 32px;
+      }
+    }
+    .txt {
+      display: flex;
+      align-items: center;
+    }
+    .delete-pupop {
+      width: 32px;
+      height: 32px;
+      img {
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
+    }
+  }
+  .msg-con {
+    height: 290px;
+    overflow: auto;
+    margin-top: 21px;
+    .order-msg {
+      .success,
+      .cancel {
+        .desc {
+          img {
+            width: 36px;
+            height: 36px;
+          }
+          .title {
+            margin-left: 17px;
+          }
+        }
+        .count {
+          .time {
+            color: #999999;
+            margin-bottom: 4px;
+          }
+          .num {
+            width: 25px;
+            height: 25px;
+            // line-height: 21px;
+            // text-align: center;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 8px;
+            box-sizing: border-box;
+            color: #ffffff;
+            border-radius: 50%;
+            background-color: #ff6945;
+          }
+        }
+      }
+      .cancel {
+        margin-top: 23px;
+      }
+    }
+    .ready-msg {
+      margin-top: 20px;
+      .content-bar {
+        .desc-info {
+          color: #666666;
+          font-weight: 400;
+        }
+        .desc-time {
+          width: 400px;
+          margin-top: 5px;
+          font-weight: 500;
+          line-height: 18px;
+        }
+      }
+      .count {
+        .time {
+          color: #999999;
+        }
+      }
+    }
+  }
+}
+.detail {
+  .title {
+    .back {
+      img {
+        width: 24px;
+        height: 24px;
+      }
+    }
+    .delete-msg {
+      img {
+        width: 32px;
+        height: 32px;
+      }
+    }
+  }
+  .msg-bar {
+    // margin-top: 18px;
+    height: 55px;
+    .info {
+      width: 400px;
+      line-height: 18px;
+      .name {
+        font-weight: 600;
+        margin-right: 5px;
+      }
+      .project {
+        color: #666666;
+      }
+    }
+  }
+}
+.detail-msg-con {
+  height: 330px;
+  overflow: auto;
+}
 </style>

src/components/common/layout/leftMenu.vue

@@ -90,9 +90,9 @@ export default {
   },
   watch: {
     $route (to, from) {
+      console.log(to, 'tootototo');
       let patname = `/${to.path.split('/')[1]}`
       console.log(window.location, 'window.location.pathname', to);
-
       this.$emit('changeIsBack', to.meta.isback)
       this.menu.forEach((item, index) => {
         if (patname == item.path) {
@@ -139,6 +139,7 @@ export default {
   line-height: 46px !important;
   background: url("https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/select_icon.png")
     no-repeat;
+  margin-right: -2px;
   background-size: 100% 100%;
   background-color: #fa7d22 !important;
   color: #fa7d22 !important;

src/pages/confirmOrder/index.vue

@@ -55,8 +55,7 @@ export default {
             this.$router.push({
               path: "/confirmOrder/addOrder",
               query: {   //user_id
-                data: JSON.stringify(res.data),
-                // user_id:res.data.user.user_id
+                data: JSON.stringify(res.data)
               }
             });
           return

src/pages/coupon/index.vue

@@ -1,71 +1,82 @@
 <template>
   <div class="mine">
     <div class="table">
-      <el-input class="search-input"
-                placeholder="请输入内容"
-                prefix-icon="el-icon-search"
-                size="mini"
-                v-model="searckItem"></el-input>
-      <div class="search-button"
-           @click="getUserList">搜索</div>
+      <el-input
+        class="search-input"
+        placeholder="请输入内容"
+        prefix-icon="el-icon-search"
+        size="mini"
+        v-model="searckItem"
+      ></el-input>
+      <div class="search-button" @click="getUserList">搜索</div>
       <div class="coupon">选择优惠券</div>
-      <el-select class="coupon-select"
-                 v-model="coupon"
-                 size="mini"
-                 placeholder="选择优惠券">
-        <el-option v-for="item in couponList"
-                   :key="item.id"
-                   :label="item.name"
-                   :value="item.id"></el-option>
+      <el-select
+        class="coupon-select"
+        v-model="coupon"
+        size="mini"
+        placeholder="选择优惠券"
+      >
+        <el-option
+          v-for="item in couponList"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"
+        ></el-option>
       </el-select>
       <div class="num-tips">数量</div>
       <div class="coupon-num">
-        <div class="reduce"
-             @click="reduceNum">-</div>
-        <div class="num">{{couponNum}}</div>
-        <div class="add"
-             @click="couponNum++">+</div>
+        <div class="reduce" @click="reduceNum">-</div>
+        <div class="num">{{ couponNum }}</div>
+        <div class="add" @click="couponNum++">+</div>
+      </div>
+      <div class="send-coupon" style="margin-left: 39px" @click="sendCoupon">
+        发送
       </div>
-      <div class="send-coupon"
-           style="margin-left: 39px;"
-           @click="sendCoupon">发送</div>
     </div>
     <div class="user-list">
-      <el-table ref="multipleTable"
-                :data="tableData"
-                tooltip-effect="dark"
-                height="500"
-                style="width: 100%;border-radius: 8px;"
-                @selection-change="handleSelectionChange">
-        <el-table-column type="selection"
-                         width="55"></el-table-column>
-        <el-table-column label="头像"
-                         width="120">
+      <el-table
+        ref="multipleTable"
+        :data="tableData"
+        tooltip-effect="dark"
+        height="500"
+        style="width: 100%; border-radius: 8px"
+        @selection-change="handleSelectionChange"
+        @row-click="goDetail"
+      >
+        <el-table-column type="selection" width="55"></el-table-column>
+        <el-table-column label="头像" width="120">
           <template slot-scope="scope">
             <div class="head-img">
-              <img :src="scope.row.avatar_url"
-                   alt />
+              <img :src="scope.row.avatar_url" alt />
             </div>
           </template>
         </el-table-column>
-        <el-table-column prop="nickname"
-                         label="昵称"
-                         width="120"></el-table-column>
-        <el-table-column prop="mobile"
-                         label="联系电话"
-                         show-overflow-tooltip></el-table-column>
-        <el-table-column prop="create_time"
-                         label="注册时间"
-                         show-overflow-tooltip></el-table-column>
+        <el-table-column
+          prop="nickname"
+          label="昵称"
+          width="120"
+        ></el-table-column>
+        <el-table-column
+          prop="mobile"
+          label="联系电话"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          prop="create_time"
+          label="注册时间"
+          show-overflow-tooltip
+        ></el-table-column>
       </el-table>
 
       <div class="pagin">
-        <el-pagination background
-                       layout="prev, pager, next"
-                       @size-change="handleSizeChange"
-                       @current-change="handleCurrentChange"
-                       :current-page.sync="currentPage1"
-                       :total="total"></el-pagination>
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page.sync="currentPage1"
+          :total="total"
+        ></el-pagination>
       </div>
     </div>
   </div>
@@ -75,8 +86,8 @@
 import api from "../../server/home";
 
 export default {
-  components: {},
-  data () {
+    components: {},
+  data() {
     return {
       searckItem: "",
       couponList: [],
@@ -93,14 +104,24 @@ export default {
   watch: {},
 
   methods: {
-    reduceNum () {
+    // 发券中心点击用户跳转到用户详情
+    goDetail(row, column, event) {
+      console.log(1);
+      this.$router.push({
+        path: "/customerMan/details",
+        query: {
+          id: row.id,
+        },
+      });
+    },
+    reduceNum() {
       this.couponNum > 1 ? this.couponNum-- : (this.couponNum = 1);
     },
-    handleSelectionChange (val) {
+    handleSelectionChange(val) {
       this.multipleSelection = val;
     },
     // 发送优惠券
-    sendCoupon () {
+    sendCoupon() {
       let selectIds = "";
       for (let i = 0; i < this.multipleSelection.length; i++) {
         selectIds = selectIds + "," + this.multipleSelection[i].id;
@@ -108,27 +129,32 @@ export default {
       let params = {
         id: this.coupon,
         user_ids: selectIds.substring(1, selectIds.length),
-        num: this.couponNum
+        num: this.couponNum,
       };
-      api.sendCoupon(params).then(res => {
+      api.sendCoupon(params).then((res) => {
         if (res.code == 200) {
           this.$message({
-            message: '发送成功',
-            type: 'success'
+            message: "发送成功",
+            type: "success",
           });
         }
       });
     },
 
     // 获取订单列表
-    getUserList () {
+    getUserList() {
       let params = {
         page: this.currentPage1,
         limit: this.limit,
-        keywords: this.searckItem
+        keywords: this.searckItem,
       };
-      api.getUserList(params).then(res => {
+      api.getUserList(params).then((res) => {
         if (res.code == 200) {
+          // 将用户手机号中间四位变成****
+          res.data.list.map((item) => {
+            item.mobile =
+              item.mobile.substring(0, 3) + "****" + item.mobile.substring(7);
+          });
           this.tableData = res.data.list;
           this.total = res.data.total;
         }
@@ -136,33 +162,32 @@ export default {
     },
 
     // 获取优惠券列表
-    getCouponInfo () {
+    getCouponInfo() {
       let params = {
         page: this.currentPage1,
-        limit: 100
+        limit: 100,
       };
-      api.getCouponInfo(params).then(res => {
+      api.getCouponInfo(params).then((res) => {
         if (res.code == 200) {
           this.couponList = res.data.list;
         }
       });
     },
 
-    handleCurrentChange (e) {
+    handleCurrentChange(e) {
       this.currentPage1 = e;
       this.getUserList();
     },
 
-    handleSizeChange (val) {
-    }
+    handleSizeChange(val) {},
   },
 
-  created () {
+  created() {
     this.getUserList();
     this.getCouponInfo();
   },
 
-  mounted () { }
+  mounted() {},
 };
 </script>
 

src/pages/customerMan/details/index.vue

@@ -2,61 +2,112 @@
   <div class="mine">
     <div class="left">
       <div class="user-info">
-        <div class="user-img"><img :src="userInfo.avatar_url"
-               alt=""></div>
-        <div class="user-span">
-          <div class="info">
-            <div class="name"><span>{{userInfo.nickname}}</span></div>
-            <div class="sex"><img :src="gender"
-                   alt=""></div>
-            <div class="age"><span>{{userInfo.skin_age}}</span><span>肤龄</span></div>
+        <div class="title">
+          <div class="txt">个人信息</div>
+          <div
+            class="test-record"
+            @click="toTestRecord"
+            v-if="userInfo.analysis_id"
+          >
+            测肤记录
+          </div>
+        </div>
+        <div class="detail-info">
+          <div class="user-img">
+            <img :src="userInfo.avatar_url" alt="" />
+          </div>
+          <div class="user-span">
+            <div class="info">
+              <div class="name">
+                <span>{{ userInfo.nickname | ellipsis(3) }}</span>
+              </div>
+              <div class="sex"><img :src="gender" alt="" /></div>
+              <!-- <div class="age">
+                <span>{{ userInfo.skin_age }}</span
+                ><span class="min-size">肤龄</span>
+              </div> -->
+            </div>
+            <div class="real-name">
+              姓名：
+              <span v-show="!nameInpVisible">{{ userInfo.real_name }}</span>
+              <el-input
+                size="mini"
+                ref="realNameInp"
+                v-show="nameInpVisible"
+                @change="updateRealName"
+                v-model="userInfo.real_name"
+                type="text"
+              ></el-input>
+              <img
+                class="edit-name"
+                @click="editName"
+                src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/eidt.png"
+                alt=""
+                srcset=""
+              />
+            </div>
+            <div class="skin-type">
+              肤质：<span>{{ userInfo.skin_type }}</span>
+            </div>
+            <div class="skin-type">
+              肤龄：<span>{{ userInfo.age }}</span>
+            </div>
+            <div class="skin-color">
+              肤色：<span>{{ userInfo.skin_color }}</span>
+            </div>
           </div>
-          <div class="skin-type">肤质：<span>{{userInfo.skin_type}}</span></div>
-          <div class="skin-color">肤色：<span>{{userInfo.skin_color}}</span></div>
-          <div class="skin-color">上传报告时间：<span>{{userInfo.check_time}}</span></div>
         </div>
       </div>
 
       <div class="personage-data">
         <div class="myDataList">
+          检测时间：
+          <span>{{ userInfo.check_time }}</span>
+        </div>
+        <div class="myDataList">
           出生日期：
-          <span>{{userInfo.birthday}}</span>
+          <span>{{ userInfo.birthday }}</span>
         </div>
         <div class="myDataList">
-          联系电话：
-          <span>{{userInfo.mobile}}</span>
+          手机号：
+          <span>{{ userInfo.mobile }}</span>
         </div>
 
         <div class="myDataList">
           所在地：
-          <span>{{userInfo.city}}</span>
+          <span>{{ userInfo.city }}</span>
         </div>
 
         <div class="myDataList">
           开卡店铺：
-          <span>{{userInfo.store_name}}</span>
+          <span>{{ userInfo.store_name }}</span>
         </div>
 
-        <div class="myDataList">
-          卡卷数量：
-          <span>{{userInfo.card_num}}</span>
+        <div class="myDataList coupon-num">
+          次卡数量：
+          <span>{{ order_total.card_order }}</span>
+        </div>
+
+        <div class="myDataList coupon-num">
+          优惠券数量：
+          <span>{{ userInfo.card_num }}</span>
         </div>
 
         <div class="myDataList">
           储值金额：
           <span class="JEcolor">
             ￥
-            <span class="bigSixe">{{userInfo.amount}}</span>
+            <span class="bigSixe">{{ userInfo.amount }}</span>
             <!-- .00 -->
           </span>
         </div>
         <div class="myDataList">
           积分：
-          <span>{{userInfo.coin}}</span>
+          <span>{{ userInfo.coin }}</span>
         </div>
-        <div class="myDataList">
-          备注：
-          <span>{{remarks | ellipsis(20)}}</span>
+        <div class="myDataList" @click="remarkPupopVisible = true">
+          备注信息：
+          <span>{{ userInfo.remark | ellipsis(20) }}</span>
         </div>
       </div>
     </div>
@@ -67,43 +118,55 @@
             <div class="lable-title">面诊标签</div>
             <div class="problem">
               <div class="problem-title">问题标签</div>
-              <div class="problem-lable-top">
-                <div class="lable-text problem-text">{{problem}}</div>
+              <div class="problem-lable">
+                <div class="lable-text problem-text">{{ problem }}</div>
               </div>
             </div>
             <div class="problem">
               <div class="problem-title">面部标签</div>
               <div class="problem-lable">
-                <div class="lable-text"
-                     v-for="item,index in lableList"
-                     :key="index"
-                     :style="{background:item.bgcolor,borderColor:item.bdcolor}">{{item.text}}</div>
+                <div
+                  class="lable-text"
+                  v-for="(item, index) in lableList"
+                  :key="index"
+                  :style="{
+                    background: item.bgcolor,
+                    borderColor: item.bdcolor,
+                  }"
+                >
+                  {{ item.text }}
+                </div>
               </div>
             </div>
           </div>
         </div>
         <div class="right-top-list">
-          <div class="dataList"
-               @click="toOrder(1)">
-            <div class="data-list-left"><img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/project_icon.png" />
-              <p>项目订单</p>
+          <div class="dataList" @click="toOrder(1)">
+            <div class="">
+              <img
+                src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/project_icon.png"
+              />
+              <div>项目订单</div>
             </div>
-            <div><span>{{order_total.project}}</span></div>
+            <span>{{ order_total.project }}</span>
           </div>
-          <div class="dataList"
-               style="margin:18px 0px"
-               @click="toOrder(2)">
-            <div class="data-list-left"><img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/coupon_icon.png" />
-              <p>优惠券</p>
+          <div class="dataList" style="margin: 18px 0px" @click="toOrder(2)">
+            <div class="">
+              <img
+                src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/coupon_icon.png"
+              />
+              <div>次卡数量</div>
             </div>
-            <div><span>{{order_total.coupon}}</span></div>
+            <span>{{ order_total.card_num }}</span>
           </div>
-          <div class="dataList"
-               @click="toOrder(3)">
-            <div class="data-list-left"><img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/order_total_icon.png" />
-              <p>商品订单</p>
+          <div class="dataList" @click="toOrder(3)">
+            <div class="">
+              <img
+                src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/order_total_icon.png"
+              />
+              <div>商品订单</div>
             </div>
-            <div><span>{{order_total.goods}}</span></div>
+            <span>{{ order_total.goods }}</span>
           </div>
         </div>
       </div>
@@ -112,40 +175,50 @@
           <div class="tab">
             <div class="tab-title">执行方案</div>
           </div>
-          <div class="programmeList"
-               v-if="programmeList.length>0">
+          <div class="programmeList" v-if="programmeList.length > 0">
             <div class="programmeWeek">
-              <div class="programmeItem"
-                   v-for="item,index in programmeList"
-                   :key="index">
-                <div :class="selectWeek==index?'weekItemSelect':'weekItem'"
-                     @click="weekSelect(index)">{{item.name}}</div>
-                <div class="weekLine"
-                     v-if="index==3?false:true"></div>
+              <div
+                class="programmeItem"
+                v-for="(item, index) in programmeList"
+                :key="index"
+              >
+                <div
+                  :class="selectWeek == index ? 'weekItemSelect' : 'weekItem'"
+                  @click="weekSelect(index)"
+                >
+                  {{ item.name }}
+                </div>
+                <div class="weekLine" v-if="index == 3 ? false : true"></div>
               </div>
             </div>
-            <div class="doTime">{{programmeList[selectWeek].time}}</div>
-            <div class="weekDetails"
-                 v-if="programmeList.length>0">
-              <div class="contentItem"
-                   v-for="item,index1 in programmeList[selectWeek].list"
-                   :key="index1">
+            <div class="doTime">{{ programmeList[selectWeek].time }}</div>
+            <div class="weekDetails" v-if="programmeList.length > 0">
+              <div
+                class="contentItem"
+                v-for="(item, index1) in programmeList[selectWeek].list"
+                :key="index1"
+              >
                 <div class="itemTitle">
-                  <div>{{item.name}}</div>
-                  <div>{{item.classify_name}}</div>
+                  <div>{{ item.name }}</div>
+                  <div>{{ item.classify_name }}</div>
                   <!-- <div>{{item.time}}</div> -->
                 </div>
-                <div class="itemContent"
-                     v-for="items,index2 in item.list"
-                     :key="index2">
-                  <img class="itemContent-img"
-                       :src="items.cover_url" />
+                <div
+                  class="itemContent"
+                  v-for="(items, index2) in item.list"
+                  :key="index2"
+                >
+                  <img class="itemContent-img" :src="items.cover_url" />
                   <div class="itemContent-right">
                     <div class="right-content">
-                      <div class="right-name">{{items.name |ellipsis(14)}}</div>
-                      <div class="right-price">{{items.price |doubleNum(2)}}</div>
+                      <div class="right-name">
+                        {{ items.name | ellipsis(14) }}
+                      </div>
+                      <div class="right-price">
+                        {{ items.price | doubleNum(2) }}
+                      </div>
                     </div>
-                    <div class="right-project">{{items.product_name}}</div>
+                    <div class="right-project">{{ items.product_name }}</div>
                   </div>
                 </div>
               </div>
@@ -154,14 +227,36 @@
         </div>
       </div>
     </div>
+    <!-- 备注 -->
+    <mine-pupop :show="remarkPupopVisible">
+      <div class="block">
+        <div class="delete-pupop" @click="remarkPupopVisible = false">
+          <img
+            src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/delete.png"
+            alt
+          />
+        </div>
+        <div class="pupop-title">备注</div>
+        <textarea
+          type="text"
+          class="noticeInput"
+          placeholder="备注"
+          v-model="userInfo.remark"
+        ></textarea>
+        <div class="noticeSubmit">
+          <div class="submit-notice" @click="submitRemark">确定</div>
+        </div>
+      </div>
+    </mine-pupop>
   </div>
 </template>
 
 <script>
 import api from "../../../server/home";
+import minePupop from "../../../components/minePupop/index.vue";
 
 export default {
-  data () {
+  data() {
     return {
       userInfo: {
         image:
@@ -169,16 +264,17 @@ export default {
         name: "张三",
         sex: "女",
         age: "23",
-        skinType: "中性皮肤"
+        skinType: "中性皮肤",
+        real_name: "",
+        remark: "",
       },
       problem: "",
       //面部标签
-      lableList: [
-      ],
+      lableList: [],
       //执行方案
       programmeList: [],
 
-      remarks: {},
+      // remarks: {},
       //项目列表
       projectList: [],
 
@@ -188,35 +284,42 @@ export default {
       projectInfo: "",
       weekInfo: "",
       programmeIndex: "",
-      remarks: "",
-      isPupop: false
+      isPupop: false,
+      nameInpVisible: false,
+      remarkPupopVisible: false,
     };
   },
+  components: { minePupop },
   computed: {
-    gender () {
+    gender() {
       // 性别，1男，2女，0保密
-      return this.userInfo.sex == 1 ?
-        'https://we-spa.oss-cn-shenzhen.aliyuncs.com/wxapp/20220610/male.png' :
-        'https://we-spa.oss-cn-shenzhen.aliyuncs.com/wxapp/20220610/female.png'
-    }
+      return this.userInfo.sex == 1
+        ? "https://we-spa.oss-cn-shenzhen.aliyuncs.com/wxapp/20220610/male.png"
+        : "https://we-spa.oss-cn-shenzhen.aliyuncs.com/wxapp/20220610/female.png";
+    },
   },
   watch: {},
 
   methods: {
-    getPadUserInfo () {
-      api.getPadUserInfo({ id: this.id }).then(res => {
+    getPadUserInfo() {
+      api.getPadUserInfo({ id: this.id }).then((res) => {
+        console.log(res, "aaaaaaaa");
+        // 将用户手机号中间四位变成****
+        res.data.user.mobile =
+          res.data.user.mobile.substring(0, 3) +
+          "****" +
+          res.data.user.mobile.substring(7);
         this.userInfo = res.data.user;
-        this.remarks = res.data.remark;
+        // this.userInfo.remarks = res.data.remark;
         this.problem = res.data.skin_name;
-        let _problem = []
-        res.data.face_names.forEach(item => {
-          let info = {}
-          info['text'] = item
-          _problem.push(info)
-          console.log(_problem, '_problem');
-        })
-        this.lableList = _problem
-        this.remarks = res.data.remark
+        let _problem = [];
+        res.data.face_names.forEach((item) => {
+          let info = {};
+          info["text"] = item;
+          _problem.push(info);
+          console.log(_problem, "_problem");
+        });
+        this.lableList = _problem;
         this.randomColor();
         this.order_total = res.data.order_total;
         this.programmeList = res.data.scheme_list;
@@ -224,40 +327,40 @@ export default {
         // this.coupon_list = res.data.order_data.coupon_list;
       });
     },
-    randomColor (type) {
+    randomColor(type) {
       let arr = [
         {
           background: "rgba(244, 247, 255, 1)",
-          border: "rgba(85, 124, 255, 1)"
+          border: "rgba(85, 124, 255, 1)",
         },
         {
           background: "rgba(245, 252, 245, 1)",
-          border: "rgba(66, 211, 81, 1)"
+          border: "rgba(66, 211, 81, 1)",
         },
         {
           background: "rgba(254, 244, 237, 1)",
-          border: "rgba(250, 125, 34, 1)"
+          border: "rgba(250, 125, 34, 1)",
         },
         {
           background: "rgba(249, 245, 255, 1)",
-          border: "rgba(136, 50, 255, 1)"
+          border: "rgba(136, 50, 255, 1)",
         },
         {
           background: "rgba(255, 252, 245, 1)",
-          border: "rgba(204, 116, 42, 1)"
-        }
+          border: "rgba(204, 116, 42, 1)",
+        },
       ];
-      this.lableList.forEach(res => {
+      this.lableList.forEach((res) => {
         let color = Math.floor(Math.random() * arr.length);
         this.$set(res, "bgcolor", arr[color].background);
         this.$set(res, "bdcolor", arr[color].border);
       });
     },
-    weekSelect (index) {
+    weekSelect(index) {
       console.log("xxxx");
       this.selectWeek = index;
     },
-    onOperation (index) {
+    onOperation(index) {
       if (this.programmeList[index].onSelect) {
         this.$set(
           this.programmeList[index],
@@ -268,30 +371,62 @@ export default {
         this.$set(this.programmeList[index], "onSelect", true);
       }
     },
-    toOrder (index) {
-      let activeName = 'first'
+    toOrder(index) {
+      let activeName = "first";
       if (index == 3) {
-        activeName = 'third'
+        activeName = "third";
       } else if (index == 2) {
-        activeName = 'second'
+        activeName = "second";
       }
       this.$router.push({
         path: "/customerMan/projectOrder",
         query: {
           id: this.id,
-          activeName: activeName
-        }
+          activeName: activeName,
+        },
+      });
+    },
+    toTestRecord() {
+      this.$router.push({
+        path: "/testSkin/details",
+        query: {
+          id: this.userInfo.analysis_id,
+        },
       });
     },
+    editName() {
+      this.nameInpVisible = true;
+      this.$refs.realNameInp.focus();
+    },
+    async updateRealName() {
+      let resp = await api.updateUserProfile({
+        id: this.id,
+        real_name: this.userInfo.real_name,
+      });
+      if (resp.code === 200) {
+        this.$message.success("保存成功！");
+      }
+      this.nameInpVisible = false;
+    },
+    async submitRemark() {
+      let resp = await api.updateUserProfile({
+        id: this.id,
+        remark: this.userInfo.remark,
+      });
+      if (resp.code === 200) {
+        this.$message.success("保存成功！");
+      }
+      this.remarkPupopVisible = false;
+    },
   },
 
-  created () {
+  created() {
     let id = this.$route.query.id;
     this.id = id;
     this.getPadUserInfo();
   },
 
-  mounted () { }
+  mounted() {},
 };
 </script>
 
@@ -314,53 +449,85 @@ export default {
     height: 100%;
     .user-info {
       display: flex;
+      flex-direction: column;
       align-items: center;
-      .user-img {
-        width: 96px;
-        img {
-          width: 100%;
-          display: block;
-          border-radius: 6px;
+      .title {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 10px;
+        .txt {
+          color: #333333;
+        }
+        .test-record {
+          font-size: 12px;
+          color: #fa7d22;
         }
       }
-      .user-span {
-        margin-left: 12px;
-
-        span {
-          color: #333333;
+      .detail-info {
+        display: flex;
+        .user-img {
+          width: 96px;
+          img {
+            width: 100%;
+            display: block;
+            border-radius: 6px;
+          }
         }
-        .info {
-          display: flex;
-          justify-content: space-between;
+        .user-span {
+          flex: 1;
+          margin-left: 12px;
 
-          .name {
-            font-size: 16px;
+          span {
+            color: #333333;
           }
-          .sex {
-            img {
-              width: 24px;
-              height: 24px;
+          .info {
+            display: flex;
+            justify-content: space-between;
+
+            .name {
+              font-size: 14px;
             }
-          }
-          .age {
-            margin-left: 13px;
-            span:nth-child(1) {
-              font-size: 22px;
+            .sex {
+              img {
+                width: 24px;
+                height: 24px;
+              }
             }
-            span:nth-child(2) {
+            .age {
               margin-left: 4px;
-              color: #999999;
+              span:nth-child(1) {
+                font-size: 14px;
+              }
+              span:nth-child(2) {
+                margin-left: 4px;
+                color: #999999;
+              }
             }
           }
-        }
-        div:nth-child(2),
-        div:nth-child(3) {
-          margin-bottom: 8px;
+          .real-name {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            .real-name-inp {
+              width: 35px !important;
+              height: 25px !important;
+            }
+            .edit-name {
+              width: 20px;
+              height: 20px;
+            }
+          }
+          div:nth-child(2),
+          div:nth-child(3) {
+            margin-bottom: 8px;
+          }
         }
       }
     }
     .personage-data {
-      margin-top: 30px;
+      margin-top: 14px;
       .myDataList {
         margin-top: 15px;
         .bigSixe {
@@ -374,6 +541,13 @@ export default {
           color: #fa7d22;
         }
       }
+      .coupon-num {
+        span {
+          color: #fa7d22;
+          font-size: 16px;
+          font-weight: 500;
+        }
+      }
     }
   }
 
@@ -392,17 +566,20 @@ export default {
         flex-direction: column;
         .dataList {
           height: 56px;
-          // width: 239ppx;
+          width: 193px;
           background: #ffffff;
           box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
           border-radius: 8px;
-          padding: 16px 12px 12px 12px;
+          padding: 12px 20px 12px 14px;
           display: flex;
           justify-content: space-between;
           align-items: center;
-          .data-list-left {
+          div:nth-child(1) {
             display: flex;
             align-items: center;
+            img {
+              margin-right: 14px;
+            }
           }
           img {
             width: 33px;
@@ -414,7 +591,7 @@ export default {
           }
           span {
             font-size: 16px;
-            margin-right: 20px;
+            // margin-right: 20px;
           }
         }
       }
@@ -423,7 +600,7 @@ export default {
         box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
         border-radius: 8px;
         padding: 16px 12px 12px 12px;
-        width: calc(100% - 239px);
+        width: 358px;
         height: 100%;
         .lable {
           //   margin-top: 23px;
@@ -783,5 +960,62 @@ export default {
       }
     }
   }
+  .block {
+    width: 540px;
+    background: #ffffff;
+    border-radius: 8px;
+    position: relative;
+    padding: 42px;
+    .delete-pupop {
+      position: absolute;
+      width: 32px;
+      height: 32px;
+      top: 5px;
+      right: 5px;
+      img {
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
+    }
+    .pupop-title {
+      font-size: 14px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #333333;
+      line-height: 20px;
+      text-align: center;
+    }
+
+    .noticeInput {
+      margin-top: 50px;
+      margin-left: 80px;
+      padding: 10px;
+      width: 307px;
+      height: 184px;
+      border: 1px solid #f5f5f5;
+    }
+
+    .noticeSubmit {
+      margin-top: 20px;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .submit-notice {
+      width: 100px;
+      height: 29px;
+      border-radius: 14px;
+      font-size: 14px;
+      font-weight: 500;
+      background: #fa7d22;
+      color: white;
+      line-height: 29px;
+      text-align: center;
+      margin-left: 22px;
+    }
+  }
 }
 </style>

src/pages/customerMan/index.vue

@@ -1,52 +1,51 @@
 <template>
   <div class="mine">
     <div class="condition">
-      <el-input placeholder="请输入内容"
-                class="search"
-                v-model="searchText">
-        <i slot="prefix"
-           class="el-input__icon el-icon-search"></i>
+      <el-input placeholder="请输入内容" class="search" v-model="searchText">
+        <i slot="prefix" class="el-input__icon el-icon-search"></i>
       </el-input>
-      <el-button type="primary"
-                 class="searchButton"
-                 @click="getUserList()">搜索</el-button>
+      <el-button type="primary" class="searchButton" @click="getUserList()"
+        >搜索</el-button
+      >
     </div>
 
     <div class="user-list">
-      <el-table ref="multipleTable"
-                :data="tableData"
-                tooltip-effect="dark"
-                height="500"
-                style="width: 100%;border-radius: 8px;"
-                @row-click="handleSelectionChange">
-        <el-table-column label="头像"
-                         width="120">
+      <el-table
+        ref="multipleTable"
+        :data="tableData"
+        tooltip-effect="dark"
+        height="500"
+        style="width: 100%; border-radius: 8px"
+        @row-click="handleSelectionChange"
+      >
+        <el-table-column label="头像" width="120">
           <template slot-scope="scope">
-            <div class="head-img"><img :src="scope.row.avatar_url"
-                   alt=""></div>
+            <div class="head-img">
+              <img :src="scope.row.avatar_url" alt="" />
+            </div>
           </template>
         </el-table-column>
-        <el-table-column prop="nickname"
-                         label="昵称"
-                         width="120">
+        <el-table-column prop="nickname" label="昵称" width="120">
         </el-table-column>
-        <el-table-column prop="mobile"
-                         label="联系电话"
-                         show-overflow-tooltip>
+        <el-table-column prop="mobile" label="联系电话" show-overflow-tooltip>
         </el-table-column>
-        <el-table-column prop="create_time"
-                         label="注册时间"
-                         show-overflow-tooltip>
+        <el-table-column
+          prop="create_time"
+          label="注册时间"
+          show-overflow-tooltip
+        >
         </el-table-column>
       </el-table>
 
       <div class="pagin">
-        <el-pagination background
-                       layout="prev, pager, next"
-                       @size-change="handleSizeChange"
-                       @current-change="handleCurrentChange"
-                       :current-page.sync="currentPage1"
-                       :total="total">
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page.sync="currentPage1"
+          :total="total"
+        >
         </el-pagination>
       </div>
     </div>
@@ -57,74 +56,73 @@
 import api from "../../server/home";
 export default {
   components: {},
-  data () {
+  data() {
     return {
-      searchText: '',
-      dates: '',
-      coupon: '',
+      searchText: "",
+      dates: "",
+      coupon: "",
       couponList: [
         {
-          value: '选项1',
-          label: '黄金糕'
-        }, {
-          value: '选项2',
-          label: '双皮奶'
-        }
+          value: "选项1",
+          label: "黄金糕",
+        },
+        {
+          value: "选项2",
+          label: "双皮奶",
+        },
       ],
       tableData: [],
       currentPage1: 1,
-      multipleSelection: '',
-      total: 0
-
+      multipleSelection: "",
+      total: 0,
     };
   },
   computed: {},
   watch: {},
 
   methods: {
-
     // 获取订单列表
-    getUserList () {
+    getUserList() {
       let params = {
         page: this.currentPage1,
         limit: this.limit,
         keywords: this.searchText,
       };
-      api.getUserList(params).then(res => {
+      api.getUserList(params).then((res) => {
         if (res.code == 200) {
+          // 将用户手机号中间四位变成****
+          res.data.list.map((item) => {
+            item.mobile =
+              item.mobile.substring(0, 3) + "****" + item.mobile.substring(7);
+          });
           this.tableData = res.data.list;
           this.total = res.data.total;
         }
       });
     },
 
-    handleCurrentChange (e) {
+    handleCurrentChange(e) {
       this.currentPage1 = e;
       this.getUserList();
     },
 
-    handleSizeChange (val) {
-    },
-    handleSelectionChange (row, column, event) {
+    handleSizeChange(val) {},
+    handleSelectionChange(row, column, event) {
       this.$router.push({
-        path: '/customerMan/details',
+        path: "/customerMan/details",
         query: {
-          id: row.id
-        }
+          id: row.id,
+        },
       });
-    }
+    },
   },
 
-  created () {
+  created() {
     this.getUserList();
   },
 
-
-  mounted () {
-
-  },
-}
-
+  mounted() {},
+};
 </script>
 
 <style lang='less' scoped>

src/pages/customerMan/myOrder/index.vue

@@ -1,192 +1,345 @@
 <template>
   <div class="order">
     <div class="warp">
-      <el-tabs type="border-card"
-               @tab-click="changeTab"
-               v-model="activeName">
-        <el-tab-pane label="项目订单"
-                     name="first">
+      <el-tabs type="border-card" @tab-click="changeTab" v-model="activeName">
+        <el-tab-pane label="项目订单" name="first">
           <div class="user-list">
-            <el-table ref="multipleTable"
-                      :data="projectData"
-                      tooltip-effect="dark"
-                      height="354"
-                      style="width: 100%;border-radius: 8px;"
-                      @row-click="handleSelectionChange">
-              <el-table-column prop="goods"
-                               label="项目名称"
-                               width="200">
+            <el-table
+              ref="multipleTable"
+              :data="projectData"
+              tooltip-effect="dark"
+              height="354"
+              style="width: 100%; border-radius: 8px"
+              @row-click="handleSelectionChange"
+            >
+              <el-table-column prop="goods" label="项目名称" width="200">
                 <template slot-scope="scope">
-                  <div v-for="(val,index) in scope.row.goods"
-                       :key="index">
-                    <div>{{val.name}}</div>
+                  <div v-for="(val, index) in scope.row.goods" :key="index">
+                    <div>{{ val.name }}</div>
                   </div>
                 </template>
               </el-table-column>
-              <el-table-column prop="goods"
-                               label="数量"
-                               show-overflow-tooltip>
+              <el-table-column prop="goods" label="数量" show-overflow-tooltip>
                 <template slot-scope="scope">
-                  <div>{{scope.row.goods.length}}</div>
+                  <div>{{ scope.row.goods.length }}</div>
                 </template>
               </el-table-column>
-              <el-table-column prop="price"
-                               label="总价格"
-                               show-overflow-tooltip></el-table-column>
-              <el-table-column prop="order_time"
-                               label="预约时间"
-                               width="180"
-                               show-overflow-tooltip></el-table-column>
-              <el-table-column prop="store_name"
-                               label="预约店铺"
-                               show-overflow-tooltip></el-table-column>
-              <el-table-column prop="status"
-                               label="状态"
-                               show-overflow-tooltip>
+              <el-table-column
+                prop="price"
+                label="总价格"
+                show-overflow-tooltip
+              ></el-table-column>
+              <el-table-column
+                prop="order_time"
+                label="预约时间"
+                width="180"
+                show-overflow-tooltip
+              ></el-table-column>
+              <el-table-column
+                prop="store_name"
+                label="预约店铺"
+                show-overflow-tooltip
+              ></el-table-column>
+              <el-table-column prop="status" label="状态" show-overflow-tooltip>
                 <template slot-scope="scope">
-                  <div :class="'color'+scope.row.status">{{scope.row.status!=5?statusStr[scope.row.status]:statusStr[statusStr.length-1]}}</div>
+                  <div :class="'color' + scope.row.status">
+                    {{
+                      scope.row.status != 5
+                        ? statusStr[scope.row.status]
+                        : statusStr[statusStr.length - 1]
+                    }}
+                  </div>
                 </template>
               </el-table-column>
             </el-table>
 
             <div class="pagin">
-              <el-pagination background
-                             layout="prev, pager, next"
-                             @current-change="handleCurrentChange"
-                             :current-page.sync="currentPage1"
-                             :total="total"></el-pagination>
+              <el-pagination
+                background
+                layout="prev, pager, next"
+                @current-change="handleCurrentChange"
+                :current-page.sync="currentPage1"
+                :total="total"
+              ></el-pagination>
             </div>
           </div>
         </el-tab-pane>
-        <el-tab-pane label="卡卷订单"
-                     name="second">
+        <el-tab-pane label="次卡订单" name="second">
           <div class="user-list">
-            <el-table ref="multipleTable"
-                      :data="couponData"
-                      tooltip-effect="dark"
-                      height="354"
-                      style="width: 100%;border-radius: 8px;">
-
-              <!-- create_time: "2022-03-10 10:39:19"
-ex_time: "2022.03.17 23:59"
-id: 2517
-name: "新人体验券"
-status: 2
-type: "全额券" -->
-
-              <el-table-column prop="name"
-                               label="卡卷名称"
-                               width="200"></el-table-column>
-              <el-table-column prop="type"
-                               label="卡卷类型"
-                               show-overflow-tooltip></el-table-column>
-              <el-table-column prop="price"
-                               label="总价格"
-                               show-overflow-tooltip></el-table-column>
-              <el-table-column prop="create_time"
-                               label="到期时间"
-                               width="180"
-                               show-overflow-tooltip></el-table-column>
-              <el-table-column prop="create_time"
-                               label="创建时间"
-                               width="180"
-                               show-overflow-tooltip></el-table-column>
-              <el-table-column prop="status"
-                               label="状态"
-                               show-overflow-tooltip>
+            <el-table
+              ref="multipleTable"
+              :data="cardListData"
+              tooltip-effect="dark"
+              height="354"
+              @row-click="openDetail"
+              style="width: 100%; border-radius: 8px"
+            >
+              <el-table-column prop="card_name" label="卡券名称" width="200">
+                <template slot-scope="scope">
+                  <div>{{ scope.row.card_name | ellipsis(8) }}</div>
+                </template>
+              </el-table-column>
+              <el-table-column prop="total_num" label="总次数" show-overflow-tooltip align="center">
+              </el-table-column>
+              <el-table-column
+                prop="num"
+                label="剩余次数"
+                show-overflow-tooltip
+                align="center"
+              ></el-table-column>
+              <el-table-column
+                prop="used_num"
+                label="已用次数"
+                width="180"
+                show-overflow-tooltip
+                align="center"
+              ></el-table-column>
+              <el-table-column
+                prop="expir_time"
+                label="过期时间"
+                width="180"
+                show-overflow-tooltip
+              ></el-table-column>
+              <el-table-column
+                prop="create_time"
+                label="创建时间"
+                width="180"
+                show-overflow-tooltip
+              ></el-table-column>
+              <el-table-column prop="status" label="状态" show-overflow-tooltip>
                 <template slot-scope="scope">
-                  <div :class="'color'+scope.row.status">{{couponStatus[scope.row.status]}}</div>
+                  <div :class="'color' + scope.row.status">
+                    {{
+                      scope.row.status == -1
+                        ? "已过期"
+                        : scope.row.status == -0
+                        ? "已使用"
+                        : "待使用"
+                    }}
+                  </div>
                 </template>
               </el-table-column>
             </el-table>
 
             <div class="pagin">
-              <el-pagination background
-                             layout="prev, pager, next"
-                             @current-change="handleCurrentChange"
-                             :current-page.sync="currentPage1"
-                             :total="total"></el-pagination>
+              <el-pagination
+                background
+                layout="prev, pager, next"
+                @current-change="handleCurrentChange"
+                :current-page.sync="currentPage1"
+                :total="total"
+              ></el-pagination>
             </div>
           </div>
         </el-tab-pane>
 
-        <el-tab-pane label="商品订单"
-                     name="third">
+        <el-tab-pane label="商品订单" name="third">
           <div class="user-list">
-            <el-table ref="multipleTable"
-                      :data="goodData"
-                      tooltip-effect="dark"
-                      height="354"
-                      style="width: 100%;border-radius: 8px;">
-
+            <el-table
+              ref="multipleTable"
+              :data="goodData"
+              tooltip-effect="dark"
+              height="354"
+              style="width: 100%; border-radius: 8px"
+            >
               <!-- create_time: "2022-03-19 22:53:40"
 goods: [{order_id: 47, name: "润百颜玻尿酸屏障调理面膜", num: 1}]
 id: 47
 price: "0.01"
 status: 5 -->
 
-              <el-table-column prop="goods"
-                               label="商品名称"
-                               width="200">
+              <el-table-column prop="goods" label="商品名称" width="200">
                 <template slot-scope="scope">
-                  <div v-for="(val,index) in scope.row.goods"
-                       :key="index">
-                    <div>{{val.name}}</div>
+                  <div v-for="(val, index) in scope.row.goods" :key="index">
+                    <div>{{ val.name }}</div>
                   </div>
                 </template>
               </el-table-column>
-              <el-table-column prop="goods"
-                               label="数量"
-                               show-overflow-tooltip>
+              <el-table-column prop="goods" label="数量" show-overflow-tooltip>
                 <template slot-scope="scope">
-                  <div>{{scope.row.goods.length}}</div>
+                  <div>{{ scope.row.goods.length }}</div>
                 </template>
               </el-table-column>
-              <el-table-column prop="price"
-                               label="实付款"
-                               show-overflow-tooltip></el-table-column>
-              <el-table-column prop="create_time"
-                               label="下单时间"
-                               width="180"
-                               show-overflow-tooltip></el-table-column>
-              <el-table-column prop="status"
-                               label="状态"
-                               show-overflow-tooltip>
+              <el-table-column
+                prop="price"
+                label="实付款"
+                show-overflow-tooltip
+              ></el-table-column>
+              <el-table-column
+                prop="create_time"
+                label="下单时间"
+                width="180"
+                show-overflow-tooltip
+              ></el-table-column>
+              <el-table-column prop="status" label="状态" show-overflow-tooltip>
                 <template slot-scope="scope">
-                  <div :class="'classShow'+scope.$index">{{scope.row.status==1||scope.row.status==2?goodStatus[scope.row.status]:goodStatus[goodStatus.length-1]}}</div>
+                  <div :class="'classShow' + scope.$index">
+                    {{
+                      scope.row.status == 1 || scope.row.status == 2
+                        ? goodStatus[scope.row.status]
+                        : goodStatus[goodStatus.length - 1]
+                    }}
+                  </div>
                 </template>
               </el-table-column>
             </el-table>
 
             <div class="pagin">
-              <el-pagination background
-                             layout="prev, pager, next"
-                             @current-change="handleCurrentChange"
-                             :current-page.sync="currentPage1"
-                             :total="total"></el-pagination>
+              <el-pagination
+                background
+                layout="prev, pager, next"
+                @current-change="handleCurrentChange"
+                :current-page.sync="currentPage1"
+                :total="total"
+              ></el-pagination>
+            </div>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="优惠券" name="fourth">
+          <div class="user-list">
+            <el-table
+              ref="multipleTable"
+              :data="couponData"
+              tooltip-effect="dark"
+              height="354"
+              style="width: 100%; border-radius: 8px"
+            >
+              <!-- create_time: "2022-03-10 10:39:19"
+ex_time: "2022.03.17 23:59"
+id: 2517
+name: "新人体验券"
+status: 2
+type: "全额券" -->
+
+              <el-table-column
+                prop="name"
+                label="卡卷名称"
+                width="200"
+              ></el-table-column>
+              <el-table-column
+                prop="type"
+                label="卡卷类型"
+                show-overflow-tooltip
+              ></el-table-column>
+              <el-table-column
+                prop="price"
+                label="总价格"
+                show-overflow-tooltip
+              ></el-table-column>
+              <el-table-column
+                prop="create_time"
+                label="到期时间"
+                width="180"
+                show-overflow-tooltip
+              ></el-table-column>
+              <el-table-column
+                prop="create_time"
+                label="创建时间"
+                width="180"
+                show-overflow-tooltip
+              ></el-table-column>
+              <el-table-column prop="status" label="状态" show-overflow-tooltip>
+                <template slot-scope="scope">
+                  <div :class="'color' + scope.row.status">
+                    {{ couponStatus[scope.row.status] }}
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table>
+
+            <div class="pagin">
+              <el-pagination
+                background
+                layout="prev, pager, next"
+                @current-change="handleCurrentChange"
+                :current-page.sync="currentPage1"
+                :total="total"
+              ></el-pagination>
             </div>
           </div>
         </el-tab-pane>
       </el-tabs>
     </div>
+    <!-- 次卡详情 -->
+    <mine-pupop :show="isPore">
+      <div class="pore-block">
+        <div class="delete-pupop" @click="isPore = false">
+          <img
+            src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/delete.png"
+            alt
+          />
+        </div>
+        <div class="pore-content">
+          <div class="card-title">订单详情</div>
+          <div class="project">
+            <div class="project-title">项目名称：</div>
+            <div class="project-list">
+              <div
+                class="project-info"
+                v-for="(item, index) in cardInfo.project_list"
+                :key="index"
+              >
+                <div class="name-text">{{ item.project_name }}</div>
+                <div class="change-num">
+                  <div class="num-content">
+                    <div class="content-left" @click="reduce(index)">-</div>
+                    <div class="content-num">{{ item.num || 0 }}</div>
+                    <div class="content-right" @click="item.num++">+</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="common">
+            <span class="common-title">支付方式：</span
+            ><span>{{ cardInfo.pay_way }}</span>
+          </div>
+          <div class="common">
+            <span class="common-title">有效期限：</span
+            ><span>{{ cardInfo.ex_time }}</span>
+          </div>
+          <div class="common">
+            <span class="common-title">实付金额：</span
+            ><span>￥{{ cardInfo.price }}</span>
+          </div>
+          <div class="consume-list">
+            <div class="consume-title">消耗信息：</div>
+            <div
+              class="consume-info min-size"
+              v-for="(item, index) in cardLogList"
+              :key="index"
+            >
+              <div class="shop">{{ item.store_name }}</div>
+              <div class="project-tips">{{ item.remark }}</div>
+              <div class="project-ts">{{ item.create_time }}</div>
+            </div>
+          </div>
+        </div>
+        <div class="confirm" @click="confirm">确定</div>
+      </div>
+    </mine-pupop>
   </div>
 </template>
 
 <script>
 import api from "../../../server/home";
+import minePupop from "../../../components/minePupop/index.vue";
 
 export default {
-  data () {
+  components: {
+    minePupop,
+  },
+  data() {
     return {
       couponList: [
         {
           value: "选项1",
-          label: "黄金糕"
+          label: "黄金糕",
         },
         {
           value: "选项2",
-          label: "双皮奶"
-        }
+          label: "双皮奶",
+        },
       ],
       tableData: [
         {
@@ -198,7 +351,7 @@ export default {
           numberList: 2,
           price: 100,
           shop: "运用店",
-          status: 2
+          status: 2,
         },
         {
           date: "2022.04.25  14:30",
@@ -209,33 +362,24 @@ export default {
           numberList: 5,
           price: 800,
           shop: "武昌店",
-          status: 1
-        }
-      ],
-      statusStr: [
-        "未支付",
-        "待使用",
-        "正在使用",
-        "已结算",
-        "已取消"
-      ],
-      couponStatus: [
-        '待使用',
-        '已使用',
-        '已过期'
-      ],
-      goodStatus: [
-        '未支付',
-        '已支付',
-        '已取货'
+          status: 1,
+        },
       ],
-      activeName: 'first',
+      statusStr: ["未支付", "待使用", "正在使用", "已结算", "已取消"],
+      couponStatus: ["待使用", "已使用", "已过期"],
+      goodStatus: ["未支付", "已支付", "已取货"],
+      activeName: "first",
       currentPage1: 1,
       couponData: [],
       goodData: [],
       projectData: [],
+      cardOrderData: [],
       total: 100,
-      limit: 10
+      limit: 10,
+      isPore: false,
+      cardInfo: {}, //订单详情
+      cardLogList: [], //次卡消耗记录
+      cardListData: [], //用户次卡列表
     };
   },
   computed: {},
@@ -243,90 +387,169 @@ export default {
 
   methods: {
     // 获取优惠券订单
-    getUserCoupon () {
+    getUserCoupon() {
       let params = {
         page: this.currentPage1,
         limit: this.limit,
-        id: this.id
+        id: this.id,
       };
-      api.getUserCoupon(params).then(res => {
+      api.getUserCoupon(params).then((res) => {
         this.couponData = res.data.list;
         this.total = res.data.total;
       });
     },
+    reduce(index) {
+      this.cardInfo.project_list[index].num--;
+      if (this.cardInfo.project_list[index].num < 0) {
+        this.cardInfo.project_list[index].num = 0;
+      }
+    },
+    //次卡订单详情
+    openDetail(row, column, event) {
+      this.isPore = true;
+      api.cardInfo({ id: row.id }).then((res) => {
+        if (res.code == 200) {
+          this.cardInfo = res.data;
+        }
+      });
+      api.cardLog({ id: row.id }).then((res) => {
+        if (res.code == 200) {
+          this.cardLogList = res.data.list;
+        }
+      });
+    },
+    confirm() {
+      // 项目ID，json字符，格式如：[{"project_id":"10","num":5}]，project_id：适用项目ID，num：剩余次数
+      let project_data = [],
+        project_info = {};
+      this.cardInfo.project_list.forEach((res) => {
+        project_info = {
+          project_id: res.id,
+          num: res.num,
+        };
+        project_data.push(project_info);
+      });
+      api
+        .cardUpdate({
+          id: this.cardInfo.id,
+          project_data: JSON.stringify(project_data),
+        })
+        .then((res) => {
+          if (res.code == 200) {
+            this.$message.success("更改成功！");
+            this.isPore = false;
+          }
+        });
+    },
 
     // 获取商品订单
-    getUserGoods () {
+    getUserGoods() {
       let params = {
         page: this.currentPage1,
         limit: this.limit,
-        id: this.id
+        id: this.id,
       };
-      api.getUserGoods(params).then(res => {
+      api.getUserGoods(params).then((res) => {
         this.goodData = res.data.list;
         this.total = res.data.total;
       });
     },
 
     // 获取获取项目订单
-    getUserProject () {
+    getUserProject() {
       let params = {
         page: this.currentPage1,
         limit: this.limit,
-        id: this.id
+        id: this.id,
       };
-      api.getUserProject(params).then(res => {
+      api.getUserProject(params).then((res) => {
         this.projectData = res.data.list;
         this.total = res.data.total;
       });
     },
-    handleCurrentChange (val) {
-      this.currentPage1 = val
-      if (this.activeName == 'first') {
+
+    // 获取卡券订单
+    // async getCardOrders() {
+    //   let params = {
+    //     page: this.currentPage1,
+    //     limit: this.limit,
+    //     id: this.id,
+    //   };
+    //   let resp = await api.getCardOrders(params);
+    //   if (resp.code === 200) {
+    //     console.log(resp, "adadasdasdadsadsadasd");
+    //     this.cardOrderData = resp.data.list;
+    //     this.total = resp.data.total;
+    //   }
+    // },
+    //获取用户次卡列表
+    async getCardList() {
+      let params = {
+        page: this.currentPage1,
+        limit: this.limit,
+        id: this.id,
+      };
+      let resp = await api.getCardList(params);
+      if (resp.code === 200) {
+        console.log(resp, "asdasdasd");
+        this.cardListData = resp.data.list;
+        this.total = resp.data.total;
+      }
+    },
+    handleCurrentChange(val) {
+      this.currentPage1 = val;
+      if (this.activeName == "first") {
         this.getUserProject();
-      } else if (this.activeName == 'second') {
-        this.getUserCoupon();
-      } else if (this.activeName == 'third') {
+      } else if (this.activeName == "second") {
+        // this.getCardOrders();
+        this.getCardList();
+      } else if (this.activeName == "third") {
         this.getUserGoods();
+      } else if (this.activeName == "fourth") {
+        this.getUserCoupon();
       }
     },
-    handleSelectionChange (row, column, event) {
+    handleSelectionChange(row, column, event) {
       this.$router.push({
         path: "/historicalOrder/details",
         query: {
-          id: row.id
-        }
+          id: row.id,
+        },
       });
     },
-    onSubmit () { },
-    submitFrequency () { },
-    changeTab (e) {
-      this.currentPage1 = 1
+    onSubmit() {},
+    submitFrequency() {},
+    changeTab(e) {
+      this.currentPage1 = 1;
       if (e.index == 0) {
         this.getUserProject();
       } else if (e.index == 1) {
-        this.getUserCoupon();
+        // this.getCardOrders();
+        this.getCardList();
       } else if (e.index == 2) {
         this.getUserGoods();
+      } else if (e.index == 3) {
+        this.getUserCoupon();
       }
-    }
+    },
   },
 
-  created () {
+  created() {
     let id = this.$route.query.id;
-    let activeName = this.$route.query.activeName
-    this.activeName = activeName
+    let activeName = this.$route.query.activeName;
+    this.activeName = activeName;
     this.id = id;
-    if (this.activeName == 'first') {
+    if (this.activeName == "first") {
       this.getUserProject();
-    } else if (this.activeName == 'second') {
-      this.getUserCoupon();
-    } else if (this.activeName == 'third') {
+    } else if (this.activeName == "second") {
+      // this.getCardOrders();
+      this.getCardList();
+    } else if (this.activeName == "third") {
       this.getUserGoods();
     }
   },
 
-  mounted () { }
+  mounted() {},
 };
 </script>
 
@@ -369,4 +592,139 @@ export default {
 .priceColor {
   color: #ff3007;
 }
+.pore-block {
+  width: 540px;
+  height: 400px;
+  background: #ffffff;
+  border-radius: 8px;
+  position: relative;
+  padding: 26px 72px 80px 30px;
+  .delete-pupop {
+    width: 32px;
+    position: absolute;
+    right: 5px;
+    top: 5px;
+    img {
+      width: 100%;
+    }
+  }
+  .pore-content {
+    overflow: scroll;
+    height: 310px;
+    .card-title {
+      font-size: 14px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #333333;
+      line-height: 20px;
+      text-align: center;
+    }
+    .project {
+      display: flex;
+      font-size: 13px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #333333;
+      line-height: 18px;
+      .project-title {
+        color: #999999;
+      }
+      .project-list {
+        flex: 1;
+        .project-info {
+          flex: 1;
+          .change-num {
+            margin-top: 6px;
+            width: 100%;
+            display: flex;
+            justify-content: end;
+            .num-content {
+              width: 104px;
+              height: 28px;
+              background: #ffffff;
+              border-radius: 2px;
+              border: 1px solid #fa7d22;
+              display: flex;
+              align-items: center;
+
+              .content-left,
+              .content-right {
+                width: 28px;
+                height: 100%;
+                background: #fa7d22;
+                font-size: 20px;
+                line-height: 24px;
+                color: #ffffff;
+                text-align: center;
+              }
+              .content-num {
+                flex: 1;
+                font-size: 12px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: rgba(0, 0, 0, 0.65);
+                text-align: center;
+              }
+            }
+          }
+        }
+      }
+    }
+    .common {
+      margin-top: 6px;
+      font-size: 13px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #333333;
+      line-height: 18px;
+      .common-title {
+        color: #999999;
+      }
+    }
+    .consume-list {
+      margin-top: 6px;
+      .consume-title {
+        font-size: 13px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #999999;
+        line-height: 18px;
+      }
+      .consume-info {
+        margin-top: 6px;
+        font-size: 10px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #333333;
+        line-height: 14px;
+        display: flex;
+        justify-content: space-between;
+        .shop {
+        }
+        .project-tips {
+          flex: 1;
+          margin: 0 10px;
+        }
+        .project-ts {
+        }
+      }
+    }
+  }
+  .confirm {
+    background: #fa7d22;
+    border-radius: 14px;
+    position: absolute;
+    bottom: 42px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 176px;
+    height: 28px;
+    font-size: 14px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #ffffff;
+    line-height: 28px;
+    text-align: center;
+  }
+}
 </style>

src/pages/historicalOrder/details/index.vue

@@ -73,14 +73,29 @@
             </div>
             <div class="project-content">
               <div class="title-price">
-                <div class="project-tit">{{item.name | ellipsis(14)}}</div>
+                <div class="project-tit">{{item.name}}</div>
                 <div class="project-price">
                   <span class="min-size">￥</span>
                   {{item.price}}
                 </div>
               </div>
               <div class="project-tips">{{item.product_names}}</div>
-              <div class="project-zoom">{{item.room}}{{item.use_time}}分钟</div>
+              <div class="project-zoom">
+                <el-select v-model="item.tot_name"
+                           v-if="order_data.status<3"
+                           @visible-change="openList($event,item,index)"
+                           @change="changeRoom($event,item,index)"
+                           size="mini"
+                           style="min-width: 150px;"
+                           :placeholder="item.tot_name">
+                  <el-option v-for="i in roomList"
+                             :key="i.id"
+                             :label="i.tot_name"
+                             :value="i.tot_name">
+                  </el-option>
+                </el-select>
+                <div v-else>{{item.tot_name}}</div>
+              </div>
             </div>
           </div>
         </div>
@@ -91,6 +106,26 @@
           <div>¥{{order_data.original_price}}</div>
         </div>
         <div class="cost-coupon-list">
+          <!-- 次卡 -->
+          <div class="coupon">
+            <div class="coupon-tips">
+              <div class="coupon-icon">
+                <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/couponIcon.png"
+                     alt />
+              </div>
+              <div class="coupon-title">次卡</div>
+              <div class="coupon-tip"
+                   v-if="coupon_list.length>0">已选择次卡</div>
+            </div>
+            <div class="on-icon">></div>
+          </div>
+          <div class="coupon-ps"
+               v-for="(item,index) in coupon_list"
+               :key="index">
+            <div>{{item.coupon_name}}</div>
+            <div class="cou-price">-¥{{item.price}}</div>
+          </div>
+          <!-- 优惠券 -->
           <div class="coupon">
             <div class="coupon-tips">
               <div class="coupon-icon">
@@ -98,7 +133,8 @@
                      alt />
               </div>
               <div class="coupon-title">优惠卷</div>
-              <div class="coupon-tip">已选推荐优惠</div>
+              <div class="coupon-tip"
+                   v-if="coupon_list.length>0">已选推荐优惠</div>
             </div>
             <div class="on-icon">></div>
           </div>
@@ -120,7 +156,6 @@
     </div>
   </div>
 </template>
-
 <script>
 import api from "../../../server/home";
 export default {
@@ -141,6 +176,7 @@ export default {
       isPupop: false,
       id: "",
       problem: '',
+      roomList: [],//设备房间列表
     };
   },
   computed: {
@@ -157,6 +193,9 @@ export default {
     getOrderInfo () {
       api.getOrderInfo({ id: this.id }).then(res => {
         this.userInfo = res.data.user;
+        res.data.order_data.project_list.forEach(e => {
+          e["tot_name"] = `${e.device_name}（${e.room}）`
+        })
         this.order_data = res.data.order_data;
         this.problem = res.data.skin_name
         let _problem = []
@@ -174,6 +213,48 @@ export default {
       });
     },
 
+    openList (e, item, index) {
+      console.log(e, item, index, 'e,item,index');
+      if (e) {
+        this.value = ''
+        this.roomList = []
+        let params = {
+          id: this.id,
+          project_id: item.id
+        }
+        api.getDevice_list(params).then(res => {
+          if (res.code == 200) {
+            res.data.list.forEach(item => {
+              item['tot_name'] = `${item.name}（${item.room}）`
+            })
+            this.roomList = res.data.list
+          }
+        })
+      }
+    },
+    changeRoom (e, item, index) {
+      let _id = 0
+      this.roomList.forEach(res => {
+        if (res.tot_name == e) {
+          _id = res.id
+        }
+      })
+      console.log(e, item, index, 'e,item,index');
+      let params = {
+        id: this.id,
+        project_id: item.id,
+        device_id: _id
+      }
+      api.device_change(params).then(res => {
+        if (res.code == 200) {
+          this.$message({
+            message: `${res.msg}`,
+            type: "success"
+          });
+          this.getOrderInfo()
+        }
+      })
+    },
     onOperation (index) {
       if (this.programmeList[index].onSelect) {
         this.$set(
@@ -555,11 +636,14 @@ export default {
               line-height: 18px;
             }
             .project-zoom {
-              font-size: 12px;
+              font-size: 14px;
               font-family: PingFangSC-Regular, PingFang SC;
               font-weight: 400;
               color: #fa7d22;
               line-height: 18px;
+              /deep/ .el-input__inner {
+                color: #fa7d22;
+              }
             }
           }
         }

src/pages/historicalOrder/index.vue

@@ -1,78 +1,99 @@
 <template>
   <div class="mine">
     <div class="condition">
-      <el-date-picker v-model="dates"
-                      type="daterange"
-                      range-separator="->"
-                      start-placeholder="开始日期"
-                      end-placeholder="结束日期"></el-date-picker>
+      <el-date-picker
+        v-model="dates"
+        type="daterange"
+        range-separator="->"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+      ></el-date-picker>
 
-      <el-input placeholder="请输入项目"
-                class="search"
-                v-model="product">
-        <i slot="prefix"
-           class="el-input__icon el-icon-search"></i>
+      <el-input placeholder="请输入项目" class="search" v-model="product">
+        <i slot="prefix" class="el-input__icon el-icon-search"></i>
       </el-input>
 
-      <el-input placeholder="请输入优惠券"
-                class="search"
-                v-model="coupon">
-        <i slot="prefix"
-           class="el-input__icon el-icon-search"></i>
+      <el-input placeholder="请输入优惠券" class="search" v-model="coupon">
+        <i slot="prefix" class="el-input__icon el-icon-search"></i>
       </el-input>
 
-      <el-input placeholder="请输入内容"
-                class="search"
-                v-model="searchText">
-        <i slot="prefix"
-           class="el-input__icon el-icon-search"></i>
+      <el-input placeholder="请输入内容" class="search" v-model="searchText">
+        <i slot="prefix" class="el-input__icon el-icon-search"></i>
       </el-input>
-      <el-button type="primary"
-                 class="searchButton"
-                 @click="getOrderList()">搜索</el-button>
+      <el-button type="primary" class="searchButton" @click="getOrderList()"
+        >搜索</el-button
+      >
     </div>
 
     <div class="user-list">
-      <el-table ref="multipleTable"
-                :data="tableData"
-                tooltip-effect="dark"
-                height="500"
-                style="width: 100%;border-radius: 8px;"
-                @row-click="handleSelectionChange">
-        <el-table-column label="头像"
-                         width="120">
+      <el-table
+        ref="multipleTable"
+        :data="tableData"
+        tooltip-effect="dark"
+        height="500"
+        style="width: 100%; border-radius: 8px"
+        @row-click="handleSelectionChange"
+      >
+        <el-table-column label="头像" width="120">
           <template slot-scope="scope">
             <div class="head-img">
-              <img :src="scope.row.avatar_url"
-                   alt />
+              <img :src="scope.row.avatar_url" alt />
             </div>
           </template>
         </el-table-column>
-        <el-table-column prop="nickname"
-                         label="昵称"
-                         width="120"></el-table-column>
-        <el-table-column prop="mobile"
-                         label="联系电话"
-                         show-overflow-tooltip></el-table-column>
-        <el-table-column prop="order_time"
-                         label="预约时间"
-                         show-overflow-tooltip></el-table-column>
-        <el-table-column prop="date"
-                         label="状态"
-                         show-overflow-tooltip>
+        <el-table-column
+          prop="nickname"
+          label="昵称"
+          width="120"
+        ></el-table-column>
+        <el-table-column
+          prop="mobile"
+          label="联系电话"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          prop="order_time"
+          label="预约时间"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column prop="date" label="状态" show-overflow-tooltip>
           <template slot-scope="scope">
-            <div :style="scope.row.status==0?'color: #FC3019':scope.row.status==5?'color: #A999EA':'color: #61D09D;'">{{ scope.row.status==0?'未支付':scope.row.status==5?'已取消':scope.row.status==1?'待使用':scope.row.status==2?'正在使用':scope.row.status==3?'已结算':'' }}</div>
+            <div
+              :style="
+                scope.row.status == 0
+                  ? 'color: #FC3019'
+                  : scope.row.status == 5
+                  ? 'color: #A999EA'
+                  : 'color: #61D09D;'
+              "
+            >
+              {{
+                scope.row.status == 0
+                  ? "未支付"
+                  : scope.row.status == 5
+                  ? "已取消"
+                  : scope.row.status == 1
+                  ? "待使用"
+                  : scope.row.status == 2
+                  ? "正在使用"
+                  : scope.row.status == 3
+                  ? "已结算"
+                  : ""
+              }}
+            </div>
           </template>
         </el-table-column>
       </el-table>
 
       <div class="pagin">
-        <el-pagination background
-                       layout="prev, pager, next"
-                       @size-change="handleSizeChange"
-                       @current-change="handleCurrentChange"
-                       :current-page.sync="currentPage1"
-                       :total="total"></el-pagination>
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page.sync="currentPage1"
+          :total="total"
+        ></el-pagination>
       </div>
     </div>
   </div>
@@ -83,7 +104,7 @@ import api from "../../server/home";
 
 export default {
   components: {},
-  data () {
+  data() {
     return {
       searchText: "",
       dates: "",
@@ -95,12 +116,12 @@ export default {
       couponList: [
         {
           value: "选项1",
-          label: "黄金糕"
+          label: "黄金糕",
         },
         {
           value: "选项2",
-          label: "双皮奶"
-        }
+          label: "双皮奶",
+        },
       ],
       tableData: [
         {
@@ -109,7 +130,7 @@ export default {
           headImg:
             "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png",
           phone: "13346783645",
-          status: "已完成"
+          status: "已完成",
         },
         {
           date: "2022.04.25  14:30",
@@ -117,11 +138,11 @@ export default {
           headImg:
             "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png",
           phone: "13346783645",
-          status: "已完成"
-        }
+          status: "已完成",
+        },
       ],
       currentPage1: 1,
-      multipleSelection: ""
+      multipleSelection: "",
     };
   },
   computed: {},
@@ -129,7 +150,7 @@ export default {
 
   methods: {
     // 获取订单列表
-    getOrderList () {
+    getOrderList() {
       let start_date = "",
         end_date = "";
       if (this.dates && this.dates.length > 0) {
@@ -143,38 +164,42 @@ export default {
         project_name: this.product,
         coupon_name: this.coupon,
         start_date: start_date,
-        end_date: end_date
+        end_date: end_date,
       };
-      api.getOrderList(params).then(res => {
+      api.getOrderList(params).then((res) => {
         if (res.code == 200) {
+          // 将用户手机号中间四位变成****
+          res.data.list.map((item) => {
+            item.mobile =
+              item.mobile.substring(0, 3) + "****" + item.mobile.substring(7);
+          });
           this.tableData = res.data.list;
           this.total = res.data.total;
         }
       });
     },
 
-    handleCurrentChange (e) {
+    handleCurrentChange(e) {
       this.currentPage1 = e;
       this.getOrderList();
     },
 
-    handleSizeChange (val) {
-    },
-    handleSelectionChange (row, column, event) {
+    handleSizeChange(val) {},
+    handleSelectionChange(row, column, event) {
       this.$router.push({
         path: "/historicalOrder/details",
         query: {
-          id: row.id
-        }
+          id: row.id,
+        },
       });
-    }
+    },
   },
 
-  created () {
+  created() {
     this.getOrderList();
   },
 
-  mounted () { }
+  mounted() {},
 };
 </script>
 

src/pages/home/detailList/index.vue

@@ -138,6 +138,7 @@ export default {
         border-bottom: 2px #f5f5f5 solid;
       }
       .project-wrapper {
+        flex: 1;
         display: flex;
         flex-wrap: wrap;
         .project {

src/pages/login/login.vue

@@ -30,6 +30,7 @@
 </template>
 
 <script>
+import { mapMutations } from 'vuex'
 import api from '../../server/home'
 import axios from 'axios';
 // import Cookies from "js-cookie"
@@ -46,6 +47,7 @@ export default {
   watch: {},
 
   methods: {
+    ...mapMutations(['SAVE_COMMON_VALUE']),
     onLogin () {
       let params = {
         username: this.account,
@@ -54,6 +56,14 @@ export default {
       api.getToken(params).then(res => {
         if (res.code == 200) {
           localStorage.setItem("token", res.data.token)
+          this.SAVE_COMMON_VALUE({
+            'key': 'token',
+            'value': res.data.token
+          })
+          this.SAVE_COMMON_VALUE({
+            'key': 'isLogin',
+            'value': true
+          })
           axios.defaults.headers.token = res.data.token
           this.$router.push({
             path: '/home'

src/pages/testSkin/index.vue

@@ -1,51 +1,57 @@
 <template>
   <div class="mine">
     <div class="condition">
-      <el-date-picker v-model="dates"
-                      type="daterange"
-                      range-separator="->"
-                      start-placeholder="开始日期"
-                      end-placeholder="结束日期">
+      <el-date-picker
+        v-model="dates"
+        type="daterange"
+        range-separator="->"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+      >
       </el-date-picker>
 
-      <el-input placeholder="请输入内容"
-                class="search"
-                v-model="searchText">
-        <i slot="prefix"
-           class="el-input__icon el-icon-search"></i>
+      <el-input placeholder="请输入内容" class="search" v-model="searchText">
+        <i slot="prefix" class="el-input__icon el-icon-search"></i>
       </el-input>
-      <el-button type="primary"
-                 class="searchButton"
-                 @click="getSkinList">搜索</el-button>
+      <el-button type="primary" class="searchButton" @click="getSkinList"
+        >搜索</el-button
+      >
     </div>
     <div class="list">
       <div class="tab">
         <div class="head-img">头像</div>
         <div class="head-name">昵称</div>
         <div class="head-phone">联系电话</div>
-        <div class="head-ts">预约时间</div>
+        <div class="head-ts">检测时间</div>
         <div class="head-status">状态</div>
       </div>
       <div class="content">
-        <div class="tab user-info"
-             v-for="(item,index) in userList"
-             :key="index"
-             @click="onDetails(item.id)">
-          <div class="head-img"><img :src="item.avatar_url"
-                 alt=""></div>
+        <div
+          class="tab user-info"
+          v-for="(item, index) in userList"
+          :key="index"
+          @click="onDetails(item.id)"
+        >
+          <div class="head-img"><img :src="item.avatar_url" alt="" /></div>
           <div class="head-name">{{ item.nickname }}</div>
           <div class="head-phone">{{ item.mobile }}</div>
           <div class="head-ts">{{ item.check_time }}</div>
-          <div class="head-status"
-               :style="item.status==1?'color: #61D09D;':'color: #FC3019;'">{{ item.status==1?'已面诊':'未面诊'}}</div>
+          <div
+            class="head-status"
+            :style="item.status == 1 ? 'color: #61D09D;' : 'color: #FC3019;'"
+          >
+            {{ item.status == 1 ? "已面诊" : "未面诊" }}
+          </div>
         </div>
       </div>
       <div class="pagin">
-        <el-pagination background
-                       layout="prev, pager, next"
-                       @current-change="handleCurrentChange"
-                       :current-page.sync="currentPage1"
-                       :total="total">
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          @current-change="handleCurrentChange"
+          :current-page.sync="currentPage1"
+          :total="total"
+        >
         </el-pagination>
       </div>
     </div>
@@ -53,28 +59,29 @@
 </template>
 
 <script>
-import api from '../../server/home'
+import api from "../../server/home";
 export default {
   components: {},
-  data () {
+  data() {
     return {
       dates: [],
-      searchText: '',
+      searchText: "",
       userList: [],
       currentPage1: 1,
       limit: 10,
       total: 0,
-    }
+    };
   },
   computed: {},
   watch: {},
 
   methods: {
-    getSkinList () {
-      let start_date = '', end_date = ''
+    getSkinList() {
+      let start_date = "",
+        end_date = "";
       if (this.dates && this.dates.length > 0) {
-        start_date = utils.formatTime(this.dates[0], 'yyyy-MM-dd')
-        end_date = utils.formatTime(this.dates[1], 'yyyy-MM-dd')
+        start_date = utils.formatTime(this.dates[0], "yyyy-MM-dd");
+        end_date = utils.formatTime(this.dates[1], "yyyy-MM-dd");
       }
       let params = {
         page: this.currentPage1,
@@ -82,34 +89,39 @@ export default {
         keywords: this.searchText,
         start_date: start_date,
         end_date: end_date,
-      }
-      api.getSkinList(params).then(res => {
+      };
+      api.getSkinList(params).then((res) => {
         if (res.code == 200) {
-          this.userList = res.data.list
-          this.total = res.data.total
+          // 将用户手机号中间四位变成****
+          res.data.list.map((item) => {
+            item.mobile =
+              item.mobile.substring(0, 3) + "****" + item.mobile.substring(7);
+          });
+          this.userList = res.data.list;
+          this.total = res.data.total;
         }
-      })
+      });
     },
-    onDetails (e) {
+    onDetails(e) {
       this.$router.push({
-        path: '/testSkin/details',
+        path: "/testSkin/details",
         query: {
-          id: e
-        }
-      })
+          id: e,
+        },
+      });
+    },
+    handleCurrentChange(e) {
+      this.currentPage1 = e;
+      this.getSkinList();
     },
-    handleCurrentChange (e) {
-      this.currentPage1 = e
-      this.getSkinList()
-    }
   },
 
-  created () {
-    this.getSkinList()
+  created() {
+    this.getSkinList();
   },
 
-  mounted () { }
-}
+  mounted() {},
+};
 </script>
 
 <style lang='less' scoped>

src/router/index.js

@@ -6,7 +6,7 @@ import login from "./map/login";
 
 Vue.use(Router)
 
-export default new Router({
+export default  new Router({
   mode: 'hash',
   base: process.env.BASE_URL,
   routes: [

src/router/map/home.js

@@ -23,91 +23,91 @@ export default {
   name: '首页',
   component: layout,
   children: [{
-      path: '/home',
-      component: Home
+    path: '/home',
+    component: Home
+  },
+  {
+    name: '客户预约表',
+    path: '/home/detailList',
+    meta: {
+      isback: true,
     },
-    {
-      name: '客户预约表',
-      path: '/home/detailList',
-      meta: {
-        isback: true,
-      },
-      component: HomeDetailList
+    component: HomeDetailList
+  },
+  {
+    path: '/testSkin',
+    component: TestSkin
+  },
+  {
+    path: '/testSkin/details',
+    meta: {
+      isback: true,
     },
-    {
-      path: '/testSkin',
-      component: TestSkin
+    component: TestSkinDetails
+  },
+  {
+    path: '/testSkin/updates',
+    meta: {
+      isback: true,
     },
-    {
-      path: '/testSkin/details',
-      meta: {
-        isback: true,
-      },
-      component: TestSkinDetails
+    component: TestSkinUpdate
+  },
+  {
+    path: '/customerMan',
+    component: CustomerMan
+  },
+  {
+    path: '/customerMan/details',
+    meta: {
+      isback: true,
     },
-    {
-      path: '/testSkin/updates',
-      meta: {
-        isback: true,
-      },
-      component: TestSkinUpdate
+    component: CustomerManDetails
+  },
+  {
+    path: '/customerMan/projectOrder',
+    meta: {
+      isback: true,
     },
-    {
-      path: '/customerMan',
-      component: CustomerMan
+    component: projectOrder
+  },
+  {
+    path: '/historicalOrder',
+    component: HistoricalOrder
+  },
+  {
+    path: '/historicalOrder/details',
+    meta: {
+      isback: true,
     },
-    {
-      path: '/customerMan/details',
-      meta: {
-        isback: true,
-      },
-      component: CustomerManDetails
+    component: HistoricalOrderDetails
+  },
+  {
+    path: '/confirmOrder',
+    component: ConfirmOrder
+  },
+  {
+    path: '/confirmOrder/details',
+    meta: {
+      isback: true,
     },
-    {
-      path: '/customerMan/projectOrder',
-      meta: {
-        isback: true,
-      },
-      component: projectOrder
-    },
-    {
-      path: '/historicalOrder',
-      component: HistoricalOrder
-    },
-    {
-      path: '/historicalOrder/details',
-      meta: {
-        isback: true,
-      },
-      component: HistoricalOrderDetails
-    },
-    {
-      path: '/confirmOrder',
-      component: ConfirmOrder
-    },
-    {
-      path: '/confirmOrder/details',
-      meta: {
-        isback: true,
-      },
-      component: ConfirmOrderDetails
-    },
-    {
-      path: '/confirmOrder/addOrder',
-      meta: {
-        isback: true,
-      },
-      component: ConfirmOrderAddOrder
+    component: ConfirmOrderDetails
+  },
+  {
+    path: '/confirmOrder/addOrder',
+    meta: {
+      isback: true,
     },
+    component: ConfirmOrderAddOrder
+  },
 
-    {
-      path: '/storeDetection',
-      component: StoreDetection
-    },
-    {
-      path: '/coupon',
-      component: Coupon
-    },
+  {
+    path: '/storeDetection',
+    component: StoreDetection
+  },
+  {
+    path: '/coupon',
+    component: Coupon
+  },
 
   ]
 }

src/server/home.js

@@ -81,6 +81,12 @@ export default class Home {
   static addUpdate (parms) {
     return $http.post(url.addUpdate, parms);
   }
+  static getDevice_list (parms) {
+    return $http.get(url.getDevice_list, parms);
+  }
+  static device_change (parms) {
+    return $http.post(url.device_change, parms);
+  }
 
   // 获取历史订单
   static getOrderList (parms) {
@@ -157,4 +163,58 @@ export default class Home {
     return $http.get(url.reservedRecords, params)
   }
 
+  // 清除未读消息  0清除所有 1清除预约成功 2清除取消
+  static clearMessage (type) {
+    return $http.get(url.clearMessage, type)
+  }
+
+  // 根据Id清除未读消息  消息记录id
+  static clearMessageById (id) {
+    return $http.get(url.clearMessageById, id)
+  }
+
+  // 获取消息列表 （成功/失败）  1预约成功 2取消预约
+  static getMessageByType ({ type, page, limit }) {
+    return $http.get(url.getMessageByType, { type, page, limit })
+  }
+
+  // 获取消息列表
+  static getMessageList ({ page, limit }) {
+    return $http.get(url.getMessageList, { page, limit })
+  }
+
+  // 获取是否有未读消息
+  static hasUnreadMessage () {
+    return $http.get(url.hasUnreadMessage)
+  }
+
+  // 更新用户信息
+  static updateUserProfile (params) {
+    return $http.post(url.updateUserProfile, params)
+  }
+
+  // 获取用户卡券订单
+  static getCardOrders (params) {
+    return $http.get(url.getCardOrders, params)
+  }
+  // 获取用户次卡列表
+  static getCardList (params) {
+    return $http.get(url.getCardList, params)
+  }
+  // 次卡订单详情
+  static cardInfo (params) {
+    return $http.get(url.cardInfo, params)
+  }
+  // 次卡消耗详情
+  static cardLog (params) {
+    return $http.get(url.cardLog, params)
+  }
+  // 修改次数
+  static cardUpdate (params) {
+    return $http.post(url.cardUpdate, params)
+  }
+  // 获取项目可用的次卡
+  static getOrderCard (params) {
+    return $http.get(url.getOrderCard, params)
+  }
 }

src/server/urls.js

@@ -38,7 +38,7 @@ export default {
   //支付状态
   payStatus: '/v2/pad/order/pay_status',
   //活动折扣
-  getOrderDiscount: '/v2/pad/order/discount',
+  getOrderDiscount: '/v3/pad/order/discount',
   //获取项目分类
   projectClassify: '/v2/pad/project/classify',
   //删除项目和耗材
@@ -47,6 +47,18 @@ export default {
   timesAdd: '/v2/pad/scheme/times_add',
   //新增项目
   addUpdate: '/v2/pad/scheme/update',
+  //次卡订单详情
+  cardInfo:'/v2/pad/card/info',
+  //消耗详情
+  cardLog:'/v2/pad/card/log',
+  //修改次数
+  cardUpdate:'/v2/pad/card/update',
+  //获取项目可用的次卡
+  getOrderCard:'/v2/pad/order/card',
+  //获取可更换的设备
+  getDevice_list:'/v2/pad/order/device_list',
+  //更改设备
+  device_change:'/v2/pad/order/device_change',
 
   /**
    *  by ListKer
@@ -94,7 +106,30 @@ export default {
   // 创建标签
   schemeSave: '/v2/pad/scheme/save',
 
-    // 用户预约记录
-    reservedRecords: '/v2/pad/reserved/index'
+  // 用户预约记录
+  reservedRecords: '/v2/pad/reserved/index',
 
+  // 清除未读消息
+  clearMessage: '/v2/pad/message/batch_read',
+
+  // 根据Id清除未读消息
+  clearMessageById: '/v2/pad/message/read',
+
+  // 获取消息列表 （成功/失败）
+  getMessageByType: '/v2/pad/message/type_list',
+
+  // 获取消息列表
+  getMessageList: '/v2/pad/message/get_list',
+
+  // 获取是否有未读消息
+  hasUnreadMessage: '/v2/pad/message/get_message',
+
+  // 更新用户信息
+  updateUserProfile: '/v2/pad/user/update',
+
+  // 获取用户卡券订单
+  getCardOrders: '/v2/pad/user/card',
+
+  //获取用户次卡列表
+  getCardList:'/v2/pad/user/card_list'
 }

src/store/modules/comVal.js

@@ -1,6 +1,7 @@
 const state = {
   name: 666,
-  token: null
+  token: null,
+  isLogin: false
 }
 
 const actions = {

vue.config.js

@@ -3,8 +3,12 @@
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 module.exports = {
-  publicPath: process.env.env_config === 'prod' ? 'https://h5-cms-vue.ijolijoli.com/dist' :
+  // 测试
+  publicPath: process.env.env_config === 'prod' ? 'https://h5-cms-vue.ijolijoli.com/test_pad/dist' :
     process.env.env_config === 'test' ? '/vapps/calory/' : '/dist/',
+  // 正式
+  // publicPath: process.env.env_config === 'prod' ? 'https://h5-cms-vue.ijolijoli.com/dist' :
+  //   process.env.env_config === 'test' ? '/vapps/calory/' : '/dist/',
   // 设置跨域
   crossorigin: 'anonymous',
   /**
@@ -17,10 +21,10 @@ module.exports = {
 
   // 它支持webPack-dev-server的所有选项
   devServer: {
-    host: "0.0.0.0",
+    host: "0.0.0.0",//ip本地
     port: 8083, // 端口号
-    https: false, // https:{type:Boolean}
-    open: true, //配置自动启动浏览器
+    https: false, // https:{type:Boolean}配置前缀
+    open: false, //配置自动启动浏览器
     proxy: '' // 配置跨域处理
   },
   configureWebpack: {
@@ -38,5 +42,27 @@ module.exports = {
     //         chunkFilename: `css/[name].[hash:6].css`
     //     })
     // ]
+  },
+  css: {
+    loaderOptions: {
+      postcss: {
+        plugins: [
+          require("postcss-px-to-viewport")({
+            unitToConvert: "px", // 把什么单位转换成vw
+            viewportWidth: 1000, // 视口宽度，设计稿宽度
+            viewportHeight: 600, // 视口高度，设计稿高度
+            unitPrecision: 5, // 转换成vw单位的小数点后的保留位数
+            propList: ["*"], // 属性列表，表示你要把哪些css属性的px转换成vw
+            viewportUnit: "vw", // 使用的单位，目前可选单位有vw,vh。
+            fontViewportUnit: "vw", // 字体使用的单位
+            selectorBlackList: ['van', 'el-'], // 匹配不被转换为vw的选择器
+            minPixelValue: 1,
+            mediaQuery: false,
+            replace: true, // 是否直接更换属性值，而不添加备用属性
+            exclude: /(\/|\\)(node_modules)(\/|\\)/,
+          })
+        ]
+      }
+    }
   }
 }