增加VIP会员

2024-04-09 17:29:23 +08:00
parent e520ff11d2
commit 70c5d15d44
16 changed files with 852 additions and 139 deletions
--- a/pages/user/vip.vue
+++ b/pages/user/vip.vue
@@ -0,0 +1,129 @@
+<template>
+	<view>
+		<view v-if="identity != null" :style="(identity.open || identity.renew) ? 'padding-bottom:230rpx': 'padding-bottom:110rpx'">
+			<image class="vip-cover" :src="identity.cover" mode="widthFix"></image>
+			<view class="vip-footer">
+				<view class="vip-text">
+					<text class="vip-text-item">{{identity.identity_name}}</text>
+					<text class="vip-text-item">到期时间: {{identity.end_at || '长期'}}</text>
+				</view>
+				<button class="vip-btn" v-if="identity.open || identity.renew" @click="vipShow = true">{{identity.open ? '开通': ''}}{{identity.renew ? '续费': ''}} (￥{{identity.price}}/{{identity.years}}年)</button>
+			</view>
+		</view>
+		<!-- 弹出层 -->
+		<u-popup :show="vipShow" mode="center" :round="10" closeable @close="vipShow = false">
+			<view class="vip-tips" v-if="identity != null">
+				<view class="vip-tips-title">开通会员</view>
+				<view class="vip-tips-price"><text class="vip-tips-price-sm">￥</text>{{identity.price}}</view>
+				<view class="vip-tips-text">年限{{identity.years}}年</view>
+				<input class="vip-tips-input" placeholder="请输入真实姓名" v-model="nickname" />
+				<button class="vip-tips-btn" @click="onOpen">去支付</button>
+			</view>
+		</u-popup>
+	</view>
+</template>
+
+<script>
+	import { identity, vip } from '@/apis/interfaces/user'
+	export default {
+		data() {
+			return {
+				vipShow	: false,
+				identity: null,
+				nickname: ""
+			};
+		},
+		onShow(){
+			uni.showLoading({
+				title: '加载中...',
+				mask : true
+			})
+			identity().then(res => {
+				this.identity = res;
+				uni.hideLoading()
+			}).catch(err => {
+				uni.showToast({
+					title: err.message,
+					icon : 'none'
+				})
+			})
+		},
+		methods: {
+			onOpen(){
+				if(this.nickname == ''){
+					uni.showToast({
+						title: '请输入真实姓名',
+						icon : 'none'
+					})
+					return
+				}
+				uni.showLoading({
+					title: "获取支付...",
+					mask : true
+				})
+				vip({ real_name: this.nickname }).then(res => {
+					uni.hideLoading()
+					let { order_type, order_id } = res
+					this.$Router.push({
+						name: "Pay",
+						params: {
+							orderId		: order_id,
+							orderType	: order_type
+						}
+					})
+				}).catch(err => {
+					uni.showToast({
+						title: err.message,
+						icon : 'none'
+					})
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.vip-cover{ width: 100%; vertical-align: top; }
+	.vip-footer{
+		padding: 30rpx;
+		background: #d2382c;
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		.vip-text{
+			color: #fff5e9;
+			font-size: 30rpx;
+			text-align: center;
+			line-height: 50rpx;
+			.vip-text-item{ padding: 0 15rpx; }
+		}
+		.vip-btn{
+			margin-top: 30rpx;
+			background: linear-gradient(to right, #fffefc, #fff0d9);
+			color: #d2382c;
+			font-weight: bold;
+			font-size: 34rpx;
+			border-radius: 45rpx;
+			line-height: 90rpx;
+			&::after{ display: none; }
+		}
+	}
+	// 开通会员弹出层
+	.vip-tips{
+		width: 75vw;
+		padding: 50rpx;
+		box-sizing: border-box;
+		.vip-tips-title{ text-align: center; font-weight: bold; font-size: 36rpx; padding-bottom: 30rpx; }
+		.vip-tips-price{
+			text-align: center;
+			font-weight: bold;
+			font-size: 50rpx;
+			color: #d2382c;
+			&-sm{ font-size: 80%; }
+		}
+		.vip-tips-text{ font-size: 30rpx; color: gray; padding-bottom: 50rpx; text-align: center; }
+		.vip-tips-input{ background: #f7f8f9; border-radius: 45rpx; height: 90rpx; margin-bottom: 30rpx; padding: 0 30rpx; text-align: center; font-size: 32rpx; }
+		.vip-tips-btn{ background: #d2382c; color: white; line-height: 90rpx; border-radius: 45rpx; font-weight: bold; font-size: 34rpx; }
+	}
+</style>