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">您与众悦e家商场的第101天</view>
							<view class="b">开通即享会员权益</view>
						</view>
					</view>
					<view class="r">
						开通会员
					</view>
				</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 == 2">开通会员</text>
					<text class="t2">有效期至</text>
					<text class="t3">2024-10-24</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="index==0">试用1天</view>
						<view class="b sc" v-else>￥{{item.originalPrice}}</view>
					</view>
				</scroll-view>
			</view>

			<view class="vip-text">
				购买即视为同意《<text class="ts">会员用户协议</text>》
			</view>
			<view class="vip-btn" @click="beclick()" v-if="userInfo.activate != 1">
				立即试用
			</view>
			<view class="vip-btn" @click="beclick()" v-else>
				立即开通
			</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([]);
	const nameVip = ref([]);
	// 定义方法
	function getList() {
		request({
			url: `${baseUrl}${apiPath}/member/card/type/list`,
			method: 'GET',
			params: {
			},
			custom: {
				showLoading: false,
			},
		}).then((res) => {
			console.log(res,"sss")
			vipList.value = res.data;
		});
	}
	
	// vipFun
	let data = {
			cardName:nameVip.value
	}
	function vipFun(index,name) {
		valVip.value = index
		data.cardName = name
	}
	
	// beclick
	function beclick() {
		console.log(data.cardName,"nameVip.value")
		request({
			url: `${baseUrl}${apiPath}/pay/member/create`,
			method: 'post',
			data,
			custom: {
				showLoading: false,
			},
		}).then((res) => {
			console.log(res,"-----------试用---------------")
			sheep.$helper.toast('试用开通成功');
			sheep.$router.go('/pages/index/user')
		});
	}
	
	// 定义方法2
	function getList2() {
		request({
			url: `${baseUrl}${apiPath}/member/benefit/list`,
			method: 'GET',
			params: {
			},
			custom: {
				showLoading: false,
			},
		}).then((res) => {
			console.log(res,"sss")
			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;

			.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: 18px;
							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: 13px;
							margin-top: 7px;
						}
					}
				}

				.r {
					color: #8a745c;
					font-size: 15px;
					padding: 5px 15px;
					background: white;
					border-radius: 15px;
				}
			}
		}

		.vip-zxq {
			.img {
				width: 77%;
				height: 89px;
				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: 50px;
								height: 50px;
								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 {
					width: 113px;
					display: inline-block;
					background-color: white;
					border: 1px solid rgba(214,214,214);
					margin-right:15px;
					border-radius: 10px;
					margin-top:15px;
					padding:15px 0;
					&.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:20px;
						text-align: center;
					}
					.c{
						color:rgba(117,78,25);
						font-weight: 700;
						font-size:15px;
						text-align: center;
						padding:10px 0;
						.tx{
							font-size:27px;
						}
					}
					.b{
						color:rgba(173,173,173);
						font-size:16px;
						text-align: center;
						&.sc{
							text-decoration: line-through;
						}
					}
				}
			}
		}

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

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

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