From 5d17820abc7f57a484d0ffdcf65b964e3982b080 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A7=8B=E4=BA=8E=E5=88=9D=E8=A7=81?= <752204717@qq.com>
Date: Fri, 18 Apr 2025 16:34:23 +0800
Subject: [PATCH] tijiao

---
 pages/goods/order/index.vue |   12 +-
 pages/mine/mine/index.vue   | 1053 +++++++++++++++++++++++++++++++++++
 pages/mine/vip/index.vue    |    1 +
 3 files changed, 1060 insertions(+), 6 deletions(-)

diff --git a/pages/goods/order/index.vue b/pages/goods/order/index.vue
index 47107d2..5266509 100644
--- a/pages/goods/order/index.vue
+++ b/pages/goods/order/index.vue
@@ -76,16 +76,16 @@
             slotProps.row.vipPrice != null
           "
         >
-          <text style="color: #e97512; font-size: 12px; font-weight: bold"
+          <text style="color: #e97512; font-size: 28rpx; font-weight: bold"
             >￥{{ slotProps.row.vipPrice.toFixed(2) }}</text
           >
-          <text style="color: #fa2d12; font-size: 10px; margin-left: 4px"
+          <text style="color: #fa2d12; font-size: 24rpx; margin-left: 4px"
             >VIP到手价</text
           >
           <text
             style="
               color: #8a8a8a;
-              font-size: 10px;
+              font-size: 24rpx;
               margin-left: 4px;
               font-weight: bold;
               text-decoration: line-through;
@@ -99,16 +99,16 @@
             slotProps.row.activityPrice && slotProps.row.activityPrice > 0
           "
         >
-          <text style="color: #e97512; font-size: 12px; font-weight: bold"
+          <text style="color: #e97512; font-size: 28rpx; font-weight: bold"
             >￥{{ slotProps.row.activityPrice.toFixed(2) }}</text
           >
-          <text style="color: #613804; font-size: 10px; margin-left: 4px"
+          <text style="color: #613804; font-size: 24rpx; margin-left: 4px"
             >活动价</text
           >
           <text
             style="
               color: #8a8a8a;
-              font-size: 10px;
+              font-size: 24rpx;
               margin-left: 4px;
               font-weight: bold;
               text-decoration: line-through;
diff --git a/pages/mine/mine/index.vue b/pages/mine/mine/index.vue
index e69de29..98f4914 100644
--- a/pages/mine/mine/index.vue
+++ b/pages/mine/mine/index.vue
@@ -0,0 +1,1053 @@
+<template>
+	<view style=" position: relative;
+      padding: 0 0;
+      font-size: 28rpx;
+      ;
+    " class="commonPageeeee commonPageBox">
+		<!-- 公共组件-每个页面必须引入 -->
+		<public-module></public-module>
+		<view class="setIcon" @click="goSetting">
+			<u-icon class="" labelColor="#258feb" labelPos="bottom" label="设置" name="setting"
+				:style="`top:${(10 + statusBarHeight) * 2}rpx`" color="#258feb" size="28"></u-icon>
+		</view>
+
+		<view class="bg_top flex_box flex_between">
+			<view class="per_mes">
+				<view class="per_mes_user" :style="hasVipType2?'width: 170rpx;':''">
+					<view style="width: 120rpx; height: 120rpx; display: inline-block;">
+						<image @click="goUserInfo" :src="userMes.avatar" v-if="userMes.avatar"
+							class="per_mes_img color_shandow"></image>
+						<image src="@/static/icon/home_icon_logo.png" v-else
+							class="per_mes_img color_shandow"></image>
+					</view>
+					<view class="user_vip_box" v-if="hasVipType1 || hasVipType2">
+						<view class="user_vip super" :style="hasVipType2?'width: 170rpx;':''">
+							<view class="user_vip_item" v-if="hasVipType1"><text>医学</text><image src="@/static/icon/chao_svip.png"></image></view>
+							<view class="user_vip_item" v-if="hasVipType2"><text>国学心理学</text><image src="@/static/icon/chao_svip.png"></image></view>
+						</view>
+					</view>
+				</view>
+				<view class="userInfoBox" style="margin-left: 20rpx;">
+					<template>
+						<view class="name">{{ userMes.nickname ? userMes.nickname : "未设置" }}</view>
+					</template>
+					<template v-if="userMes.tel">
+						<view class="phone">手机号：({{ userMes.tel }})</view>
+					</template>
+					<template v-if="textList.length>0">
+						<view class="vip_type">
+							<view class="vip_type_item" :class="textList.length>4?'vip_type_item_len':''" v-for="(item,index) in textList" :key="index">
+								{{item}}<image src="@/static/icon/chao_vip.png"></image>
+							</view>
+						</view>
+					</template>
+				</view>
+			</view>
+
+		</view>
+
+		<view class="mine_box" :style="`top:${(45 + statusBarHeight) * 2}rpx`">
+			<view style="
+          padding: 20rpx;   overflow: hidden;
+        ">
+				<view class="chong_zhi boxShadow box_fillet vip_box">
+					<view class="noVip">
+						<view style="display: flex; align-items: center;">
+							<view class="zhanghu PM_font" style="text-align: left">
+								<image class="vip_image" style="width:80rpx;height:80rpx;margin-left: 10rpx;" src="@/static/vip.png" mode="aspectFit"></image>
+								<text style="color: #fff; font-size: 60rpx;" v-if="vipList.length==0">VIP</text>
+							</view>
+							<view class="vip_infor" v-if="vipList&&vipList.length>0">
+								<view class="vip_infor_item" v-for="(item, index) in vipList" :key="index" :class="{expired: isExpired(item.endTime)}">
+									<text>{{item.text}}VIP</text>
+									<text v-if="isExpired(item.endTime)">（{{item.endTime.split(' ')[0]}} 已到期）</text>
+									<text v-else>（有效期到 {{item.endTime.split(' ')[0]}})</text>
+								</view>
+							</view>
+							<view v-else class="vip_null" style=" padding-left: 30rpx;">办理VIP，畅享更多专属权益</view>
+						</view>
+						<view class="vip_btn" @click="onPageJump('/pages/mine/vip/index')"><button v-if="vipList.length==0">办理</button><button v-else>续费</button></view>
+					</view>
+				</view>
+				<!-- end -->
+				<view class="chong_zhi boxShadow box_fillet chongzhi_box">
+					<view class="chong_list">
+						<view class="left">
+							<view class="chong_list_item" style="
+							  display: flex;
+							  align-items: center;
+							  flex-direction: column;
+							  justify-content: space-between;
+							" @click="onPageJump('/pages/mine/wallet/index/index')">
+								<view class="pay_item_img">
+									天医币<u-icon @click.native.stop="openInfo()" name="question-circle"
+										style="float: right; margin: 0 6rpx"></u-icon>
+								</view>
+								<view class="text" style="line-height: 40rpx; display: flex">{{userMes.peanutCoin ? userMes.peanutCoin : 0}}</view>
+							</view>
+
+							<view class="chong_list_item" style="
+                  display: flex;
+                  align-items: center;
+                  flex-direction: column;
+                  justify-content: space-between;
+                " @click="onPageJump('/pages/mine/wallet/jf/index')">
+								<view class="pay_item_img">
+									积分
+								</view>
+
+								<view class="text" style="line-height: 40rpx">{{userMes.jf ? userMes.jf : 0}}</view>
+							</view>
+							<view class="chong_list_item" style="
+							  display: flex;
+							  align-items: center;
+							  flex-direction: column;
+							  justify-content: space-between;
+							" @click="onPageJump('/pages/mine/wallet/couponList')">
+								<view class="pay_item_img">
+									优惠券
+								</view>
+
+								<view class="text" style="line-height: 40rpx">{{userCouponNum}}</view>
+							</view>
+						</view>
+						<view class="chong_list_item" style="
+							display: flex;
+							align-items: center;
+							margin-right: 0;
+							justify-content: center;
+						  ">
+							<view class="chong_btn" v-if="iosHide"
+								@click="onPageJump('/pages/mine/wallet/recharge/index')">充 值</view>
+						</view>
+					</view>
+				</view>
+			</view>
+
+			<view class="list_box">
+				<view class="xiugai boxShadow box_fillet">
+					<common-list :dataList="pageList" @hancleClick="handleClickTab" label="name">
+						<template slot="rightSlot" slot-scope="slotProps">
+              <text
+                class="fdButtonBox aui-text-success"
+                v-if="slotProps.row.contentType&&slotProps.row.contentType == 'hufen'&&hufenNumber>0"
+                style="line-height: 40rpx; font-size: 40rpx;color: #258feb;float: right;"
+                >{{ hufenNumber }}<text style="font-size: 30rpx;margin-left: 4rpx;">湖分</text></text
+              >
+            </template>
+					</common-list>
+				</view>
+			</view>
+		</view>
+
+		<u-modal :show="signShow" :content="signContent" :showCancelButton="true" @cancel="signShow = false"
+			@confirm="signOut">
+		</u-modal>
+		<!-- 分享弹窗 -->
+		<uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
+			<uni-popup-share @select="haveSelected"></uni-popup-share>
+		</uni-popup>
+
+		<u-popup :show="infoShow" mode="center" round="6" backgroundColor="#fff">
+			<view class="popup_box">
+				<view class="title">温馨提示</view>
+
+				<view class="content">
+					<view class="center">
+						&nbsp;&nbsp;&nbsp;&nbsp;【天医币】仅为我平台支付使用币种 。
+						一人民币=一天医币，仅为了方便用户支付使用。<br />【天医币】可以用于在我平台支付书籍或课程使用。
+						<br />【天医币】这个名称是为适应我们平台的定位属性，所起名称。与区块链虚拟货币无任何关系。
+					</view>
+
+					<view class="bottom">
+						<view class="button_box" style="
+                align-items: center;
+                justify-content: center;
+              ">
+							<u-button style="width: 200rpx; float: center" :plain="true" text="知道啦" color="#9b9b9b"
+								size="small" @click="infoShow = false"></u-button>
+						</view>
+					</view>
+				</view>
+			</view>
+		</u-popup>
+		<music-play :playData="playData"></music-play>
+		<z-navigation></z-navigation>
+
+	</view>
+</template>
+
+<script>
+	import musicPlay from "@/components/music.vue";
+	import $http from "@/config/requestConfig.js";
+	import {
+		mapState,
+		mapMutations
+	} from "vuex";
+	export default {
+		data() {
+			return {hufenNumber: 0,
+				roleObj: {},
+				infoShow: false, // 显示电子书相关
+				showEbook: false, // 显示电子书相关
+				userMes: {},
+				signShow: false,
+				signContent: "是否要退出登录？",
+				playData: {},
+				userCouponNum:0, // 优惠券数量
+				directorShow: false, // 主任是否显示班级入口
+				monitorShow: false, // 其他管理是否显示班级入口
+				pageList: [{
+						name: "我的订单",
+						url: "/pages/bookShop/orderList?type=mine",
+						type: "switchTab"
+					},
+					{
+						name: "我的证书",
+						url: "/pages/certificate/certificate",
+						type: "pageJump",
+					},
+					{
+						name: "培训班管理",
+						url: "/pages/trainingCourse/index",
+						type: "pageJump",
+					},
+					{
+						name: "我的湖分",
+						url: "/pages/hufen/hufen",
+						type: "pageJump", contentType: "hufen",
+					},
+					{
+						name: "个人资料",
+						url: "/pages/mine/userInfo/persData",
+						type: "pageJump",
+					},
+					{
+						name: "地址管理",
+						url: "/pages/component/commonComponents/address/index?type=mine",
+						type: "pageJump",
+					},
+					{
+						name: "关于我们",
+						url: "/pages/mine/aboutUs/index",
+						type: "pageJump",
+					},
+					{
+						name: "问题反馈/申诉",
+						url: "/pages/user/workOrder",
+						type: "workOrder"
+					}
+				],
+				//vip
+				vipList: [],
+				textList: [],  //普通vip文字
+				hasVipType1: false,
+				hasVipType2: false
+			};
+		},
+		//第一次加载
+		onLoad(e) {
+			// 隐藏原生的tabbar
+			uni.hideTabBar();
+		},
+		computed: {
+			...mapState(["userInfo"]),
+		},
+		//页面显示
+		async onShow() {
+			this.getData();
+			this.getUserRole()
+			this.gethufenData();
+			await this.getUserCouponList()
+			//获取vip身份
+			this.textList = [];
+			this.getUserVipType();
+		},
+		components: {
+			musicPlay,
+		},
+		//方法
+		methods: {
+			...mapMutations(["setUserInfo"]),
+			  async gethufenData() {
+      await this.$http
+        .post("common/userContribution/getUserContribution")
+        .then((res) => {
+          console.log("res at line 296:", res);
+          if (res.code == 0) {
+            this.hufenNumber = res.total;
+          } else {
+          }
+        })
+        .catch((e) => {
+          console.log(e, "报错");
+        });
+    },
+			// 获取用户优惠券列表
+			async getUserCouponList(){
+				await this.$http
+				  .request({
+				    url: "common/coupon/getCouponHistoryList",
+				    method: "POST",
+				    data: {
+				      "page":1,
+				          "limit":10,
+				          "getType":"",//获取类型 0 后台赠送 1 主动获取
+				          "status":"0",//使用状态 0 未使用 1 已使用 2 已过期
+				          "userInfo":"",//用户信息
+				          "userId":this.userInfo.id
+				    },
+				    header: {
+				      "Content-Type": "application/json",
+				    },
+				  })
+				  .then(async (res) => {
+					  if(res.code != 0) return this.$commonJS.showToast(res.errMsg);
+					  this.userCouponNum = res.couponList.total
+									
+				  }).catch(e => {
+					  this.$commonJS.showToast(e.errMsg);
+				  })
+			},
+			openInfo() {
+				this.infoShow = true;
+			},
+			goSetting() {
+				this.onPageJump("/pages/mine/set/index");
+			},
+			goUserInfo() {
+				this.onPageJump("/pages/mine/userInfo/persData");
+			},
+			handleClickTab(v) {
+				switch (v.type) {
+					case "pageJump":
+						this.onPageJump(v.url);
+						break;
+					case "switchTab":
+						this.switchTab(v.url);
+						break;
+					case "share":
+						//分享
+						this.newOnShare();
+						break;
+					case "quitLogin":
+						//退出登录
+						this.signShow = true;
+						break;
+					case "loginOut":
+						//注销账号
+						this.logout();
+						break;
+					case "workOrder":
+						uni.navigateTo({
+							url: `${v.url}?name=userPage`
+						})
+						break;
+				}
+			},
+			haveSelected(data) {
+				if (data.index == 0) {
+					// 分享到好友
+					uni.share({
+						provider: "weixin",
+						scene: "WXSceneSession",
+						type: 0,
+						href: this.$apkUrl,
+						title: "吴门医述",
+						summary: "我正在使用吴门医述提升自己，赶紧跟我一起来体验吧！",
+						imageUrl: "static/icon/home_icon_logo.png",
+						success: function(res) {
+							console.log("success:" + JSON.stringify(res));
+						},
+						fail: function(err) {
+							console.log("fail:" + JSON.stringify(err));
+						},
+					});
+				} else if (data.index == 1) {
+					// 分享到朋友圈
+					uni.share({
+						provider: "weixin",
+						scene: "WXSceneTimeline",
+						type: 0,
+						href: this.$apkUrl,
+						title: "吴门医述",
+						summary: "我正在使用吴门医述提升自己，赶紧跟我一起来体验吧！",
+						imageUrl: "static/icon/home_icon_logo.png",
+						success: function(res) {
+							console.log("success:" + JSON.stringify(res));
+						},
+						fail: function(err) {
+							console.log("fail:" + JSON.stringify(err));
+						},
+					});
+				}
+			},
+			switchTab(url) {
+				uni.switchTab({
+					url: url,
+				});
+			},
+			//判断过期的vip
+			isExpired(dateString){
+				const dataTime = new Date(dateString.replace(' ', 'T'));
+				//获取当前时间的Date对象
+				const currentTime = new Date();
+				//比较两个时间
+				return dataTime < currentTime;
+			},
+			// 获取用户的角色信息
+			getUserRole() {
+				this.$http.post("common/class/getRoleType").then((res) => {
+					this.roleObj = res.result
+					var zhurenIndex = this.pageList.findIndex(item => {
+						return item.name == '主任教学'
+					})
+					if (zhurenIndex > -1) {
+						this.pageList.splice(zhurenIndex, 1)
+					}
+					var banzhangIndex = this.pageList.findIndex(item => {
+						return item.name == '班级管理'
+					})
+					if (banzhangIndex > -1) {
+						this.pageList.splice(banzhangIndex, 1)
+					}
+					var yonghuIndex = this.pageList.findIndex(item => {
+						return item.name == '我的班级'
+					})
+					if (yonghuIndex > -1) {
+						this.pageList.splice(yonghuIndex, 1)
+					}
+					if (this.roleObj.isDirector) {
+						var n = this.pageList.find(item => {
+							return item.name == '主任教学'
+						})
+						if (!n) {
+							var item = {
+								name: "主任教学",
+								url: "/pages/miniClass/DirectorModalList?type=mine",
+								type: "pageJump"
+							}
+							this.pageList.splice(3, 0, item);
+						}
+					}
+					// 是班长
+					if (this.roleObj.isCommittee) {
+						var n = this.pageList.find(item => {
+							return item.name == '班级管理'
+						})
+						if (!n) {
+							var item = {
+								name: "班级管理",
+								url: "/pages/miniClass/MonitorClassList?type=mine",
+								type: "pageJump"
+							}
+							this.pageList.splice(3, 0, item);
+						}
+					}
+					// 是学员
+					if (this.roleObj.isStudent) {
+						var n = this.pageList.find(item => {
+							return item.name == '我的班级'
+						})
+						if (!n) {
+							var item = {
+								name: "我的班级",
+								url: "/pages/miniClass/myClassList?type=mine",
+								type: "pageJump"
+							}
+							this.pageList.splice(3, 0, item);
+						}
+					}
+
+				}).catch(e => {
+					
+				})
+			},
+			//获取个人信息
+			getData() {
+				if (this.userInfo.id != undefined) {
+					this.$http.post("common/user/getUserInfo").then((res) => {
+						this.userMes = res.result;
+					});
+				}
+			},
+
+			// 新写分享
+			newOnShare() {
+				this.$refs.share.open();
+			},
+
+			// 注销账户
+			logout() {
+				let that = this;
+				uni.showModal({
+					title: "提示",
+					content: "确定要注销当前账户吗？",
+					success: function(res) {
+						if (res.confirm) {
+							uni.showModal({
+								title: "提示",
+								showCancel: false,
+								content: `注销申请已提交成功,请联系客服进行后续操作：022-24142321`,
+								success: function(res1) {
+									if (res1.confirm) {
+										that.signOut();
+									}
+								},
+							});
+						} else if (res.cancel) {
+							// 取消操作
+						}
+					},
+				});
+			},
+			// 跳转
+			onGoing() {
+				uni.showToast({
+					icon: "none",
+					title: "开发中，敬请期待...",
+				});
+			},
+			onPageJump(url) {
+				uni.navigateTo({
+					url: url,
+				});
+			},
+
+			// 退出登录
+			signOut() {
+				this.signShow = false;
+				this.setUserInfo({
+					token: null,
+				});
+				uni.reLaunch({
+					url: "/pages/user/login/login",
+				});
+			},
+			//获取vip身份
+			getUserVipType() {
+				this.$http.request({
+					url: "common/userVip/getUserVipType",
+					method: "POST",
+					data: {},
+					header: {
+						"Content-Type": "application/json",
+					},
+				})
+				.then((res) => {
+					if (res.code == 0) {
+						this.vipList = res.list;
+						this.hasVipType1 = this.vipList.some(item => item.type === 1);
+						this.hasVipType2 = this.vipList.some(item => item.type === 2);
+						
+						//筛选出来已过期的
+						let listAll = this.vipList;
+						let list = this.vipList.filter(item => !this.isExpired(item.endTime));
+						
+						//全部的 vip模块展示
+						if(listAll.length>0){
+							listAll = this.showDataList(listAll);
+						}else{
+							this.textList = [];
+						}
+						
+						console.log('-------listAll',listAll)
+						//筛选过期以后的 昵称模块展示需要
+						if(list.length>0){
+							list = this.showDataList(list);
+						}else{
+							this.textList = [];
+						}
+						console.log('-------list',list)
+					}
+				});
+			},
+			//分情况展示逻辑
+			showDataList(list){
+				this.textList = [];
+				list.forEach((item, index) => {
+					if(item.type=='4'){
+						item.text = '中医学';
+						this.textList.push(item.text);
+					}else if(item.type=='5'){
+						item.text = '针灸学';
+						this.textList.push(item.text);
+					}else if(item.type=='6'){
+						item.text = '肿瘤学';
+						this.textList.push(item.text);
+					}else if(item.type=='7'){
+						item.text = '国学';
+						this.textList.push(item.text);
+					}else if(item.type=='8'){
+						item.text = '心理学';
+						this.textList.push(item.text);
+					}else if(item.type=='9'){
+						item.text = '中西汇通学';
+						this.textList.push(item.text);
+					}else if(item.type=='1'){
+						item.text = '医学S';
+					}else if(item.type=='2'){
+						item.text = '国学心理学S';
+					}
+				});
+				
+				return this.textList;
+			},
+		}
+	};
+</script>
+<style lang="scss" scoped>
+	@import "@/style/mixin.scss";
+
+	.per_mes_user {
+		width: 125rpx;
+		text-align: center;
+	}
+	
+	.per_mes {
+		width: 100%;
+		position: relative;
+		margin-top: 50rpx;
+		align-items: center;
+		display: flex;
+		align-items: center;
+
+		.per_mes_img {
+			width: 120rpx;
+			height: 120rpx;
+			border-radius: 100rpx;
+			margin: 0 0 0 0;
+			float: left;
+		}
+
+		view {
+			.name {
+				width: 100%;
+				font-weight: bold;
+				font-size: 32rpx;
+				color: #6990c7 !important;
+			}
+
+			.phone {
+				font-size: 26rpx;
+				color: #6990c7 !important;
+			}
+
+			.per_user_img {
+				display: inline-block;
+				width: 40upx;
+				height: 40upx;
+				margin-left: 10rpx;
+				vertical-align: super;
+			}
+		}
+	}
+
+	.now_vip {
+		background-color: #fff;
+		// border-radius: 20upx;
+		margin: 0 0 30upx 0;
+		padding: 0 30upx;
+		height: 120upx;
+		background-image: linear-gradient(90deg, #feeed6 0%, #f5ce99 100%);
+
+		image {
+			width: 46rpx;
+			height: 50rpx;
+			display: inline-block;
+			vertical-align: text-bottom;
+			margin: 0 10rpx 0 0;
+		}
+
+		text {
+			font-size: 30upx;
+			line-height: 120upx;
+			color: #977749;
+			font-weight: bold;
+		}
+
+		.kt_btn {
+			font-size: 26upx;
+			display: block;
+			float: right;
+			border-radius: 50rpx;
+			color: #fffbf6;
+			padding: 12rpx 26rpx;
+			margin: 33rpx 0 0 0;
+			background-image: linear-gradient(90deg, #dfa964 0%, #7f5218 100%);
+		}
+	}
+
+	.commonPageBox {
+		// background-image: url("@/static/icon/mine_bg.png");
+		background-repeat: no-repeat;
+		background-size: 100% 100%;
+		background-image: linear-gradient(-60deg, #fdf0ed 0%, #bfe3f0 40%, #e4eefa 60%, #bfe3f0 80%, #fdf0ed 100%);
+		// background-color: #d8f8e4 !important;
+	}
+
+	.chong_zhi {
+		box-shadow: none;
+		padding: 0 30upx;
+		height: auto;
+
+		.zhanghu {
+			margin-bottom: 10rpx;
+			font-weight: bold;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			color: $themeColor;
+			font-weight: 700;
+		}
+
+		.noVip {
+			width: 100%;
+			height: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			
+			.zhanghu {
+				font-size: 40rpx;
+				margin-bottom: 0rpx;
+				text-align: center;
+				display: flex;
+				align-items: center;
+				image {
+					width: 100rpx;
+					height: 100rpx;
+				}
+			}
+		}
+
+		.hasVip {
+			.time {
+				color: #fff;
+				padding: 4rpx 20rpx;
+				font-size: 28rpx;
+				border-radius: 20rpx;
+				// background: linear-gradient(
+				//   to right,
+				//   #56B0CE 0%,
+				//   #6DDAEA 100%
+				// ) !important;
+			}
+		}
+
+		.chong_list {
+			display: flex;
+
+			align-items: center;
+			justify-content: space-between;
+			margin-bottom: 40rpx;
+
+			.left {
+				display: flex;
+				align-items: center;
+			}
+
+			.chong_list_item {
+				width: auto;
+				height: 100rpx;
+				margin-right: 60rpx;
+				text-align: center;
+				display: inline-block;
+				color: $themeColor;
+
+				.text {
+					font-size: 28rpx;
+					display: block;
+					font-weight: 700;
+					// margin: 0 0 10rpx 0;
+
+					color: $themeColor !important;
+				}
+			}
+
+			.chong_btn {
+				// position: absolute;
+				font-size: 26rpx;
+				display: block;
+				// top: 0px;
+				// right: 0px;
+				float: right;
+				border-radius: 50rpx;
+				color: #fffbf6;
+				padding: 10rpx 32rpx;
+				// margin-top: -60rpx;
+				// margin: 20rpx 0 0 0;
+				background-image: linear-gradient(90deg, #258feb 0%, #d5ecdd 200%);
+			}
+		}
+	}
+
+	.xiugai {
+		border-radius: 20rpx !important;
+		margin: 0 20rpx;
+		// padding:0 40rpx;
+		background: #f0f9fb;
+
+		.nav_list {
+			background-color: #b7e0e2;
+			padding: 15rpx 0 15rpx 10rpx;
+			display: flex;
+			align-items: center;
+			font-size: 22rpx;
+			position: relative;
+			font-weight: bold;
+			border-bottom: 1px solid #e5e5e5;
+
+			&:active {
+				background-color: #f5f5f5;
+			}
+
+			text {
+				color: #333;
+				margin-left: 10rpx;
+			}
+
+			&::after {
+				content: "";
+				position: absolute;
+				right: 20rpx;
+				top: 50%;
+				transform: translateY(-50%);
+				width: 30rpx;
+				height: 30rpx;
+				background-image: url("@/static/icon/icon_right.png");
+				background-position: center center;
+				background-repeat: no-repeat;
+				background-size: cover;
+			}
+		}
+
+		.nav_list:nth-last-child(1) {
+			border-bottom: 0;
+		}
+	}
+
+	.box_fillet {
+		border-radius: 20rpx;
+		overflow: hidden;
+	}
+
+	.chongzhi_box {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		padding: 30rpx 20rpx 10rpx;
+		background-color: #f0f9fb;
+		border-radius: 20rpx;
+	}
+
+	.vip_box {
+		padding: 22rpx 0 !important;
+		margin-bottom: 32rpx;
+		padding: 0;
+		position: relative;
+		width: 100%;
+		border-radius: 20rpx;
+		background-image: linear-gradient(60deg, #8265f9 30%, #016dea 100%);
+		
+		.zhanghu {
+			font-size: 80rpx;
+			text-align: center;
+			line-height: 100%;
+			margin-bottom: 0;
+		}
+	}
+
+	/deep/.scroll-view-item:nth-child(2n-1) {
+		background-color: transparent !important;
+	}
+	.bg_top {
+		padding: 0 10rpx 0 20rpx;
+		padding-top: 80rpx;
+		margin-bottom: 60rpx;
+	}
+
+	.setIcon {
+		position: absolute;
+		right: 30rpx;
+		top: 60rpx;
+		z-index: 2;
+	}
+
+	.mine_box {
+		width: 100%;
+
+		padding: 0 0rpx;
+	}
+
+	.list_box {
+		padding: 20rpx 0;
+		margin-top: -10rpx;
+	}
+
+	.pay_item_img {
+		display: flex;
+		color: #333;
+		// color: #dac4b7;
+		align-items: center;
+		// width: 80rpx;
+		// height: 80rpx;
+		padding: 8rpx;
+		box-sizing: border-box;
+		font-weight: bold;
+		margin: 0 auto;
+		margin-bottom: 10rpx;
+		//margin-top:-10rpx;
+	}
+
+	.popup_box {
+		padding-bottom: 20rpx;
+		width: 88vw;
+		overflow: hidden;
+		position: relative;
+		height: auto;
+
+		.title {
+			font-family: PangMenZhengDaoBiaoTiTiMianFeiBan;
+			font-weight: normal;
+			font-size: 46rpx;
+			color: $themeColor;
+			background-color: #f5f5f5;
+			padding: 20rpx;
+			//   border-leradius: 6px;
+			border-top-left-radius: 6px;
+			border-top-right-radius: 6px;
+		}
+
+		.content {
+			font-size: 26rpx;
+			letter-spacing: 0.15rpx;
+			padding: 20rpx;
+			color: #3f3f3f;
+
+			.top {
+				margin: 30rpx 0;
+			}
+
+			.center {
+				line-height: 40rpx;
+			}
+
+			.bottom {
+				width: 100%;
+				margin-top: 60rpx;
+				font-size: 24rpx;
+				line-height: 26rpx;
+				color: #b0b0b0;
+			}
+		}
+
+		.button_box {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			margin-top: 20rpx;
+
+			.u-button {
+				margin-left: 40rpx;
+			}
+
+			.u-button:nth-child(1) {
+				margin-left: 0;
+			}
+		}
+	}
+	.user_vip_box{
+		width: 125rpx;
+		position: absolute;
+		margin-top: - 40rpx;
+		z-index: 99;
+	}
+	.user_vip_item{
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.user_vip_item {
+		border-radius: 20rpx;
+		background: linear-gradient(90deg, #ff1f00 0%, #fa9f93 100%);
+		color: #fff;
+		font-size: 20rpx;
+		line-height: 40rpx;
+		height: 40rpx;
+		font-weight: bold;
+		margin-bottom: 5rpx;
+	}
+	.user_vip_item image{
+		width: 49rpx;
+		height: 16rpx;
+	}
+	.vip_type{
+		display: flex;
+		align-items: center;
+	}
+	.vip_type_item{
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0 10rpx;
+		background: linear-gradient(90deg, #258feb 0%, #00e1ec 100%);
+		border-radius: 20rpx;
+		font-size: 18rpx;
+		line-height: 40rpx;
+		height: 40rpx;
+		font-weight: bold;
+		color: #fff;
+		margin-right: 8rpx;
+	}
+	.vip_type_item_len{
+		padding: 0 7rpx;
+		font-size: 13rpx;
+		line-height: 34rpx;
+		height: 34rpx;
+		margin-right: 4rpx;
+	}
+	.vip_type_item:last-child{
+		margin-right: 0;
+	}
+	.vip_type_item image{
+		width: 30rpx;
+		height: 20rpx;
+	}
+	.vip_infor{
+		padding-left: 20rpx;
+	}
+	.vip_infor_item{
+		display: block;
+		color: #fff;
+		font-size: 26rpx;
+		line-height: 36rpx;
+		font-family: PangMenZhengDaoBiaoTiTiMianFeiBan;
+		font-weight: normal;
+	}
+	.vip_infor_item text{
+		color: #fff;
+	}
+	.vip_btn{
+		margin-right: 15rpx;
+	}
+	.vip_btn button{
+		background: none;
+		border: 2rpx solid #f9ae3d;
+		border-radius: 40rpx;
+		font-size: 24rpx;
+		width: 82rpx;
+		line-height: 42rpx;
+		color: #f9ae3d;
+		font-weight: bold;
+	}
+	.vip_null{
+		color: #fff;
+		font-size: 26rpx;
+		line-height: 34rpx;
+	}
+	.expired{
+		opacity: 0.55;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/mine/vip/index.vue b/pages/mine/vip/index.vue
index 407b7a2..9e6512f 100644
--- a/pages/mine/vip/index.vue
+++ b/pages/mine/vip/index.vue
@@ -199,6 +199,7 @@ export default {
 				
       }); // 这里转换成 字符串
       console.log('mynavData at line 192:', mynavData)
+      this.$refs.commonSelectGoods.close();
       uni.navigateTo({
         url: `/pages/goods/order/index?data=${mynavData}`,
       });