shop_app/pages/vip/mine/index.vue

<template>
	<view class="vip" v-if="loading">
		<view class="vip-user">
			<image class="avatar" :src="avatar"></image>
			<view class="right">
				<view class="nickname">{{nickname}}</view>
				<block v-if="user.is_vip">
					<view class="name">
						<view :style="{backgroundImage: 'url(' + sp2 + ')'}" class="icon"></view>
						<text>{{vip_name}}会员</text>
					</view>
					<view class="time">会员有效期至:{{user.vip_end_time}}</view>
				</block>
				<view class="text" v-else>非会员</view>
			</view>
		</view>
		<view class="vip-box">
			<view class="title">如何成为{{vip_name}}会员</view>
			<view class="vip-box-item">
				<view :style="{backgroundImage: 'url(' + sp2 + ')'}" class="icon icon1"></view>
				<view class="right">
					<view>
						<view class="name">购买会员</view>
						<view class="text">{{vip_price}}元/{{vip_type == 1 ? '30' : '365'}}天</view>
					</view>
					<view class="btn" @click="toPage('/pages/vip/pay/index')">立即购买</view>
					<!-- <button v-else class="btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber($event)">立即购买</button> -->
				</view>
			</view>
			<view class="vip-box-item" v-if="share_on === 1">
				<view :style="{backgroundImage: 'url(' + sp2 + ')'}" class="icon icon2"></view>
				<view class="right">
					<view class="name">
						<view>邀请新用户下单</view>
						<view class="text">邀请一个新人下单自动加{{share_inviter_days}}天{{vip_name}}会员</view>
					</view>
					<view class="btn" @click="toPage('/pages/vip/share/index')">立即完成</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { ref, reactive, toRefs } from 'vue'
	import { getShopInfo, getUserPhone, login, userBind } from '@/components/common.js'
	import { get, post } from '@/api/request.js'
	import { sp2 } from '@/components/img.js'
	export default {
		setup() {
			const data = reactive({
				nickname: '',
				avatar: '',
				vip_on: 0,
				share_on: 0,
				vip_name: '',
				vip_price: '',
				vip_type: '',
				share_inviter_days: 0,
				user: {},
				loading: false,
				share_title: '',
				share_image: '',
				shareUrl: '',
				sale_id: '',
				s: '',
				u: '',
				id: '',
				is_authorized: uni.getStorageSync('is_authorized'),
				company_id: '',
				sp2: sp2
			})

			// 会员信息
			const getVipInfo = () => {
				getShopInfo().then((res) => {
					data.vip_on = res.vip_on
					data.share_on = res.share_on
					data.vip_name = res.vip_name
					data.vip_price = res.vip_price
					data.vip_type = res.vip_type
					data.share_inviter_days = res.share_inviter_days
					data.share_title = res.vip_share_title
					data.share_image = res.vip_share_image
				})
			}
			const getShareUrl = () => {
				post('/api/v1/user/share', {
					page: 'pages/vip/mine/index',
					query: ''
				}).then((res) => {
					data.shareUrl = res.data.path
				})
			}
			
			async function getUserVip() {
				data.loading = false
				let res = await get('/api/v1/user/home')
				data.user = res.data
				uni.setStorageSync('is_vip', res.data.is_vip)
				data.loading = true
			}

			const toPage = (url) => {
				uni.navigateTo({ url })
			}
			
			// 授权手机号码
			async function getPhoneNumber(e) {
				if(e.detail.errMsg == 'getPhoneNumber:ok') {
					await getUserPhone(e.detail).then((res) => {
						data.is_authorized = 1
					})
				}	
			}

			return {
				...toRefs(data),
				toPage,
				getVipInfo,
				getUserVip,
				getShareUrl,
				userBind,
				login,
				getPhoneNumber
			}
		},
		onShareAppMessage() {
			return {
				title: this.share_title,
				imageUrl: this.share_image,
				path: this.shareUrl
			}
		},
		async onLoad(options) {
			// await this.$onLaunched
			let scenne = uni.getEnterOptionsSync().scene
			const _this = this
			if (options) {
				Object.keys(options).map((key) => {
					if (key == 'id') {
						_this.id = options[key] || 0
					} else if (key == 'from') {
						_this.sale_id = options[key] || 0
					} else if (key == 's') {
						_this.s = options[key] || 0
					} else if (key == 'u') {
						_this.u = options[key] || 0
					} else if (key == 'company_id') {
						_this.company_id = options[key] || ''
					}
				})
			} else {
				_this.id = options.id
				_this.sale_id = options.from || 0
				_this.s = options.s || 0
				_this.u = options.u || 0
			}
			_this.nickname = uni.getStorageSync('nickname')
			_this.avatar = uni.getStorageSync('avatar')
			await _this.getVipInfo()
			let parmas = {
				from: _this.sale_id,
				s: _this.s,
				u: _this.u,
				group_id: _this.id,
				scene: scenne,
				company_id: _this.company_id
			}
			this.userBind(parmas)
			await _this.getShareUrl()
			await _this.getUserVip()
		}
	}
</script>

<style lang="scss" scoped>
	.vip {
		width: 100%;
		height: 100%;
		overflow: hidden;

		&-user {
			display: flex;
			margin: 25rpx 30rpx 0;
			background: #37384a;
			border-radius: 10rpx;
			padding: 40rpx 30rpx;

			.avatar {
				width: 140rpx;
				height: 140rpx;
				background: rgba(153, 153, 153, 0.39);
				border: 5rpx solid #ffffff;
				border-radius: 50%;
				margin-right: 24rpx;
			}

			.right {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.nickname {
					color: #fff;
					font-size: 40rpx;
				}
				.name {
					display: flex;
					align-items: center;
					font-size: 30rpx;
					color: #f2d29c;
					.icon{
						width: 17.5px;
						height: 17.5px;
						margin-right: 10rpx;
						background-repeat: no-repeat;
						background-size: 339px 306px;
						background-position: -121.25px -99.75px;
					}
				}

				.text {
					font-size: 30rpx;
				}
				.time {
					font-size: 22rpx;
				}
				.time,
				.text {
					color: #9697ae;
				}
			}
		}

		&-box {
			height: 100%;
			padding: 50rpx 30rpx 0;
			background-color: #fff;

			.title {
				font-size: 36rpx;
			}

			&-item {
				display: flex;
				align-items: center;
				padding: 40rpx 0;
				border-bottom: 1px solid #e5e5e5;
				.icon{
					width: 47px;
					height: 47px;
					background-repeat: no-repeat;
					background-size: 678px 612px;
					&.icon1{
						background-position: -262px -31.5px;
					}
					&.icon2{
						background-position: -326.5px -31.5px;
					}
				}
				.right {
					display: flex;
					flex: 1;
					justify-content: space-between;
					font-size: 30rpx;
					padding-left: 24rpx;
					box-sizing: border-box;
					.name {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
					}

					.text {
						font-size: 26rpx;
						color: #9a9a9a;
						margin-top: 15rpx;
					}

					.btn {
						font-size: 28rpx;
						color: #fbe6c3;
						width: 160rpx;
						height: 48rpx;
						line-height: 48rpx;
						text-align: center;
						background-color: #353648;
						border-radius: 28rpx;
					}
				}
			}
		}
	}
</style>