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
							  class="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
							  class="u_button"
							  shape="circle"
							  type="success"
							  hover-class="none"
							  :custom-style="btnStyle"
							  v-else
					>您已经是会员了</u-button>
				</view>
			</view>
		</view>
		<u-popup v-model="modal.show" mode="bottom" :mask-close-able="false" border-radius="15">
			<view class="popup-content">
				<view class="title">需要绑定您的手机号</view>
				<view class="btn-popup main-between">
					<button class="btn main-center cross-center" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取手机号</button>
				</view>
			</view>
		</u-popup>

	</app-layout>
</template>

<script>
	import appLayout from "@/components/app-layout"
	export default {
		components:{
			appLayout,
		},
		data() {
			return {
				setting: {},
				interval: null,
				modal: {
					show: false
				},
			}
		},
		methods: {
			getSetting(){
				this.$u.api.settingGet().then(data => {
					this.setting = data;
				})
			},
			handleBuy(){
				let _this = this;
				if(this.$platform === 'ios'){
					uni.showModal({
						title: '提示',
						content: '由于相关规范，iOS功能暂不可用',
						success: function (res) {
							// res.confirm res.cancel
						}
					});
					return false
				}
				if(!this.vuex_user_data.phone_num){
					this.modal.show = true;
					return;
				}

				uni.showLoading({title: '数据处理中...'})
				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)
				})
			},
			getPhoneNumber(phoneNumber){
				if(phoneNumber.detail.errMsg !== 'getPhoneNumber:ok'){
					this.$u.toast('已取消');
					return
				}
				uni.checkSession({
					success: data => {
						this.$u.api.userBindPhone(phoneNumber.detail).then(data => {
							this.$u.vuex(this.$const.USER_DATA,data)
							this.modal.show = false
							this.handleBuy();
						})
					},
					fail: err => {
						this.sureClearCache()
					}
				})
			},
			sureClearCache(){
				this.$u.vuex(this.$const.USER_TOKEN,null)
				this.$u.vuex(this.$const.USER_DATA,null)
				this.$jump({url:'/pages/login/login?redirect=pages/my/index',type:'redirect'})
			},
		},
		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;
				}
				/deep/ .u_button{
					position: absolute;
					bottom: 40rpx;
				}
			}
			.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;
				}
			}
		}
	}
	.popup-content{
		height: 280rpx;
		position: relative;
		.title{
			padding: 20rpx 30rpx;
			font-weight: 600;
			font-size: 42rpx;
		}
		.btn-popup{
			position: absolute;
			bottom: 0;
			width: 100%;
		}
		.btn{
			background: $main-color;
			color: #fff;
			border-radius: 0;
			font-size: 28rpx;
			height: 100rpx;
			flex: 1;
			&.cancel{
				background: #f5f5f5;
				color: #666;
			}
			&:after{
				content: unset;
			}
		}
	}
</style>