<template>
	<view>
		<view class="hm-p-tb-20">
			<u-swiper :list="userInfo.v.grade.vip" keyName="card_cover" @change="change" :autoplay="false" previousMargin="30"
				nextMargin="30" radius="8" indicator circular>
			</u-swiper>
		</view>
		<view class="title">
			<view class="hm-dis-block-inline">
				<u-icon name="level" size="30" color="#333" bold></u-icon>
			</view>
			<text class="lv">{{lv+1}}</text>会员特权<text class="discount">需要{{userInfo.v.grade.vip[lv].score}}成长值</text>
		</view>
		<view class="hm-p-lr-20">
			<view class="menu">
				会员权益
				<view class="navbar-list"  v-if="userInfo.v.grade.vip_discount == 1 && userInfo.v.grade.vip[lv].discount < 100">
					<image src="/static/user/discount.png"></image>{{userInfo.v.grade.vip[lv].discount / 10}}折特权
				</view>
				<view class="navbar-list" :class="userInfo.v.grade.vip_discount == 1 && userInfo.v.grade.vip[lv].discount < 100 && userInfo.v.grade.vip[lv].free_delivery == 1?'hm-border-t':''" v-if="userInfo.v.grade.vip[lv].free_delivery == 1">
					<image src="/static/user/delivery.png"></image>免配送费
				</view>
			</view>
			<view class="menu">
				升级礼包
				<view v-for="(item,index) in userInfo.v.grade.vip[lv].gift" :key="index">
				<view class="navbar-list" :class="index > 0 ?'hm-border-t':''">
					<image src="/static/user/coupon.png"></image>{{item.name}}
				</view>
				</view>
			</view>
		</view>
		<!-- 技术支持 -->
		<view class="hm">
			{{applet.copyright}} <text class="v">V{{applet.version}}</text>
		</view>
		<view v-if="action == 'vip'" class="hm-footer-fixed">
			<view class="hm-p-lr-b25 hm-w-b100">
				<view v-if="userInfo.v.grade.buy_price > 0">
					<!-- #ifndef H5 -->
					<u-button @click="payment" type="success" :text="'支付￥'+userInfo.v.grade.buy_price+'，开通会员'"></u-button>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<u-button @click="cashier" type="success" :text="'支付￥'+userInfo.v.grade.buy_price+'，开通会员'"></u-button>
					<!-- #endif -->
				</view>
				<view v-else>
					<u-button @click="openVip()" type="success" text="免费开通会员"></u-button>
				</view>
			</view>
		</view>
		<u-popup :show="cashier_show" @close="cashier_show = false" mode="center" round="8" :closeable="true">
			<view class="hm-popup">
				<view class="hm-p-b-20 hm-border-b hm-text-center">支付收银台</view>
				<view class="hm-p-tb-50 hm-text-center">
					<view class="hm-font-b hm-col-0">
						￥<text class="hm-font-100">{{userInfo.v.grade.buy_price}}</text>
					</view>
					<view class="hm-font-28 hm-col-content">购买会员卡</view>
				</view>
				<view class="hm-p-20 hm-border-t" @click="type = 30">
					<view class="hm-m-r-10 hm-dis-block-inline">
						<u-icon name="weixin-circle-fill" size="25" color="#19be6b"></u-icon>
					</view>
					微信
					<view class="hm-fr hm-dis-block-inline">
						<u-icon name="checkbox-mark" v-if="type==30" size="25" color="#fa3534"></u-icon>
					</view>
				</view>
				<view class="hm-p-20 hm-border-t hm-border-b" @click="type = 40">
					<view class="hm-m-r-10 hm-dis-block-inline">
						<u-icon name="zhifubao-circle-fill" size="25" color="#2979ff"></u-icon>
					</view>
					支付宝
					<view class="hm-fr hm-dis-block-inline">
						<u-icon name="checkbox-mark" v-if="type==40" size="25" color="#fa3534"></u-icon>
					</view>
				</view>
				<view class="hm-p-t-50">
					<view class="hm-p-lr-b25">
						<u-button type="error" @click="payment" text="确定支付"></u-button>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const App = getApp();

	export default {
		data() {
			return {
				action:'vip',
				userInfo: {},
				applet: {},
				lv: 0,
				type: 30,//默认30微信支付 40支付宝支付
				cashier_show: false,//收银台
			};
		},

		components: {},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			let _this = this;
			_this.action = options.action;
			if(options.action == 'vip'){
				uni.setNavigationBarTitle({
					title: '开通会员'
				});
			}else{
				uni.setNavigationBarTitle({
					title: '会员权益'
				});
			}
			// #ifdef MP-ALIPAY
			_this.type = 40;
			//#endif
			_this.applet = uni.getStorageSync('applet');
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
			let _this = this;
			_this.getUserDetail();
		},

		methods: {
			/**
			 * 打开收银台
			 */
			cashier:function(){
				let _this = this;
				let money = _this.userInfo.v.grade.buy_price;
				if (money == '') {
					App.showError('付款金额不可为空');
					return false;
				}
				_this.cashier_show = true;
			},
			/**
			 * 购买会员
			 */
			payment(){
				let _this = this;
				let money = _this.userInfo.v.grade.buy_price;
				if (money == '') {
					App.showError('付款金额不可为空');
					return false;
				}
				let callback = function(result) {
					_this.cashier_show = false;
					if (result.code === -10) {
						App.showError(result.msg);
						return false;
					}
					// 发起微信支付
					// #ifdef MP-WEIXIN
					uni.requestPayment({
						timeStamp: result.data.timeStamp,
						nonceStr: result.data.nonceStr,
						package: result.data.package,
						signType: result.data.signType,
						paySign: result.data.paySign,
						success: function(res) {
							App.showSuccess('支付成功', function() {
								uni.navigateBack();
							});
						},
						fail: function(res) {
							let msg = '支付失败';
							if(res.errMsg == 'requestPayment:fail cancel'){
								msg = '用户取消支付';
							}
							App.showError(msg);
						}
					});
					//#endif
					//#ifdef H5
					// #ifdef MP-WEIXIN
					window.location.href = result.data.h5_url;
					//#endif
					//#endif
					// #ifdef MP-ALIPAY
					uni.requestPayment({
						orderInfo: result.data.trade_no,
						success: function(res) {
							if(res.resultCode != '9000'){
								App.showError(res.memo);
								return false;
							}
							App.showSuccess('支付成功', function() {
								uni.navigateBack();
							});
						}
					});
					//#endif
				};
				// 显示loading
				uni.showLoading({
					title: '正在处理...'
				});
				App._post_form('user.index/buyVip', {
					money: money,
					type: _this.type
				}, function(result) {
					callback(result);
				});
			},
			/**
			 * 开通会员
			 */
			openVip(){
				let _this = this;
				// 显示loading
				uni.showLoading({
					title: '正在处理...'
				});
				App._post_form('user.index/openVip', {}, function(result) {
					uni.hideLoading();
					App.showSuccess(result.msg, function() {
						uni.navigateBack();
					});
				});
			},
			/**
			 * 获取当前用户信息
			 */
			getUserDetail() {
				let _this = this;
				App._get('user/detail', {}, result => {
					_this.userInfo = result.data.detail;
				});
			},
			change(e) {
				let _this = this;
				_this.lv = e.current;
			}

		}
	};
</script>
<style lang="scss" scoped>
	.title{
		font-weight: bold;
		color: #333;
		text-align: center;
		padding-bottom: 20rpx;
		.lv {
			margin: 0rpx 10rpx 0rpx -15rpx;
		}
		.discount{
			color: #999;
			font-size: 24rpx;
			margin-left: 10rpx;
			font-weight: normal;
		}
	}
	.menu {
		margin-top: 20rpx;
		border-radius: 8rpx;
		padding: 20rpx;
		background-color: #fff;
		.navbar-list {
			padding: 20rpx;
			line-height: 50rpx;
			image {
				float: left;
				margin-right: 20rpx;
				height: 50rpx;
				width: 50rpx;
			}
		}
	}
</style>
