新增部分静态页面

pages.json

@@ -1,6 +1,5 @@
 {
 	"pages": [
-
 		{
 			"path": "pages/index/index",
 			"onReachBottomDistance": "50",
@@ -9,72 +8,83 @@
 				"navigationStyle": "custom",
 				"navigationBarBackgroundColor": "#ffffff"
 			}
-		}, {
+		},
+		{
 			"path": "pages/make/index",
 			"style": {
 				"navigationBarTitleText": "创作",
 				"navigationStyle": "custom",
 				"navigationBarBackgroundColor": "#ffffff"
 			}
-		},  {
+		},
+		{
 			"path": "pages/index/Search",
 			"onReachBottomDistance": "50",
 			"style": {
 				"navigationBarTitleText": "搜索",
 				"navigationStyle": "custom"
 			}
-		}, {
+		},
+		{
 			"path": "pages/make/fabuArticle",
 			"style": {
 				"navigationBarTitleText": "发布文章",
 				"navigationStyle": "custom",
 				"navigationBarBackgroundColor": "#ffffff"
 			}
-		}, {
+		},
+		{
 			"path": "pages/make/relatedWorks",
 			"style": {
 				"navigationBarTitleText": "关联作品",
 				"navigationStyle": "custom",
 				"navigationBarBackgroundColor": "#ffffff"
 			}
-		}, {
+		},
+		{
 			"path": "pages/make/manageArticle",
 			"style": {
 				"navigationBarTitleText": "管理",
 				"navigationBarBackgroundColor": "#ffffff"
 			}
-		},   {
+		},
+		{
 			"path": "pages/login/login",
 			"style": {
 				"navigationBarTitleText": "登录",
 				"navigationStyle": "custom",
 				"navigationBarBackgroundColor": "#ffffff"
 			}
-		}, {
+		},
+		{
 			"path": "pages/login/loginFirst",
 			"style": {
 				"navigationBarTitleText": "完善资料",
 				"navigationBarBackgroundColor": "#ffffff"
 			}
-		}, {
+		},
+		{
 			"path": "pages/AboutUs/pay_xy",
 			"style": {
-				"navigationBarTitleText": "M币充值协议", 
+				"navigationBarTitleText": "M币充值协议",
 				"navigationBarBackgroundColor": "#ffffff"
 			}
-		}, {
+		},
+		{
 			"path": "pages/AboutUs/UserLogoutAgreement",
 			"style": {
-				"navigationBarTitleText": "注销", 
+				"navigationBarTitleText": "注销",
 				"navigationBarBackgroundColor": "#ffffff"
 			}
-		}, {
+		},
+		{
 			"path": "pages/AboutUs/yong",
 			"style": {
 				"navigationBarTitleText": "未成年人模式",
 				"navigationBarBackgroundColor": "#ffffff"
 			}
-		}, {
+		},
+		{
 			"path": "pages/AboutUs/xiuxi",
 			"style": {
 				"navigationBarTitleText": "休息模式",
@@ -85,39 +95,45 @@
 					"bounce": "none"
 				}
 			}
-		}, {
+		},
+		{
 			"path": "pages/index/articleDetail",
 			"style": {
 				"navigationBarTitleText": "详情",
 				"navigationBarBackgroundColor": "#ffffff",
 				"navigationStyle": "custom"
 			}
-		}, {
+		},
+		{
 			"path": "pages/index/workDetail",
 			"style": {
 				"navigationBarTitleText": "详情",
 				"navigationBarBackgroundColor": "#ffffff",
 				"navigationStyle": "custom"
 			}
-		}, {
+		},
+		{
 			"path": "pages/index/ai_pp",
 			"style": {
 				"navigationBarTitleText": "首页",
 				"navigationBarBackgroundColor": "#ffffff"
 			}
-		}, {
+		},
+		{
 			"path": "pages/index/peopleList",
 			"style": {
 				"navigationBarTitleText": "兴趣交友",
 				"navigationBarBackgroundColor": "#ffffff"
 			}
-		}, {
+		},
+		{
 			"path": "pages/index/peopleHome",
 			"style": {
 				"navigationBarTitleText": "个人主页",
 				"navigationBarBackgroundColor": "#ffffff"
 			}
-		}, {
+		},
+		{
 			"path": "pages/my/my",
 			"style": {
 				"navigationBarTitleText": "我的",
@@ -131,12 +147,14 @@
 					"bounce": "none"
 				}
 			}
-		},{
+		},
+		{
 			"path": "pages/webview/index",
 			"style": {
 				"navigationBarTitleText": ""
 			}
-		}, {
+		},
+		{
 			"path": "pages/my/userHomepage",
 			"style": {
 				"navigationBarTitleText": "我的",
@@ -150,28 +168,32 @@
 					"bounce": "none"
 				}
 			}
-		}, {
+		},
+		{
 			"path": "pages/login/reg",
 			"style": {
 				"navigationBarTitleText": "注册",
 				"navigationStyle": "custom",
 				"navigationBarBackgroundColor": "#ffffff"
 			}
-		}, {
+		},
+		{
 			"path": "pages/login/down",
 			"style": {
 				"navigationBarTitleText": "加入成功",
 				"navigationStyle": "custom",
 				"navigationBarBackgroundColor": "#ffffff"
 			}
-		}, {
+		},
+		{
 			"path": "pages/my/editInfo",
 			"style": {
 				"navigationBarTitleText": "基本资料",
 				"navigationBarBackgroundColor": "#ffffff",
 				"navigationStyle": "custom"
 			}
-		}, {
+		},
+		{
 			"path": "pages/my/myArticle",
 			"style": {
 				"navigationBarTitleText": "我的动态",
@@ -179,109 +201,127 @@
 				"app-plus": {
 					"bounce": "none",
 					"titleNView": {
-						"buttons": [{
-							"width": "70px",
-							"fontSize": "22rpx",
-							"background": "#FF2A95",
-							"text": "发布"
-						}]
+						"buttons": [
+							{
+								"width": "70px",
+								"fontSize": "22rpx",
+								"background": "#FF2A95",
+								"text": "发布"
+							}
+						]
 					}
 				}
 			}
-		}, {
+		},
+		{
 			"path": "pages/my/idcheck",
 			"style": {
 				"navigationBarTitleText": "实名认证",
 				"navigationBarBackgroundColor": "#ffffff"
 			}
-		}, {
+		},
+		{
 			"path": "pages/my/editMobile",
 			"style": {
 				"navigationBarTitleText": "更换绑定手机号",
 				"navigationBarBackgroundColor": "#ffffff"
 			}
-		}, {
+		},
+		{
 			"path": "pages/my/editPass",
 			"style": {
 				"navigationBarTitleText": "设置密码",
 				"navigationBarBackgroundColor": "#ffffff"
 			}
-		}, {
+		},
+		{
 			"path": "pages/my/forgetPass",
 			"style": {
 				"navigationBarTitleText": "忘记密码",
 				"navigationBarBackgroundColor": "#ffffff"
 			}
-		}, {
+		},
+		{
 			"path": "pages/my/step",
 			"style": {
 				"navigationBarTitleText": "完善信息",
 				"navigationBarBackgroundColor": "#ffffff",
 				"navigationStyle": "custom"
 			}
-		}, {
+		},
+		{
 			"path": "pages/my/security",
 			"style": {
 				"navigationBarTitleText": "账户与安全",
 				"navigationBarBackgroundColor": "#F2F6F2"
 			}
-		}, {
+		},
+		{
 			"path": "pages/my/setting",
 			"style": {
 				"navigationBarTitleText": "设置",
 				"navigationBarBackgroundColor": "#F2F6F2"
 			}
-		}, {
+		},
+		{
 			"path": "pages/my/job",
 			"style": {
 				"navigationBarTitleText": "任务中心",
 				"navigationStyle": "custom"
 			}
-		}, {
+		},
+		{
 			"path": "pages/my/DelMemConfirm",
 			"style": {
 				"navigationBarTitleText": "注销账号",
 				"navigationBarBackgroundColor": "#ffffff"
 			}
-		}, {
+		},
+		{
 			"path": "pages/my/DelMemVerify",
 			"style": {
 				"navigationBarTitleText": "",
 				"navigationBarBackgroundColor": "#ffffff"
 			}
-		}, {
+		},
+		{
 			"path": "pages/AboutUs/xieyi",
 			"style": {
 				"navigationBarTitleText": "协议内容",
 				"navigationBarBackgroundColor": "#ffffff"
 			}
-		}, {
+		},
+		{
 			"path": "pages/AboutUs/yhxy",
 			"style": {
 				"navigationBarTitleText": "用户协议",
 				"navigationBarBackgroundColor": "#ffffff"
 			}
-		}, {
+		},
+		{
 			"path": "pages/AboutUs/yszc",
 			"style": {
 				"navigationBarTitleText": "隐私政策",
 				"navigationBarBackgroundColor": "#ffffff"
 			}
-		}, {
+		},
+		{
 			"path": "pages/message/mailMessage",
 			"style": {
 				"navigationBarTitleText": "您的消息",
 				"navigationBarBackgroundColor": "#ffffff",
 				"navigationStyle": "custom"
 			}
-		}, {
+		},
+		{
 			"path": "pages/my/follow",
 			"style": {
 				"navigationBarTitleText": "关注",
 				"navigationBarBackgroundColor": "#ffffff",
 				"navigationStyle": "custom"
 			}
-		}, {
+		},
+		{
 			"path": "pages/makedetail/makeImgDetail",
 			"style": {
 				"navigationBarTitleText": "灵感创作",
@@ -295,7 +335,8 @@
 					"bounce": "none"
 				}
 			}
-		}, {
+		},
+		{
 			"path": "pages/makedetail/makeDetail",
 			"style": {
 				"navigationBarTitleText": "详情",
@@ -309,7 +350,8 @@
 					"bounce": "none"
 				}
 			}
-		}, {
+		},
+		{
 			"path": "pages/makedetail/makeMusicDetail",
 			"style": {
 				"navigationBarTitleText": "音乐制作",
@@ -322,25 +364,29 @@
 					"bounce": "none"
 				}
 			}
-		}, {
+		},
+		{
 			"path": "pages/my/myStar",
 			"style": {
 				"navigationBarTitleText": "我的星灵",
 				"navigationStyle": "custom"
 			}
-		}, {
+		},
+		{
 			"path": "pages/isLand/mainLand",
 			"style": {
 				"navigationBarTitleText": "主大陆",
 				"navigationStyle": "custom"
 			}
-		}, {
+		},
+		{
 			"path": "pages/isLand/homeLand",
 			"style": {
 				"navigationBarTitleText": "主岛",
 				"navigationStyle": "custom"
 			}
-		}, {
+		},
+		{
 			"path": "pages/isLand/HuaTian",
 			"style": {
 				"navigationBarTitleText": "花田"
@@ -388,87 +434,98 @@
 			}
 		},
 		{
-			"path" : "pages/makedetail/intelligentLifeChart",
-			"style" : 
-			{
-				"navigationBarTitleText" : "",
+			"path": "pages/makedetail/intelligentLifeChart",
+			"style": {
+				"navigationBarTitleText": "",
 				"navigationStyle": "custom"
 			}
 		},
 		{
-			"path" : "pages/makedetail/intelligentMusicProduction",
-			"style" : 
-			{
-				"navigationBarTitleText" : "",
+			"path": "pages/makedetail/intelligentMusicProduction",
+			"style": {
+				"navigationBarTitleText": "",
 				"navigationStyle": "custom"
 			}
 		},
 		{
-			"path" : "pages/crowdFunding/crowdFunding",
-			"style" : 
-			{
-				"navigationBarTitleText" : "",
+			"path": "pages/crowdFunding/crowdFunding",
+			"style": {
+				"navigationBarTitleText": "",
 				"navigationStyle": "custom"
 			}
 		},
 		{
-			"path" : "pages/crowdFunding/crowdfundingDetails",
-			"style" : 
-			{
-				"navigationBarTitleText" : "",
+			"path": "pages/crowdFunding/crowdfundingDetails",
+			"style": {
+				"navigationBarTitleText": "",
 				"navigationStyle": "custom"
 			}
 		},
 		{
-			"path" : "pages/crowdFunding/discussionArea",
-			"style" : 
-			{
-				"navigationBarTitleText" : "讨论区"
+			"path": "pages/crowdFunding/discussionArea",
+			"style": {
+				"navigationBarTitleText": "讨论区"
 			}
 		},
 		{
-			"path" : "pages/crowdFunding/addressEdit",
-			"style" : 
-			{
-				"navigationBarTitleText" : ""
+			"path": "pages/crowdFunding/addressEdit",
+			"style": {
+				"navigationBarTitleText": ""
 			}
 		},
 		{
-			"path" : "pages/crowdFunding/orderConfirm",
-			"style" : 
-			{
-				"navigationBarTitleText" : "确认订单"
+			"path": "pages/crowdFunding/orderConfirm",
+			"style": {
+				"navigationBarTitleText": "确认订单"
 			}
 		},
 		{
-			"path" : "pages/crowdFunding/receivingAddress",
-			"style" : 
-			{
-				"navigationBarTitleText" : "收货地址",
+			"path": "pages/crowdFunding/receivingAddress",
+			"style": {
+				"navigationBarTitleText": "收货地址",
 				"navigationStyle": "custom"
 			}
 		},
 		{
-			"path" : "pages/crowdFunding/orderList",
-			"style" : 
-			{
-				"navigationBarTitleText" : "订单列表",
+			"path": "pages/crowdFunding/orderList",
+			"style": {
+				"navigationBarTitleText": "订单列表",
 				"navigationStyle": "custom"
 			}
 		},
 		{
-			"path" : "pages/crowdFunding/orderDetail",
+			"path": "pages/crowdFunding/orderDetail",
+			"style": {
+				"navigationBarTitleText": "订单详情",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/crowdFunding/Search",
+			"style": {
+				"navigationBarTitleText": "搜索", 
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/crowdFunding/customerService",
+			"style": {
+				"navigationBarTitleText": "",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path" : "pages/crowdFunding/favorites",
 			"style" : 
 			{
-				"navigationBarTitleText" : "订单详情",
-				"navigationStyle": "custom"
+				"navigationBarTitleText" : "收藏夹"
 			}
 		},
 		{
-			"path" : "pages/crowdFunding/customerService",
+			"path" : "pages/crowdFunding/projectUpdateDetails",
 			"style" : 
 			{
-				"navigationBarTitleText" : "",
+				"navigationBarTitleText" : "项目历史详情",
 				"navigationStyle": "custom"
 			}
 		}
@@ -486,7 +543,8 @@
 		"borderStyle": "white",
 		"height": "50px",
 		"backgroundColor": "#ffffff",
-		"list": [{
+		"list": [
+			{
 				"pagePath": "pages/index/index",
 				"iconPath": "static/tab/tab_home.png",
 				"selectedIconPath": "static/tab/tab_home_sel.png",

pages/crowdFunding/Search.vue

@@ -0,0 +1,898 @@
+<template>
+  <view class="search-container">
+    <!-- 搜索框 -->
+    <view class="search-header">
+      <view class="cancel-btn" @click="goBack">
+        <uni-icons type="left" size="22" color="#1F1F1F"></uni-icons>
+      </view>
+      <view class="search-box">
+        <!-- <uni-icons type="search" size="16" color="#999"></uni-icons> -->
+        <input type="text" v-model="searchKeyword" placeholder="请输入关键词" confirm-type="search" @confirm="handleSearch"
+          @input="handleInput" />
+        <uni-icons v-if="searchKeyword" type="clear" size="16" color="#999" @click="clearKeyword"></uni-icons>
+        <view class="searchImgBox" @click="handleSearch">
+          <image class="image" src="@/static/home/sy_icon_sousuo.png"></image>
+        </view>
+      </view>
+    </view>
+    <view class="reserveASeat"></view>
+    <!-- 搜索历史 -->
+    <view class="search-history" v-if="searchStatus && historyList.length > 0">
+      <view class="history-header">
+        <text class="title">搜索历史</text>
+        <image @click="clearHistory" style="width: 32rpx;height: 32rpx;" class="deleteAll" src="@/static/home/sy_icon_shanchu.png"></image>
+      </view>
+      <view class="history-list">
+        <view class="history-item" v-for="(item, index) in displayedHistoryList" :key="index"
+          @click="useHistoryKeyword(item)">
+          <view>
+            <uni-icons type="clock" size="14" color="#999"></uni-icons>
+            <view class="history-text">
+              <image src="@/static/home/sy_icon_lishijilu.png"></image> {{ item }}
+            </view>
+          </view>
+          <image class="deleteBtn" @click.stop="deleteHistoryItem(item)" src="@/static/icon/close.png"></image>
+        </view>
+        <view class="expandBtn" @click="toggleHistory">
+          <view v-if="!isExpanded">
+          <template v-if="historyList.length > 5">
+            查看全部
+            <image src="@/static/home/sy_icon_chakanquanbu.png"></image>
+          </template>
+          </view>
+          <view v-else class="fold">
+            折叠历史记录
+            <image src="@/static/home/sy_icon_chakanquanbu.png"></image>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 搜索结果 -->
+    <view class="search-result" v-if="searchKeyword && !searchStatus">
+      <!-- <view class="search-result"> -->
+      <!-- 这里添加搜索结果的展示逻辑 -->
+      <view>
+        <view class="tab-nav">
+          <view v-for="(tab, index) in ['作品', '作者']" :key="index"
+            :class="['tab-item', currentTab === index ? 'active' : '']" @click="switchTab(index)">
+            {{ tab }}
+            <view class="indicator-triangle">
+            </view>
+          </view>
+        </view>
+
+        <!-- 关注列表 - 类似my.vue -->
+        <view v-show="currentTab === 0" class="follow-list">
+          <block v-if="followList.length > 0">
+            <w-waterfall :data="followList">
+              <template v-slot:content="{ item, width }">
+                <card :item="formatItem(item)" findType="search" :width="width" :custom-style="{ background: '#fff' }" textColor="#999"  titleTextColor="#000">
+                </card>
+              </template>
+            </w-waterfall>
+          </block>
+          <view class="no-data" v-else-if="!isLoadingFollow">
+            <text>暂无作品数据</text>
+          </view>
+        </view>
+
+        <view v-show="currentTab === 1" class="follow-list" style="padding: 0 30rpx;">
+          <block v-if="recommendList.length > 0">
+            <view class="follow-item" v-for="(item, index) in recommendList" :key="index" @click="goToUserHomepage(item.id)"> 
+              <CircleAvatar  @click="goToUserHomepage(item.user_id)" class="avator" :src="item.avator"></CircleAvatar>
+              <view class="info">
+                <view class="top-box" @click="goToUserHomepage(item.user_id)"> 
+                  <view class="name one-omit">{{ item.nickname }}</view>
+                  <image src="../../static/icon/wd_icon_nan.png" mode="widthFix" v-if="item.sex_id == 1" />
+                  <image src="../../static/icon/wd_icon_nv.png" mode="widthFix" v-else-if="item.sex_id == 2" />
+                  <view class="level">Lv{{ item.level }}</view>
+                </view>
+                <!-- <view class="desc">{{ item.description }}</view> -->
+              </view>
+              <view :class="item.is_attention ? 'unfollow-btn active' : 'unfollow-btn'" @click="toggleFollow(item)">
+                <image src="../../static/me/wd_icon_guanzhu.png"></image>
+                {{ item.is_attention == 0 ? '取消关注' : '关注' }}
+              </view>
+            </view>
+          </block>
+          <view class="no-data" v-else-if="!isLoadingFollow">
+            <text>暂无作者数据</text>
+          </view>
+        </view>
+        <!-- avator: "http://e.yujianmate.com/images/avator/b1.jpg"
+      is_attention: 0
+      level: 0
+      nickname: "刘畅"
+      sex_id: 2 -->
+
+      </view>
+    </view>
+    <DialogBox ref="DialogBox"></DialogBox>
+  </view>
+</template>
+
+<script>
+const HISTORY_KEY = 'search_history';
+const MAX_HISTORY = 20;
+
+export default {
+  data() {
+    return {
+      searchKeyword: '', // 搜索关键词
+      historyList: [], // 搜索历史
+      searchResult: [], // 搜索结果
+      primaryHistoryList: [],
+      isExpanded: false, // 添加展开/折叠状态变量
+      currentTab: 0, // 当前激活的标签页
+      followList: [], // 关注列表数据
+      followOffset: 0, // 关注列表偏移量
+      hasMoreFollow: true, // 是否有更多关注列表数据
+      recommendList: [], // 推荐列表数据
+      recommendOffset: 0, // 推荐列表偏移量
+      hasMoreRecommend: true, // 是否有更多推荐列表数据
+      isLoadingFollow: false, // 是否正在加载关注列表
+      isLoadingRecommend: false, // 是否正在加载推荐列表 
+
+      searchStatus: true,//显示搜索历史  false显示搜索结果
+    }
+  },
+  onLoad() {
+    // 加载历史记录
+    this.loadHistory();
+  },
+  onReachBottom() {
+    // 触底加载更多数据
+    if (!(hasMoreFollow || hasMoreRecommend)) {
+      switch (this.currentTab) {
+        case 0:
+          this.loadFollowList();
+          break;
+        case 1:
+          this.loadRecommendList();
+          break;
+      }
+    } else {
+      uni.hideToast();
+      uni.showToast({
+        title:'没有更多数据了',
+        icon: 'none'
+      });
+      return;
+    }
+  },
+  computed: {
+    // 添加计算属性以控制显示的历史记录数量
+    displayedHistoryList() {
+      return this.isExpanded ? this.historyList : this.historyList.slice(0, 5);
+    }
+  },
+  methods: {
+    // 加载历史记录
+    loadHistory() {
+      try {
+        const history = uni.getStorageSync(HISTORY_KEY);
+        this.historyList = history ? JSON.parse(history) : [];
+      } catch (e) {
+        console.error('Failed to load search history:', e);
+        this.historyList = [];
+      }
+      // this.primaryHistoryList = JSON.parse(JSON.stringify(this.historyList));
+    },
+
+    // 保存历史记录
+    saveHistory() {
+      try {
+        // 将当前搜索词添加到历史记录开头
+        if (this.searchKeyword && !this.historyList.includes(this.searchKeyword)) {
+          console.log(this.historyList, 11111);
+          this.historyList.unshift(this.searchKeyword);
+          console.log(this.historyList, 11111);
+
+          // 限制历史记录数量
+          if (this.historyList.length > MAX_HISTORY) {
+            this.historyList = this.historyList.slice(0, MAX_HISTORY);
+          }
+          uni.setStorageSync(HISTORY_KEY, JSON.stringify(this.historyList));
+        }
+      } catch (e) {
+        console.error('Failed to save search history:', e);
+      }
+    },
+
+    // 清空历史记录
+    clearHistory() {
+
+      this.$refs['DialogBox'].confirm({
+        title: '提示',
+        content: '确定要清空搜索历史吗？',
+        DialogType: 'inquiry',
+        btn1: '否',
+        btn2: '是',
+        animation: 0
+      }).then((res) => {
+        if (res.isConfirm) {
+          this.historyList = [];
+            uni.setStorageSync(HISTORY_KEY, '[]');
+        }
+      })
+
+   
+    },
+    // 清空单个历史记录
+    deleteHistoryItem(item) {
+      console.log(item, '删除历史记录');
+
+      this.$refs['DialogBox'].confirm({
+        title: '提示',
+        content: '确定要删除搜索历史吗？',
+        DialogType: 'inquiry',
+        btn1: '否',
+        btn2: '是',
+        animation: 0
+      }).then((res) => {
+        if (res.isConfirm) {
+          const index = this.historyList.indexOf(item);
+          if (index !== -1) {
+            this.historyList.splice(index, 1);
+          }
+          uni.setStorageSync(HISTORY_KEY, JSON.stringify(this.historyList));
+        }
+      })
+
+
+    },
+
+    // 使用历史记录中的关键词
+    useHistoryKeyword(keyword) {
+      this.searchKeyword = keyword;
+      this.handleSearch();
+    },
+
+    // 处理搜索
+    handleSearch() {
+      if (!this.searchKeyword.trim()) return;
+      // 保存到历史记录
+      this.saveHistory();
+      this.searchStatus = false;
+      // this.loadHistory()
+      // TODO: 实现搜索逻辑
+      console.log('Searching for:', this.searchKeyword);
+      this.queryList()
+    },
+
+    // 清空搜索框
+    clearKeyword() {
+      this.searchKeyword = '';
+    },
+
+    // 处理输入
+    handleInput(e) {
+      this.searchKeyword = e.detail.value;
+      // this.historyList = this.primaryHistoryList.filter(item => {
+      //   if (item.includes(e.detail.value)) {
+      //     return item;
+      //   }
+      // })
+      if (this.searchKeyword.trim() == '') {
+        this.searchStatus = true;
+      }
+      console.log(this.historyList, e.detail.value);
+
+    },
+
+    // 返回上一页
+    goBack() {
+      uni.navigateBack();
+    },
+
+    // 添加展开/折叠方法
+    toggleHistory() {
+      this.isExpanded = !this.isExpanded;
+    },
+    switchTab(index) {
+      this.currentTab = index;
+      this.searchRequest(index);
+      this.queryList()
+    },
+    formatItem(item) {
+
+      this.downloadAndProcessImage(item.images)
+        .then((color) => {
+          console.log(`平均颜色: R=${color.r}, G=${color.g}, B=${color.b}`);
+        })
+        .catch((error) => {
+          console.error("获取图像失败:", error);
+        });
+      // 处理接口返回的数据，使其适配card组件
+      return {
+        id: item.id,
+        allowEdit: false,
+        nickname: item.nickname,
+        avator: item.avator,
+        num_like: item.num_like,
+        num_view: item.num_view,
+        image: item.images || item.img_url || item.image, // 优先使用images字段
+        w: item.width,
+        h: item.height,
+        title: item.title || "",
+        desc: item.desc || "",
+        backgroundColor: "#f6f6f6",
+      };
+    },
+    downloadAndProcessImage(imageUrl, width = 10, height = 10) {
+      return new Promise((resolve, reject) => {
+        uni.downloadFile({
+          url: imageUrl,
+          success: (downloadResult) => {
+            if (downloadResult.statusCode === 200) {
+              const tempFilePath = downloadResult.tempFilePath;
+              const ctx = uni.createCanvasContext('myCanvas', this);
+              ctx.drawImage(tempFilePath, 0, 0, width, height);
+              ctx.draw(false, () => {
+                uni.canvasGetImageData({
+                  canvasId: 'myCanvas',
+                  x: 0,
+                  y: 0,
+                  width: width,
+                  height: height,
+                  success: (res) => {
+                    const data = res.data;
+                    let r = 0,
+                      g = 0,
+                      b = 0;
+                    for (let i = 0; i < data.length; i +=
+                      4) {
+                      r += data[i];
+                      g += data[i + 1];
+                      b += data[i + 2];
+                    }
+                    const count = width * height;
+                    r = Math.floor(r / count);
+                    g = Math.floor(g / count);
+                    b = Math.floor(b / count);
+                    resolve({
+                      r,
+                      g,
+                      b
+                    });
+                  },
+                  fail: (err) => {
+                    reject(err);
+                  }
+                });
+              });
+            } else {
+              reject(new Error('下载图像失败'));
+            }
+          },
+          fail: (err) => {
+            reject(err);
+          }
+        });
+      });
+    },
+    queryList() {
+      // 根据当前标签刷新数据
+      switch (this.currentTab) {
+        case 0:
+          // 重置作品列表
+          this.followList = [];
+          this.followOffset = 0;
+          this.hasMoreFollow = true;
+          // this.loadFollowList();
+          this.loadFollowList();
+          break;
+        case 1:
+          // 重置作者列表
+          this.recommendList = [];
+          this.recommendOffset = 0;
+          this.hasMoreRecommend = true;
+          // this.loadRecommendList();
+          this.loadRecommendList();
+          break;
+      }
+    },
+    loadFollowList() {
+      if (this.isLoadingFollow) return;
+      this.isLoadingFollow = true;
+
+      uni.request({
+        url: this.$apiHost + "/Work/getlist",
+        data: {
+          uuid: getApp().globalData.uuid,
+          skey: getApp().globalData.skey,
+          offset: this.followOffset,
+          search: this.searchKeyword,
+        },
+        header: {
+          "content-type": "application/json",
+          sign: getApp().globalData.headerSign,
+        },
+        success: (res) => {
+          console.log("作品列表数据:", res.data);
+          // 确保在任何情况下都完成加载
+          if (
+            res.data.success == "yes" &&
+            res.data.list &&
+            res.data.list.length > 0
+          ) {
+            // 只有当列表有数据时才追加
+            this.followList = [...this.followList, ...res.data.list];
+            this.followOffset += res.data.list.length;
+            console.log(this.followOffset, "作品列表数据");
+
+            if (res.data.list.length < 20) {
+              this.hasMoreFollow = false;
+            }
+          } else {
+            // 如果列表为空，确保标记没有更多数据
+            this.hasMoreFollow = false;
+          }
+
+          // 无论是否有数据，都需要通知z-paging组件完成刷新
+          if (this.$refs.paging) {
+            this.$refs.paging.complete(this.followList);
+          }
+        },
+        complete: () => {
+          this.isLoadingFollow = false;
+        },
+        fail: (e) => {
+          console.log("请求关注列表失败:", e);
+          this.isLoadingFollow = false;
+          // 加载失败时也要通知组件完成
+          if (this.$refs.paging) {
+            this.$refs.paging.complete(false);
+          }
+        },
+      });
+    },
+    loadRecommendList() {
+      console.log(this.recommendOffset, 666);
+
+      if (this.isLoadingRecommend) return;
+      this.isLoadingRecommend = true;
+      uni.request({
+        url: this.$apiHost + "/User/getlist",
+        data: {
+          uuid: getApp().globalData.uuid,
+          skey: getApp().globalData.skey,
+          offset: this.recommendOffset,
+          search: this.searchKeyword,
+        },
+        header: {
+          "content-type": "application/json",
+          sign: getApp().globalData.headerSign,
+        },
+        success: (res) => {
+          console.log("作者列表数据:", res.data);
+          if (
+            res.data.success == "yes" &&
+            res.data.list &&
+            res.data.list.length > 0
+          ) {
+            this.recommendList = [...this.recommendList, ...res.data.list];
+            this.recommendOffset += res.data.list.length;
+            console.log(this.recommendOffset, "作者列表数据");
+
+            if (res.data.list.length < 20) {
+              this.hasMoreRecommend = false;
+            }
+          } else {
+            this.hasMoreRecommend = false;
+          }
+
+          // 无论是否有数据，都需要通知z-paging组件完成刷新
+          if (this.$refs.paging) {
+            this.$refs.paging.complete(this.recommendList);
+          }
+        },
+        complete: () => {
+          this.isLoadingRecommend = false;
+        },
+        fail: (e) => {
+          console.log("请求推荐列表失败:", e);
+          this.isLoadingRecommend = false;
+          // 加载失败时也要通知组件完成
+          if (this.$refs.paging) {
+            this.$refs.paging.complete(false);
+          }
+        },
+      });
+    },
+    toggleFollow(item) {
+      uni.request({
+        url: this.$apiHost + '/Member/attention',
+        data: {
+          uuid: getApp().globalData.uuid,
+          id: item.user_id,
+        },
+        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") {
+            if (res.data.str === "关注成功") {
+              item.is_attention = false
+            }
+            if (res.data.str === "取消关注") {
+              item.is_attention = true
+            }
+          }
+        },
+        fail: (e) => {
+          console.log("关注失败:", e);
+          uni.showToast({
+            title: '网络请求失败',
+            icon: 'none'
+          });
+        }
+      });
+      // 这里可以添加调用后端API的逻辑
+    },
+    // 搜索请求
+    searchRequest() {
+    },
+    	goToUserHomepage(id) {
+			if (!id) {
+				return;
+			} 
+      uni.navigateTo({
+        url: "/pages/my/userHomepage?id=" + id,
+      });
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+.search-container {
+  background-color: #ffffff;
+  min-height: 100vh;
+  width: 100%;
+  overflow-x: hidden;
+  position: relative;
+
+  .search-header {
+    background-color: #ffffff;
+    padding: 16rpx 30rpx;
+    display: flex;
+    align-items: center;
+    padding-top: calc(16rpx + var(--status-bar-height));
+    padding-left: 40rpx;
+    padding-right: 28rpx;
+    padding-bottom: 16rpx;
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 9;
+    width: 100%;
+    box-sizing: border-box;
+
+    .search-box {
+      flex: 1;
+      height: 72rpx;
+      background-color: #f1f1f1;
+      border-radius: 36rpx;
+      display: flex;
+      align-items: center;
+      padding: 0 24rpx;
+      padding-left: 14rpx;
+      width: 622rpx;
+      height: 72rpx;
+      background: #FFFFFF;
+      border-radius: 36rpx;
+      border: 6rpx solid #000000;
+      position: relative;
+      left: 0;
+      top: 0;
+      box-sizing: border-box;
+      max-width: calc(100% - 60rpx);
+
+      input {
+        flex: 1;
+        height: 100%;
+        margin: 0 16rpx;
+        font-size: 24rpx;
+        font-family: 'PingFang SC-Medium';
+        width: auto;
+        min-width: 0;
+      }
+
+      .searchImgBox {
+        width: 88rpx;
+        height: 56rpx;
+        background: #1F1F1F;
+        border-radius: 32rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: absolute;
+        top: 50%;
+        right: 6rpx;
+        transform: translateY(-50%);
+        flex-shrink: 0;
+
+        .image {
+          width: 36rpx;
+          height: 36rpx;
+        }
+      }
+    }
+
+    .cancel-btn {
+      color: #1f1f1f;
+      width: 36rpx;
+      height: 100%;
+      margin-right: 24rpx;
+      font-weight: 700;
+      flex-shrink: 0;
+    }
+  }
+
+  .reserveASeat {
+    width: 100%;
+    height: calc(108rpx + var(--status-bar-height));
+  }
+
+  .search-history {
+    background-color: #ffffff;
+    padding: 30rpx;
+    padding-top: 15rpx;
+    width: 100%;
+    box-sizing: border-box;
+
+    .history-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 15rpx;
+      width: 100%;
+      box-sizing: border-box;
+
+      .title {
+        font-size: 30rpx;
+        color: #333;
+        font-weight: bold;
+      }
+    }
+
+    .history-list {
+      transition: all 1s;
+      overflow: hidden;
+      width: 100%;
+      box-sizing: border-box;
+
+      .history-item {
+        display: flex;
+        align-items: center;
+        padding: 18rpx 0;
+        justify-content: space-between;
+        width: 100%;
+        box-sizing: border-box;
+
+        .history-text {
+          font-size: 28rpx;
+          color: #666;
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+          font-weight: 400;
+          color: #1F1F1F;
+          margin-left: 6rpx;
+          font-family: 'PingFang SC-Bold';
+          flex: 1;
+          overflow: hidden;
+          min-width: 0;
+
+          image {
+            width: 32rpx;
+            height: 32rpx;
+            margin-right: 16rpx;
+            flex-shrink: 0;
+          }
+        }
+
+        .deleteBtn {
+          width: 30rpx;
+          height: 30rpx;
+          flex-shrink: 0;
+        }
+      }
+    }
+  }
+
+  .search-result {
+    background-color: #ffffff;
+    margin-top: 20rpx;
+    min-height: 200rpx;
+    width: 100%;
+    box-sizing: border-box;
+
+    .tab-nav {
+      display: flex;
+      justify-content: flex-start;
+      padding: 20rpx 20rpx;
+      padding-top: 0;
+      box-sizing: border-box;
+      background: #ffffff;
+      width: 100%;
+      overflow-x: hidden;
+
+      .tab-item {
+        padding: 10rpx 38rpx;
+        color: #1F1F1F;
+        font-size: 28rpx;
+        background: #F2F6F2;
+        margin-right: 20rpx;
+        border-radius: 30rpx;
+        position: relative;
+        left: 0;
+        top: 0;
+        line-height: 1;
+        flex-shrink: 0;
+        white-space: nowrap;
+
+        .indicator-triangle {
+          position: absolute;
+          bottom: -10rpx;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 0;
+          height: 0;
+          border-left: 10rpx solid transparent;
+          border-right: 10rpx solid transparent;
+          border-top: 10rpx solid #ACF934;
+          display: none;
+        }
+
+        &.active {
+          background: #ACF934;
+          font-family: "CustomFont" !important;
+
+          .indicator-triangle {
+            display: block;
+          }
+        }
+      }
+    }
+
+    .follow-list {
+      padding: 0;
+      width: 100%;
+      box-sizing: border-box;
+
+      .follow-item {
+        display: flex;
+        align-items: center;
+        padding: 20rpx 0;
+        width: 100%;
+        box-sizing: border-box;
+
+        .avator {
+          width: 120rpx;
+          height: 120rpx;
+          margin-right: 24rpx;
+          flex-shrink: 0;
+        }
+
+        .info {
+          flex: 1;
+          min-width: 0;
+
+          .top-box {
+            display: flex;
+            align-items: center;
+            width: 100%;
+            box-sizing: border-box;
+
+            .name {
+              font-size: 32rpx;
+              font-weight: 500;
+              margin-bottom: 8rpx;
+              max-width: 200rpx;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+
+            >image {
+              width: 36rpx;
+              margin-left: 8rpx;
+              margin-right: 10rpx;
+              flex-shrink: 0;
+            }
+
+            .level {
+              font-weight: 400;
+              font-size: 20rpx;
+              font-family: "PingFang SC-Bold";
+              background: linear-gradient(360deg, #acf934 0%, #ffe439 100%);
+              border-radius: 8rpx;
+              padding: 2rpx 8rpx;
+              display: inline-block;
+              flex-shrink: 0;
+            }
+          }
+        }
+
+        .unfollow-btn {
+          font-size: 24rpx;
+          width: 144rpx;
+          height: 52rpx;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          color: #1f1f1f;
+          background: #fff;
+          border: 2rpx solid #1f1f1f;
+          border-radius: 112rpx;
+          margin: 0;
+          font-family: 'PingFang SC-Bold';
+          flex-shrink: 0;
+
+          image {
+            display: none;
+            width: 16rpx;
+            height: 16rpx;
+            margin-right: 5rpx;
+          }
+
+          &.active {
+            color: #ACF934;
+            background: #000;
+
+            image {
+              display: inline-block;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .no-data {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 60rpx 0;
+    background-color: #fff;
+    width: 100%;
+    box-sizing: border-box;
+
+    text {
+      color: #808080;
+      font-size: 28rpx;
+    }
+  }
+}
+
+    .expandBtn {
+      view {
+        font-family: 'PingFang SC-Bold';
+        color: #999999;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        &.fold {
+          image {
+            transform: rotate(180deg) translateY(-2rpx);
+          }
+        }
+
+        image {
+          width: 28rpx;
+          height: 28rpx;
+        }
+      }
+    }
+</style>

pages/crowdFunding/components/CrowdFundingItem/CrowdFundingItem.vue

@@ -1,10 +1,15 @@
 <template>
   <view class="grid-item" @click="handleClick">
-    <image :src="item.imageUrl" class="item-image"></image>
-    <view class="item-title">{{ item.title }}</view>
-    <view class="item-info">
-      <text class="item-price">已筹 ¥{{ item.raisedAmount }}万</text>
-      <text class="item-supporters">支持者 {{ item.supporters }}</text>
+    <view class="item-image-wrapper">
+      <image :src="item.imageUrl" class="item-image"></image>
+    </view>
+    <view class="line-box"></view>
+    <view class="item-info-area">
+      <view class="item-title two-omit">{{ item.title }}</view>
+      <view class="item-info">
+        <text class="item-price">已筹 ￥{{ item.raisedAmount }}万</text>
+        <text class="item-supporters">支持者 {{ item.supporters }}</text>
+      </view>
     </view>
   </view>
 </template>
@@ -29,39 +34,59 @@ export default {
 <style scoped lang="scss">
 .grid-item {
   background: #fff;
-  border-radius: 20rpx;
-  overflow: hidden;
-  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
-  margin-bottom: 8rpx;
-  .item-image {
+  border-radius: 12rpx;
+  overflow: hidden; 
+  display: flex;
+  flex-direction: column;
+  .line-box{
+      width: 100%;
+      height: 6rpx;
+      background: linear-gradient(to right, #ACF934, transparent);
+    }
+  .item-image-wrapper {
     width: 100%;
-    height: 220rpx;
-    display: block;
-    object-fit: cover;
-    border-top-left-radius: 20rpx;
-    border-top-right-radius: 20rpx;
-  }
-  .item-title {
-    font-size: 26rpx;
-    color: #222;
-    padding: 12rpx 12rpx 0 12rpx;
-    font-weight: 500;
-    white-space: nowrap;
+    position: relative;
+    padding-bottom: 100%; // 1:1
     overflow: hidden;
-    text-overflow: ellipsis;
+    // border-top-left-radius: 18px;
+    // border-top-right-radius: 18px;
+  }
+  .item-image {
+    position: absolute;
+    left: 0; top: 0; width: 100%; height: 100%;
+    object-fit: cover;
+    // border-top-left-radius: 18px;
+    // border-top-right-radius: 18px;
+    display: block;
   }
-  .item-info {
+  .item-info-area {
+    background: #fff; 
+    padding: 12rpx 20rpx;    
     display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 12rpx 12rpx 12rpx;
-    font-size: 22rpx;
-    .item-price {
-      color: #ff5000;
-      font-weight: bold;
+    flex-direction: column;
+    justify-content: flex-end;
+    .item-title {
+      font-size: 26rpx;
+      color: #1f1f1f;
+      font-weight: 500;  
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
-    .item-supporters {
-      color: #999;
+    .item-info {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      // padding: 0 12px 0 12px;
+      font-size: 20rpx;
+      margin-top: 12rpx;
+      .item-price {
+        color: #bdbdbd;
+        font-weight: 400;
+      }
+      .item-supporters {
+        color: #bdbdbd;
+        font-weight: 400;
+      }
     }
   }
 }

pages/crowdFunding/crowdFunding.vue

@@ -1,312 +1,399 @@
-	<template>
-		<view class="crowd-funding-page">
-			<!-- 头部导航 -->
-			<page-navbar>
-				<template #navLeft>
-					<view class="nav-left" @click="goBack">
-						<image src="/static/icon/arrow-left.png" class="back-icon"></image>
-					</view>
-				</template>
-				<template #navCenter>
-					<view class="nav-title">众筹</view>
-				</template>
-				<template #navRight>
-					<view class="nav-right">
-						<image src="/static/icon/star.png" class="action-icon"></image>
-						<image src="/static/icon/avatar-placeholder.png" class="avatar-icon"></image>
-					</view>
-				</template>
-			</page-navbar>
+<template>
+  <view class="crowd-funding-page">
+    <!-- 头部导航 -->
+    <view class="navbar" ref="header">
+      <view style="display: flex; align-items: center">
+        <view
+          class="nav-left"
+          @click="goBack"
+        >
+          <text class="fa fa-angle-left back-icon"></text>
+        </view>
+        <view class="nav-title">众筹</view>
+      </view>
 
-			<!-- 搜索框 -->
-			<view class="search-bar-container">
-				<view class="search-input-wrapper">
-					<image src="/static/icon/search-gray.png" class="search-icon"></image>
-					<input type="text" placeholder="搜索你感兴趣的内容" class="search-input" />
-				</view>
-			</view>
+      <!-- 搜索框 -->
+      <view
+        class="search-bar-container"
+        @click="goPages('/pages/crowdFunding/Search')"
+      >
+        <view class="search-input-wrapper">
+          <image
+            src="/static/crowdFunding/search.png"
+            class="search-icon"
+          ></image>
+          <input
+            type="text"
+            placeholder="搜索你感兴趣的内容"
+            class="search-input"
+            disabled
+          />
+        </view>
+      </view>
 
-			<!-- Banner -->
-			<view class="banner-section">
-				<swiper class="banner-swiper" :autoplay="true" :circular="true" :interval="5000" :indicator-dots="true" indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#ffffff">
-					<swiper-item v-for="(item, index) in bannerList" :key="index">
-						<image :src="item.image" class="banner-image" mode="aspectFill"></image>
-					</swiper-item>
-				</swiper>
-			</view>
+      <view class="nav-right" @click="goPages('/pages/crowdFunding/favorites')">
+        <image
+          src="/static/crowdFunding/collect-active1.png"
+          class="action-icon"
+        ></image>
+      </view>
+    </view>
 
-			<!-- Tab导航 -->
-			<view class="tabs-section">
-				<scroll-view scroll-x class="tabs-scroll-view" :show-scrollbar="false" :scroll-into-view="'tab-' +( currentTab -1)" scroll-with-animation>
-					<view class="tabs-wrapper">
-						<view v-for="(tab, index) in tabs" :key="index" :id="'tab-' + index" :class="['tab-item', currentTab === index ? 'active' : '']" @click="switchTab(index)">
-							<image v-if="tab.icon" :src="tab.icon" class="tab-icon"></image>
-							{{ tab.name }}
-						</view>
-					</view>
-				</scroll-view>
-			</view>
+    <!-- Tab导航 -->
+    <view class="tab-box" ref="tabbar">
+      <scroll-view
+        scroll-x
+        class="tabs-scroll-view"
+        :show-scrollbar="false"
+        :scroll-into-view="'tab-' + (currentTab - 1)"
+        scroll-with-animation
+      >
+        <view class="tabs-wrapper">
+          <view
+            v-for="(tab, index) in tabs"
+            :key="index"
+            :id="'tab-' + index"
+            :class="['tab-item', currentTab === index ? 'active' : '']"
+            @click="switchTab(index)"
+          >
+            <text>{{ tab.name }}</text>
+          </view>
+          <!-- 右侧占位空白 -->
+          <view class="tab-placeholder"></view>
+        </view>
+      </scroll-view>
+      <view class="mask"></view>
+    </view>
+    <!-- 内容区域：swiper实现左右滑动切换tab，每个tab一个scroll-view，支持下拉刷新 -->
+    <swiper
+      class="tab-swiper"
+      :current="currentTab"
+      @change="onSwiperChange"
+      :style="{ height: swiperHeight + 'px', width: '100vw' }"
+    >
+      <swiper-item
+        v-for="(tab, tabIndex) in tabs"
+        :key="tabIndex"
+      >
+        <scroll-view
+          scroll-y
+          class="content-scroll"
+          :style="{ height: swiperHeight + 'px' }"
+          :refresher-enabled="true"
+          :refresher-triggered="isRefreshing[tabIndex]"
+          refresher-background="#f2f6f2"
+          @refresherrefresh="onRefresh(tabIndex)"
+          @scroll="(e) => onScroll(e, tabIndex)"
+          :scroll-top="shouldRestoreScroll[tabIndex] ? (scrollTop[tabIndex] || 0) : undefined"
+          @scrolltolower="onScrollToLower(tabIndex)"
+        >
+          <view class="items-grid">
+            <CrowdFundingItem
+              v-for="item in tabData[tabIndex]"
+              :key="item.id"
+              :item="item"
+              @click="goToDetail(item.id)"
+            />
+          </view>
+          <view v-if="loadingMore[tabIndex]" class="loading-more">加载中...</view>
+          <view v-else-if="!hasMore[tabIndex]" class="no-more">没有更多了</view>
+        </scroll-view>
+      </swiper-item>
+    </swiper>
+  </view>
+</template>
 
-			<!-- 内容区域 -->
-			<scroll-view scroll-y class="content-scroll">
-				<view class="items-grid">
-					<CrowdFundingItem
-						v-for="(item, index) in itemList"
-						:key="index"
-						:item="item"
-						@click="goToDetail"
-					/>
-				</view>
-			</scroll-view>
+<script>
+import CrowdFundingItem from "./components/CrowdFundingItem/CrowdFundingItem.vue";
+export default {
+  components: { CrowdFundingItem },
+  data() {
+    return {
+      tabs: [
+        { name: "全部", icon: "" },
+        { name: "🌟创意", icon: "/static/icon/creative-star.png" },
+        { name: "🧸潮玩", icon: "/static/icon/toy-bear.png" },
+        { name: "📖出版", icon: "" },
+        { name: "🃏桌游", icon: "" },
+        { name: "🃏桌游", icon: "" },
+      ],
+      currentTab: 0,
+      tabData: [[], [], [], [], [], []],
+      isRefreshing: [false, false, false, false, false, false],
+      scrollTop: {},
+      shouldRestoreScroll: [true, true, true, true, true, true],
+      swiperHeight: 600,
+      page: [1, 1, 1, 1, 1, 1],
+      hasMore: [true, true, true, true, true, true],
+      loadingMore: [false, false, false, false, false, false],
+    };
+  },
+  mounted() {
+    // 动态获取头部和tab栏高度
+    const sys = uni.getSystemInfoSync();
+    const windowHeight = sys.windowHeight;
+    this.$nextTick(() => {
+      uni.createSelectorQuery()
+        .in(this)
+        .select('.navbar')
+        .boundingClientRect(rect1 => {
+          uni.createSelectorQuery()
+            .in(this)
+            .select('.tab-box')
+            .boundingClientRect(rect2 => {
+              const headerHeight = rect1 ? rect1.height : 0;
+              const tabbarHeight = rect2 ? rect2.height : 0;
+              this.swiperHeight = windowHeight - headerHeight - tabbarHeight;
+            })
+            .exec();
+        })
+        .exec();
+    });
+    // 初始化加载第一个tab数据
+    this.fetchData(0);
+  },
+  methods: {
+    goBack() {
+      uni.navigateBack();
+    },
+    goPages(url) {
+      uni.navigateTo({
+        url,
+      });
+    },
+    switchTab(index) {
+      this.currentTab = index;
+      this.$set(this.shouldRestoreScroll, index, true);
+      if (!this.tabData[index] || this.tabData[index].length === 0) {
+        this.fetchData(index);
+      }
+    },
+    onSwiperChange(e) {
+      this.switchTab(e.detail.current);
+    },
+    async onRefresh(tabIndex) {
+      this.$set(this.isRefreshing, tabIndex, true);
+      await this.fetchData(tabIndex, true);
+      this.$set(this.isRefreshing, tabIndex, false);
+    },
+    onScroll(e, tabIndex) {
+      this.$set(this.scrollTop, tabIndex, e.detail.scrollTop);
+      if (this.shouldRestoreScroll[tabIndex]) {
+        this.$set(this.shouldRestoreScroll, tabIndex, false);
+      }
+    },
+    async onScrollToLower(tabIndex) {
+      if (!this.hasMore[tabIndex] || this.loadingMore[tabIndex]) return;
+      this.$set(this.loadingMore, tabIndex, true);
+      await this.fetchData(tabIndex, false, true);
+      this.$set(this.loadingMore, tabIndex, false);
+    },
+    async fetchData(tabIndex, isRefresh = false, isLoadMore = false) {
+      if (isRefresh) {
+        this.page[tabIndex] = 1;
+        this.hasMore[tabIndex] = true;
+      }
+      if (isLoadMore) {
+        this.page[tabIndex]++;
+      } else {
+        this.page[tabIndex] = 1;
+      }
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          const now = Date.now();
+          const page = this.page[tabIndex];
+          let demo = [];
+          if (page <= 3) {
+            for (let i = 0; i < 4; i++) {
+              demo.push({
+                id: now + page * 100 + i,
+                imageUrl: `/static/crowdFunding/top-img.png`,
+                title: `糖指数100%12分BJD可动人偶盲盒_${page}_${i}`,
+                raisedAmount: (769.8 + Math.floor(Math.random() * 100)).toString(),
+                supporters: 3788 + Math.floor(Math.random() * 100),
+              });
+            }
+          }
+          if (isLoadMore) {
+            if (demo.length) {
+              this.$set(this.tabData, tabIndex, [...this.tabData[tabIndex], ...demo]);
+            }
+          } else {
+            this.$set(this.tabData, tabIndex, demo);
+          }
+          this.$set(this.hasMore, tabIndex, page < 3);
+          resolve();
+        }, 1000);
+      });
+    },
+    goToDetail(id) {
+      // 跳转详情页
+      uni.navigateTo({ url: '/pages/crowdFunding/crowdfundingDetails?id=' + id });
+    },
+  }, 
+};
+</script>
 
-		</view>
-	</template>
+<style lang="scss" scoped>
+.crowd-funding-page {
+  display: flex;
+  flex-direction: column;
+  background: #f2f6f2;
+  height: 100vh; // 移除，避免撑死内容
+}
 
-	<script>
-	import pageNavbar from '@/components/page-navbar/page-navbar.vue'; 
-	import CrowdFundingItem from './components/CrowdFundingItem/CrowdFundingItem.vue';
+.navbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  //   height: 96rpx;
+  background: #fff; 
+  padding: 46rpx 20rpx 26rpx 30rpx;
+  padding-top: calc(var(--status-bar-height) + 46rpx);
+  box-sizing: content-box;
+  .nav-left {
+    width: 36rpx;
+    display: flex;
+    align-items: center;
+    .back-icon {
+      font-size: 50rpx;
+    }
+  }
+  .nav-title {
+    font-size: 36rpx;
+    font-weight: bold;
+    color: #222;
+    letter-spacing: 2rpx;
+  }
 
-	export default {
-		components: {
-			pageNavbar,
-			CrowdFundingItem
-		},
-		data() {
-			return {
-				bannerList: [
-					{ image: '/static/placeholder/banner-crowdfunding.png' } // Placeholder banner
-				],
-				tabs: [
-					{ name: '全部', icon: '' },
-					{ name: '创意', icon: '/static/icon/creative-star.png' }, // Placeholder icon
-					{ name: '潮玩', icon: '/static/icon/toy-bear.png' }, // Placeholder icon
-					{ name: '出版', icon: '' },
-					{ name: '桌游', icon: '' },
-					{ name: '桌游', icon: '' },
-					{ name: '桌游', icon: '' },
-					{ name: '桌游', icon: '' },
-					{ name: '桌游', icon: '' },
-					{ name: '桌游', icon: '' },
-					{ name: '卡片', icon: '' }
-				],
-				currentTab: 0, // 默认选中"创意"
-				itemList: [
-					{
-						id: 1,
-						imageUrl: '/static/placeholder/item1.png',
-						title: '糖指数100%12分BJD可动人偶盲盒',
-						raisedAmount: '769.8',
-						supporters: 3788
-					},
-					{
-						id: 2,
-						imageUrl: '/static/placeholder/item2.png',
-						title: '糖指数100%12分BJD可动人偶盲盒',
-						raisedAmount: '769.8',
-						supporters: 3788
-					},
-					{
-						id: 3,
-						imageUrl: '/static/placeholder/item3.png',
-						title: '糖指数100%12分BJD可动人偶盲盒',
-						raisedAmount: '769.8',
-						supporters: 3788
-					},
-					{
-						id: 4,
-						imageUrl: '/static/placeholder/item4.png',
-						title: '糖指数100%12分BJD可动人偶盲盒',
-						raisedAmount: '769.8',
-						supporters: 3788
-					}
-				]
-			};
-		},
-		methods: {
-			goBack() {
-				uni.navigateBack();
-			},
-			switchTab(index) {
-				this.currentTab = index;
-				// 在这里可以根据选择的tab加载不同的数据
-				console.log('Switched to tab:', this.tabs[index].name);
-			},
-			goToDetail(id) {
-				console.log('Go to detail page for item ID:', id);
-				// uni.navigateTo({ url: '/pages/crowdFunding/detail?id=' + id });
-			}
-		}
-	};
-	</script>
+  .search-bar-container {
+    padding: 0 24rpx;
+    display: flex;
+    align-items: center;
+    width: 450rpx;
+    height: 64rpx;
+    background: #f2f6f2;
+    border-radius: 36rpx;
+    ::v-deep.input-placeholder {
+      color: #999;
+    }
+    .search-input-wrapper {
+      display: flex;
+      align-items: center;
+      width: 100%;
 
-	<style lang="scss" scoped>
-	.crowd-funding-page {
-		display: flex;
-		flex-direction: column;
-		height: 100vh;
-		background: #f6f7fb;
-	}
+      .search-icon {
+        width: 32rpx;
+        height: 32rpx;
+        margin-right: 10rpx;
+      }
+      .search-input {
+        font-size: 28rpx;
+        color: #999;
+        line-height: 64rpx;
+        background: transparent;
+        border: none;
+        outline: none;
+        width: 100%;
+      }
+    }
+  }
+  .nav-right {
+    .action-icon {
+      width: 64rpx;
+      height: 64rpx;
+      border-radius: 50%;
+    }
+  }
+}
+.tab-box {
+  width: 100vw;
+  height: auto;
+  position: relative;
+  left: 0;
+  top: 0;
+  border-bottom: solid 5rpx #F2F6F2;
+  .mask {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 200rpx;
+    height: 100%;
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
+    pointer-events: none;
+  }
+}
+.tabs-scroll-view {
+  width: 100%;
+  background: #fff;
+  padding-bottom: 22rpx;
 
-	.page-navbar {
-		background: #fff;
-		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
-		.nav-title {
-			font-size: 36rpx;
-			font-weight: bold;
-			color: #222;
-			letter-spacing: 2rpx;
-		}
-		.nav-right {
-			display: flex;
-			align-items: center;
-			.action-icon {
-				width: 48rpx;
-				height: 48rpx;
-				margin-right: 16rpx;
-				background: #fffbe6;
-				border-radius: 50%;
-				padding: 8rpx;
-			}
-			.avatar-icon {
-				width: 56rpx;
-				height: 56rpx;
-				border-radius: 50%;
-				border: 2rpx solid #fff;
-				box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
-			}
-		}
-	}
+  .tabs-wrapper {
+    display: flex;
+    align-items: center;
+    padding-left: 12rpx;
+    padding-right: 200rpx;
+    box-sizing: content-box;
+  }
+}
+.tab-item {
+  display: flex;
+  align-items: center;
+  font-size: 28rpx;
+  color: #666;
+  padding: 8rpx 28rpx;
+  margin-right: 8rpx;
+  border-radius: 32rpx;
+  font-weight: 500;
+  background: transparent;
+  transition: background 0.2s, color 0.2s;
+  text {
+    white-space: nowrap;
+  }
+  text-wrap: nowrap;
+  .tab-icon {
+    width: 32rpx;
+    height: 32rpx;
+    margin-right: 8rpx;
+  }
+  &.active {
+    font-weight: bold;
+    color: #fff;
+    background: #222;
+    box-shadow: 0 2rpx 8rpx rgba(34, 34, 34, 0.08);
+    .tab-icon {
+      filter: brightness(1.5) saturate(2);
+    }
+  }
+}
 
-	.search-bar-container {
-		margin: 18rpx 24rpx 0 24rpx;
-		background: #fff;
-		border-radius: 32rpx;
-		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
-		padding: 0 24rpx;
-		height: 64rpx;
-		display: flex;
-		align-items: center;
-		.search-input-wrapper {
-			display: flex;
-			align-items: center;
-			.search-icon {
-				width: 32rpx;
-				height: 32rpx;
-				margin-right: 10rpx;
-			}
-			.search-input {
-				font-size: 28rpx;
-				color: #999;
-				line-height: 64rpx;
-			}
-		}
-	}
+.tab-swiper {
+  width: 100vw;
+  background: #f2f6f2;
+}
+.swiper-item {
+  background: #f2f6f2;
+}
+.content-scroll {
+  overflow-y: auto;
+  padding-bottom: 24rpx;
+  background: #f2f6f2;
+}
 
-	.banner-section {
-		margin: 16rpx 24rpx 0 24rpx;
-		border-radius: 24rpx;
-		overflow: hidden;
-		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
-		background: #fff;
-		.banner-swiper {
-			height: 180rpx;
-			.banner-image {
-				width: 100%;
-				height: 100%;
-				display: block;
-				object-fit: cover;
-			}
-		}
-	}
+.items-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 24rpx 12rpx;
+  padding: 16rpx 12rpx 0 12rpx;
+  background: #f2f6f2;
+}
 
-	.tabs-section {
-		background: #fff;
-		border-bottom: 1rpx solid #eee;
-		margin-top: 12rpx;
-		.tabs-scroll-view {
-			width: 100%;
-			.tabs-wrapper {
-				display: flex;
-				align-items: center;
-				padding-left: 12rpx;
-			}
-		}
-		.tab-item {
-			display: flex;
-			align-items: center;
-			font-size: 28rpx;
-			color: #666;
-			padding: 8rpx 28rpx;
-			margin-right: 8rpx;
-			border-radius: 32rpx;
-			font-weight: 500;
-			background: transparent;
-			transition: background 0.2s, color 0.2s;
-			.tab-icon {
-				width: 32rpx;
-				height: 32rpx;
-				margin-right: 8rpx;
-			}
-			&.active {
-				font-weight: bold;
-				color: #fff;
-				background: #222;
-				.tab-icon {
-					filter: brightness(1.5) saturate(2);
-				}
-			}
-		}
-	}
+.tab-placeholder {
+  width: 200rpx;
+  flex-shrink: 0;
+  height: 1px; // 不影响高度
+}
 
-	.content-scroll {
-		flex: 1;
-		overflow-y: auto;
-		padding-bottom: 24rpx;
-	}
-
-	.items-grid {
-		display: grid;
-		grid-template-columns: repeat(2, 1fr);
-		gap: 24rpx;
-		padding: 16rpx 24rpx 0 24rpx;
-		.grid-item {
-			background: #fff;
-			border-radius: 20rpx;
-			overflow: hidden;
-			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
-			margin-bottom: 8rpx;
-			.item-image {
-				width: 100%;
-				height: 220rpx;
-				display: block;
-				object-fit: cover;
-				border-top-left-radius: 20rpx;
-				border-top-right-radius: 20rpx;
-			}
-			.item-title {
-				font-size: 26rpx;
-				color: #222;
-				padding: 12rpx 12rpx 0 12rpx;
-				font-weight: 500;
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
-			}
-			.item-info {
-				display: flex;
-				justify-content: space-between;
-				align-items: center;
-				padding: 0 12rpx 12rpx 12rpx;
-				font-size: 22rpx;
-				.item-price {
-					color: #ff5000;
-					font-weight: bold;
-				}
-				.item-supporters {
-					color: #999;
-				}
-			}
-		}
-	}
-	</style>
-	
+.loading-more { text-align: center; color: #999; font-size: 26rpx; padding: 24rpx 0; }
+.no-more { text-align: center; color: #ccc; font-size: 24rpx; padding: 20rpx 0; }
+</style>

pages/crowdFunding/crowdfundingDetails.vue

@@ -12,15 +12,46 @@
 			</view>
 		</view>
 		<!-- 顶部视频图片混合轮播 -->
-		<swiper class="top-swiper" indicator-dots circular>
-			<swiper-item v-for="(item, idx) in mediaList" :key="idx">
-				<view v-if="item.type === 'video'" class="video-wrapper">
-					<video class="swiper-video" :src="item.src" :poster="item.poster" controls autoplay
-						@ended="videoPlaying = false"></video>
-				</view>
-				<image v-else class="swiper-img" :src="item.src" mode="aspectFill" />
-			</swiper-item>
-		</swiper>
+		<view class="swiper-container">
+			<swiper class="top-swiper" 
+				:indicator-dots="false" 
+				circular 
+				:current="currentMediaIndex" 
+				@change="handleSwiperChange"
+				:duration="300"
+			>
+				<swiper-item v-for="(item, idx) in mediaList" :key="idx" class="swiper-item">
+					<view v-if="item.type === 'video'" class="media-wrapper">
+						<video 
+							class="swiper-video" 
+							:src="item.src" 
+							:poster="item.poster" 
+							:id="'video-' + idx"
+							controls
+							object-fit="contain"
+							enable-progress-gesture="false"
+							:loop="false"
+							:show-fullscreen-btn="false"
+							:show-play-btn="true"
+							:enable-play-gesture="false"
+							@ended="onVideoEnded" 
+							@play="onVideoPlay(idx)"
+							@pause="onVideoPause"
+						></video>
+					</view>
+					<image v-else class="swiper-img" :src="item.src" mode="aspectFill" />
+				</swiper-item>
+			</swiper>
+			<!-- 自定义指示点 -->
+			<view class="custom-dots">
+				<view 
+					v-for="(item, index) in mediaList" 
+					:key="index"
+					:class="['dot', currentMediaIndex === index ? 'active' : '']"
+					@click="switchMedia(index)"
+				></view>
+			</view>
+		</view>
 
 		<view class="content">
 			<!-- 项目信息 -->
@@ -166,252 +197,302 @@
 </template>
 
 <script>
-
-import VideoPlayer from "@/components/VideoPlayer/VideoPlayer.vue";
-import SharePopup from "@/components/SharePopup/SharePopup.vue";
-import productSpecifications from "./components/productSpecifications/productSpecifications.vue";
-export default {
-	components: {
-		VideoPlayer,
-		SharePopup,
-		productSpecifications
-	},
-	data() {
-		return {
-			mediaList: [
-				// { type: 'video', src: 'https://media.w3.org/2010/05/sintel/trailer.mp4', poster: 'https://www.w3schools.com/html/pic_trulli.jpg' },
-				{ type: 'image', src: '../../static/crowdFunding/top-img.png' },
-				{ type: 'image', src: 'https://img.alicdn.com/imgextra/i3/2200704180017/O1CN01Qw6QwF1w6Qw6QwF1w6QwF_!!2200704180017.jpg' }
-			],
-			videoPlaying: false,
-			currentMediaIndex: 0,
-			commentList: [
-				{
+	import VideoPlayer from "@/components/VideoPlayer/VideoPlayer.vue";
+	import SharePopup from "@/components/SharePopup/SharePopup.vue";
+	import productSpecifications from "./components/productSpecifications/productSpecifications.vue";
+	export default {
+		components: {
+			VideoPlayer,
+			SharePopup,
+			productSpecifications
+		},
+		data() {
+			return {
+				mediaList: [
+					{
+						type: 'image',
+						src: '../../static/crowdFunding/top-img.png'
+					},{
+						type: 'video',
+						src: 'https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4',
+						poster: 'https://storage.googleapis.com/gtv-videos-bucket/sample/images/ForBiggerBlazes.jpg'
+					},
+					{
+						type: 'image',
+						src: 'https://img.alicdn.com/imgextra/i3/2200704180017/O1CN01Qw6QwF1w6Qw6QwF1w6QwF_!!2200704180017.jpg'
+					}
+				],
+				videoPlaying: false,
+				currentMediaIndex: 0,
+				commentList: [{
+						avatar: '/static/crowdFunding/top-img.png',
+						content: '还是希望签名能签在书上，还是希望签名能签在书上还是希望签名能签在书上还是希望签名能签在书上，还是希望签名能签在书上还是希望签名能签在书上',
+						likeNum: 12,
+						liked: false
+					},
+					{
+						avatar: '/static/crowdFunding/top-img.png',
+						content: '还是希望签名能签在书上',
+						likeNum: 12,
+						liked: true
+					}
+				],
+				navBgOpacity: 0,
+				swiperHeight: 0,
+				initiator: {
 					avatar: '/static/crowdFunding/top-img.png',
-					content: '还是希望签名能签在书上，还是希望签名能签在书上还是希望签名能签在书上还是希望签名能签在书上，还是希望签名能签在书上还是希望签名能签在书上',
-					likeNum: 12,
-					liked: false
+					name: '也许时间是一种解药'
 				},
-				{
-					avatar: '/static/crowdFunding/top-img.png',
-					content: '还是希望签名能签在书上',
-					likeNum: 12,
-					liked: true
-				}
-			],
-			navBgOpacity: 0,
-			swiperHeight: 0,
-			initiator: {
-				avatar: '/static/crowdFunding/top-img.png',
-				name: '也许时间是一种解药'
-			},
-			showShare: false,
-			shareTitle: '【Woh】灯塔 塔罗牌 治愈风泛传特系',
-			shareDesc: '快来支持这个有趣的众筹项目吧！',
-			shareImg: require('@/static/crowdFunding/top-img.png'),
-			userId: 0, // 可根据实际登录用户赋值
-		}
-	},
-	computed: {
-		navBgStyle() {
-			return {
-				background: `rgba(255,255,255,${this.navBgOpacity})`,
-				transition: 'background 0.3s'
+				showShare: false,
+				shareTitle: '【Woh】灯塔 塔罗牌 治愈风泛传特系',
+				shareDesc: '快来支持这个有趣的众筹项目吧！',
+				shareImg: require('@/static/crowdFunding/top-img.png'),
+				userId: 0, // 可根据实际登录用户赋值
 			}
-		}
-	},
-	methods: {
-		// 返回上一页
-		goBack() {
-			uni.navigateBack({
-				delta: 1,
-			});
 		},
-		scrollToTop() {
-			uni.pageScrollTo({
-				scrollTop: 0,
-				duration: 300
-			});
+		computed: {
+			navBgStyle() {
+				return {
+					background: `rgba(255,255,255,${this.navBgOpacity})`,
+					transition: 'background 0.3s'
+				}
+			}
 		},
-		playVideo(idx) {
-			this.currentMediaIndex = idx;
-			this.videoPlaying = true;
+		methods: {
+			// 返回上一页
+			goBack() {
+				uni.navigateBack({
+					delta: 1,
+				});
+			},
+			scrollToTop() {
+				uni.pageScrollTo({
+					scrollTop: 0,
+					duration: 300
+				});
+			},
+			switchMedia(index) {
+				if (this.currentMediaIndex === index) return;
+				
+				// 如果当前在播放视频，先暂停
+				if (this.mediaList[this.currentMediaIndex]?.type === 'video') {
+					const videoContext = uni.createVideoContext('video-' + this.currentMediaIndex, this);
+					if (videoContext) {
+						videoContext.pause();
+					}
+				}
+				
+				this.currentMediaIndex = index;
+			},
+			handleSwiperChange(e) {
+				const lastIndex = this.currentMediaIndex;
+				this.currentMediaIndex = e.detail.current;
+				
+				// 如果上一个是视频，暂停它
+				if (this.mediaList[lastIndex]?.type === 'video') {
+					const videoContext = uni.createVideoContext('video-' + lastIndex, this);
+					if (videoContext) {
+						videoContext.pause();
+						this.videoPlaying = false;
+					}
+				}
+			},
+			onVideoPlay(idx) {
+				// 更新当前播放的视频索引
+				this.videoPlaying = true;
+				if (this.currentMediaIndex !== idx) {
+					this.currentMediaIndex = idx;
+				}
+			},
+			onVideoPause() {
+				this.videoPlaying = false;
+			},
+			onVideoEnded() {
+				this.videoPlaying = false;
+			},
+			goPage(url) {
+				uni.navigateTo({
+					url: url
+				});
+			},
+			onSpecConfirm(selectedSpec) {
+				console.log('selectedSpec', selectedSpec);
+			},
+			specificationsOpen() {
+				this.$refs.specSheet.show();
+			},
 		},
-		goPage(url) {
-			uni.navigateTo({
-				url: url
+		mounted() {
+			this.$nextTick(() => {
+				// 动态获取轮播图高度
+				uni.createSelectorQuery().in(this).select('.top-swiper').boundingClientRect(rect => {
+					if (rect) {
+						this.swiperHeight = rect.height;
+					}
+				}).exec();
 			});
 		},
-		onSpecConfirm(selectedSpec) {
-			console.log('selectedSpec', selectedSpec);
-		},
-		specificationsOpen() {
-			this.$refs.specSheet.show();
-		}
-	},
-	mounted() {
-		this.$nextTick(() => {
-			// 动态获取轮播图高度
-			uni.createSelectorQuery().in(this).select('.top-swiper').boundingClientRect(rect => {
-				if (rect) {
-					this.swiperHeight = rect.height;
-				}
-			}).exec();
-		});
-	},
-	onPageScroll(e) {
-		const threshold = this.swiperHeight || uni.upx2px(400); // 优先用实际高度
-		let opacity = 0;
-		if (e.scrollTop > 0) {
-			opacity = Math.min(e.scrollTop / threshold, 1);
+		onPageScroll(e) {
+			const threshold = this.swiperHeight || uni.upx2px(400); // 优先用实际高度
+			let opacity = 0;
+			if (e.scrollTop > 0) {
+				opacity = Math.min(e.scrollTop / threshold, 1);
+			}
+			this.navBgOpacity = opacity;
 		}
-		this.navBgOpacity = opacity;
 	}
-}
 </script>
 
 
 <style lang="scss" scoped>
-.crowdfunding-details {
+	.crowdfunding-details {
 
-	/* 自定义导航栏样式 */
-	.custom-navbar {
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		justify-content: space-between;
-		width: 100%;
-		height: calc(90rpx + var(--status-bar-height));
-		padding: 0 20rpx;
-		position: fixed;
-		top: 0;
-		z-index: 100;
-		padding: 12rpx 24rpx;
-		padding-top: calc(var(--status-bar-height) + 12rpx);
-		background: transparent;
-		transition: background 0.3s;
-
-		image {
-			width: 64rpx;
-			height: 64rpx;
-		}
-	}
+		/* 自定义导航栏样式 */
+		.custom-navbar {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			justify-content: space-between;
+			width: 100%;
+			height: calc(90rpx + var(--status-bar-height));
+			padding: 0 20rpx;
+			position: fixed;
+			top: 0;
+			z-index: 100;
+			padding: 12rpx 24rpx;
+			padding-top: calc(var(--status-bar-height) + 12rpx);
+			background: transparent;
+			transition: background 0.3s;
 
-	.top-swiper {
-		width: 100vw;
-		height: 100vw;
-		overflow: hidden;
+			image {
+				width: 64rpx;
+				height: 64rpx;
+			}
+		}
 
-		.video-wrapper {
+		.swiper-container {
 			position: relative;
-			width: 100%;
-			height: 400rpx;
+			width: 100vw;
+			height: 100vw;
+			background: #000;
 
-			.swiper-img,
-			.swiper-video {
+			.top-swiper {
 				width: 100%;
 				height: 100%;
-				object-fit: cover;
-			}
 
-			.custom-play-btn {
-				position: absolute;
-				left: 30rpx;
-				bottom: 30rpx;
-				width: 80rpx;
-				height: 80rpx;
-				background: rgba(0, 0, 0, 0.4);
-				border-radius: 50%;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-
-				.play-icon {
-					width: 48rpx;
-					height: 48rpx;
+				.swiper-item {
+					width: 100%;
+					height: 100%;
+					display: flex;
+					align-items: center;
+					justify-content: center;
 				}
-			}
-		}
 
-		.swiper-img {
-			width: 100%;
-			height: 100%;
-			object-fit: cover;
-		}
-	}
-
-	.content {
-		background: #f2f6f2;
-		padding: 20rpx;
+				.media-wrapper {
+					width: 100%;
+					height: 100%;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					background: #000;
+				}
 
-		.section {
-			background: #fff;
-			border-radius: 12rpx;
-			padding: 16rpx;
-			padding-bottom: 20rpx;
-			margin: 12rpx 0;
+				.swiper-video {
+					width: 100%;
+					height: 100%;
+				}
 
-			.section-title {
-				font-size: 28rpx;
-				font-family: 'PingFang SC-Medium';
-				margin-bottom: 6rpx;
+				.swiper-img {
+					width: 100%;
+					height: 100%;
+					object-fit: cover;
+				}
 			}
 
-			.section-content {
-				color: #333;
-				font-size: 24rpx;
-				line-height: 1.8;
-			}
+			.custom-dots {
+				position: absolute;
+				bottom: 20rpx;
+				left: 50%;
+				transform: translateX(-50%);
+				display: flex;
+				gap: 16rpx;
 
-			.intro-img {
-				width: 100%;
-				margin: 0;
-				padding: 0;
-				margin-bottom: -10rpx;
+				.dot {
+					width: 12rpx;
+					height: 12rpx;
+					border-radius: 50%;
+					background: rgba(255, 255, 255, 0.5);
+					transition: all 0.3s;
+
+					&.active {
+						width: 24rpx;
+						border-radius: 6rpx;
+						background: #fff;
+					}
+				}
 			}
 		}
 
-		.project-card {
-			padding-bottom: 15rpx;
+		.content {
+			background: #f2f6f2;
+			padding: 20rpx;
 
-			.project-title {
-				font-size: 36rpx;
-				color: 1f1f1f;
-				font-family: "PingFang SC-Bold";
-				font-weight: 400;
-			}
+			.section {
+				background: #fff;
+				border-radius: 12rpx;
+				padding: 16rpx;
+				padding-bottom: 20rpx;
+				margin: 12rpx 0;
 
-			.progress-bar-wrap {
-				display: flex;
-				align-items: center;
-				font-size: 20rpx;
-				color: #1F1F1F;
-				padding-top: 30rpx;
-				padding-bottom: 14rpx;
+				.section-title {
+					font-size: 28rpx;
+					font-family: 'PingFang SC-Medium';
+					margin-bottom: 6rpx;
+				}
 
-				.progress-percent {
-					padding-left: 12rpx;
+				.section-content {
+					color: #333;
+					font-size: 24rpx;
+					line-height: 1.8;
+				}
+
+				.intro-img {
+					width: 100%;
+					margin: 0;
+					padding: 0;
+					margin-bottom: -10rpx;
 				}
 			}
 
-			.project-stats {
-				display: flex;
-				justify-content: space-between;
-				padding-top: 0;
+			.project-card {
+				padding-bottom: 15rpx;
+
+				.project-title {
+					font-size: 36rpx;
+					color: 1f1f1f;
+					font-family: "PingFang SC-Bold";
+					font-weight: 400;
+				}
 
-				.stat-block {
+				.progress-bar-wrap {
 					display: flex;
-					flex-direction: column;
 					align-items: center;
-					text-align: center;
-					justify-content: center;
+					font-size: 20rpx;
 					color: #1F1F1F;
+					padding-top: 30rpx;
+					padding-bottom: 14rpx;
 
-					&:first-child {
-						align-items: flex-start;
+					.progress-percent {
+						padding-left: 12rpx;
 					}
+				}
 
-					&:last-child {
+				.project-stats {
+					display: flex;
+					justify-content: space-between;
+					padding-top: 0;
+
+					.stat-block {
 						display: flex;
 						flex-direction: column;
 						align-items: center;
@@ -424,400 +505,412 @@ export default {
 						}
 
 						&:last-child {
-							align-items: flex-end;
-						}
+							display: flex;
+							flex-direction: column;
+							align-items: center;
+							text-align: center;
+							justify-content: center;
+							color: #1F1F1F;
+
+							&:first-child {
+								align-items: flex-start;
+							}
 
-						.stat-main {
-							font-size: 28rpx;
+							&:last-child {
+								align-items: flex-end;
+							}
 
-							&.amountOfMoney {
-								font-size: 32rpx;
-								font-family: "PingFang SC-Bold";
+							.stat-main {
+								font-size: 28rpx;
+
+								&.amountOfMoney {
+									font-size: 32rpx;
+									font-family: "PingFang SC-Bold";
+								}
 							}
-						}
 
-						.stat-sub {
-							font-size: 20rpx;
+							.stat-sub {
+								font-size: 20rpx;
+							}
 						}
 					}
 				}
 			}
-		}
-
-		.project-update {
-			background: transparent;
-			height: 166rpx;
-			display: flex;
-			width: 100%;
-			justify-content: space-between;
-			padding: 0;
-
-			>view {
-				border-radius: 12rpx;
-				background: #fff;
-				flex-shrink: 0;
-			}
 
-			.project-update-left {
-				width: 590rpx;
-				height: 100%;
-				padding: 16rpx;
+			.project-update {
+				background: transparent;
+				height: 166rpx;
+				display: flex;
+				width: 100%;
+				justify-content: space-between;
+				padding: 0;
 
-				.project-update-left-title {
-					display: flex;
-					justify-content: space-between;
-					align-items: center;
-					font-size: 22rpx;
+				>view {
+					border-radius: 12rpx;
+					background: #fff;
+					flex-shrink: 0;
 				}
 
-				.project-update-left-content {
-					display: flex;
-					align-items: center;
-					margin-top: 8rpx;
+				.project-update-left {
+					width: 590rpx;
+					height: 100%;
+					padding: 16rpx;
 
-					>view {
-						font-size: 24rpx;
-						font-weight: 400;
-						font-family: "PingFang SC-Bold";
+					.project-update-left-title {
+						display: flex;
+						justify-content: space-between;
+						align-items: center;
+						font-size: 22rpx;
 					}
 
-					.image {
-						width: 180rpx;
-						height: 78rpx;
-						overflow: hidden;
-						margin-left: 26rpx;
-						border-radius: 8rpx;
+					.project-update-left-content {
+						display: flex;
+						align-items: center;
+						margin-top: 8rpx;
+
+						>view {
+							font-size: 24rpx;
+							font-weight: 400;
+							font-family: "PingFang SC-Bold";
+						}
 
-						image {
+						.image {
+							width: 180rpx;
+							height: 78rpx;
 							overflow: hidden;
-							width: 100%;
+							margin-left: 26rpx;
+							border-radius: 8rpx;
+
+							image {
+								overflow: hidden;
+								width: 100%;
+							}
 						}
 					}
-				}
 
-			}
+				}
 
-			.project-update-right {
-				width: 108rpx;
-				height: 100%;
-				font-size: 22rpx;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				flex-direction: column;
+				.project-update-right {
+					width: 108rpx;
+					height: 100%;
+					font-size: 22rpx;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					flex-direction: column;
 
-				image {
-					margin-top: 12rpx;
-					width: 28rpx;
-					height: 28rpx;
+					image {
+						margin-top: 12rpx;
+						width: 28rpx;
+						height: 28rpx;
+					}
 				}
 			}
-		}
 
-		.poster {
-			padding: 0;
-			padding-top: 16rpx;
+			.poster {
+				padding: 0;
+				padding-top: 16rpx;
+			}
 		}
-	}
-
-	.comment {
-		border-radius: 12rpx;
-		background: #fff;
-		margin-top: 24rpx;
-		padding: 0 0 16rpx 0;
 
-		.comment-title {
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			font-size: 26rpx;
-			color: #333;
-			padding: 18rpx 20rpx 0 20rpx;
+		.comment {
+			border-radius: 12rpx;
+			background: #fff;
+			margin-top: 24rpx;
+			padding: 0 0 16rpx 0;
 
-			.comment-more {
-				color: #999;
-				font-size: 22rpx;
+			.comment-title {
 				display: flex;
+				justify-content: space-between;
 				align-items: center;
+				font-size: 26rpx;
+				color: #333;
+				padding: 18rpx 20rpx 0 20rpx;
 
-				image {
-					width: 20rpx;
-					height: 20rpx;
-					margin-left: 4rpx;
+				.comment-more {
+					color: #999;
+					font-size: 22rpx;
+					display: flex;
+					align-items: center;
+
+					image {
+						width: 20rpx;
+						height: 20rpx;
+						margin-left: 4rpx;
+					}
 				}
 			}
-		}
 
-		.comment-content {
-			padding: 0 20rpx;
+			.comment-content {
+				padding: 0 20rpx;
 
-			.comment-item {
-				display: flex;
-				align-items: flex-start;
-				padding: 18rpx 0 0 0;
-				border-bottom: 1rpx solid #f5f5f5;
+				.comment-item {
+					display: flex;
+					align-items: flex-start;
+					padding: 18rpx 0 0 0;
+					border-bottom: 1rpx solid #f5f5f5;
 
-				&:last-child {
-					border-bottom: none;
-				}
+					&:last-child {
+						border-bottom: none;
+					}
 
-				.comment-avatar {
-					width: 48rpx;
-					height: 48rpx;
-					border-radius: 50%;
-					margin-right: 16rpx;
-					flex-shrink: 0;
-				}
+					.comment-avatar {
+						width: 48rpx;
+						height: 48rpx;
+						border-radius: 50%;
+						margin-right: 16rpx;
+						flex-shrink: 0;
+					}
 
-				.comment-item-main {
-					flex: 1;
-					display: flex;
-					flex-direction: column;
+					.comment-item-main {
+						flex: 1;
+						display: flex;
+						flex-direction: column;
 
-					.comment-item-content {
-						color: #1f1f1f;
-						font-size: 24rpx;
-						line-height: 1.7;
-						margin-bottom: 8rpx;
-						display: -webkit-box;
-						-webkit-line-clamp: 2;
-						-webkit-box-orient: vertical;
-						overflow: hidden;
-						text-overflow: ellipsis;
-						word-break: break-all;
+						.comment-item-content {
+							color: #1f1f1f;
+							font-size: 24rpx;
+							line-height: 1.7;
+							margin-bottom: 8rpx;
+							display: -webkit-box;
+							-webkit-line-clamp: 2;
+							-webkit-box-orient: vertical;
+							overflow: hidden;
+							text-overflow: ellipsis;
+							word-break: break-all;
+						}
 					}
-				}
 
-				.comment-item-like {
-					display: flex;
-					align-items: center;
-					margin-left: 36rpx;
+					.comment-item-like {
+						display: flex;
+						align-items: center;
+						margin-left: 36rpx;
 
-					.like-icon {
-						width: 28rpx;
-						height: 28rpx;
-						margin-right: 4rpx;
-					}
+						.like-icon {
+							width: 28rpx;
+							height: 28rpx;
+							margin-right: 4rpx;
+						}
 
-					.like-num {
-						font-size: 22rpx;
-						color: #888;
+						.like-num {
+							font-size: 22rpx;
+							color: #888;
+						}
 					}
 				}
 			}
 		}
-	}
-
-	.bottom-bar-reserveASeat {
-		width: 100%;
-		height: calc(12rpx + 88rpx + var(--window-bottom) + 30rpx);
-	}
 
-	.bottom-bar {
-		position: fixed;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		z-index: 999;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		background: #fff;
-		padding: 14rpx 40rpx;
-		padding-bottom: calc(14rpx + var(--window-bottom));
-		box-sizing: border-box;
+		.bottom-bar-reserveASeat {
+			width: 100%;
+			height: calc(12rpx + 88rpx + var(--window-bottom) + 30rpx);
+		}
 
-		.bottom-bar-left {
+		.bottom-bar {
+			position: fixed;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			z-index: 999;
 			display: flex;
 			align-items: center;
-			gap: 32rpx;
+			justify-content: space-between;
+			background: #fff;
+			padding: 14rpx 40rpx;
+			padding-bottom: calc(14rpx + var(--window-bottom));
+			box-sizing: border-box;
 
-			.bar-btn {
+			.bottom-bar-left {
 				display: flex;
-				flex-direction: column;
 				align-items: center;
-				justify-content: center;
-				width: 80rpx;
-				height: 80rpx;
-				border-radius: 12rpx;
+				gap: 32rpx;
 
-				.bar-icon {
-					width: 48rpx;
-					height: 48rpx;
-					margin-bottom: 4rpx;
-				}
+				.bar-btn {
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					justify-content: center;
+					width: 80rpx;
+					height: 80rpx;
+					border-radius: 12rpx;
+
+					.bar-icon {
+						width: 48rpx;
+						height: 48rpx;
+						margin-bottom: 4rpx;
+					}
 
-				.bar-text {
-					font-size: 20rpx;
-					color: #1f1f1f;
-					font-family: "PingFang SC";
+					.bar-text {
+						font-size: 20rpx;
+						color: #1f1f1f;
+						font-family: "PingFang SC";
+					}
 				}
 			}
-		}
 
 
-		.buy-btn {
-			width: 500rpx;
-			height: 88rpx;
-			background: #1f1f1f;
-			color: #ACF934;
-			font-size: 32rpx;
-			border-radius: 80rpx;
-			border: none;
-			font-weight: bold;
-			text-align: center;
-			line-height: 80rpx;
-			margin-left: 24rpx;
-		}
+			.buy-btn {
+				width: 500rpx;
+				height: 88rpx;
+				background: #1f1f1f;
+				color: #ACF934;
+				font-size: 32rpx;
+				border-radius: 80rpx;
+				border: none;
+				font-weight: bold;
+				text-align: center;
+				line-height: 80rpx;
+				margin-left: 24rpx;
+			}
 
+		}
 	}
-}
-
-.back-top {
-	position: fixed;
-	bottom: calc(126rpx + var(--window-bottom));
-	right: 16rpx;
-	width: 82rpx;
-	height: 82rpx;
-}
-
-.initiator-bar {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	background: #fff;
-	border-radius: 10rpx;
-	padding: 18rpx 24rpx 18rpx 18rpx;
-	margin: 0;
-
-	.initiator-avatar {
-		width: 64rpx;
-		height: 64rpx;
-		border-radius: 50%;
-		margin-right: 18rpx;
-		flex-shrink: 0;
+
+	.back-top {
+		position: fixed;
+		bottom: calc(126rpx + var(--window-bottom));
+		right: 16rpx;
+		width: 82rpx;
+		height: 82rpx;
 	}
 
-	.initiator-info {
+	.initiator-bar {
 		display: flex;
 		align-items: center;
-		flex: 1;
-		min-width: 0;
-	}
+		justify-content: space-between;
+		background: #fff;
+		border-radius: 10rpx;
+		padding: 18rpx 24rpx 18rpx 18rpx;
+		margin: 0;
 
-	.initiator-name {
-		font-size: 30rpx;
-		color: #222;
-		font-weight: bold;
-		margin-right: 12rpx;
-		max-width: 260rpx;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
+		.initiator-avatar {
+			width: 64rpx;
+			height: 64rpx;
+			border-radius: 50%;
+			margin-right: 18rpx;
+			flex-shrink: 0;
+		}
 
-	.initiator-tag {
-		background: #1a1a1a;
-		color: #b6ff4b;
-		font-size: 20rpx;
-		border-radius: 8rpx;
-		padding: 2rpx 12rpx;
-		margin-left: 2rpx;
-	}
+		.initiator-info {
+			display: flex;
+			align-items: center;
+			flex: 1;
+			min-width: 0;
+		}
 
-	.initiator-service-btn {
-		display: flex;
-		align-items: center;
-		background: #1a1a1a;
-		color: #b6ff4b;
-		font-size: 28rpx;
-		border-radius: 128rpx;
-		padding: 0 24rpx 0 12rpx;
-		height: 56rpx;
-		margin-left: 18rpx;
-		font-weight: bold;
-	}
+		.initiator-name {
+			font-size: 30rpx;
+			color: #222;
+			font-weight: bold;
+			margin-right: 12rpx;
+			max-width: 260rpx;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
 
-	.service-icon {
-		width: 32rpx;
-		height: 32rpx;
-		margin-right: 8rpx;
-	}
-}
+		.initiator-tag {
+			background: #1a1a1a;
+			color: #b6ff4b;
+			font-size: 20rpx;
+			border-radius: 8rpx;
+			padding: 2rpx 12rpx;
+			margin-left: 2rpx;
+		}
 
-.scale-tap {
-	transition: transform 0.15s;
-}
+		.initiator-service-btn {
+			display: flex;
+			align-items: center;
+			background: #1a1a1a;
+			color: #b6ff4b;
+			font-size: 28rpx;
+			border-radius: 128rpx;
+			padding: 0 24rpx 0 12rpx;
+			height: 56rpx;
+			margin-left: 18rpx;
+			font-weight: bold;
+		}
+
+		.service-icon {
+			width: 32rpx;
+			height: 32rpx;
+			margin-right: 8rpx;
+		}
+	}
 
-.scale-tap:active {
-	transform: scale(0.92);
-}
+	.scale-tap {
+		transition: transform 0.15s;
+	}
 
-.risk-section {
-	background: #fff;
-	border-radius: 12rpx;
-	margin: 24rpx 0 0 0;
-	padding: 0 0 18rpx 0;
-	position: relative;
-	overflow: hidden;
+	.scale-tap:active {
+		transform: scale(0.92);
+	}
 
-	.risk-row {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 18rpx 24rpx 0 0rpx;
-		font-size: 28rpx;
-		color: #1f1f1f;
+	.risk-section {
 		background: #fff;
+		border-radius: 12rpx;
+		margin: 24rpx 0 0 0;
+		padding: 0 0 18rpx 0;
+		position: relative;
+		overflow: hidden;
+
+		.risk-row {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: 18rpx 24rpx 0 0rpx;
+			font-size: 28rpx;
+			color: #1f1f1f;
+			background: #fff;
 
-		&.risk-row-border {
-			border-top: 1rpx solid #f2f2f2;
-			margin-top: 18rpx;
-			padding-top: 18rpx;
+			&.risk-row-border {
+				border-top: 1rpx solid #f2f2f2;
+				margin-top: 18rpx;
+				padding-top: 18rpx;
+			}
 		}
-	}
 
-	.risk-title {
-		font-size: 28rpx;
-		color: #1f1f1f;
-		font-family: 'PingFang SC-Bold';
-		font-weight: 400;
+		.risk-title {
+			font-size: 28rpx;
+			color: #1f1f1f;
+			font-family: 'PingFang SC-Bold';
+			font-weight: 400;
 
-	}
+		}
 
-	.risk-more {
-		color: #1f1f1f;
-		font-size: 24rpx;
-		display: flex;
-		align-items: center;
-		font-weight: 400;
-		font-family: 'PingFang SC-Bold';
-
-		.risk-more-icon {
-			width: 24rpx;
-			height: 24rpx;
-			margin-left: 4rpx;
-			margin-top: 4rpx;
+		.risk-more {
+			color: #1f1f1f;
+			font-size: 24rpx;
+			display: flex;
+			align-items: center;
+			font-weight: 400;
+			font-family: 'PingFang SC-Bold';
+
+			.risk-more-icon {
+				width: 24rpx;
+				height: 24rpx;
+				margin-left: 4rpx;
+				margin-top: 4rpx;
+			}
 		}
-	}
 
-	.risk-desc {
-		font-size: 24rpx;
-		color: #999;
-		padding: 8rpx 24rpx 0 0;
-		font-family: 'PingFang SC-Regular';
-	}
+		.risk-desc {
+			font-size: 24rpx;
+			color: #999;
+			padding: 8rpx 24rpx 0 0;
+			font-family: 'PingFang SC-Regular';
+		}
 
-	.risk-content {
-		font-size: 24rpx;
-		color: #999;
-		padding: 12rpx 24rpx 0 0;
-		font-family: 'PingFang SC-Regular';
-		line-height: 1.7;
+		.risk-content {
+			font-size: 24rpx;
+			color: #999;
+			padding: 12rpx 24rpx 0 0;
+			font-family: 'PingFang SC-Regular';
+			line-height: 1.7;
 
-		>view {
-			margin-bottom: 6rpx;
+			>view {
+				margin-bottom: 6rpx;
+			}
 		}
 	}
-}
-</style>
+</style>

pages/crowdFunding/customerService.vue

@@ -10,49 +10,61 @@
 				</view>
 			</view>
 
-			<view class="navbar-right" @click="showActionSheet">
-				<image src="@/static/icon/more2.png" style="width: 64rpx;height: 64rpx;  margin-top: 15rpx;"
+			<view class="navbar-right" @click="toggleDropdown">
+				<image src="@/static/icon/more2.png" style="width: 64rpx; height: 64rpx; margin-top: 15rpx"
 					mode="widthFix"></image>
+
+				<view class="dropdown-menu" v-if="showDropdown">
+					<view class="dropdown-item" @tap="handleOption('report')">举报内容</view> 
+				</view>
+
 			</view>
 		</view>
 
-
 		<!-- 聊天内容区 -->
 		<scroll-view class="cs-chat-list" :scroll-y="true" :scroll-with-animation="true"
-			:scroll-into-view="scrollToView"
-			:style="{ paddingBottom: (keyboardHeight ? keyboardHeight + 100 : 100) + 'rpx' }">
+			:scroll-into-view="scrollToView" :style="{
+				paddingBottom: (keyboardHeight ? keyboardHeight + 100 : 100) + 'rpx',
+			}">
 			<view v-for="(msg, idx) in chatList" :key="msg.id">
 				<view v-if="shouldShowTime(idx)" class="cs-time-bar">
 					<view class="cs-time-inner">{{ formatTime(msg.time) }}</view>
 				</view>
 				<template v-if="msg.type === 'orderCard'">
-					<view class="cs-msg-order-card">
-						<image class="order-card-img" :src="msg.order.img" mode="aspectFill" />
-						<view class="order-card-info">
-							<view class="order-card-title">{{ msg.order.title }}</view>
-							<view class="order-card-row">
-								<text class="order-card-label">订单编号</text>
-								<text class="order-card-value">{{ msg.order.orderNo }}</text>
-							</view>
-							<view class="order-card-row">
-								<text class="order-card-label">下单时间</text>
-								<text class="order-card-value">{{ msg.order.orderTime }}</text>
-							</view>
-							<view class="order-card-btn-box">
-								<button class="order-card-btn">查看详情</button>
+					<view class="cs-msg-order-card-box">
+						<image class="order-card-avatar" :src="msg.avatar" />
+						<view class="cs-msg-order-card">
+							<image class="order-card-img" :src="msg.order.img" mode="aspectFill" />
+							<view class="order-card-info">
+								<view class="order-card-title">{{ msg.order.title }}</view>
+								<view class="order-card-row">
+									<text class="order-card-label">订单编号</text>
+									<text class="order-card-value">{{ msg.order.orderNo }}</text>
+								</view>
+								<view class="order-card-row">
+									<text class="order-card-label">下单时间</text>
+									<text class="order-card-value">{{
+										msg.order.orderTime
+									}}</text>
+								</view>
+								<view class="order-card-btn-box">
+									<button class="order-card-btn">查看详情</button>
+								</view>
 							</view>
 						</view>
-						<image class="order-card-avatar" :src="msg.avatar" />
 					</view>
 				</template>
 				<template v-else>
-					<view :id="'msg-' + msg.id"
-						:class="['cs-msg-item', msg.type === 'user' ? 'cs-msg-self' : 'cs-msg-other']">
+					<view :id="'msg-' + msg.id" :class="[
+						'cs-msg-item',
+						msg.type === 'user' ? 'cs-msg-self' : 'cs-msg-other',
+					]">
 						<image class="cs-avatar" :src="msg.avatar" />
 						<view class="cs-msg-bubble">{{ msg.content }}</view>
 					</view>
 				</template>
 			</view>
+			<view style="height: 200rpx; width: 100%"></view>
 			<view :id="'bottom-anchor'"></view>
 			<view v-if="adShow" :style="{ height: orderCardHeight + 'rpx' }"></view>
 		</scroll-view>
@@ -66,9 +78,13 @@
 					<view class="order-card-info">
 						<view class="order-card-title one-omit">【Woh】灯塔 塔罗牌 治愈风泛伟特系</view>
 						<view class="order-card-btn-box">
-							<button class="order-card-btn" @click="sendOrderCardMsg()">发给客服</button></view>
-					</view> 
-					<image class="order-card-close" @click="closeOrderCard" src="@/static/icon/wd_icon_guanbi.png"   mode="widthFix"></image>
+							<button class="order-card-btn" @click="sendOrderCardMsg()">
+								发给客服
+							</button>
+						</view>
+					</view>
+					<image class="order-card-close" @click="closeOrderCard" src="@/static/icon/wd_icon_guanbi.png"
+						mode="widthFix"></image>
 				</view>
 				<view class="order-card-row">
 					<text class="order-card-label">订单编号</text>
@@ -81,25 +97,15 @@
 			</view>
 
 			<view class="cs-input-area">
-				<textarea
-					class="cs-textarea"
-					v-model="inputValue"
-					placeholder="在这里输入新消息"
-					:focus="inputFocused"
-					:adjust-position="false"
-					@focus="onInputFocus"
-					@blur="onInputBlur"
-					@keyboardheightchange="onKeyboardHeightChange"
-					maxlength="300"
-					auto-height
-					:style="{ 'max-height': '120rpx', 'overflow-y': 'auto' }"
-				></textarea>
+				<textarea class="cs-textarea" v-model="inputValue" placeholder="在这里输入新消息" :focus="inputFocused"
+					:adjust-position="false" @focus="onInputFocus" @blur="onInputBlur"
+					@keyboardheightchange="onKeyboardHeightChange" maxlength="300" auto-height
+					:style="{ 'max-height': '120rpx', 'overflow-y': 'auto' }"></textarea>
 				<view class="emoji-trigger" @tap="toggleEmojiPanel">
 					<text class="fa fa-smile-o"></text>
 				</view>
 				<view class="send_btn" @tap="sendMsg">发送</view>
 			</view>
-		 
 		</view>
 
 		<view class="emoji-panel" :class="{ show: showEmojiPanel }" v-if="showEmojiPanel">
@@ -113,41 +119,109 @@
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
+export default {
+	data() {
+		return {
 			chatList: [
-				{ id: 1, content: '哈哈哈哈哈哈哈哈红红火火恍恍惚惚', type: 'customerService', avatar: '/static/home/avator.png', time: '2025-05-21 20:01' },
-				{ id: 2, content: '哈哈哈哈哈哈哈哈红红火火恍恍惚惚', type: 'customerService', avatar: '/static/home/avator.png', time: '2025-05-21 20:05' },
-				{ id: 3, content: '你好请问可以怎么帮助你', type: 'user', avatar: '/static/makedetail/characterProfilePicture.png', time: '2025-05-21 20:10' }, { id: 4, content: '哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚', type: 'user', avatar: '/static/makedetail/characterProfilePicture.png', time: '2025-05-21 20:10' },
-				{ id: 5, content: '哈哈哈哈哈哈哈哈红红火火恍恍惚惚', type: 'customerService', avatar: '/static/home/avator.png', time: '2025-05-21 20:01' },
-				{ id: 6, content: '哈哈哈哈哈哈哈哈红红火火恍恍惚惚', type: 'customerService', avatar: '/static/home/avator.png', time: '2025-05-21 20:05' },
-				 { id: 7, content: '哈哈哈哈哈哈哈哈红红火火恍恍惚惚', type: 'customerService', avatar: '/static/home/avator.png', time: '2025-05-21 20:01' },
-				{ id: 8, content: '哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚', type: 'customerService', avatar: '/static/home/avator.png', time: '2025-05-21 20:05' },
-				{ id:9, content: '你好请问可以怎么帮助你', type: 'user', avatar: '/static/makedetail/characterProfilePicture.png', time: '2025-05-21 21:10' }, { id: 13, content: '你好请问可以怎么帮助你', type: 'user', avatar: '/static/makedetail/characterProfilePicture.png', time: '2025-05-21 20:10' },
-				{ id: 10, content: '哈哈哈哈哈哈哈哈红红火火恍恍惚惚', type: 'customerService', avatar: '/static/home/avator.png', time: '2025-05-21 20:01' },
-				{ id: 11, content: '哈哈哈哈哈哈哈哈红红火火恍恍惚惚', type: 'customerService', avatar: '/static/home/avator.png', time: '2025-05-21 23:05' }
+				{
+					id: 1,
+					content: "哈哈哈哈哈哈哈哈红红火火恍恍惚惚",
+					type: "customerService",
+					avatar: "/static/home/avator.png",
+					time: "2025-05-21 20:01",
+				},
+				{
+					id: 2,
+					content: "哈哈哈哈哈哈哈哈红红火火恍恍惚惚",
+					type: "customerService",
+					avatar: "/static/home/avator.png",
+					time: "2025-05-21 20:05",
+				},
+				{
+					id: 3,
+					content: "你好请问可以怎么帮助你",
+					type: "user",
+					avatar: "/static/makedetail/characterProfilePicture.png",
+					time: "2025-05-21 20:10",
+				},
+				{
+					id: 4,
+					content:
+						"哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚",
+					type: "user",
+					avatar: "/static/makedetail/characterProfilePicture.png",
+					time: "2025-05-21 20:10",
+				},
+				{
+					id: 5,
+					content: "哈哈哈哈哈哈哈哈红红火火恍恍惚惚",
+					type: "customerService",
+					avatar: "/static/home/avator.png",
+					time: "2025-05-21 20:01",
+				},
+				{
+					id: 6,
+					content: "哈哈哈哈哈哈哈哈红红火火恍恍惚惚",
+					type: "customerService",
+					avatar: "/static/home/avator.png",
+					time: "2025-05-21 20:05",
+				},
+				{
+					id: 7,
+					content: "哈哈哈哈哈哈哈哈红红火火恍恍惚惚",
+					type: "customerService",
+					avatar: "/static/home/avator.png",
+					time: "2025-05-21 20:01",
+				},
+				{
+					id: 8,
+					content:
+						"哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚",
+					type: "customerService",
+					avatar: "/static/home/avator.png",
+					time: "2025-05-21 20:05",
+				},
+				{
+					id: 9,
+					content: "你好请问可以怎么帮助你",
+					type: "user",
+					avatar: "/static/makedetail/characterProfilePicture.png",
+					time: "2025-05-21 21:10",
+				},
+				{
+					id: 13,
+					content: "你好请问可以怎么帮助你",
+					type: "user",
+					avatar: "/static/makedetail/characterProfilePicture.png",
+					time: "2025-05-21 20:10",
+				},
+				{
+					id: 10,
+					content: "哈哈哈哈哈哈哈哈红红火火恍恍惚惚",
+					type: "customerService",
+					avatar: "/static/home/avator.png",
+					time: "2025-05-21 20:01",
+				},
+				{
+					id: 11,
+					content: "哈哈哈哈哈哈哈哈红红火火恍恍惚惚",
+					type: "customerService",
+					avatar: "/static/home/avator.png",
+					time: "2025-05-21 23:05",
+				},
 			],
-			inputValue: '',
+			inputValue: "",
 			pollTimer: null,
-			scrollToView: 'bottom-anchor',
+			scrollToView: "bottom-anchor",
 			adShow: true,
 			keyboardHeight: 0,
 			inputFocused: false,
 			orderCardHeight: 260, // rpx，实际高度可根据广告条内容微调
 			showEmojiPanel: false,
-			emojiList: [
-				'😀','😁','😂','🤣','😃','😄','😅','😆','😉','😊','😋','😎','😍','😘','🥰','😗','😙','😚','🙂','🤗',
-				'🤩','🤔','🤨','😐','😑','😶','🙄','😏','😣','😥','😮','🤐','😯','😪','😫','🥱','😴','😌','😛','😜',
-				'😝','🤤','😒','😓','😔','😕','🙃','🤑','😲','☹️','🙁','😖','😞','😟','😤','😢','😭','😦','😧','😨',
-				'😩','🤯','😬','😰','😱','🥵','🥶','😳','🤪','😵','😡','😠','🤬','😷','🤒','🤕','🤢','🤮','🥴','😇',
-				'🥳','🥺','🤠','😈','👿','👹','👺','💀','👻','👽','🤖','💩','😺','😸','😹','😻','😼','😽','🙀','😿',
-				'😾','🙈','🙉','🙊','💋','💌','💘','💝','💖','💗','💓','💞','💕','💟','❣️','💔','❤️','🧡','💛','💚',
-				'💙','💜','🤎','🖤','🤍','💯','💢','💥','💫','💦','💨','🕳️','💣','💬','👋','🤚','🖐️','✋','🖖','👌',
-				'🤏','✌️','🤞','🤟','🤘','🤙','👈','👉','👆','🖕','👇','☝️','👍','👎','✊','👊','🤛','🤜','👏','🙌',
-				'👐','🤲','🙏','✍️','💅','🤳','💪','🦾','🦵','🦶','👂','👃','🧠','🦷','🦴','👀','👁️','👅','👄'
+			showDropdown: false, // 控制下拉菜单显示状态 
+			emojiList: ["😀", "😁", "😂", "🤣", "😃", "😄", "😅", "😆", "😉", "😊", "😋", "😎", "😍", "😘", "🥰", "😗", "😙", "😚", "🙂", "🤗", "🤩", "🤔", "🤨", "😐", "😑", "😶", "🙄", "😏", "😣", "😥", "😮", "🤐", "😯", "😪", "😫", "🥱", "😴", "😌", "😛", "😜", "😝", "🤤", "😒", "😓", "😔", "😕", "🙃", "🤑", "😲", "☹️", "🙁", "😖", "😞", "😟", "😤", "😢", "😭", "😦", "😧", "😨", "😩", "🤯", "😬", "😰", "😱", "🥵", "🥶", "😳", "🤪", "😵", "😡", "😠", "🤬", "😷", "🤒", "🤕", "🤢", "🤮", "🥴", "😇", "🥳", "🥺", "🤠", "😈", "👿", "👹", "👺", "💀", "👻", "👽", "🤖", "💩", "😺", "😸", "😹", "😻", "😼", "😽", "🙀", "😿", "😾", "🙈", "🙉", "🙊", "💋", "💌", "💘", "💝", "💖", "💗", "💓", "💞", "💕", "💟", "❣️", "💔", "❤️", "🧡", "💛", "💚", "💙", "💜", "🤎", "🖤", "🤍", "💯", "💢", "💥", "💫", "💦", "💨", "🕳️", "💣", "💬", "👋", "🤚", "🖐️", "✋", "🖖", "👌", "🤏", "✌️", "🤞", "🤟", "🤘", "🤙", "👈", "👉", "👆", "🖕", "👇", "☝️", "👍", "👎", "✊", "👊", "🤛", "🤜", "👏", "🙌", "👐", "🤲", "🙏", "✍️", "💅", "🤳", "💪", "🦾", "🦵", "🦶", "👂", "👃", "🧠", "🦷", "🦴", "👀", "👁️", "👅", "👄",
 			],
-		}
+		};
 	},
 	onShow() {
 		this.startPolling();
@@ -181,7 +255,7 @@
 			// this.chatList.push(...)
 			// 滚动到底部
 			this.$nextTick(() => {
-				this.scrollToView = 'bottom-anchor';
+				this.scrollToView = "bottom-anchor";
 			});
 		},
 		sendMsg() {
@@ -189,12 +263,12 @@
 			this.chatList.push({
 				id: Date.now(),
 				content: this.inputValue,
-				type: 'user',
-				avatar: '/static/avatar/cs2.png'
+				type: "user",
+				avatar: "/static/avatar/cs2.png",
 			});
-			this.inputValue = '';
+			this.inputValue = "";
 			this.$nextTick(() => {
-				this.scrollToView = 'bottom-anchor';
+				this.scrollToView = "bottom-anchor";
 			});
 			// TODO: 发送消息到后端接口
 		},
@@ -212,23 +286,26 @@
 				}
 			}
 			if (lastShowIdx === -1) return true;
-			const curTime = new Date(this.chatList[idx].time.replace(/-/g, '/')).getTime();
-			const lastTime = new Date(this.chatList[lastShowIdx].time.replace(/-/g, '/')).getTime();
+			const curTime = new Date(
+				this.chatList[idx].time.replace(/-/g, "/")
+			).getTime();
+			const lastTime = new Date(
+				this.chatList[lastShowIdx].time.replace(/-/g, "/")
+			).getTime();
 			// 20分钟 = 20*60*1000 毫秒
-			return (curTime - lastTime) > 20 * 60 * 1000;
+			return curTime - lastTime > 20 * 60 * 1000;
 		},
 		formatTime(timeStr) {
 			// 例：'2025-05-21 20:01' => '05月21日 20:01'
-			if (!timeStr) return '';
-			const d = new Date(timeStr.replace(/-/g, '/'));
-			const MM = String(d.getMonth() + 1).padStart(2, '0');
-			const DD = String(d.getDate()).padStart(2, '0');
+			if (!timeStr) return "";
+			const d = new Date(timeStr.replace(/-/g, "/"));
+			const MM = String(d.getMonth() + 1).padStart(2, "0");
+			const DD = String(d.getDate()).padStart(2, "0");
 			const hhmm = timeStr.slice(11, 16);
 			return `${MM}月${DD}日 ${hhmm}`;
 		},
 		onInputFocus(e) {
 			this.inputFocused = true;
-
 		},
 		onInputBlur(e) {
 			this.inputFocused = false;
@@ -237,10 +314,10 @@
 		px2rpx(px) {
 			// 以750设计稿为例，1rpx = 屏幕宽度/750
 			const screenWidth = uni.getSystemInfoSync().windowWidth;
-			return px * 750 / screenWidth;
+			return (px * 750) / screenWidth;
 		},
 		onKeyboardHeightChange(e) {
-			let pxHeight = e.detail ? e.detail.height : (e.height || 0);
+			let pxHeight = e.detail ? e.detail.height : e.height || 0;
 			// #ifdef H5 || APP-PLUS
 			this.keyboardHeight = this.px2rpx(pxHeight);
 			// #endif
@@ -261,27 +338,47 @@
 		sendOrderCardMsg() {
 			this.chatList.push({
 				id: Date.now(),
-				type: 'orderCard',
-				avatar: '/static/makedetail/characterProfilePicture.png', // 用户头像
+				type: "orderCard",
+				avatar: "/static/makedetail/characterProfilePicture.png", // 用户头像
 				order: {
-					img: '/static/crowdFunding/top-img.png',
-					title: '【Woh】灯塔 塔罗牌 治愈风泛伟特系',
-					orderNo: '12201544521215415415415',
-					orderTime: '2025-05-27 09:35:30'
+					img: "/static/crowdFunding/top-img.png",
+					title: "【Woh】灯塔 塔罗牌 治愈风泛伟特系",
+					orderNo: "12201544521215415415415",
+					orderTime: "2025-05-27 09:35:30",
 				},
-				time: this.getNowTime()
+				time: this.getNowTime(),
 			});
 			this.$nextTick(() => {
-				this.scrollToView = 'bottom-anchor';
+				this.closeOrderCard();
+				setTimeout(() => {
+					this.scrollToView = "bottom-anchor";
+				}, 1000);
 			});
 		},
 		getNowTime() {
 			const d = new Date();
-			const pad = n => n < 10 ? '0' + n : n;
-			return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+			const pad = (n) => (n < 10 ? "0" + n : n);
+			return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(
+				d.getDate()
+			)} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
 		},
-		}
-	}
+		// 切换下拉菜单显示状态
+		toggleDropdown() {
+			this.showDropdown = !this.showDropdown;
+		},
+		// 处理下拉菜单选项点击
+		handleOption(type) {
+			this.showDropdown = false;
+			switch (type) {
+				case 'report':
+					uni.navigateTo({
+						url: '/pages/my/feedback?isReportContent=true'
+					});
+					break; 
+			}
+		},
+	},
+};
 </script>
 
 <style lang="scss">
@@ -292,7 +389,6 @@
 	flex-direction: column;
 	position: relative;
 
-
 	.custom-navbar {
 		display: flex;
 		flex-direction: row;
@@ -320,7 +416,7 @@
 
 			.navbar-title {
 				max-width: 450rpx;
-				font-family: 'PingFang SC-Bold';
+				font-family: "PingFang SC-Bold";
 				font-weight: 400;
 				font-size: 32rpx;
 				color: #1f1f1f;
@@ -328,7 +424,6 @@
 			}
 		}
 
-
 		.navbar-right {
 			width: 80rpx;
 			height: 80rpx;
@@ -343,11 +438,6 @@
 		}
 	}
 
-
-
-
-
-
 	.cs-chat-list {
 		flex: 1;
 		padding: 24rpx 0 0 0;
@@ -356,7 +446,7 @@
 
 		.cs-msg-item {
 			display: flex;
-			align-items: flex-end;
+			//   align-items: flex-end;
 			margin-bottom: 18rpx;
 			padding: 0 24rpx;
 
@@ -441,6 +531,7 @@
 		top: -280rpx;
 		font-size: 28rpx;
 		width: 670rpx;
+
 		.order-card-header {
 			display: flex;
 			align-items: flex-start;
@@ -459,7 +550,7 @@
 				display: flex;
 				flex-direction: column;
 				justify-content: flex-start;
-			
+
 				.order-card-title {
 					font-size: 30rpx;
 					color: #1f1f1f;
@@ -474,13 +565,13 @@
 					display: flex;
 					align-items: center;
 					justify-content: flex-end;
-					
+
 					.order-card-btn {
-						font-family: 'PingFang SC-Bold';
+						font-family: "PingFang SC-Bold";
 						font-weight: 400;
 						font-size: 24rpx;
-						color: #ACF934;
-						background: #1F1F1F;
+						color: #acf934;
+						background: #1f1f1f;
 						border-radius: 128rpx;
 						padding: 8rpx 14rpx;
 						line-height: 1.2;
@@ -492,7 +583,7 @@
 			.order-card-close {
 				position: absolute;
 				right: -10rpx;
-				top:-10rpx;
+				top: -10rpx;
 				font-size: 36rpx;
 				color: #1f1f1f;
 				background: #fff;
@@ -569,7 +660,7 @@
 			}
 
 			.send_btn {
-				background: #A6E22E;
+				background: #a6e22e;
 				color: #fff;
 				border-radius: 32rpx;
 				font-size: 28rpx;
@@ -592,19 +683,22 @@
 		padding: 12rpx 0 0 0;
 		border-top: 1rpx solid #ededed;
 		z-index: 1000;
-		box-shadow: 0 -4rpx 24rpx rgba(0,0,0,0.08);
+		box-shadow: 0 -4rpx 24rpx rgba(0, 0, 0, 0.08);
 		overflow-y: auto;
 		transform: translateY(100%);
-		transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
+		transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
 		border-top: 20rpx solid #fff;
+
 		&.show {
 			transform: translateY(0);
 		}
+
 		.emoji-grid {
 			display: flex;
 			flex-wrap: wrap;
 			justify-content: center;
 			padding-bottom: 24rpx;
+
 			.emoji-item {
 				width: 60rpx;
 				height: 60rpx;
@@ -614,91 +708,152 @@
 				font-size: 36rpx;
 				color: #333;
 				margin: 8rpx;
-				border-radius: 8rpx; 
+				border-radius: 8rpx;
 				padding: 8rpx;
 			}
 		}
 	}
 
-	.cs-msg-order-card {
-		position: relative;
+	.cs-msg-order-card-box {
 		display: flex;
-		flex-direction: row;
-		align-items: flex-start;
-		background: #fff;
-		border-radius: 20rpx;
-		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
-		padding: 24rpx 24rpx 18rpx 24rpx;
-		margin: 24rpx 0 0 0;
-		width: 600rpx;
-		min-height: 160rpx;
-		.order-card-img {
-			width: 100rpx;
-			height: 100rpx;
-			border-radius: 12rpx;
-			margin-right: 18rpx;
-			flex-shrink: 0;
+		flex-direction: row-reverse;
+
+		.order-card-avatar {
+			width: 64rpx;
+			height: 64rpx;
+			border-radius: 50%;
+			margin-left: 12rpx;
+			margin-right: 24rpx;
 		}
-		.order-card-info {
-			flex: 1;
+
+		.cs-msg-order-card {
+			position: relative;
 			display: flex;
-			flex-direction: column;
-			justify-content: flex-start;
-			.order-card-title {
-				font-size: 30rpx;
-				color: #1f1f1f;
-				font-weight: 500;
-				margin-bottom: 18rpx;
-				margin-top: 2rpx;
-				line-height: 1.3;
-				max-width: 350rpx;
-				word-break: break-all;
+			flex-direction: row;
+			align-items: flex-start;
+			background: #fff;
+			border-radius: 20rpx;
+			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+			padding: 24rpx 24rpx 18rpx 24rpx;
+			margin: 24rpx 0 0 0;
+			width: 600rpx;
+			min-height: 160rpx;
+
+			.order-card-img {
+				width: 100rpx;
+				height: 100rpx;
+				border-radius: 12rpx;
+				margin-right: 18rpx;
+				flex-shrink: 0;
+			}
+
+			.order-card-info {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+				justify-content: flex-start;
+
+				.order-card-title {
+					font-size: 30rpx;
+					color: #1f1f1f;
+					font-weight: 500;
+					margin-bottom: 18rpx;
+					margin-top: 2rpx;
+					line-height: 1.3;
+					max-width: 350rpx;
+					word-break: break-all;
+				}
+
+				.order-card-btn-box {
+					display: flex;
+					align-items: center;
+					justify-content: flex-end;
+					margin-top: 12rpx;
+
+					.order-card-btn {
+						font-family: "PingFang SC-Bold";
+						font-weight: 400;
+						font-size: 24rpx;
+						color: #1f1f1f;
+						background: #acf934;
+						border-radius: 128rpx;
+						padding: 8rpx 24rpx;
+						line-height: 1.2;
+						margin: 0;
+					}
+				}
 			}
-			.order-card-btn-box {
+
+			.order-card-row {
 				display: flex;
 				align-items: center;
-				justify-content: flex-end;
-				margin-top: 12rpx;
-				.order-card-btn {
-					font-family: 'PingFang SC-Bold';
-					font-weight: 400;
-					font-size: 24rpx;
-					color: #1F1F1F;
-					background: #ACF934;
-					border-radius: 128rpx;
-					padding: 8rpx 24rpx;
-					line-height: 1.2;
-					margin: 0;
+				margin-top: 8rpx;
+
+				.order-card-label {
+					color: #b2b2b2;
+					font-size: 26rpx;
+					width: 140rpx;
+					flex-shrink: 0;
+				}
+
+				.order-card-value {
+					color: #1f1f1f;
+					font-size: 26rpx;
+					margin-left: 12rpx;
+					word-break: break-all;
 				}
 			}
 		}
-		.order-card-row {
-			display: flex;
-			align-items: center;
-			margin-top: 8rpx;
-			.order-card-label {
-				color: #b2b2b2;
-				font-size: 26rpx;
-				width: 140rpx;
-				flex-shrink: 0;
+	}
+
+	.dropdown-menu {
+		position: absolute;
+		top: calc(100% + 10rpx);
+		right: 20rpx;
+		background-color: #ffffff;
+		border-radius: 20rpx;
+		padding: 0;
+		width: 200rpx;
+		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
+		z-index: 100;
+		transform-origin: top right;
+		animation: dropdownAnimation 0.2s ease-out;
+		overflow: hidden;
+
+		.dropdown-item {
+			padding: 24rpx 0;
+			color: #333333;
+			font-size: 28rpx;
+			position: relative;
+			text-align: center;
+
+			&:not(:last-child)::after {
+				content: '';
+				position: absolute;
+				left: 0;
+				right: 0;
+				bottom: 0;
+				height: 1rpx;
+				background-color: #EEEEEE;
 			}
-			.order-card-value {
-				color: #1f1f1f;
-				font-size: 26rpx;
-				margin-left: 12rpx;
-				word-break: break-all;
+
+			&:active {
+				background-color: #f8f8f8;
 			}
 		}
-		.order-card-avatar {
-			position: absolute;
-			top: -32rpx;
-			right: -32rpx;
-			width: 64rpx;
-			height: 64rpx;
-			border-radius: 50%;
-			box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
-			background: #fff;
+	}
+
+	@keyframes dropdownAnimation {
+		0% {
+			opacity: 0;
+			transform: scale(0.95) translateY(-5rpx);
+		}
+
+		100% {
+			opacity: 1;
+			transform: scale(1) translateY(0);
 		}
 	}
+
 }
 </style>

pages/crowdFunding/discussionArea.vue

@@ -24,7 +24,7 @@
 		<!-- tab内容 -->
 		<view v-if="tab === 1" class="update-list">
 			<block v-for="(item, idx) in updateList" :key="idx">
-				<view class="update-item">
+				<view class="update-item" @click="goPages('/pages/crowdFunding/projectUpdateDetails?id='+item.id)">
 					<view class="update-title">第{{ item.index }}次更新</view>
 					<view class="update-content">{{ item.content }}</view>
 					<view class="update-user">
@@ -173,6 +173,11 @@ export default {
 		}, totalNumberOfComments(tableTotal) {
 			this.tableTotal = tableTotal;
 		},
+		goPages(url) {
+			uni.navigateTo({
+				url: url
+			})
+		}
 	}
 }
 </script>

pages/crowdFunding/favorites.vue

@@ -0,0 +1,236 @@
+<template>
+  <view class="favorites-page">
+    <!-- 列表 -->
+    <view class="fav-list">
+      <view
+        class="fav-card"
+        v-for="(item, idx) in list"
+        :key="idx"
+      >
+        <image
+          :src="item.img"
+          class="fav-img"
+        ></image>
+
+        <view class="fav-content">
+          <view class="fav-header">
+            <image
+              :src="item.avatar"
+              class="avatar"
+            ></image>
+            <text class="nickname">{{ item.nickname }}</text>
+            <text class="tag">{{ item.tag }}</text>
+            <view style="position: relative;left: 0;top: 0;">
+              <image
+                src="/static/crowdFunding/more.png"
+                class="more-img"
+                @click="toggleDropdown(idx)"
+              ></image>
+              <view
+                class="dropdown-menu"
+                v-if="currentDropdownIndex === idx"
+              >
+                <view
+                  class="dropdown-item"
+                  @tap="handleOption('cancelCollection', idx)"
+                >取消收藏</view>
+              </view>
+            </view>
+          </view>
+          <view class="fav-title two-omit">{{ item.title }}</view>
+          <view class="fav-bottom">
+            <text class="amount">已筹 ￥{{ item.amount }}万</text>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      list: [
+        {
+          img: "/static/crowdFunding/top-img.png",
+          avatar: "/static/home/avator.png",
+          nickname: "也许时间是一种解药",
+          tag: "发起人",
+          title: "糖指数100%12分BJD可动人偶盲盒糖指数100%12分BJD可动人偶盲盒糖指数100%12分BJD可动人偶盲盒",
+          amount: "769.8",
+        },
+        {
+          img: "/static/crowdFunding/top-img.png",
+          avatar: "/static/home/avator.png",
+          nickname: "也许时间是一种解药",
+          tag: "发起人",
+          title: "糖指数100%12分BJD可动人偶盲盒",
+          amount: "769.8",
+        },
+        {
+          img: "/static/crowdFunding/top-img.png",
+          avatar: "/static/home/avator.png",
+          nickname: "也许时间是一种解药",
+          tag: "发起人",
+          title: "糖指数100%12分BJD可动人偶盲盒",
+          amount: "769.8",
+        },
+      ],
+      currentDropdownIndex: null,
+    };
+  },
+  methods: {
+    goBack() {
+      uni.navigateBack();
+    },
+    toggleDropdown(idx) {
+      this.currentDropdownIndex = this.currentDropdownIndex === idx ? null : idx;
+    },
+    // 处理下拉菜单选项点击
+    handleOption(type, idx) {
+      this.currentDropdownIndex = null;
+      if (type === "cancelCollection") {
+        uni.showToast({
+          title: '取消收藏成功',
+          icon: 'success',
+          duration: 2000
+        });
+        // 这里可以加删除逻辑
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.favorites-page {
+  min-height: 100vh;
+  background: #f2f6f2;
+
+  .fav-list {
+    padding: 24rpx 0;
+    .fav-card {
+      display: flex;
+      background: #fff;
+      border-radius: 18rpx;
+      margin: 0 24rpx 24rpx 24rpx;
+      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+      padding: 20rpx;
+      .fav-img {
+        width: 140rpx;
+        height: 140rpx;
+        border-radius: 12rpx;
+        object-fit: cover;
+        flex-shrink: 0;
+      }
+      .fav-content {
+        flex: 1;
+        margin-left: 20rpx;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        .fav-header {
+          display: flex;
+          align-items: center;
+          .avatar {
+            width: 44rpx;
+            height: 44rpx;
+            border-radius: 50%;
+            margin-right: 12rpx;
+          }
+          .nickname {
+            font-weight: 400;
+            font-size: 24rpx;
+            color: #1f1f1f;
+            font-family: "PingFang SC-Bold";
+            max-width: 250rpx;
+            margin-right: 12rpx;
+          }
+          .tag {
+            font-size: 20rpx;
+            color: #acf934;
+            background: #1f1f1f;
+            border-radius: 8rpx;
+            padding: 2rpx 12rpx;
+            margin-right: auto;
+            margin-left: 4rpx;
+          }
+          .more-img {
+            width: 36rpx;
+            height: 36rpx;
+            margin-left: 12rpx;
+          }
+        }
+        .fav-title {
+          font-size: 26rpx;
+          color: #222;
+          font-weight: 500;
+          margin: 10rpx 0 0 0; 
+          overflow: hidden;
+          text-overflow: ellipsis;
+		  width: 100%;
+        }
+        .fav-bottom {
+          margin-top: 10rpx;
+		  display: flex;
+		  justify-content: flex-end;
+		  align-items: center;
+          .amount {
+            font-size: 22rpx;
+            color: #bdbdbd;
+          }
+        }
+      }
+    }
+  }
+  .dropdown-menu {
+    position: absolute;
+    top: calc(100% + 10rpx);
+    right: 20rpx;
+    background-color: #ffffff;
+    border-radius: 20rpx;
+    padding: 0;
+    width: 150rpx;
+    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
+    z-index: 100;
+    transform-origin: top right;
+    animation: dropdownAnimation 0.2s ease-out;
+    overflow: hidden;
+
+    .dropdown-item {
+      padding: 15rpx 0;
+      color: #333333;
+      font-size: 24rpx;
+      position: relative;
+      text-align: center;
+
+      &:not(:last-child)::after {
+        content: "";
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 1rpx;
+        background-color: #eeeeee;
+      }
+
+      &:active {
+        background-color: #f8f8f8;
+      }
+    }
+  }
+
+  @keyframes dropdownAnimation {
+    0% {
+      opacity: 0;
+      transform: scale(0.95) translateY(-5rpx);
+    }
+
+    100% {
+      opacity: 1;
+      transform: scale(1) translateY(0);
+    }
+  }
+}
+</style>

pages/crowdFunding/orderDetail.vue

@@ -1,41 +1,71 @@
 <template>
-    <view class="order-detail-page">
-      <!-- 顶部导航栏 -->
-      <view class="nav-bar">
-        <text class="back" @click="goBack">&#60;</text>
-        <text class="title"></text>
-        <view class="nav-icons"></view>
+  <view class="order-detail-page">
+    <!-- 顶部导航栏 -->
+    <view class="custom-navbar">
+      <view class="navbar-left">
+        <text class="fa fa-angle-left" @click="goBack"></text>
       </view>
-  
-      <!-- 状态栏 -->
-      <view class="status-bar">
-        <image v-if="statusIcon" :src="statusIcon" class="status-icon"/>
-        <text class="status-title">{{ statusTitle }}</text>
+
+      <view
+        class="navbar-right scale-tap"
+        @click="goPages('/pages/crowdFunding/customerService')"
+      >
+        <image
+          src="@/static/crowdFunding/customer-service-btn.png"
+          style="width: 60rpx; height: 60rpx"
+          mode="widthFix"
+        ></image>
       </view>
-  
-      <!-- 收货信息 -->
-      <view class="address-card">
-        <view class="row">
-          <text class="name">{{ address.name }}</text>
-          <text class="mobile">{{ address.mobile }}</text>
-          <text class="default" v-if="address.isDefault">默认</text>
-        </view>
-        <view class="address">{{ address.fullAddress }}</view>
+    </view>
+
+    <!-- 状态栏 -->
+    <view class="status-bar">
+      <!-- <image v-if="statusIcon" :src="statusIcon" class="status-icon"/> -->
+      <image :src="'../../static/crowdFunding/fail.png'" class="status-icon" />
+      <text class="status-title">{{ statusTitle }}</text>
+    </view>
+
+    <!-- 收货信息 -->
+    <view
+      class="address-card scale-tap"
+      @click="goPages('/pages/crowdFunding/receivingAddress')"
+    >
+      <view class="row">
+        <text class="name">{{ address.name }}</text>
+        <text class="mobile">{{ address.mobile }}</text>
+        <text class="default" v-if="address.isDefault">默认</text>
       </view>
-  
-      <!-- 商品卡片 -->
-      <view class="product-card">
+      <view class="address">{{ address.fullAddress }}</view>
+    </view>
+
+    <!-- 商品卡片 -->
+    <view class="product-card">
+      <view class="product-top">
         <image class="product-img" :src="product.img" />
         <view class="product-info">
-          <view class="product-title">{{ product.title }}</view>
-          <view class="product-desc">{{ product.desc }}</view>
-          <view class="product-spec">回报档：￥{{ product.price }}{{ product.spec }} <text class="count">x{{ product.count }}</text></view>
-          <view class="product-time">预计发货时间：{{ product.deliveryTime }}</view>
-          <view class="product-tip">{{ product.tip }}</view>
+          <view class="product-title"
+            ><text>{{ product.title }} </text>
+            <image
+              class="arrow"
+              mode="widthFix"
+              src="@/static/crowdFunding/right.png"
+          /></view>
+          <view class="product-desc">
+            {{ product.desc }}
+          </view>
+        </view></view
+      >
+      <view class="product-bom">
+        <view class="product-spec"
+          >回报档：￥{{ product.price }}{{ product.spec }}
+          <text class="count">x{{ product.count }}</text></view
+        >
+        <view class="product-time">
+          预计发货时间：{{ product.deliveryTime }}
         </view>
-        <image class="arrow" src="@/static/icon/right.png" v-if="showArrow"/>
+        <view class="product-tip">{{ product.tip }}</view>
       </view>
-  
+
       <!-- 费用明细 -->
       <view class="fee-row">
         <text>运费</text>
@@ -45,158 +75,356 @@
         <text>实付金额</text>
         <text class="total-price">￥{{ product.total }}</text>
       </view>
-  
-      <!-- 订单信息 -->
-      <view class="order-info-card">
-        <view class="info-row">
-          <text>订单编号</text>
-          <text>{{ order.orderNo }}</text>
-          <text class="copy-btn" @click="copy(order.orderNo)">复制</text>
-        </view>
-        <view class="info-row">
-          <text>下单时间</text>
-          <text>{{ order.createTime }}</text>
-        </view>
-        <view class="info-row">
-          <text>付款时间</text>
-          <text>{{ order.payTime }}</text>
-        </view>
+    </view>
+
+    <!-- 订单信息 -->
+    <view class="order-info-card">
+      <view class="info-row">
+        <text>订单编号</text>
+        <view><text>{{ order.orderNo }}</text>
+          <text class="copy-btn" @click="copy(order.orderNo)">复制</text></view>
       </view>
-  
-      <!-- 底部操作栏 -->
-      <view class="order-bottom">
-        <view v-if="statusType==='waitPay'">
-          <view class="btn btn-cancel" @click="cancelOrder">取消订单</view>
-          <view class="btn btn-pay" @click="payOrder">立即支付</view>
-        </view>
-        <view v-else-if="statusType==='waitSend'">
-          <view class="btn btn-refund" @click="refundOrder">申请退款</view>
-        </view>
-        <view v-else-if="statusType==='finish'">
-          <view class="btn btn-delete" @click="deleteOrder">删除订单</view>
-          <view class="btn btn-comment" @click="commentOrder">去评价</view>
-        </view>
-        <view v-else-if="statusType==='waitComment'">
-          <view class="btn btn-delete" @click="deleteOrder">删除订单</view>
-          <view class="btn btn-comment" @click="commentOrder">去评价</view>
-        </view>
-        <view v-else>
-          <view class="btn btn-delete" @click="deleteOrder">删除订单</view>
-        </view>
+      <view class="info-row">
+        <text>下单时间</text>
+        <text>{{ order.createTime }}</text>
+      </view>
+      <view class="info-row">
+        <text>付款时间</text>
+        <text>{{ order.payTime }}</text>
       </view>
     </view>
-  </template>
-  
-  <script>
-  export default {
-    data() {
-      return {
-        statusType: 'waitPay', // waitPay, waitSend, finish, waitComment, fail
-        statusTitle: '支付失败', // 根据statusType动态切换
-        statusIcon: '', // 可根据状态切换icon
-        address: {
-          name: '戴驿宸',
-          mobile: '17788196551',
-          isDefault: true,
-          fullAddress: '浙江省杭州市滨江区西兴街道启悦府1202212121212211212'
-        },
-        product: {
-          img: '/static/crowdFunding/top-img.png',
-          title: '【Woh】灯塔 塔罗牌 治愈风泛伟特系卡牌设计',
-          desc: '',
-          spec: '灯塔MINI版',
-          price: 398,
-          count: 1,
-          deliveryTime: '2025年8月份',
-          tip: '温馨提示：该链接仅购买线下实物卡片！不含线上卡牌壁纸',
-          total: 398
-        },
-        order: {
-          orderNo: '12201544521215415415',
-          createTime: '2025-05-27 09:35:30',
-          payTime: '2025-05-27 09:35:30'
-        },
-        showArrow: false
-      }
-    },
-    methods: {
-      goBack() { uni.navigateBack() },
-      copy(val) {
-        uni.setClipboardData({ data: val });
+
+    <!-- 底部操作栏 -->
+    <view class="order-bottom">
+      <template v-if="statusType === 'waitPay'">
+        <view class="btn scale-tap btn-cancel" @click="cancelOrder">取消订单</view>
+        <view class="btn scale-tap btn-pay" @click="payOrder">立即支付</view>
+      </template>
+      <template v-else-if="statusType === 'waitSend'">
+        <view class="btn scale-tap btn-refund" @click="refundOrder">申请退款</view>
+      </template>
+      <template v-else-if="statusType === 'finish'">
+        <view class="btn scale-tap btn-delete" @click="deleteOrder">删除订单</view>
+        <view class="btn scale-tap btn-comment" @click="commentOrder">去评价</view>
+      </template>
+      <template v-else-if="statusType === 'waitComment'">
+        <view class="btn scale-tap btn-delete" @click="deleteOrder">删除订单</view>
+        <view class="btn scale-tap btn-comment" @click="commentOrder">去评价</view>
+      </template>
+      <template v-else>
+        <view class="btn scale-tap btn-delete" @click="deleteOrder">删除订单</view>
+      </template>
+    </view>
+  </view> 
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      statusType: "waitPay", // waitPay, waitSend, finish, waitComment, fail
+      statusTitle: "支付失败", // 根据statusType动态切换
+      statusIcon: "loading", // 可根据状态切换icon   loading  fail  success
+      address: {
+        name: "戴驿宸",
+        mobile: "17788196551",
+        isDefault: true,
+        fullAddress: "浙江省杭州市滨江区西兴街道启悦府1202212121212211212",
+      },
+      product: {
+        img: "/static/crowdFunding/top-img.png",
+        title: "【Woh】灯塔 塔罗牌 治愈风泛伟特系卡牌设计",
+        desc: "",
+        spec: "灯塔MINI版",
+        price: 398,
+        count: 1,
+        deliveryTime: "2025年8月份",
+        tip: "温馨提示：该链接仅购买线下实物卡片！不含线上卡牌壁纸",
+        total: 398,
       },
-      cancelOrder() {},
-      payOrder() {},
-      refundOrder() {},
-      deleteOrder() {},
-      commentOrder() {}
+      order: {
+        orderNo: "12201544521215415415",
+        createTime: "2025-05-27 09:35:30",
+        payTime: "2025-05-27 09:35:30",
+      },
+    };
+  },
+  methods: {
+    goBack() {
+      uni.navigateBack();
+    },
+    goPages(url) {
+      uni.navigateTo({ url });
+    },
+    copy(val) {
+      uni.setClipboardData({ data: val });
     },
-    mounted() {
-      // 可根据实际订单状态设置statusType/statusTitle/statusIcon
-      // 例如：this.statusType = 'waitPay'; this.statusTitle = '待支付';
+    cancelOrder() {},
+    payOrder() {},
+    refundOrder() {},
+    deleteOrder() {},
+    commentOrder() {},
+  },
+  mounted() {
+    // 可根据实际订单状态设置statusType/statusTitle/statusIcon
+    // 例如：this.statusType = 'waitPay'; this.statusTitle = '待支付';
+  },
+};
+</script>
+
+<style lang="scss">
+.order-detail-page {
+  min-height: 100vh;
+  background: #f2f6f2;
+  .custom-navbar {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    height: 90rpx;
+    padding: 0 40rpx;
+    padding-right: 30rpx;
+    padding-top: var(--status-bar-height);
+    background-color: transparent;
+    position: sticky;
+    top: 0;
+    height: calc(90rpx + var(--status-bar-height));
+    z-index: 100;
+
+    .navbar-left {
+      height: 80rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .fa-angle-left {
+        font-size: 48rpx;
+        color: #333;
+      }
+    }
+
+    .navbar-right {
+      width: 60rpx;
+      height: 60rpx;
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
   }
-  </script>
-  
-  <style lang="scss">
-  .order-detail-page {
-    min-height: 100vh;
-    background: #f6faf6;
-    .nav-bar {
-      display: flex; align-items: center; justify-content: space-between;
-      padding: 0 32rpx; height: 100rpx; background: #fff;
-      .back { font-size: 44rpx; }
-      .title { font-size: 36rpx; font-weight: bold; }
+  .status-bar {
+    display: flex;
+    align-items: center;
+    padding: 32rpx 32rpx 0 32rpx;
+    .status-icon {
+      width: 40rpx;
+      height: 40rpx;
+      margin-right: 12rpx;
     }
-    .status-bar {
-      display: flex; align-items: center; padding: 32rpx 32rpx 0 32rpx;
-      .status-icon { width: 40rpx; height: 40rpx; margin-right: 12rpx; }
-      .status-title { font-size: 36rpx; font-weight: bold; color: #222; }
+    .status-title {
+      font-size: 36rpx;
+      font-weight: bold;
+      color: #1F1F1F;
     }
-    .address-card {
-      background: #fff; border-radius: 16rpx; margin: 24rpx 16rpx 0 16rpx; padding: 24rpx;
-      .row { display: flex; align-items: center; margin-bottom: 8rpx;
-        .name { font-size: 30rpx; font-weight: bold; margin-right: 18rpx; }
-        .mobile { font-size: 30rpx; margin-right: 18rpx; }
-        .default { font-size: 22rpx; color: #fff; background: #1F1F1F; border-radius: 8rpx; padding: 2rpx 12rpx; margin-right: 12rpx;}
-      }
-      .address { font-size: 26rpx; color: #666; }
+  }
+  .address-card {
+    background: #fff;
+    border-radius: 16rpx;
+    margin: 24rpx 16rpx 0 16rpx;
+    padding: 24rpx;
+    background: url("../../static/crowdFunding/order-detail-card-bg.png")
+        no-repeat top right / auto 100%,
+      #fff;
+    .row {
+      display: flex;
+      align-items: center;
+      margin-bottom: 8rpx;
+      .name {
+        font-size: 30rpx;
+        font-weight: bold;
+        margin-right: 18rpx;
+      }
+      .mobile {
+        font-size: 30rpx;
+        margin-right: 18rpx;
+      }
+      .default {
+        font-size: 22rpx;
+        color: #acf934;
+        background: #1f1f1f;
+        border-radius: 8rpx;
+        padding: 2rpx 12rpx;
+        margin-right: 12rpx;
+      }
     }
-    .product-card {
-      background: #fff; border-radius: 16rpx; margin: 24rpx 16rpx 0 16rpx; padding: 24rpx; display: flex;
-      .product-img { width: 120rpx; height: 120rpx; border-radius: 12rpx; margin-right: 18rpx; }
-      .product-info { flex: 1;
-        .product-title { font-size: 28rpx; font-weight: bold; color: #1F1F1F; }
-        .product-desc { font-size: 24rpx; color: #222; margin: 8rpx 0; }
-        .product-spec { font-size: 26rpx; color: #222; margin: 8rpx 0;
-          .count { color: #888; font-size: 22rpx; margin-left: 8rpx; }
+    .address {
+      font-size: 26rpx;
+      color: #666;
+    }
+  }
+  .product-card {
+    background: #fff;
+    border-radius: 16rpx;
+    margin: 24rpx 16rpx 0 16rpx;
+    padding: 24rpx;
+    .product-top {
+      display: flex;
+      align-items: center;
+
+      .product-img {
+        width: 120rpx;
+        height: 120rpx;
+        border-radius: 12rpx;
+        margin-right: 18rpx;
+      }
+      .product-info {
+        flex: 1;
+        .product-title {
+          font-size: 28rpx;
+          font-weight: bold;
+          color: #1f1f1f;
+          display: flex;
+          align-items: center;
+          .arrow {
+            width: 60rpx;
+            height: 60rpx;
+            margin-left: 140rpx;
+          }
+        }
+        .product-desc {
+          font-size: 24rpx;
+          color: #1F1F1F;
+          margin: 8rpx 0;
         }
-        .product-time { font-size: 24rpx; color: #b2b2b2; margin-bottom: 8rpx; }
-        .product-tip { font-size: 22rpx; color: #b2b2b2; background: #f6faf6; border-radius: 8rpx; padding: 8rpx 12rpx; }
       }
-      .arrow { width: 32rpx; height: 32rpx; margin-left: 8rpx; }
     }
-    .fee-row {
-      display: flex; justify-content: space-between; align-items: center; padding: 0 32rpx; height: 64rpx; font-size: 28rpx; color: #222;
-      &.total { font-weight: bold; color: #ff5500;
-        .total-price { color: #ff5500; font-size: 32rpx; }
+    .product-bom {
+      padding-top: 15rpx;
+      .product-spec {
+        font-size: 26rpx;
+        color: #1F1F1F;
+        margin: 8rpx 0;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .count {
+          color: #888;
+          font-size: 22rpx;
+          margin-top: 16rpx;
+          margin-top: 8rpx;
+        }
+      }
+      .product-time {
+        font-size: 24rpx;
+        color: #b2b2b2;
+        margin-bottom: 8rpx;
       }
+      .product-tip {
+        font-size: 26rpx;
+        color: #b2b2b2;
+        background: #f6faf6;
+        border-radius: 8rpx;
+        padding: 8rpx 12rpx;
+      }
+    }
+    .arrow {
+      width: 32rpx;
+      height: 32rpx;
+      margin-left: 8rpx;
     }
-    .order-info-card {
-      background: #fff; border-radius: 16rpx; margin: 24rpx 16rpx 0 16rpx; padding: 24rpx;
-      .info-row { display: flex; align-items: center; height: 56rpx; font-size: 26rpx; color: #222;
-        .copy-btn { color: #1F1F1F; background: #f6faf6; border-radius: 8rpx; font-size: 24rpx; margin-left: 18rpx; padding: 2rpx 16rpx; }
+  }
+  .fee-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0;
+    height: 64rpx;
+    font-size: 28rpx;
+    color: #1F1F1F;
+    text:first-child {
+      color: #999;
+    }
+    &.total {
+      font-weight: bold;
+      color: #1f1f1f;
+      justify-content: flex-end;
+      text:first-child {
+      color: #1f1f1f;
+    }
+      .total-price {
+        color: #ff5500;
+        font-size: 32rpx;
+      }
+    }
+  }
+  .order-info-card {
+    background: #fff;
+    border-radius: 16rpx;
+    margin: 24rpx 16rpx 0 16rpx;
+    padding: 24rpx;
+    .info-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 56rpx;
+      font-size: 26rpx; 
+     >text:first-child {
+        color: #999;
+      }
+      .copy-btn {
+        color: #1f1f1f;
+        background: #f6faf6;
+        border-radius: 8rpx;
+        font-size: 24rpx;
+        margin-left: 18rpx;
+        padding: 2rpx 16rpx;
       }
     }
-    .order-bottom {
-      position: fixed; left: 0; right: 0; bottom: 0; background: #fff; display: flex; align-items: center; justify-content: flex-end; padding: 0 32rpx; height: 110rpx; box-shadow: 0 -2rpx 8rpx rgba(0,0,0,0.04); z-index: 10;
-      .btn {
-        min-width: 180rpx; height: 72rpx; line-height: 72rpx; border-radius: 44rpx; text-align: center; font-size: 30rpx; padding: 0 32rpx; margin-left: 24rpx;
-        &.btn-pay { background: #1F1F1F; color: #ACF934; }
-        &.btn-cancel { background: #fff; color: #1F1F1F; border: 2rpx solid #e5e5e5; }
-        &.btn-refund { background: #1F1F1F; color: #ACF934; }
-        &.btn-delete { background: #fff; color: #1F1F1F; border: 2rpx solid #e5e5e5; }
-        &.btn-comment { background: #1F1F1F; color: #ACF934; }
+  }
+  .order-bottom {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 0 32rpx;
+    height: 110rpx;
+    box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.04);
+    z-index: 10;
+    .btn {
+      min-width: 180rpx;
+      height: 72rpx;
+      line-height: 72rpx;
+      border-radius: 44rpx;
+      text-align: center;
+      font-size: 30rpx;
+      padding: 0 32rpx;
+      margin-left: 24rpx;
+      &.btn-pay {
+        background: #1f1f1f;
+        color: #acf934;
+      }
+      &.btn-cancel {
+        background: #fff;
+        color: #1f1f1f;
+        border: 2rpx solid #e5e5e5;
+      }
+      &.btn-refund {
+        background: #1f1f1f;
+        color: #acf934;
+      }
+      &.btn-delete {
+        background: #fff;
+        color: #1f1f1f;
+        border: 2rpx solid #e5e5e5;
+      }
+      &.btn-comment {
+        background: #1f1f1f;
+        color: #acf934;
       }
     }
   }
-  </style>
+}
+</style>

pages/crowdFunding/projectUpdateDetails.vue

@@ -0,0 +1,202 @@
+<template>
+  <view class="project-update-details">
+    <view
+      class="custom-navbar"
+      :style="navBgStyle"
+    >
+      <view
+        class="navbar-left scale-tap"
+        @click="goBack"
+      >
+        <image
+          src="@/static/crowdFunding/back.png"
+          mode="widthFix"
+        ></image>
+      </view>
+      <view
+        class="navbar-center one-omit"
+        style="max-width: 70vw"
+        :style="{ opacity: navBgOpacity }"
+      >
+        【Woh】灯塔 塔罗牌 治愈风泛伟特系伟特系伟特系
+      </view>
+      <view
+        class="navbar-right scale-tap"
+        @click="showShare = true"
+      >
+        <image
+          src="@/static/crowdFunding/share.png"
+          mode="widthFix"
+        ></image>
+      </view>
+    </view>
+    <image
+      class="top-img"
+      src="@/static/crowdFunding/top-img.png"
+      mode="widthFix"
+    ></image>
+    <view class="update-info">
+      <view class="update-title-row">
+        <text class="update-title">· 第2次更新</text>
+        <text class="update-time">2025.5.23 16:23</text>
+      </view>
+      <view class="update-user-row">
+        <image
+          class="user-avatar"
+          src="@/static/home/avator.png"
+        ></image>
+        <text class="user-nickname">也许时间是一种解药</text>
+      </view>
+    </view>
+	<view class="content">
+		<uv-parse :content="content" :selectable="true"></uv-parse>
+	</view>
+  </view>
+</template>
+
+<script> 
+export default { 
+  data() {
+    return {
+      navBgOpacity: 0,
+      showShare: false,
+      content: `<section data-role="paragraph" class="_135editor" style="">
+	<p style="border-width: 0px; border-radius: 10px;text-align:center;" align="center">
+		<span style="font-size: 20px; border-width: 0px; border-radius: 10px;"><strong style="border-width: 0px; border-radius: 10px;">追加解锁档位和关于地址修改邮费退补的提示</strong></span>&nbsp;
+	</p>
+	<p style="border-width: 0px; border-radius: 10px;text-align:center;" align="center">
+		<br style="border-width: 0px; border-radius: 10px;"/>
+	</p>
+	<p style="border-width: 0px; border-radius: 10px;text-align:center;" align="center">
+		<br style="border-width: 0px; border-radius: 10px;"/>
+	</p>
+	<p style="border-width: 0px; border-radius: 10px;" >
+		感谢大家的热情,我们在半天的时间内达到了68万的 金额。
+	</p>
+	<p style="border-width: 0px; border-radius: 10px;">
+		<br style="border-width: 0px; border-radius: 10px;"/>
+	</p>
+	<p style="border-width: 0px; border-radius: 10px;">
+		&nbsp;为了回应大家的支持,我们决定增加以下
+	</p>
+	<p style="border-width: 0px; border-radius: 10px;">
+		解锁档位:&nbsp;
+	</p>
+	<p style="border-width: 0px; border-radius: 10px;">
+		<br style="border-width: 0px; border-radius: 10px;"/>
+	</p>
+	<p style="border-width: 0px; border-radius: 10px;">
+		350,000:正式开启《三相奇谈官方艺术设定集》制作企划!&lt;已经解锁&gt;&nbsp;
+	</p>
+	<p style="border-width: 0px; border-radius: 10px;">
+		<br style="border-width: 0px; border-radius: 10px;"/>
+	</p>
+	<p style="border-width: 0px; border-radius: 10px;">
+		·500,000:为60元以上档位额外追加表情包贴纸·第 二弹!&lt;已经解锁&gt;&nbsp;
+	</p>
+	<p style="border-width: 0px; border-radius: 10px;">
+		·650,000:为所有档位追加3张角色明信片!&lt;已经解锁&gt;&nbsp;
+	</p>
+	<p style="border-width: 0px; border-radius: 10px;">
+		·800,000:为100元以上档位追加局部彩窗亚克力挂饰一个!&nbsp;
+	</p>
+	<p style="border-width: 0px; border-radius: 10px;">
+		<span style="caret-color: red; border-width: 0px; border-radius: 10px;">·900,000:为所有档位追加角色纪念徽章,根据投票选出角色并全新绘制!</span>
+	</p>
+</section>`,
+    };
+  },
+  computed: {
+    navBgStyle() {
+      return {
+        background: `rgba(255,255,255,${this.navBgOpacity})`,
+        transition: "background 0.3s",
+      };
+    },
+  },
+  methods: {
+    goBack() {
+      uni.navigateBack();
+    },
+  },
+  onPageScroll(e) {
+    const threshold = this.swiperHeight || uni.upx2px(400); // 优先用实际高度
+    let opacity = 0;
+    if (e.scrollTop > 0) {
+      opacity = Math.min(e.scrollTop / threshold, 1);
+    }
+    this.navBgOpacity = opacity;
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.project-update-details {
+  min-height: 100vh;
+  padding-bottom: 20vh;
+
+  /* 自定义导航栏样式 */
+  .custom-navbar {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: calc(90rpx + var(--status-bar-height));
+    padding: 0 20rpx;
+    position: fixed;
+    top: 0;
+    z-index: 100;
+    padding: 12rpx 24rpx;
+    padding-top: calc(var(--status-bar-height) + 12rpx);
+    background: transparent;
+    transition: background 0.3s;
+
+    image {
+      width: 64rpx;
+      height: 64rpx;
+    }
+  }
+
+  .top-img {
+    width: 100%;
+  }
+
+  .update-info {
+    background: #fff;
+    padding: 32rpx 32rpx 0 32rpx;
+    .update-title-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 24rpx;
+      .update-title {
+        font-size: 26rpx;
+        color: #222;
+      }
+      .update-time {
+        font-size: 24rpx;
+        color: #bdbdbd;
+      }
+    }
+    .update-user-row {
+      display: flex;
+      align-items: center;
+      .user-avatar {
+        width: 48rpx;
+        height: 48rpx;
+        border-radius: 50%;
+        margin-right: 16rpx;
+      }
+      .user-nickname {
+        font-size: 26rpx;
+        color: #222;
+        font-weight: 500;
+      }
+    }
+  }
+  .content{
+	padding: 42rpx 28rpx;
+  }
+}
+</style>

pages/message/mailMessage.scss

@@ -29,7 +29,7 @@
     height: 100%;
     justify-content: space-between;
     align-items: center;
-    width: 246rpx;
+    width: 390rpx;
 
     .tab {
       position: relative;
@@ -343,3 +343,70 @@
     text-wrap: nowrap;
   }
 }
+.msg-card {
+  display: flex;
+  align-items: flex-start;
+  background: #fff;
+  border-radius: 18rpx;
+  margin: 0 24rpx 24rpx 24rpx;
+  padding: 20rpx;
+  position: relative;
+  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
+  .avatar {
+    width: 72rpx;
+    height: 72rpx;
+    border-radius: 50%;
+    margin-right: 20rpx;
+    flex-shrink: 0;
+  }
+  .msg-main {
+    flex: 1;
+    .msg-header {
+      display: flex;
+      align-items: center;
+      margin-bottom: 8rpx;
+      .nickname {
+        font-size: 28rpx;
+        color: #222;
+        font-weight: bold;
+        margin-right: 12rpx;
+      }
+      .tag {
+        font-size: 20rpx;
+        color: #acf934;
+        background: #1f1f1f;
+        border-radius: 8rpx;
+        padding: 2rpx 12rpx;
+        margin-right: 12rpx;
+      }
+      .time {
+        margin-left: auto;
+        color: #bdbdbd;
+        font-size: 24rpx;
+      }
+    }
+    .msg-content {
+      font-size: 24rpx;
+      color: #666;
+    }
+  }
+  .red-dot {
+    position: absolute;
+    right: 24rpx;
+    bottom: 24rpx;
+    width: 32rpx;
+    height: 32rpx;
+    background: #ff3b30;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 22rpx;
+    color: #fff;
+    line-height: 0;
+  }
+  &.selected {
+    box-shadow: 0 4rpx 16rpx rgba(172,249,52,0.15);
+    border: 2rpx solid #acf934;
+  }
+}

pages/message/mailMessage.vue

@@ -1,5 +1,6 @@
 <template>
-	<view class="page" :style="{ background: tab == 1 ? '#f2f6f2' : '#ffffff',borderWidth:tab==2?'2rpx':'none' }">
+	<view class="page"
+		:style="{ background: tab == 1 ? '#f2f6f2' : '#ffffff', borderWidth: tab == 2 ? '2rpx' : 'none' }">
 		<view class="mainBody">
 			<!-- <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="0"> -->
 			<view class="tabs">
@@ -89,7 +90,42 @@
 					<image src="@/static/icon/xx_img_zanwuxiaoxi.png"></image>
 					<text class="tips-title"> 暂无消息</text>
 					<text class="tips-content">
-						消息还在 “放假”，等它们元气满满回来</text>
+						消息还在 "放假"，等它们元气满满回来</text>
+				</view>
+			</template>
+		</view>
+
+		<!-- 客服消息 -->
+		<view class="customer-service-message" v-if="tab === 3">
+			<template v-if="true || offset">
+				<block v-for="(item, index) in list3" :key="index">
+					<view class="msg-card"   @click="goPages('/pages/crowdFunding/customerService?id='+item.id)">
+						<image class="avatar" :src="item.avatar" />
+						<view class="msg-main">
+							<view class="msg-header">
+								<text class="nickname">{{ item.nickname }}</text>
+								<text class="tag" v-if="item.tag">{{ item.tag }}</text>
+								<text class="time">{{ item.create_time }}</text>
+							</view>
+							<view class="msg-content">{{ item.content }}</view>
+						</view>
+						<view v-if="item.quantity >0" class="red-dot">{{ item.quantity }}</view>
+					</view>
+				</block>
+				<view class="blankHeight"></view>
+				<view class="loading-more" v-if="tab === 3">
+					<text v-if="isLoading">正在加载更多...</text>
+					<view v-else-if="!hasMore">
+						<text>暂无更多消息</text>
+					</view>
+				</view>
+			</template>
+			<template v-else-if="!isLoading">
+				<view class="noData">
+					<image src="@/static/icon/xx_img_zanwuxiaoxi.png"></image>
+					<text class="tips-title"> 暂无消息</text>
+					<text class="tips-content">
+						消息还在 "放假"，等它们元气满满回来</text>
 				</view>
 			</template>
 		</view>
@@ -103,8 +139,7 @@
 
 <script>
 import tabbarView from "@/components/tabbar/tabbar.vue";
-import tabbar from "@/mixins/tabbar";
-import list from "postcss/lib/list";
+import tabbar from "@/mixins/tabbar"; 
 export default {
 	components: {
 		tabbarView,
@@ -127,6 +162,9 @@ export default {
 				{
 					name: "评论和赞",
 					id: 2,
+				}, {
+					name: "客服消息",
+					id: 3,
 				},
 			],
 			offset: 0,
@@ -137,6 +175,30 @@ export default {
 				1: "sms",
 				2: "hudong",
 			},
+			list3: [
+				{
+					avatar: '../../static/home/avator.png',
+					nickname: '雾里',
+					tag: '发起人',
+					create_time: '17:10',
+					content: '谢谢你的关注，远方的陌生人',
+					quantity: 1	
+				},{
+					avatar: '../../static/home/avator.png',
+					nickname: '雾里',
+					tag: '发起人',
+					create_time: '17:10',
+					content: '谢谢你的关注，远方的陌生人',
+					quantity: 0	
+				},{
+					avatar: '../../static/home/avator.png',
+					nickname: '雾里',
+					tag: '发起人',
+					create_time: '17:10',
+					content: '谢谢你的关注，远方的陌生人',
+					quantity: 9	
+				},
+			],  
 		};
 	},
 	onLoad() {
@@ -175,6 +237,13 @@ export default {
 		}
 	},
 	methods: {
+		 goPages(url){
+			console.log(url, 'url');
+			
+			uni.navigateTo({
+				url,
+			})
+		 },
 		onBack() { },
 		checkTab(tab) {
 			this.tab = tab;
@@ -319,4 +388,13 @@ export default {
 
 <style scoped lang="scss">
 @import "mailMessage.scss";
+.msg-card {
+  transition: box-shadow 0.2s, background 0.2s, transform 0.1s;
+}
+.msg-card:active,
+.msg-card-active {
+  background: #f5f5f5 !important;
+  transform: scale(0.97);
+  box-shadow: 0 2rpx 16rpx rgba(172,249,52,0.10);
+}
 </style>

pages/my/setting.vue

@@ -90,6 +90,15 @@ export default {
           icon: "../../static/me/wd_icon_qingshaonianmoshi.png",
           propup: "",
         },
+        {
+          name: "收货地址",
+          switch: 0,
+          desc: "",
+          // 'path': '/pages/my/idcheck',实名认证
+          path: "/pages/crowdFunding/receivingAddress",
+          icon: "../../static/me/wd_icon_shouhuodizhi.png",
+          propup: "",
+        },
       ],
       moreSettings: [
         {