From 976536763811a77c4f0b614a78e65d57c3f706b8 Mon Sep 17 00:00:00 2001
From: da da <manggoya567@gmail.com>
Date: Sat, 13 May 2023 19:06:11 +0700
Subject: [PATCH] =?UTF-8?q?=E4=BC=9A=E5=91=98=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                  |   7 ++
 pages/userInfo/userInfo.vue |   8 +-
 pages/userInfo/vip/vip.vue  | 222 ++++++++++++++++++++++++++++++++++++
 3 files changed, 236 insertions(+), 1 deletion(-)
 create mode 100644 pages/userInfo/vip/vip.vue

diff --git a/pages.json b/pages.json
index 10b16bf..d069e33 100644
--- a/pages.json
+++ b/pages.json
@@ -114,6 +114,13 @@
 			}
 
 		}, {
+			"path": "pages/userInfo/vip/vip",
+			"style": {
+				"navigationBarTitleText": "会员中心",
+				"enablePullDownRefresh": false
+			}
+
+		} ,{
 			"path": "pages/creator/banner",
 			"style": {
 				"navigationBarTitleText": "",
diff --git a/pages/userInfo/userInfo.vue b/pages/userInfo/userInfo.vue
index ab76fe1..846f37a 100644
--- a/pages/userInfo/userInfo.vue
+++ b/pages/userInfo/userInfo.vue
@@ -50,7 +50,13 @@
             <uni-icons class="list-menu-genduo" custom-prefix="iconfont" type="icon-gengduo"></uni-icons>
           </view>
         </button>
-		
+		<button title="我的会员" @click="toLink('/pages/userInfo/vip/vip')">
+		  <view class="list-menu-item">
+		    <uni-icons class="list-menu-icon"  type="vip" size="20" :color="primaryColor" />
+		    <view class="text">我的会员</view>
+		    <uni-icons class="list-menu-genduo" custom-prefix="iconfont" type="icon-gengduo"></uni-icons>
+		  </view>
+		</button> 
 		<button title="兑换绘画次数" @click="$noMultipleClicks(useCdk)">
 		  <view class="list-menu-item">
 		    <uni-icons class="list-menu-icon" custom-prefix="iconfont" type="icon-gengduo" size="20" :color="primaryColor" />
diff --git a/pages/userInfo/vip/vip.vue b/pages/userInfo/vip/vip.vue
new file mode 100644
index 0000000..a352444
--- /dev/null
+++ b/pages/userInfo/vip/vip.vue
@@ -0,0 +1,222 @@
+<template>
+	<view class="container">
+		<view class="header">
+			<view class="vip-info">
+				<image :src="userInfo.img" mode="" class="vip-info__avatar"></image>
+				<div>
+					<div class="vip-info__name">{{userInfo.username}}</div>
+					<div class="vip-info__tips">你还不是会员,开通立享 9 项特权</div>
+				</div>
+			</view>
+			<view class="vip-explan">
+				会员说明
+				<uni-icons type="help" size="20" color="#eee" />
+			</view>
+		</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>
+			</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>
+
+		<button class="sumbit-btn">
+			立即开通
+		</button>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				userInfo: null
+			}
+		},
+		methods: {
+
+		},
+		onShow() {
+			this.userInfo = uni.getStorageSync('userInfo')
+		},
+		created() {
+			if (this.userInfo) {
+				uni.navigateTo({
+					url: url
+				});
+			} else {
+				uni.navigateBack()
+				uni.showToast({
+					title: '请先登录',
+					icon: 'none'
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@mixin flex($center: center, $content: center) {
+		display: flex;
+		align-items: $center;
+		justify-content: $content;
+	}
+
+	.container {
+		padding: 30rpx;
+		background: #fff;
+
+		.vip-box {
+			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
+					}
+				}
+				
+				.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);
+				}
+			}
+		}
+
+		.sumbit-btn {
+			margin-top: 60rpx;
+			height: 88rpx;
+			@include flex;
+			font-size: 26rpx;
+			color: #fff;
+			background: linear-gradient(to bottom right, #68c2ff, #0684fe);
+		}
+
+		.header {
+			height: 200rpx;
+			background-color: gray;
+			padding: 20rpx;
+			@include flex(center,space-between);
+			border-radius: 20rpx;
+
+			.vip-explan {
+				color: #eee;
+				font-size: 24rpx;
+				@include flex(center,flex-start);
+				
+			}
+
+			.vip-info {
+				@include flex(center,flex-start);
+
+				.vip-info__avatar {
+					width: 120rpx;
+					height: 120rpx;
+					border-radius: 50%;
+					margin-right: 20rpx;
+				}
+
+				.vip-info__name {
+					color: #fff;
+					font-size: 30rpx;
+					font-weight: 500;
+					margin-bottom: 10rpx;
+				}
+
+				.vip-info__tips {
+					color: #eee;
+					font-size: 24rpx
+				}
+			}
+		}
+	}
+</style>