shicai/pages/user/member.vue

<template>
	<view class="container">
		<view class="member">
			<view class="portrait"><image :src="userInfo.avatar"></image></view>
			<view class="name">{{userInfo.nickname}}</view>
			<view class="status" v-if="userInfo.level_info.grade == 100">你已开通美卡</view>
			<view class="status" v-if="userInfo.level_info.grade < 100">尚未开通美卡</view>
		</view>
		<view class="assets">
			<view class="title">
				<image class="" src="/static/img/img33.png"></image>
				<view class="name">
					开通
					<text>VIP</text>
					即可尊享美卡专属特权
				</view>
			</view>
			<view class="privileges flex">
				<view class="privileges_list" v-for="ls in list">
					<view class="img"><image :src="ls.img"></image></view>
					<view class="text">{{ ls.text }}</view>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="card-box" v-bind:class="{ active_card_box: ls.id == current }" v-for="ls in card" @click="change(ls.id)">
				<view class="title">{{ ls.title }}</view>
				<view class="price" v-bind:class="{ active_price: ls.id == current }">
					￥
					<text>{{ ls.price }}</text>
				</view>
				<view class="ot-price">￥{{ ls.ot_price }}</view>
				<view class="icon">
					<text v-bind:class="{ active_icon: ls.id == current }">{{ ls.text }}</text>
				</view>
			</view>
		</view>
		<view class="method">
			<view class="pay">支付方式</view>
			<view class="method-list">
				<radio-group @change="tabRadio">
					<label>
						<view class="box">
							<uni-icons type="weixin" color="#00B848" size="25" />
							<view class="title-box">
								<view class="title"><text>微信支付</text></view>
							</view>
							<view class="right"><radio value="weixin" size='25' color="#5dbc7c" :checked="type == 'weixin'" /></view>
						</view>
					</label>
				</radio-group>
			</view>
		</view>
		<view class="checkbox">
			<radio @click="checked = !checked" color="#06B163" :checked="checked" />已阅读并同意
			<text>《美卡会员服务协议》</text>
		</view>
		<view class="submit" :class="{ clickbg: payLoding }" @click="!payLoding ? submit() : ''">立即支付</view>
	</view>
</template>
<script>
import {recharge } from '@/api/user.js';
import { getUserInfo } from '@/api/login.js';
import checkbox from '@/components/evan-checkbox/evan-checkbox.vue'
import { mapState } from 'vuex';
export default {
	data() {
		return {
			current: 5,
			userInfo: '',
			type: 'weixin', //提现方式
			checked:false,
			payLoding: false, //判断是否支付中
			list: [
				{
					img: '/static/img/img51.png',
					text: '美卡专享价'
				},
				{
					img: '/static/img/img52.png',
					text: '美卡优惠卡包'
				},
				{
					img: '/static/img/img53.png',
					text: '免配送券'
				},
				{
					img: '/static/img/img54.png',
					text: '更多'
				}
			],
			card: [
				{
					id: '5',
					title: '年卡',
					price: '88',
					ot_price: '298',
					text: '立省880元'
				}
			]
		};
	},
	onLoad() {
		this.loadDate();
	},
	computed: {
		// #ifdef H5
		...mapState(['weichatObj'])
		// #endif
	},
	onShow() {},
	methods: {
		loadDate() {
			getUserInfo({}).then(({ data }) => {
				this.userInfo = data;
			});
		},
		//提交美卡
		submit(){
			let obj =this;
			if(obj.checked == false){
				obj.$api.msg('请先阅读并同意美卡服务协议');
				return;
			}
			// 支付中
			obj.payLoding = true;
			recharge({
				level_id:3,
				spread:obj.userInfo.spread_uid
			}).then(( data ) => {
				console.log(data,'jsConfig')
				let da = e.data.result.jsConfig;
				let dataConfig = {
					// #ifdef H5
					timestamp: da.timestamp,
					// #endif
					// #ifdef MP
					timeStamp: da.timestamp,
					// #endif
					nonceStr: da.nonceStr,
					package: da.package,
					signType: da.signType,
					paySign: da.paySign,
					success: function(res) {
						uni.showToast({
							title: '开通美卡成功！',
							type: 'top',
							duration: 500,
							icon: 'none'
						});
					},
					fail: () => {
						uni.showToast({
							title: '支付失败！',
							type: 'top',
							duration: 500,
							icon: 'none'
						});
					}
				};
				// #ifdef H5
				obj.weichatObj.chooseWXPay(dataConfig);
				// #endif
				obj.payLoding = false;
			}).catch(e => {
					obj.payLoding = false;
					console.log(e);
				});
		},
		//商品种类切换
		change(item) {
			let id = item;
			this.current = id;
		},
		checkbox(e){
			this.checked = e;
		},
		// 切换选中对象
		tabRadio(e) {
			this.type = e.detail.value;
		}
	}
};
</script>

<style lang="scss">
page {
	height: 100%;
	background-color: #ffffff;
	.container {
		height: 100%;
	}
}
.clickbg {
	background-color: $color-gray !important;
}
.member {
	background: #1c2532;
	width: 100%;
	text-align: center;
	color: #ffffff;
	padding: 64rpx 0rpx;
	.portrait {
		width: 100%;
		height: 120rpx;
		text-align: center;
		border-radius: 100%;
		image {
			width: 120rpx;
			height: 100%;
			border-radius: 100%;
		}
	}
	.name {
		padding-top: 38rpx;
	}
	.status {
		font-size: 24rpx;
		padding-top: 12rpx;
	}
}
.assets {
	background: #ffffff;
	width: 100%;
	padding: 35rpx 0rpx;
	text-align: center;
	.title {
		width: 100%;
		height: 3rpx;
		margin: 0rpx auto;
		image {
			width: 100%;
			height: 100%;
		}
		.name {
			position: relative;
			bottom: 35rpx;
			font-size: 24rpx;
			color: #2a3344;
			text {
				font-size: 43rpx;
				font-weight: bold;
				font-style: italic;
			}
		}
	}
	.list {
		margin-top: 100rpx;
		padding: 0rpx 120rpx;
		font-size: 24rpx;
		margin-bottom: 40rpx;
		.tpl {
			color: #666666;
			.tip {
				font-size: 40rpx;
				font-weight: bold;
				color: #303133;
				padding-bottom: 15rpx;
				text {
					font-size: 24rpx;
					font-weight: normal;
				}
			}
		}
	}
	.privileges {
		margin-top: 100rpx;
		font-size: 24rpx;
		margin-bottom: 40rpx;
		padding: 0rpx 42rpx;
		.privileges_list {
			text-align: center;
			.img {
				height: 80rpx;
				text-align: center;
				image {
					width: 80rpx;
					height: 100%;
				}
			}
			.text {
				padding-top: 15rpx;
			}
		}
	}
}
.card {
	width:225rpx;
	margin: 0rpx auto;
	.active_card_box {
		background: #faf3d7 !important;
	}
	.card-box {
		background: #ffffff;
		border: 2rpx solid rgba(251, 232, 157, 1);
		text-align: center;
		padding: 45rpx 25rpx;
		border-radius: 25rpx;
		.title {
			font-size: 32rpx;
			font-weight: 500;
			padding-bottom: 15rpx;
		}
		.price {
			font-weight: bold;
			color: #333333;
			font-size: 41rpx;
			text {
				font-size: 66rpx;
			}
		}
		.active_price {
			color: #ff383e;
		}
		.ot-price {
			color: #9a5a12;
			font-size: 33rpx;
			font-weight: 500;
			// text-decoration:line-through;
			color: rgba(154, 90, 18, 1);
			opacity: 0.35;
		}
		.icon {
			text {
				border: 2rpx solid #ff383e;
				color: #ff383e;
				font-size: 22rpx;
				padding: 15rpx 25rpx;
				border-radius: 25rpx;
			}
			.active_icon {
				background-color: #ff383e;
				border: none;
				color: #ffffff;
			}
		}
	}
}
.method {
	margin-top: 80rpx;
	.pay {
		padding-left: 25rpx;
		font-weight:bold;
		color:rgba(51,51,51,1);
		font-size: 32rpx;
	}
	.method-list {
		padding-left: 30rpx;
		padding-right: 30rpx;
		margin-top: 30rpx;
		background-color: #ffffff;
		.box {
			display: flex;
			align-items: center;
			width: 100%;
			height: 120rpx;
			border-bottom: 1px solid $border-color-light;
			border-top: 1px solid $border-color-light;
			.icon {
				font-size: 48rpx;
				padding-right: 20rpx;
				.icon-img {
					height: 50rpx;
					width: 50rpx;
				}
			}
			.title-box {
				flex-grow: 1;
				text-align: left;
				padding-left: 15rpx;
				.title {
					font-size: 32rpx;
					color: #333333;
				}
				.node {
					font-size: $font-sm;
					color: $font-color-light;
				}
			}
		}
	}
}
.checkbox{
	width: 100%;
	padding: 50rpx 55rpx;
	margin-top: 150rpx;
	font-size: 24rpx;
	text{
		color: #29CC66;
	}
}
.submit{
	width: 88%;
	margin: 0rpx auto;
	background:linear-gradient(180deg,rgba(0,184,72,1),rgba(44,230,114,1));
	border-radius:40px;
	color: #FFFFFF;
	text-align: center;
	padding: 20rpx 0rpx;
	margin-bottom: 60rpx !important;
}
</style>