<template>
	<view class="content">
		<view class="usertop commnonpadding">
			<view class="userhsang flexone">
				<view class="usershangleft">
					<image :src="avatar==''?'../../static/headtou.png':avatar" mode=""></image>
				</view>
				<view class="usershangright">
					<view class="righttop flexone">
						<view class="vip flexthree" v-if="userinfo.is_card==1||userinfo.is_vip==1||userinfo.is_company_vip==1">
							<view class="vipimg" v-if="userinfo.is_card==1">
								<image src="../../static/huiyuan.png" mode=""></image>
							</view>

							<view class="vipnum" v-if="userinfo.is_vip==1">{{userinfo.level.name1}}</view>
							<view class="vipnum" v-if="userinfo.is_company_vip==1">{{userinfo.level.name2}}</view>
						</view>

						<view class="usernicheng" v-if="nickname==''">暂无昵称</view>
						<view class="usernicheng" v-else>{{nickname}}</view>
					</view>
					<view class="rightbot" v-if="userinfo.vip_pasttime!=null&&sel==1">会员到期时间：{{userinfo.vip_pasttime}}</view>

				</view>
			</view>
			<view class="viprank flextwo" v-if="sel==1">
				<view class="viprankleft">{{userinfo.level.name1}}</view>
				<view class="vipmiddle">
					<view class="vipmiddlenei boxsizing" :style="{width:userinfo.percentage+'%'}">
						<view class="remain">还需{{userinfo.residue_exp}}经验升级到VIP6</view>
					</view>
				</view>
				<view class="viprankleft viprankleftk">{{userinfo.next_level.name1}}</view>
			</view>
			<view class="viprank flextwo" v-else>
				<view class="viprankleft">{{userinfo.level.name2}}</view>
				<view class="vipmiddle">
					<view class="vipmiddlenei boxsizing" :style="{width:userinfo.percentage+'%'}">
						<view class="remain">还需{{userinfo.residue_exp}}经验升级到VIP6</view>
					</view>
				</view>
				<view class="viprankleft viprankleftk">{{userinfo.next_level.name2}}</view>
			</view>

		</view>
		<view class="tapnav flextwo huiyuannav boxsizing" v-if="userinfo.is_company_vip==2">
			<view class="tapnavitem" :class="sel==1?'huiyuanactive':''" @click="selhui" :data-id="1">个人会员</view>
			<view class="tapnavitem" :class="sel==2?'huiyuanactive':''" @click="selhui" :data-id="2">企业会员</view>
		</view>
		<view class="huiyuanimg" v-if="sel==1&&userinfo.is_company_vip==2">
			<image src="../../static/vipbg.png" mode=""></image>
			<view class="huiyuannei flextwo">
				<view class='huiyuanneileft flexone'>
					<view class="zuanshi">
						<image src="../../static/zuanshi.png" mode=""></image>
					</view>
					<view class="huiprice">
						<view class="huimoney">¥1000</view>
						<view class="huimonth">12个月</view>
					</view>
				</view>
				<view class="huiyuanright" @click="openhuiyuan">{{userinfo.is_vip==1?'续费':'立即开通'}}</view>
			</view>
		</view>

		<view class="huiyuanimg" v-if="sel==2&&userinfo.is_company_vip==1">
			<image src="../../static/vipbg.png" mode=""></image>
			<view class="huiyuannei flextwo ">
				<view class='huiyuanneileft flexone behuiyuanbox'>
					<view class="zuanshi">
						<image src="../../static/zuanshi.png" mode=""></image>
					</view>
					<view class="behuiyuan">您已成为企业会员</view>

				</view>

			</view>
		</view>
		<view class="tequan boxsizing">会员特权</view>
		<view class="commnonpadding huiyuanbox">
			<view class="huiyuanitem boxsizing flexone">
				<view class="huiyuanitemleft">
					<image src="../../static/jifen.png" mode=""></image>
				</view>
				<view class="huiyuanitemname">购买商品得积分</view>
			</view>
			<view class="huiyuanitem boxsizing flexone">
				<view class="huiyuanitemleft">
					<image src="../../static/zhekou.png" mode=""></image>
				</view>
				<view class="huiyuanitemname">店铺消费享折扣</view>
			</view>
		</view>

		<view v-if="sel==2&&userinfo.is_company_vip==2">
			<view class="huiyuanbot boxsizing" @click="behuiyuan">
				<view class="behuiyuanbtn">成为企业会员</view>
			</view>
			<!-- <view class="huiyuanbot boxsizing" >
				<view class="behuiyuanbtn">您已经成为企业会员</view>
			</view> -->
		</view>


		<!-- 购买弹层 -->
		<view class="register" @click="hidebuy" v-if="buyshow">
			<view class="buywrap boxsizing" @click.stop="hidebuyk">
				<view class="buyname">总额</view>
				<view class="buymoney">1000</view>
				<view class='buybox'>
					<view class="buyitem boxsizing flextwo" @click.stop="paytype" :data-id="1">
						<view class="buyitemleft flexone">
							<view class="buyleftimg">
								<image src="../../static/weixin.png" mode=""></image>
							</view>
							<view class="buyitemname">微信支付</view>
						</view>
						<view class="selimg">
							<image src="../../static/selright.png" mode="" v-if="pay_type==1"></image>
							<image src="../../static/meisel.png" mode="" v-else></image>
						</view>
					</view>
					<view class="buyitem boxsizing flextwo" @click.stop="paytype" :data-id="2">
						<view class="buyitemleft flexone">
							<view class="buyleftimg">
								<image src="../../static/zhifubao.png" mode=""></image>
							</view>
							<view class="buyitemname">支付宝</view>
						</view>
						<view class="selimg">
							<image src="../../static/selright.png" mode="" v-if="pay_type==2"></image>
							<image src="../../static/meisel.png" mode="" v-else></image>
						</view>

					</view>

					<view class="buyitem boxsizing flextwo" @click.stop="paytype" :data-id="3">
						<view class="buyitemleft flexone">
							<view class="buyleftimg">
								<image src="../../static/yue.png" mode=""></image>
							</view>
							<view class="buyitemname">余额支付</view>
						</view>
						<view class="selimg">
							<image src="../../static/selright.png" mode="" v-if="pay_type==3"></image>
							<image src="../../static/meisel.png" mode="" v-else></image>
						</view>
					</view>
					<view class="buyitem boxsizing flextwo" @click.stop="paytype" :data-id="4">
						<view class="buyitemleft flexone">
							<view class="buyleftimg">
								<image src="../../static/baitiao.png" mode=""></image>
							</view>
							<view class="buyitemname">赊吧支付</view>
						</view>
						<view class="selimg">
							<image src="../../static/selright.png" mode="" v-if="pay_type==4"></image>
							<image src="../../static/meisel.png" mode="" v-else></image>
						</view>
					</view>
				</view>
				<view class="buybtn" @click="paynow">确认支付（￥1000.00）</view>
			</view>
		</view>
	</view>
</template>

<script>
	import app from "../../App.vue";
	export default {
		data() {
			return {
				sel: 1,
				buyshow: false,
				userinfo: '',
				nickname: '',
				avatar: '',
				pay_type: '',
				order_id: ''
			}
		},
		onLoad() {
			this.getuserinfo()


		},
		methods: {
			hidebuy() {
				this.buyshow = false
			},
			hidebuyk() {

			},


			// 选择支付方式
			paytype(e) {
				this.pay_type = e.currentTarget.dataset.id
			},

			paynow() {
				let that = this;
				if (that.pay_type == '') {
					uni.showToast({
						title: "请选择支付方式",
						icon: "none"
					})
					return false
				}
				var url = 'member/create_order';
				var params = {
					pay_type: that.pay_type
				}
				console.log('7766554', params)
				app.post(url, params).then((res) => {
					console.log(res);
					that.order_id = res.data.data.order_vip_id;
					that.paymoney();

				}).catch((err) => {

				})
			},

			// 支付接口
			paymoney() {
				let that = this;
				var url = 'member/pay';
				var params = {
					order_vip_id: that.order_id
				}

				console.log(params)
				app.post(url, params, "post").then((res) => {
					console.log(res)

					if (that.pay_type == 2) {
						// 支付宝支付
						uni.requestPayment({
							provider: 'alipay',
							orderInfo: res.data.data.result,
							success(r) {
								console.log(r)
							}
						})
					} else {
						uni.showToast({
							title: '支付成功',
							icon: 'none'
						})
						that.buyshow=false;
						that.getuserinfo();
					}
					//   	uni.showToast({
					//   		title:'支付成功',
					// 	icon:'none'
					//   	})	
					// setTimeout(function(){
					// 	uni.navigateTo({
					// 		url:'/pages/usercenter/myOrder'
					// 	})
					// },1500)

				}).catch((err) => {
					console.log(err)
					uni.showToast({
						title: err.msg,
						icon: 'none'
					})

				})
			},


			// 获取用户信息
			getuserinfo() {
				let that = this;
				var url = 'member/index';
				var params = {}
				console.log('7766554', params)
				app.post(url, params).then((res) => {
					console.log(res);
					that.userinfo = res.data.data;
					that.nickname = res.data.data.nickname;
					that.avatar = res.data.data.avatar;


				}).catch((err) => {

				})
			},
			selhui(e) {
				this.sel = e.currentTarget.dataset.id;
			},
			behuiyuan() {
				uni.navigateTo({
					url: './companyshenhe'
				})
			},
			openhuiyuan() {
				this.buyshow = true
			},
		}

	}
</script>

<style>
	@import url('../../base/usercenter');


	page {
		background: #F9F9F9;
	}

	.viprankleft {
		width: 100rpx;

	}

	.viprankleftk {
		margin-left: 25rpx;
	}

	.vipmiddlenei {
		position: relative;
	}

	.remain {
		width: 500rpx;
		position: absolute;
		left: 0;
		bottom: 0
	}
</style>