fix: 订单管理退款修改，台桌跳转代客下单页面
This commit is contained in:
175
src/views/tool/Instead/components/choose-guazhang.vue
Normal file
175
src/views/tool/Instead/components/choose-guazhang.vue
Normal file
@@ -0,0 +1,175 @@
|
||||
<template>
|
||||
<el-dialog title="选择挂账人" width="850px" v-model="show" top="20px">
|
||||
<div class="app-container">
|
||||
<div class="head-container filtration">
|
||||
<div class="r">
|
||||
<el-input
|
||||
v-model="tableData.keywords"
|
||||
placeholder="按挂账人或手机号"
|
||||
style="width: 138px"
|
||||
/>
|
||||
<!-- <el-select
|
||||
v-model="tableData.status"
|
||||
placeholder="全部状态"
|
||||
clearable
|
||||
style="width: 123px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select> -->
|
||||
<el-button type="primary" @click="getTableData()">查询</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="head-container content">
|
||||
<el-table v-loading="tableData.loading" :data="tableData.data" @cell-click="cellClick">
|
||||
<el-table-column label="ID" prop="id" />
|
||||
|
||||
<el-table-column label="挂账人" prop="debtor" />
|
||||
<el-table-column label="手机号" prop="mobile" />
|
||||
<el-table-column label="已挂账金额(元)" prop="owedAmount" />
|
||||
<el-table-column label="可用挂账额度(元)" prop="remainingAmount" />
|
||||
<el-table-column label="操作">
|
||||
<template v-slot="scope">
|
||||
<el-button type="text" @click="cellClick(scope.row)">选择</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-pagination
|
||||
:total="tableData.total"
|
||||
:current-page="tableData.page"
|
||||
:page-size="tableData.size"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@current-change="paginationChange"
|
||||
@size-change="sizeChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import creditApi from "@/api/order/credit";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
options: [
|
||||
{
|
||||
value: "1",
|
||||
label: "启用",
|
||||
},
|
||||
{
|
||||
value: "0",
|
||||
label: "停用",
|
||||
},
|
||||
],
|
||||
tableData: {
|
||||
keywords: "",
|
||||
status: "1",
|
||||
data: [],
|
||||
page: 1,
|
||||
size: 10,
|
||||
loading: false,
|
||||
total: 0,
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
// this.getTableData();
|
||||
},
|
||||
methods: {
|
||||
cellClick(row) {
|
||||
this.$emit("confirm", row);
|
||||
this.show = false;
|
||||
},
|
||||
open() {
|
||||
this.getTableData();
|
||||
this.show = true;
|
||||
},
|
||||
/**
|
||||
* 获取挂账人列表
|
||||
*/
|
||||
async getTableData() {
|
||||
this.tableData.loading = true;
|
||||
try {
|
||||
const res = await creditApi.getList({
|
||||
page: this.tableData.page,
|
||||
size: this.tableData.size,
|
||||
keywords: this.tableData.keywords,
|
||||
status: this.tableData.status,
|
||||
shopId: localStorage.getItem("shopId"),
|
||||
});
|
||||
this.tableData.loading = false;
|
||||
this.tableData.data = res.records;
|
||||
this.tableData.total = res.totalRow * 1;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 删除挂账人
|
||||
* @param id
|
||||
*/
|
||||
async delTableHandle(id) {
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const res = await delCreditBuyer(id);
|
||||
this.getTableData();
|
||||
},
|
||||
|
||||
/**
|
||||
* 操作
|
||||
*/
|
||||
openDialog(row, type) {
|
||||
if (type === "add") {
|
||||
this.$refs.creditAdd.show();
|
||||
} else if (type === "edit") {
|
||||
this.$refs.creditAdd.show(row);
|
||||
} else if (type === "repayment" && row.repaymentMethod === "total") {
|
||||
this.$refs.creditRepayment.show(row);
|
||||
} else if (type === "rePaymentRecord") {
|
||||
this.$refs.creditRepaymentRecord.show(row);
|
||||
}
|
||||
},
|
||||
|
||||
// 重置查询
|
||||
resetHandle() {
|
||||
this.page = 1;
|
||||
this.getTableData();
|
||||
},
|
||||
// 分页大小改变
|
||||
sizeChange(e) {
|
||||
this.tableData.size = e;
|
||||
this.getTableData();
|
||||
},
|
||||
// 分页回调
|
||||
paginationChange(e) {
|
||||
this.tableData.page = e;
|
||||
this.getTableData();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.title {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
}
|
||||
.filtration {
|
||||
overflow: hidden;
|
||||
.l {
|
||||
float: left;
|
||||
}
|
||||
.r {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -134,7 +134,9 @@
|
||||
</div>
|
||||
|
||||
<div class="u-m-t-30">
|
||||
<el-button size="large" @click="discountShow">整单打折/减免</el-button>
|
||||
<el-button size="large" @click="discountShow">
|
||||
{{ checkOrderPay.discount ? checkOrderPay.discount / 10 + "折" : "整单打折/减免" }}
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="u-m-t-30">
|
||||
<p class="u-font-16 font-bold u-m-r-20 font-bold u-flex">选择支付方式</p>
|
||||
@@ -157,6 +159,10 @@
|
||||
</div>
|
||||
<div class="right">
|
||||
<h3>账单明细</h3>
|
||||
<p class="u-font-12 u-m-b-20">
|
||||
<span class="color-red">*</span>
|
||||
<span class="color-red">餐位费和打包费不参与折扣和满减</span>
|
||||
</p>
|
||||
<div class="order-info">
|
||||
<div class="u-flex u-m-b-10 u-row-between">
|
||||
<span class="title">订单号：</span>
|
||||
@@ -164,15 +170,15 @@
|
||||
</div>
|
||||
<div class="u-flex u-m-b-10 u-row-between">
|
||||
<span class="title">餐位费</span>
|
||||
<span class="u-m-l-10 value">￥{{ orderInfo.seatAmount }}</span>
|
||||
<span class="u-m-l-10 value">￥{{ seatAmount }}</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.packFee }}</span>
|
||||
<span class="u-m-l-10 value">￥{{ carts.packFee }}</span>
|
||||
</div>
|
||||
<div class="u-flex u-m-b-10 u-row-between">
|
||||
<span class="title">总价</span>
|
||||
<span class="u-m-l-10 value">￥{{ carts.payMoney }}</span>
|
||||
<span class="title">商品订单金额</span>
|
||||
<span class="u-m-l-10 value">￥{{ carts.goodsTotal }}</span>
|
||||
</div>
|
||||
<div class="u-flex u-m-b-10 u-row-between">
|
||||
<span class="title">商品优惠券</span>
|
||||
@@ -182,20 +188,25 @@
|
||||
<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">-￥{{ discountAmount }}</span>
|
||||
</div>
|
||||
<div class="u-flex u-m-b-10 u-row-between">
|
||||
<span class="title">积分抵扣</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>
|
||||
<span class="u-m-l-10 value">-￥{{ checkOrderPay.discountAmount || 0 }}</span>
|
||||
</div>
|
||||
<div class="u-flex u-m-b-10 u-row-between">
|
||||
<span class="title">抹零</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>
|
||||
<span class="title">总价(商品订单金额-商品优惠券-满减券-整单改价-积分抵扣)</span>
|
||||
<span class="u-m-l-10 value color-red">￥{{ totalMoney }}</span>
|
||||
</div>
|
||||
<div class="u-flex u-m-b-10 u-row-between">
|
||||
<span class="title">应付金额(总价+客座费+打包费)</span>
|
||||
<span class="u-m-l-10 value price">￥{{ currentpayMoney }}</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -206,6 +217,12 @@
|
||||
<discount ref="refDiscount" @confirm="discountConfirm"></discount>
|
||||
<!-- 优惠券 -->
|
||||
<popup-coupon ref="refCoupon" :user="user" @confirm="refCouponConfirm"></popup-coupon>
|
||||
<!-- 挂账 -->
|
||||
<chooseGuaZahng
|
||||
ref="refGuaZhang"
|
||||
:payMoney="currentpayMoney"
|
||||
@confirm="refGuaZhangConfirm"
|
||||
></chooseGuaZahng>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -213,6 +230,9 @@
|
||||
import * as quanUtil from "../quan_util.js";
|
||||
|
||||
import { useCartsStore } from "@/store/modules/carts";
|
||||
import { useUserStore } from "@/store/modules/user";
|
||||
import chooseGuaZahng from "./popup-choose-guazhang.vue";
|
||||
const shopUser = useUserStore();
|
||||
const carts = useCartsStore();
|
||||
|
||||
import popupCoupon from "./popup-coupon.vue";
|
||||
@@ -225,6 +245,14 @@ import discount from "./discount.vue";
|
||||
import { ElLoading } from "element-plus";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
|
||||
//挂账
|
||||
const refGuaZhang = ref();
|
||||
function refGuaZhangConfirm(guazhangRen) {
|
||||
payOrder("arrears", true, guazhangRen);
|
||||
}
|
||||
function refGuaZhangShow() {
|
||||
refGuaZhang.value.open();
|
||||
}
|
||||
//商品列表
|
||||
let goodsArr = [];
|
||||
|
||||
@@ -233,7 +261,7 @@ let $goodsPayPriceMap = {};
|
||||
const refCoupon = ref();
|
||||
let quansSelArr = ref([]);
|
||||
function openCoupon() {
|
||||
refCoupon.value.open(carts.payMoney, props.orderInfo);
|
||||
refCoupon.value.open(carts.goodsTotal, props.orderInfo);
|
||||
}
|
||||
//返回商品券抵扣金额
|
||||
function returnProDiscount(row) {
|
||||
@@ -280,15 +308,14 @@ function discountConfirm(e) {
|
||||
console.log(e);
|
||||
Object.assign(checkOrderPay, e);
|
||||
if (e.discount) {
|
||||
checkOrderPay.discountAmount =
|
||||
carts.payMoney - ((carts.payMoney * (100 - e.discount)) / 100).toFixed(2);
|
||||
checkOrderPay.discountAmount = carts.goodsTotal - (carts.goodsTotal * (100 - e.discount)) / 100;
|
||||
} else {
|
||||
checkOrderPay.discount = 0;
|
||||
}
|
||||
}
|
||||
function discountShow(e) {
|
||||
refDiscount.value.open({
|
||||
amount: carts.payMoney,
|
||||
amount: carts.goodsTotal - productCouponDiscountAmount.value,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -303,12 +330,24 @@ const props = defineProps({
|
||||
return { id: "" };
|
||||
},
|
||||
},
|
||||
perpole: {
|
||||
type: [Number, String],
|
||||
default: 0,
|
||||
},
|
||||
orderInfo: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
});
|
||||
|
||||
const seatAmount = computed(() => {
|
||||
if (shopUser.userInfo.isTableFee) {
|
||||
return "0.00";
|
||||
}
|
||||
if (props.perpole >= 1) {
|
||||
return (props.perpole * shopUser.userInfo.tableFee).toFixed(2);
|
||||
}
|
||||
return "0.00";
|
||||
});
|
||||
watch(
|
||||
() => props.user.id,
|
||||
(newval) => {
|
||||
@@ -327,10 +366,10 @@ watch(
|
||||
);
|
||||
|
||||
//002-获取订单可用积分及抵扣金额（支付页面使用）
|
||||
const pointsRes = ref({ usable: false, maxUsablePoints: 0, minDeductionPoints: 0 });
|
||||
const pointsRes = ref({ usable: true, maxUsablePoints: 0, minDeductionPoints: 0 });
|
||||
const usePointsNumber = ref(0);
|
||||
const orderAmountOrderAmount = computed(() => {
|
||||
return (carts.payMoney - checkOrderPay.discountAmount).toFixed(2);
|
||||
return (carts.goodsTotal - checkOrderPay.discountAmount).toFixed(2);
|
||||
});
|
||||
const pointsDiscountAmount = ref(0);
|
||||
watch(
|
||||
@@ -352,6 +391,8 @@ async function pointsInit() {
|
||||
usePointsNumber.value = res.usable ? res.maxUsablePoints : 0;
|
||||
if (res.usable) {
|
||||
pointsToMoney();
|
||||
} else {
|
||||
score.sel = -1;
|
||||
}
|
||||
return res;
|
||||
}
|
||||
@@ -378,7 +419,7 @@ const coupDiscount = computed(() => {
|
||||
});
|
||||
const score = reactive({
|
||||
list: [],
|
||||
sel: 0,
|
||||
sel: -1,
|
||||
});
|
||||
|
||||
const payTypes = reactive({
|
||||
@@ -426,16 +467,18 @@ function returnPayParams() {
|
||||
vipPrice: props.user.id && props.user.isVip ? 1 : 0,
|
||||
orderId: props.orderInfo.id,
|
||||
// discountRatio: (checkOrderPay.discount / 100).toFixed(2),
|
||||
discountRatio: checkOrderPay.discount ? checkOrderPay.discount : 0,
|
||||
seatNum: props.orderInfo.seatNum,
|
||||
originAmount: carts.payMoney * 1,
|
||||
discountAmount: !checkOrderPay.discount ? checkOrderPay.discountAmount * 1 : 0,
|
||||
productCouponDiscountAmount: 0,
|
||||
discountRatio: 0,
|
||||
seatNum: props.perpole * 1,
|
||||
originAmount: carts.payMoney * 1 - productCouponDiscountAmount.value + seatAmount.value * 1,
|
||||
discountAmount: discountAmount.value,
|
||||
productCouponDiscountAmount: productCouponDiscountAmount.value * 1,
|
||||
orderAmount: currentpayMoney.value * 1,
|
||||
roundAmount: props.orderInfo.roundAmount,
|
||||
pointsDiscountAmount: pointsDiscountAmount.value * 1,
|
||||
pointsNum: usePointsNumber.value * 1,
|
||||
fullCouponDiscountAmount: 0,
|
||||
fullCouponDiscountAmount: fullCouponDiscountAmount.value * 1,
|
||||
couponList: quansSelArr.value.map((v) => v.id),
|
||||
userId: props.user.userId || "",
|
||||
},
|
||||
};
|
||||
}
|
||||
@@ -451,6 +494,10 @@ function refScanPayOpen(payType) {
|
||||
if (payType == "scanCode") {
|
||||
return refScanPay.value.open(returnPayParams(), "scanCode");
|
||||
}
|
||||
if (payType == "arrears") {
|
||||
refGuaZhangShow();
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
async function getPaytype() {
|
||||
@@ -478,6 +525,7 @@ function nowPayClick(payType) {
|
||||
payOrder(payType);
|
||||
return;
|
||||
}
|
||||
|
||||
refScanPayOpen(payType);
|
||||
}
|
||||
|
||||
@@ -490,7 +538,7 @@ function refScanPayConfirm($authCode, isScan) {
|
||||
|
||||
let payTimer = null;
|
||||
//是否是正扫
|
||||
async function payOrder(payType, isScan) {
|
||||
async function payOrder(payType, isScan, guazhangren) {
|
||||
clearTimeout(payTimer);
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
@@ -522,6 +570,9 @@ async function payOrder(payType, isScan) {
|
||||
shopUserId: props.user.id,
|
||||
});
|
||||
}
|
||||
if (payType == "arrears") {
|
||||
res = await payApi.creditPay({ ...returnPayParams(), creditBuyerId: guazhangren.id });
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
clearTimeout(payTimer);
|
||||
@@ -535,6 +586,14 @@ async function payOrder(payType, isScan) {
|
||||
loading.close();
|
||||
}
|
||||
}
|
||||
//整单改价
|
||||
const discountAmount = computed(() => {
|
||||
const money = carts.goodsTotal - productCouponDiscountAmount.value;
|
||||
if (checkOrderPay.discount) {
|
||||
return ((money * (100 - checkOrderPay.discount)) / 100).toFixed(2);
|
||||
}
|
||||
return checkOrderPay.discountAmount;
|
||||
});
|
||||
//满减优惠券
|
||||
const fullCouponDiscountAmount = computed(() => {
|
||||
return quansSelArr.value
|
||||
@@ -551,19 +610,20 @@ const productCouponDiscountAmount = computed(() => {
|
||||
return pre + returnProDiscount(cur, index) * 1;
|
||||
}, 0);
|
||||
});
|
||||
//应付金额
|
||||
const currentpayMoney = computed(() => {
|
||||
if (checkOrderPay.discount) {
|
||||
return (carts.payMoney * (checkOrderPay.discount / 100)).toFixed(2);
|
||||
}
|
||||
//除开客座费，打包费总金额
|
||||
const totalMoney = computed(() => {
|
||||
return (
|
||||
carts.payMoney -
|
||||
carts.goodsTotal -
|
||||
productCouponDiscountAmount.value -
|
||||
discountAmount.value -
|
||||
fullCouponDiscountAmount.value -
|
||||
checkOrderPay.discountAmount -
|
||||
pointsDiscountAmount.value
|
||||
).toFixed(2);
|
||||
});
|
||||
//应付金额
|
||||
const currentpayMoney = computed(() => {
|
||||
return (totalMoney.value * 1 + carts.packFee * 1 + seatAmount.value * 1).toFixed(2);
|
||||
});
|
||||
watch(
|
||||
() => currentpayMoney.value,
|
||||
(newval) => {
|
||||
|
||||
353
src/views/tool/Instead/components/popup-choose-guazhang.vue
Normal file
353
src/views/tool/Instead/components/popup-choose-guazhang.vue
Normal file
@@ -0,0 +1,353 @@
|
||||
<template>
|
||||
<div class="select_desk">
|
||||
<el-dialog width="410px" title="挂账" v-model="show" @close="reset">
|
||||
<div class="guazhangren u-flex u-row-between" @click="guazhangShow">
|
||||
<template v-if="guazhangRen">
|
||||
<div>
|
||||
<div class="name">{{ guazhangRen.debtor }}/{{ guazhangRen.position }}</div>
|
||||
<div class="u-m-t-6">手机号：{{ guazhangRen.mobile }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="">可用额度</div>
|
||||
<div class="u-m-t-6">{{ guazhangRen.remainingAmount }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="color-999">选择挂账人/单位</div>
|
||||
<span class="el-icon-caret-bottom"></span>
|
||||
</template>
|
||||
</div>
|
||||
<div class="select_desk_dialog u-p-b-20">
|
||||
<div class="u-p-l-20 u-p-r-20 u-flex w-full u-relative box_status">
|
||||
<div class="font-bold u-font-32">¥</div>
|
||||
<el-input
|
||||
placeholder="请输入挂账金额"
|
||||
v-model="number"
|
||||
@input="inputNumber"
|
||||
@change="inputChange"
|
||||
@focus="inputFocus"
|
||||
@blur="inputBlur"
|
||||
:type="focus ? 'number' : 'text'"
|
||||
></el-input>
|
||||
<div class="zhezhao"></div>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="confirm_btns">
|
||||
<el-button size="large" @click="close">取消</el-button>
|
||||
<el-button type="primary" size="large" @click="confirm">确定</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<choose-guazhang ref="refChooseGuazhang" @confirm="chooseGuazhangConfirm"></choose-guazhang>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ElMessage } from "element-plus";
|
||||
import keyBoard from "./keyboard.vue";
|
||||
import chooseGuazhang from "./choose-guazhang.vue";
|
||||
export default {
|
||||
components: { keyBoard, chooseGuazhang },
|
||||
props: {
|
||||
payMoney: {
|
||||
type: [Number, String],
|
||||
default: 0,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
guazhangRen: "",
|
||||
number: "",
|
||||
show: false,
|
||||
hasOpen: false,
|
||||
loading: false,
|
||||
tips: "",
|
||||
focus: false,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
number(newval) {
|
||||
console.log(newval);
|
||||
if (newval * 1 > this.payMoney * 1) {
|
||||
this.number = this.payMoney;
|
||||
this.number = newval;
|
||||
}
|
||||
if (newval * 1 > this.payMoney * 1) {
|
||||
this.tips = "已超出未结账金额";
|
||||
} else {
|
||||
const shengyu = this.payMoney - this.number;
|
||||
|
||||
this.tips = shengyu > 0 ? "还需额外支付" + shengyu.toFixed(2) + "元" : "";
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
inputFocus() {
|
||||
this.focus = true;
|
||||
},
|
||||
inputBlur() {
|
||||
this.focus = false;
|
||||
},
|
||||
chooseGuazhangConfirm(e) {
|
||||
this.guazhangRen = e;
|
||||
},
|
||||
guazhangShow() {
|
||||
this.$refs.refChooseGuazhang.open();
|
||||
},
|
||||
|
||||
inputNumber(e) {
|
||||
console.log("inputNumber");
|
||||
if (e * 1 > this.payMoney * 1) {
|
||||
this.tips = "已超出未结账金额";
|
||||
}
|
||||
},
|
||||
inputChange(e) {
|
||||
if (e * 1 > this.payMoney * 1) {
|
||||
this.tips = "已超出未结账金额";
|
||||
}
|
||||
console.log(e);
|
||||
},
|
||||
clear(e) {
|
||||
console.log(e);
|
||||
this.number = "";
|
||||
},
|
||||
confirm() {
|
||||
if (this.number * 1 > this.payMoney * 1) {
|
||||
return ElMessage("已超出未结账金额");
|
||||
}
|
||||
if (this.number * 1 <= 0) {
|
||||
return ElMessage("支付金额不正确");
|
||||
}
|
||||
if (!this.guazhangRen) {
|
||||
return ElMessage("请选择挂账人");
|
||||
}
|
||||
this.$emit("confirm", this.guazhangRen, this.number);
|
||||
this.close();
|
||||
},
|
||||
open() {
|
||||
console.log(this.payMoney);
|
||||
this.number = this.payMoney * 1;
|
||||
this.show = true;
|
||||
this.tips = "还需额外支付" + this.payMoney + "元";
|
||||
},
|
||||
reset() {
|
||||
this.number = "";
|
||||
this.guazhangRen = "";
|
||||
},
|
||||
close() {
|
||||
this.show = false;
|
||||
this.number = "";
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-button) {
|
||||
padding: 12px 20px;
|
||||
}
|
||||
.box_status {
|
||||
margin-bottom: 0;
|
||||
margin-top: 30px;
|
||||
width: 370px;
|
||||
height: 58px;
|
||||
background: #fff;
|
||||
border: 1px solid #dcdfe6;
|
||||
}
|
||||
:deep(.el-input__wrapper) {
|
||||
box-shadow: none;
|
||||
}
|
||||
:deep(.select_desk_dialog .el-input__inner) {
|
||||
border: none;
|
||||
font-size: 32px;
|
||||
}
|
||||
:deep(.el-input__inner::-webkit-inner-spin-button) {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
:deep(.el-input__inner::-webkit-outer-spin-button) {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
:deep(.el-button--success) {
|
||||
border-color: #22bf64;
|
||||
background-color: #22bf64;
|
||||
}
|
||||
.select_desk .btn {
|
||||
height: 34px;
|
||||
}
|
||||
.tags {
|
||||
font-size: 16px;
|
||||
&.using {
|
||||
color: rgb(234, 64, 37);
|
||||
}
|
||||
&.wait {
|
||||
color: rgb(252, 236, 79);
|
||||
}
|
||||
&.idle {
|
||||
color: rgb(137, 234, 71);
|
||||
}
|
||||
&.closed {
|
||||
color: rgb(221, 221, 221);
|
||||
filter: grayscale(1);
|
||||
}
|
||||
}
|
||||
:deep(.inputs .el-input__inner) {
|
||||
border-color: transparent !important;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
letter-spacing: 1.25px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.select_desk .select_desk_dialog {
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.select_desk .select_desk_dialog .nav {
|
||||
width: 286px;
|
||||
height: 38px;
|
||||
background: #dcf0e8;
|
||||
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.select_desk .select_desk_dialog .nav .li,
|
||||
.select_desk .select_desk_dialog .nav {
|
||||
border-radius: 4px;
|
||||
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.select_desk .select_desk_dialog .nav .li {
|
||||
width: 140px;
|
||||
height: 34px;
|
||||
color: #0fc161;
|
||||
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.select_desk .select_desk_dialog .nav .lion {
|
||||
background: #0fc161;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.select_desk .select_desk_dialog .inputs {
|
||||
width: 370px;
|
||||
line-height: 54px;
|
||||
margin-top: 24px;
|
||||
height: 54px;
|
||||
margin-bottom: 20px;
|
||||
background: #fff;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
letter-spacing: 1.25px;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
position: relative;
|
||||
}
|
||||
.zhezhao {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
.select_desk .select_desk_dialog .inputs .close {
|
||||
color: #aaa;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
line-height: 30px;
|
||||
top: 50%;
|
||||
margin-top: -15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.guazhangren {
|
||||
padding: 12px 10px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
margin-top: 20px;
|
||||
min-height: 58px;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
.name {
|
||||
color: #3f9eff;
|
||||
}
|
||||
}
|
||||
|
||||
.select_desk .select_desk_dialog .keyboard {
|
||||
display: flex;
|
||||
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
border-right: 1px solid #dcdfe6;
|
||||
border-bottom: 1px solid #dcdfe6;
|
||||
}
|
||||
|
||||
.select_desk .select_desk_dialog .keyboard .li {
|
||||
height: 60px;
|
||||
width: 33.333%;
|
||||
|
||||
display: flex;
|
||||
|
||||
justify-content: center;
|
||||
|
||||
align-items: center;
|
||||
font-size: 24px;
|
||||
color: #212121;
|
||||
cursor: pointer;
|
||||
|
||||
user-select: none;
|
||||
border-left: 1px solid #dcdfe6;
|
||||
border-top: 1px solid #dcdfe6;
|
||||
|
||||
transition: all 0.1s;
|
||||
}
|
||||
|
||||
.select_desk .select_desk_dialog .keyboard .li:hover {
|
||||
background: #dcdfe6;
|
||||
}
|
||||
|
||||
.select_desk .select_desk_dialog .keyboard .li .icon {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.select_desk .select_desk_dialog .keyboard .confirm {
|
||||
height: 140px;
|
||||
background: #ff9f2e;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.select_desk .select_desk_dialog .keyboard .confirm:hover {
|
||||
background: #f88502;
|
||||
}
|
||||
|
||||
.confirm_btns {
|
||||
display: flex;
|
||||
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.confirm_btns .el-button {
|
||||
width: 175px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user