czg_team/cashier-web
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 代客下单优惠券更新，挂账更新

Browse Source
This commit is contained in:
YeMingfei666
2025-03-06 11:27:01 +08:00
parent ed9a3335c8
commit dda4db24e0
22 changed files with 1219 additions and 300 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/views/tool/Instead/components/choose-user.vue
View File

@@ -9,8 +9,8 @@
<el-form-item>
<div class="flex gap-20">
<el-button type="primary" @click="getTableData" size="medium">搜索</el-button>
<el-button @click="noChooseUser" size="medium">不选择用户</el-button>
<el-button type="primary" @click="getTableData">搜索</el-button>
<el-button @click="noChooseUser">不选择用户</el-button>
</div>
</el-form-item>
</el-form>
@@ -49,7 +49,7 @@
<el-table-column label="操作" width="90" fixed="right">
<template v-slot="scope">
<el-button type="primary" size="mini" @click="choose(scope.row)">选择</el-button>
<el-button type="primary" size="small" @click="choose(scope.row)">选择</el-button>
</template>
</el-table-column>
</el-table>

230
src/views/tool/Instead/components/order.vue
View File

@@ -31,7 +31,15 @@
<div class="score">
<div class="u-flex u-col-center u-m-t-10">
<span class="u-font-14 font-bold u-m-r-20">积分抵扣</span>
<el-radio-group v-model="score.sel" size="small" class="">
<el-radio-group
:disabled="!pointsRes.usable"
v-model="score.sel"
size="small"
class=""
>
<el-radio :value="-1">
<span class="u-font-14">不使用</span>
</el-radio>
<el-radio :value="0">
<span class="u-font-14">全部抵扣</span>
</el-radio>
@@ -39,10 +47,27 @@
<span class="u-font-14">部分抵扣</span>
</el-radio>
</el-radio-group>
<el-input-number
class="u-m-l-10"
v-if="score.sel == 1"
v-model="usePointsNumber"
step-strictly
placeholder="请输入积分抵扣数量"
:min="pointsRes.minDeductionPoints"
:max="pointsRes.maxUsablePoints"
@change="pointsToMoney"
></el-input-number>
</div>
<p class="u-font-14 color-666 u-m-t-10">
<p
class="u-font-14 color-666 u-m-t-10"
v-if="pointsRes.unusableReason && !pointsRes.usable"
>
<span class="color-red">*</span>
<span>积分不足或小于最低使用门槛1</span>
<span>{{ pointsRes.unusableReason }}</span>
</p>
<p class="u-font-14 color-666 u-m-t-10" v-else>
<span class="color-red">*</span>
<span>{{ pointsRes.equivalentPoints }}积分等于1元</span>
</p>
</div>
<div class="u-flex u-col-center u-m-t-20 no-wrap">
@@ -60,6 +85,51 @@
<el-icon><ArrowDown /></el-icon>
</div>
</div>
<div class="u-m-t-20" 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="商品信息" width="120">
<template v-slot="scope">
<div class="u-flex" v-if="scope.row.type == 2">
<div class="u-flex">
<el-image
:src="scope.row.productImg"
fit="cover"
style="width: 40px; height: 40px"
:preview-src-list="[scope.row.productImg]"
></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 prop="discountAmount" label="抵扣">
<template v-slot="scope">
<span class="color-red" v-if="scope.row.type == 1">
￥{{ scope.row.discountAmount }}
</span>
<span class="color-red" v-if="scope.row.type == 2">
￥{{ returnProDiscount(scope.row, scope.row.index) }}
</span>
</template>
</el-table-column>
<el-table-column prop="useRestrictions" label="">
<template v-slot="scope">
<el-button type="danger" size="small" @click="delQuan(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
</div>
@@ -105,12 +175,16 @@
<span class="u-m-l-10 value">￥{{ carts.payMoney }}</span>
</div>
<div class="u-flex u-m-b-10 u-row-between">
<span class="title">优惠券</span>
<span class="u-m-l-10 value">￥{{ coupDiscount }}</span>
<span class="title">商品优惠券</span>
<span class="u-m-l-10 value">￥{{ productCouponDiscountAmount }}</span>
</div>
<div class="u-flex u-m-b-10 u-row-between">
<span class="title">满减优惠券</span>
<span class="u-m-l-10 value">￥{{ fullCouponDiscountAmount }}</span>
</div>
<div class="u-flex u-m-b-10 u-row-between">
<span class="title">积分抵扣</span>
<span class="u-m-l-10 value">-￥{{ orderInfo.pointsDiscountAmount || 0 }}</span>
<span class="u-m-l-10 value">-￥{{ pointsDiscountAmount }}</span>
</div>
<div class="u-flex u-m-b-10 u-row-between">
<span class="title">整单改价</span>
@@ -118,7 +192,7 @@
</div>
<div class="u-flex u-m-b-10 u-row-between">
<span class="title">抹零</span>
<span class="u-m-l-10 value">-￥{{ orderInfo.pointsDiscountAmount || 0 }}</span>
<span class="u-m-l-10 value">-￥{{ 0 }}</span>
</div>
<div class="u-flex u-m-b-10 u-row-between">
<span class="title">应付金额</span>
@@ -127,20 +201,17 @@
</div>
</div>
<!-- 扫码 -->
<scanPay
ref="refScanPay"
:order="orderInfo"
@paySuccess="paySuccess"
@confirm="refScanPayConfirm"
></scanPay>
<scanPay ref="refScanPay" :order="orderInfo" @confirm="refScanPayConfirm"></scanPay>
<!-- 打折 -->
<discount ref="refDiscount" @confirm="discountConfirm"></discount>
<!-- 优惠券 -->
<popup-coupon ref="refCoupon" @confirm="refCouponConfirm"></popup-coupon>
<popup-coupon ref="refCoupon" :user="user" @confirm="refCouponConfirm"></popup-coupon>
</div>
</template>
<script setup>
import * as quanUtil from "../quan_util.js";
import { useCartsStore } from "@/store/modules/carts";
const carts = useCartsStore();
@@ -154,10 +225,48 @@ import discount from "./discount.vue";
import { ElLoading } from "element-plus";
import { ElMessage, ElMessageBox } from "element-plus";
//商品列表
let goodsArr = [];
//优惠券
let $goodsPayPriceMap = {};
const refCoupon = ref();
let quansSelArr = ref([]);
function openCoupon() {
refCoupon.value.open();
refCoupon.value.open(carts.payMoney, props.orderInfo);
}
//返回商品券抵扣金额
function returnProDiscount(row) {
//相同商品抵扣券数组
const arr = quansSelArr.value.filter((v) => v.type == 2 && v.proId == row.proId);
console.log(arr);
const index = arr.findIndex((v) => v.id == row.id);
const item = goodsArr.find((v) => v.productId == row.proId);
if (index != -1) {
const n = quanUtil.returnProductCoupAllPrice(
$goodsPayPriceMap[row.proId],
index,
row.num,
props.user.id && props.user.isVip
);
return n.toFixed(2);
} else {
return 0;
}
}
function refCouponConfirm(e, goodsPayPriceMap, goodsList) {
goodsArr = goodsList;
usePointsNumber.value = 0;
pointsDiscountAmount.value = 0;
score.sel = -1;
quansSelArr.value = e;
$goodsPayPriceMap = goodsPayPriceMap;
}
function delQuan(row) {
const index = quansSelArr.value.findIndex((v) => v.id == row.id);
if (index != -1) {
quansSelArr.value.splice(index, 1);
}
}
function couponChange(data) {}
@@ -172,7 +281,7 @@ function discountConfirm(e) {
Object.assign(checkOrderPay, e);
if (e.discount) {
checkOrderPay.discountAmount =
carts.payMoney - (carts.payMoney * (e.discount / 100).toFixed(2)).toFixed(2);
carts.payMoney - ((carts.payMoney * (100 - e.discount)) / 100).toFixed(2);
} else {
checkOrderPay.discount = 0;
}
@@ -218,16 +327,43 @@ watch(
);
//002-获取订单可用积分及抵扣金额（支付页面使用）
function pointsInit() {
if (!props.user.id) {
const pointsRes = ref({ usable: false, maxUsablePoints: 0, minDeductionPoints: 0 });
const usePointsNumber = ref(0);
const orderAmountOrderAmount = computed(() => {
return (carts.payMoney - checkOrderPay.discountAmount).toFixed(2);
});
const pointsDiscountAmount = ref(0);
watch(
() => orderAmountOrderAmount.value,
(newval) => {
pointsInit();
}
);
async function pointsInit() {
if (!props.user.id || score.sel == -1) {
return;
}
PointsApi.calcOrderUsablePoints({
const res = await PointsApi.calcOrderUsablePoints({
userId: props.user.id,
orderAmount: (carts.payMoney - checkOrderPay.discountAmount).toFixed(2),
orderAmount: currentpayMoney.value - pointsDiscountAmount.value,
});
pointsRes.value = res;
usePointsNumber.value = res.usable ? res.maxUsablePoints : 0;
if (res.usable) {
pointsToMoney();
}
return res;
}
// 根据积分计算可抵扣金额
async function pointsToMoney() {
const res = await PointsApi.calcPointsToMoney({
userId: props.user.id,
orderAmount: currentpayMoney.value - pointsDiscountAmount.value,
points: usePointsNumber.value,
});
pointsDiscountAmount.value = res;
}
const emits = defineEmits(["chooseUser", "paysuccess"]);
function chooseUser() {
emits("chooseUser");
@@ -240,7 +376,7 @@ const coupDiscount = computed(() => {
}
return total.toFixed(2);
});
const score = ref({
const score = reactive({
list: [],
sel: 0,
});
@@ -249,6 +385,18 @@ const payTypes = reactive({
list: [],
sel: 0,
});
watch(
() => score.sel,
(newval) => {
console.log(newval);
if (newval == -1) {
usePointsNumber.value = 0;
pointsDiscountAmount.value = 0;
} else {
pointsInit();
}
}
);
function canUsePayType(item) {
if (currentpayMoney.value * 1 == 0) {
return item.payType == "cash" ? false : true;
@@ -278,16 +426,16 @@ function returnPayParams() {
vipPrice: props.user.id && props.user.isVip ? 1 : 0,
orderId: props.orderInfo.id,
// discountRatio: (checkOrderPay.discount / 100).toFixed(2),
discountRatio: 0,
discountRatio: checkOrderPay.discount ? checkOrderPay.discount : 0,
seatNum: props.orderInfo.seatNum,
originAmount: carts.payMoney * 1,
discountAmount: checkOrderPay.discountAmount * 1,
productCouponDiscountAmount: props.orderInfo.productCouponDiscountAmount || 0,
discountAmount: !checkOrderPay.discount ? checkOrderPay.discountAmount * 1 : 0,
productCouponDiscountAmount: 0,
orderAmount: currentpayMoney.value * 1,
roundAmount: props.orderInfo.roundAmount,
pointsDiscountAmount: props.orderInfo.pointsDiscountAmount || 0,
pointsNum: props.orderInfo.pointsNum,
fullCouponDiscountAmount: props.orderInfo.fullCouponDiscountAmount || 0,
pointsDiscountAmount: pointsDiscountAmount.value * 1,
pointsNum: usePointsNumber.value * 1,
fullCouponDiscountAmount: 0,
},
};
}
@@ -387,13 +535,34 @@ async function payOrder(payType, isScan) {
loading.close();
}
}
//满减优惠券
const fullCouponDiscountAmount = computed(() => {
return quansSelArr.value
.reduce((pre, cur) => {
return pre + cur.discountAmount;
}, 0)
.toFixed(2);
});
//商品券抵扣金额
const productCouponDiscountAmount = computed(() => {
let index = -1;
return quansSelArr.value.reduce((pre, cur) => {
index++;
return pre + returnProDiscount(cur, index) * 1;
}, 0);
});
//应付金额
const currentpayMoney = computed(() => {
if (checkOrderPay.discount) {
return (carts.payMoney * (checkOrderPay.discount / 100)).toFixed(2);
}
return (carts.payMoney - checkOrderPay.discountAmount).toFixed(2);
return (
carts.payMoney -
productCouponDiscountAmount.value -
fullCouponDiscountAmount.value -
checkOrderPay.discountAmount -
pointsDiscountAmount.value
).toFixed(2);
});
watch(
() => currentpayMoney.value,
@@ -405,7 +574,6 @@ watch(
);
onMounted(() => {
getPaytype();
pointsInit();
});
defineExpose({
nowPayClick,

240
src/views/tool/Instead/components/popup-coupon.vue
View File

@@ -14,23 +14,23 @@
<template v-slot="scope">
<el-checkbox
@change="fullReductionCouponClick(scope.row)"
:value="scope.row.id == fullReductionCouponSel.id"
:model-value="scope.row.id == fullReductionCouponSel.id"
></el-checkbox>
</template>
</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">
<!-- <el-table-column label="券类型" width="80">
<template v-slot="scope">
{{ scope.row.type == 1 ? "优惠券" : "商品券" }}
</template>
</el-table-column>
</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="discountAmount" label="限制" width="120">
<el-table-column prop="discountAmount" label="限制" width="180">
<template v-slot="scope">
<div class="u-flex">
<span>支付满</span>
@@ -52,31 +52,31 @@
:data="quans.productCoupon"
style="width: 100%"
>
<el-table-column>
<el-table-column width="80">
<template v-slot="scope">
<el-checkbox
@change="productCouponClick(scope.row)"
:value="scope.row.checked"
:model-value="scope.row.checked"
></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="120">
<el-table-column label="商品信息" width="220">
<template v-slot="scope">
<div class="u-flex">
<div class="u-flex">
<el-image
:src="scope.row.productCover"
:src="scope.row.productImg"
fit="cover"
style="width: 40px; height: 40px"
:preview-src-list="[scope.row.productCover]"
:preview-src-list="[scope.row.productImg]"
></el-image>
</div>
<div class="u-p-l-10">
<div class="">{{ scope.row.productName }}</div>
<div class="">x{{ scope.row.num || "" }}</div>
<div class="">x{{ scope.row.num || 1 }}</div>
</div>
</div>
</template>
@@ -88,11 +88,11 @@
</span>
</template>
</el-table-column> -->
<el-table-column label="券类型">
<!-- <el-table-column label="券类型">
<template v-slot="scope">
{{ scope.row.type == 1 ? "优惠券" : "商品券" }}
</template>
</el-table-column>
</el-table-column> -->
<el-table-column prop="useRestrictions" label="描述"></el-table-column>
<!-- <el-table-column prop="useRestrictions" label="是否可用">
<template v-slot="scope">
@@ -117,15 +117,15 @@
<div class="u-flex" v-if="scope.row.type == 2">
<div class="u-flex">
<el-image
:src="scope.row.productCover"
:src="scope.row.productImg"
fit="cover"
style="width: 40px; height: 40px"
:preview-src-list="[scope.row.productCover]"
:preview-src-list="[scope.row.productImg]"
></el-image>
</div>
<div class="u-p-l-10">
<div class="">{{ scope.row.productName }}</div>
<div class="">x{{ scope.row.num || "" }}</div>
<div class="">x{{ scope.row.num || 1 }}</div>
</div>
</div>
</template>
@@ -143,7 +143,7 @@
<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>
<el-button type="danger" size="small" @click="delQuan(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
@@ -166,14 +166,17 @@
</div>
</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>
<el-button size="large" @click="close">取消</el-button>
<el-button size="large" type="primary" @click="confirm">确定</el-button>
</div>
</div>
</div>
</el-dialog>
</template>
<script setup>
import couponApi from "@/api/account/coupon";
import { ElMessageBox } from "element-plus";
import * as quanUtil from "../quan_util.js";
const props = defineProps({
title: {
type: String,
@@ -183,7 +186,7 @@ const props = defineProps({
type: Array,
default: [],
},
vipUser: {
user: {
type: Object,
default: () => {
return {
@@ -196,7 +199,6 @@ function tabClick() {}
const state = reactive({
discount: 1,
orderPrice: 0,
fullReductionCouponSel: {
id: "",
},
@@ -216,36 +218,210 @@ const state = reactive({
const {
discount,
orderPrice,
fullReductionCouponSel,
quansSelArr,
quans,
currentRow,
multipleSelection,
fullReductionCouponSelId,
activeName,
form,
show,
isSetProductCoup,
} = toRefs(state);
const AllCouponPrice = computed(() => {
return 0;
});
const payPrice = computed(() => {
return 0;
});
function open() {
let orderPrice = ref(0);
let $originFullReductionCoupon = [];
//可以抵扣的商品列表
let canDikouGoodsArr = [];
//商品数量从0到n每一个对应的价格
let $goodsPayPriceMap = {};
let goodsArr = [];
function open(money, orderInfo) {
let arr = [];
for (let i in orderInfo.detailMap) {
arr.push(...orderInfo.detailMap[i]);
}
goodsArr = arr;
$goodsPayPriceMap = quanUtil.returnGoodsPayPriceMap(goodsArr || []);
canDikouGoodsArr = quanUtil.returnNewGoodsList(goodsArr);
console.log(canDikouGoodsArr);
getcoup();
orderPrice.value = money;
show.value = true;
}
async function getcoup() {
const res = await couponApi.findCoupon({ shopUserId: props.user.id });
quans.value.fullReductionCoupon = res.filter(
(v) => v.type == 1 && orderPrice.value * 1 >= v.fullAmount * 1
);
quans.value.productCoupon = res
.filter((v) => v.type == 2 && canDikouGoodsArr.find((goods) => v.proId == goods.productId))
.map((v) => {
const findGoods = goodsArr.find((goods) => goods.productId == v.proId);
return {
...v,
productImg: findGoods ? findGoods.productImg : "",
productName: findGoods ? findGoods.productName : "",
};
});
}
function fullReductionCouponClick(row) {
if (row.id == fullReductionCouponSel.value.id) {
fullReductionCouponSel.value = { id: "" };
quansSelArr.value.splice(0, 1);
return;
}
const dikouQuan = quansSelArr.value[0];
fullReductionCouponSel.value = row;
if (dikouQuan && dikouQuan.type == 1) {
quansSelArr.value[0] = row;
} else {
quansSelArr.value.unshift(row);
}
if (!fullReductionCouponSel.value.id) {
return;
}
}
const AllCouponPrice = computed(() => {
return quanUtil.returnCouponAllPrice(quansSelArr.value, canDikouGoodsArr, props.user);
});
const payPrice = computed(() => {
return (orderPrice.value - AllCouponPrice.value).toFixed(2);
});
function productCouponClick(item) {
if (!item.use) {
return;
}
const hasSelNum = quansSelArr.value
.filter((v) => v.type == 2 && v.proId == item.proId)
.reduce((a, b) => {
return a + (b.num || 1);
}, 0);
console.log($goodsPayPriceMap[item.proId]);
const maxSelNum = $goodsPayPriceMap[item.proId].length;
const coupMaxUseNum = Math.min(item.num || 1, maxSelNum - hasSelNum);
const canUseNum = Math.min(maxSelNum, coupMaxUseNum);
console.log("maxSelNum", maxSelNum);
console.log("coupMaxUseNum", coupMaxUseNum);
console.log("canUseNum", canUseNum);
if (!item.checked && canUseNum <= 0) {
return ElMessage.error("购物车该商品券可使用最大数量为" + maxSelNum);
}
if (fullReductionCouponSel.value.id && !item.checked) {
const goodsQuan = quans.value.productCoupon.filter((v) => v.checked);
const fullReductionCoupon = fullReductionCouponSel.value.id
? [fullReductionCouponSel.value]
: [];
let coupArr = [...goodsQuan, { ...item, num: canUseNum }];
const payPrice =
orderPrice.value - quanUtil.returnCouponAllPrice(coupArr, canDikouGoodsArr, props.user);
console.log(payPrice);
if (payPrice <= 0) {
return ElMessageBox.confirm(
"选择该商品券后支付金额将为0，继续选择将取消选择的满减券",
"提示",
{
confirmButtonText: "继续选择",
cancelButtonText: "取消",
type: "warning",
}
)
.then(() => {
fullReductionCouponSel.value = {
id: "",
};
quansSelArr.value.splice(0, 1);
})
.catch(() => {});
}
if (fullReductionCouponSel.value.fullAmount > payPrice) {
ElMessageBox.confirm(
"选择该商品券后将不满足选择抵扣券的最低满减需求，继续选择将取消选择的满减券",
"提示",
{
confirmButtonText: "继续选择",
cancelButtonText: "取消",
type: "warning",
}
)
.then(() => {
fullReductionCouponSel.value = {
id: "",
};
})
.catch(() => {
item.checked = false;
const index = quansSelArr.value.findIndex((v) => v.id == item.id);
quansSelArr.value.splice(index, 1);
});
}
}
item.checked = !item.checked;
if (!item.checked) {
const index = quansSelArr.value.findIndex((v) => v.id == item.id);
quansSelArr.value.splice(index, 1);
} else {
quansSelArr.value.push({ ...item, num: canUseNum });
}
const CheckedArr = quans.value.productCoupon.filter((v) => v.checked);
if (CheckedArr.length <= 0) {
return quans.value.productCoupon.map((v) => {
v.use = true;
});
}
const noCheckedArr = quans.value.productCoupon.filter((v) => !v.checked);
noCheckedArr.map((v) => {
v.use = quanUtil.returnCoupCanUse(canDikouGoodsArr, v, CheckedArr);
});
}
//返回商品券抵扣金额
function returnProDiscount(row) {
//相同商品抵扣券数组
const arr = quansSelArr.value.filter((v) => v.type == 2 && v.proId == row.proId);
const index = arr.findIndex((v) => v.id == row.id);
const item = goodsArr.find((v) => v.productId == row.proId);
if (index != -1) {
const n = quanUtil.returnProductCoupAllPrice(
$goodsPayPriceMap[row.proId],
index,
row.num,
props.user.id && props.user.isVip
);
return n.toFixed(2);
} else {
return 0;
}
}
//删除选中的优惠券
function delQuan(row) {
const index = quansSelArr.value.findIndex((item) => item.id == row.id);
if (row.type == 2 && index != -1) {
quansSelArr.value.splice(index, 1);
const proIndex = quans.value.productCoupon.findIndex((v) => v.id == row.id);
quans.value.productCoupon[proIndex].checked = false;
}
if (row.type == 1 && index != -1) {
fullReductionCouponSel.value = { id: "" };
quansSelArr.value.splice(0, 1);
}
}
function close() {
show.value = false;
}
const emits = defineEmits(["confirm"]);
function confirm() {
emits("confirm");
function reset() {
quansSelArr.value = [];
fullReductionCouponSel.value = { id: "" };
}
function confirm() {
emits("confirm", [...quansSelArr.value], $goodsPayPriceMap, goodsArr);
close();
}
function reset() {}
defineExpose({
close,
open,