增加优惠券,积分抵扣

This commit is contained in:
2024-11-11 14:03:49 +08:00
parent 28fdcd9e5c
commit 176fc55a5c
5 changed files with 393 additions and 124 deletions

View File

@@ -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;

View File

@@ -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;

View File

@@ -857,7 +857,7 @@
</div>
<div class="forms" v-if="vipUser.id">
<div class="u-m-b-20 u-m-t-10" >
<div class="u-m-b-20 u-m-t-10">
<div class="u-flex u-flex-wrap">
<span class="font-bold no-wrap u-m-r-20">积分抵扣</span>
<el-radio-group
@@ -872,12 +872,16 @@
<el-input-number
@change="pointsValueChange"
v-if="points.selected == 1"
:step="1"
disabled
step-strictly
v-model="points.value"
:min="points.minDeductionPoints"
:max="points.maxUsablePoints"
></el-input-number>
<el-input-number
:step="1"
step-strictly
@change="pointsValueChange"
v-if="points.selected == 2"
v-model="points.value"
@@ -889,6 +893,9 @@
<div class="color-999 u-m-t-10">
<template v-if="points.res.usable">
<span class="color-red">*</span>
<span v-if="points.res.equivalentPoints">
1积分抵扣{{ points.res.equivalentPoints }}元,
</span>
<span
>最大抵扣积分{{ points.res.maxUsablePoints }}</span
>
@@ -905,7 +912,7 @@
</div>
</div>
<div class="u-flex flex-wrap" >
<div class="u-flex flex-wrap">
<span class="font-bold no-wrap">优惠券</span>
<div
class="border u-p-l-20 cur-pointer u-m-r-20 u-flex no-wrap u-p-t-10 u-p-b-10 border-r-4 selQuan"
@@ -934,18 +941,35 @@
</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="描述">
<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="">
<template v-slot="scope">
<el-button
type="danger"
size="mini"
@click="delQuan(scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
</div>
@@ -1345,7 +1369,14 @@
<money-discount ref="refDiscount" @confirm="ChangeDiscount">
</money-discount>
<!-- 优惠券 -->
<quans-pop ref="refQuans" :vipUser="vipUser" :orderPrice="currentPayMoney" :goodsArr="createOrder.data.detailList||[]" @confirm="quansConfirm"> </quans-pop>
<quans-pop
ref="refQuans"
:vipUser="vipUser"
:orderPrice="currentPayMoney"
:goodsArr="createOrder.data.detailList || []"
@confirm="quansConfirm"
>
</quans-pop>
<!-- 选择人数 -->
<choose-diners-number
@@ -1418,7 +1449,7 @@ import {
returnPackFee,
formatOrderGoodsList,
returnVipDiscountPrice,
returnCouponAllPrice
returnCouponAllPrice,
} from "./util.js";
import { $status } from "@/utils/table.js";
@@ -1655,24 +1686,34 @@ export default {
return this.vipUser.isVip ? true : false;
},
coupdiscount() {
return returnCouponAllPrice(this.quansSelArr,this.createOrder.data.detailList||[],this.vipUser)
return returnCouponAllPrice(
this.quansSelArr,
this.createOrder.data.detailList || [],
this.vipUser
);
},
goodsDisCount(){
const goodsQuanArr=this.quansSelArr.filter(v=>v.type==2);
let result=0;
if(goodsQuanArr.length<0){
result=0;
}else{
result=goodsQuanArr.reduce((a,b)=>{
const item=this.createOrder.data.detailList.find(v=>v.productId==b.proId);
const memberPrice=item.memberPrice?item.memberPrice:item.price;
const price=item?(this.vipUser.isVip?memberPrice:item.price):0;
return a+price;
},0);
goodsDisCount() {
const goodsQuanArr = this.quansSelArr.filter((v) => v.type == 2);
let result = 0;
if (goodsQuanArr.length < 0) {
result = 0;
} else {
result = goodsQuanArr.reduce((a, b) => {
const item = this.createOrder.data.detailList.find(
(v) => v.productId == b.proId
);
const memberPrice = item.memberPrice ? item.memberPrice : item.price;
const price = item
? this.vipUser.isVip
? memberPrice
: item.price
: 0;
return a + price;
}, 0);
}
return result.toFixed(2);
},
currentPayMoney() {
const amount = this.createOrder.data.amount || 0;
const discount = this.createOrder.discount || 1;
@@ -2089,6 +2130,13 @@ export default {
this.open(this.$route.query);
},
methods: {
delQuan(row) {
const index=this.quansSelArr.findIndex(v=>v.id==row.id);
console.log(index);
if(index!=-1){
this.quansSelArr.splice(index, 1);
}
},
async getCalcUsablePoints() {
const memberId = this.createOrder.data.memberId || this.vipUser.id;
if (!memberId) {
@@ -2099,7 +2147,7 @@ export default {
orderAmount: this.currentPayMoney.toFixed(2),
});
this.points.res = pointsRes;
this.points.minDeductionPoints = pointsRes.minDeductionPoints;
// this.points.minDeductionPoints = pointsRes.minDeductionPoints;
this.points.maxUsablePoints = pointsRes.maxUsablePoints;
if (this.points.selected) {
this.points.value = Math.min(
@@ -2138,11 +2186,11 @@ export default {
this.$refs.refQuans.open({
id: this.createOrder.data.id,
memberId: this.createOrder.data.memberId || this.vipUser.id,
});
},[...this.quansSelArr]);
},
quansConfirm(e) {
console.log(e);
this.quansSelArr = e;
this.quansSelArr = [...e];
},
searchInput(e) {
console.log(e);
@@ -2706,11 +2754,11 @@ export default {
const userCouponInfos = this.quansSelArr.reduce((prve, cur) => {
const index = prve.findIndex((v) => v.userCouponId == cur.couponId);
if (index != -1) {
prve[index].num += 1;
prve[index].num += cur.num;
} else {
prve.push({
userCouponId: cur.couponId,
num: 1,
num: cur.num,
});
}
return prve;
@@ -2804,10 +2852,8 @@ export default {
payAfter: this.payAfter,
orderld: this.order.orderId,
});
} else {
res = true;
}
await this.getOrderData();
}
await this.getOrderData(res?{orderId: res.id}:{orderId:this.createOrder.data.id});
res = true;
} catch (error) {}
if (!res) {
@@ -2968,7 +3014,8 @@ export default {
return;
}
if (key === "returnCart") {
this.refToggle("refReturnCart", true);
const selGoods=this.order.old.list[this.order.old.selIndex];
this.refToggle("refReturnCart", true,selGoods);
}
},
//选择挂单确认

View File

@@ -1,4 +1,5 @@
//计算打包费
import {isTui} from '../../order_manage/order_goods_util.js'
//计算打包费
export function returnPackFee(arr, isOld = true) {
if (isOld) {
return arr.reduce((a, b) => {
@@ -113,7 +114,7 @@ export function returnIsSeatFee(item) {
if (!item) {
return false
}
return item.productId == "-999"
return item.productId == "-999"?true:false;
}
/**
* 计算购物车会员优惠价格
@@ -125,11 +126,48 @@ export function returnVipDiscountPrice() {
//计算商品券优惠价格
export function returnProductCouponPrice(coup, goodsArr, vipUser) {
const item = goodsArr.find(v => v.productId == coup.proId);
if(!item){
return 0
}
const memberPrice = item.memberPrice ? item.memberPrice : item.price;
const price = item ? (vipUser.isVip ? memberPrice : item.price) : 0;
return price
}
//返回新的商品列表,过滤掉退菜的,退单的商品
export function returnNewGoodsList(arr) {
let goodsMap={}
return arr.filter(v => !isTui(v))
}
//查找购物车商品根据购物车商品数据返回商品券信息(抵扣价格以及是否满足可用需求)
export function returnProductCoupon(coup, goodsArr, vipUser) {
const newGoodsArr = returnNewGoodsList(goodsArr)
const item = newGoodsArr.find(v => v.productId == coup.proId);
if(!item){
return {...coup, discountAmount: 0,use:false}
}
const memberPrice = item.memberPrice ? item.memberPrice : item.price;
const price = item ? (vipUser.isVip ? memberPrice : item.price) : 0;
const canUse=!v.use?false:(discountAmount>0)
return { ...coup, discountAmount: price,use:canUse}
}
/**
* 根据购物车商品计算商品券抵扣价格以及是否满足可用需求
* 1.商品券对应商品数量大于购物车对应商品数量不可用
* 2.未在购物车找到相关商品不可用
* @param {*} coupArr
* @param {*} goodsArr
* @param {*} vipUser
* @returns
*/
export function returnProductAllCoup(coupArr, goodsArr, vipUser){
return coupArr.map((v) => {
return returnProductCoupon(v, goodsArr, vipUser)
})
}
//计算商品券总优惠价格
export function returnProductCouponAllPrice(coupArr, goodsArr, vipUser) {
if(coupArr.length == 0){
@@ -142,7 +180,7 @@ export function returnProductCouponAllPrice(coupArr, goodsArr, vipUser) {
}
//计算满减券总优惠价格
export function returnFullCutCouponAllPrice(coupArr) {
export function returnFullReductionCouponAllPrice(coupArr) {
if(coupArr.length == 0){
return 0;
}
@@ -155,6 +193,6 @@ export function returnFullCutCouponAllPrice(coupArr) {
//计算优惠券总价格
export function returnCouponAllPrice(coupArr, goodsArr, vipUser) {
const poductAllprice=returnProductCouponAllPrice(coupArr, goodsArr, vipUser)
const pointAllPrice=returnFullCutCouponAllPrice(coupArr)
return (poductAllprice+pointAllPrice).toFixed(2);
const pointAllPrice=returnFullReductionCouponAllPrice(coupArr)
return (poductAllprice*1+pointAllPrice*1).toFixed(2);
}