bnyer-cloud-tiktok/pages/userInfo/vip/vip.vue

<template>
	<view class="container">
		<view class="header">
			<view class="vip-info">
				<image :src="userInfo.img" mode="" class="vip-info__avatar"></image>
				<div>
					<div class="vip-info__name">{{userInfo.username}}</div>
					<div class="vip-info__tips">你还不是会员,开通立享 9 项特权</div>
				</div>
			</view>
			<view class="vip-explan">
				会员说明
				<uni-icons type="help" size="20" color="#eee" />
			</view>
		</view>

		<view class="vip-box">
			<view class="vip-box__item" :class="{'item-active':active == index}" @click="change(index)"
				v-for="(item,index) in vipList" :key="index">
				<view class="title">
					{{item.vipName}}
				</view>
				<view class="price">
					<text class="price-unit">¥</text> {{item.price}}
				</view>
				<view class="o-price">
					{{item.originPrice}}
				</view>
				<view class="save-box">
					立省{{item.originPrice - item.price}}元
				</view>
			</view>
		</view>

		<button class="sumbit-btn" @click="openVip" :disabled="disabled">
			立即开通
		</button>
	</view>
</template>

<script>
	import {
		queryUserVipList,
		addVipOrder,
		unifiedOrder
	} from '@/api/userInfo.js'
	export default {
		data() {
			return {
				userInfo: null,
				vipList: [],
				active: 0,
				disabled: false
			}
		},
		methods: {
			async getVipList() {
				const {
					data
				} = await queryUserVipList();
				this.vipList = data.data
			},
			change(index) {
				this.active = index
			},
			async openVip() {
				let data = this.vipList[this.active];
				let phone = this.userInfo
				if (!Object.keys(data).length) return
				this.disabled = true
				uni.showLoading({
					title: "加载中..."
				});
				const res_add = await addVipOrder({
					vipId: data.id
				})
				let orderNo = res_add.data.data;
				const res_uni = await unifiedOrder({
					orderNo,
					sceneCode: 1,
					payType: 'dypay',
				})
				let {orderId,orderToken} = res_uni.data.data.dyThirdInOrderVo
				this.tikPay(orderId,orderToken)
			
			},
			tikPay(order_id, order_token) {
				tt.pay({
					orderInfo: {
						order_id,
						order_token
					},
					service: 5,
					success(res) {
						if (res.code == 0) {
						
						}
						uni.hideLoading();
						this.disabled = false
					},
					fail(res) {
						uni.hideLoading();
						this.disabled = false
					},
				})
			}
		},
		onShow() {
			this.userInfo = uni.getStorageSync('userInfo')
		},
		created() {
			if (!this.userInfo) {
				uni.navigateBack()
				uni.showToast({
					title: '请先登录',
					icon: 'none'
				})
			}
			this.getVipList()
		}
	}
</script>

<style lang="scss" scoped>
	@mixin flex($center: center, $content: center) {
		display: flex;
		align-items: $center;
		justify-content: $content;
	}

	.container {
		padding: 30rpx;
		background: #fff;

		.vip-box {
			margin: 30px 0;
			@include flex(center, space-between);

			.vip-box__item {
				width: 30%;
				height: 300rpx;
				padding: 20rpx;
				@include flex;
				flex-direction: column;
				color: #000;
				border: 1px solid #eee;
				border-radius: 30rpx;

				&>view {
					margin-bottom: 15rpx;
				}

				.title {
					font-weight: bold;
					font-size: 30rpx;
				}

				.price {
					font-weight: bold;
					font-size: 48rpx;
					color: #1991fd;

					.price-unit {
						font-size: 24rpx
					}
				}

				.o-price {
					color: #1991fd;
					font-size: 26rpx;
					text-decoration: line-through;
				}

				.save-box {
					border-radius: 30rpx;
					width: 150rpx;
					height: 50rpx;
					background-color: #e8f4ff;
					font-size: 24rpx;
					color: #68c2ff;
					@include flex;
				}
			}

			.item-active {
				border: none;
				background: linear-gradient(to bottom right, #68c2ff, #0684fe);



				.price,
				.title {
					color: #fff;
				}

				.o-price {
					color: #eee;
				}

				.save-box {
					color: #fff;
					background-color: rgba(255, 255, 255, .1);
				}
			}
		}

		.sumbit-btn {
			margin-top: 60rpx;
			height: 88rpx;
			@include flex;
			font-size: 26rpx;
			color: #fff;
			background: linear-gradient(to bottom right, #68c2ff, #0684fe);
		}

		.header {
			height: 200rpx;
			background-color: gray;
			padding: 20rpx;
			@include flex(center, space-between);
			border-radius: 20rpx;

			.vip-explan {
				color: #eee;
				font-size: 24rpx;
				@include flex(center, flex-start);

			}

			.vip-info {
				@include flex(center, flex-start);

				.vip-info__avatar {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}

				.vip-info__name {
					color: #fff;
					font-size: 30rpx;
					font-weight: 500;
					margin-bottom: 10rpx;
				}

				.vip-info__tips {
					color: #eee;
					font-size: 24rpx
				}
			}
		}
	}
</style>