shop_app/pages/vip/pay/index.vue

<template>
	<view class="vip">
		<view class="box">
			<view class="vip-text">
				<view class="">
					<view class="type">当前您<block v-if="user.is_vip">已</block>
						<block v-else>未</block>开通会员服务
					</view>
					<view class="explain">权益说明：购买会员后可享受全场会员价</view>
				</view>
				<view class="bottom">
					<view class="text">会员续期{{vip_type == 1 ? '月' : '年'}}数</view>
					<up-number-box :value="num" :min="1" disabledInput @change="changeNum"></up-number-box>
				</view>
			</view>
		</view>
		<view class="vip-box">
			<view class="title">支付方式</view>
			<view class="bottom">
				<text>支付宝</text>
				<up-icon name="checkmark-circle-fill" color="#00A0EA" size="24" />
			</view>
		</view>
		<view class="vip-pay">
			<view>
				<text class="text">总计：</text>
				<text class="price">￥{{price}}</text>
			</view>
			<text class="btn" @click="toPay">去付款</text>
			<!-- <button v-else class="btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber($event)">去付款</button> -->
		</view>
	</view>
</template>

<script>
	import { ref, reactive, toRefs, computed } from 'vue'
	import { getShopInfo, wxPay, getUserPhone } from '@/components/common.js'
	import { get, post } from '@/api/request.js'
	export default {
		setup() {
			const data = reactive({
				num: 1,
				checked: true,
				vip_price: 0,
				vip_type: '',
				user: {},
				is_authorized: uni.getStorageSync('is_authorized'),
				canBuy: true,
				pay_id: ''
			})

			// 会员详情
			const getVipInfo = async () => {
				let res = await getShopInfo()
				data.vip_price = res.vip_price
				data.vip_type = res.vip_type
			}

			async function getUserVip() {
				let res = await get('/api/v1/user/home')
				data.user = res.data
				uni.setStorageSync('is_vip', res.data.is_vip)
			}

			const changeNum = (e) => {
				data.num = e.value
			}

			const toPage = (url) => {
				uni.navigateTo({ url })
			}
			const price = computed(() => {
				let vip_price = data.vip_price * 100
				return (data.num * vip_price) / 100
			})

			// 购买
			const toPay = () => {
				if (!data.canBuy) {
					return
				}
				data.canBuy = false
				post('/api/v1/user/vip', { total_price: price.value, num: data.num, pay_style: 'app_pay', pay_type: 2 }).then((res) => {
					// wxPay(res.data)
					data.pay_id = res.data.pay_id
					// 跳转支付宝小程序
					let alipayUrl = res.data.jump_mini_path
					// let alipayUrl = res.data.jump_mini_path + '&returnSchema=miaoxuan://'
					if (uni.getSystemInfoSync().platform == "ios") {
						alipayUrl = res.data.jump_mini_path.replace('alipays', 'alipay')
					}
					plus.runtime.openURL(alipayUrl)
					setTimeout(() => {
						data.canBuy = true
					}, 1000)
				}).catch(() => {
					data.canBuy = true
				})
			}

			// 授权手机号码
			async function getPhoneNumber(e) {
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					await getUserPhone(e.detail).then((res) => {
						data.is_authorized = 1
					})
				}
			}
			
			function isPayOrder() {
				if(data.pay_id) {
					uni.showLoading({
						title: '加载中...',
						mask: true
					})
					get(`/api/v1/pay/check/${data.pay_id}`).then((res) => {
						uni.hideLoading()
						if(res.data.status) {
							showToast('支付成功', 'success')
							uni.setStorageSync('is_vip', true)
							uni.navigateBack({delta:1})
						} else {
							showToast('支付失败')
						}
					})
				}
			}

			return {
				...toRefs(data),
				changeNum,
				toPage,
				getVipInfo,
				price,
				toPay,
				getUserVip,
				getPhoneNumber,
				isPayOrder
			}
		},
		onLoad() {
			this.getVipInfo()
			this.getUserVip()
		},
		onShow() {
			// 在此判断订单是否已经支付成功
			this.isPayOrder()
		}
	}
</script>

<style lang="scss" scoped>
	.vip {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		overflow: hidden;

		.box {
			background-color: #fff;
			padding: 25rpx 30rpx;
		}

		&-text {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			background: #37384a;
			border-radius: 10rpx;
			padding: 40rpx 30rpx;
			height: 314rpx;
			box-sizing: border-box;

			.type {
				font-size: 30rpx;
				color: #f2d29c;
			}

			.explain,
			.text {
				color: #fff;
			}

			.explain {
				font-size: 26rpx;
				margin-top: 30rpx;
			}
		}

		.bottom {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
		}

		&-box {
			flex: 1;
			margin-top: 25rpx;
			padding: 50rpx 30rpx 0;
			background-color: #fff;
			font-size: 30rpx;

			.title {
				color: #878787;
			}

			.bottom {
				font-size: 30rpx;
				font-weight: bold;
				margin-top: 20rpx;
			}
		}

		&-pay {
			display: flex;
			padding: 30rpx;
			align-items: center;
			justify-content: space-between;
			border-top: 2rpx solid #e5e5e5;
			background-color: #fff;

			.text {
				font-size: 30rpx;
				color: #878787;
			}

			.price {
				font-size: 49rpx;
			}

			.btn {
				color: #fbe6c3;
				width: 220rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				border-radius: 30rpx;
				background: #4a494e;
				font-size: inherit;
			}
		}
	}

</style>