hhyykk/ipms-sjy
1
1
Fork 0
mirror of https://gitee.com/hhyykk/ipms-sjy.git synced 2025-07-14 11:05:06 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

增加支付收银台的前端界面

Browse Source
This commit is contained in:
YunaiV
2023-02-12 21:56:02 +08:00
parent 7fbdfec396
commit ecbeba5da0
10 changed files with 152 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
yudao-ui-admin/src/views/pay/order/submit.vue Normal file
View File

@ -0,0 +1,129 @@
<template>
<div class="app-container">
<!-- 支付信息 -->
<el-card v-loading="loading">
<el-descriptions title="支付信息" :column="3" border>
<el-descriptions-item label="支付单号">kooriookami</el-descriptions-item>
<el-descriptions-item label="商品标题">苏州市</el-descriptions-item>
<el-descriptions-item label="商品内容">苏州市</el-descriptions-item>
<el-descriptions-item label="支付金额">18100000000</el-descriptions-item>
<el-descriptions-item label="创建时间">苏州市</el-descriptions-item>
<el-descriptions-item label="过期时间">苏州市</el-descriptions-item>
</el-descriptions>
</el-card>
<!-- 微信支付 -->
<el-card style="margin-top: 10px">
<!-- 支付宝 -->
<el-descriptions title="选择支付宝支付">
</el-descriptions>
<div class="pay-channel-container">
<div class="box" v-for="channel in aliPayChannels" :key="channel.code">
<img :src="icons[channel.code]">
<div class="title">{{ channel.name }}</div>
</div>
</div>
<!-- 微信支付 -->
<el-descriptions title="选择微信支付" style="margin-top: 20px;" />
<div class="pay-channel-container">
<div class="box" v-for="channel in wxPayChannels" :key="channel.code">
<img :src="icons[channel.code]">
<div class="title">{{ channel.name }}</div>
</div>
</div>
<!-- 其它支付 -->
<el-descriptions title="选择其它支付" style="margin-top: 20px;" />
<div class="pay-channel-container">
<div class="box" v-for="channel in otherPayChannels" :key="channel.code">
<img :src="icons[channel.code]">
<div class="title">{{ channel.name }}</div>
</div>
</div>
</el-card>
</div>
</template>
<script>
import {DICT_TYPE, getDictDatas} from "@/utils/dict";
export default {
name: "PayOrderSubmit",
components: {
},
data() {
return {
id: undefined, // 请假编号
loading: false, // 支付信息的 loading
payOrder: {}, // 支付信息
aliPayChannels: [], // 阿里支付的渠道
wxPayChannels: [], // 微信支付的渠道
otherPayChannels: [], // 其它的支付渠道
icons: {
alipay_qr: require("@/assets/images/pay/icon/alipay_qr.svg"),
alipay_app: require("@/assets/images/pay/icon/alipay_app.svg"),
alipay_wap: require("@/assets/images/pay/icon/alipay_wap.svg"),
alipay_pc: require("@/assets/images/pay/icon/alipay_pc.svg"),
wx_app: require("@/assets/images/pay/icon/wx_app.svg"),
wx_lite: require("@/assets/images/pay/icon/wx_lite.svg"),
wx_pub: require("@/assets/images/pay/icon/wx_pub.svg"),
mock: require("@/assets/images/pay/icon/mock.svg"),
},
};
},
created() {
this.id = this.$route.query.id;
// if (!this.id) {
// this.$message.error('未传递 id 参数，无法查看 OA 请假信息');
// return;
// }
// this.getDetail();
this.initPayChannels();
},
methods: {
/** 初始化支付渠道 */
initPayChannels() {
// 微信支付
for (const dict of getDictDatas(DICT_TYPE.PAY_CHANNEL_CODE_TYPE)) {
const payChannel = {
name: dict.label,
code: dict.value
}
if (dict.value.indexOf('wx_') === 0) {
this.wxPayChannels.push(payChannel);
} else if (dict.value.indexOf('alipay_') === 0) {
this.aliPayChannels.push(payChannel);
} else {
this.otherPayChannels.push(payChannel);
}
}
},
/** 获得请假信息 */
getDetail() {
getLeave(this.id).then(response => {
this.form = response.data;
});
},
}
};
</script>
<style lang="scss" scoped>
.pay-channel-container {
display: flex;
margin-top: -10px;
.box {
width: 130px;
border: 1px solid #e6ebf5;
cursor: pointer;
text-align: center;
padding-top: 10px;
padding-bottom: 5px;
margin-right: 10px;
img {
width: 40px;
height: 40px;
}
.title {
padding-top: 5px
}
}
}
</style>