完成会员模块 支付等操作 修复部分页面heard显示异常问题

App.vue

@@ -248,7 +248,7 @@ export default {
 @import 'colorui/main.css';
 @import 'colorui/icon.css';
 @import 'style/FontStyle.css';
-
+@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
 
 
 body {

common/teenagePopup.js

@@ -1,6 +1,10 @@
 import Vue from 'vue'
 import teenagePopUpWindow from '@/components/teenagePopUpWindow/teenagePopUpWindow.vue'
 const app = getApp();
+
+// 存储当前弹窗实例
+let currentPopupInstance = null;
+
 // 创建全局弹窗容器
 function createPopupContainer() {
     const container = document.createElement('div');
@@ -12,6 +16,12 @@ function createPopupContainer() {
 export function createTeenagePopUpWindow(options = {}) {
     const { title, content, confirmText, imageSrc } = options;
 
+    // 如果存在当前弹窗实例，先关闭它
+    if (currentPopupInstance) {
+        currentPopupInstance.hide();
+        currentPopupInstance = null;
+    }
+
     // 确保弹窗容器存在
     let container = document.getElementById('teenage-popup-container');
     if (!container) {
@@ -36,6 +46,7 @@ export function createTeenagePopUpWindow(options = {}) {
             closePopup() {
                 this.$destroy();
                 this.$el.remove();
+                currentPopupInstance = null;
             }
         }
     });
@@ -43,20 +54,24 @@ export function createTeenagePopUpWindow(options = {}) {
     // 创建并挂载实例
     const instance = new PopupConstructor().$mount(container);
 
-    return {
+    // 创建弹窗控制对象
+    const popupControl = {
         show: () => {
-            // 在 uni-app 中使用 uni.createAnimation 或 $refs 来触发显示
             if (instance.$children && instance.$children[0] && instance.$children[0].open) {
                 instance.$children[0].open();
             }
         },
         hide: () => {
-            // 在 uni-app 中使用 uni.createAnimation 或 $refs 来触发隐藏
             if (instance.$children && instance.$children[0] && instance.$children[0].close) {
                 instance.$children[0].close();
             }
         }
     };
+
+    // 保存当前实例
+    currentPopupInstance = popupControl;
+
+    return popupControl;
 }
 
 // 全局定时弹窗方法  

components/DropdownMenu.vue

@@ -0,0 +1,75 @@
+<template>
+  <view class="dropdown-container">
+    <view class="dropdown-trigger" @tap="toggleDropdown">
+      <text class="fa fa-ellipsis-h"></text>
+    </view>
+    <view class="dropdown-menu" v-if="show">
+      <view 
+        v-for="(item, index) in options" 
+        :key="index"
+        class="dropdown-item" 
+        @tap="handleSelect(item)"
+      >
+        {{ item.label }}
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'DropdownMenu',
+  props: {
+    options: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  methods: {
+    toggleDropdown() {
+      this.show = !this.show
+    },
+    handleSelect(item) {
+      this.$emit('select', item)
+      this.show = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.dropdown-container {
+  position: relative;
+  
+  .dropdown-trigger {
+    padding: 10rpx;
+    cursor: pointer;
+  }
+
+  .dropdown-menu {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    background: #fff;
+    border-radius: 8rpx;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
+    z-index: 100;
+    min-width: 200rpx;
+    
+    .dropdown-item {
+      padding: 20rpx 30rpx;
+      font-size: 28rpx;
+      color: #333;
+      text-align: center;
+      &:hover {
+        background: #f5f5f5;
+      }
+    }
+  }
+}
+</style> 

components/dialogs/ShopDialog.vue

@@ -43,8 +43,7 @@
 </template>
 
 <script>
-import CustomDialog from '../CustomDialog/CustomDialog.vue'
-import './ShopDialog.scss'
+import CustomDialog from '../CustomDialog/CustomDialog.vue' 
 
 export default {
   name: 'ShopDialog',

pages.json

@@ -245,7 +245,7 @@
 			"path": "pages/my/job",
 			"style": {
 				"navigationBarTitleText": "任务中心",
-				"navigationBarBackgroundColor": "#ffffff"
+				"navigationStyle": "custom"
 			}
 		}, {
 			"path": "pages/my/DelMemConfirm",
@@ -386,7 +386,15 @@
 			"path" : "pages/vip/M_purchase",
 			"style" : 
 			{
-				"navigationBarTitleText" : "会员",
+				"navigationBarTitleText" : "M币充值",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path" : "pages/vip/record",
+			"style" : 
+			{
+				"navigationBarTitleText" : "充值记录",
 				"navigationStyle": "custom"
 			}
 		}

pages/index/articleDetail copy.scss

@@ -20,7 +20,7 @@ page {
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  height: 90rpx;
+  height: calc( 90rpx + var(--status-bar-height));
   padding: 0 20rpx;
   padding-top: var(--status-bar-height);
   background-color: #ffffff;

pages/index/articleDetail.scss

@@ -20,7 +20,7 @@ page {
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  height: 90rpx;
+  height: calc( 90rpx + var(--status-bar-height));
   padding: 0 20rpx;
   padding-top: var(--status-bar-height);
   background-color: #ffffff;

pages/index/index.vue

@@ -11,8 +11,8 @@
 		<view style="display: flex; justify-content: flex-end">
 			<view class="view6 step7"></view>
 		</view> -->
-		<z-paging ref="paging"  v-model="dataList"  :auto="false" :style="{ height: windowHeight - 80 + 'px' }"
-			:show-scrollbar="false">
+		<z-paging :use-custom-refresher="false" ref="paging"  v-model="dataList"  :auto="false" :style="{ height: windowHeight - 80 + 'px' }"
+			:show-scrollbar="false" :refresher-enabled="false">
 			<template #top>
 				<page-navbar>
 					<template #navCenter>
@@ -36,6 +36,8 @@
 							<uv-input placeholder="🔥“潮玩大作战” 派对季重磅开启!" border="none"
 								:custom-style="{ background: '#fff', paddingLeft: '25rpx' }" shape="circle">
 
+
+
 								<image class="testImg" src="@/static/home/icon-hot.png"
 									style="width: 22rpx; height: 30rpx"></image>
 

pages/index/workDetail.scss

@@ -20,7 +20,7 @@ page {
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  height: 90rpx;
+  height: calc( 90rpx + var(--status-bar-height));
   padding: 0 20rpx;
   padding-top: var(--status-bar-height);
   background-color: #ffffff;

pages/index/workDetail.vue

@@ -32,10 +32,9 @@
     </view>
 
     <!-- 灵感 -->
-    <template v-if="articleInfo.task_type == 1">
+    <template v-if="articleInfo.task_type == 1"> 
       <view class="inspiration-content" v-if="home_image">
-        <image v-if="home_image" src="../../static/makedetail/cz_img_zhanshi.png" mode="widthFix"></image>
-        <image :src="home_image" class="inspirationPictures" mode="widthFix"></image>
+        <image v-if="home_image"  :src="home_image" class="inspirationPictures" mode="widthFix"></image>
       </view>
     </template>
     <!-- 音乐 -->

pages/make/index.vue

@@ -96,18 +96,18 @@ export default {
 				{
 					el: ".currency-area",
 					tips: "积分可在这里查看，每日签到可获得积分！",
-					next: "下一步", 
+					next: "知道了", 
 				},
 				{
 					el: ".character",
 					tips: "创建星灵,入驻星球",
-					next: "下一步",
+					next: "知道了",
 					tipesStyle: "left: 40px;"
 				},
 				{
 					el: ".music",
 					tips: "输入灵感,生成歌曲",
-					next: "下一步",
+					next: "知道了",
 				},
 				{
 					el: ".cube",

pages/make/relatedWorks.vue

@@ -54,9 +54,7 @@ export default {
 	},
 	methods: {
 		goBack() {
-			uni.navigateTo({
-				url: '/pages/make/manageArticle'
-			})
+		uni.navigateBack(); // 返回上一页
 		},
 		selectItem(item) { // 添加选择项目的方法
 			this.selectedItem = item;

pages/makedetail/makeDetail.scss

@@ -26,6 +26,7 @@ page {
   background-color: #ffffff;
   position: sticky;
   top: 0;
+  height: calc( 90rpx + var(--status-bar-height));
   z-index: 100;
 
   .navbar-left {

pages/makedetail/makeImgDetail.vue

@@ -181,33 +181,33 @@ export default {
 				{
 					el: ".right",
 					tips: "积分可在这里查看，每日签到可获得积分！",
-					next: "下一步",
+					next: "知道了",
 					// style: "width: 120px; left: 490rpx;"
 				},
 				{
 					el: ".input-area",
 					tips: "输入关键词，描述我想要的画面！",
-					next: "下一步",
+					next: "知道了",
 				},
 				{
 					el: ".action-section",
 					tips: "选择或输入主体的行为动作！",
-					next: "下一步",
+					next: "知道了",
 				},
 				{
 					el: ".environment-section",
 					tips: "选择或输入主体所处的环境场景",
-					next: "下一步",
+					next: "知道了",
 				},
 				{
 					el: ".image-section",
 					tips: "选择或输入主体形象特征",
-					next: "下一步",
+					next: "知道了",
 				},
 				{
 					el: ".style-scroll",
 					tips: "选择您喜欢的参考风格",
-					next: "下一步",
+					next: "知道了",
 				},
 				{
 					el: ".generate-btn",

pages/makedetail/makeMusicDetail.vue

@@ -156,27 +156,27 @@ export default {
 				{
 					el: ".right",
 					tips: "积分可在这里查看，每日签到可获得积分！",
-					next: "下一步", 
+					next: "知道了", 
 				},	
 				{
 					el: ".input-field",
 					tips: "在这里输入您想要创作的歌曲名称",
-					next: "下一步",
+					next: "知道了",
 				},
 				{
 					el: ".textarea-field",
 					tips: "在这里输入歌词内容，AI将根据歌词生成音乐",
-					next: "下一步",
+					next: "知道了",
 				},
 				{
 					el: ".tabs",
 					tips: "选择音乐风格，包括情感、流派、年代和乐器",
-					next: "下一步",
+					next: "知道了",
 				},
 				{
 					el: ".tags",
 					tips: "点击选择具体的风格标签，可以多选",
-					next: "下一步",
+					next: "知道了",
 				},
 				{
 					el: ".generate-btn",

pages/my/job.scss

@@ -1,9 +1,11 @@
 page {
   background-color: #fff;
   font-family: "PingFang SC-Medium";
+  min-height: 100vh;
 }
 
 .page {
+  min-height: 100vh;
   background-color: #fff;
   position: relative;
   background: url("../../static/me/job/rw_bg_01.png") center top / 100% auto
@@ -248,17 +250,17 @@ page {
 
 // 兑换弹窗
 .NicknamePopUpWindowBox {
-		::v-deep.uv-popup .uv-popup__content {
-			border-radius: 28rpx 28rpx 0 0;
-			min-height: 400rpx;
-			background: url("../../static/me/wd_bg_jianjie.png") center top/100% auto no-repeat, #f2f6f2 !important;
-			padding-bottom: 40rpx;
-		
-		}
+  ::v-deep.uv-popup .uv-popup__content {
+    border-radius: 28rpx 28rpx 0 0;
+    min-height: 400rpx;
+    background: url("../../static/me/wd_bg_jianjie.png") center top/100% auto
+        no-repeat,
+      #f2f6f2 !important;
+    padding-bottom: 40rpx;
+  }
 }
 
 .NicknamePopUpWindow {
-
   .nickname-heard {
     padding: 0 32rpx;
     padding-top: 20rpx;
@@ -288,45 +290,53 @@ page {
     }
   }
   .content-box {
-width: 686rpx;
-height: 360rpx;
-background: #FFFFFF;
-border-radius: 20rpx;
-margin:  0 auto;
+    width: 686rpx;
+    height: 420rpx;
+    background: #ffffff;
+    border-radius: 20rpx;
+    margin: 0 auto;
     margin-bottom: 40rpx;
-	padding: 24rpx;
-	.prompt{
-		font-weight: 400;
-		font-size: 28rpx;
-		color: #1F1F1F;
-		padding-bottom: 24rpx;
-		text{
-			color: #999999;
-			font-size: 24rpx;
-		}
-	}
-	::v-deep.uv-input{
-		background-color: #f2f6f2;
-	}
-	.input-box{
-		width: 100%;
-		height: 88rpx;
-		background: #F2F6F2;
-		border-radius: 20rpx;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		margin-bottom: 60rpx;
-		padding:18rpx 24rpx ;
-		>image{
-			width: 48rpx;
-			height: 48rpx;
-			margin-right: 16rpx;
-		}
-	.input{
-	}	
-	}
-	
+    padding: 24rpx;
+    .prompt {
+      font-weight: 400;
+      font-size: 28rpx;
+      color: #1f1f1f;
+      padding-bottom: 24rpx;
+      text {
+        color: #999999;
+        font-size: 24rpx;
+      }
+    }
+    ::v-deep.uv-input {
+      background-color: #f2f6f2;
+    }
+    .input-box {
+      width: 100%;
+      height: 88rpx;
+      background: #f2f6f2;
+      border-radius: 20rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 60rpx;
+      padding: 18rpx 24rpx;
+      > image {
+        width: 48rpx;
+        height: 48rpx;
+        margin-right: 16rpx;
+      }
+      .input {
+      }
+    }
+    
+    .tips-text {
+      font-size: 24rpx;
+      color: #999;
+      text-align: center;
+      display: block;
+      text-align: center;
+      padding: 20rpx 0;
+    }
   }
 }
 

pages/my/job.vue

@@ -1,29 +1,40 @@
 <template>
-	<view class="page">
-		<!-- 顶部黄色背景 -->
-		<PageHeader title="" class="PageHeader">
-			<template slot="center">
-				任务中心
-			</template>
-		</PageHeader>
-		<view class="occupyHigh"></view>
-		<!-- 内容区域 -->
-		<view class="content-area">
-			<!-- 星源余额展示区 -->
-			<view class="person-info">
-				<view class="person-info-left">
-					<CircleAvatar class="avator" v-if="myinfo.avator" :src="myinfo.avator"></CircleAvatar>
-					<view class="title-area">
-						<text class="my-bean-title">我的星源</text>
-						<view class="bean-number">
-							<image src="@/static/me/job/wd_icon_xingyuan.png"></image> {{ num_gmd }}
-						</view>
-					</view>
-				</view>
-				<view class="exchange-btn" @click="openNicknamePopUpWindow()">兑换</view>
-			</view>
-			<!-- 星源余额展示区 -->
-			<!-- <view class="bean-balance"  >
+  <view class="page">
+    <!-- 顶部黄色背景 -->
+    <PageHeader class="PageHeader">
+      <template slot="center"> 任务中心 </template>
+      <template slot="right">
+        <DropdownMenu
+          :options="dropdownOptions"
+          @select="handleDropdownSelect"
+        />
+      </template>
+    </PageHeader>
+    <view class="occupyHigh"></view>
+    <!-- 内容区域 -->
+    <view class="content-area">
+      <!-- 星源余额展示区 -->
+      <view class="person-info">
+        <view class="person-info-left">
+          <CircleAvatar
+            class="avator"
+            v-if="myinfo.avator"
+            :src="myinfo.avator"
+          ></CircleAvatar>
+          <view class="title-area">
+            <text class="my-bean-title">我的星源</text>
+            <view class="bean-number">
+              <image src="@/static/me/job/wd_icon_xingyuan.png"></image>
+              {{ num_gmd }}
+            </view>
+          </view>
+        </view>
+        <view class="exchange-btn" @click="openNicknamePopUpWindow()"
+          >兑换</view
+        >
+      </view>
+      <!-- 星源余额展示区 -->
+      <!-- <view class="bean-balance"  >
 				<view class="balance-header">
 					<view class="title-area">
 						<view class="yellow-dot"></view>
@@ -33,21 +44,23 @@
 				</view>
 				<view class="bean-number">{{ num_gmd }}</view>
 			</view> -->
-			<view class="starWishCheckIn">
-				<image src="@/static/me/job/rw_wenzi_01.png" class="title"></image>
-				<view class="card purple-card">
-					<view class="card-title">初次见面礼</view>
-					<view class="card-desc">完善个人资料达到{{ newer_bfb }}</view>
-					<view class="card-btn card-reward ">+100星源</view>
-				</view>
-				<view class="card yellow-card">
-					<view class="card-title">每日签到</view>
-					<view class="card-desc">签到领奖励，快来签到吧！</view> 
-					<view class="card-btn sign-btn" @click="opencheckInPopUpWindow()">立即签到</view>
-				</view>
-			</view>
-			<!-- 星愿打卡区域 -->
-			<!-- <view class="sign-cards" v-if="false">
+      <view class="starWishCheckIn">
+        <image src="@/static/me/job/rw_wenzi_01.png" class="title"></image>
+        <view class="card purple-card">
+          <view class="card-title">初次见面礼</view>
+          <view class="card-desc">完善个人资料达到{{ newer_bfb }}</view>
+          <view class="card-btn card-reward">+100星源</view>
+        </view>
+        <view class="card yellow-card">
+          <view class="card-title">每日签到</view>
+          <view class="card-desc">签到领奖励，快来签到吧！</view>
+          <view class="card-btn sign-btn" @click="opencheckInPopUpWindow()"
+            >立即签到</view
+          >
+        </view>
+      </view>
+      <!-- 星愿打卡区域 -->
+      <!-- <view class="sign-cards" v-if="false">
 				<view class="card purple-card">
 					<view class="card-title">初次见面礼</view>
 					<view class="card-desc">完善个人资料可得</view>
@@ -62,34 +75,38 @@
 				</view>
 			</view> -->
 
-
-			<!-- 每日任务列表 -->
-			<view class="task-list-box">
-				<view class="task-header">
-					<image src="@/static/me/job/rw_wenzi_02.png"></image>
-					<text class="task-subtitle">(获取免费星源)</text>
-				</view>
-
-				<!-- 任务项列表 -->
-				<view class="task-item" v-for="(item, index) in taskList" :key="index">
-					<view class="task-info">
-						<image :src="item.image"></image>
-						<view>
-							<view class="task-name one-omit">{{ item.name }}</view>
-							<view class="task-desc one-omit">{{ item.content }}</view>
-						</view>
-					</view>
-					<view class="task-reward">
-						<image src="@/static/me/job/wd_icon_xingyuan.png"></image>+{{ item.num }}
-					</view>
-					<view class="task-btn" :class="{ 'task-completed': item.status == 9 }" @click="claimReward(index)">
-						{{ item.status == 9 ? "已领取" : "领取" }}
-					</view>
-				</view>
-			</view>
-
-
-			<!-- 每日任务列表 
+      <!-- 每日任务列表 -->
+      <view class="task-list-box">
+        <view class="task-header">
+          <image src="@/static/me/job/rw_wenzi_02.png"></image>
+          <text class="task-subtitle">(获取免费星源)</text>
+        </view>
+
+        <!-- 任务项列表 -->
+        <view class="task-item" v-for="(item, index) in taskList" :key="index">
+          <view class="task-info">
+            <image :src="item.image"></image>
+            <view>
+              <view class="task-name one-omit">{{ item.name }}</view>
+              <view class="task-desc one-omit">{{ item.content }}</view>
+            </view>
+          </view>
+          <view class="task-reward">
+            <image src="@/static/me/job/wd_icon_xingyuan.png"></image>+{{
+              item.num
+            }}
+          </view>
+          <view
+            class="task-btn"
+            :class="{ 'task-completed': item.status == 9 }"
+            @click="claimReward(index)"
+          >
+            {{ item.status == 9 ? "已领取" : "领取" }}
+          </view>
+        </view>
+      </view>
+
+      <!-- 每日任务列表 
 			<view class="task-list">
 				<view class="task-header">
 					<text class="task-title">每日任务</text>
@@ -106,412 +123,474 @@
 					</view>
 				</view>
 			</view>-->
-		</view>
-
-		<!-- 星源兑换弹窗 -->
-		<view class="exchange-popup" v-if="showExchange">
-			<view class="popup-mask" @click="hideExchangePopup"></view>
-			<view class="popup-content">
-				<!-- 弹窗顶部信息栏 -->
-				<view class="popup-header">
-					<text class="available-balance">可用M币: 14500</text>
-					<text class="exchange-title">兑换星源</text>
-				</view>
-
-				<!-- 兑换区域主体 -->
-				<view class="exchange-area">
-					<view class="exchange-title-area">
-						<text class="exchange-main-title">M币兑换星源数</text>
-						<text class="exchange-subtitle">兑换星源数必须是10的倍数</text>
-					</view>
-
-					<view class="input-area">
-						<view class="bean-icon"></view>
-						<input type="number" class="exchange-input" placeholder="请输入兑换星源数量" v-model="exchangeAmount" />
-					</view>
-
-					<!-- 操作按钮 -->
-					<view class="action-area">
-						<view class="exchange-btn-large" @click="confirmExchange">立即兑换星源</view>
-						<text class="tips-text">星源可用于创作（生成图片、音乐等AI创作功能）</text>
-					</view>
-				</view>
-			</view>
-		</view>
-
-	 
-		<checkInPopUpWindow :checkInDays="6" :signInfo="signInfo" :signNotify="signNotify"
-			@toggleSignNotify="toggleSignNotify" ref="checkInPopUpWindow" @confirmSign="confirmSign()">
-		</checkInPopUpWindow>
-
-		<!-- 提示框 -->
-		<DialogBox ref="DialogBox"></DialogBox>
-		<!-- 兑换m币弹窗-->
-		<view class="NicknamePopUpWindowBox">
-
-
-			<NicknamePopup title="" subtitle="" class="NicknamePopUpWindow" ref="NicknamePopUpWindow">
-				<template slot="heard">
-					<view class="nickname-heard">
-						<view class="available-mCoin">可用M币：{{myinfo.num_gmm}}</view>
-						<view class="exchange-title">兑换星源</view>
-					</view>
-				</template>
-				<template slot="content">
-					<view class="content-box">
-						<view class="prompt">
-							M币兑换星源数<text>（兑换星源数必须是10的倍数）</text>
-						</view>
-						<view class="input-box">
-							<image src="@/static/me/job/wd_icon_xingyuan.png"></image>
-							<uv-input type="number" class="input" placeholder="请输入昵称" border="none"
-								v-model="exchangeAmount" maxlength="20"></uv-input>
-						</view>
-						<view class="btn-box" @click="confirmExchange">立即兑换星源</view>
-					</view>
-				</template>
-			</NicknamePopup>
-		</view>
-	</view>
+    </view>
+
+    <!-- 星源兑换弹窗 -->
+    <view class="exchange-popup" v-if="showExchange">
+      <view class="popup-mask" @click="hideExchangePopup"></view>
+      <view class="popup-content">
+        <!-- 弹窗顶部信息栏 -->
+        <view class="popup-header">
+          <text class="available-balance">可用M币: 14500</text>
+          <text class="exchange-title">兑换星源</text>
+        </view>
+
+        <!-- 兑换区域主体 -->
+        <view class="exchange-area">
+          <view class="exchange-title-area">
+            <text class="exchange-main-title">M币兑换星源数</text>
+            <text class="exchange-subtitle">兑换星源数必须是10的倍数</text>
+          </view>
+
+          <view class="input-area">
+            <view class="bean-icon"></view>
+            <input
+              type="number"
+              class="exchange-input"
+              placeholder="请输入兑换星源数量"
+              v-model="exchangeAmount"
+            />
+          </view>
+
+          <!-- 操作按钮 -->
+          <view class="action-area">
+            <view class="exchange-btn-large" @click="confirmExchange"
+              >立即兑换星源</view
+            >
+            <text class="tips-text"
+              >星源可用于创作（生成图片、音乐等AI创作功能）</text
+            >
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <checkInPopUpWindow
+      :checkInDays="6"
+      :signInfo="signInfo"
+      :signNotify="signNotify"
+      @toggleSignNotify="toggleSignNotify"
+      ref="checkInPopUpWindow"
+      @confirmSign="confirmSign()"
+    >
+    </checkInPopUpWindow>
+
+    <!-- 提示框 -->
+    <DialogBox ref="DialogBox"></DialogBox>
+    <!-- 兑换m币弹窗-->
+    <view class="NicknamePopUpWindowBox">
+      <NicknamePopup
+        title=""
+        subtitle=""
+        class="NicknamePopUpWindow"
+        ref="NicknamePopUpWindow"
+      >
+        <template slot="heard">
+          <view class="nickname-heard">
+            <view class="available-mCoin">可用M币：{{ myinfo.num_gmm }}</view>
+            <view class="exchange-title">兑换星源</view>
+          </view>
+        </template>
+        <template slot="content">
+          <view class="content-box">
+            <view class="prompt">
+              M币兑换星源数<text>（兑换星源数必须是10的倍数）</text>
+            </view>
+            <view class="input-box">
+              <image src="@/static/me/job/wd_icon_xingyuan.png"></image>
+              <uv-input
+                type="number"
+                class="input"
+                placeholder="请输入昵称"
+                border="none"
+                v-model="exchangeAmount"
+                maxlength="20"
+              ></uv-input>
+            </view>
+            <view class="btn-box" @click="showExchangeConfirm">立即兑换星源</view>
+            <text class="tips-text"
+              >星源可用于创作（生成图片、音乐等AI创作功能）</text
+            >
+          </view>
+        </template>
+      </NicknamePopup>
+    </view>
+  </view>
 </template>
 
 <script>
-	import checkInPopUpWindow from "@/components/checkIn-popUp-window/checkIn-popUp-window.vue";
-
-	export default {
-		components: {
-			checkInPopUpWindow,
-
-		},
-		data() {
-			return {
-				title: "任务中心",
-				myinfo: {},
-				realname: "",
-				num_gmd: 0,
-				newer_bfb: "",
-				beanBalance: 2560,
-				showExchange: false,
-				exchangeAmount: "",
-				mCoinBalance: 0, 
-				signNotify: true,
-				signRewards: [{
-						dayNum: "01",
-						reward: "10星源",
-						isVip: false,
-					},
-					{
-						dayNum: "02",
-						reward: "15星源",
-						isVip: false,
-					},
-					{
-						dayNum: "03",
-						reward: "20星源",
-						isVip: false,
-					},
-					{
-						dayNum: "04",
-						reward: "25星源",
-						isVip: false,
-					},
-					{
-						dayNum: "05",
-						reward: "30星源",
-						isVip: false,
-					},
-					{
-						dayNum: "06",
-						reward: "35星源",
-						isVip: true,
-					},
-					{
-						dayNum: "07",
-						reward: "50星源",
-						isVip: true,
-					},
-				],
-				signInfo: {
-					signDay: 1,
-					isSigned: false,
-					reward: 0,
-				},
-				taskList: [],
-			};
-		},
-		onLoad() {
-			this.loadData();
-			this.getSignInfo();
-
-
-		},
-		onShow() {},
-		methods: {
-			opencheckInPopUpWindow() {
-
-				this.$refs.checkInPopUpWindow.open();
-			},
-			closecheckInPopUpWindow() {
-				this.$refs.checkInPopUpWindow.close();
-			},
-			openNicknamePopUpWindow() {
-
-				this.$refs.NicknamePopUpWindow.open();
-			},
-			closeNicknamePopUpWindow() {
-				this.$refs.NicknamePopUpWindow.close();
-			},
-			onBack() {},
-
-			loadData() {
-				uni.request({
-					url: this.$apiHost + "/Job/getlist",
-					data: {
-						uuid: getApp().globalData.uuid,
-					},
-					header: {
-						"content-type": "application/json",
-						sign: getApp().globalData.headerSign,
-					},
-					success: (res) => {
-						console.log("----:", res.data);
-						this.num_gmd = res.data.num_gmd;
-						this.newer_bfb = res.data.newer_bfb;
-						this.taskList = res.data.list;
-					},
-					complete: (com) => {
-						// uni.hideLoading();
-					},
-					fail: (e) => {
-						console.log("----e:", e);
-					},
-				});
-			},
-
-			// 获取签到信息
-			getSignInfo() {
-				uni.request({
-					url: this.$apiHost + "/User/sign7Day",
-					data: {
-						uuid: getApp().globalData.uuid,
-						action: "get",
-					},
-					header: {
-						"content-type": "application/json",
-						sign: getApp().globalData.headerSign,
-					},
-					success: (res) => {
-						if (res.data.success === "yes") {
-							this.signInfo = {
-								signDay: res.data.data.sign_day,
-								isSigned: res.data.data.is_signed,
-								reward: res.data.data.reward || 0,
-							};
-						}
-					},
-					fail: (e) => {
-						console.log("获取签到信息失败:", e);
-					},
-				});
-				uni.request({
-					url: this.$apiHost + "/User/getinfo",
-					data: {
-						uuid: getApp().globalData.uuid,
-						skey: getApp().globalData.skey,
-					},
-					header: {
-						"content-type": "application/json",
-						sign: getApp().globalData.headerSign,
-					},
-					success: (res) => {
-						this.myinfo = res.data;
-					},
-					complete: (com) => {},
-					fail: (e) => {
-						console.log("----e:", e);
-					},
-				});
-			},
-
-			// 显示兑换弹窗
-			showExchangePopup() {
-				this.showExchange = true;
-			},
-
-			// 隐藏兑换弹窗
-			hideExchangePopup() {
-				this.showExchange = false;
-			},
-
-			 
-
-			// 切换签到通知开关
-			toggleSignNotify(falg) {
-				this.signNotify = falg;
-			},
-
-			// 确认签到
-			confirmSign() {
-				if (this.signInfo.isSigned) {
-					uni.showToast({
-						title: "今日已签到",
-						icon: "none",
-					});
-					return;
-				}
-
-				uni.request({
-					url: this.$apiHost + "/User/sign7Day",
-					data: {
-						uuid: getApp().globalData.uuid,
-						action: "sign",
-					},
-					header: {
-						"content-type": "application/json",
-						sign: getApp().globalData.headerSign,
-					},
-					success: (res) => {
-						if (res.data.success === "yes") {
-							uni.showToast({
-								title: res.data.str,
-								icon: "none",
-							});
-							// 更新签到信息
-							this.getSignInfo();
-							// 更新星源数量
-							this.loadData();
-						} else {
-							uni.showToast({
-								title: res.data.str,
-								icon: "none",
-							});
-						}
-					},
-					fail: (e) => {
-						console.log("签到失败:", e);
-						uni.showToast({
-							title: "签到失败，请稍后重试",
-							icon: "none",
-						});
-					},
-				});
-			},
-
-			// 确认兑换
-			confirmExchange() {
-				if (!this.exchangeAmount) {
-					uni.showToast({
-						title: "请输入兑换数量",
-						icon: "none",
-					});
-					return;
-				}
-
-				const amount = parseInt(this.exchangeAmount);
-
-				if (isNaN(amount) || amount <= 0) {
-					uni.showToast({
-						title: "请输入有效数量",
-						icon: "none",
-					});
-					return;
-				}
-
-				if (amount % 10 !== 0) {
-					uni.showToast({
-						title: "兑换数量必须是10的倍数",
-						icon: "none",
-					});
-					return;
-				}
-				let that = this;
-				uni.request({
-					url: this.$apiHost + "/User/gmmToGMD",
-					data: {
-						uuid: getApp().globalData.uuid,
-						num: amount,
-					},
-					header: {
-						"content-type": "application/json",
-						sign: getApp().globalData.headerSign,
-					},
-					success: (res) => {
-						console.log("----:", res.data);
-						uni.showToast({
-							title: res.data.str,
-							icon: "none",
-						});
-						if (res.data.success == "yes") {
-							this.hideExchangePopup();
-							this.exchangeAmount = "";
-							setTimeout(function() {
-								that.loadData();
-							}, 900);
-						}
-					},
-					complete: (com) => {
-						// uni.hideLoading();
-						this.closeNicknamePopUpWindow()
-					},
-					fail: (e) => {
-						console.log("----e:", e);
-					},
-				});
-
-				// // 模拟兑换处理
-				// uni.showToast({
-				// 	title: "兑换成功，获得" + amount + "星源",
-				// 	icon: 'none'
-				// });
-
-				// this.beanBalance += amount;
-				// this.hideExchangePopup();
-				// this.exchangeAmount = '';
-			},
-
-			claimReward(index) {
-				if (this.taskList[index].status == 9) {
-					uni.showToast({
-						title: "已领取该奖励",
-						icon: "none",
-					});
-					return;
-				}
-				let that = this;
-				uni.request({
-					url: this.$apiHost + "/Job/doAct",
-					data: {
-						uuid: getApp().globalData.uuid,
-						id: this.taskList[index].id,
-					},
-					header: {
-						"content-type": "application/json",
-						sign: getApp().globalData.headerSign,
-					},
-					success: (res) => {
-						console.log("----:", res.data);
-						if (res.data.success == "yes") {
-							uni.showToast({
-								title: res.data.str,
-								icon: "none",
-							});
-							setTimeout(function() {
-								that.loadData();
-							}, 900);
-						}
-					},
-					complete: (com) => {
-						// uni.hideLoading();
-					},
-					fail: (e) => {
-						console.log("----e:", e);
-					},
-				});
-			},
-		},
-	};
+import checkInPopUpWindow from "@/components/checkIn-popUp-window/checkIn-popUp-window.vue";
+import DropdownMenu from "@/components/DropdownMenu.vue";
+
+export default {
+  components: {
+    checkInPopUpWindow,
+    DropdownMenu,
+  },
+  data() {
+    return {
+      title: "任务中心",
+      myinfo: {},
+      realname: "",
+      num_gmd: 0,
+      newer_bfb: "",
+      beanBalance: 2560,
+      showExchange: false,
+      exchangeAmount: "",
+      mCoinBalance: 0,
+      signNotify: true,
+      signRewards: [
+        {
+          dayNum: "01",
+          reward: "10星源",
+          isVip: false,
+        },
+        {
+          dayNum: "02",
+          reward: "15星源",
+          isVip: false,
+        },
+        {
+          dayNum: "03",
+          reward: "20星源",
+          isVip: false,
+        },
+        {
+          dayNum: "04",
+          reward: "25星源",
+          isVip: false,
+        },
+        {
+          dayNum: "05",
+          reward: "30星源",
+          isVip: false,
+        },
+        {
+          dayNum: "06",
+          reward: "35星源",
+          isVip: true,
+        },
+        {
+          dayNum: "07",
+          reward: "50星源",
+          isVip: true,
+        },
+      ],
+      signInfo: {
+        signDay: 1,
+        isSigned: false,
+        reward: 0,
+      },
+      taskList: [],
+      dropdownOptions: [{ label: "星源记录", type: "starSourceRecord" }],
+      isRefreshing: false,
+    };
+  },
+  onPullDownRefresh() {
+    if (this.isRefreshing) return;
+    
+    this.isRefreshing = true;
+    this.refreshData();
+  },
+  onLoad() {
+    this.loadData();
+    this.getSignInfo();
+  },
+  onShow() {},
+  methods: {
+    opencheckInPopUpWindow() {
+      this.$refs.checkInPopUpWindow.open();
+    },
+    closecheckInPopUpWindow() {
+      this.$refs.checkInPopUpWindow.close();
+    },
+    openNicknamePopUpWindow() {
+      this.$refs.NicknamePopUpWindow.open();
+    },
+    closeNicknamePopUpWindow() {
+      this.$refs.NicknamePopUpWindow.close();
+    },
+    onBack() {},
+
+    loadData() {
+      return new Promise((resolve, reject) => {
+        uni.request({
+          url: this.$apiHost + "/Job/getlist",
+          data: {
+            uuid: getApp().globalData.uuid,
+          },
+          header: {
+            "content-type": "application/json",
+            sign: getApp().globalData.headerSign,
+          },
+          success: (res) => {
+            console.log("----:", res.data);
+            this.num_gmd = res.data.num_gmd;
+            this.newer_bfb = res.data.newer_bfb;
+            this.taskList = res.data.list;
+            resolve(res);
+          },
+          complete: (com) => {
+            // uni.hideLoading();
+          },
+          fail: (e) => {
+            console.log("----e:", e);
+            reject(e);
+          },
+        });
+      });
+    },
+
+    getSignInfo() {
+      return new Promise((resolve, reject) => {
+        uni.request({
+          url: this.$apiHost + "/User/sign7Day",
+          data: {
+            uuid: getApp().globalData.uuid,
+            action: "get",
+          },
+          header: {
+            "content-type": "application/json",
+            sign: getApp().globalData.headerSign,
+          },
+          success: (res) => {
+            if (res.data.success === "yes") {
+              this.signInfo = {
+                signDay: res.data.data.sign_day,
+                isSigned: res.data.data.is_signed,
+                reward: res.data.data.reward || 0,
+              };
+            }
+            resolve(res);
+          },
+          fail: (e) => {
+            console.log("获取签到信息失败:", e);
+            reject(e);
+          },
+        });
+        
+        uni.request({
+          url: this.$apiHost + "/User/getinfo",
+          data: {
+            uuid: getApp().globalData.uuid,
+            skey: getApp().globalData.skey,
+          },
+          header: {
+            "content-type": "application/json",
+            sign: getApp().globalData.headerSign,
+          },
+          success: (res) => {
+            this.myinfo = res.data;
+            resolve(res);
+          },
+          complete: (com) => {},
+          fail: (e) => {
+            console.log("----e:", e);
+            reject(e);
+          },
+        });
+      });
+    },
+
+    showExchangePopup() {
+      this.showExchange = true;
+    },
+
+    hideExchangePopup() {
+      this.showExchange = false;
+    },
+
+    toggleSignNotify(falg) {
+      this.signNotify = falg;
+    },
+
+    confirmSign() {
+      if (this.signInfo.isSigned) {
+        uni.showToast({
+          title: "今日已签到",
+          icon: "none",
+        });
+        return;
+      }
+
+      uni.request({
+        url: this.$apiHost + "/User/sign7Day",
+        data: {
+          uuid: getApp().globalData.uuid,
+          action: "sign",
+        },
+        header: {
+          "content-type": "application/json",
+          sign: getApp().globalData.headerSign,
+        },
+        success: (res) => {
+          if (res.data.success === "yes") {
+            uni.showToast({
+              title: res.data.str,
+              icon: "none",
+            });
+            this.getSignInfo();
+            this.loadData();
+          } else {
+            uni.showToast({
+              title: res.data.str,
+              icon: "none",
+            });
+          }
+        },
+        fail: (e) => {
+          console.log("签到失败:", e);
+          uni.showToast({
+            title: "签到失败，请稍后重试",
+            icon: "none",
+          });
+        },
+      });
+    },
+
+    confirmExchange() {
+      if (!this.exchangeAmount) {
+        uni.showToast({
+          title: "请输入兑换数量",
+          icon: "none",
+        });
+        return;
+      }
+
+      const amount = parseInt(this.exchangeAmount);
+
+      if (isNaN(amount) || amount <= 0) {
+        uni.showToast({
+          title: "请输入有效数量",
+          icon: "none",
+        });
+        return;
+      }
+
+      if (amount % 10 !== 0) {
+        uni.showToast({
+          title: "兑换数量必须是10的倍数",
+          icon: "none",
+        });
+        return;
+      }
+      let that = this;
+      uni.request({
+        url: this.$apiHost + "/User/gmmToGMD",
+        data: {
+          uuid: getApp().globalData.uuid,
+          num: amount,
+        },
+        header: {
+          "content-type": "application/json",
+          sign: getApp().globalData.headerSign,
+        },
+        success: (res) => {
+          console.log("----:", res.data);
+          uni.showToast({
+            title: res.data.str,
+            icon: "none",
+          });
+          if (res.data.success == "yes") {
+            this.hideExchangePopup();
+            this.exchangeAmount = "";
+            setTimeout(function () {
+              that.loadData();
+            }, 900);
+          }
+        },
+        complete: (com) => {
+          this.closeNicknamePopUpWindow();
+        },
+        fail: (e) => {
+          console.log("----e:", e);
+        },
+      });
+    },
+
+    claimReward(index) {
+      if (this.taskList[index].status == 9) {
+        uni.showToast({
+          title: "已领取该奖励",
+          icon: "none",
+        });
+        return;
+      }
+      let that = this;
+      uni.request({
+        url: this.$apiHost + "/Job/doAct",
+        data: {
+          uuid: getApp().globalData.uuid,
+          id: this.taskList[index].id,
+        },
+        header: {
+          "content-type": "application/json",
+          sign: getApp().globalData.headerSign,
+        },
+        success: (res) => {
+          console.log("----:", res.data);
+          if (res.data.success == "yes") {
+            uni.showToast({
+              title: res.data.str,
+              icon: "none",
+            });
+            setTimeout(function () {
+              that.loadData();
+            }, 900);
+          }
+        },
+        complete: (com) => {
+          // uni.hideLoading();
+        },
+        fail: (e) => {
+          console.log("----e:", e);
+        },
+      });
+    },
+
+    handleDropdownSelect(item) {
+      switch (item.type) {
+        case "starSourceRecord":
+          uni.navigateTo({
+            url: "/pages/vip/record?type=star",
+          });
+          break;
+      }
+    },
+
+    showExchangeConfirm() {
+      this.$refs["DialogBox"]
+        .confirm({
+          title: "确认兑换",
+          content: "确定要兑换" + this.exchangeAmount + "星源吗？",
+          DialogType: "inquiry",
+          btn1: "再考虑一下",
+          btn2: "确认兑换",
+          animation: 0,
+        })
+        .then((res) => {
+          if (res.confirm) {
+            this.confirmExchange();
+          }
+        });
+    },
+
+    refreshData() {
+      Promise.all([
+        this.loadData(),
+        this.getSignInfo()
+      ]).then(() => {
+        this.isRefreshing = false;
+        uni.stopPullDownRefresh();
+      }).catch(() => {
+        this.isRefreshing = false;
+        uni.stopPullDownRefresh();
+      });
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-	@import "job.scss";
+@import "job.scss";
 </style>

pages/my/my.scss

@@ -1,6 +1,6 @@
 page {
   background-color: #fff;
-  padding-top: var(--status-bar-height);
+
   padding-bottom: 144rpx;
 }
 .page {
@@ -8,7 +8,11 @@ page {
   width: 100%;
   min-height: 100vh;
 }
-.topBody {
+.reserveASeat{
+  width: 100%;
+  height: calc(var(--status-bar-height)  ); 
+}
+.topBody { 
   width: 750rpx;
 }
 .header1 {
@@ -223,7 +227,7 @@ page {
   padding-top: 48rpx;
   background: linear-gradient(225deg, #cdff9f 0%, #acff5f 30%, #d0ffa5 100%);
   min-height: 720rpx;
-  margin-bottom: -135rpx;
+  margin-bottom: calc(-135rpx + var(--status-bar-height));
   .card-box {
     width: 100%;
     min-height: 515rpx;

pages/my/my.vue

@@ -1,7 +1,8 @@
 <template>
-  <view class="page">
+  <view class="page"> 
     <view class="topBody">
       <view class="header">
+        <view class="reserveASeat"></view> 
         <view class="card-box">
           <view class="card-top">
             <view class="top-box">
@@ -327,7 +328,7 @@
       <view class="blankHeight"></view>
       <view class="blankHeight"></view>
     </view>
-
+   
     <!-- 确认框 -->
     <CustomConfirm ref="customConfirm"></CustomConfirm>
     <!-- 提示框 -->

pages/my/myStar.vue

@@ -637,7 +637,7 @@ export default {
 		align-items: center;
 		justify-content: space-between;
 		width: 100%;
-		height: 90rpx;
+		height: calc( 90rpx + var(--status-bar-height));
 		padding: 0 20rpx;
 		padding-top: var(--status-bar-height);
 		background-color: transparent;

pages/my/setting.vue

@@ -1,330 +1,370 @@
 <template>
-	<view class="page">
-		<view class="list_info">
-			<view class="">
-				<!-- 基础设置组 -->
-				<view class="group-header">基础设置</view>
-				<view class="item basic" v-for="(item, index) in basicSettings" :key="item.name + index"
-					@click="goPage(item.path)">
-					<view class="item-left">
-						<image class="icon" :src="item.icon" mode="widthFix"></image>
-						<text>{{ item.name }}</text>
-					</view>
-					<view class="item-right">
-						<switch v-if="item.switch == 1" checked class="custom-switch" color="#acf934"
-							style="transform:scale(0.7)" />
-						<image v-else class="arrow" src="../../static/me/arrow_right_gray.png" mode="widthFix"></image>
-					</view>
-				</view>
-			</view>
+  <view class="page">
+    <view class="list_info">
+      <view class="">
+        <!-- 基础设置组 -->
+        <view class="group-header">基础设置</view>
+        <view
+          class="item basic"
+          v-for="(item, index) in basicSettings"
+          :key="item.name + index"
+          @click="goPage(item.path)"
+        >
+          <view class="item-left">
+            <image class="icon" :src="item.icon" mode="widthFix"></image>
+            <text>{{ item.name }}</text>
+          </view>
+          <view class="item-right">
+            <switch
+              v-if="item.switch == 1"
+              checked
+              class="custom-switch"
+              color="#acf934"
+              style="transform: scale(0.7)"
+            />
+            <image
+              v-else
+              class="arrow"
+              src="../../static/me/arrow_right_gray.png"
+              mode="widthFix"
+            ></image>
+          </view>
+        </view>
+      </view>
 
-			<view class="">
-				<!-- 更多设置组 -->
-				<view class="group-header" style="margin-top: 20rpx;">更多</view>
-				<view class="item more" v-for="(item, index) in moreSettings" :key="index + item.name"
-					@click=" goPage(item.path, item)">
-					<view class="item-left">
-						<image class="icon" :src="item.icon" mode="widthFix"></image>
-						<text>{{ item.name }}</text>
-					</view>
-					<view class="item-right">
-						<switch v-if="item.switch == 1" color="#acf934" @change="switch1Change"
-							:checked="isContentRecommendation" class="custom-switch" style="transform:scale(0.7)" />
-						<image v-else class="arrow" src="../../static/me/arrow_right_gray.png" mode="widthFix"></image>
-					</view>
-				</view>
-			</view>
+      <view class="">
+        <!-- 更多设置组 -->
+        <view class="group-header" style="margin-top: 20rpx">更多</view>
+        <view
+          class="item more"
+          v-for="(item, index) in moreSettings"
+          :key="index + item.name"
+          @click="goPage(item.path, item)"
+        >
+          <view class="item-left">
+            <image class="icon" :src="item.icon" mode="widthFix"></image>
+            <text>{{ item.name }}</text>
+          </view>
+          <view class="item-right">
+            <switch
+              v-if="item.switch == 1"
+              color="#acf934"
+              @change="switch1Change"
+              :checked="isContentRecommendation"
+              class="custom-switch"
+              style="transform: scale(0.7)"
+            />
+            <image
+              v-else
+              class="arrow"
+              src="../../static/me/arrow_right_gray.png"
+              mode="widthFix"
+            ></image>
+          </view>
+        </view>
+      </view>
+    </view>
 
-		</view>
+    <!-- 版本信息 -->
+    <view class="version-info">
+      <text>版本号 {{ version }}</text>
+    </view>
 
-		<!-- 版本信息 -->
-		<view class="version-info">
-			<text>版本号 {{ version }}</text>
-		</view>
+    <!-- 退出登录按钮 -->
+    <view class="btn_submit" @click="logout">退出登录</view>
 
-		<!-- 退出登录按钮 -->
-		<view class="btn_submit" @click="logout">退出登录</view>
-
-		<DialogBox ref="DialogBox"></DialogBox>
-		<CustomerServicePopup ref="customerServicePopup"></CustomerServicePopup>
-	</view>
+    <DialogBox ref="DialogBox"></DialogBox>
+    <CustomerServicePopup ref="customerServicePopup"></CustomerServicePopup>
+  </view>
 </template>
 
 <script>
-import CustomerServicePopup from '@/components/CustomerServicePopup/CustomerServicePopup.vue'
-import { getStorage, setStorage, removeStorage } from '@/common/util.js'
+import CustomerServicePopup from "@/components/CustomerServicePopup/CustomerServicePopup.vue";
+import { getStorage, setStorage, removeStorage } from "@/common/util.js";
 export default {
-	components: { CustomerServicePopup },
-	data() {
-		return {
-			title: '',
-			sel: 1,
-			myinfo: {},
-			version: '',
-			basicSettings: [{
-				'name': '账户与安全',
-				'desc': '',
-				'path': '/pages/my/security',
-				'icon': '../../static/me/wd_icon_zhanghuyuanquan.png',
-				'propup': ''
-			},
-			{
-				'name': '基本资料',
-				'desc': '',
-				'path': '/pages/my/editInfo',
-				'icon': '../../static/me/wd_icon_jibenziliao.png',
-				'propup': ''
-			},
-			{
-				'name': '青少年模式',
-				'switch': 0,
-				'desc': '',
-				// 'path': '/pages/my/idcheck',实名认证
-				'path': '/pages/my/adolescent',
-				'icon': '../../static/me/wd_icon_qingshaonianmoshi.png',
-				'propup': ''
-			}
-			],
-			moreSettings: [{
-				'name': '通知设置',
-				'desc': '',
-				'path': '/pages/my/pushSet',
-				'icon': '../../static/me/wd_icon_tonzhishezhi.png',
-				'propup': ''
-			},
-			{
-				'name': '服务条款',
-				'desc': '',
-				'path': '/pages/AboutUs/xieyi',
-				'icon': '../../static/me/wd_icon_fuwutiaokuan.png',
-				'propup': ''
-			},
-			{
-				'name': '接收内容推荐',
-				'switch': 1,
-				'desc': '',
-				'path': '',
-				'icon': '../../static/me/wd_icon_jieshouneirongtuijian.png',
-				'propup': ''
-			},
-			{
-				'name': '联系客服',
-				'desc': '',
-				'path': 'kefu',
-				'icon': '../../static/me/wd_icon_lianxikefu.png',
-				'propup': 'customPopup'
-			}
-			],
-			isContentRecommendation: true,
-		}
-	},
-	onLoad() {
-		this.getAppVersion()
-
-	},
-	onShow() {
-		this.loadData();
-		// 
-		var isContentRecommendation = getStorage('isContentRecommendation')
-		if (isContentRecommendation != undefined) {
-			this.isContentRecommendation = isContentRecommendation == 'false' ? false : true
-		} else {
-			setStorage('isContentRecommendation', true)
-		}
-	},
-	methods: {
-		openCustomPopup() {
-			this.$refs.customerServicePopup.$refs.customPopup.open()
-		},
-		getAppVersion() {
-			uni.getSystemInfo({
-				success: (info) => {
-					// app系统环境
-					let appPlatform = info.platform;
-					console.log("appPlatform", info)
-					// #ifdef H5
-					this.version = 'V' + info.appVersion;
-					// #endif
-					// #ifdef APP-PLUS
-					plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
-						this.version = 'V' + wgtinfo.version;
-					});
-					// #endif
-				}
-			});
-		},
-		switch1Change(e) {
-			console.log(e.detail.value, 55555555555);
-
-			setStorage('isContentRecommendation', e.detail.value)
-		},
-		onBack() { },
-		chkSel() {
-			if (this.sel == 1) {
-				this.sel = 0;
-			} else {
-				this.sel = 1;
-			}
-		},
-		goPage(page) {
-			if (page == 'delete') {
-				this.DelMem();
-			} else if (page == 'yszc') {
-
-				// #ifdef APP-PLUS
-				plus.runtime.openURL('https://e.zhichao.art/web/yszc.php') // plus.runtime.openWeb(href);
-				// #endif
-
-				// #ifdef H5
-				window.open('https://e.zhichao.art/web/yszc.php')
-				// #endif
-			} else if (page == 'kefu') {
-				// let that = this;
-				// // #ifdef APP-PLUS
-				// plus.share.getServices(res => {
-				// 	const wechat = res.find(i => i.id === 'weixin')
-				// 	if (wechat) {
-				// 		wechat.openCustomerServiceChat({
-				// 			corpid: 'wwbc06aa8311b6ac08',
-				// 			// url: 'https://work.weixin.qq.com/kfid/kfc4b0bcb4038d00a50'
-				// 			url: that.myinfo.wxkf
-				// 		}, src => {
-				// 			console.log("success:")
-				// 		}, err => {
-				// 			console.log("error:")
-				// 		})
-				// 	} else {
-				// 		uni.showToast({
-				// 			title: '没有检测到微信，请先安装',
-				// 			icon: "error"
-				// 		});
-				// 	}
-				// });
-				// // #endif
-				this.openCustomPopup()
-			} else if (page != '') {
-				uni.navigateTo({
-					url: page,
-				})
-			}
-		},
-		DelMem() {
-			var that = this;
-			this.$refs['DialogBox'].confirm({
-				title: '警告',
-				content: '1、注销账号是不可逆操作，该账号下所有一切资料一旦注销无法恢复；\n2、注销后，你账号下所有权益将被清除。',
-				DialogType: 'inquiry',
-				btn1: '否',
-				btn2: '是',
-				animation: 0
-			}).then(() => {
-				uni.request({
-					url: that.$apiHost + '/My/delete', //检测是否已绑定
-					data: {
-						uuid: getApp().globalData.uuid
-					},
-					header: {
-						'content-type': 'application/json' //自定义请求头信息
-					},
-					success: (res) => {
-						uni.removeStorageSync("wapptoken");
-						uni.redirectTo({
-							url: '/pages/login/login',
-						})
+  components: { CustomerServicePopup },
+  data() {
+    return {
+      title: "",
+      sel: 1,
+      myinfo: {},
+      version: "",
+      basicSettings: [
+        {
+          name: "账户与安全",
+          desc: "",
+          path: "/pages/my/security",
+          icon: "../../static/me/wd_icon_zhanghuyuanquan.png",
+          propup: "",
+        },
+        {
+          name: "基本资料",
+          desc: "",
+          path: "/pages/my/editInfo",
+          icon: "../../static/me/wd_icon_jibenziliao.png",
+          propup: "",
+        },
+        {
+          name: "青少年模式",
+          switch: 0,
+          desc: "",
+          // 'path': '/pages/my/idcheck',实名认证
+          path: "/pages/my/adolescent",
+          icon: "../../static/me/wd_icon_qingshaonianmoshi.png",
+          propup: "",
+        },
+      ],
+      moreSettings: [
+        {
+          name: "通知设置",
+          desc: "",
+          path: "pushSet",
+          icon: "../../static/me/wd_icon_tonzhishezhi.png",
+          propup: "",
+        },
+        {
+          name: "服务条款",
+          desc: "",
+          path: "/pages/AboutUs/xieyi",
+          icon: "../../static/me/wd_icon_fuwutiaokuan.png",
+          propup: "",
+        },
+        {
+          name: "接收内容推荐",
+          switch: 1,
+          desc: "",
+          path: "",
+          icon: "../../static/me/wd_icon_jieshouneirongtuijian.png",
+          propup: "",
+        },
+        {
+          name: "联系客服",
+          desc: "",
+          path: "kefu",
+          icon: "../../static/me/wd_icon_lianxikefu.png",
+          propup: "customPopup",
+        },
+      ],
+      isContentRecommendation: true,
+    };
+  },
+  onLoad() {
+    this.getAppVersion();
+  },
+  onShow() {
+    this.loadData();
+    //
+    var isContentRecommendation = getStorage("isContentRecommendation");
+    if (isContentRecommendation != undefined) {
+      this.isContentRecommendation =
+        isContentRecommendation == "false" ? false : true;
+    } else {
+      setStorage("isContentRecommendation", true);
+    }
+  },
+  methods: {
+    openCustomPopup() {
+      this.$refs.customerServicePopup.$refs.customPopup.open();
+    },
+    getAppVersion() {
+      uni.getSystemInfo({
+        success: (info) => {
+          // app系统环境
+          let appPlatform = info.platform;
+          console.log("appPlatform", info);
+          // #ifdef H5
+          this.version = "V" + info.appVersion;
+          // #endif
+          // #ifdef APP-PLUS
+          plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
+            this.version = "V" + wgtinfo.version;
+          });
+          // #endif
+        },
+      });
+    },
+    switch1Change(e) { 
+      setStorage("isContentRecommendation", e.detail.value);
+    },
+    onBack() {},
+    chkSel() {
+      if (this.sel == 1) {
+        this.sel = 0;
+      } else {
+        this.sel = 1;
+      }
+    },
+    goPage(page) {
+      if (page == "delete") {
+        this.DelMem();
+      } else if (page == "yszc") {
+        // #ifdef APP-PLUS
+        plus.runtime.openURL("https://e.zhichao.art/web/yszc.php"); // plus.runtime.openWeb(href);
+        // #endif
 
-					}
-				});
-			})
-		},
-		loadData() {
-			console.log({
-				uuid: getApp().globalData.uuid,
-				skey: getApp().globalData.skey
-			});
-			uni.request({
-				url: this.$apiHost + '/Web/getinfo',
-				data: {
-					uuid: getApp().globalData.uuid
-				},
-				header: {
-					"content-type": "application/json",
-					'sign': getApp().globalData.headerSign
-				},
-				success: (res) => {
-					console.log("----:", res.data);
-					this.myinfo = res.data;
-				},
-				complete: (com) => {
-					// uni.hideLoading();
-				},
-				fail: (e) => {
-					console.log("----e:", e);
-				}
-			});
-		},
-		EditNickname() {
-			let that = this;
-			this.$refs['DialogBox'].confirm({
-				title: '更改昵称',
-				placeholder: '请输入修改的昵称',
-				value: that.myinfo.nickname,
-				DialogType: 'input',
-				animation: 0
-			}).then((res) => {
-				if (res.value.length < 1) {
-					uni.showToast({
-						title: "请输入有效的昵称",
-						icon: 'none'
-					});
-					return;
-				}
-				that.myinfo.nickname = res.value;
-				let obj2 = {
-					nickname: res.value
-				}
-				const postData = Object.assign({}, getApp().globalData.postHeader, obj2);
-				uni.request({
-					url: that.$apiHost + '/Gushi/editinfo', //检测是否已绑定
-					data: postData,
-					method: 'POST',
-					header: {
-						'content-type': 'application/json', //自定义请求头信息
-						'Access-Control-Allow-Origin': '*'
-					},
-					success: (res) => {
-						uni.showToast({
-							title: res.data.str,
-							icon: 'none'
-						});
-					}
-				});
-			})
-		},
-		logout() {
-			this.$refs['DialogBox'].confirm({
-				title: '提示',
-				content: '确定要退出登录吗？',
-				DialogType: 'inquiry',
-				btn1: '取消',
-				btn2: '确定',
-				animation: 0
-			}).then(() => {
-				uni.removeStorageSync("wapptoken");
-				uni.removeStorageSync("nickname");
-				uni.removeStorageSync("avator");
-				uni.removeStorageSync("mobile");
-				uni.removeStorageSync("uuid");
-				uni.removeStorageSync("user_id");
-				uni.removeStorageSync("is_login");
-				uni.redirectTo({
-					url: '/pages/login/login',
-				})
-			})
-		}
-	}
-}
+        // #ifdef H5
+        window.open("https://e.zhichao.art/web/yszc.php");
+        // #endif
+      } else if (page == "kefu") {
+        // let that = this;
+        // // #ifdef APP-PLUS
+        // plus.share.getServices(res => {
+        // 	const wechat = res.find(i => i.id === 'weixin')
+        // 	if (wechat) {
+        // 		wechat.openCustomerServiceChat({
+        // 			corpid: 'wwbc06aa8311b6ac08',
+        // 			// url: 'https://work.weixin.qq.com/kfid/kfc4b0bcb4038d00a50'
+        // 			url: that.myinfo.wxkf
+        // 		}, src => {
+        // 			console.log("success:")
+        // 		}, err => {
+        // 			console.log("error:")
+        // 		})
+        // 	} else {
+        // 		uni.showToast({
+        // 			title: '没有检测到微信，请先安装',
+        // 			icon: "error"
+        // 		});
+        // 	}
+        // });
+        // // #endif
+        this.openCustomPopup();
+      } else if (page == "pushSet") {
+        // 添加引导用户打开通知权限的逻辑
+      } else if (page != "") {
+        uni.navigateTo({
+          url: page,
+        });
+      }
+    },
+	
+    DelMem() {
+      var that = this;
+      this.$refs["DialogBox"]
+        .confirm({
+          title: "警告",
+          content:
+            "1、注销账号是不可逆操作，该账号下所有一切资料一旦注销无法恢复；\n2、注销后，你账号下所有权益将被清除。",
+          DialogType: "inquiry",
+          btn1: "否",
+          btn2: "是",
+          animation: 0,
+        })
+        .then(() => {
+          uni.request({
+            url: that.$apiHost + "/My/delete", //检测是否已绑定
+            data: {
+              uuid: getApp().globalData.uuid,
+            },
+            header: {
+              "content-type": "application/json", //自定义请求头信息
+            },
+            success: (res) => {
+              uni.removeStorageSync("wapptoken");
+              uni.redirectTo({
+                url: "/pages/login/login",
+              });
+            },
+          });
+        });
+    },
+    loadData() {
+      console.log({
+        uuid: getApp().globalData.uuid,
+        skey: getApp().globalData.skey,
+      });
+      uni.request({
+        url: this.$apiHost + "/Web/getinfo",
+        data: {
+          uuid: getApp().globalData.uuid,
+        },
+        header: {
+          "content-type": "application/json",
+          sign: getApp().globalData.headerSign,
+        },
+        success: (res) => {
+          console.log("----:", res.data);
+          this.myinfo = res.data;
+        },
+        complete: (com) => {
+          // uni.hideLoading();
+        },
+        fail: (e) => {
+          console.log("----e:", e);
+        },
+      });
+    },
+    EditNickname() {
+      let that = this;
+      this.$refs["DialogBox"]
+        .confirm({
+          title: "更改昵称",
+          placeholder: "请输入修改的昵称",
+          value: that.myinfo.nickname,
+          DialogType: "input",
+          animation: 0,
+        })
+        .then((res) => {
+          if (res.value.length < 1) {
+            uni.showToast({
+              title: "请输入有效的昵称",
+              icon: "none",
+            });
+            return;
+          }
+          that.myinfo.nickname = res.value;
+          let obj2 = {
+            nickname: res.value,
+          };
+          const postData = Object.assign(
+            {},
+            getApp().globalData.postHeader,
+            obj2
+          );
+          uni.request({
+            url: that.$apiHost + "/Gushi/editinfo", //检测是否已绑定
+            data: postData,
+            method: "POST",
+            header: {
+              "content-type": "application/json", //自定义请求头信息
+              "Access-Control-Allow-Origin": "*",
+            },
+            success: (res) => {
+              uni.showToast({
+                title: res.data.str,
+                icon: "none",
+              });
+            },
+          });
+        });
+    },
+    logout() {
+      this.$refs["DialogBox"]
+        .confirm({
+          title: "提示",
+          content: "确定要退出登录吗？",
+          DialogType: "inquiry",
+          btn1: "取消",
+          btn2: "确定",
+          animation: 0,
+        })
+        .then(() => {
+          uni.removeStorageSync("wapptoken");
+          uni.removeStorageSync("nickname");
+          uni.removeStorageSync("avator");
+          uni.removeStorageSync("mobile");
+          uni.removeStorageSync("uuid");
+          uni.removeStorageSync("user_id");
+          uni.removeStorageSync("is_login");
+          uni.redirectTo({
+            url: "/pages/login/login",
+          });
+        });
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-@import 'setting.scss';
+@import "setting.scss";
 </style>

pages/my/teenagePassword.vue

@@ -249,7 +249,7 @@ page {
 	background-color: #f2f6f2;
 	font-family: 'PingFang SC-Medium';
 	min-height: 100vh;
-	padding-bottom: calc(var (--window-bottom));
+	padding-bottom: calc(var(--window-bottom));
 	box-sizing: border-box;
 	position: relative;
 	left: 0;

pages/vip/M_purchase.scss

@@ -136,11 +136,12 @@ page {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
+  margin: 0 auto;
 
   .purchaseList {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    padding: 0 32rpx;
+    padding: 0 4rpx;
     gap: 18rpx;
     .item {
       display: flex;
@@ -204,10 +205,12 @@ page {
   .jinchu {
     padding-top: 30rpx;
     padding-left: 32rpx;
+	padding-bottom: 20rpx;
+
     font-size: 28rpx;
     color: rgba(32, 32, 32, 1);
   }
-  .mingxiList {
+  .mingxiList { 
     display: flex;
     flex-direction: row;
     justify-content: space-between;
@@ -219,19 +222,17 @@ page {
     border-radius: 20rpx;
 	margin: 0 auto;
 	margin-bottom: 10rpx;
+	padding: 0 ;
+	padding-left: 25rpx;
+	padding-right: 20rpx;
     .left {
       display: flex;
       flex-direction: row;
       justify-content: flex-start;
-      align-items: center;
-      padding-left: 10rpx;
-      padding-top: 20rpx;
-      .icon {
-        padding-left: 5rpx;
+      align-items: center; 
+      .icon { 
         width: 48rpx;
-      }
-      width: 750rpx;
-      height: 112rpx;
+      } 
       background: rgba(22, 22, 22, 0);
       border-radius: 0rpx 0rpx 0rpx 0rpx;
     }
@@ -239,11 +240,9 @@ page {
       display: flex;
       flex-direction: row;
       justify-content: flex-start;
-      align-items: center;
-      padding-right: 40rpx;
-      padding-top: 20rpx;
-      .icon {
-        padding-left: 5rpx;
+      align-items: center; 
+
+      .icon { 
         height: 32rpx;
       }
     }
@@ -256,33 +255,37 @@ page {
     border-radius: 0rpx 0rpx 0rpx 0rpx;
   }
 
-  .btn_submit {
-    width: 660rpx;
-    height: 96rpx;
-    position: fixed;
-    bottom: 150rpx;
-    left: 45rpx;
-    background: linear-gradient(142deg, #ff5967 0%, #ff2a95 100%);
-    border-radius: 28rpx;
-    font-weight: bold;
-    font-size: 32rpx;
-    color: #ffffff;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-  }
-  .bottom {
-    width: 660rpx;
-    height: 96rpx;
-    position: fixed;
-    bottom: 50rpx;
-    left: 45rpx;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-  }
+ 
+  .agree {
+	width: 90%;
+	margin: 0 auto;
+	color: #666666;
+	font-size: 24rpx;
+	margin-top: 40rpx;
+	display: flex;
+	align-items: center;
+	text-align: left;
+	line-height: 32rpx;
+
+	.agree2 {
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-start;
+		align-items: center;
+		padding-right: 8rpx;
+		flex-shrink: 0;
+	}
+
+	.xy {
+		color: #0084FF;
+		display: inline;
+	}
+
+	image {
+		width: 32rpx;
+		height: 32rpx;
+	}
+}
 }
 .blankHeight {
   height: 100rpx;

pages/vip/M_purchase.vue

@@ -1,279 +1,414 @@
 <template>
-	<view class="page">
-		<view class="topBody">
-			<PageHeader title="会员" class="PageHeader">
-				<template slot="right">
-					<view class="more-options" @tap="toggleDropdown">
-						<text class="fa fa-ellipsis-h"></text>
-						<view class="dropdown-menu" v-if="showDropdown">
-							<view class="dropdown-item" @tap="handleOption('vipRecord')">购买记录记录</view>
-						</view>
-					</view>
-				</template>
-			</PageHeader>
-			<view class="reserveASeat"></view>
+  <view class="page">
+    <view class="topBody">
+      <PageHeader title="会员" class="PageHeader">
+        <template slot="right">
+          <DropdownMenu 
+            :options="dropdownOptions" 
+            @select="handleDropdownSelect"
+          />
+        </template>
+      </PageHeader>
+      <view class="reserveASeat"></view>
 
-			<view class="myGoldCoin-box">
-				<view>我的M币</view>
-				<view class="myGoldCoin-box-content">
-					<image src="../../static/icon/coin_m.png" mode="widthFix" />
-					<text>1000</text>
-				</view>
-			</view>
-			<view class="myinfo">
-				<view class="purchaseList" style="margin-top: 60rpx">
-					<view class="item" :class="index == sel ? 'itemSel' : ''" v-for="(item, index) in list"
-						@click="selTA(item, index)" :key="index">
-						<view class="num1">
-							<image src="../../static/icon/coin_m.png" mode="widthFix" />
-							<view class="name">{{ item.num_gmm }} </view>
-						</view>
-						<view class="num2">
-							<view class="name">{{ item.money }}{{ $t("txt.￥") }}</view>
-						</view>
-					</view>
-				</view>
+      <view class="myGoldCoin-box">
+        <view>我的M币</view>
+        <view class="myGoldCoin-box-content">
+          <image src="../../static/icon/coin_m.png" mode="widthFix" />
+          <text>1000</text>
+        </view>
+      </view>
+      <view class="myinfo">
+        <view class="purchaseList" style="margin-top: 60rpx">
+          <view
+            class="item"
+            :class="index == sel ? 'itemSel' : ''"
+            v-for="(item, index) in list"
+            @click="selTA(item, index)"
+            :key="index"
+          >
+            <view class="num1">
+              <image src="../../static/icon/coin_m.png" mode="widthFix" />
+              <view class="name">{{ item.num_gmm }} </view>
+            </view>
+            <view class="num2">
+              <view class="name">{{ item.money }}{{ $t("txt.￥") }}</view>
+            </view>
+          </view>
+        </view>
 
-				<view class="jinchu">
-					<text>{{
-						$t("txt.支付方式")
-					}}</text>
-				</view>
+        <view class="jinchu">
+          <text>{{ $t("txt.支付方式") }}</text>
+        </view>
 
-				<view class="mingxiList" @click="selPay('wechat')">
-					<view class="left">
-						<image class="icon" src="../../static/me/icon_wechat.png" mode="widthFix" />
-						<text style="font-size: 28rpx; margin-left: 20rpx;  ">{{ $t("txt.微信支付") }}</text>
-					</view>
-					<view class="right">
-						<image class="icon" :src="payType == 'wechat'
-							? '../../static/icon/wd_icon_gouxuan04.png'
-							: '../../static/icon/wd_icon_gouxuan05.png'
-							" mode="heightFix" />
-					</view>
-				</view>
-				<!-- <view class="line"></view> -->
-				<view class="mingxiList" @click="selPay('alipay')">
-					<view class="left">
-						<image class="icon" src="../../static/me/icon_alipay.png" mode="widthFix" />
-						<text style="font-size: 28rpx;margin-left: 20rpx; ">{{ $t('txt.支付宝支付') }}</text>
-					</view>
-					<view class="right">
-						<image class="icon"
-							:src="payType == 'alipay' ? '../../static/icon/wd_icon_gouxuan04.png' : '../../static/icon/wd_icon_gouxuan05.png'"
-							mode="heightFix" />
-					</view>
-				</view>
-				<!-- <view class="line"></view> -->
-				<view class="btn_submit" @click="submitData">{{ $t("txt.立即支付") }}{{ $t("txt.￥") }}{{ money }}</view>
-				<view class="bottom" @click="goPage('/pages/AboutUs/pay_xy')">
-					<text style="font-size: 28rpx; color: #ffffff">{{
-						$t("txt.点击支付即代表同意")
-					}}</text>
-					<text style="font-size: 28rpx; color: #ff2a95">{{
-						$t("txt.M币充值协议")
-					}}</text>
-				</view>
-			</view>
+        <view v-if="false" class="mingxiList" @click="selPay('wechat')">
+          <view class="left">
+            <image
+              class="icon"
+              src="../../static/me/icon_wechat.png"
+              mode="widthFix"
+            />
+            <text style="font-size: 28rpx; margin-left: 20rpx">{{
+              $t("txt.微信支付")
+            }}</text>
+          </view>
+          <view class="right">
+            <image
+              class="icon"
+              :src="
+                payType == 'wechat'
+                  ? '../../static/icon/wd_icon_gouxuan04.png'
+                  : '../../static/icon/wd_icon_gouxuan05.png'
+              "
+              mode="heightFix"
+            />
+          </view>
+        </view>
+        <!-- <view class="line"></view> -->
+        <view class="mingxiList" @click="selPay('alipay')">
+          <view class="left">
+            <image
+              class="icon"
+              src="../../static/me/icon_alipay.png"
+              mode="widthFix"
+            />
+            <text style="font-size: 28rpx; margin-left: 20rpx">{{
+              $t("txt.支付宝支付")
+            }}</text>
+          </view>
+          <view class="right">
+            <image
+              class="icon"
+              :src="
+                payType == 'alipay'
+                  ? '../../static/icon/wd_icon_gouxuan04.png'
+                  : '../../static/icon/wd_icon_gouxuan05.png'
+              "
+              mode="heightFix"
+            />
+          </view>
+        </view>
+        <!-- <view class="line"></view> -->
+        <view class="agree">
+          <view class="agree2" @click="agreeChk()">
+            <image
+              mode="widthFix"
+              src="../../static/icon/wd_icon_gouxuan04.png"
+              v-if="is_agree == 0"
+            ></image>
+            <image
+              mode="widthFix"
+              src="../../static/icon/wd_icon_gouxuan05.png"
+              v-if="is_agree == 1"
+            ></image>
+          </view>
+          <view>
+            同意
+            <text class="xy" @click="goPage('/pages/AboutUs/pay_xy')">
+              《充值服务协议》 </text
+            >，充值M币仅【萌创星球】使用点击查看
+            <text class="xy" @click="goPage('yszc')"> 充值记录 </text>
+          </view>
+        </view>
+        <view class="btn_submit" @click="submitData">
+          <text>¥{{ money }}</text
+          >确认充值
+        </view>
+      </view>
 
-			<view class="blankHeight"></view>
-		</view>
+      <view class="blankHeight"></view>
+    </view>
 
-		<!-- 提示框 -->
-		<DialogBox ref="DialogBox"></DialogBox>
-	</view>
+    <!-- 提示框 -->
+    <DialogBox ref="DialogBox"></DialogBox>
+  </view>
 </template>
 
 <script>
+import DropdownMenu from '@/components/DropdownMenu.vue'
+
 export default {
-	components: {},
-	data() {
-		return {
-			title: "",
-			sel: 1,
-			payType: "wechat",
-			list: [],
-			money: 0,
-			tid: 0,
-			linkid: "",
-			showDropdown: false,
-		};
-	},
-	onLoad() {
-		// setTimeout(function() {
-		// 	uni.setNavigationBarColor({
-		// 		frontColor: '#ffffff',
-		// 		backgroundColor: '#00000000',
-		// 		animation: {
-		// 			duration: 400,
-		// 			timingFunc: 'easeIn'
-		// 		}
-		// 	})
-		// }, 200);
-	},
-	onShow() {
-		this.loadData();
-		let that = this;
-	},
-	methods: {
-		onBack() { },
-		goPage(page) {
-			uni.navigateTo({
-				url: page,
-			});
-		},
-		selTA(item, se) {
-			this.tid = item.id;
-			this.sel = se;
-			if (this.list != null && this.list != undefined) {
-				this.money = this.list[se]["money"];
-			}
-		},
-		selPay(se) {
-			this.payType = se;
-		},
-		chkSel() {
-			if (this.sel == 1) {
-				this.sel = 0;
-			} else {
-				this.sel = 1;
-			}
-		},
-		submitData() {
-			let that = this;
-			uni.request({
-				url: this.$apiHost + "/Order/submit", //仅为示例，并非真实接口地址。
-				data: {
-					uuid: getApp().globalData.uuid,
-					product_id: this.tid,
-					type: "buyM",
-					payType: "wechat",
-				},
-				header: {
-					"content-type": "application/json", //自定义请求头信息
-				},
-				success: (res) => {
-					console.log("res-pay", res.data);
-					if (res.data.success == "yes") {
-						this.linkid = res.data.linkid;
+  components: {
+    DropdownMenu
+  },
+  data() {
+    return {
+      title: "",
+      sel: 1,
+      payType: "wechat",
+      list: [],
+      money: 0,
+      tid: 0,
+      linkid: "",
+      is_agree: 0,
+      dropdownOptions: [
+        { label: '购买记录', type: 'vipRecord' }
+      ]
+    };
+  },
+  onLoad() {
+    // setTimeout(function() {
+    // 	uni.setNavigationBarColor({
+    // 		frontColor: '#ffffff',
+    // 		backgroundColor: '#00000000',
+    // 		animation: {
+    // 			duration: 400,
+    // 			timingFunc: 'easeIn'
+    // 		}
+    // 	})
+    // }, 200);
+  },
+  onShow() {
+    this.loadData();
+    let that = this;
+  },
+  methods: {
+    onBack() {},
+    goPage(page) {
+      uni.navigateTo({
+        url: page,
+      });
+    },
+    selTA(item, se) {
+      this.tid = item.id;
+      this.sel = se;
+      if (this.list != null && this.list != undefined) {
+        this.money = this.list[se]["money"];
+      }
+    },
+    selPay(se) {
+      this.payType = se;
+    },
+    chkSel() {
+      if (this.sel == 1) {
+        this.sel = 0;
+      } else {
+        this.sel = 1;
+      }
+    },
+    submitData() {
+      if (this.is_agree == 0) {
+        uni.showToast({
+          title: "请确认并选择协议",
+          icon: "none",
+        });
+        return;
+      }
+      let that = this;
+      uni.request({
+        url: this.$apiHost + "/Order/submit",
+        data: {
+          uuid: getApp().globalData.uuid,
+          product_id: this.tid,
+          type: "buyM",
+          payType: this.payType,
+        },
+        header: {
+          "content-type": "application/json",
+        },
+        success: (res) => {
+          console.log("res-pay", res.data);
+          if (res.data.success == "yes") {
+            this.linkid = res.data.linkid;
 
-						uni.requestPayment({
-							provider: "wxpay",
-							orderInfo: res.data.wepay,
-							success(res) {
-								console.log("res-suu:", res);
-								setTimeout(function () {
-									that.showPayCall();
-								}, 1000);
-							},
-							fail(e) {
-								console.log("fail", e);
-							},
-						});
-					} else {
-						uni.showToast({
-							title: "创建订单失败，请联系客服",
-							icon: "error",
-						});
-					}
-				},
-			});
-		},
-		showPayCall() {
-			let that = this;
-			this.$refs["DialogBox"]
-				.confirm({
-					title: "提示",
-					content: "我已经支付完成",
-					DialogType: "inquiry",
-					btn1: "否",
-					btn2: "是",
-					animation: 0,
-				})
-				.then((res) => {
-					uni.request({
-						url: this.$apiHost + "/Order/getstatus",
-						data: {
-							uuid: getApp().globalData.uuid,
-							linkid: that.linkid,
-						},
-						header: {
-							"content-type": "application/json",
-						},
-						success: (res) => {
-							if (res.data.success == "yes") {
-								uni.showToast({
-									title: "充值成功",
-									icon: "none",
-								});
-							} else {
-								uni.showToast({
-									title: "还未检测到充值状态，请稍后再试",
-									icon: "none",
-								});
-								setTimeout(function () {
-									that.showPayCall();
-								}, 1000);
-							}
-						},
-						complete: (com) => { },
-					});
-				});
-		},
-		loadData() {
-			var offset = (this.page - 1) * 20;
-			uni.request({
-				url: this.$apiHost + "/User/getCzList",
-				data: {
-					uuid: getApp().globalData.uuid,
-				},
-				header: {
-					"content-type": "application/json",
-				},
-				success: (res) => {
-					console.log("res", res.data);
-					this.num = res.data.num;
-					if (res.data.list != null && res.data.list != undefined) {
-						this.list = res.data.list;
-						this.tid = this.list[1]["id"];
-						this.sel = 1;
-						this.money = this.list[1]["money"];
-					}
-				},
-			});
-		},
-		toggleDropdown() {
-			this.showDropdown = !this.showDropdown;
-		},
-		handleOption(type) {
-			this.showDropdown = false;
-			switch (type) {
-				case 'vipRecord':
-					uni.navigateTo({
-						url: '/pages/vip/record'
-					});
-					break;
-				case 'contact':
-					uni.navigateTo({
-						url: '/pages/contact/index'
-					});
-					break;
-				case 'help':
-					uni.navigateTo({
-						url: '/pages/help/index'
-					});
-					break;
-				case 'feedback':
-					uni.navigateTo({
-						url: '/pages/feedback/index'
-					});
-					break;
-			}
-		},
-	},
+            // 微信支付逻辑
+            if (this.payType === "wechat") {
+              uni.requestPayment({
+                provider: "wxpay",
+                orderInfo: {
+                  appid: res.data.wepay.appid,
+                  partnerid: res.data.wepay.partnerid,
+                  prepayid: res.data.wepay.prepayid,
+                  package: "Sign=WXPay",
+                  noncestr: res.data.wepay.noncestr,
+                  timestamp: res.data.wepay.timestamp,
+                  sign: res.data.wepay.sign
+                },
+                success(res) {
+                  console.log("微信支付成功:", res);
+                  setTimeout(function () {
+                    that.showPayCall();
+                  }, 1000);
+                },
+                fail(e) {
+                  console.log("微信支付失败:", e);
+                  uni.showToast({
+                    title: "支付失败，请重试",
+                    icon: "none"
+                  });
+                }
+              });
+            } 
+            // 支付宝支付逻辑
+            else if (this.payType === "alipay") {
+              uni.requestPayment({
+                provider: "alipay",
+                orderInfo: res.data.ali_pay, // 直接使用后端返回的支付宝支付参数
+                success(res) {
+                  console.log("支付宝支付成功:", res);
+                  setTimeout(function () {
+                    that.showPayCall();
+                  }, 1000);
+                },
+                fail(e) {
+                  console.log("支付宝支付失败:", e);
+                  uni.showToast({
+                    title: "支付失败，请重试",
+                    icon: "none"
+                  });
+                }
+              });
+            }
+          } else {
+            uni.showToast({
+              title: "创建订单失败，请联系客服",
+              icon: "error",
+            });
+          }
+        },
+        fail: (err) => {
+          console.log("请求失败:", err);
+          uni.showToast({
+            title: "网络错误，请重试",
+            icon: "none"
+          });
+        }
+      });
+    },
+    showPayCall() {
+      let that = this;
+      this.$refs["DialogBox"]
+        .confirm({
+          title: "提示",
+          content: "我已经支付完成",
+          DialogType: "inquiry",
+          btn1: "否",
+          btn2: "是",
+          animation: 0,
+        })
+        .then((res) => {
+          uni.request({
+            url: this.$apiHost + "/Order/getstatus",
+            data: {
+              uuid: getApp().globalData.uuid,
+              linkid: that.linkid,
+            },
+            header: {
+              "content-type": "application/json",
+            },
+            success: (res) => {
+              if (res.data.success == "yes") {
+                uni.showToast({
+                  title: "充值成功",
+                  icon: "none",
+                });
+              } else {
+                uni.showToast({
+                  title: "还未检测到充值状态，请稍后再试",
+                  icon: "none",
+                });
+                setTimeout(function () {
+                  that.showPayCall();
+                }, 1000);
+              }
+            },
+            complete: (com) => {},
+          });
+        });
+    },
+    loadData() {
+      var offset = (this.page - 1) * 20;
+      uni.request({
+        url: this.$apiHost + "/User/getCzList",
+        data: {
+          uuid: getApp().globalData.uuid,
+        },
+        header: {
+          "content-type": "application/json",
+        },
+        success: (res) => {
+          console.log("res", res.data);
+          this.num = res.data.num;
+          if (res.data.list != null && res.data.list != undefined) {
+            this.list = res.data.list;
+            this.tid = this.list[1]["id"];
+            this.sel = 1;
+            this.money = this.list[1]["money"];
+          }
+        },
+      });
+    },
+    handleDropdownSelect(item) {
+      switch (item.type) {
+        case "vipRecord":
+          uni.navigateTo({
+            url: "/pages/vip/record?type=coin",
+          });
+          break;
+      }
+    },
+    agreeChk() {
+      if (this.is_agree == 0) {
+        this.is_agree = 1;
+      } else {
+        this.is_agree = 0;
+      }
+    },
+  },
 };
 </script>
 
 <style scoped lang="scss">
 @import "M_purchase.scss";
+.agree {
+  width: 90%;
+  margin: 0 auto;
+  color: #666666;
+  font-size: 24rpx;
+  margin-top: 40rpx;
+  display: flex;
+  align-items: center;
+  text-align: left;
+  line-height: 32rpx;
+
+  .agree2 {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    padding-right: 8rpx;
+    flex-shrink: 0;
+  }
+
+  .xy {
+    color: #0084ff;
+    display: inline;
+  }
+
+  image {
+    width: 32rpx;
+    height: 32rpx;
+  }
+}
+
+.btn_submit {
+  width: 626rpx;
+  height: 88rpx;
+  background: linear-gradient(90deg, #1f1f1f 0%, #444444 100%);
+  border-radius: 76rpx;
+  margin: 0 auto;
+  margin-top: 70rpx;
+  color: #acf934;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32rpx;
+  line-height: 0;
+
+  text {
+    font-size: 44rpx;
+    display: inline-block;
+    margin-right: 10rpx;
+  }
+}
 </style>

pages/vip/index.vue

@@ -73,9 +73,9 @@
 					<image mode="widthFix" src="../../static/icon/wd_icon_gouxuan05.png" v-if="is_agree == 1"></image>
 				</view>
 				<view>
-					同意《充值服务协议》
+					同意
 					<text class="xy" @click="goPage('/pages/AboutUs/pay_xy')">
-						充值服务协议
+						《充值服务协议》
 					</text>，充值M币仅【萌创星球】使用点击查看
 					<text class="xy" @click="goPage('yszc')">
 						充值记录
@@ -308,11 +308,21 @@ export default {
 				});
 				return;
 			}
-
+			if (this.is_agree == 0) {
+				uni.showToast({
+					title: "请确认并选择协议",
+					icon: "none",
+				});
+				return;
+			}
+			this.submitPayment();
+		},
+		// 提交支付
+		submitPayment() {
+			let that = this;
 			uni.showLoading({
-				title: '支付中...'
+				title: '创建订单中...'
 			});
-
 			uni.request({
 				url: this.$apiHost + '/Order/submit',
 				data: {
@@ -330,15 +340,24 @@ export default {
 					console.log("支付订单创建结果:", res.data);
 					if (res.data.success == 'yes') {
 						this.linkid = res.data.linkid;
+						this.$refs.paymentPopup.close();
 
 						// 根据支付方式调用不同的支付接口
 						if (this.paymentMethod === 'wechat') {
 							uni.requestPayment({
 								provider: "wxpay",
-								orderInfo: res.data.wepay,
+								orderInfo: {
+									appid: res.data.wepay.appid,
+									partnerid: res.data.wepay.partnerid,
+									prepayid: res.data.wepay.prepayid,
+									package: "Sign=WXPay",
+									noncestr: res.data.wepay.noncestr,
+									timestamp: res.data.wepay.timestamp,
+									sign: res.data.wepay.sign
+								},
 								success: (payRes) => {
 									console.log("微信支付成功:", payRes);
-									this.checkPayStatus();
+									that.checkPayStatus();
 								},
 								fail: (err) => {
 									console.log("微信支付失败:", err);
@@ -352,10 +371,10 @@ export default {
 						} else if (this.paymentMethod === 'alipay') {
 							uni.requestPayment({
 								provider: "alipay",
-								orderInfo: res.data.alipay,
+								orderInfo: res.data.ali_pay,
 								success: (payRes) => {
 									console.log("支付宝支付成功:", payRes);
-									this.checkPayStatus();
+									that.checkPayStatus();
 								},
 								fail: (err) => {
 									console.log("支付宝支付失败:", err);
@@ -387,64 +406,41 @@ export default {
 		},
 		// 检查支付状态
 		checkPayStatus() {
-			if (!this.linkid) return;
-
-			let checkCount = 0;
-			const maxChecks = 10;
-
-			const checkOrder = () => {
-				if (checkCount >= maxChecks) {
-					uni.hideLoading();
-					uni.showToast({
-						title: '支付结果查询超时',
-						icon: 'none'
-					});
-					return;
-				}
-
-				uni.request({
-					url: this.$apiHost + '/Order/check',
-					data: {
-						uuid: getApp().globalData.uuid,
-						skey: getApp().globalData.skey,
-						linkid: this.linkid
-					},
-					header: {
-						'content-type': 'application/json',
-						sign: getApp().globalData.headerSign
-					},
-					success: (res) => {
-						if (res.data.success == 'yes' && res.data.status == 'paid') {
-							uni.hideLoading();
-							uni.showToast({
-								title: '支付成功',
-								icon: 'success'
-							});
-							this.$refs.paymentPopup.close();
-							// 刷新用户信息
-							this.getUserInfo();
-						} else if (res.data.status == 'unpaid' && checkCount < maxChecks) {
-							checkCount++;
-							setTimeout(checkOrder, 1000);
-						} else {
-							uni.hideLoading();
-							uni.showToast({
-								title: '支付结果异常',
-								icon: 'none'
-							});
-						}
-					},
-					fail: () => {
+			let that = this;
+			uni.request({
+				url: this.$apiHost + "/Order/getstatus",
+				data: {
+					uuid: getApp().globalData.uuid,
+					linkid: this.linkid,
+				},
+				header: {
+					"content-type": "application/json",
+					'sign': getApp().globalData.headerSign
+				},
+				success: (res) => {
+					if (res.data.success == "yes") {
 						uni.hideLoading();
 						uni.showToast({
-							title: '查询支付结果失败',
-							icon: 'none'
+							title: "充值成功",
+							icon: "none",
 						});
+						// 支付成功后刷新用户信息
+						this.getUserInfo();
+					} else {
+						setTimeout(function () {
+							that.checkPayStatus();
+						}, 1000);
 					}
-				});
-			};
-
-			checkOrder();
+				},
+				fail: (err) => {
+					console.log("检查支付状态失败:", err);
+					uni.hideLoading();
+					uni.showToast({
+						title: "网络错误，请重试",
+						icon: "none"
+					});
+				}
+			});
 		},
 		// 获取特权列表区域的高度
 		getPrivilegesHeight() {
@@ -478,7 +474,7 @@ export default {
 			switch (type) {
 				case 'vipRecord':
 					uni.navigateTo({
-						url: '/pages/vip/record'
+						url: '/pages/vip/record?type=vip'
 					});
 					break;
 				case 'help':
@@ -1021,30 +1017,33 @@ export default {
 }
 
 .agree {
-	width: 80%;
+	width: 90%;
 	margin: 0 auto;
-	text-align: center;
-	color: #1f1f1f;
-	font-size: 22rpx;
+	color: #666666;
+	font-size: 24rpx;
 	margin-top: 40rpx;
- display: flex;
- align-items: center;
- text-align: left;
+	display: flex;
+	align-items: center;
+	text-align: left;
+	line-height: 32rpx;
 
 	.agree2 {
 		display: flex;
 		flex-direction: row;
-		justify-content: center;
+		justify-content: flex-start;
 		align-items: center;
+		padding-right: 8rpx;
+		flex-shrink: 0;
 	}
 
 	.xy {
 		color: #0084FF;
+		display: inline;
 	}
 
 	image {
 		width: 32rpx;
-		margin-right: 8rpx;
+		height: 32rpx;
 	}
 }
 </style>

pages/vip/record.vue

@@ -0,0 +1,277 @@
+<template>
+  <view class="page">
+    <PageHeader title="" style="border: 1px solid #f2f6f2">
+      <template slot="center">
+        <view class="tabs">
+          <view
+            class="tab"
+            :class="{ active: currentTab === 'vip' }"
+            @click="switchTab('vip')"
+            >会员记录</view
+          >
+          <view
+            class="tab"
+            :class="{ active: currentTab === 'coin' }"
+            @click="switchTab('coin')"
+            >M币明细</view
+          >
+          <view
+            class="tab"
+            :class="{ active: currentTab === 'star' }"
+            @click="switchTab('star')"
+            >星源记录</view
+          >
+        </view>
+      </template>
+    </PageHeader>
+    <view style="height: 90rpx"></view>
+
+    <view class="record-list">
+      <template v-if="currentTab === 'vip'">
+        <view
+          class="record-item"
+          v-for="(item, index) in recordList"
+          :key="index"
+        >
+          <view class="record-info">
+            <view class="record-title">{{ item.name }}</view>
+            <view class="record-time">订单编号：{{ item.linkid }}</view>
+            <view class="record-time">开通时间：{{ item.create_time }}</view>
+          </view>
+          <view class="record-amount" :class="{ success: item.status === 1 }">
+            ¥{{ item.money }}
+            <text class="status">{{
+              item.status === 1 ? "支付成功" : "待支付"
+            }}</text>
+          </view>
+        </view>
+      </template>
+      <template v-else>
+        <view
+          class="record-item"
+          v-for="(item, index) in recordList"
+          :key="index"
+        >
+          <view class="record-info">
+            <view class="record-title">{{ item.name }}</view>
+            <view class="record-time">{{ item.create_time }}</view>
+          </view>
+          <view class="record-amount" :class="{ expense: item.type === '-' }">
+            {{ item.type === "-" ? "-" : "" }}{{ item.num }}
+          </view>
+        </view>
+      </template>
+    </view>
+
+    <!-- 加载更多提示 -->
+    <view class="loading-more" v-if="loading">
+      <text>加载中...</text>
+    </view>
+    <view class="no-more" v-else-if="!hasMore && recordList.length > 0">
+      <text>没有更多数据了</text>
+    </view>
+  </view>
+</template>
+
+<script>
+import PageHeader from "@/components/PageHeader/PageHeader.vue";
+
+export default {
+  components: {
+    PageHeader,
+  },
+  data() {
+    return {
+      currentTab: "vip",
+      recordList: [],
+      page: 1,
+      hasMore: true,
+      loading: false,
+      offset: 0,
+    };
+  },
+  onLoad(options) {
+    if (options.type) {
+      this.currentTab = options.type;
+    }
+    this.loadData();
+  },
+  onReachBottom() {
+    if (this.hasMore && !this.loading) {
+      this.loadData();
+    }
+  },
+  methods: {
+    switchTab(tab) {
+      if (this.currentTab === tab) return;
+      this.currentTab = tab;
+      this.page = 1;
+      this.offset = 0;
+      this.recordList = [];
+      this.hasMore = true;
+      this.loadData();
+    },
+    loadData() {
+      if (this.loading) return;
+      this.loading = true;
+
+      let url = "";
+      let params = {
+        uuid: getApp().globalData.uuid,
+        offset: this.offset,
+      };
+
+      if (this.currentTab === "vip") {
+        url = this.$apiHost + "/Order/getlist";
+        params.type = "buyVip";
+      } else {
+        url = this.$apiHost + "/My/recordlist";
+        params.type = this.currentTab === "coin" ? "GMM" : "GMD";
+      }
+
+      uni.request({
+        url: url,
+        data: params,
+        header: {
+          "content-type": "application/json",
+          sign: getApp().globalData.headerSign,
+        },
+        success: (res) => {
+          if (res && res.data && res.data.success === "yes") {
+            if (!res.data.list) {
+              this.hasMore = false;
+              uni.showToast({
+                title: res.data.msg || "没有更多数据了",
+                icon: "none",
+              });
+              return;
+            }
+            const newList = res.data.list;
+            if (this.offset === 0) {
+              this.recordList = newList;
+            } else {
+              this.recordList = [...this.recordList, ...newList];
+            }
+            this.hasMore = newList.length > 0;
+            this.offset += 20;
+          } else {
+            this.hasMore = false;
+            uni.showToast({
+              title: res.data.msg || "获取数据失败",
+              icon: "none",
+            });
+          }
+        },
+        fail: (err) => {
+          console.log("请求失败:", err);
+          this.hasMore = false;
+          uni.showToast({
+            title: "网络错误，请重试",
+            icon: "none",
+          });
+        },
+        complete: () => {
+          this.loading = false;
+        },
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.page {
+  min-height: 100vh;
+  background-color: #fff;
+  padding-top: 10px;
+}
+
+.tabs {
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+
+  .tab {
+    position: relative;
+    width: 140rpx;
+    height: 48rpx;
+    font-size: 32rpx;
+    font-family: "PingFang SC-Bold";
+    color: #999;
+    font-weight: 400;
+    text-align: center;
+    margin: 0 20rpx;
+
+    &.active {
+      color: #1f1f1f;
+      background: url("../../static/me/wd_img_qiehuan.png") center / cover
+        no-repeat;
+    }
+  }
+}
+
+.record-list {
+  padding: 0 32rpx;
+
+  .record-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    padding: 32rpx 0;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+
+    .record-info {
+      .record-title {
+        font-size: 32rpx;
+        color: #333;
+        margin-bottom: 8rpx;
+        font-weight: 500;
+      }
+
+      .record-time {
+        font-size: 24rpx;
+        color: #999;
+        margin-bottom: 4rpx;
+      }
+    }
+
+    .record-amount {
+      text-align: right;
+      font-size: 32rpx;
+      color: #333;
+      font-weight: 500;
+
+      &.income {
+        color: #07c160;
+      }
+
+      &.expense {
+        color: #ff5967;
+      }
+
+      .status {
+        display: block;
+        font-size: 24rpx;
+        color: #ff5967;
+        font-weight: normal;
+        margin-top: 8rpx;
+
+        &.success {
+          color: #999;
+        }
+      }
+    }
+  }
+}
+
+.loading-more,
+.no-more {
+  text-align: center;
+  padding: 20rpx 0;
+  color: #999;
+  font-size: 24rpx;
+  background-color: #fff;
+}
+</style>