✨ 收银台：接入核心逻辑
YunaiV
parent
4ddf17e2df
commit
072f6a15a9
|
|
@ -2,14 +2,17 @@
|
|||
<template>
|
||||
<s-layout title="收银台">
|
||||
<view class="bg-white ss-modal-box ss-flex-col">
|
||||
<!-- 订单信息 -->
|
||||
<view class="modal-header ss-flex-col ss-col-center ss-row-center">
|
||||
<view class="money-box ss-m-b-20">
|
||||
<text class="money-text">{{ state.orderInfo.pay_fee }}</text>
|
||||
<text class="money-text">{{ fen2yuan(state.orderInfo.price) }}</text>
|
||||
</view>
|
||||
<view class="time-text">
|
||||
<text>{{ payDescText }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 支付方式 -->
|
||||
<view class="modal-content ss-flex-1">
|
||||
<view class="pay-title ss-p-l-30 ss-m-y-30">选择支付方式</view>
|
||||
<radio-group @change="onTapPay">
|
||||
|
|
@ -17,7 +20,6 @@
|
|||
<view
|
||||
class="pay-item ss-flex ss-col-center ss-row-between ss-p-x-30 border-bottom"
|
||||
:class="{ 'disabled-pay-item': item.disabled }"
|
||||
v-if="allowedPayment.includes(item.value)"
|
||||
>
|
||||
<view class="ss-flex ss-col-center">
|
||||
<image
|
||||
|
|
@ -25,25 +27,19 @@
|
|||
v-if="item.disabled"
|
||||
:src="sheep.$url.static('/static/img/shop/pay/cod_disabled.png')"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
/>
|
||||
<image
|
||||
class="pay-icon"
|
||||
v-else
|
||||
:src="sheep.$url.static(item.icon)"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
/>
|
||||
<text class="pay-title">{{ item.title }}</text>
|
||||
</view>
|
||||
<view class="check-box ss-flex ss-col-center ss-p-l-10">
|
||||
<view class="userInfo-money ss-m-r-10" v-if="item.value == 'money'">
|
||||
<view class="userInfo-money ss-m-r-10" v-if="item.value === 'wallet'">
|
||||
余额: {{ userInfo.money }}元
|
||||
</view>
|
||||
<view
|
||||
class="userInfo-money ss-m-r-10"
|
||||
v-if="item.value == 'offline' && item.disabled"
|
||||
>
|
||||
部分商品不支持
|
||||
</view>
|
||||
<radio
|
||||
:value="item.value"
|
||||
color="var(--ui-BG-Main)"
|
||||
|
|
@ -56,6 +52,7 @@
|
|||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
|
||||
<!-- 工具 -->
|
||||
<view class="modal-footer ss-flex ss-row-center ss-col-center ss-m-t-80 ss-m-b-40">
|
||||
<button v-if="state.payStatus === 0" class="ss-reset-button past-due-btn">
|
||||
|
|
@ -81,65 +78,27 @@
|
|||
import { computed, reactive } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import sheep from '@/sheep';
|
||||
import { useDurationTime } from '@/sheep/hooks/useGoods';
|
||||
import { fen2yuan, useDurationTime } from '@/sheep/hooks/useGoods';
|
||||
import PayOrderApi from '@/sheep/api/pay/order';
|
||||
import PayChannelApi from '@/sheep/api/pay/channel';
|
||||
import { getPayMethods } from '@/sheep/platform/pay';
|
||||
|
||||
const userInfo = computed(() => sheep.$store('user').userInfo);
|
||||
|
||||
// 检测支付环境
|
||||
const state = reactive({
|
||||
orderType: 'goods',
|
||||
payment: '',
|
||||
orderInfo: {},
|
||||
payStatus: 0, // 0=检测支付环境, -2=未查询到支付单信息， -1=支付已过期， 1=待支付，2=订单已支付
|
||||
payMethods: [],
|
||||
});
|
||||
|
||||
const allowedPayment = computed(() => {
|
||||
if(state.orderType === 'recharge') {
|
||||
return sheep.$store('app').platform.recharge_payment
|
||||
}
|
||||
return sheep.$store('app').platform.payment
|
||||
});
|
||||
|
||||
const payMethods = [
|
||||
{
|
||||
icon: '/static/img/shop/pay/wechat.png',
|
||||
title: '微信支付',
|
||||
value: 'wechat',
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
icon: '/static/img/shop/pay/alipay.png',
|
||||
title: '支付宝支付',
|
||||
value: 'alipay',
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
icon: '/static/img/shop/pay/wallet.png',
|
||||
title: '余额支付',
|
||||
value: 'money',
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
icon: '/static/img/shop/pay/apple.png',
|
||||
title: 'Apple Pay',
|
||||
value: 'apple',
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
icon: '/static/img/shop/pay/cod.png',
|
||||
title: '货到付款',
|
||||
value: 'offline',
|
||||
disabled: false,
|
||||
},
|
||||
];
|
||||
|
||||
const onPay = () => {
|
||||
if (state.payment === '') {
|
||||
sheep.$helper.toast('请选择支付方式');
|
||||
return;
|
||||
}
|
||||
if (state.payment === 'money') {
|
||||
if (state.payment === 'wallet') {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要支付吗?',
|
||||
|
|
@ -149,27 +108,18 @@
|
|||
}
|
||||
},
|
||||
});
|
||||
} else if (state.payment === 'offline') {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要下单吗?',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
sheep.$platform.pay(state.payment, state.orderType, state.orderInfo.order_sn);
|
||||
}
|
||||
},
|
||||
});
|
||||
} else {
|
||||
sheep.$platform.pay(state.payment, state.orderType, state.orderInfo.order_sn);
|
||||
}
|
||||
};
|
||||
|
||||
// 支付文案提示
|
||||
const payDescText = computed(() => {
|
||||
if (state.payStatus === 2) {
|
||||
return '该订单已支付';
|
||||
}
|
||||
if (state.payStatus === 1 && state.orderInfo.ext.expired_time !== 0) {
|
||||
const time = useDurationTime(state.orderInfo.ext.expired_time);
|
||||
if (state.payStatus === 1) {
|
||||
const time = useDurationTime(state.orderInfo.expireTime);
|
||||
if (time.ms <= 0) {
|
||||
state.payStatus = -1;
|
||||
return '';
|
||||
|
|
@ -179,59 +129,49 @@
|
|||
if (state.payStatus === -2) {
|
||||
return '未查询到支付单信息';
|
||||
}
|
||||
|
||||
return '';
|
||||
});
|
||||
|
||||
// 状态转换：payOrder.status => payStatus
|
||||
function checkPayStatus() {
|
||||
if (state.orderInfo.status === 'unpaid') {
|
||||
state.payStatus = 1;
|
||||
if (state.orderInfo.status === 10) {
|
||||
state.payStatus = 2;
|
||||
return;
|
||||
}
|
||||
if (state.orderInfo.status === 'closed') {
|
||||
if (state.orderInfo.status === 20) {
|
||||
state.payStatus = -1;
|
||||
return;
|
||||
}
|
||||
state.payStatus = 2;
|
||||
state.payStatus = 1;
|
||||
}
|
||||
|
||||
// 切换支付方式
|
||||
function onTapPay(e) {
|
||||
state.payment = e.detail.value;
|
||||
}
|
||||
|
||||
async function setRechargeOrder(id) {
|
||||
const { data, error } = await sheep.$api.trade.order(id);
|
||||
if (error === 0) {
|
||||
state.orderInfo = data;
|
||||
state.payMethods = payMethods;
|
||||
checkPayStatus();
|
||||
} else {
|
||||
// 设置支付订单信息
|
||||
async function setOrder(id) {
|
||||
// 获得支付订单信息
|
||||
const { data, code } = await PayOrderApi.getOrder(id);
|
||||
if (code !== 0 || !data) {
|
||||
state.payStatus = -2;
|
||||
return;
|
||||
}
|
||||
state.orderInfo = data;
|
||||
// 获得支付方式
|
||||
await setPayMethods();
|
||||
// 设置支付状态
|
||||
checkPayStatus();
|
||||
}
|
||||
|
||||
async function setGoodsOrder(id) {
|
||||
const { data, error } = await sheep.$api.order.detail(id);
|
||||
if (error === 0) {
|
||||
state.orderInfo = data;
|
||||
if (state.orderInfo.ext.offline_status === 'none') {
|
||||
payMethods.forEach((item, index, array) => {
|
||||
if (item.value === 'offline') {
|
||||
array.splice(index, 1);
|
||||
}
|
||||
});
|
||||
} else if (state.orderInfo.ext.offline_status === 'disabled') {
|
||||
payMethods.forEach((item) => {
|
||||
if (item.value === 'offline') {
|
||||
item.disabled = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
state.payMethods = payMethods;
|
||||
checkPayStatus();
|
||||
} else {
|
||||
state.payStatus = -2;
|
||||
// 获得支付方式
|
||||
async function setPayMethods() {
|
||||
const { data, code } = await PayChannelApi.getEnableChannelCodeList(state.orderInfo.appId);
|
||||
if (code !== 0) {
|
||||
return;
|
||||
}
|
||||
state.payMethods = getPayMethods(data);
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
|
|
@ -243,22 +183,9 @@
|
|||
location.reload();
|
||||
return;
|
||||
}
|
||||
let id = '';
|
||||
if (options.orderSN) {
|
||||
id = options.orderSN;
|
||||
}
|
||||
if (options.id) {
|
||||
id = options.id;
|
||||
}
|
||||
if (options.type === 'recharge') {
|
||||
state.orderType = 'recharge';
|
||||
// 充值订单
|
||||
setRechargeOrder(id);
|
||||
} else {
|
||||
state.orderType = 'goods';
|
||||
// 商品订单
|
||||
setGoodsOrder(id);
|
||||
}
|
||||
// 获得支付订单信息
|
||||
let id = options.id;
|
||||
setOrder(id);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -276,7 +203,6 @@
|
|||
position: relative;
|
||||
padding: 60rpx 20rpx 40rpx;
|
||||
|
||||
|
||||
.money-text {
|
||||
color: $red;
|
||||
font-size: 46rpx;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
import request from '@/sheep/request';
|
||||
|
||||
const PayChannelApi = {
|
||||
// 获得指定应用的开启的支付渠道编码列表
|
||||
getEnableChannelCodeList: (appId) => {
|
||||
return request({
|
||||
url: '/app-api/pay/channel/get-enable-code-list',
|
||||
method: 'GET',
|
||||
params: { appId }
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
export default PayChannelApi;
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import request from '@/sheep/request';
|
||||
|
||||
const PayOrderApi = {
|
||||
// 获得支付订单
|
||||
getOrder: (id) => {
|
||||
return request({
|
||||
url: '/app-api/pay/order/get',
|
||||
method: 'GET',
|
||||
params: { id }
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
export default PayOrderApi;
|
||||
|
|
@ -29,8 +29,8 @@ export default class SheepPay {
|
|||
alipay: () => {
|
||||
this.redirectPay(); // 现在公众号可以直接跳转支付宝页面
|
||||
},
|
||||
money: () => {
|
||||
this.moneyPay();
|
||||
wallet: () => {
|
||||
this.walletPay();
|
||||
},
|
||||
offline: () => {
|
||||
this.offlinePay();
|
||||
|
|
@ -43,8 +43,8 @@ export default class SheepPay {
|
|||
alipay: () => {
|
||||
this.copyPayLink();
|
||||
},
|
||||
money: () => {
|
||||
this.moneyPay();
|
||||
wallet: () => {
|
||||
this.walletPay();
|
||||
},
|
||||
offline: () => {
|
||||
this.offlinePay();
|
||||
|
|
@ -57,8 +57,8 @@ export default class SheepPay {
|
|||
alipay: () => {
|
||||
this.alipay();
|
||||
},
|
||||
money: () => {
|
||||
this.moneyPay();
|
||||
wallet: () => {
|
||||
this.walletPay();
|
||||
},
|
||||
offline: () => {
|
||||
this.offlinePay();
|
||||
|
|
@ -71,8 +71,8 @@ export default class SheepPay {
|
|||
alipay: () => {
|
||||
this.redirectPay();
|
||||
},
|
||||
money: () => {
|
||||
this.moneyPay();
|
||||
wallet: () => {
|
||||
this.walletPay();
|
||||
},
|
||||
offline: () => {
|
||||
this.offlinePay();
|
||||
|
|
@ -109,7 +109,7 @@ export default class SheepPay {
|
|||
});
|
||||
}
|
||||
// #ifdef H5
|
||||
// 微信公众号JSSDK支付
|
||||
// 微信公众号JSSDK支付 TODO 芋艿：待接入
|
||||
async wechatOfficialAccountPay() {
|
||||
let that = this;
|
||||
let { error, data, msg } = await this.prepay();
|
||||
|
|
@ -130,7 +130,7 @@ export default class SheepPay {
|
|||
});
|
||||
}
|
||||
|
||||
//浏览器微信H5支付
|
||||
//浏览器微信H5支付 TODO 芋艿：待接入
|
||||
async wechatWapPay() {
|
||||
const { error, data } = await this.prepay();
|
||||
if (error === 0) {
|
||||
|
|
@ -140,7 +140,7 @@ export default class SheepPay {
|
|||
}
|
||||
}
|
||||
|
||||
// 支付链接
|
||||
// 支付链接 TODO 芋艿：待接入
|
||||
async redirectPay() {
|
||||
let { error, data } = await this.prepay();
|
||||
if (error === 0) {
|
||||
|
|
@ -152,7 +152,7 @@ export default class SheepPay {
|
|||
|
||||
// #endif
|
||||
|
||||
// 微信小程序支付
|
||||
// 微信小程序支付 TODO 芋艿：待接入
|
||||
async wechatMiniProgramPay() {
|
||||
let that = this;
|
||||
let result = await this.prepay();
|
||||
|
|
@ -172,19 +172,19 @@ export default class SheepPay {
|
|||
});
|
||||
}
|
||||
|
||||
// 余额支付
|
||||
async moneyPay() {
|
||||
// 余额支付 TODO 芋艿：待接入
|
||||
async walletPay() {
|
||||
const { error } = await this.prepay();
|
||||
error === 0 && this.payResult('success');
|
||||
}
|
||||
|
||||
// 货到付款
|
||||
// 货到付款 TODO 芋艿：待接入
|
||||
async offlinePay() {
|
||||
const { error } = await this.prepay();
|
||||
error === 0 && this.payResult('success');
|
||||
}
|
||||
|
||||
// 支付宝复制链接支付
|
||||
// 支付宝复制链接支付 TODO 芋艿：待接入
|
||||
async copyPayLink() {
|
||||
let that = this;
|
||||
let { error, data } = await this.prepay();
|
||||
|
|
@ -203,7 +203,7 @@ export default class SheepPay {
|
|||
}
|
||||
}
|
||||
|
||||
// 支付宝支付
|
||||
// 支付宝支付 TODO 芋艿：待接入
|
||||
async alipay() {
|
||||
let that = this;
|
||||
const { error, data } = await this.prepay();
|
||||
|
|
@ -225,7 +225,7 @@ export default class SheepPay {
|
|||
}
|
||||
}
|
||||
|
||||
// 微信支付
|
||||
// 微信支付 TODO 芋艿：待接入
|
||||
async wechatAppPay() {
|
||||
let that = this;
|
||||
let { error, data } = await this.prepay();
|
||||
|
|
@ -253,3 +253,66 @@ export default class SheepPay {
|
|||
});
|
||||
}
|
||||
}
|
||||
|
||||
export function getPayMethods(channels) {
|
||||
const payMethods = [
|
||||
{
|
||||
icon: '/static/img/shop/pay/wechat.png',
|
||||
title: '微信支付',
|
||||
value: 'wechat',
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
icon: '/static/img/shop/pay/alipay.png',
|
||||
title: '支付宝支付',
|
||||
value: 'alipay',
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
icon: '/static/img/shop/pay/wallet.png',
|
||||
title: '余额支付',
|
||||
value: 'wallet',
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
icon: '/static/img/shop/pay/apple.png',
|
||||
title: 'Apple Pay',
|
||||
value: 'apple',
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
icon: '/static/img/shop/pay/wallet.png',
|
||||
title: '模拟支付',
|
||||
value: 'mock',
|
||||
disabled: true,
|
||||
}
|
||||
];
|
||||
const platform = sheep.$platform.name
|
||||
|
||||
// 1. 处理【微信支付】
|
||||
const wechatMethod = payMethods[0];
|
||||
if ((platform === 'WechatOfficialAccount' && channels.includes('wx_pub'))
|
||||
|| platform === 'WechatMiniProgram' && channels.includes('wx_lite')
|
||||
|| platform === 'App' && channels.includes('wx_app')) {
|
||||
wechatMethod.disabled = false;
|
||||
}
|
||||
// 2. 处理【支付宝支付】
|
||||
const alipayMethod = payMethods[1];
|
||||
if ((platform === 'WechatOfficialAccount' && channels.includes('alipay_wap'))
|
||||
|| platform === 'WechatMiniProgram' && channels.includes('alipay_wap')
|
||||
|| platform === 'App' && channels.includes('alipay_app')) {
|
||||
alipayMethod.disabled = false;
|
||||
}
|
||||
// 3. 处理【余额支付】
|
||||
const walletMethod = payMethods[2];
|
||||
if (channels.includes('wallet')) {
|
||||
walletMethod.disabled = false;
|
||||
}
|
||||
// 4. 处理【苹果支付】TODO 芋艿：未来接入
|
||||
// 5. 处理【模拟支付】
|
||||
const mockMethod = payMethods[4];
|
||||
if (channels.includes('mock')) {
|
||||
mockMethod.disabled = false;
|
||||
}
|
||||
return payMethods;
|
||||
}
|
||||
|
|
@ -23,8 +23,8 @@ const app = defineStore({
|
|||
copytime: '', // 版权信息 II
|
||||
},
|
||||
platform: {
|
||||
payment: [], // 支持的支付方式
|
||||
recharge_payment: [], // 支持的充值支付方式
|
||||
payment: [], // 支持的支付方式 TODO 芋艿：可删除
|
||||
recharge_payment: [], // 支持的充值支付方式 TODO 芋艿：可删除
|
||||
share: {
|
||||
methods: [], // 支持的分享方式
|
||||
forwardInfo: {}, // 默认转发信息
|
||||
|
|
|
|||
Loading…
Reference in New Issue