shop_app/pages/vip/intro/index.vue

<template>
	<view class="whole">
		<view @click="toVipPage">
			<image v-for="item in imgList" :src="item" mode="widthFix" class="img"></image>
		</view>
		<view class="btn" v-if="vip_on" @click="toVipPage">{{is_vip ? '续费' : '开通会员'}}</view>
	</view>
</template>

<script>
	import { ref, reactive, toRefs } from 'vue'
	import { get, post } from '@/api/request.js'
	import { whetherLogin } from '@/components/common.js'
	
	export default {
		setup() {
			const data = reactive({
				imgList: [],
				is_vip: uni.getStorageSync('is_vip'),
				color1: '',
				color2: '',
				vip_on: 0
			})

			// 会员信息
			const getVipInfo = () => {
				get('/api/app/shop').then((res) => {
					if(uni.getStorageSync('vip_detail_on') === 0 || res.data.vip_detail_image.length === 0) {
						if(whetherLogin()) {
							uni.redirectTo({ url: '/pages/vip/mine/index' })
						} else {
							uni.redirectTo({ url: '/pages/user/login' })
						}
						return
					}
					uni.setStorageSync('vip_on', res.data.vip_on)
					data.vip_on = res.data.vip_on
					data.imgList = res.data.vip_detail_image
					data.color1 = res.data.extendInfo && res.data.extendInfo.vip_btn_color || '#F8EDCE'
					data.color2 = res.data.extendInfo && res.data.extendInfo.vip_text_color || '#58341E'
				})
			}

			const toVipPage = () => {
				if(whetherLogin()) {
					uni.navigateTo({ url: '/pages/vip/mine/index' })
				} else {
					uni.navigateTo({ url: '/pages/user/login' })
				}
			}

			return {
				whetherLogin,
				...toRefs(data),
				getVipInfo,
				toVipPage
			}
		},
		async onLoad(options) {
			// await this.$onLaunched
			await this.getVipInfo()
		}
	}
</script>

<style lang="scss" scoped>
	.whole {
		width: 100%;
		overflow: auto;
		position: relative;
		.img{
			width: 100%;
			height: auto;
			vertical-align: bottom;
		}
		.btn{
			width: 90%;
			height: 90rpx;
			font-size: 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 600;
			color: v-bind('color2');
			background-color: v-bind('color1');
			position: fixed;
			z-index: 10;
			left: 5%;
			bottom: 40rpx;
			border-radius: 90rpx;
		}
	}
</style>