pref: 【客户管理】优化

src/pages/customerMan/details/index.vue

@@ -2,18 +2,30 @@
   <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}}</span></div>
+              <div class="sex"><img :src="gender"
+                    alt=""></div>
+              <div class="age"><span>{{userInfo.skin_age}}</span><span>肤龄</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-color">肤色：<span>{{userInfo.skin_color}}</span></div>
+            <div class="skin-color">上传报告时间：<span>{{userInfo.check_time}}</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>
 
@@ -37,8 +49,8 @@
           <span>{{userInfo.store_name}}</span>
         </div>
 
-        <div class="myDataList">
-          卡卷数量：
+        <div class="myDataList coupon-num">
+          优惠券数量：
           <span>{{userInfo.card_num}}</span>
         </div>
 
@@ -54,9 +66,9 @@
           积分：
           <span>{{userInfo.coin}}</span>
         </div>
-        <div class="myDataList">
+        <div class="myDataList" @click="remarkPupopVisible=true">
           备注：
-          <span>{{remarks | ellipsis(20)}}</span>
+          <span>{{userInfo.remark | ellipsis(20)}}</span>
         </div>
       </div>
     </div>
@@ -85,21 +97,27 @@
         <div class="right-top-list">
           <div class="dataList"
                @click="toOrder(1)">
-            <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/project_icon.png" />
-            <p>项目订单</p>
+            <div class="">
+              <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/project_icon.png" />
+              <div>项目订单</div>
+            </div>
             <span>{{order_total.project}}</span>
           </div>
           <div class="dataList"
                style="margin:18px 0px"
                @click="toOrder(2)">
-            <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/coupon_icon.png" />
-            <p>优惠券</p>
-            <span>{{order_total.coupon}}</span>
+            <div class="">
+              <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/coupon_icon.png" />
+              <div>卡券订单</div>
+            </div>
+            <span>{{order_total.card}}</span>
           </div>
           <div class="dataList"
                @click="toOrder(3)">
-            <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/order_total_icon.png" />
-            <p>商品订单</p>
+            <div class="">
+              <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/order_total_icon.png" />
+              <div>商品订单</div>
+            </div>
             <span>{{order_total.goods}}</span>
           </div>
         </div>
@@ -151,11 +169,30 @@
         </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 () {
@@ -166,7 +203,9 @@ export default {
         name: "张三",
         sex: "女",
         age: "23",
-        skinType: "中性皮肤"
+        skinType: "中性皮肤",
+        real_name: '',
+        remark: '',
       },
       problem: "",
       //面部标签
@@ -175,7 +214,7 @@ export default {
       //执行方案
       programmeList: [],
 
-      remarks: {},
+      // remarks: {},
       //项目列表
       projectList: [],
 
@@ -185,10 +224,12 @@ export default {
       projectInfo: "",
       weekInfo: "",
       programmeIndex: "",
-      remarks: "",
-      isPupop: false
+      isPupop: false,
+      nameInpVisible: false,
+      remarkPupopVisible: false
     };
   },
+  components: { minePupop },
   computed: {
     gender () {
       // 性别，1男，2女，0保密
@@ -203,7 +244,7 @@ export default {
     getPadUserInfo () {
       api.getPadUserInfo({ id: this.id }).then(res => {
         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 => {
@@ -213,7 +254,6 @@ export default {
           console.log(_problem, '_problem');
         })
         this.lableList = _problem
-        this.remarks = res.data.remark
         this.randomColor();
         this.order_total = res.data.order_total;
         this.programmeList = res.data.scheme_list;
@@ -280,6 +320,38 @@ export default {
         }
       });
     },
+    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 () {
@@ -311,48 +383,79 @@ 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 {
+          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: 16px;
+            }
+            .sex {
+              img {
+                width: 24px;
+                height: 24px;
+              }
+            }
+            .age {
+              margin-left: 13px;
+              span:nth-child(1) {
+                font-size: 22px;
+              }
+              span:nth-child(2) {
+                margin-left: 4px;
+                color: #999999;
+              }
             }
           }
-          .age {
-            margin-left: 13px;
-            span:nth-child(1) {
-              font-size: 22px;
+          .real-name {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            .real-name-inp {
+              width: 35px !important;
+              height: 25px !important;
             }
-            span:nth-child(2) {
-              margin-left: 4px;
-              color: #999999;
+            .edit-name {
+              width: 20px;
+              height: 20px;
             }
           }
-        }
-        div:nth-child(2),
-        div:nth-child(3) {
-          margin-bottom: 8px;
+          div:nth-child(2),
+          div:nth-child(3) {
+            margin-bottom: 8px;
+          }
         }
       }
     }
@@ -371,6 +474,13 @@ export default {
           color: #fa7d22;
         }
       }
+      .coupon-num {
+        span {
+          color: #FA7D22;
+          font-size: 16px;
+          font-weight: 500;
+        }
+      }
     }
   }
 
@@ -389,13 +499,21 @@ 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;
+          div:nth-child(1) {
+            display: flex;
+            align-items: center;
+            img {
+              margin-right: 14px;
+            }
+          }
           img {
             width: 33px;
             height: 33px;
@@ -407,7 +525,7 @@ export default {
           }
           span {
             font-size: 16px;
-            margin-right: 20px;
+            // margin-right: 20px;
           }
         }
       }
@@ -416,7 +534,7 @@ export default {
         box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
         border-radius: 8px;
         padding: 16px 12px 12px 12px;
-        width: 310px;
+        width: 358px;
         height: 100%;
         .lable {
           //   margin-top: 23px;
@@ -749,5 +867,63 @@ 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/myOrder/index.vue

@@ -58,11 +58,11 @@
             </div>
           </div>
         </el-tab-pane>
-        <el-tab-pane label="卡卷订单"
+        <el-tab-pane label="卡券订单"
                      name="second">
           <div class="user-list">
             <el-table ref="multipleTable"
-                      :data="couponData"
+                      :data="cardOrderData"
                       tooltip-effect="dark"
                       height="354"
                       style="width: 100%;border-radius: 8px;">
@@ -74,18 +74,22 @@ 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="id"
+                               label="订单编号">
+              </el-table-column>
+              <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>
+                </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"
+                               label="实付"
                                show-overflow-tooltip></el-table-column>
               <el-table-column prop="create_time"
                                label="创建时间"
@@ -95,9 +99,13 @@ type: "全额券" -->
                                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">{{ cardOrderStatus[scope.row.status]}}</div>
                 </template>
               </el-table-column>
+              <el-table-column prop="create_time"
+                               label="下单时间"
+                               width="180"
+                               show-overflow-tooltip></el-table-column>
             </el-table>
 
             <div class="pagin">
@@ -167,6 +175,57 @@ status: 5 -->
             </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>
   </div>
@@ -219,6 +278,13 @@ export default {
         "已结算",
         "已取消"
       ],
+      cardOrderStatus: [
+        // 状态：0已预约，未支付，1已支付，2/3已完成
+        '已预约，未支付',
+        '已支付',
+        '已完成',
+        '已完成'
+      ],
       couponStatus: [
         '待使用',
         '已使用',
@@ -234,6 +300,7 @@ export default {
       couponData: [],
       goodData: [],
       projectData: [],
+      cardOrderData: [],
       total: 100,
       limit: 10
     };
@@ -280,14 +347,30 @@ export default {
         this.total = res.data.total;
       });
     },
+
+    // 获取卡券订单
+    async getCardOrders () {
+      let params = {
+        page: this.currentPage1,
+        limit: this.limit,
+        id: this.id
+      };
+      let resp = await api.getCardOrders(params)
+      if (resp.code === 200) {
+        this.cardOrderData = 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();
+        this.getCardOrders()
       } else if (this.activeName == 'third') {
         this.getUserGoods();
+      } else if (this.activeName == 'fourth') {
+        this.getUserCoupon();
       }
     },
     handleSelectionChange (row, column, event) {
@@ -305,9 +388,11 @@ export default {
       if (e.index == 0) {
         this.getUserProject();
       } else if (e.index == 1) {
-        this.getUserCoupon();
+        this.getCardOrders()
       } else if (e.index == 2) {
         this.getUserGoods();
+      } else if (e.index == 3) {
+        this.getUserCoupon();
       }
     }
   },
@@ -320,7 +405,7 @@ export default {
     if (this.activeName == 'first') {
       this.getUserProject();
     } else if (this.activeName == 'second') {
-      this.getUserCoupon();
+      this.getCardOrders()
     } else if (this.activeName == 'third') {
       this.getUserGoods();
     }

src/server/home.js

@@ -181,4 +181,14 @@ export default class Home {
   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)
+  }
 }

src/server/urls.js

@@ -110,6 +110,11 @@ export default {
   getMessageList: '/v2/pad/message/get_list',
 
   // 获取是否有未读消息
-  hasUnreadMessage: '/v2/pad/message/get_message'
+  hasUnreadMessage: '/v2/pad/message/get_message',
 
+  // 更新用户信息
+  updateUserProfile: '/v2/pad/user/update',
+
+  // 获取用户卡券订单
+  getCardOrders: '/v2/pad/user/order/coupon'
 }