核销次卡

src/pages/customerMan/myOrder/index.vue

@@ -146,9 +146,11 @@
               ></el-table-column>
               <el-table-column prop="status" label="状态" show-overflow-tooltip>
                 <template slot-scope="scope">
-                  <div :class="'color' + scope.row.status">
+                  <div :class="'colorB' + scope.row.status">
                     {{
-                      scope.row.status == -1
+                      scope.row.status == -2
+                        ? "已注销"
+                        : scope.row.status == -1
                         ? "已过期"
                         : scope.row.status == -0
                         ? "已使用"
@@ -157,6 +159,18 @@
                   </div>
                 </template>
               </el-table-column>
+              <el-table-column
+                prop=""
+                label="操作"
+                width="100"
+                show-overflow-tooltip
+              >
+                <template slot-scope="scope" v-if="scope.row.status != -2">
+                  <div class="cancleCoupon" @click.stop="cancleCard(scope.row)">
+                    操作
+                  </div>
+                </template>
+              </el-table-column>
             </el-table>
 
             <div class="pagin">
@@ -436,6 +450,30 @@ type: "全额券" -->
         </div>
       </div>
     </mine-pupop>
+    <!-- 操作核销次卡 -->
+    <mine-pupop :show="isCancelCard">
+      <div class="CancelCard">
+        <div class="image">
+          <img
+            src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/delete.png"
+            alt
+            @click="closeCardPop"
+          />
+        </div>
+        <div class="title">核销次卡</div>
+        <div class="CardName">
+          <div class="one">次卡名称:</div>
+          <div>{{ cancelCardInfo.card_name }}</div>
+        </div>
+        <div class="cardRemark">
+          <div class="one">备注信息:</div>
+          <el-input v-model.trim="cardRemark"></el-input>
+        </div>
+        <div class="radio">
+          <button class="affirmBtn" @click="checkCard">确定</button>
+        </div>
+      </div>
+    </mine-pupop>
   </div>
 </template>
 
@@ -504,6 +542,9 @@ export default {
       cancelCouponInfo: "", //核销优惠券名称
       couponRemark: "", //核销优惠券备注信息
       refresh: false, //刷新页面数据
+      isCancelCard: false, //核销次卡界面
+      cancelCardInfo: "", //核销次卡名称
+      cardRemark: "", //核销优惠券备注信息
     };
   },
   computed: {},
@@ -558,6 +599,35 @@ export default {
           }
         });
     },
+    // 打开次卡弹窗
+    cancleCard(e) {
+      this.isCancelCard = true;
+      this.cancelCardInfo = e;
+    },
+    // 关闭次卡弹窗
+    closeCardPop() {
+      this.isCancelCard = false;
+    },
+    // 核销次卡
+    checkCard() {
+      if (this.cardRemark == "") {
+        this.$message.error("请填写备注信息");
+        return;
+      }
+      api
+        .checkCard({
+          id: this.cancelCardInfo.id,
+          remark: this.cardRemark,
+        })
+        .then((res) => {
+          if (res.code == 200) {
+            this.$message.success("核销成功");
+            this.isCancelCard = false;
+            // 刷新次卡列表
+            this.getCardList();
+          }
+        });
+    },
     // 阻止修改次卡时间时键盘弹出
     forbid() {
       //禁止软键盘弹出
@@ -574,6 +644,14 @@ export default {
     },
     // 修改次卡时间
     amendCardTime(e) {
+      console.log(e);
+      if (e.status == -2) {
+        this.$message({
+          message: "该次卡已注销",
+          type: "error",
+        });
+        return;
+      }
       this.isAmend = true;
       this.amendCardInfo = e;
       console.log(e);
@@ -624,6 +702,13 @@ export default {
     },
     //次卡订单详情
     openDetail(row, column, event) {
+      if (row.status == -2) {
+        this.$message({
+          message: "该次卡已注销",
+          type: "error",
+        });
+        return;
+      }
       this.isPore = true;
       api.cardInfo({ id: row.id }).then((res) => {
         if (res.code == 200) {
@@ -846,6 +931,18 @@ export default {
 .colorA0 {
   color: #61d09d;
 }
+.colorB0 {
+  color: #3ef3ed;
+}
+.colorB1 {
+  color: #61d09d;
+}
+.colorB-1 {
+  color: #fc3019;
+}
+.colorB-2 {
+  color: #333;
+}
 .priceColor {
   color: #ff3007;
 }
@@ -1105,6 +1202,70 @@ export default {
     }
   }
 }
+// 核销次卡界面
+.CancelCard {
+  width: 440px;
+  height: 300px;
+  background-color: #fff;
+  border-radius: 12px;
+  padding: 15px;
+  .image {
+    height: 30px;
+    width: 30px;
+    img {
+      width: 100%;
+    }
+  }
+  .title {
+    text-align: center;
+    font-weight: 700;
+    font-size: 16px;
+    margin-bottom: 40px;
+  }
+  .CardName {
+    display: flex;
+    margin-bottom: 40px;
+    .one {
+      font-weight: 600;
+      margin-right: 10px;
+      width: 90px;
+    }
+  }
+  .cardRemark {
+    display: flex;
+    align-items: center;
+    .one {
+      margin-right: 22px;
+      font-weight: 600;
+      width: 90px;
+    }
+    .el-input {
+      width: 300px;
+      /deep/.el-input__inner:focus {
+        // el-input输入时设置边框颜色
+        border: #fa7d22 1px solid;
+      }
+    }
+  }
+  .radio {
+    width: 100%;
+    display: flex;
+    justify-content: space-evenly;
+    button {
+      width: 176px;
+      height: 28px;
+      border-radius: 14px;
+      background-color: #fff;
+      border: none;
+      margin-top: 50px;
+    }
+    .affirmBtn {
+      background-color: #fa7d22;
+      color: #fff;
+      margin-left: 15px;
+    }
+  }
+}
 .expir_time {
   color: #3115cc;
 }

src/pages/payUser/myOrder/index.vue

@@ -147,9 +147,11 @@
               ></el-table-column>
               <el-table-column prop="status" label="状态" show-overflow-tooltip>
                 <template slot-scope="scope">
-                  <div :class="'color' + scope.row.status">
+                  <div :class="'colorB' + scope.row.status">
                     {{
-                      scope.row.status == -1
+                      scope.row.status == -2
+                        ? "已注销"
+                        : scope.row.status == -1
                         ? "已过期"
                         : scope.row.status == -0
                         ? "已使用"
@@ -158,6 +160,18 @@
                   </div>
                 </template>
               </el-table-column>
+              <el-table-column
+                prop=""
+                label="操作"
+                width="100"
+                show-overflow-tooltip
+              >
+                <template slot-scope="scope" v-if="scope.row.status != -2">
+                  <div class="cancleCoupon" @click.stop="cancleCard(scope.row)">
+                    操作
+                  </div>
+                </template>
+              </el-table-column>
             </el-table>
 
             <div class="pagin">
@@ -455,7 +469,9 @@ type: "全额券" -->
             </div>
           </div>
         </div>
-        <div v-if='cardInfo.card_type == 1' class="confirm" @click="confirm">确定</div>
+        <div v-if="cardInfo.card_type == 1" class="confirm" @click="confirm">
+          确定
+        </div>
       </div>
     </mine-pupop>
     <!-- 修改次卡时间 -->
@@ -515,12 +531,37 @@ type: "全额券" -->
         </div>
       </div>
     </mine-pupop>
+    <!-- 操作核销次卡 -->
+    <mine-pupop :show="isCancelCard">
+      <div class="CancelCard">
+        <div class="image">
+          <img
+            src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/delete.png"
+            alt
+            @click="closeCardPop"
+          />
+        </div>
+        <div class="title">核销次卡</div>
+        <div class="CardName">
+          <div class="one">次卡名称:</div>
+          <div>{{ cancelCardInfo.card_name }}</div>
+        </div>
+        <div class="cardRemark">
+          <div class="one">备注信息:</div>
+          <el-input v-model.trim="cardRemark"></el-input>
+        </div>
+        <div class="radio">
+          <button class="affirmBtn" @click="checkCard">确定</button>
+        </div>
+      </div>
+    </mine-pupop>
   </div>
 </template>
 
 <script>
 import api from "../../../server/home";
 import minePupop from "../../../components/minePupop/index.vue";
+import { log } from "console";
 
 export default {
   components: {
@@ -584,6 +625,9 @@ export default {
       cancelCouponInfo: "", //核销优惠券名称
       couponRemark: "", //核销优惠券备注信息
       refresh: false, //刷新页面数据
+      isCancelCard: false, //核销次卡界面
+      cancelCardInfo: "", //核销次卡名称
+      cardRemark: "", //核销优惠券备注信息
     };
   },
   computed: {},
@@ -636,6 +680,35 @@ export default {
           }
         });
     },
+    // 打开次卡弹窗
+    cancleCard(e) {
+      this.isCancelCard = true;
+      this.cancelCardInfo = e;
+    },
+    // 关闭次卡弹窗
+    closeCardPop() {
+      this.isCancelCard = false;
+    },
+    // 核销次卡
+    checkCard() {
+      if (this.cardRemark == "") {
+        this.$message.error("请填写备注信息");
+        return;
+      }
+      api
+        .checkCard({
+          id: this.cancelCardInfo.id,
+          remark: this.cardRemark,
+        })
+        .then((res) => {
+          if (res.code == 200) {
+            this.$message.success("核销成功");
+            this.isCancelCard = false;
+            // 刷新次卡列表
+            this.getCardList();
+          }
+        });
+    },
     // 阻止修改次卡时间时键盘弹出
     forbid() {
       //禁止软键盘弹出
@@ -652,6 +725,13 @@ export default {
     },
     // 修改次卡时间
     amendCardTime(e) {
+      if (e.status == -2) {
+        this.$message({
+          message: "该次卡已注销",
+          type: "error",
+        });
+        return;
+      }
       this.isAmend = true;
       this.amendCardInfo = e;
       console.log(e);
@@ -702,6 +782,13 @@ export default {
     },
     //次卡订单详情
     openDetail(row, column, event) {
+      if (row.status == -2) {
+        this.$message({
+          message: "该次卡已注销",
+          type: "error",
+        });
+        return;
+      }
       this.isPore = true;
       api.cardInfo({ id: row.id }).then((res) => {
         if (res.code == 200) {
@@ -963,6 +1050,18 @@ export default {
 .colorA0 {
   color: #61d09d;
 }
+.colorB0 {
+  color: #3ef3ed;
+}
+.colorB1 {
+  color: #61d09d;
+}
+.colorB-1 {
+  color: #fc3019;
+}
+.colorB-2 {
+  color: #333;
+}
 .priceColor {
   color: #ff3007;
 }
@@ -1222,6 +1321,70 @@ export default {
     }
   }
 }
+// 核销次卡界面
+.CancelCard {
+  width: 440px;
+  height: 300px;
+  background-color: #fff;
+  border-radius: 12px;
+  padding: 15px;
+  .image {
+    height: 30px;
+    width: 30px;
+    img {
+      width: 100%;
+    }
+  }
+  .title {
+    text-align: center;
+    font-weight: 700;
+    font-size: 16px;
+    margin-bottom: 40px;
+  }
+  .CardName {
+    display: flex;
+    margin-bottom: 40px;
+    .one {
+      font-weight: 600;
+      margin-right: 10px;
+      width: 90px;
+    }
+  }
+  .cardRemark {
+    display: flex;
+    align-items: center;
+    .one {
+      margin-right: 22px;
+      font-weight: 600;
+      width: 90px;
+    }
+    .el-input {
+      width: 300px;
+      /deep/.el-input__inner:focus {
+        // el-input输入时设置边框颜色
+        border: #fa7d22 1px solid;
+      }
+    }
+  }
+  .radio {
+    width: 100%;
+    display: flex;
+    justify-content: space-evenly;
+    button {
+      width: 176px;
+      height: 28px;
+      border-radius: 14px;
+      background-color: #fff;
+      border: none;
+      margin-top: 50px;
+    }
+    .affirmBtn {
+      background-color: #fa7d22;
+      color: #fff;
+      margin-left: 15px;
+    }
+  }
+}
 .expir_time {
   color: #3115cc;
 }

src/server/home.js

@@ -309,4 +309,8 @@ export default class Home {
   static syncErpOrder(params) {
     return $http.post(url.syncErpOrder, params)
   }
+  // 同步erp订单
+  static checkCard(params) {
+    return $http.post(url.checkCard, params)
+  }
 }

src/server/urls.js

@@ -200,5 +200,8 @@ export default {
   checkCoupon: '/v2/pad/coupon/check',
 
   // 同步erp订单
-  syncErpOrder:'/v2/pad/order/sync_erp_order'
+  syncErpOrder:'/v2/pad/order/sync_erp_order',
+
+  // 核销次卡
+  checkCard:'/v2/pad/card/logoff'
 }