cte-share/pages/UserCenter/huiyuan/huiyuan.vue

<template>
	<view>
		<customNav :shownav="true" :title="$t('index.huiyuanzhx')" titledetl=""></customNav>
		<view class="">
			<image class="imagV" src="/static/defimages/huiyuanxc.png" mode="widthFix"></image>
		</view>
		<view class="actBTct">
			<view class="actBTV" >
				<view class="blockView" v-for="(item,index) in vipList" @click="xuangou(item.id)">
					<view class="notecontent">
						<text class="titleact">{{item.name}}</text>
						<text class="noteact">${{item.price}}</text>
					</view>
					
				</view>
			</view>
		</view>
		<view class="huiyuanqyct">
			<text class="notev">{{$t('huiy.goumjswty')}}</text>
			<image class="huiyuanqy" src="/static/defimages/huiyuanqy.png" mode="heightFix"></image>
		</view>
		<view class="keywordLct">
			<view class="hyqyct">
				<text class="titlefl">2张平台券</text>
				<view class="qyblockView">
					<text class="yhqje">$5</text>
					<view class="shuline"></view>
					<view class="notecontent">
						<text class="titlev">VIP会员权益 $5优惠券</text>
						<text class="notev">满$20可用</text>
					</view>
					<text class="zhangshu">X 2 张</text>
				</view>
			</view>
		</view>
		<view class="keywordLct">
			<view class="hyqyct">
				<text class="titlefl">10张运费券</text>
				<view class="qyblockView">
					<text class="yhqje">$10</text>
					<view class="shuline"></view>
					<view class="notecontent">
						<text class="titlev">VIP会员权益 $10运费抵扣券</text>
						<text class="notev">满$50可用</text>
					</view>
					<text class="zhangshu">X 5 张</text>
				</view>
				<view class="qyblockView">
					<text class="yhqje">$5</text>
					<view class="shuline"></view>
					<view class="notecontent">
						<text class="titlev">VIP会员权益 $5运费抵扣券</text>
						<text class="notev">满$30可用</text>
					</view>
					<text class="zhangshu">X 5 张</text>
				</view>
			</view>
		</view>
		<view class="keywordLct">
			<view class="hyqyct">
				<text class="titlefl">5张商家联盟券</text>
				<view class="qyblockView">
					<text class="yhqje">$20</text>
					<view class="shuline"></view>
					<view class="notecontent">
						<text class="titlev">VIP会员权益 $20优惠券</text>
						<text class="notev">满$100可用</text>
					</view>
					<text class="zhangshu">X 5 张</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>

	import api from "@/pages/api/api.js"
	export default {
		data() {
			return {
				vipList:[],
				userInfo:[]
			}
		},
		onShow() {
			this.getviplist();
			// var temp = uni.getStorageSync('userInfo');
			// this.userInfo = JSON.parse(temp);
		},
		methods: {
			xuangou(id){
				
				var token = uni.getStorageSync("token");
				console.log('2222',token)
				if(token == '' || token == undefined || token == null){
					uni.navigateTo({
						url:'/pages/UserCenter/LoginView'
					})
					return;
				}
				
				uni.showModal({
				    title: '提示',
				    content: '选择支付方式并支付，待完善？',
				    success: function (res) {
				    }
				})
				return;
				this.adduservip(id);
			},
			getviplist(){
				api('getviplist',{
				},r=>{
					this.vipList = r.data.data;
				},failc=>{
					//console.log('getadvertis----',failc)
				})
			},
			async adduservip(id){
				api('adduservip',{
					id:id
				},r=>{
					console.log(r)
				},failc=>{
					//console.log('getadvertis----',failc)
				})
			},
		},
	}
</script>

<style lang="scss">
	
.imagV{
	width: 100%;
}

.imageIcon{
	width: 60rpx;
}
.actBTct{
	display: flex;
	flex-direction: row;
	justify-content:center;
	align-items: center;
	background-color: aliceblue;
}
.actBTV{
	width: 92%;
	display: flex;
	flex-direction: row;
	justify-content:space-between;
	align-items: center;	
}

.blockView{
	width: 30%;
	height: 140rpx;
	margin-top: 10rpx;
	align-items:center;
	justify-content:center;
	background-color: white;
	border: 2rpx dotted sandybrown;
}
.notecontent{
	margin-left: 12rpx;
	display: flex;
	flex-direction:column;
	justify-content: flex-start;
	
}
.titleact{
	font-size: 36rpx;
	text-align: left;
	color: saddlebrown;
}
.noteact{
	font-size: 40rpx;
	font-weight: bold;
	color: crimson;
	text-align: right;
	margin-top: 26rpx;
	margin-right: 10rpx;
}

.keywordLct{
	display: flex;
	flex-direction: colum;
	justify-content:flex-start;
	background-color: aliceblue;
}

.titlefl{
	font-size: 30rpx;
	padding-left: 16rpx;
	text-align: left;
}

.titlev{
	font-size: 30rpx;
	text-align: left;
}
.notev{
	font-size: 28rpx;
	color: darkgray;
	text-align: left;
}

.xuangou{
	font-size: 28rpx;
	margin-left: auto;
	margin-right: 20rpx;
	padding: 8rpx;
	border: 2rpx solid brown;
	border-radius: 8rpx;
}

.huiyuanqyct{
	display: flex;
	flex-direction: column;
	justify-content:center;
	align-items: center;
	background-color: aliceblue;
}

.huiyuanqy{
	width: 100%;
	margin-top: 20rpx;
	height: 40rpx;
}

.hyqyct{
	width: 86%;
	margin: 16rpx;
	padding-bottom: 18rpx;
	display: flex;
	flex-direction: column;
	justify-content:flex-start;
	border-bottom-width: 2rpx;
	border-bottom-color: lightgray;
	border-bottom-style: solid;
	
}

.qyblockView{
	width: 100%;
	margin-top: 6rpx;
	margin-left: 16rpx;
	margin-right: 16rpx;
	padding: 20rpx;
	display: flex;
	flex-direction:row;
	justify-content: flex-start;
	align-items:center;
	background-color: wheat;
}

.zhangshu{
	font-size: 28rpx;
	margin-left: auto;
	margin-right: 20rpx;
	padding: 8rpx;
}

.yhqje{
	width: 100rpx;
	font-size: 46rpx;
	text-align: right;
	padding-left: 10rpx;
}

.shuline{
	margin-left: 10rpx;
	margin-right: 6rpx;
	background-color: darkgray;
	width: 4rpx;
	height: 80rpx;
}

</style>