im/pages/user/vip/vip.vue

<template>
	<view>
		<uni-nav-bar 
			left-icon="back" 
			title="我的会员"
			@clickLeft="goto(1)"
			>
		</uni-nav-bar>
		<view class="m-card n-ms-base n-ps-all-ll n-radius-base n-position-relative">
			<view class="n-flex-row n-align-center">
				<image class="m-avatar" :src="userinfo.avatar"></image>
				<view class="n-ms-left-base">
					<text class="m-card-text n-size-l n-weight-7">{{userinfo.nickname}}</text>
					<text class="m-card-text n-size-ss n-weight-7 n-ms-top-ss">{{userinfo.username}}</text>
				</view>
			</view>
			<text class="m-card-text n-size-s" :style="{marginTop:'50rpx'}">会员到期时间：{{userinfo.role_id==2 ? userinfo.expire_at:'未开通'}}</text>
			<image class="m-card-crown n-position-absolute" src="/static/images/user/member_crown.png" mode="widthFix"></image>
		</view>
		
		<swiper class="swiper" circular :indicator-dots="false" :autoplay="false">
			<swiper-item>
				<view class="swiper-item uni-bg-red">A</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item uni-bg-green">B</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item uni-bg-blue">C</view>
			</swiper-item>
		</swiper>
		
		<u-gap></u-gap>
		<view class="n-ps-base">
			<view class="n-flex-row n-ms-top-l n-justify-center">
				<view class="n-flex-row n-wrap-wrap n-align-start n-ms-top-base n-align-center">
					<view>
						<u-checkbox-group activeColor="#efcf95" shape="circle">
							<u-checkbox name="1" size="17" @change="change"></u-checkbox>
						</u-checkbox-group>
					</view>
					<text class="n-size-ss n-lh-base n-color-third">已阅读并同意</text>
					<text class="n-size-ss n-lh-base n-color-link" v-for="(item, idx) in contractList" :key="idx" 
						@click="goto(item.router)" :style="{color:'#8e6927'}">《{{item.title}}》</text>
				</view>
			</view>
			<view class="n-flex-row">
				<u-button class="n-flex-1 n-ms-top-base n-ms-right-base" v-if="config.member_link" @click="goto('/pages/common/webview' + queryParams({src:config.member_link,title:'购买激活码'}))" text="购买激活码" shape="circle" color="#fdc384" throttleTime="1000" plain></u-button>
				<u-button class="n-flex-1 n-ms-top-base" @click="showPopup" text="兑换会员" shape="circle" color="linear-gradient(to right, #fee1b7, #fdc384)" throttleTime="1000"></u-button>
			</view>
		</view>
		<!-- 兑换会员弹窗 -->
		<MPopup ref="popup" @submit="submit" title="兑换会员" place="请输入激活码" padding="l" buttonText="立即兑换" buttonColor="#fdc384"></MPopup>
	</view>
</template>

<script>
	import MPopup from "./m-popup";
	import util from "@/util/index.js"
	export default {
		components:{MPopup},
		data() {
			return {
				current: 0,
				userinfo: {},
				thaliList: [],
				powerList: [],
				contractList: [],
				contractValue: false
			}
		},
		computed: {
			selfInfo() {
				return this.$store.getters.storeSelfInfo;
			},
			config() {
				return this.$store.getters.config;
			},
		},
		onLoad() {
			// 获取用户信息
			this.getUserinfo()
			// 获取会员套餐
			this.getMemberThali()
			// 获取会员权益
			this.getMemberPower()
			this.contractList = [
				{title:'用户协议', router:'/pages/common/webview' + this.queryParams({src:'contract', title:'用户协议'})},
			];
		},
		methods: {
			goto:util.goto,
			queryParams(){
				return "1";
			},
			// 数据提交
			submit(code) {
				return 1;
				memberExchange({code:code}, {custom:{auth:true}}).then(res=>{
					// 更新用户信息
					this.getUserinfo(true)
				})
			},
			// 展示弹窗
			showPopup() {
				if(!this.contractValue){
					return showToast('请阅读并同意用户协议')
				}
				this.$refs['popup'].open()
			},
			// 获取用户信息
			async getUserinfo(refresh) {
				await this.$store.dispatch("user/updateBusinessInfo");
			},
			// 获取会员套餐
			getMemberThali() {
				return 1;
				uni.$u.http.post('/friendcircle/create',param).then(res => {
				});
				getMemberThali((res)=>{ this.thaliList = res })
			},
			// 获取会员套餐
			getMemberPower() {
				return 1;
				getMemberPower((res)=>{ this.powerList = res })
			},
			change(e){
				console.log(e);
			}
		},
		onPullDownRefresh() {
			// 获取用户信息
			this.getUserinfo()
			// 获取会员套餐
			this.getMemberThali()
			// 获取会员权益
			this.getMemberPower()
			// 获取系统配置
			this.config = getApp().globalData.config
			uni.stopPullDownRefresh();
		}
	}
</script>

<style lang="scss" scoped>
	.m-card{
		margin-top: -160rpx;
		background-image: linear-gradient(to right, #feebc6, #efcf95);
		&-text{
			color: #8e6927;
		}
		&-crown{
			right: 10rpx;
			width: 220rpx;
			bottom: 10rpx;
			opacity: 0.2;
		}
	}
	.m-thali{
		border: 1px solid #f1f1f1;
		&-active{
			background-color: #fef8ec;
			border: 1px solid #f4c38b;
		}
	}
	.m-navbg{
		height: 200rpx;
		background-color: #282623;
	}
	.m-avatar{
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
	}
</style>