new-dianxiaorui-uniapp/pageInvest/shop/pay.vue

<template>
	<view>
		<view style="height: 20rpx"></view>
		<view style="background-color: #ffffff; border-radius: 10rpx; padding: 30rpx; text-align: center">
			<view style="color: #fa3534">
				<text style="font-size: 30rpx">￥</text>
				<text style="font-size: 36rpx; font-weight: 700">{{ amount }}</text>
			</view>
			<view style="color: #909399; font-size: 28rpx">支付金额</view>
		</view>

		<view style="height: 20rpx"></view>
		<view style="background-color: #fff; padding: 30rpx; border-radius: 10rpx">
			<view style="font-size: 28rpx;#606266">支付方式</view>
			<view style="height: 20rpx"></view>
			<up-radio-group v-model="dataFrom.pay_type" iconPlacement="right" :borderBottom="true" placement="column">
				<up-radio :name="3" label="123456">
					<view style="display: flex; align-items: center">
						<up-icon name="/static/icon/money.png" imgMode="widthFix" size="50rpx" />
						<view style="width: 20rpx"></view>
						<view>
							<view style="font-size: 30rpx">余额支付</view>
							<view style="font-size: 28rpx; color: #909399">当前余额：￥{{ user.money2 || 0 }}</view>
						</view>
					</view>
				</up-radio>
				<up-radio :name="1">
					<view style="display: flex; align-items: center">
						<up-icon name="/static/icon/weixin.png" imgMode="widthFix" size="50rpx" />
						<view style="width: 20rpx"></view>
						<view>
							<view style="font-size: 30rpx; display: flex; align-items: center">
								微信支付
								<!-- 								<view style="padding: 4rpx 15rpx; margin-left: 10rpx; border-radius: 25rpx; background-color: #e03737; font-size: 24rpx; color: #fff">
									随机立减0.01-20元
								</view> -->
							</view>
							<view style="font-size: 28rpx; color: #909399">微信快捷支付</view>
						</view>
					</view>
				</up-radio>
			</up-radio-group>
		</view>
		<view style="height: 100rpx"></view>
		<view style="display: flex; justify-content: center; margin-top: 80rpx">
			<view class="affirm_btn" @click="payOrder">确认支付</view>
		</view>
	</view>
</template>

<script setup>
import { payAllinPay, handleSubmit, payMoney } from '@/api/api.js';
import { ref, reactive } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { userHook } from '@/hooks/userInfo.js';
const { user } = userHook();

let orderId = ref('');
let amount = ref(0);
let money = ref(0);
let goodsId = ref(null);
let num = ref(0);
let type = ref(1);

onLoad(async (options) => {
	orderId.value = options.id;
	amount.value = options.amount;
	type.value = options.type;
	num.value = options.num;
	goodsId.value = options.goodsId;
	// let { points2 } = await userInfo({ id });
	// money.value = points2;
});

onShow(async () => {
	let options = uni.getEnterOptionsSync();
	const shop_order_pay_show = uni.getStorageSync('shop_order_pay_show');
	let appId = 'wxef277996acc166c3';
	if (options.scene == '1038' && options.referrerInfo.appId == appId && shop_order_pay_show == 1) {
		uni.setStorageSync('shop_order_pay_show', 0);
		// 代表从收银台小程序返回
		let extraData = options.referrerInfo.extraData;
		if (!extraData) {
			// "当前通过物理按键返回，未接收到返参，建议自行查询交易结果";
			uni.showModal({
				title:'提示',
				content:'未检测到支付结果, 您可以查看订单',
				confirmText:'查看订单',
				success: (res) => {
					if(res.confirm){
						uni.reLaunch({
							url:'/pages/home/home?tabBarShow=1'
						})
					}
				}
			})
		} else {
			if (extraData.code == 'success') {
				// "支付成功";
				uni.showToast({
					title: '支付成功',
					icon: 'none'
				});
				uni.reLaunch({
					url:'/pages/home/home?tabBarShow=1'
				})
			} else if (extraData.code == 'cancel') {
				// "支付已取消";
				uni.showToast({
					title: '支付已取消',
					icon: 'none'
				});
			} else {
				// "支付失败：" + extraData.errmsg;
				uni.showToast({
					title: '支付失败：' + extraData.errmsg,
					icon: 'none'
				});
			}
		}
	}
});

let dataFrom = reactive({
	pay_type: 3
});

let payOrder = async () => {
	// let { username } = uni.getStorageSync('user');
	// handleSubmit({
	// 	num: num.value,
	// 	goodsId: goodsId.value,
	// 	userName: username
	// }).then((res) => {
	// 	uni.reLaunch({
	// 		url: `/pages/home/home?tabBarShow=1`
	// 	});
	// });

	// return;

	let _res;
	if (dataFrom.pay_type == 1 || dataFrom.pay_type == 2) {
		payAllinPay({ orderId: orderId.value }).then((res) => {
			uni.openEmbeddedMiniProgram({
				appId: res.appid,
				extraData: res.extraData,
				success(res) {
					// 打开成功
					uni.setStorageSync('shop_order_pay_show', 1);
				}
			});
		});
	}
	if (dataFrom.pay_type == 3) {
		// _res = type.value == 1 ? await walletPaymentGoods({ id: orderId.value }) : await walletPaymentPackages({ id: orderId.value });
		// uni.redirectTo({
		// 	url: `/pages/order/success?id=${orderId.value}&amount=${_res.amount}&orderNo=${_res.orderNo ? _res.orderNo : ''}&createTime=${_res.createTime ? _res.createTime : ''}`
		// });
		payMoney({ orderId: orderId.value }).then((res) => {
			uni.reLaunch({
				url:'/pages/home/home?tabBarShow=1'
			})
		})
	}
	return;
	// let _res = type.value == 1 ? await walletPaymentGoods({ id: orderId.value }) : await walletPaymentPackages({ id: orderId.value });
};
</script>

<style lang="scss">
.affirm_btn {
	width: 650rpx;
	height: 78rpx;
	background: #4874e5;
	border-radius: 12rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	font-size: 30rpx;
	color: #ffffff;
}
</style>