mplace_source/pages/my/vip.vue

<template>
	<view>
		<!--标题栏-->
		<bar-title bgColor="bg-white" isBack title="会员">
			<block slot="content">会员</block>
		</bar-title>
		
		<view class="zaiui-user-info-box">
			<view class="cu-list menu-avatar">
				<view class="cu-item">
					<view class="cu-avatar round lg" :style="`background-image:url(${user.avatar});`"/>
					<view class="content text-xl">
						<view class="flex flex-direction" style="align-items: flex-start;">
							<text class="margin-right">{{user.name}}</text>
							<!-- <text class="text-sm">{{user.score_per}}</text> -->
						</view>
					</view>
				</view>
			</view>
		</view>
		
<!-- 		<view class="zaiui-flex-tab show">
			<view class="flex">
				<view class="basis-xxl">
					<scroll-view scroll-x class="nav z" scroll-with-animation>
						<block v-for="(item,index) in headTab.list" :key="item.id">
							<view class="cu-item" :class="item.id==headTab.TabCur?'select':''" @tap="tabSelect" :data-id="item.id">
								<view>{{item.name}}</view>
								<view class="tab-dot bg-red"/>
							</view>
						</block>
					</scroll-view>
				</view>
			</view>
		</view> -->
		
		<view class="card" v-for="item in viplist">
			<image class="card-bg" src="@/static/images/my/price_shape.png">
			<view class="flex hd">
				<view class="col">
					<view class="text-white h4">
						<text class="text-white cuIcon-vipcard"></text>
						{{item.name}}
					</view>
				</view>
				<view class="col text-end">
					<button class="cu-btn bg-red" data-type="vip" @click="handleBuy(item.id)">立即购买</button>					    
				</view>
			</view>
			<view class="detail">
				<view class="text-white price">价格<text>￥{{item.price}}</text></view>
				<view class="text-white price">有效期<text>{{item.day_desc}}</text></view>
			</view>
			<view class="detail">
				<view class="text-white">{{item.content}}<text class="margin-left-xs text-red cuIcon-roundright"></text></view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import barTitle from '@/components/zaiui-common/basics/bar-title';
	import _tool from '@/static/zaiui/util/tools.js';	//工具函数
	export default {
		components: {
			barTitle
		},
		data() {
			return {
				skin: true,
				headTab: {
					list: [{
						id: 0,
						name: '会员权益'
					}],
					TabCur: 0
				},
				user: {},
				place: {},
				viplist: []
			}
		},
		onLoad() {
			this.loadInfo()
			this.loadList()
		},
		onReady() {
			_tool.setBarColor(true);
			uni.pageScrollTo({
			    scrollTop: 0,
			    duration: 0
			});
		},
		methods: {
			loadInfo() {
				this.reqByuser({
					url: '?l=vip.info', 
					data: {},
					success: res => {
						if(res.data.status == 1) {
							this.user = res.data.data.user;
							this.place = res.data.data.place;
						}else {
							this.error = res.data.msg
						}
					}
				})
			},
			loadList() {
				this.reqByuser({
					url: '?l=vip.list', 
					data: {},
					success: res => {
						// res = {data: {"status":1,"msg":"success","data":{"list":[{"id":1,"cdate":1720929230,"name":"黄金会员","price":"100.00","day_desc":"一年","day":365,"level":1,"content":"<p><br></p>","status":1,"pay":1,"sprice":"100.00","buy":2},{"id":2,"cdate":1723109226,"name":"白金会员","price":100,"day_desc":"三年","day":864,"level":2,"content":"<p>ffff</p>","status":1,"pay":1,"sprice":"200.00","buy":1}],"place":{"name":"PPT","logo":"","content":"<p>test</p>","score_name":"金币","score_per":"1","bg":"","type":1,"vip_name":"会员","agent_name":"主理人","money_id":1,"uid":1,"channel":1,"money_name":"￥"},"resource":[{"name":"内容1","icon":"","type":1},{"name":"商品","icon":"","type":3},{"name":"功能","icon":"","type":2}],"user":{"id":1,"name":"test","avatar":"","cash":"-10.00","score_cash":"0.00","vip_id":1,"agent_id":1,"client_id":1,"score_cash_name":"0.00金币","money_cash_name":"￥-10.00"}},"code":200}}
						if(res.data.status == 1) {

							this.viplist = res.data.data.list;
						}else {
							this.error = res.data.msg
						}
					}
				})
			},
			handleBuy(id) {
				this.reqByuser({
					url: '?l=vip.buy', 
					data: {
						id
					},
					success: res => {
						if(res.data.status == 1) {
							console.log(res.data.data)
							location.href = res.data.data.pay.link;
						}else {
							this.error = res.data.msg
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	/* #ifdef APP-PLUS */
		@import "../../static/colorui/main.css";
		@import "../../static/colorui/icon.css";
		@import "../../static/zaiui/style/app.scss";
	/* #endif */
</style>
<style lang="scss" scoped>
	.card {
		position: relative;
		width: 680upx;
		height: 380upx;
		margin: 32upx auto 0;
		border-radius: 15upx;
		box-sizing: border-box;
		padding: 32upx;
		
		image {
			position: absolute;
			background-color: #0cbc87;
			width: 100%;		
			border-radius: 15upx;
			height: 100%;
			left: 0;
			top: 0;
			opacity: 0.8;
		}
		
		&>view {
			position: relative;
			z-index: 1;
		}
		
		.hd {
			align-items: center;
			justify-content: space-between;
			margin-bottom: 40upx;
			
			.h4 {
				font-size: 40upx;
				font-weight: bolder;
				
				text {
					margin-right: 10upx;
				}
			}
		}
		.detail {
			display: flex;
			margin-bottom: 20upx;
			justify-content: space-between;
			
			.price {
				display: flex;
				flex-direction: column;
				width: 45%;
				font-size: 28upx;
				margin-right: 20upx;
				
				text {
					font-size: 40upx;
					margin-top: 5upx;
					&.through {
						text-decoration: line-through;
						font-size: 28upx;
					}
				}
			}
		}
	}
	
</style>