<template>
<div class="page">
<div class="card">
<div class="row head-row">
<div class="l">商品总额</div>
<div class="r">{{ totalPrice }}</div>
</div>
<!-- 优惠券 -->
<div class="row" v-if="discount.show">
<div class="l">折扣</div>
<div class="r">
{{ (totalPrice - discount.value) | plusMinus }}
<span class="close" @click="removeDiscount">
<my-image
class="img"
src="/static/icon/close2.png"
></my-image>
</span>
</div>
</div>
<!-- 支付方式 -->
<div class="row" v-if="curPayType">
<div class="l">{{ curPayType | payStr }}</div>
<div class="r">
-{{ payType[curPayType] }}
<span class="close" @click="closePayType">
<my-image
class="img"
src="/static/icon/close2.png"
></my-image>
</span>
</div>
</div>
<!-- 信息 -->
<div class="info" v-if="surplusPrice > 0 && !payErr">
<div class="tools">
<span @click="discountShow">折扣</span>
</div>
<div class="money">
<span>应收（元）</span>
<span class="price"> {{ surplusPrice }} </span>
</div>
</div>
<div class="success" v-if="surplusPrice <= 0 && !payErr">
<my-image
v-if="surplusPrice === 0"
class="img"
src="/static/icon/ok1.png"
></my-image>
<my-image
v-if="surplusPrice < 0"
class="img"
src="/static/icon/ok2.png"
></my-image>
<div class="text" :class="{ text2: surplusPrice < 0 }">
{{ successText }}
</div>
</div>
<div class="success" v-if="orderId && payErr">
<my-image class="img" src="/static/icon/error.png"></my-image>
<div class="text err-text">结算成功，支付失败，请重新支付</div>
</div>
</div>
<div
class="submit-btn"
v-if="!payErr && surplusPrice <= 0"
@click="submit"
>
结算
</div>
<div class="submit-btn" v-if="orderId && payErr" @click="payModal">
继续支付
</div>
<ul class="pay-list" v-if="surplusPrice > 0">
<li class="item" @click="showPay('1')">现金</li>
<li class="item" @click="showPay('2')">刷卡</li>
<li class="item" @click="showPay('3')">扫码</li>
</ul>
<div class="modal" v-if="cashVisibile">
<div class="bg" @click="cashHide"></div>
<div class="modal-body">
<div class="modal-head">
<div>现金</div>
<div @click="cashHide">
<my-image
class="close"
src="/static/icon/close3.png"
></my-image>
</div>
</div>
<div class="modal-main">
<div class="collection">
<section class="l">
<div class="name">实收</div>
<!-- <input type="d" class="digit"> -->
<div
class="input"
:class="{ focus: inputType === 3 }"
>
{{ payType[1] }}
</div>
<div class="surplus">剩余应收{{ actualPrice }}</div>
</section>
<section class="r">
<div class="name">找零</div>
<div class="input">{{ remnant }}</div>
</section>
</div>
</div>
<keyboard-package
@onInput="onInput($event, 'cash')"
@onDelete="onDelete('cash')"
@onConfirm="onConfirm('cash')"
></keyboard-package>
</div>
</div>
<!-- 折扣 -->
<div class="modal" v-if="discountVisibile">
<div class="bg" @click="discountVisibile = false"></div>
<div class="modal-body">
<div class="modal-head">
<div>折扣</div>
<div @click="discountVisibile = false">
<my-image
class="close"
src="/static/icon/close3.png"
></my-image>
</div>
</div>
<div class="modal-main">
<div class="collection">
<section class="l" @click="inputType = 0">
<div class="name">折后总额</div>
<!-- <input type="d" class="digit"> -->
<div
class="input"
:class="{ focus: inputType === 0 }"
>
{{ discount.value }}
</div>
</section>
<section class="r" @click="inputType = 1">
<div class="name">折扣率</div>
<div
class="input"
:class="{ focus: inputType === 1 }"
>
{{ discount.ratio }}
</div>
%
</section>
</div>
<ul
class="dis-list"
v-if="discountList && discountList.length"
>
<li v-for="item of discountList" :key="item">
<div class="box" @click="disItemClick(item)">
{{ item }}折
</div>
</li>
</ul>
</div>
<keyboard-package
:disableDot="inputType === 1"
@onInput="onInput($event, 'discount')"
@onDelete="onDelete('discount')"
@onConfirm="onConfirm('discount')"
></keyboard-package>
</div>
</div>
<uni-popup ref="popup" type="dialog">
<uni-popup-dialog-pay
mode="input"
:title="'付款码'"
:content="false"
:inputType="'number'"
:beforeClose="true"
placeholder="请输入付款码"
@confirm="popupConfirm"
@scan="seanCode"
@close="popupClose"
></uni-popup-dialog-pay>
</uni-popup>
</div>
</template>
<script>
import MyImage from "../../../components/image/index";
import KeyboardPackage from "../../../components/keyboard-package/keyboard-package";
import uniPopup from "../../../components/uni-popup/uni-popup";
import uniPopupDialogPay from "../../../components/uni-popup/uni-popup-dialog-pay";
export default {
name: "",
components: { MyImage, KeyboardPackage, uniPopup, uniPopupDialogPay },
filters: {
plusMinus(v) {
if (v > 0) {
return "-" + +v.toFixed(2);
} else {
v = 0 - v;
return "+" + v.toFixed(2);
}
},
payStr(v) {
switch (v) {
case "1":
return "现金";
case "2":
return "刷卡";
case "3":
return "扫码";
}
},
},
// 数据
data() {
return {
goods: [],
inputType: 0, // 0 折扣总额。 1 折扣率 3 现金
cashVisibile: false, // 输入现金显示
payShow: "",
curPayType: "",
payType: {
1: "", // 现金
2: "", // 刷卡
3: "", // 扫码
},
// 折扣
discountList: [], // 折扣列表
discountVisibile: false,
discount: {
show: false,
ratio: "",
value: "",
},
btnLoading: false,
orderId: "",
payErr: false,
};
},
onLoad() {
this.goods = this.$store.state.common.cashierGoodList;
if (!this.goods) {
this.router.back();
}
this.getConfig();
},
async onShow() {
this.$store.commit("common/update", {
closeSelectList: false,
});
},
// 函数
methods: {
getConfig() {
this.api
.get("/Store/GetStoreConfig", {
id: this.user.storeId,
})
.then((res) => {
let data = res.data;
if (data.orderConfig && data.orderConfig.discountList) {
this.discountList = data.orderConfig.discountList;
}
});
},
showPay(type) {
this.curPayType = type;
if (type === "1") {
// 现金
this.cashVisibile = true;
this.cacheCashVal = this.payType[1];
if (!this.payType[1]) {
this.payType[1] = this.actualPrice;
}
} else {
this.payType[type] = this.actualPrice;
}
},
onInput(v, name) {
switch (name) {
case "discount":
this.discount.show = true;
// 折扣
if (this.inputType === 0) {
this.discount.value += v;
this.computeDiscountRatio();
} else {
this.discount.ratio += v;
this.computeDiscountValue();
}
break;
case "cash":
// 现金
console.log(this.payType[1], v);
this.payType[1] = String(this.payType[1]) + v;
break;
default:
break;
}
},
onDelete(name) {
switch (name) {
case "discount":
// 折扣
if (this.inputType === 0) {
this.discount.value = this.discount.value.replace(
/.$/,
""
);
this.computeDiscountRatio();
if (this.discount.value === "") {
this.discount.show = false;
}
} else {
this.discount.ratio = String(
this.discount.ratio
).replace(/.$/, "");
if (this.discount.ratio === "") {
this.discount.show = false;
}
this.computeDiscountValue();
}
break;
case "cash":
// 现金
let str = String(this.payType[1]).replace(/.$/, "");
this.payType[1] = str;
break;
default:
break;
}
},
onConfirm(name) {
switch (name) {
case "discount":
// 折扣
this.discountVisibile = false;
break;
case "cash":
// 现金
if (this.payType[1] < this.actualPrice) {
this.fn.showToast("收款金额不能小于应收金额");
return;
}
this.cashVisibile = false;
break;
default:
break;
}
},
cashHide() {
if (this.cacheCashVal !== this.payType[1]) {
this.payType[1] = this.cacheCashVal;
}
this.cashVisibile = false;
},
// 删除折扣
removeDiscount() {
this.discount.show = false;
this.discount.ratio = "";
this.discount.value = "";
this.orderId = "";
this.payErr = false;
},
// 折扣显示
discountShow() {
this.discountVisibile = true;
this.inputType = 0;
},
// 计算折扣后值
computeDiscountValue() {
let ratioV = (
(this.totalPrice * this.discount.ratio) /
100
).toFixed(2);
this.discount.value = ratioV;
},
// 计算折扣率
computeDiscountRatio() {
this.discount.ratio = Math.round(
(this.discount.value / this.totalPrice) * 100
);
},
// 打折点击
disItemClick(val) {
this.discount.show = true;
this.discount.ratio = val;
this.computeDiscountValue();
},
closePayType() {
this.curPayType = "";
this.payErr = false;
},
submit() {
if (this.btnLoading) {
return;
}
let sendData = {
totalAmount: parseInt(this.totalPrice * 100),
payAmount: parseInt(this.payAmount * 100),
discount: this.discount.show
? Number(this.discount.ratio)
: 100, // 折扣
payMethod: Number(this.curPayType), // 支付方式，1-现金支付，2-刷卡支付，3-扫码
orderItems: [],
};
for (let item of this.goods) {
sendData.orderItems.push({
productId: item.id,
// skuId:item.id,
skuId: item._sku ? item._sku.skuId : "",
count: item.isWeightGood
? parseInt(item.select_num * 1000)
: item.select_num,
remark: "",
});
}
console.log(sendData);
this.submitLoading = true;
uni.showLoading({
title: "提交中...",
mask: true,
});
// 扫码失败后的现金支付
if (this.orderId && sendData.payMethod !== 3) {
this.api
.post(
"/Order/CashPay",
{
orderId: this.orderId,
payMethod: sendData.payMethod,
query: true,
},
{ pass: true }
)
.then((res) => {
this.btnLoading = false;
uni.hideLoading();
if (res.success) {
this.fn.showToast("保存成功");
this.$store.commit("common/update", {
closeSelectList: true,
});
this.router.back();
} else {
this.fn.showModal({
content: res.message,
showCancel: false,
});
}
});
} else {
this.api
.post("/Order/Settle", sendData, { pass: true })
.then((res) => {
this.btnLoading = false;
uni.hideLoading();
if (res.success) {
// 微信 支付宝支付
if (
this.curPayType === "4" ||
this.curPayType === "3"
) {
this.orderId = res.data;
this.payModal();
} else {
this.fn.showToast("保存成功");
this.$store.commit("common/update", {
closeSelectList: true,
});
this.router.back();
}
} else {
this.fn.showModal({
content: res.message,
showCancel: false,
});
}
});
}
},
payModal() {
this.$refs.popup.open({
type: "dialog",
});
},
seanCode(done) {
let self = this;
uni.scanCode({
scanType: "barCode",
success(res) {
console.log("扫码", res);
if (
res.scanType === "CODE_128" ||
res.scanType === "QR_CODE"
) {
uni.showLoading({
title: "支付中...",
mask: true,
});
self.api
.post(
"/order/BarcodePay",
{
query: true,
orderId: self.orderId,
barcode: res.result,
},
{ pass: true }
)
.then((res) => {
uni.hideLoading();
if (res.success) {
self.fn.showToast("支付成功");
done();
self.router.back();
self.$store.commit("common/update", {
closeSelectList: true,
});
} else {
self.fn.showToast(
"支付失败：" + res.message
);
self.payErr = true;
}
});
} else {
self.fn.showToast("扫码失败");
self.payErr = true;
}
},
fail(res) {
self.fn.showToast("扫码失败");
console.log("扫码失败：", res);
self.payErr = true;
},
});
},
popupConfirm(done, value) {
let self = this;
uni.showLoading({
title: "支付中...",
mask: true,
});
self.api
.post(
"/order/BarcodePay",
{
query: true,
orderId: self.orderId,
barcode: value,
},
{ pass: true }
)
.then((res) => {
uni.hideLoading();
if (res.success) {
self.fn.showToast("支付成功");
self.router.back();
this.$store.commit("common/update", {
closeSelectList: true,
});
} else {
self.fn.showToast("支付失败：" + res.message);
self.payErr = true;
}
});
},
popupClose(done) {
this.fn.showToast("扫码支付失败");
this.payErr = true;
done();
},
},
// 数据计算
computed: {
user() {
return this.$store.state.user.user;
},
// 总金额
totalPrice() {
let n = 0;
for (let item of this.goods) {
// 是否为称重
if (item.isWeightGood) {
let m = (item.price / 100) * item.select_num;
m = Number(m.toFixed(2));
n += m;
} else {
if (item._sku) {
n += (item._sku.price / 100) * item.select_num;
} else {
n += (item.price / 100) * item.select_num;
}
}
}
n = n.toFixed(2);
return parseFloat(n);
// return 100;
},
// 打折 优惠 后价格
actualPrice() {
let price = this.totalPrice;
if (this.discount.show) {
price = this.discount.value;
}
return price;
},
// 收款金额
payAmount() {
let v = 0;
console.log(this.payType, this.curPayType);
if (this.payType[this.curPayType]) {
v += Number(this.payType[this.curPayType]);
}
return v;
},
// 收款后还差多少
surplusPrice() {
let v = this.actualPrice;
if (this.payAmount) {
v = v - this.payAmount;
}
return v;
},
// 成功显示文字
successText() {
if (this.surplusPrice === 0) {
return `实收 ￥${this.actualPrice}`;
} else {
return `实收 ￥${this.actualPrice - this.surplusPrice},找零￥${
0 - this.surplusPrice
}`;
}
},
// 找零
remnant() {
if (
this.payType[1] &&
Number(this.payType[1]) > Number(this.actualPrice)
) {
let num = Number(this.payType[1]) - Number(this.actualPrice);
return num.toFixed(2);
} else {
return 0;
}
},
},
// 数据监听
watch: {},
};
</script>
<style lang="scss" scoped>
.page {
background-color: #0399ce;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding-bottom: px(40);
}
.card {
background-color: #fff;
margin: px(35);
border-radius: px(8);
.row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 px(30);
font-size: px(38);
height: px(110);
color: #333;
.close {
width: px(40);
height: px(40);
border-radius: 50%;
background-color: #d1d1d1;
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: px(20);
.img {
width: px(25);
height: px(25);
/deep/ img {
width: px(25);
height: px(25);
}
}
}
}
.head-row {
height: px(120);
font-size: px(44);
border-bottom: 1px solid #f1f1f1;
}
.row ~ .row {
border-top: 1px solid #f1f1f1;
}
.info {
padding: px(50);
display: flex;
justify-content: space-between;
align-items: center;
}
.tools {
display: flex;
align-items: center;
span {
border-radius: px(8);
height: px(66);
padding: 0 px(20);
background-color: #ebdcbb;
color: #4f3912;
font-size: px(34);
display: inline-flex;
justify-content: center;
align-items: center;
& ~ span {
margin-left: px(20);
}
}
}
.money {
display: flex;
flex-direction: column;
font-size: px(40);
.price {
font-size: px(74);
margin-top: px(15);
color: #049dd7;
}
}
}
.pay-list {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 px(35);
.item {
width: 32%;
height: px(150);
border-radius: px(8);
background-color: #fff;
font-size: px(40);
display: flex;
align-items: center;
justify-content: center;
padding: px(30);
box-sizing: border-box;
}
}
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
.bg {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
.modal-body {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
z-index: 1;
}
.modal-head {
height: px(130);
background-color: #f4f4f4;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 px(35);
.close {
width: px(40);
height: px(40);
/deep/ img {
width: px(40);
height: px(40);
}
}
}
.modal-main {
padding: px(35);
background-color: #fff;
}
}
.collection {
display: flex;
justify-content: space-between;
align-items: flex-start;
.l,
.r {
width: 49%;
}
.name {
font-size: px(38);
color: #666;
}
.input {
font-size: px(70);
color: #333;
margin-top: px(30);
min-height: px(80);
line-height: px(80);
position: relative;
display: inline-block;
min-width: 2px;
max-width: 100%;
word-break: break-all;
&.focus {
&::after {
content: "";
position: absolute;
right: -3px;
height: 1em;
bottom: 3px;
z-index: 1;
width: 1px;
background-color: #666;
animation: focusLine 0.8s linear alternate infinite;
}
}
}
.surplus {
font-size: px(38);
color: #666;
margin-top: px(30);
}
}
@keyframes focusLine {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.success {
height: px(500);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
.img {
width: px(140);
height: px(140);
/deep/ img {
width: px(140);
height: px(140);
}
}
.text {
margin-top: px(40);
font-size: px(50);
text-align: center;
color: #06cd58;
}
.text2 {
color: #3c9ec5;
}
}
.submit-btn {
height: px(120);
margin: 0 px(35);
border-radius: px(8);
background-color: #fff;
color: #3c9ec5;
font-size: px(40);
display: flex;
justify-content: center;
align-items: center;
}
.dis-list {
display: flex;
background-color: #eee;
flex-wrap: wrap;
padding: px(20) px(10) px(1);
margin: px(30) px(-35) 0;
li {
width: 25%;
padding: 0 px(10);
margin-bottom: px(20);
}
.box {
display: flex;
align-items: center;
justify-content: center;
height: px(90);
border-radius: px(8);
background-color: #fff;
}
}
.err-text {
color: #f00 !important;
}
</style>