usercenter.vue 5.1 KB
<template>
	<view class="content">
		<view class="usertop commnonpadding">
			<view class="userhsang flexone">
				<view class="usershangleft">
					<image src="../../static/userpic.png" mode=""></image>
				</view>
				<view class="usershangright">
					<view class="righttop flexone">
						<view class="vip flexthree">
							<view class="vipimg">
								<image src="../../static/huiyuan.png" mode=""></image>
							</view>
							<view class="vipnum">vip5</view>
						</view>
						<view class='usernicheng'>我是用户昵称</view>
					</view>
					<view class="rightbot">会员到期时间:2019-10-10</view>

				</view>
			</view>
			<view class="viprank flextwo">
				<view class="viprankleft">VIP5</view>
				<view class="vipmiddle">
					<view class="vipmiddlenei boxsizing">还需6999经验升级到VIP6</view>
				</view>
				<view class="viprankleft">VIP6</view>
			</view>

		</view>
		<view class="tapnav flextwo huiyuannav boxsizing">
			<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">
			<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">立即开通</view>
			</view>
		</view>

		<view class="huiyuanimg" v-else>
			<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 class="huiyuanbot boxsizing" v-if="sel==1" @click="behuiyuan">
			<view class="behuiyuanbtn">成为企业会员</view>
		</view>
		<view class="huiyuanbot boxsizing" v-if="sel==2">
			<view class="behuiyuanbtn">您已经成为企业会员</view>
		</view>
		
		<!-- 购买弹层 -->
		<view class="register" @click="hidebuy" v-if="buyshow">
			<view class="buywrap boxsizing">
				<view class="buyname">订单总额</view>
				<view class="buymoney">3600</view>
				<view class='buybox'>
					<view class="buyitem boxsizing flextwo">
						<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/selactive.png" mode=""></image>
						</view>
					</view>
					<view class="buyitem boxsizing flextwo">
						<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/selactive.png" mode=""></image>
						</view>
					</view>
					<view class="buyitem boxsizing flextwo">
						<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/selactive.png" mode=""></image>
						</view>
					</view>
					<view class="buyitem boxsizing flextwo">
						<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/selactive.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="buybtn">确认支付(¥2560.00)</view>
			</view>
		</view>
	</view>
</template>

<script>
	import app from "../../App.vue";
	export default {
		data() {
			return {
				sel: 1,
				buyshow:false
			}
		},
		onLoad() {



		},
		methods: {
			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;
	}
</style>