zyejMAll-mobile/pages/user/user_vip/list.vue

<!-- 会员信息 -->
<template>
	<s-layout navbar="inner" title="SVIP会员专享" :statusBar="true" :bgStyle="{ color: '#FE832A', backgroundColor:'white' }"
		navbarbackgroundColor="rgba(57,55,54)">
		<view class='vip-main'>
			<view class="vip-top">
				<image
					src="https://zysc.fjptzykj.com:3000/shangcheng/07cee74ec47ed41b33e277dffe9291a6cab8423d8f8539c34662a793842e6d27.png"
					class="img"></image>
				<view class="userInfo">
					<view class="l">

						<image :src="sheep.$url.cdn(userInfo.avatar)" mode="aspectFill" class="img"></image>
						<view class="text">
							<view class="t">{{ userInfo.nickname }}
								<image src="" class="img"></image>
							</view>
							<view class="c" v-if="!userInfo.activate">您与众悦e家商场的第101天</view>
							<view class="b" v-if="!userInfo.activate">开通即享会员权益</view>
							<view class="b" v-if="userInfo.activate">SVIP会员 {{ sheep.$helper.timeFormat(userInfo.cardExpirationTime, 'yyyy-mm-dd') }} 到期</view>
						</view>
					</view>
					<view class="r" v-if="!userInfo.activate">
						<text>立即开通</text>
					</view>
					<view class="r" v-if="userInfo.activate">
						<text>续费会员</text>
					</view>
				</view>
				<!-- <view class="vipLv" v-if="userInfo.activate">当前卡片：{{userInfo.cardName}}</view> -->
			</view>
			<view class="vip-zxq">
				<image
					src="https://zysc.fjptzykj.com:3000/shangcheng/d865a7766bf5ccbfb76e97f3fd65bcfdc37a612fe94878b7a899adab869360f8.png"
					class="img"></image>
				<view class="list">
					<view class="item" v-for="(item, index) in vipList2" :key="index">
						<view class="new-nei">
							<view class="l">
								<image :src="item.iconUrl" class="l-img"></image>
							</view>
							<view class="r">
								<view class="t">
									{{item.benName}}
								</view>
								<view class="b">
									{{item.intro}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="" style="clear: both;">

				</view>
			</view>

			<view class="vip-kt">
				<view class="top">
					<!-- <text class="t1" v-if="userInfo.activate == 1">试用会员</text> -->
					<text class="t1" v-if="!userInfo.activate">开通会员</text>
					<text class="t2" v-if="userInfo.activate">有效期至</text>
					<text class="t3" v-if="userInfo.activate">{{  timeAute }}</text>
				</view>
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
					<view id="demo1" @click="vipFun(index,item.name)" class="scroll-view-item_H uni-bg-red"
						:class="valVip == index ? 'on' : ''" v-for="(item,index) in vipList" :key="index">
						<view class="t">{{item.name}}</view>
						<view class="c">￥<text class="tx">{{item.specialPrice}}</text></view>
						<view class="b" v-if="item.name=='试用'">试用1天</view>
						<view class="b sc" v-else>￥{{item.originalPrice}}</view>
					</view>
				</scroll-view>
			</view>

			<view class="vip-text">
				购买即视为同意《<text class="ts" @click="sheep.$router.redirect('/pages/user/user_vip/agreement')">会员用户协议</text>》
			</view>
			<!-- <view class="vip-btn" @click="beclick()" v-if="!userInfo.activate">
				立即试用
			</view> -->
			<view class="vip-btn" @click="beclick()">
				立即开通
			</view>
		</view>
	</s-layout>
</template>
<script setup>
	import {
		computed,
		reactive,
		onBeforeMount,
		onMounted,
		ref
	} from 'vue';
	import request from '@/sheep/request';
	import {
		baseUrl,
		apiPath
	} from '@/sheep/config';
	import sheep from '@/sheep';
	const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
	const userInfo = computed(() => sheep.$store('user').userInfo);
	
	const vipList = ref([]);
	const vipList2 = ref([]);
	const valVip = ref(88888);
	const nameVip = ref([]);
	const timeAute = ref(sheep.$helper.timeFormat(userInfo.cardExpirationTime, 'yyyy-mm-dd'));
	// 定义方法
	function getList() {
		request({
			url: `${baseUrl}${apiPath}/member/card/type/list`,
			method: 'GET',
			params: {},
			custom: {
				showLoading: false,
			},
		}).then((res) => {
			vipList.value = res.data;
		});
	}

	// vipFun
	let data = {
		cardName: nameVip.value
	}

	function vipFun(index, name) {
		valVip.value = index
		data.cardName = name
		timeAute.value = sheep.$helper.timeFormat(vipList.value[index].cardExpirationTime, 'yyyy-mm-dd');
		
		console.log(userInfo.cardExpirationTime,"userInfo.cardExpirationTime")
	}

	// beclick
	function beclick() {
		if( data.cardName == '' ) {
			sheep.$helper.toast('请选择')
			return;
		};
		request({
			url: `${baseUrl}${apiPath}/pay/member/create`,
			method: 'post',
			data,
			custom: {
				showLoading: false,
			},
		}).then((res) => {
			if (res.code == 0) {
				if (data.cardName == "试用") {
					sheep.$helper.toast('试用开通成功');
					// sheep.$router.go('/pages/index/user')
				} else {
					sheep.$router.go('/pages/pay/index', {
						id: res.data.payOrderId,
						type: 'vip',
						vipid: res.data.id,
						cardName: data.cardName
					})
				}

			} else {
				sheep.$helper.toast(res.msg);
			}

		});
	}

	// 定义方法2
	function getList2() {
		request({
			url: `${baseUrl}${apiPath}/member/benefit/list`,
			method: 'GET',
			params: {},
			custom: {
				showLoading: false,
			},
		}).then((res) => {
			vipList2.value = res.data;
		});
	}
	// 使用 onMounted 生命周期钩子
	onMounted(() => {
		getList();
		getList2();
	});
</script>
<style lang="scss" scoped>
	.vip-main {
		margin-top: -3.75rem;

		.vip-top {
			width: 100%;
			height: 200px;
			// background: rgba(57, 55, 54);
			position: relative;

			.vipLv {
				position: absolute;
				bottom: 93px;
				right: 10%;
				color: #8a745c;
			}

			.img {
				width: 100%;
				height: 100%;
			}

			.userInfo {
				position: absolute;
				bottom: 38px;
				padding: 0 20px;
				display: flex;
				justify-content: space-between;
				left: 50%;
				transform: translateX(-50%);
				width: 85%;
				align-items: center;

				.l {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.img {
						width: 50px;
						height: 50px;
						border-radius: 23px;
						margin-right: 10px;
					}

					.text {
						.t {
							font-size: 16px;
							font-weight: 700;

							.img {
								width: 20px;
								height: 20px;
							}
						}

						.c {
							color: rgba(208, 185, 156);
							font-size: 13px;
						}

						.b {
							color: rgba(201, 141, 99);
							font-size: 12px;
							margin-top: 7px;
						}
					}
				}

				.r {
					color: #8a745c;
					font-size: 12px;
					padding: 5px 10px;
					background: white;
					border-radius: 0 11px 0 11px;
					position: absolute;
					right: 7px;
					bottom: 64px;
				}
			}
		}

		.vip-zxq {
			.img {
				width: 63%;
				height: 68px;
				margin: 0 auto;
				display: block;
				margin-top: 20px;
			}

			.list {
				padding: 0 10px;

				.item {
					width: 47%;
					float: left;
					padding: 5px;

					.new-nei {
						background: rgba(247, 247, 247);
						padding: 15px 10px;
						display: flex;
						align-items: center;

						.l {
							display: flex;
							align-items: center;

							.l-img {
								width: 40px;
								height: 40px;
								margin-right: 10px;
							}
						}

						.r {
							.t {}

							.b {
								font-size: 13px;
								color: rgba(191, 147, 109);
							}
						}
					}

				}
			}

		}

		.vip-kt {
			padding: 10px 10px;

			.top {
				.t1 {
					font-size: 17px;
					font-weight: 700;
					margin-right: 10px;
				}

				.t2 {
					font-size: 15px;
					margin-right: 10px;
					color: rgba(121, 121, 121);
				}

				.t3 {
					font-size: 13px;
					color: rgba(174, 90, 42);
				}
			}

			.scroll-view_H {
				white-space: nowrap;
				width: 100%;

				.scroll-view-item_H {
					display: inline-block;
					background-color: white;
					border: 1px solid rgba(214, 214, 214);
					margin-right: 15px;
					border-radius: 10px;
					margin-top: 15px;
					padding: 10px 3px;
					width: 100px;

					&.on {
						background-color: rgba(254, 247, 236);
						border: 1px solid rgba(252, 194, 130);
					}

					.t {
						color: rgba(117, 78, 25);
						font-weight: 700;
						font-size: 15px;
						text-align: center;
					}

					.c {
						color: rgba(117, 78, 25);
						// color: rgba(117, 78, 25);
						font-weight: 700;
						font-size: 15px;
						text-align: center;
						padding: 10px 0;

						.tx {
							font-size: 20px;
						}
					}

					.b {
						color: rgba(173, 173, 173);
						font-size: 14px;
						text-align: center;

						&.sc {
							text-decoration: line-through;
						}
					}
				}
			}
		}

		.vip-text {
			text-align: center;
			color: rgba(157, 157, 157);
			margin: 15px 0;
			font-size: 13px;

			.ts {
				color: rgba(174, 90, 42);
			}
		}

		.vip-btn {
			padding: 10px 0;
			background: rgba(254, 220, 137);
			text-align: center;
			margin: 0 15px;
			border-radius: 9px;
			color: rgba(95, 53, 38);
		}

	}
</style>