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="#07c160" 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
			})

			// 会员详情
			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 }).then((res) => {
					wxPay(res.data)
					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
					})
				}
			}

			return {
				...toRefs(data),
				changeNum,
				toPage,
				getVipInfo,
				price,
				toPay,
				getUserVip,
				getPhoneNumber
			}
		},
		onLoad() {
			this.getVipInfo()
			this.getUserVip()
		}
	}
</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>