267 lines
8.2 KiB
Vue
267 lines
8.2 KiB
Vue
<template>
|
|
<el-dialog width="600px" :title="title" :visible.sync="show">
|
|
<div class="u-p-15">
|
|
<div class="">
|
|
<el-tabs v-model="activeName" @tab-click="tabClick">
|
|
<el-tab-pane label="优惠券(单选)" name="youhui">
|
|
<el-table
|
|
empty-text="无可用优惠券"
|
|
:data="quans.fullReductionCoupon"
|
|
@cell-click="fullReductionCouponClick"
|
|
>
|
|
<el-table-column
|
|
type="index"
|
|
width="80"
|
|
label=""
|
|
v-if="quans.fullReductionCoupon.length > 0"
|
|
>
|
|
<template v-slot="scope">
|
|
<el-checkbox
|
|
@change="fullReductionCouponClick(scope.row)"
|
|
:value="scope.row.id == fullReductionCouponSel.id"
|
|
></el-checkbox>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column type="index" width="50" 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="抵扣">
|
|
<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>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="商品券(多选)" name="goods">
|
|
<el-table
|
|
empty-text="无可用商品券"
|
|
:data="quans.productCoupon"
|
|
tooltip-effect="dark"
|
|
style="width: 100%"
|
|
@selection-change="productCouponChange"
|
|
>
|
|
<el-table-column type="selection" width="55"> </el-table-column>
|
|
<el-table-column type="index" width="50" label="#">
|
|
</el-table-column>
|
|
<el-table-column prop="name" label="券名称"> </el-table-column>
|
|
<el-table-column label="商品信息">
|
|
<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>
|
|
</template>
|
|
</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="useRestrictions" label="描述">
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
<div v-if="quansSelArr.length > 0">
|
|
<div class="font-bold u-m-b-10">已选优惠券</div>
|
|
<el-table empty-text="未选择优惠券" :data="quansSelArr">
|
|
<el-table-column type="index" width="50" 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 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>
|
|
<el-table-column prop="useRestrictions" label="描述">
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div class="u-flex u-row-center u-m-t-50">
|
|
<el-button size="medium" @click="close">取消</el-button>
|
|
<el-button size="medium" type="primary" @click="confirm"
|
|
>确定</el-button
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
</template>
|
|
<script>
|
|
import { $activateByOrderId } from "@/api/table";
|
|
import {returnProductCouponAllPrice} from '../util'
|
|
let $originFullReductionCoupon=[]
|
|
export default {
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
default: "选择优惠券",
|
|
},
|
|
goodsArr:{
|
|
type:Array,
|
|
default:[]
|
|
},
|
|
vipUser:{
|
|
type:Object,
|
|
default:()=>{
|
|
return {
|
|
isVip:false,
|
|
}
|
|
}
|
|
},
|
|
orderPrice:{
|
|
type:Number,
|
|
default:0
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
fullReductionCouponSel: {
|
|
id: "",
|
|
},
|
|
productCouponSelArr: [],
|
|
quansSelArr: [],
|
|
quans: {
|
|
fullReductionCoupon: [],
|
|
productCoupon: [],
|
|
},
|
|
currentRow: null,
|
|
multipleSelection: null,
|
|
fullReductionCouponSelId: "",
|
|
activeName: "youhui",
|
|
form: {},
|
|
show: false,
|
|
};
|
|
},
|
|
watch: {
|
|
activeName(newval){
|
|
if(newval=='youhui'){
|
|
this.quans.fullReductionCoupon=$originFullReductionCoupon.filter(v=>(this.orderPrice-this.goodsDiscount)>=v.fullAmount)
|
|
}
|
|
}
|
|
},
|
|
computed:{
|
|
|
|
goodsDiscount(){
|
|
const coupArr=this.productCouponSelArr.filter(v=>v.type==2);
|
|
return returnProductCouponAllPrice(coupArr,this.goodsArr,this.vipUser)
|
|
}
|
|
},
|
|
methods: {
|
|
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])
|
|
}
|
|
} else {
|
|
if(dikouQuan){
|
|
this.quansSelArr=[dikouQuan]
|
|
}else{
|
|
this.quansSelArr = val;
|
|
}
|
|
}
|
|
console.log(this.quansSelArr)
|
|
},
|
|
fullReductionCouponClick(row) {
|
|
if(row.id==this.fullReductionCouponSel.id){
|
|
this.fullReductionCouponSel={id:''}
|
|
this.quansSelArr.splice(0,1);
|
|
return
|
|
}
|
|
const dikouQuan=this.quansSelArr[0]
|
|
this.fullReductionCouponSel = row;
|
|
if(dikouQuan&&dikouQuan.type==1){
|
|
this.$set(this.quansSelArr, 0, row)
|
|
}else{
|
|
this.quansSelArr.unshift(row);
|
|
}
|
|
},
|
|
handleCurrentChange(val) {
|
|
this.currentRow = val;
|
|
},
|
|
handleSelectionChange(val) {
|
|
this.multipleSelection = val;
|
|
},
|
|
tabClick() {},
|
|
init() {},
|
|
|
|
changeKey(key, val) {
|
|
this[key] = val;
|
|
},
|
|
|
|
confirm() {
|
|
this.$emit("confirm", this.quansSelArr);
|
|
this.close();
|
|
},
|
|
async open(data) {
|
|
console.log(data);
|
|
if (data.memberId) {
|
|
let quans = await $activateByOrderId({
|
|
orderId: data.id,
|
|
memberId: data.memberId,
|
|
});
|
|
quans.fullReductionCoupon = quans.fullReductionCoupon.filter(
|
|
(v) => v.use
|
|
);
|
|
$originFullReductionCoupon=quans.fullReductionCoupon
|
|
quans.productCoupon = quans.productCoupon.filter((v) => v.use);
|
|
this.quans = quans;
|
|
}
|
|
|
|
this.show = true;
|
|
this.init();
|
|
},
|
|
close() {
|
|
this.show = false;
|
|
},
|
|
},
|
|
mounted() {
|
|
this.number = `${this.value}`;
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.codeImg {
|
|
width: 160px;
|
|
border: 1px solid rgb(220, 223, 230);
|
|
height: 160px;
|
|
}
|
|
::v-deep .el-input .el-input__inner::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
::v-deep .el-input .el-input__inner::-webkit-outer-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
</style> |