增加优惠券，积分抵扣

src/views/tool/Instead/components/quans.vue

@@ -1,17 +1,23 @@
 <template>
-  <el-dialog width="600px" :title="title" :visible.sync="show">
+  <el-dialog
+    width="700px"
+    :title="title"
+    :visible.sync="show"
+    top="20px"
+    @close="reset"
+  >
     <div class="u-p-15">
       <div class="">
         <el-tabs v-model="activeName" @tab-click="tabClick">
           <el-tab-pane label="优惠券(单选)" name="youhui">
             <el-table
+              ref="table"
               empty-text="无可用优惠券"
               :data="quans.fullReductionCoupon"
               @cell-click="fullReductionCouponClick"
             >
               <el-table-column
                 type="index"
-                width="80"
                 label=""
                 v-if="quans.fullReductionCoupon.length > 0"
               >
@@ -22,27 +28,39 @@
                   ></el-checkbox>
                 </template>
               </el-table-column>
-              <el-table-column type="index" width="50" label="#">
-              </el-table-column>
+              <el-table-column type="index" label="#"> </el-table-column>
               <el-table-column prop="name" label="券名称"> </el-table-column>
               <el-table-column label="券类型" width="80">
                 <template v-slot="scope">
                   {{ scope.row.type == 1 ? "优惠券" : "商品券" }}
                 </template>
               </el-table-column>
-              <el-table-column prop="discountAmount" label="抵扣"> 
+              <el-table-column prop="discountAmount" label="抵扣">
                 <template v-slot="scope">
                   <span class="color-red">
                     ￥{{ scope.row.discountAmount }}
                   </span>
                 </template>
               </el-table-column>
+              <el-table-column prop="discountAmount" label="限制" width="120">
+                <template v-slot="scope">
+                  <div class="u-flex">
+                    <span>支付满</span>
+                    <span class="color-red no-wrap">
+                      {{ scope.row.fullAmount }}
+                    </span>
+                    <span>元可用</span>
+                  </div>
+                </template>
+              </el-table-column>
               <el-table-column prop="useRestrictions" label="描述">
               </el-table-column>
             </el-table>
           </el-tab-pane>
           <el-tab-pane label="商品券(多选)" name="goods">
             <el-table
+              ref="table1"
+              @cell-click="productCouponClick"
               empty-text="无可用商品券"
               :data="quans.productCoupon"
               tooltip-effect="dark"
@@ -53,19 +71,33 @@
               <el-table-column type="index" width="50" label="#">
               </el-table-column>
               <el-table-column prop="name" label="券名称"> </el-table-column>
-              <el-table-column label="商品信息">
+
+              <el-table-column label="商品信息" width="120">
                 <template v-slot="scope">
-                  <div class="u-flex ">
-                    <el-image
-                      :src="scope.row.productCover"
-                      style="width: 40px; height: 40px"
-                      :preview-src-list="[scope.row.productCover]"
-                    ></el-image>
-                    <div class="u-m-l-10">{{ scope.row.productName }}</div>
+                  <div class="u-flex">
+                    <div class="u-flex">
+                      <el-image
+                        :src="scope.row.productCover"
+                        fit="cover"
+                        style="width: 40px; height: 40px"
+                        :preview-src-list="[scope.row.productCover]"
+                      ></el-image>
+                    </div>
+                    <div class="u-p-l-10">
+                      <div class="">{{ scope.row.productName }}</div>
+                      <div class="">x{{ scope.row.num || "" }}</div>
+                    </div>
                   </div>
                 </template>
               </el-table-column>
-              <el-table-column label="券类型" width="80">
+              <el-table-column prop="discountAmount" label="抵扣">
+                <template v-slot="scope">
+                  <span class="color-red">
+                    ￥{{ scope.row.discountAmount }}
+                  </span>
+                </template>
+              </el-table-column>
+              <el-table-column label="券类型">
                 <template v-slot="scope">
                   {{ scope.row.type == 1 ? "优惠券" : "商品券" }}
                 </template>
@@ -87,20 +119,38 @@
               </template>
             </el-table-column>
             <el-table-column label="商品信息">
-                <template v-slot="scope">
-                  <div class="u-flex " v-if="scope.row.type == 2">
-                    <el-image
-                      :src="scope.row.productCover"
-                      style="width: 40px; height: 40px"
-                      :preview-src-list="[scope.row.productCover]"
-                    ></el-image>
-                    <div class="u-m-l-10">{{ scope.row.productName }}</div>
-                  </div>
-                </template>
-              </el-table-column>
+              <template v-slot="scope">
+                <div class="u-flex" v-if="scope.row.type == 2">
+                  <el-image
+                    :src="scope.row.productCover"
+                    style="width: 40px; height: 40px"
+                    :preview-src-list="[scope.row.productCover]"
+                  ></el-image>
+                  <div class="u-m-l-10">{{ scope.row.productName }}</div>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="discountAmount" label="抵扣">
+              <template v-slot="scope">
+                <span class="color-red">
+                  ￥{{ scope.row.discountAmount }}
+                </span>
+              </template>
+            </el-table-column>
             <el-table-column prop="useRestrictions" label="描述">
             </el-table-column>
+            <el-table-column prop="useRestrictions" label="">
+              <template v-slot="scope">
+                <el-button type="danger" size="mini" @click="delQuan(scope.row)"
+                  >删除</el-button
+                >
+              </template>
+            </el-table-column>
           </el-table>
+          <div class="u-flex u-m-t-20">
+            <span class="">抵扣：</span>
+            <span class="color-red font-bold">{{ AllCouponPrice }}</span>
+          </div>
         </div>
         <div class="u-flex u-row-center u-m-t-50">
           <el-button size="medium" @click="close">取消</el-button>
@@ -114,37 +164,41 @@
 </template>
 <script>
 import { $activateByOrderId } from "@/api/table";
-import {returnProductCouponAllPrice} from '../util'
-let $originFullReductionCoupon=[]
+import {
+  returnProductCouponAllPrice,
+  returnProductCouponPrice,
+  returnFullReductionCouponAllPrice,
+} from "../util";
+let $originFullReductionCoupon = [];
 export default {
   props: {
     title: {
       type: String,
       default: "选择优惠券",
     },
-    goodsArr:{
-      type:Array,
-      default:[]
+    goodsArr: {
+      type: Array,
+      default: [],
     },
-    vipUser:{
-      type:Object,
-      default:()=>{
+    vipUser: {
+      type: Object,
+      default: () => {
         return {
-          isVip:false,
-        }
-      }
+          isVip: false,
+        };
+      },
+    },
+    orderPrice: {
+      type: Number,
+      default: 0,
     },
-    orderPrice:{
-      type:Number, 
-      default:0
-    }
   },
   data() {
     return {
+      propSelCoup: [],
       fullReductionCouponSel: {
         id: "",
       },
-      productCouponSelArr: [],
       quansSelArr: [],
       quans: {
         fullReductionCoupon: [],
@@ -156,53 +210,150 @@ export default {
       activeName: "youhui",
       form: {},
       show: false,
+      isSetProductCoup: false,
     };
   },
   watch: {
-    activeName(newval){
-      if(newval=='youhui'){
-        this.quans.fullReductionCoupon=$originFullReductionCoupon.filter(v=>(this.orderPrice-this.goodsDiscount)>=v.fullAmount)
+    activeName(newval) {
+      if (newval == "youhui") {
+        this.filterFullReductionCoupon();
       }
-    }
+    },
   },
-  computed:{
-  
-    goodsDiscount(){
-      const coupArr=this.productCouponSelArr.filter(v=>v.type==2);
-      return  returnProductCouponAllPrice(coupArr,this.goodsArr,this.vipUser)
-    }
+  computed: {
+    goodsDiscount() {
+      const coupArr = this.quansSelArr.filter((v) => v.type == 2);
+      return returnProductCouponAllPrice(coupArr, this.goodsArr, this.vipUser);
+    },
+    fullReductionCouponDiscount() {
+      const coupArr = this.quansSelArr.filter((v) => v.type == 1);
+      return returnFullReductionCouponAllPrice(coupArr);
+    },
+    AllCouponPrice() {
+      return (
+        this.goodsDiscount * 1 +
+        this.fullReductionCouponDiscount * 1
+      ).toFixed(2);
+    },
   },
   methods: {
+    delQuan(row) {
+      if (row.type == 2) {
+        const index = this.quansSelArr.findIndex((item) => item.id == row.id);
+        this.quansSelArr.splice(index, 1);
+        this.$refs.table1.toggleRowSelection(row, false);
+      } else {
+        this.fullReductionCouponSel = { id: "" };
+        this.quansSelArr.splice(0, 1);
+      }
+      if (index != -1) {
+        const row = this.quansSelArr.find;
+      }
+    },
+    reset() {
+      this.quansSelArr = [];
+      this.fullReductionCouponSel = { id: "" };
+      this.$refs.table1.clearSelection();
+    },
+    filterFullReductionCoupon() {
+      this.quans.fullReductionCoupon = $originFullReductionCoupon.filter(
+        (v) => this.orderPrice - this.goodsDiscount >= v.fullAmount
+      );
+    },
     productCouponChange(val) {
-      console.log(val)
-      this.productCouponSelArr = val;
-      const dikouQuan=this.quansSelArr[0]
-      if (this.productCouponSelArr.length > 0&&(dikouQuan&&dikouQuan.type==1) ) {
-        for (let i in val) {
-        this.$set(this.quansSelArr, i+1, val[i])
+      if (this.isSetProductCoup) {
+        return;
+      }
+
+      const firstCoup = this.quansSelArr[0];
+      const firstIsDikouQuan = firstCoup ? firstCoup.type == 1 : false;
+      if (firstCoup && firstIsDikouQuan) {
+        if (
+          this.orderPrice -
+            this.fullReductionCouponDiscount -
+            returnProductCouponAllPrice(val, this.goodsArr, this.vipUser) <
+          firstCoup.fullAmount
+        ) {
+          this.$confirm(
+            "所选优惠券不满足最低抵扣" + firstCoup.fullAmount + "元要求",
+            "提示",
+            {
+              distinguishCancelAndClose: true,
+              confirmButtonText: "放弃选择商品券",
+              cancelButtonText: "删除优惠券",
+              type: "warning",
+            }
+          )
+            .then(() => {
+              val.map((v) => {
+                this.$refs.table1.toggleRowSelection(v);
+              });
+            })
+            .catch((action) => {
+              if (action == "cancel") {
+                this.quansSelArr.splice(0, 1);
+                this.fullReductionCouponSel = { id: "" };
+                this.quansSelArr = [...val];
+              }
+              if (action == "close") {
+                val.map((v) => {
+                  this.$refs.table1.toggleRowSelection(v);
+                });
+              }
+            });
+        } else {
+          this.quansSelArr.splice(
+            val.length <= 0 ? 1 : val.length,
+            this.quansSelArr.length
+          );
+          for (let i in val) {
+            this.$set(this.quansSelArr, i * 1 + 1, { ...val[i] });
+          }
         }
       } else {
-        if(dikouQuan){
-          this.quansSelArr=[dikouQuan]
-        }else{
-          this.quansSelArr = val;
-        }
+        this.quansSelArr = [...val];
       }
-      console.log(this.quansSelArr)
     },
     fullReductionCouponClick(row) {
-      if(row.id==this.fullReductionCouponSel.id){
-         this.fullReductionCouponSel={id:''}
-         this.quansSelArr.splice(0,1);
-         return 
+      if (row.id == this.fullReductionCouponSel.id) {
+        this.fullReductionCouponSel = { id: "" };
+        this.quansSelArr.splice(0, 1);
+        return;
       }
-      const dikouQuan=this.quansSelArr[0]
+      const dikouQuan = this.quansSelArr[0];
       this.fullReductionCouponSel = row;
-      if(dikouQuan&&dikouQuan.type==1){
-        this.$set(this.quansSelArr, 0, row)
-      }else{
+      if (dikouQuan && dikouQuan.type == 1) {
+        this.$set(this.quansSelArr, 0, row);
+      } else {
         this.quansSelArr.unshift(row);
       }
+      if(!this.fullReductionCouponSel.id){
+        return
+      }
+      
+      if (
+        this.orderPrice -
+          this.fullReductionCouponDiscount -
+          this.goodsDiscount <
+            this.fullReductionCouponSel.fullAmount
+      ) {
+        this.fullReductionCouponSel = { id: "" };
+        this.quansSelArr.splice(0, 1);
+        this.$confirm(
+          "所选优惠券不满足最低抵扣" +
+            this.fullReductionCouponSel.fullAmount +
+            "元要求",
+          "提示",
+          {
+            distinguishCancelAndClose: true,
+            confirmButtonText: "确定",
+            type: "warning",
+          }
+        ).then(() => {});
+      }
+    },
+    productCouponClick(row) {
+      this.$refs.table1.toggleRowSelection(row);
     },
     handleCurrentChange(val) {
       this.currentRow = val;
@@ -218,22 +369,54 @@ export default {
     },
 
     confirm() {
-      this.$emit("confirm", this.quansSelArr);
+      this.$emit("confirm", [...this.quansSelArr]);
       this.close();
     },
-    async open(data) {
+    setSelectCoupon() {
+      const dikouQuan = this.propSelCoup.find((v) => v.type == 1);
+      this.fullReductionCouponSel = dikouQuan ? dikouQuan : { id: "" };
+      const productCouArr = this.propSelCoup.filter((v) => v.type == 2);
+      this.quans.productCoupon.map((v) => {
+        for (let i in productCouArr) {
+          this.isSetProductCoup = true;
+          if (v.id == productCouArr[i].id) {
+            this.$refs.table1.toggleRowSelection(v, true);
+          }
+        }
+      });
+
+      this.isSetProductCoup = false;
+    },
+    async open(data, propSelCoup) {
+      this.propSelCoup = [...propSelCoup] || [];
       console.log(data);
       if (data.memberId) {
-        let quans = await $activateByOrderId({
+        let quansRes = await $activateByOrderId({
           orderId: data.id,
           memberId: data.memberId,
         });
-        quans.fullReductionCoupon = quans.fullReductionCoupon.filter(
-          (v) => v.use
+        quansRes.fullReductionCoupon = quansRes.fullReductionCoupon.filter(
+          (v) => this.orderPrice >= v.fullAmount
         );
-        $originFullReductionCoupon=quans.fullReductionCoupon
-        quans.productCoupon = quans.productCoupon.filter((v) => v.use);
-        this.quans = quans;
+        $originFullReductionCoupon = quansRes.fullReductionCoupon;
+        this.quans.productCoupon = quansRes.productCoupon
+          .map((v) => {
+            return {
+              ...v,
+              discountAmount: returnProductCouponPrice(
+                v,
+                this.goodsArr,
+                this.vipUser
+              ),
+            };
+          })
+          .filter((v) => v.discountAmount > 0);
+        // this.quans = quans;
+        this.filterFullReductionCoupon();
+        this.quansSelArr = this.propSelCoup;
+        this.$nextTick(() => {
+          this.setSelectCoupon();
+        });
       }
 
       this.show = true;

src/views/tool/Instead/components/return-cart.vue

@@ -113,6 +113,7 @@ export default {
     },
     open(item) {
       this.goods = item?item:this.goods;
+      console.log(item)
       this.show = true;
       if (item != "-999") {
         this.number = 1;