sange-bridge/pages/my/member.vue

<template>
	<app-layout>
		<view class="container">
			<view class="header">
				<view class="bg"></view>
				<view class="title-group dir-top-wrap cross-center main-center">
					<view class="title">桥架计算和公示表永久使用</view>
					<view class="sub-title">做桥架不求人，让你秒变大师</view>
				</view>
			</view>
			<view class="main">
				<view class="bg"></view>
				<view class="item-group  dir-top-wrap cross-center">
					<view class="title">开通桥架会员</view>
					<view class="price">
						<view class="current">¥{{setting.member_price}}</view>
						<view class="origin">¥{{setting.origin_member_price}}</view>
						<view class="desc">永久使用</view>
					</view>
					<u-button shape="circle"
							  type="success"
							  hover-class="none"
							  :custom-style="btnStyle"
							  @click="handleBuy"
							  v-if="vuex_user_data.is_vip == 0"
					>立即开通</u-button>
					<u-button shape="circle"
							  type="success"
							  hover-class="none"
							  :custom-style="btnStyle"
							  v-else
					>您已经是会员了</u-button>
				</view>
			</view>
		</view>
	</app-layout>
</template>

<script>
	import appLayout from "@/components/app-layout"
	export default {
		components:{
			appLayout,
		},
		data() {
			return {
				setting: {},
				interval: null
			}
		},
		methods: {
			getSetting(){
				this.$u.api.settingGet().then(data => {
					this.setting = data;
				})
			},
			handleBuy(){
				uni.showLoading({title: '数据处理中...'})
				let _this = this;
				this.$u.api.userBuy().then(data => {
					uni.hideLoading();
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: data.timeStamp,
						nonceStr: data.nonceStr,
						package: data.package,
						signType: data.signType,
						paySign: data.paySign,
						success: function (res) {
							console.log('success:' + JSON.stringify(res));
							//_this.$u.toast("支付成功")
							_this.queryOrder();
						},
						fail: function (err) {
							console.log('fail:' + JSON.stringify(err));
							//_this.$u.toast("支付失败")
							clearInterval(_this.interval)
						}
					});
				}).catch(res => {
					if(res.code === 10013){
						clearInterval(_this.interval)
						_this.getUser();
					}
				})
			},
			queryOrder(){
				let _this = this;
				_this.interval = setInterval(function () {
					_this.$u.api.userQuery().then(data => {
						if(data == 1){
							clearInterval(_this.interval)
							_this.getUser();
						}else if(data == 2){
							clearInterval(_this.interval)
							_this.$u.toast('支付失败');
						}
					})
				},1000)
			},
			getUser(){
				this.$u.api.userGet().then(data => {
					this.$u.vuex(this.$const.USER_DATA, data)
				})
			},
		},
		computed:{
			btnStyle() {
				return {
					border:'none',
					background:'linear-gradient(90deg, rgba(196,146,68,1) 0%, rgba(225,193,117,1) 100%, rgba(225,193,117,1) 100%)',
					width: '600rpx',
					padding: '42rpx 0',
					height: '100rpx',
					fontSize: '36rpx',
					fontWeight: 600
				};
			}
		},
		onReady(){
			this.getSetting();
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0;
		.header {
			.bg {
				position: absolute;
				background: url("@/static/images/member-bg.png") no-repeat center;
				background-size: 100% 100%;
				height: 300rpx;
				left: 0;
				top: 0;
				width: 750rpx;
				z-index: 0;
			}
			.title-group{
				position: relative;
				color: #CFBB8B;
				height: 220rpx;
				.title{
					font-size: 48rpx;
					font-weight: 600;
				}
				.sub-title{
					margin-top: 8rpx;
					font-size: 30rpx;
				}
			}
		}
		.main{
			position: relative;
			.bg{
				position: absolute;
				background: url("@/static/images/member-bg1.png") no-repeat center;
				background-size: 100% 100%;
				left: 50%;
				transform: translateX(-50%);
				height: 750rpx;
				width: 680rpx;
				z-index: 0;
			}
			.item-group{
				position: relative;
				height: 750rpx;
				padding: 32rpx 0;
				.title{
					font-size: 42rpx;
					font-weight: 600;
					color: #4e5958;
				}
			}
			.price{
				border: 4rpx solid #C49244;
				color: #c5923d;
				padding: 20rpx 60rpx;
				text-align: center;
				margin-bottom: 100rpx;
				margin-top: 100rpx;
				border-radius: 10rpx;
				.current{
					font-weight: 600;
					font-size: 42rpx;
					padding: 30rpx 0;
				}
				.origin{
					color: #e3c377;
					text-decoration: line-through;
				}
				.desc{
					font-size: 40rpx;
					padding: 30rpx 0;
				}
			}
		}
	}
</style>