From bf2b4cc2919cea234738937630d87bc4b4f75239 Mon Sep 17 00:00:00 2001
From: da da <manggoya567@gmail.com>
Date: Mon, 15 May 2023 19:24:41 +0700
Subject: [PATCH] =?UTF-8?q?feat=20=E4=BC=9A=E5=91=98list=E6=8E=A5=E5=8F=A3?=
 =?UTF-8?q?=E5=AF=B9=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/userInfo.js            |   9 ++
 pages/userInfo/vip/vip.vue | 208 +++++++++++++++++--------------------
 2 files changed, 106 insertions(+), 111 deletions(-)

diff --git a/api/userInfo.js b/api/userInfo.js
index 7caf222..7c11865 100644
--- a/api/userInfo.js
+++ b/api/userInfo.js
@@ -1,6 +1,7 @@
 import request from '@/utils/request'
 const serviceTitle = '/img'
 const prefix = '/img/mini/tiktok'
+const prefix_vip = '/img/mini/vip/'
 //GET 传参需要用 params
 //POST 传参需要用 data
 
@@ -12,3 +13,11 @@ export function listTiktokCollection(data) {
 		data: data
 	})
 }
+
+//获取会员list
+export function queryUserVipList() {
+	return request({
+		url: `${serviceTitle}${prefix}/queryUserVipList`,
+		method: 'get',
+	})
+}
diff --git a/pages/userInfo/vip/vip.vue b/pages/userInfo/vip/vip.vue
index a352444..20a4d69 100644
--- a/pages/userInfo/vip/vip.vue
+++ b/pages/userInfo/vip/vip.vue
@@ -15,47 +15,19 @@
 		</view>
 
 		<view class="vip-box">
-			<view class="vip-box__item item-active">
-				<view class="title">
-					1年
-				</view>
-				<view class="price">
-					<text class="price-unit">¥</text> 189
-				</view>
-				<view class="o-price">
-					¥388
-				</view>
-				<view class="save-box">
-					立省60元
+			<view class="vip-box__item" :class="{'item-active':active == index}" @click="change(index)" v-for="(item,index) in vipList" :key="index">
+				<view class="title">
+					{{item.vipName}}
+				</view>
+				<view class="price">
+					<text class="price-unit">¥</text> {{item.price}}
+				</view>
+				<view class="o-price">
+					{{item.originPrice}}
+				</view>
+				<view class="save-box">
+					立省{{item.originPrice - item.price}}元
 				</view>
-			</view>
-			<view class="vip-box__item">
-				<view class="title">
-					1年
-				</view>
-				<view class="price">
-					<text class="price-unit">¥</text> 189
-				</view>
-				<view class="o-price">
-					¥388
-				</view>
-				<view class="save-box">
-					立省60元
-				</view>
-			</view>
-			<view class="vip-box__item">
-				<view class="title">
-					1年
-				</view>
-				<view class="price">
-					<text class="price-unit">¥</text> 189
-				</view>
-				<view class="o-price">
-					¥388
-				</view>
-				<view class="save-box">
-					立省60元
-				</view>
 			</view>
 		</view>
 
@@ -66,30 +38,39 @@
 </template>
 
 <script>
+	import {
+		queryUserVipList
+	} from '@/api/userInfo.js'
 	export default {
 		data() {
 			return {
-				userInfo: null
+				userInfo: null,
+				vipList:[],
+				active:0
 			}
 		},
 		methods: {
-
+			async getVipList() {
+				const {data} = await queryUserVipList();
+				this.vipList = data.data
+				console.log(this.vipList)
+			},
+			change(index){
+				this.active = index
+			}
 		},
 		onShow() {
 			this.userInfo = uni.getStorageSync('userInfo')
 		},
 		created() {
-			if (this.userInfo) {
-				uni.navigateTo({
-					url: url
-				});
-			} else {
-				uni.navigateBack()
-				uni.showToast({
-					title: '请先登录',
-					icon: 'none'
+			if (!this.userInfo) {
+				uni.navigateBack()
+				uni.showToast({
+					title: '请先登录',
+					icon: 'none'
 				})
-			}
+			} 
+			this.getVipList()
 		}
 	}
 </script>
@@ -102,73 +83,78 @@
 	}
 
 	.container {
-		padding: 30rpx;
+		padding: 30rpx;
 		background: #fff;
 
 		.vip-box {
-			margin: 30px 0;
-			@include flex(center,space-between);
-			
+			margin: 30px 0;
+			@include flex(center, space-between);
+
 			.vip-box__item {
 				width: 30%;
 				height: 300rpx;
 				padding: 20rpx;
-				@include flex;
-				flex-direction: column;
-				color: #000;
-				border: 1px solid #eee;
-				border-radius: 30rpx;
-				
-				&>view {
-					margin-bottom: 15rpx;
-				}
-				
-				.title {
-					font-weight: bold;
-					font-size: 38rpx;
-				}
-				
-				.price {
-					font-weight: bold;
-					font-size: 48rpx;
-					color: #1991fd;
-					
-					.price-unit{
-						font-size: 24rpx
-					}
+				@include flex;
+				flex-direction: column;
+				color: #000;
+				border: 1px solid #eee;
+				border-radius: 30rpx;
+
+				&>view {
+					margin-bottom: 15rpx;
+				}
+
+				.title {
+					font-weight: bold;
+					font-size: 30rpx;
+				}
+
+				.price {
+					font-weight: bold;
+					font-size: 48rpx;
+					color: #1991fd;
+
+					.price-unit {
+						font-size: 24rpx
+					}
+				}
+
+				.o-price {
+					color: #1991fd;
+					font-size: 26rpx;
+					text-decoration: line-through;
+				}
+
+				.save-box {
+					border-radius: 30rpx;
+					width: 140rpx;
+					height: 50rpx;
+					background-color: #e8f4ff;
+					font-size: 24rpx;
+					color: #68c2ff;
+					@include flex;
+				}
+			}
+
+			.item-active {
+				border: none;
+				background: linear-gradient(to bottom right, #68c2ff, #0684fe);
+
+
+
+				.price,
+				.title {
+					color: #fff;
 				}
 				
 				.o-price{
 					color: #eee;
-					font-size: 26rpx;
-					text-decoration:line-through; 
-				}
-				
-				.save-box{
-					border-radius: 30rpx;
-					width: 140rpx;
-					height: 50rpx;
-					background-color: #e8f4ff;
-					font-size: 24rpx;
-					color: #68c2ff;
-					@include flex;
 				}
-			}
-			
-			.item-active {
-				border: none;
-				background: linear-gradient(to bottom right, #68c2ff, #0684fe);
-				
-				
-				
-				.price,.title{
-					color: #fff;
-				}
-				
-				.save-box{
-					color: #fff;
-					background-color: rgba(255,255,255,.1);
-				}
+
+				.save-box {
+					color: #fff;
+					background-color: rgba(255, 255, 255, .1);
+				}
 			}
 		}
 
@@ -185,18 +171,18 @@
 			height: 200rpx;
 			background-color: gray;
 			padding: 20rpx;
-			@include flex(center,space-between);
+			@include flex(center, space-between);
 			border-radius: 20rpx;
 
 			.vip-explan {
 				color: #eee;
 				font-size: 24rpx;
-				@include flex(center,flex-start);
-				
+				@include flex(center, flex-start);
+
 			}
 
 			.vip-info {
-				@include flex(center,flex-start);
+				@include flex(center, flex-start);
 
 				.vip-info__avatar {
 					width: 120rpx;