feat: 添加次卡逻辑

src/pages/confirmOrder/addOrder/index.vue

@@ -243,8 +243,12 @@
                        :label="item.name"
                        :value="item.id">
               <span style="float: left">{{ item.name }}</span>
-              <span v-if="item.recommend==1"
-                    style="float: right;color: #fa7d22ff;font-size: 13px;background: #ffefeb;border-radius: 4px;border: 1px solid #fa7d22;height: 18px;padding: 2px 6px;">推荐</span>
+              <span>
+                <span v-if="item.recommend==1"
+                      style="float: right;color: #fa7d22ff;font-size: 13px;margin:0 5px;  background: #ffefeb;border-radius: 4px;border: 1px solid #fa7d22;height: 18px;padding: 2px 6px;">推荐</span>
+                <span v-if="item.card==1"
+                      style="float: right;color: #fa7d22ff;font-size: 13px;margin: 0 5px; background: #ffefeb;border-radius: 4px;border: 1px solid #fa7d22;height: 18px;padding: 2px 6px;">次卡</span>
+              </span>
             </el-option>
           </el-select>
         </div>
@@ -261,8 +265,12 @@
                        :label="item.name"
                        :value="item.id">
               <span style="float: left">{{ item.name |ellipsis(14) }}</span>
-              <span v-if="item.recommend==1"
-                    style="float: right;color: #fa7d22ff;font-size: 13px;background: #ffefeb;border-radius: 4px;border: 1px solid #fa7d22;height: 18px;padding: 2px 6px;">推荐</span>
+              <span>
+                <span v-if="item.recommend==1"
+                      style="float: right;color: #fa7d22ff;font-size: 13px; margin:0 5px ; background: #ffefeb;border-radius: 4px;border: 1px solid #fa7d22;height: 18px;padding: 2px 6px;">推荐</span>
+                <span v-if="item.card==1"
+                      style="float: right;color: #fa7d22ff;font-size: 13px; margin:0 5px ; background: #ffefeb;border-radius: 4px;border: 1px solid #fa7d22;height: 18px;padding: 2px 6px;">次卡</span>
+              </span>
             </el-option>
           </el-select>
         </div>
@@ -461,12 +469,12 @@ export default {
       this.$router.replace("/home");
     },
     getProjectClassify () {
-      api.projectClassify().then(res => {
+      api.projectClassify({user_id:this.userInfo.user_id}).then(res => {
         this.classifyList = res.data.list
       })
     },
     getProjectList (e) {
-      api.getProjectList({ id: e }).then(res => {
+      api.getProjectList({ id: e,user_id:this.userInfo.user_id }).then(res => {
         this.projectList = res.data.list;
       });
     },
@@ -661,7 +669,8 @@ export default {
           that.$router.push({
             path: "/confirmOrder/details",
             query: {
-              id: res.data.order_id
+              id: res.data.order_id,
+              user_id:this.userInfo.user_id
             }
           });
         }

src/pages/confirmOrder/details/index.vue

@@ -141,6 +141,33 @@
           <div>预约费用</div>
           <div>¥{{reservationPrice}}</div>
         </div>
+        <!-- 次卡 -->
+        <div class="cost-coupon-list">
+          <div class="coupon"
+               @click="isCard = true">
+            <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="order_data.coupon_list&&order_data.coupon_list.length>0">已选择次卡</div>
+            </div>
+            <div class="on-icon">></div>
+          </div>
+
+          <div v-if="1==1">
+            <div>
+              <div class="coupon-ps"
+                   v-for="item,index in isSelectCardList"
+                   :key="index">
+                <div>{{item.name}}</div>
+                <div class="cou-price">-￥{{item.price}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 优惠券 -->
         <div class="cost-coupon-list">
           <div class="coupon"
                @click="onCoupon">
@@ -154,15 +181,6 @@
             <div class="on-icon">></div>
           </div>
 
-          <!-- <div v-if="order_data.coupon_list&&order_data.coupon_list.length>0">
-            <div class="coupon-ps"
-                 v-for="item,index in order_data.coupon_list"
-                 :key="index">
-              <div>{{item.coupon_name}}</div>
-              <div class="cou-price">-¥{{price}}</div>
-            </div>
-          </div> -->
-
           <div v-if="1==1">
             <div>
               <div class="coupon-ps"
@@ -197,6 +215,28 @@
       <div class="payment"
            @click="determine">{{isChange?'确定订单':'立即支付'}}</div>
     </div>
+    <!-- 次卡 -->
+    <mine-pupop :show="isCard">
+      <div class="coupon-block"
+           style="background: #F7F8FA;">
+        <div class="delete-pupop"
+             @click="isCard=false"><img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/delete.png"
+               alt=""></div>
+        <div class="coupon-pupop-title">选择次卡</div>
+        <div class="card-content">
+          <div class="card-info"
+               v-for="item,index in cardList"
+               :key="index"
+               @click="isSelectCard(item,index)">
+            <div class="frequency"> <span style="color: #FF3007FF;font-size: 18px;">{{item.used_num}}</span>/{{item.total_num}}</div>
+            <div class="card-title">{{item.name}}</div>
+            <div class="card-choice-icon"><img :src="item.isSelect?select:unSelect"></div>
+          </div>
+        </div>
+        <div class="coupon-confirm"
+             @click="isCardAdd">确认</div>
+      </div>
+    </mine-pupop>
     <!-- 选择优惠券 -->
     <mine-pupop :show="isCoupun">
       <div class="coupon-block">
@@ -275,8 +315,12 @@
                        :label="item.name"
                        :value="item.id">
               <span style="float: left">{{ item.name }}</span>
-              <span v-if="item.recommend==1"
-                    style="float: right;color: #fa7d22ff;font-size: 13px;background: #ffefeb;border-radius: 4px;border: 1px solid #fa7d22;height: 18px;padding: 2px 6px;">推荐</span>
+              <span>
+                <span v-if="item.recommend==1"
+                      style="float: right;color: #fa7d22ff;font-size: 13px;margin:0 5px;  background: #ffefeb;border-radius: 4px;border: 1px solid #fa7d22;height: 18px;padding: 2px 6px;">推荐</span>
+                <span v-if="item.card==1"
+                      style="float: right;color: #fa7d22ff;font-size: 13px;margin: 0 5px; background: #ffefeb;border-radius: 4px;border: 1px solid #fa7d22;height: 18px;padding: 2px 6px;">次卡</span>
+              </span>
             </el-option>
           </el-select>
         </div>
@@ -294,8 +338,12 @@
                        style=" display: flex;justify-content: space-between ;align-items: center;line-height: inherit; padding: 0 12px;"
                        :value="item.id">
               <span style="float: left">{{ item.name |ellipsis(14) }}</span>
-              <span v-if="item.recommend==1"
-                    style="float: right;color: #fa7d22ff;font-size: 13px;background: #ffefeb;border-radius: 4px;border: 1px solid #fa7d22;height: 18px;padding: 2px 6px;">推荐</span>
+              <span>
+                <span v-if="item.recommend==1"
+                      style="float: right;color: #fa7d22ff;font-size: 13px; margin:0 5px ; background: #ffefeb;border-radius: 4px;border: 1px solid #fa7d22;height: 18px;padding: 2px 6px;">推荐</span>
+                <span v-if="item.card==1"
+                      style="float: right;color: #fa7d22ff;font-size: 13px; margin:0 5px ; background: #ffefeb;border-radius: 4px;border: 1px solid #fa7d22;height: 18px;padding: 2px 6px;">次卡</span>
+              </span>
             </el-option>
           </el-select>
         </div>
@@ -478,6 +526,7 @@ export default {
       //执行方案
       programmeList: [],
       order_data: {},//门店
+      isSelectCardList: [],
       //项目分类列表
       classifyList: [],
       //项目列表
@@ -497,6 +546,8 @@ export default {
       isEdit: false,
       //优惠券列表
       couponList: [],
+      card_data: [],//已选择的列表
+      cardList: [],//次卡列表
       //已选择的优惠券
       selectCouponList: [],
       //已选择优惠券的id（同一个id只能选择一张优惠券）
@@ -551,6 +602,7 @@ export default {
       programmeIndex: '',
       remarks: '',
       isCoupun: false,//是否展示优惠券弹窗
+      isCard: false,//是否展示次卡弹窗
       isOver: false,//优惠券注释
       isProject: false,//是否展示选择项目弹窗
       isTs: false,//是否展示选择时间弹窗
@@ -575,6 +627,7 @@ export default {
       discount: 0,//折扣类型
       device_name: '',//支付成功后的设备
       room: '',//设备房间
+      user_id: '',
       // showRuleText: 10086,
 
     };
@@ -605,9 +658,14 @@ export default {
           console.log(_problem, '_problem');
         })
         this.lableList = _problem
+        this.getProjectClassify()
         this.randomColor();
         this.remarks = res.data.remark
         this.programmeList = res.data.scheme_list
+        res.data.order_data.project_list.forEach(e => {
+          e["isCard"] = false
+          e["isCoupon"] = false
+        })
         this.order_data = res.data.order_data
         if (this.order_data.coupon_list.length > 0) {
           this.isSelectCoup = this.order_data.coupon_list
@@ -629,13 +687,101 @@ export default {
         this.calculationPrice()
       })
     },
+    onCard () {
+      api.getOrderCard({ id: this.id }).then(res => {
+        if (res.code == 200) {
+          res.data.list.forEach(item => {
+            item["isSelect"] = false
+          })
+          this.cardList = res.data.list
+
+        }
+      })
+    },
+    isSelectCard (item, index) {
+      let isSelect = false
+      let isRepeat = false
+      this.cardList.forEach(res => {
+        if (res.isSelect && item.id != res.id && item.name == res.name) {
+          isRepeat = true
+        }
+      })
+      if (isRepeat) {
+        this.$message.error("不能选择相同的次卡");
+        return
+      }
+      this.isSelectCoup.forEach(e => {
+        if (item.project_ids.indexOf(e.projectids) > -1) {
+          isSelect = true
+        }
+      })
+      if (isSelect) {
+        this.$message.error("该项目已选择优惠券");
+        return
+      }
+      console.log(item);
+      this.cardList[index].isSelect = !this.cardList[index].isSelect
+    },
+    //确定选择的次卡
+    isCardAdd () {
+      let isSelectCardList = []
+      let project_list = this.order_data.project_list
+      let card_data = []
+       let price =this.order_data.price
+        console.log(price,'price');
+      if (this.isSelectCoup.length > 0) {
+        this.isSelectCoup.forEach(res => {
+          this.order_data.project_list.forEach(item => {
+            if (res.projectids == item.id) {
+              price = price - item.price
+            }
+          })
+        })
+      }
+      project_list.forEach(res => {
+        this.cardList.forEach(e => {
+          if (e.isSelect && e.project_ids.indexOf(res.id) > -1) {
+            price = price - res.price
+            price = price.toFixed(2)
+            isSelectCardList.push(res)
+          }
+        })
+      })
+      isSelectCardList.forEach(e => {
+        this.cardList.forEach(res => {
+          let card_data_info = {}
+          if (res.isSelect, res.project_ids.indexOf(e.id) > -1) {
+            card_data_info = {
+              id: e.id,
+              card_id: res.id
+            }
+            card_data.push(card_data_info)
+          }
+        })
+      })
+       if (isSelectCardList.length==0&&this.isSelectCoup.length==0) {
+        price = price- this.order_data.discountPrice
+       }
+
+      this.card_data = card_data
+      if (price < 0) {
+        price = 0
+      }
+      // if (this.isSelectCoup.length > 0) {
+        this.showMoney = price
+      // } else {
+      //   this.discountPrice = price
+      // }
+      this.isSelectCardList = isSelectCardList
+      this.isCard = false
+    },
     getProjectClassify () {
-      api.projectClassify().then(res => {
+      api.projectClassify({ user_id: this.userInfo.user_id }).then(res => {
         this.classifyList = res.data.list
       })
     },
     getProjectList (e) {
-      api.getProjectList({ id: e }).then(res => {
+      api.getProjectList({ id: e, user_id: this.userInfo.user_id }).then(res => {
         this.projectList = res.data.list
       })
     },
@@ -668,14 +814,9 @@ export default {
       console.log(item, 'item========');
       this.order_data.project_list.forEach((res, index) => {
         if (item.id == res.id) {
-          this.order_data.project_list.splice(index, 1)
           this.reservationPrice = 0
           this.confirmOrder("delete")
           this.isSelectCoup = []
-          this.$message({
-            message: '删除成功',
-            type: 'success'
-          });
         }
       })
     },
@@ -786,7 +927,7 @@ export default {
       }
       this.tsTableList = tsTableList
     },
-    confirmOrder () {
+    confirmOrder (type) {
       let order_data = []
       this.order_data.project_list.forEach(item => {
         let order_data_info = {}
@@ -815,6 +956,13 @@ export default {
           this.getOrderInfo()
           this.isTs = false
           this.isChange = false
+          if (type&&type=='delete') {
+            this.order_data.project_list.splice(index, 1)
+           this.$message({
+            message: '删除成功',
+            type: 'success'
+          });
+          }
         }
       })
     },
@@ -931,6 +1079,7 @@ export default {
         return res.isSelect == true
       })
       // 卡券，项目券数据包, id：订单项目ID, coupon_id：优惠券ID, 如：[{ "id": 1220, coupon_id: 199 }]isSelectCoup
+      this.discount = this.card_data.length>0?0:this.discount
       let params = {
         id: this.id,
         pay_way: payWayList[0].pay_way,
@@ -955,6 +1104,10 @@ export default {
         })
       }
       params['coupon_data'] = coupon_data.length > 0 ? JSON.stringify(coupon_data) : null
+      if (this.card_data.length > 0) {
+        params['card_data'] = JSON.stringify(this.card_data)
+      }
+      console.log(params, '=====');
       api.orderPay(params).then(res => {
         if (res.code == 200) {
           this.choicePayType = false
@@ -975,7 +1128,6 @@ export default {
                 correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
               })
             })
-
           }
         }
       })
@@ -1011,12 +1163,31 @@ export default {
        * 点击使用按钮、勾选按钮
        */
     selectPupop: function (item, index) {
-
+      this.card_data.forEach(res => {
+        if (item.project_ids.indexOf(res.id) > -1) {
+          item.project_ids.forEach((e, i) => {
+            if (res.id == e) {
+              item.project_ids.splice(i, 1)
+            }
+          })
+        }
+      })
+      let isReturn = false
+      this.isSelectCardList.forEach(value => {
+        if (item.project_ids.indexOf(value.id) > -1) {
+          isReturn = true
+        }
+      })
+      if (isReturn || (item.type != 4 && this.card_data.length != 0)) {
+        this.$message.error('该项目已选择次卡');
+        return
+      }
       let CouPonIndex = this.couponList
       let selectIndex = index
       let curreValue = !CouPonIndex[selectIndex].isSelect
       let project_list = this.order_data.project_list //这里是项目列表
 
+
       // 判断是否是不相同的项目券
       if (this.couponList[selectIndex].type != 4) {
         for (let i = 0; i < CouPonIndex.length; i++) {
@@ -1146,7 +1317,15 @@ export default {
     // 计算总额
     calculateMoney () {
       let that = this
-      let money = Number(this.order_data.original_price)
+      let _price = 0
+      if (this.isSelectCardList.length > 0) {
+        this.isSelectCardList.forEach(res => {
+          _price = _price + Number(res.price)
+        })
+      }
+      console.log(this.order_data.original_price,_price,'_price_price');
+      let money = this.isSelectCardList.length > 0 ? this.order_data.original_price - _price : Number(this.order_data.original_price)
+      console.log(money,'========');
       let isSelectCoup = this.isSelectCoup
       let project_list = this.order_data.project_list //这里是项目列表
 
@@ -1241,10 +1420,14 @@ export default {
 
   created () {
     let id = this.$route.query.id
+    // let user_id = this.$route.query.user_id
     if (id) {
       this.id = id
     }
-    this.getProjectClassify()
+    // if (user_id) {
+    //   this.user_id = user_id
+    // }
+    this.onCard()
 
     this.getOrderDiscount()
 
@@ -2264,5 +2447,49 @@ export default {
       transform: translateX(-50%);
     }
   }
+  .card-content {
+    margin-top: 24px;
+    height: 230px;
+    padding: 0 15px;
+    overflow: scroll;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    .card-info {
+      position: relative;
+      margin-bottom: 10px;
+      width: 225px;
+      height: 70px;
+      background: url("https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/bg.png")
+        no-repeat;
+      background-size: 100% 100%;
+      padding: 12px 13px 0 22px;
+      .frequency {
+        text-align: end;
+        font-size: 14px;
+        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
+        font-weight: 400;
+        color: #666666ff;
+      }
+      .card-title {
+        font-size: 16px;
+        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
+        font-weight: 400;
+        color: #333333;
+        line-height: 24px;
+      }
+      .card-choice-icon {
+        width: 24px;
+        height: 24px;
+        position: absolute;
+        right: 13px;
+        bottom: 8px;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
 }
 </style>

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/customerMan/details/index.vue

@@ -108,9 +108,9 @@
                @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>
             </div>
-            <span>{{order_total.card}}</span>
+            <span>{{order_total.card_order}}</span>
           </div>
           <div class="dataList"
                @click="toOrder(3)">

src/pages/customerMan/myOrder/index.vue

@@ -58,38 +58,35 @@
             </div>
           </div>
         </el-tab-pane>
-        <el-tab-pane label="卡券订单"
+        <el-tab-pane label="次卡订单"
                      name="second">
           <div class="user-list">
             <el-table ref="multipleTable"
                       :data="cardOrderData"
                       tooltip-effect="dark"
                       height="354"
+                      @row-click="openDetail"
                       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="id"
-                               label="订单编号">
-              </el-table-column>
-              <el-table-column prop="goods"
-                               label="商品名称"
+              <el-table-column prop="name"
+                               label="卡券名称"
                                width="200">
                 <template slot-scope="scope">
-                  <div v-for="(val,index) in scope.row.goods"
-                       :key="index">
-                    <div>{{val.name}}</div>
-                  </div>
+                  <div>{{scope.row.name | ellipsis(8)}}</div>
                 </template>
-                               
+
               </el-table-column>
-              <el-table-column prop="price"
-                               label="实付"
+              <el-table-column prop="type"
+                               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="ex_time"
+                               label="到期时间"
+                               width="180"
                                show-overflow-tooltip></el-table-column>
               <el-table-column prop="create_time"
                                label="创建时间"
@@ -99,13 +96,9 @@ type: "全额券" -->
                                label="状态"
                                show-overflow-tooltip>
                 <template slot-scope="scope">
-                  <div :class="'color'+scope.row.status">{{ cardOrderStatus[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-column prop="create_time"
-                               label="下单时间"
-                               width="180"
-                               show-overflow-tooltip></el-table-column>
             </el-table>
 
             <div class="pagin">
@@ -228,13 +221,64 @@ type: "全额券" -->
         </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 {
+  components: {
+    minePupop
+  },
   data () {
     return {
       couponList: [
@@ -278,13 +322,6 @@ export default {
         "已结算",
         "已取消"
       ],
-      cardOrderStatus: [
-        // 状态：0已预约，未支付，1已支付，2/3已完成
-        '已预约，未支付',
-        '已支付',
-        '已完成',
-        '已完成'
-      ],
       couponStatus: [
         '待使用',
         '已使用',
@@ -302,7 +339,10 @@ export default {
       projectData: [],
       cardOrderData: [],
       total: 100,
-      limit: 10
+      limit: 10,
+      isPore: false,
+      cardInfo: {},//订单详情
+      cardLogList: [],//次卡消耗记录
     };
   },
   computed: {},
@@ -321,6 +361,44 @@ export default {
         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 () {
@@ -454,4 +532,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

@@ -91,6 +91,25 @@
           <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 +117,7 @@
                      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>

src/server/home.js

@@ -191,4 +191,20 @@ export default class Home {
   static getCardOrders (params) {
     return $http.get(url.getCardOrders, 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

@@ -47,6 +47,14 @@ 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',
 
   /**
    *  by ListKer
@@ -116,5 +124,5 @@ export default {
   updateUserProfile: '/v2/pad/user/update',
 
   // 获取用户卡券订单
-  getCardOrders: '/v2/pad/user/order/coupon'
+  getCardOrders: '/v2/pad/user/card'
 }