bawangcan-shop/pages/my/myVIP.vue

<template>
	<view>
		<view class="vipTop">
			<view class="top">
				<view class="topTitle">
					<view class="title">享专属特权</view>
					<view class="pingtai">平台会员</view>
				</view>
				<image class="vipLogo" src="../../static/img/my/viplogo.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="vip-center">
			<view class="center-title">会员月卡</view>
			<view class="center-kuang">
				<view class="kuang">VIP会员月卡</view>
				<view class="center-money">¥<span>{{money}}</span><text
					style="font-size: 34rpx;color: grey;text-decoration: line-through;margin-left: 16rpx;">￥{{ oldmoney }}</text></view>
				
				
			</view>
		</view>
		<view class="bottoms">
			<view class="bottoms-title">会员特权</view>
			<view class="vip-bottom">
				<view class="payinfo">
					<image src="../../static/img/my/tgfl.png" mode="widthFix"></image>
					<view class="text">最高优惠</view>
				</view>
				<view class="payinfo">
					<image src="../../static/img/my/zgyh.png" mode="widthFix"></image>
					<view class="text">推广福利</view>
				</view>
				<view class="payinfo">
					<image src="../../static/img/my/hbwm.png" mode="widthFix"></image>
					<view class="text">外卖红包</view>
				</view>
			</view>
		</view>
		<button class="btns" @click="btns">立即支付{{money}}元</button>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				money: 0,
				oldmoney:0
			};
		},
		onLoad() {
			let that = this;
			that.$Request.getT('/common/type/115').then(res => {
				if (res.code == 0) {
					if (res.data && res.data.value) {
						this.money = res.data.value;
					}
				}
			});
			that.$Request.getT('/common/type/137').then(res => {
				if (res.code == 0) {
					if (res.data && res.data.value) {
						this.oldmoney = res.data.value;
					}
				}
			});
		},
		methods: {
			goLogin() {
				uni.navigateTo({
					url: '/pages/public/login'
				});
			},
			btns() {
				let token = this.$queue.getData('token');
				if (token) {
					let userId = this.$queue.getData('userId');
					uni.showLoading({
						title: '支付中'
					});
					this.$Request.postT('/api/order/wxPayMember?userId=' + userId).then(res => {
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.timestamp,
							nonceStr: res.noncestr,
							package: res.package,
							signType: res.signType,
							paySign: res.sign,
							success: function(res) {
								uni.showLoading({
									title: '支付成功'
								});
								uni.hideLoading();
								setTimeout(() => {
									uni.navigateBack();
								}, 1000);
							},
							fail: function(err) {
								uni.hideLoading();
								this.$queue.showToast('支付失败');
							}
						});
					})
				}else{
					this.goLogin();
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.vipTop {
		background: #222;
		padding: 0 30upx;
		padding-top: 100upx;
	}

	.top {
		background-image: linear-gradient(to bottom, #333333, #343434);
		border-radius: 30upx 30upx 0 0;
		padding: 30upx;
		position: relative;
	}

	.topTitle {
		width: 85%;
		position: absolute;
	}

	.title {
		font-size: 38upx;
		font-weight: 700;
		color: #E0B379;
	}

	.pingtai {
		font-size: 28upx;
		color: #fff;
		font-weight: 500;
		margin-top: 10upx;
	}

	.vipLogo {
		width: 100upx;
		margin-left: 84%;
		text-align: right;
	}

	.vip-center {
		padding: 30upx;
		background-color: #fff;
	}

	.center-title {
		margin: 30upx 0;
		font-size: 36upx;
		font-weight: 600;

	}

	.center-kuang {
		padding: 70upx 30upx;
		line-height: 40upx;
		border: 1px solid #DDB276;
		background: #FFF7EA;
		border-radius: 15upx;
		font-size: 28upx;
		color: #7C5B35;
		font-weight: 600;
	}

	.center-kuang view {
		display: inline-block;
		width: 50%;
	}

	.center-money {
		text-align: right;
		color: #E0B379;
	}

	.center-money span {
		font-size: 60upx;
	}

	.bottoms {
		background: #FFFFFF;
		margin-top: 30upx;
		padding: 30upx;
	}

	.bottoms-title {
		font-size: 36upx;
		font-weight: 600;
		color: #333;
		margin: 30upx 0;
	}

	.vip-bottom {

		width: 100%;

		bottom: 0;

		z-index: 10;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.payinfo {
		width: 100upx;
		text-align: center;

		.text {
			color: #666;
			font-size: 24rpx;
			margin-top: 14rpx;
		}

		image {
			width: 88rpx;
			height: 88rpx;
		}
	}

	.btns {
		position: fixed;
		bottom: 0;
		background-color: #E3B97D;
		color: #fff;
		border: 1px solid #E3B97D;
		border-radius: 0;
		width: 100%;
	}

	uni-button:after {
		border: none !important;
	}
</style>