src/pages/confirmOrder/details/index.vue

@@ -82,9 +82,9 @@
       </div>
       <div class="project">
         <div class="project-title">
-          <div>共<span>{{order_data.project_num}}个</span>项目</div>
+          <div>共<span>{{order_data.project_list.length}}个</span>项目</div>
           <div class="add-project"
-               @click="isProject=true">添加</div>
+               @click="addProject">添加</div>
         </div>
         <div class="project-list">
           <div class="project-info"
@@ -101,7 +101,9 @@
                 <div> <span v-if="item.device_name">{{item.device_name}}（{{item.room}}）{{item.use_time}}分钟</span></div>
                 <div><img @click="eidt(item)"
                        src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/eidt.png">
-                  <img class="delete"
+                  <img v-if="order_data.project_list.length>1"
+                       @click="deleteProject(item)"
+                       class="delete"
                        src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/delete.png"
                        alt="">
                 </div>
@@ -110,7 +112,8 @@
           </div>
         </div>
       </div>
-      <div class="cost">
+      <div class="cost"
+           v-if="!isChange">
         <div class="cost-title">
           <div>预约费用</div>
           <div>¥399</div>
@@ -134,7 +137,8 @@
           合计： <span class="price-num"><span class="min-size">￥</span>399<span class="min-size">.00</span></span>
         </div>
       </div>
-      <div class="payment">{{order_data.status==0?'立即支付':'确定订单'}}</div>
+      <div class="payment"
+           @click="determine">{{isChange?'确定订单':'立即支付'}}</div>
     </div>
     <!-- 选择优惠券 -->
     <mine-pupop :show="isCoupun">
@@ -396,6 +400,8 @@ export default {
       isTs: false,//是否展示选择时间弹窗
       isPore: false,//皮肤状态弹窗
       id: 0,//订单id
+      isChange: false,//项目是否有改变
+      isEditProject: false,//是否编辑项目
     };
   },
   computed: {
@@ -424,43 +430,104 @@ export default {
         this.productsList = res.data.list
       })
     },
-    eidt () {
-
+    eidt (item) {
+      this.projectInfo = item.id
+      this.getProducts(item.id)
+      this.isEditProject = true
+      this.isProject = true
+    },
+    deleteProject (item) {
+      this.order_data.project_list.forEach((res, index) => {
+        if (item.id == res.id) {
+          this.order_data.project_list.splice(index, 1)
+          this.$message({
+            message: '删除成功',
+            type: 'success'
+          });
+        }
+      })
+    },
+    addProject () {
+      this.projectInfo = ''
+      this.isEditProject = false
+      this.isProject = true
     },
     //新增
     orderUpdate () {
-      if (this.projectInfo.length == 0) return
-      //项目包重组
-      let projectInfo = {}, nowProjectInfo = {}, productsInfo = {}
-      this.projectList.forEach(item => {
-        if (this.projectInfo == item.id) {
-          nowProjectInfo = item
+      // 编辑
+      if (this.isEditProject) {
+        if (this.productsInfo != '') {
+          this.order_data.project_list.forEach(e => {
+            if (this.projectInfo == e.id) {
+              this.productsList.forEach(item => {
+                if (e.product_ids != '') {
+                  e.price = Number(e.price) - Number(item.price)
+                }
+                e.product_ids = this.productsInfo
+                if (item.id == e.product_ids) {
+                  this.isChange = true
+                  e.product_names = item.name
+                  e.price = Number(e.price) + Number(item.price)
+                  this.isProject = false
+                  this.isEditProject = false
+                }
+              })
+            }
+          })
+        } else {
+          this.isProject = false
+          return
         }
-      })
-      if (this.productsInfo.length != 0) {
-        this.productsList.forEach(item => {
-          if (item.id == this.productsInfo) {
-            productsInfo = item
+      } else {
+        //新增
+        let isIndexOf = false
+        if (this.projectInfo.length == 0) return
+        this.order_data.project_list.forEach(res => {
+          if (this.projectInfo == res.id) {
+            isIndexOf = true
+            this.$message.error('该项目已存在');
           }
         })
-      }
-      console.log(nowProjectInfo, 'nowProjectInfo', productsInfo);
-      projectInfo['name'] = nowProjectInfo.name
-      projectInfo['cover_url'] = nowProjectInfo.cover_url
-      projectInfo['device_name'] = ''
-      projectInfo['room'] = ''
-      projectInfo['use_time'] = ''
-      projectInfo['price'] = nowProjectInfo.price
-      projectInfo['product_names'] = ''
+        if (isIndexOf) return
+        //项目包重组
+        let projectInfo = {}, nowProjectInfo = {}, productsInfo = {}
+        this.projectList.forEach(item => {
+          if (this.projectInfo == item.id) {
+            nowProjectInfo = item
+          }
+        })
+        if (this.productsInfo.length != 0) {
+          this.productsList.forEach(item => {
+            if (item.id == this.productsInfo) {
+              productsInfo = item
+            }
+          })
+        }
+        console.log(nowProjectInfo, 'nowProjectInfo', productsInfo);
+        projectInfo['name'] = nowProjectInfo.name
+        projectInfo['id'] = nowProjectInfo.id
+        projectInfo['cover_url'] = nowProjectInfo.cover_url
+        projectInfo['device_name'] = ''
+        projectInfo['room'] = ''
+        projectInfo['use_time'] = ''
+        projectInfo['price'] = nowProjectInfo.price
+        projectInfo['product_names'] = ''
 
-      if (Object.keys(productsInfo).length > 0) {
-        projectInfo['product_id'] = productsInfo.id
-        projectInfo.product_names = productsInfo.name
-        projectInfo.price += Number(productsInfo.price)
+        if (Object.keys(productsInfo).length > 0) {
+          projectInfo['product_ids'] = productsInfo.id
+          projectInfo.product_names = productsInfo.name
+          projectInfo.price += Number(productsInfo.price)
+        }
+        this.order_data.project_list.push(projectInfo)
+        this.isChange = true
+        this.isProject = false
+      }
+    },
+    //确定订单&支付
+    determine () { 
+      if (condition) {
+        
       }
-      this.order_data.project_list.push(projectInfo)
-      this.isProject = false
-
     },
     onOperation (index) {
       if (this.programmeList[index].onSelect) {
@@ -888,7 +955,8 @@ export default {
       }
     }
     .payment {
-      position: relative;
+      position: absolute;
+      bottom: 0;
       margin-top: 18px;
       left: 50%;
       transform: translateX(-50%);

src/pages/customerMan/details/index.vue

@@ -3,74 +3,76 @@
     <div class="left">
       <div class="user-info">
         <div class="user-img">
-          <img :src="userInfo.image" alt />
+          <img :src="userInfo.avatar_url" alt />
         </div>
         <div class="user-span">
           <div class="name">
             昵称：
-            <span>{{userInfo.name}}</span>
+            <span>{{userInfo.nickname}}</span>
           </div>
           <div class="sex">
             性别：
-            <span>{{userInfo.sex}}</span>
+            <span>{{userInfo.sex==1?'男':'女'}}</span>
           </div>
           <div class="age">
             肤龄：
-            <span>{{userInfo.age}}</span>
+            <span>{{userInfo.age||'--'}}</span>
           </div>
           <div class="skin-type">
             肤质：
-            <span>{{userInfo.skinType}}</span>
+            <span>{{userInfo.skin}}</span>
           </div>
         </div>
       </div>
+
       <div class="personage-data">
         <div class="myDataList">
           肌肤得分：
-          <span class="bigSixe">56分</span>
+          <span class="bigSixe">{{userInfo.scorec}}分</span>
         </div>
         <div class="myDataList">
           皮肤状态：
-          <span>肤质一般</span>
+          <span>{{userInfo.skin_status}}</span>
         </div>
         <div class="myDataList">
           上传检测时间：
-          <span>2022.0418 16:04</span>
+          <span>{{userInfo.check_time}}</span>
         </div>
         <div class="myDataList">
           出生日期：
-          <span>2000.02.29</span>
+          <span>{{userInfo.birthday}}</span>
         </div>
         <div class="myDataList">
           联系电话：
-          <span>13334597987</span>
+          <span>{{userInfo.mobile}}</span>
         </div>
 
         <div class="myDataList">
           所在地：
-          <span>广东省，深圳市，南山区</span>
+          <span>{{userInfo.city}}</span>
         </div>
 
         <div class="myDataList">
           开卡店铺：
-          <span>JOLIJOLI(西安店)</span>
+          <span>{{userInfo.store_name}}</span>
         </div>
 
         <div class="myDataList">
           卡卷数量：
-          <span>5</span>
+          <span>{{userInfo.card_num}}</span>
         </div>
 
         <div class="myDataList">
           储值金额：
           <span class="JEcolor">
             ￥
-            <span class="bigSixe">500</span>.00
+            <span class="bigSixe">{{userInfo.amount}}</span>
+            <!-- .00 -->
           </span>
         </div>
         <div class="myDataList">
           积分：
-          <span>200</span>
+          <span>{{userInfo.coin}}</span>
         </div>
       </div>
     </div>
@@ -85,24 +87,24 @@
           </div>
           <div class="ps">
             <div class="ps-title">备注</div>
-            <div class="ps-text">{{'富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆' | ellipsis(20)}}</div>
+            <div class="ps-text">{{remarks | ellipsis(20)}}</div>
           </div>
         </div>
-        <div class="right-top-list" @click="toOrder(1)">
-          <div class="dataList">
+        <div class="right-top-list">
+          <div class="dataList" @click="toOrder(1)">
             <img :src="userInfo.image" />
             <p>项目订单</p>
-            <span>19</span>
+            <span>{{order_total.project}}</span>
           </div>
-          <div class="dataList" style="margin:18px 0px">
+          <div class="dataList" style="margin:18px 0px" @click="toOrder(2)">
             <img :src="userInfo.image" />
-            <p>项目订单</p>
-            <span>19</span>
+            <p>卡券订单</p>
+            <span>{{order_total.coupon}}</span>
           </div>
-          <div class="dataList">
+          <div class="dataList" @click="toOrder(3)">
             <img :src="userInfo.image" />
-            <p>项目订单</p>
-            <span>19</span>
+            <p>商品订单</p>
+            <span>{{order_total.goods}}</span>
           </div>
         </div>
       </div>
@@ -171,81 +173,16 @@ export default {
         skinType: "中性皮肤"
       },
       //面部标签
-      lableList: [
-        {
-          text: "对话框的",
-          disabled: false
-        },
-        {
-          text: "对话框的",
-          disabled: true
-        },
-        {
-          text: "对话框的",
-          disabled: false
-        },
-        {
-          text: "对话框的",
-          disabled: false
-        },
-        {
-          text: "对话框的",
-          disabled: false
-        }
-      ],
+      lableList: [],
       //执行方案
-      programmeList: [
-        {
-          image:
-            "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png",
-          title: "水氧活肤华熙智慧玻尿酸基水氧活肤华熙智慧玻尿酸基底",
-          tips: "+润百颜精华",
-          zoom: "皮肤综合仪（30号房）",
-          ts: "30分钟",
-          price: "79.00"
-        },
-        {
-          image:
-            "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png",
-          title: "水氧活肤华熙智慧玻尿酸基水氧活肤华熙智慧玻尿酸基底",
-          tips: "+润百颜精华",
-          zoom: "皮肤综合仪（30号房）",
-          ts: "30分钟",
-          price: "79.00"
-        },
-        {
-          image:
-            "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png",
-          title: "水氧活肤华熙智慧玻尿酸基水氧活肤华熙智慧玻尿酸基底",
-          tips: "+润百颜精华",
-          zoom: "皮肤综合仪（30号房）",
-          ts: "30分钟",
-          price: "79.00"
-        }
-      ],
+      programmeList: [],
+
+      remarks: {},
       //项目列表
-      projectList: [
-        {
-          value: "选项1",
-          label: "黄金糕"
-        },
-        {
-          value: "选项2",
-          label: "双皮奶"
-        },
-        {
-          value: "选项3",
-          label: "蚵仔煎"
-        },
-        {
-          value: "选项4",
-          label: "龙须面"
-        },
-        {
-          value: "选项5",
-          label: "北京烤鸭"
-        }
-      ],
+      projectList: [],
+
+      order_total: {},
+
       timesInfo: "",
       projectInfo: "",
       weekInfo: "",
@@ -258,14 +195,16 @@ export default {
   watch: {},
 
   methods: {
-    getUserInfo() {
-      api.getUserInfo({ code: this.id }).then(res => {
+    getPadUserInfo() {
+      api.getPadUserInfo({ id: this.id }).then(res => {
         this.userInfo = res.data.user;
-        this.order_data = res.data.order_data;
-        this.lableList = res.data.tags;
-        this.programmeList = res.data.order_data.project_list;
-        this.coupon_list = res.data.order_data.coupon_list;
         this.remarks = res.data.remark;
+        this.lableList = res.data.tags;
+        this.order_total = res.data.order_total;
+        this.programmeList = res.data.scheme_list;
+
+        // this.programmeList = res.data.order_data.project_list;
+        // this.coupon_list = res.data.order_data.coupon_list;
       });
     },
 
@@ -282,9 +221,12 @@ export default {
     },
     toOrder(index) {
       if (index === 1) {
-        this.$router.push({
-          path: "/customerMan/projectOrder"
-        });
+      this.$router.push({
+        path: "/customerMan/projectOrder",
+        query: {
+          id: this.id
+        }
+      });
       }
     },
     onSubmit() {},
@@ -294,7 +236,7 @@ export default {
   created() {
     let id = this.$route.query.id;
     this.id = id;
-    this.getUserInfo();
+    this.getPadUserInfo();
   },
 
   mounted() {}

src/pages/customerMan/myOrder/index.vue

@@ -6,20 +6,30 @@
           <div class="user-list">
             <el-table
               ref="multipleTable"
-              :data="tableData"
+              :data="projectData"
               tooltip-effect="dark"
               height="354"
               style="width: 100%;border-radius: 8px;"
               @row-click="handleSelectionChange"
             >
-              <el-table-column prop="name" label="项目名称" width="120"></el-table-column>
-              <el-table-column prop="numberList" label="数量" show-overflow-tooltip></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="goods" label="数量" show-overflow-tooltip>
+                <template slot-scope="scope">
+                  <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="date" label="预约时间" width="180" show-overflow-tooltip></el-table-column>
-              <el-table-column prop="shop" 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="'classShow'+scope.$index">{{statusStr[scope.row.status]}}</div>
+                  <div :class="'color'+scope.row.status">{{statusStr[scope.row.status]}}</div>
                 </template>
               </el-table-column>
             </el-table>
@@ -40,20 +50,28 @@
           <div class="user-list">
             <el-table
               ref="multipleTable"
-              :data="tableData"
+              :data="couponData"
               tooltip-effect="dark"
               height="354"
               style="width: 100%;border-radius: 8px;"
               @row-click="handleSelectionChange"
             >
-              <el-table-column prop="name" label="卡卷名称" width="120"></el-table-column>
-              <el-table-column prop="numberList" label="卡卷类型" show-overflow-tooltip></el-table-column>
+
+<!-- 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="date" label="到期时间" width="180" show-overflow-tooltip></el-table-column>
-              <el-table-column prop="date" 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="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">{{statusStr[scope.row.status]}}</div>
+                  <div :class="'color'+scope.row.status">{{statusStr[scope.row.status]}}</div>
                 </template>
               </el-table-column>
             </el-table>
@@ -75,16 +93,33 @@
           <div class="user-list">
             <el-table
               ref="multipleTable"
-              :data="tableData"
+              :data="goodData"
               tooltip-effect="dark"
               height="354"
               style="width: 100%;border-radius: 8px;"
               @row-click="handleSelectionChange"
             >
-              <el-table-column prop="name" label="商品名称" width="120"></el-table-column>
-              <el-table-column prop="numberList" label="数量" show-overflow-tooltip></el-table-column>
+
+<!-- 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">
+                <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="goods" label="数量" show-overflow-tooltip>
+                <template slot-scope="scope">
+                  <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="date" 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="'classShow'+scope.$index">{{statusStr[scope.row.status]}}</div>
@@ -110,6 +145,8 @@
 </template>
 
 <script>
+import api from "../../../server/home";
+
 export default {
   data() {
     return {
@@ -147,15 +184,65 @@ export default {
           status: 1
         }
       ],
-      statusStr: ["未完成", "代发货", "代使用", "已完成"],
+      statusStr: [
+        "已预约",
+        "未支付",
+        "已支付",
+        "待使用",
+        "正在使用",
+        "已结算",
+        "已取消"
+      ],
       currentPage1: 1,
-      multipleSelection: ""
+      couponData: [],
+      goodData: [],
+      projectData: [],
+      total: ""
     };
   },
   computed: {},
   watch: {},
 
   methods: {
+    // 获取优惠券订单
+    getUserCoupon() {
+      let params = {
+        page: this.currentPage1,
+        limit: this.limit,
+        id: this.id
+      };
+      api.getUserCoupon(params).then(res => {
+        this.couponData = res.data.list;
+        this.total = res.data.total;
+      });
+    },
+
+    // 获取商品订单
+    getUserGoods() {
+      let params = {
+        page: this.currentPage1,
+        limit: this.limit,
+        id: this.id
+      };
+      api.getUserGoods(params).then(res => {
+        this.goodData = res.data.list;
+        this.total = res.data.total;
+      });
+    },
+
+    // 获取获取项目订单
+    getUserProject() {
+      let params = {
+        page: this.currentPage1,
+        limit: this.limit,
+        id: this.id
+      };
+      api.getUserProject(params).then(res => {
+        this.projectData = res.data.list;
+        this.total = res.data.total;
+      });
+    },
+
     handleSizeChange(val) {
       console.log(`每页 ${val} 条`);
     },
@@ -167,7 +254,13 @@ export default {
     submitFrequency() {}
   },
 
-  created() {},
+  created() {
+    let id = this.$route.query.id;
+    this.id = id;
+    this.getUserCoupon();
+    this.getUserGoods();
+    this.getUserProject();
+  },
 
   mounted() {}
 };
@@ -187,12 +280,26 @@ export default {
     color: green;
   }
 }
-.classShow1 {
-  color: #00EC67;
+.color0 {
+  color: #fc3019;
 }
-
-.classShow0 {
-  color: #FF1818;
+.color1 {
+  color: #3ef3ed;
+}
+.color2 {
+  color: #00eeee;
+}
+.color3 {
+  color: #61d09d;
+}
+.color4 {
+  color: #3115cc;
+}
+.color5 {
+  color: #fc3019;
+}
+.color6 {
+  color: #a999ea;
 }
 
 .priceColor {

src/server/home.js

@@ -58,10 +58,10 @@ export default class Home {
     return $http.get(url.getUserList, parms);
   }
 
-  // 获取用户详情
-  static getUserInfo (parms) {
-    return $http.get(url.getUserInfo, parms);
-  }
+  // // 获取用户详情
+  // static getUserInfo (parms) {
+  //   return $http.get(url.getUserInfo, parms);
+  // }
 
   // 获取优惠券列表
   static getCouponInfo (parms) {
@@ -73,6 +73,25 @@ export default class Home {
     return $http.post(url.sendCoupon, parms);
   }
 
+  // 获取用户详情接口
+  static getPadUserInfo (parms) {
+    return $http.get(url.getPadUserInfo, parms);
+  }
+  
+  // 获取优惠券订单
+  static getUserCoupon (parms) {
+    return $http.get(url.getUserCoupon, parms);
+  }
+
+  // 获取商品订单
+  static getUserGoods (parms) {
+    return $http.get(url.getUserGoods, parms);
+  }
+
+  // 获取项目订单
+  static getUserProject (parms) {
+    return $http.get(url.getUserProject, parms);
+  }
 
 }
 

src/server/urls.js

@@ -20,7 +20,7 @@ export default {
   //获取项目列表
   getProjectList: '/v2/pad/project/list',
   //获取升级包
-  getProducts:'/v2/pad/project/product',
+  getProducts: '/v2/pad/project/product',
 
   /**
    *  by ListKer
@@ -44,4 +44,17 @@ export default {
   // 发送优惠券接口
   sendCoupon: '/v2/pad/coupon/send',
 
+  // 获取用户详情
+  getPadUserInfo: '/v2/pad/user/info',
+
+  // 获取项目订单
+  getUserProject: '/v2/pad/user/order/project',
+
+  // 获取商品订单
+  getUserGoods: '/v2/pad/user/order/goods',
+
+  // 获取优惠券订单
+  getUserCoupon: '/v2/pad/user/coupon',
+
+
 }