From 349ffa4f34196114031dc2307453348d3911e48a Mon Sep 17 00:00:00 2001
From: Yer11214 <17633066053@163.com>
Date: Wed, 8 Jul 2026 18:37:11 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=E5=A4=9A?=
 =?UTF-8?q?=E4=B8=AA=E7=BB=84=E4=BB=B6=E4=BB=A5=E6=94=AF=E6=8C=81=20Vue=20?=
 =?UTF-8?q?3=20=E8=AF=AD=E6=B3=95=E5=92=8C=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将多个组件转换为 `<script setup>` 语法，提升可读性和性能
- 优化状态管理和事件处理逻辑，简化代码结构
- 更新样式和布局以适应新组件结构
- 添加新功能和修复已知问题，提升用户体验
---
 App.vue                                       |  403 ++--
 components/default-page/default-page.vue      |   58 +-
 components/m-airbtn/index.vue                 |  118 +-
 components/m-buy/goods.vue                    |  580 +++---
 components/m-canvas/index.vue                 |  286 ++-
 components/m-city/m-city.vue                  |  338 ++--
 components/m-goods-list/base-list.vue         |   59 +-
 components/m-goods-list/common.ts             |   90 +
 components/m-goods-list/common.vue            |   69 -
 components/m-goods-list/list.vue              |  160 +-
 components/m-goods-list/promotion.vue         |  190 +-
 components/m-goods-recommend/index.vue        |  124 +-
 components/m-placard/index.vue                |  306 ++-
 .../m-search-revision/m-search-revision.vue   |  244 ++-
 components/m-share/index.vue                  |  227 +--
 components/m-take-down-sale-goods/index.vue   |   22 +-
 components/popups/popups.vue                  |  347 ++--
 components/u-time-line/u-time-line-item.vue   |   36 +-
 components/u-time-line/u-time-line.vue        |    6 +-
 components/uni-load-more/uni-load-more.vue    |   56 +-
 components/uni-number-box.vue                 |  358 ++--
 components/uniMap.vue                         |  198 +-
 components/verification/verification.vue      |  359 ++--
 components/verify-code/verify-code.vue        |  316 ++--
 config/api.js                                 |    4 +-
 js_sdk/lili-pay/wx-pay.js                     |    2 +-
 main.js                                       |    6 +
 pages.json                                    |   22 +-
 pages/cart/coupon/couponCenter.vue            |  506 +++--
 pages/cart/coupon/couponDetail.vue            |   58 +-
 pages/cart/coupon/index.vue                   |  122 +-
 pages/cart/coupon/myCoupon.vue                |  864 ++++-----
 pages/cart/payment/error.vue                  |   87 +
 pages/cart/payment/payOrder.vue               |  624 +++----
 pages/cart/payment/shareOrderGoods.vue        |  329 ++--
 pages/cart/payment/success.vue                |  112 +-
 pages/floor/empty.vue                         |   25 +-
 pages/mine/address/add.vue                    |  461 ++---
 pages/mine/address/address.vue                |  199 +-
 pages/mine/address/addressManage.vue          |  188 +-
 pages/mine/address/storeAddress.vue           |  106 +-
 pages/mine/deposit/index.vue                  |  136 +-
 pages/mine/deposit/info.vue                   |    3 +-
 pages/mine/deposit/operation.vue              |   51 +-
 pages/mine/deposit/recharge.vue               |   56 +-
 pages/mine/deposit/withdrawApply.vue          |  299 ++-
 pages/mine/deposit/withdrawal.vue             |  129 +-
 pages/mine/distribution/achievement.vue       |   15 +-
 pages/mine/distribution/auth.vue              |  226 +--
 pages/mine/distribution/history.vue           |  192 +-
 pages/mine/distribution/home.vue              |   92 +-
 pages/mine/distribution/join.vue              |  205 +-
 pages/mine/distribution/list.vue              |  352 ++--
 pages/mine/distribution/withdrawal.vue        |  287 +--
 pages/mine/help/tips.vue                      |   84 +-
 pages/mine/im/index.vue                       |  843 ++++-----
 pages/mine/im/list.vue                        |  155 +-
 pages/mine/msgTips/main.vue                   |  269 +--
 pages/mine/msgTips/packageMsg/index.vue       |  211 ++-
 .../msgTips/packageMsg/logisticsDetail.vue    |   67 +-
 pages/mine/msgTips/serviceMsg/index.vue       |   50 +-
 pages/mine/msgTips/sysMsg/index.vue           |  149 +-
 pages/mine/myCollect.vue                      |  485 +++--
 pages/mine/myTracks.vue                       |  305 ++-
 pages/mine/point/myPoint.vue                  |  494 +++--
 pages/mine/set/editionIntro.vue               |  143 +-
 pages/mine/set/feedBack.vue                   |  155 +-
 pages/mine/set/personMsg.vue                  |  281 ++-
 pages/mine/set/securityCenter/bindMobile.vue  |  378 ++--
 .../set/securityCenter/editLoginPassword.vue  |  213 +--
 .../mine/set/securityCenter/editPassword.vue  |  449 ++---
 pages/mine/set/securityCenter/faceLogin.vue   |  117 +-
 pages/mine/set/securityCenter/fingerLogin.vue |  105 +-
 .../set/securityCenter/securityCenter.vue     |   76 +-
 .../mine/set/securityCenter/updatePwdTab.vue  |   20 +-
 pages/mine/set/setUp.vue                      |  187 +-
 pages/mine/set/versionFunctionList.vue        |   79 +-
 pages/mine/signIn.vue                         |  374 ++--
 pages/navigation/search/search.scss           |    2 +
 pages/navigation/search/searchPage.vue        | 1220 ++++++------
 pages/order/afterSales/afterSales.vue         |  456 ++---
 pages/order/afterSales/afterSalesDetail.vue   |  467 +++--
 .../afterSales/afterSalesDetailExpress.vue    |  223 +--
 pages/order/afterSales/afterSalesSelect.vue   |   94 +-
 pages/order/afterSales/applyDetail.vue        |  342 ++--
 pages/order/afterSales/applyProgress.vue      |   90 +-
 pages/order/afterSales/applySuccess.vue       |   35 +-
 pages/order/complain/complain.vue             |  225 +--
 pages/order/complain/complainInfo.vue         |  176 +-
 pages/order/complain/complainList.vue         |  420 +++--
 pages/order/deliverDetail.vue                 |   46 +-
 pages/order/evaluate/evaluateDetail.vue       |   86 +-
 pages/order/evaluate/myEvaluate.vue           |  337 ++--
 pages/order/evaluate/releaseEvaluate.vue      |  131 +-
 pages/order/fillorder.vue                     |  851 ++++-----
 pages/order/invoice/invoiceDetail.vue         |  277 ++-
 pages/order/invoice/setInvoice.vue            |  667 +++----
 pages/order/myOrder.vue                       |  747 ++++----
 pages/order/orderDetail.vue                   |  511 +++--
 pages/passport/article.vue                    |   42 +-
 pages/passport/entry/seller/control.vue       |  117 +-
 pages/passport/entry/seller/entry-form.scss   |   92 +
 pages/passport/entry/seller/entry.scss        |   36 +-
 pages/passport/entry/seller/index.vue         |  238 +--
 pages/passport/entry/seller/step1.vue         |  546 +++---
 pages/passport/entry/seller/step2.vue         |  199 +-
 pages/passport/entry/seller/step3.vue         |  548 +++---
 pages/passport/login.vue                      | 1195 ++++++------
 pages/passport/scannerCodeLoginConfirm.vue    |  141 +-
 pages/passport/wechatH5Login.vue              |   58 +-
 pages/passport/wechatMPLogin.vue              |  284 ++-
 pages/product/askList.vue                     |  142 +-
 pages/product/comment.vue                     |  233 ++-
 pages/product/customerservice/index.vue       |  162 +-
 pages/product/goods.vue                       | 1310 ++++++-------
 pages/product/licencePhoto.vue                |   62 +-
 .../product/evaluation/-evaluation.vue        |  146 +-
 pages/product/product/goods/-goods-desc.vue   |    7 +-
 pages/product/product/goods/-goods-intro.vue  |   50 +-
 .../product/goods/-goods-recommend.vue        |   12 +-
 pages/product/product/goods/-goods-swiper.vue |   47 +-
 pages/product/product/mp-goods.scss           |   17 +-
 pages/product/product/popup/address.vue       |  134 +-
 .../promotion/-promotion-assemble-list.vue    |   97 +-
 .../-promotion-assemble-promotions.vue        |  223 ++-
 .../product/promotion/-promotion-coupon.vue   |  178 +-
 .../product/promotion/-promotion-details.vue  |  200 +-
 .../product/product/promotion/-promotion.vue  |   76 +-
 pages/product/product/shop/-shop.vue          |   50 +-
 pages/product/product/style.scss              |  103 +-
 pages/product/shopList.vue                    |  120 +-
 pages/product/shopPage.vue                    |  700 ++++---
 pages/product/shopPageGoods.vue               |   89 +-
 pages/promotion/bargain/detail.vue            |  407 ++--
 pages/promotion/bargain/list.vue              |   97 +-
 pages/promotion/bargain/log.vue               |  156 +-
 pages/promotion/joinGroup.vue                 |  182 +-
 pages/promotion/live/mqtt/mqtt.js             |   26 +
 pages/promotion/live/room.vue                 | 1658 +++++++++--------
 pages/promotion/live/utils/liveChat.js        |   11 +
 pages/promotion/live/utils/liveMqtt.js        |   18 +
 pages/promotion/lives.vue                     |  337 ++--
 pages/promotion/point/detail.vue              |  105 +-
 pages/promotion/point/pointList.vue           |  300 ++-
 pages/promotion/point/user.vue                |   38 +-
 pages/promotion/seckill.vue                   |  215 +--
 pages/tabbar/cart/cartList.vue                |  762 ++++----
 pages/tabbar/category/category.vue            |  197 +-
 pages/tabbar/home/index.vue                   |  235 ++-
 pages/tabbar/home/template/fetch_coupon.vue   |  120 +-
 pages/tabbar/home/template/tpl.js             |    8 +
 pages/tabbar/home/template/tpl.scss           |    6 +-
 pages/tabbar/home/template/tpl_banner.vue     |   29 +-
 pages/tabbar/home/template/tpl_flex_five.vue  |   16 +-
 pages/tabbar/home/template/tpl_flex_four.vue  |   16 +-
 pages/tabbar/home/template/tpl_flex_one.vue   |   41 +-
 pages/tabbar/home/template/tpl_flex_three.vue |   17 +-
 pages/tabbar/home/template/tpl_flex_two.vue   |   36 +-
 pages/tabbar/home/template/tpl_goods.vue      |  227 +--
 pages/tabbar/home/template/tpl_group.vue      |   62 +-
 pages/tabbar/home/template/tpl_hot_zone.vue   |   12 +-
 pages/tabbar/home/template/tpl_integral.vue   |   56 +-
 .../home/template/tpl_left_one_right_two.vue  |   54 +-
 .../home/template/tpl_left_two_right_one.vue  |   18 +-
 pages/tabbar/home/template/tpl_menu.vue       |   15 +-
 pages/tabbar/home/template/tpl_notice.vue     |   21 +-
 .../home/template/tpl_promotions_detail.vue   |  227 +--
 pages/tabbar/home/template/tpl_search.vue     |   33 +-
 pages/tabbar/home/template/tpl_spike.vue      |   65 +-
 .../tabbar/home/template/tpl_text_picture.vue |   17 +-
 pages/tabbar/home/template/tpl_title.vue      |   14 +-
 .../home/template/tpl_top_one_bottom_two.vue  |   20 +-
 .../home/template/tpl_top_two_bottom_one.vue  |   24 +-
 pages/tabbar/home/template/tpl_video.vue      |  113 +-
 pages/tabbar/home/title.vue                   |  230 ++-
 pages/tabbar/home/views.vue                   |  312 +---
 pages/tabbar/home/web-view.vue                |   67 +-
 pages/tabbar/screen/fullScreen.vue            |  105 +-
 pages/tabbar/special/special.vue              |  304 ++-
 pages/tabbar/user/my.vue                      |  148 +-
 pages/tabbar/user/similarGoods.vue            |  124 +-
 pages/tabbar/user/utils/tool.vue              |  189 +-
 patches/uview-plus+3.8.42.patch               |   17 +-
 store/index.js                                |    4 +
 styles/uview-form-fix.scss                    |   40 +
 uni.scss                                      |    2 +
 utils/form-style.js                           |   13 +
 utils/request.js                              |    4 +-
 utils/theme.js                                |   12 +-
 189 files changed, 18278 insertions(+), 20758 deletions(-)
 create mode 100644 components/m-goods-list/common.ts
 delete mode 100644 components/m-goods-list/common.vue
 create mode 100644 pages/passport/entry/seller/entry-form.scss
 create mode 100644 styles/uview-form-fix.scss
 create mode 100644 utils/form-style.js

diff --git a/App.vue b/App.vue
index 57e52e6..175fa1f 100644
--- a/App.vue
+++ b/App.vue
@@ -1,256 +1,199 @@
-<script>
-	/**
-	 * vuex管理登录状态，具体可以参考官方登录模板示例
-	 */
-	import config from "@/config/config";
+<script setup lang="ts">
+import config from '@/config/config'
+import { getClipboardData } from '@/js_sdk/h5-copy/h5-copy.js'
+import APPUpdate from '@/plugins/APPUpdate'
+import storage from '@/utils/storage'
+import { getThemeSetting } from '@/api/common.js'
 import {
-	getClipboardData
-} from "@/js_sdk/h5-copy/h5-copy.js";
-import APPUpdate from "@/plugins/APPUpdate";
-import storage from "@/utils/storage";
-import { getThemeSetting } from "@/api/common.js";
-import {
-	applyTabBarStyle,
-	cacheTheme,
-	loadCachedTheme,
-	normalizeTheme,
-} from "@/utils/theme";
-import {
-	mapMutations
-} from "vuex";
+  applyTabBarStyle,
+  cacheTheme,
+  loadCachedTheme,
+  normalizeTheme,
+} from '@/utils/theme'
+import { onLaunch, onShow } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
 
-	
-	
-	/**
-	 * 路由监听并删除路由
-	 * https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html
-	 * */
-	// #ifdef MP-WEIXIN
-	wx.onAppRoute((res) => {
-		
-	})
-	// #endif
+const store = useStore()
 
-	export default {
-		data() {
-			return {
-				config,
-			};
-		},
+// #ifdef MP-WEIXIN
+wx.onAppRoute(() => {})
+// #endif
 
+onLaunch((val) => {
+  initTheme()
+  if (val?.query?.inviter) {
+    storage.setInviter(val.query.inviter)
+  }
 
-		/**
-		 * 监听返回（页面级 onBackPress 在 App.vue 不生效，保留空实现避免误导）
-		 */
-		onLaunch: function(val) {
-			this.initTheme();
-			if(val.query.inviter){
-				storage.setInviter(val.query.inviter)
-			}
+  // #ifdef APP-PLUS
+  plus.globalEvent.addEventListener('newintent', () => {
+    checkArguments()
+  })
+  // #endif
 
-      // #ifdef APP-PLUS
-			// 重点是以下： 一定要监听后台恢复 ！一定要
-			plus.globalEvent.addEventListener("newintent", (e) => {
-				this.checkArguments(); // 检测启动参数
-			});
-			// #endif
+  // #ifdef MP-WEIXIN
+  applyUpdateWeChat()
+  // #endif
+})
 
-			// #ifdef MP-WEIXIN
-			this.applyUpdateWeChat();
-			// #endif
-		},
+onShow(() => {
+  // #ifndef H5
+  if (config.enableGetClipboard) {
+    getClipboard()
+  }
+  // #endif
 
-		onShow() {
-			// #ifndef H5
-			if(this.config.enableGetClipboard){
-				this.getClipboard();
-			}
-			// #endif
-			// #ifdef APP-PLUS
+  // #ifdef APP-PLUS
+  if (storage.getShow()) {
+    if (uni.getSystemInfoSync().platform == 'ios') {
+      uni.navigateTo({ url: '/pages/tabbar/screen/fullScreen' })
+    }
+  }
+  // #endif
+})
 
-			if (storage.getShow()) {
-				if (uni.getSystemInfoSync().platform == 'ios') {
-					this.$u.route("/pages/tabbar/screen/fullScreen");
+function initTheme() {
+  const cached = loadCachedTheme()
+  if (cached) {
+    store.commit('SET_THEME', cached)
+    applyTabBarStyle(cached.mainColor)
+  }
+  getThemeSetting()
+    .then((res) => {
+      if (res.data?.success && res.data.result?.settingValue) {
+        try {
+          const raw = JSON.parse(res.data.result.settingValue)
+          const theme = normalizeTheme(raw)
+          store.commit('SET_THEME', theme)
+          cacheTheme(theme)
+          applyTabBarStyle(theme.mainColor)
+        } catch (e) {
+          // 主题配置解析失败时使用缓存
+        }
+      }
+    })
+    .catch(() => {})
+}
 
-				}
-			}
-			// #endif
-		},
-		methods: {
-			...mapMutations(["login", "SET_THEME"]),
-			initTheme() {
-				const cached = loadCachedTheme();
-				if (cached) {
-					this.SET_THEME(cached);
-					applyTabBarStyle(cached.mainColor);
-				}
-				getThemeSetting()
-					.then((res) => {
-						if (res.data && res.data.success && res.data.result && res.data.result.settingValue) {
-							try {
-								const raw = JSON.parse(res.data.result.settingValue);
-								const theme = normalizeTheme(raw);
-								this.SET_THEME(theme);
-								cacheTheme(theme);
-								applyTabBarStyle(theme.mainColor);
-							} catch (e) {
-								// 主题配置解析失败时使用缓存
-							}
-						}
-					})
-					.catch(() => {});
-			},
-			/**
-			 * 微信小程序版本提交更新版本 解决缓存问题
-			 */
-			applyUpdateWeChat() {
-				const updateManager = uni.getUpdateManager();
+function applyUpdateWeChat() {
+  const updateManager = uni.getUpdateManager()
 
-				updateManager.onCheckForUpdate(function(res) {
-					// 请求完新版本信息的回调
-				});
+  updateManager.onCheckForUpdate(() => {})
 
-				updateManager.onUpdateReady(function(res) {
-					uni.showModal({
-						title: "更新提示",
-						content: "发现新版本，是否重启应用？",
-						success(res) {
-							if (res.confirm) {
-								// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
-								updateManager.applyUpdate();
-							}
-						},
-					});
-				});
-				updateManager.onUpdateFailed(function(res) {
-					// 新的版本下载失败
-				});
-			},
+  updateManager.onUpdateReady(() => {
+    uni.showModal({
+      title: '更新提示',
+      content: '发现新版本，是否重启应用？',
+      success(res) {
+        if (res.confirm) {
+          updateManager.applyUpdate()
+        }
+      },
+    })
+  })
 
-			//  TODO 开屏广告 后续优化添加
-			launch() {
-				try {
-					// 获取本地存储中launchFlag标识 开屏广告
-					const value = uni.getStorageSync("launchFlag");
-					if (!value) {
-						// this.$u.route("/pages/index/agreement");
-					} else {
-						//app启动时打开启动广告页
-						var w = plus.webview.open(
-							"/hybrid/html/advertise/advertise.html",
-							"本地地址", {
-								top: 0,
-								bottom: 0,
-								zindex: 999,
-							},
-							"fade-in",
-							500
-						);
-						//设置定时器，4s后关闭启动广告页
-						setTimeout(function() {
-							plus.webview.close(w);
-							APPUpdate();
-						}, 3000);
-					}
-				} catch (e) {
-					// error
-					uni.setStorage({
-						key: "launchFlag",
-						data: true,
-						success: function() {
-							console.log("error时存储launchFlag");
-						},
-					});
-				}
-			},
+  updateManager.onUpdateFailed(() => {})
+}
 
-			/**
-			 * 获取粘贴板数据
-			 */
-			async getClipboard() {
-				let res = await getClipboardData();
+function launch() {
+  try {
+    const value = uni.getStorageSync('launchFlag')
+    if (!value) {
+      // uni.navigateTo({ url: '/pages/index/agreement' })
+    } else {
+      const w = plus.webview.open(
+        '/hybrid/html/advertise/advertise.html',
+        '本地地址',
+        {
+          top: 0,
+          bottom: 0,
+          zindex: 999,
+        },
+        'fade-in',
+        500,
+      )
+      setTimeout(() => {
+        plus.webview.close(w)
+        APPUpdate()
+      }, 3000)
+    }
+  } catch (e) {
+    uni.setStorage({
+      key: 'launchFlag',
+      data: true,
+      success() {
+        console.log('error时存储launchFlag')
+      },
+    })
+  }
+}
 
-				/**
-				 * 解析粘贴板数据
-				 */
+async function getClipboard() {
+  const res = await getClipboardData()
+  if (res.indexOf(config.shareLink) != -1 && res != store.state.shareLink) {
+    store.state.shareLink = res
+    uni.showModal({
+      title: '提示',
+      content: '检测到一个分享链接是否跳转？',
+      confirmText: '跳转',
+      success(callback) {
+        if (callback.confirm) {
+          const path = res.split(config.shareLink)[1]
+          if (path.indexOf('tabbar') != -1) {
+            uni.switchTab({ url: path })
+          } else {
+            uni.navigateTo({ url: path })
+          }
+        }
+      },
+    })
+  }
+}
 
-				if (res.indexOf(config.shareLink) != -1 && (res != this.$store.state.shareLink)) {
-					this.$store.state.shareLink = res
-					uni.showModal({
-						title: "提示",
-						content: "检测到一个分享链接是否跳转？",
-						confirmText: "跳转",
-						success: function(callback) {
-							if (callback.confirm) {
-								const path = res.split(config.shareLink)[1];
-								if (path.indexOf("tabbar") != -1) {
-									uni.switchTab({
-										url: path,
-									});
-								} else {
-									uni.navigateTo({
-										url: path,
-									});
-								}
-							}
-						},
-					});
-				}
-			},
-
-			/**
-			 * h5中打开app获取跳转app的链接并跳转
-			 */
-			checkArguments() {
-				// #ifdef APP-PLUS
-				setTimeout(() => {
-					const args = plus.runtime.arguments;
-					if (args) {
-						const argsStr = decodeURIComponent(args);
-						const path = argsStr.split("//")[1];
-						if (path.indexOf("tabbar") != -1) {
-							uni.switchTab({
-								url: `/${path}`,
-							});
-						} else {
-							uni.navigateTo({
-								url: `/${path}`,
-							});
-						}
-					}
-				});
-				// #endif
-			},
-		},
-	};
+function checkArguments() {
+  // #ifdef APP-PLUS
+  setTimeout(() => {
+    const args = plus.runtime.arguments
+    if (args) {
+      const argsStr = decodeURIComponent(args)
+      const path = argsStr.split('//')[1]
+      if (path.indexOf('tabbar') != -1) {
+        uni.switchTab({ url: `/${path}` })
+      } else {
+        uni.navigateTo({ url: `/${path}` })
+      }
+    }
+  })
+  // #endif
+}
 </script>
 
 <style lang="scss">
-	@import "uview-plus/index.scss";
+@import "uview-plus/index.scss";
 
-	// -------适配底部安全区  苹果x系列刘海屏
+// -------适配底部安全区  苹果x系列刘海屏
 
-	// #ifdef MP-WEIXIN
-	.mp-iphonex-bottom {
-		padding-bottom: constant(safe-area-inset-bottom);
-		padding-bottom: env(safe-area-inset-bottom);
-		box-sizing: content-box;
-		height: auto !important;
-		padding-top: 10rpx;
-	}
+// #ifdef MP-WEIXIN
+.mp-iphonex-bottom {
+	padding-bottom: constant(safe-area-inset-bottom);
+	padding-bottom: env(safe-area-inset-bottom);
+	box-sizing: content-box;
+	height: auto !important;
+	padding-top: 10rpx;
+}
 
-	// #endif
+// #endif
 
-	body {
-		background-color: $bg-color;
-	}
+body {
+	background-color: $bg-color;
+}
 
-	/************************ */
-	.w200 {
-		width: 200rpx !important;
-	}
+/************************ */
+.w200 {
+	width: 200rpx !important;
+}
 
-	.flex1 {
-		flex: 1; //必须父级设置flex
-	}
+.flex1 {
+	flex: 1; //必须父级设置flex
+}
 </style>
diff --git a/components/default-page/default-page.vue b/components/default-page/default-page.vue
index a1d6d7d..4ac14f2 100644
--- a/components/default-page/default-page.vue
+++ b/components/default-page/default-page.vue
@@ -10,40 +10,30 @@
 	</view>
 </template>
 
-<script>
-export default {
-	props: {
-		// 购物车 cart 消息 msg  订单 order 查询 search
-		type: {
-			type: String,
-			default: 'search'
-		},
-		isBtn:{
-			type: Boolean,
-			default: false
-		},
-		title:{
-			type: String,
-			default: '没有相关内容'
-		}
-	},
-	
-	data() {
-		return {
-			src:''
-		};
-	},
-	mounted() {
-		this.src ='/static/default/default_'+ this.type + '.png';
-	},
-	methods: {
-		toHome() {
-			uni.switchTab({
-			    url: '/pages/home/home'
-			});
-		}
-	}
-};
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+
+const props = withDefaults(defineProps<{
+	type?: string
+	isBtn?: boolean
+	title?: string
+}>(), {
+	type: 'search',
+	isBtn: false,
+	title: '没有相关内容'
+})
+
+const src = ref('')
+
+onMounted(() => {
+	src.value = `/static/default/default_${props.type}.png`
+})
+
+const toHome = () => {
+	uni.switchTab({
+	    url: '/pages/home/home'
+	})
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/components/m-airbtn/index.vue b/components/m-airbtn/index.vue
index 00566e1..56039fd 100644
--- a/components/m-airbtn/index.vue
+++ b/components/m-airbtn/index.vue
@@ -13,72 +13,62 @@
   </view>
 </template>
 
-<script>
-import config from "@/config/config";
-import logoImg from "@/icon.png";
-export default {
-  data() {
-    return {
-      config, // 设置工具类
-      weChat: false,  // 是否微信浏览器，该项为true时不显示 当前整个页面
-      logo: logoImg, //显示的圆形logo
-    };
-  },
-  mounted() {
-    // #ifdef H5
-    // 判断是否是微信浏览器
-    var ua = navigator.userAgent.toLowerCase();
-    var isWeixin = ua.indexOf("micromessenger") != -1;
-    if (isWeixin) {
-      this.weChat = true;
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import config from "@/config/config"
+import logoImg from "@/icon.png"
+
+const weChat = ref(false)
+const logo = logoImg
+
+onMounted(() => {
+  // #ifdef H5
+  // 判断是否是微信浏览器
+  var ua = navigator.userAgent.toLowerCase();
+  var isWeixin = ua.indexOf("micromessenger") != -1;
+  weChat.value = isWeixin ? true : false
+  // #endif
+})
+
+/**
+ * 跳转到下载app页面
+ */
+const downloadApp = () => {
+  setTimeout(function () {
+    window.location.href = config.downloadLink;
+  }, 2000);
+}
+
+/**
+ * 打开app 仅在h5生效 使用ifream唤醒app
+ */
+const openApp = () => {
+  let src: string = ''
+  if (location.href) {
+    src = location.href.split("/pages")[1];
+  }
+  let t = `${config.schemeLink}pages${src}`
+
+  try {
+    var e = navigator.userAgent.toLowerCase(),
+      n = e.match(/cpu iphone os (.*?) like mac os/);
+    if (
+      ((n = null !== n ? n[1].replace(/_/g, ".") : 0), parseInt(n) >= 9)
+    ) {
+      window.location.href = t
+
+      downloadApp()
     } else {
-      this.weChat = false;
+      var r = document.createElement("iframe");
+      (r.src = t), (r.style.display = "none"), document.body.appendChild(r)
+
+      downloadApp()
     }
-    // #endif
-  },
-  methods: {
-
-    /**
-     * 跳转到下载app页面
-     */
-    downloadApp() {
-      setTimeout(function () {
-        window.location.href = config.downloadLink;
-      }, 2000);
-    },
-
-    /**
-     * 打开app 仅在h5生效 使用ifream唤醒app
-     */
-    openApp() {
-      let src;
-      if (location.href) {
-        src = location.href.split("/pages")[1];
-      }
-      let t = `${config.schemeLink}pages${src}`;
-
-      try {
-        var e = navigator.userAgent.toLowerCase(),
-          n = e.match(/cpu iphone os (.*?) like mac os/);
-        if (
-          ((n = null !== n ? n[1].replace(/_/g, ".") : 0), parseInt(n) >= 9)
-        ) {
-          window.location.href = t;
-
-          this.downloadApp();
-        } else {
-          var r = document.createElement("iframe");
-          (r.src = t), (r.style.display = "none"), document.body.appendChild(r);
-
-          this.downloadApp();
-        }
-      } catch (e) {
-        window.location.href = t;
-        this.downloadApp();
-      }
-    },
-  },
-};
+  } catch (e) {
+    window.location.href = t
+    downloadApp()
+  }
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/components/m-buy/goods.vue b/components/m-buy/goods.vue
index 4698294..23debb1 100644
--- a/components/m-buy/goods.vue
+++ b/components/m-buy/goods.vue
@@ -82,19 +82,19 @@
 
 							<!-- 拼团购买，仅筛选出当前拼团类型商品 -->
 							<template v-for="(spec_val, spec_index) in spec.values" :key="spec_index">
-							<view
-								v-if="parentOrder && spec_val.skuId == goodsDetail.id"
-								:class="{ active: spec_val.value == currentSelected[specIndex] }"
-								class="skus-view-item"
-								@click="handleClickSpec(spec, specIndex, spec_val)"
-							>
-								{{ spec_val.value }}
-							</view>
+								<view
+									v-if="parentOrder && spec_val.skuId == goodsDetail.id"
+									:class="{ active: spec_val.value == currentSelected[specIndex] }"
+									class="skus-view-item"
+									@click="handleClickSpec(spec, specIndex, spec_val)"
+								>
+									{{ spec_val.value }}
+								</view>
 							</template>
 						</view>
 					</view>
 					<div class="soldout" v-if="goodsDetail.quantity === 0">
-						<u-alert-tips type="warning" title="商品已售罄" description="当前商品库存为0"></u-alert-tips>
+						<u-alert type="warning" title="商品已售罄" :description="'当前商品库存为0'"></u-alert>
 					</div>
 					<!-- 数量 -->
 					<view v-if="goodsDetail.quantity !== 0" class="goods-skus-number flex flex-a-c flex-j-sb">
@@ -111,313 +111,269 @@
 		</u-popup>
 	</div>
 </template>
-<script>
-import * as API_trade from '@/api/trade.js';
-import setup from './popup';
-import uniNumberBox from '@/components/uni-number-box'
-export default {
-	components: {
-		uniNumberBox
-	},
-	data() {
-		return {
-			setup,
-			num: this.wholesaleList && this.wholesaleList.length > 0 ? this.wholesaleList[0].num : 1,
 
-			selectName: '', //选中商品的昵称
-			selectSkuList: '', //选中商铺sku,
-			selectedSpecImg: '', //选中的图片路径
-			buyType: '', //用于存储促销，拼团等活动类型
-			parentOrder: '', //父级拼团活动的数据 - 如果是团员则有数据
-			formatList: [],
-			currentSelected: [],
-			skuList: '',
-			isClose: false //是否可以点击遮罩关闭
-		};
-	},
-	props: {
-		wholesaleList: {
-			type: null,
-			default: false
-		},
-		buyMask: {
-			type: Boolean,
-			default: false
-		},
-		isGroup: {
-			type: Boolean,
-			default: false
-		},
-		goodsDetail: {
-			default: '',
-			type: null
-		},
-		selectedSku: {
-			default: '',
-			type: null
-		},
-		goodsSpec: {
-			default: '',
-			type: null
-		},
-		addr: {
-			default: '',
-			type: null
-		},
-		pointDetail: {
-			default: '',
-			type: null
+<script setup lang="ts">
+import { ref, reactive, watch, onMounted } from 'vue'
+import * as API_trade from '@/api/trade.js'
+import setup from './popup.js'
+import uniNumberBox from '@/components/uni-number-box.vue'
+import { goodsFormatPrice } from '@/utils/filters.js'
+
+const props = withDefaults(defineProps<{
+	wholesaleList?: any[] | boolean
+	buyMask?: boolean
+	isGroup?: boolean
+	goodsDetail?: any
+	selectedSku?: any | null
+	goodsSpec?: any | null
+	addr?: any | null
+	pointDetail?: any | null
+}>(), {
+	wholesaleList: false,
+	buyMask: false,
+	isGroup: false,
+	goodsDetail: () => ({}),
+	selectedSku: '',
+	goodsSpec: '',
+	addr: '',
+	pointDetail: ''
+})
+
+const emit = defineEmits(['closeBuy', 'changed', 'handleClickSku', 'queryCart'])
+
+const num = ref(props.wholesaleList && Array.isArray(props.wholesaleList) && props.wholesaleList.length > 0 ? props.wholesaleList[0].num : 1)
+
+const selectName = ref('')
+const selectSkuList = ref<any>('')
+const selectedSpecImg = ref('')
+const buyType = ref('')
+const parentOrder = ref<any>('')
+const formatList = ref<any[]>([])
+const currentSelected = ref<string[]>([])
+const skuList = ref('')
+
+watch(num, (val) => {
+	val == 0 ? num.value = 1 : ''
+	if (val) {
+		//超过库存后修改回库存
+		if (val > props.goodsDetail.quantity) {
+			num.value = props.goodsDetail.quantity
 		}
-	},
-	computed: {
-		wholesalePrice(key) {
-			return this.wholesaleList.length
-				? this.wholesaleList.map(item => {
-						return item.price;
-				  })
-				: [];
-		},
-		wholesaleNum(key) {
-			return this.wholesaleList.length
-				? this.wholesaleList.map(item => {
-						return item.num;
-				  })
-				: [];
-		}
-	},
-	watch: {
-		num(val) {
-			
-			val == 0 ? this.num = 1 : ''
-			if (val) {
-				
-				//超过库存后修改回库存
-				if (val > this.goodsDetail.quantity) {
-					this.$nextTick(function() {
-						this.num = this.goodsDetail.quantity;
-					});
-				}
-			}
-		},
-		buyType: {
-			handler(val) {
-				if (val) {
-					this.buyType = val;
-				}
-			},
-			immediate: true
-		},
-		selectSkuList: {
-			handler(val, oldval) {
-				this.$emit('changed', val);
-			},
-			deep: true
-		},
-		'goodsDetail.quantity': {
-			handler(val) {
-				if (val == 0) {
-					uni.showToast({
-						title: '商品已售罄',
-						duration: 2000,
-						icon: 'none'
-					})
-					this.num = 1;
-				}
-			}
-		}
-	},
-
-	methods: {
-		numCheck(val) {
-			if (this.wholesaleList && this.wholesaleList.length > 0) {
-				if (this.num <= this.wholesaleList[0].num) {
-					uni.showToast({
-						title: '批发商品购买数量不能小于起批数量!',
-						duration: 2000,
-						icon: 'none'
-					});
-					this.num = this.wholesaleList[0].num;
-				}
-			}
-		},
-		closeMask() {
-			this.$emit('closeBuy', false);
-		},
-		
-		/**点击规格 */
-		handleClickSpec(val, index, specValue) {
-			this.currentSelected[index] = specValue.value;
-			let selectedSkuId = this.goodsSpec.find(i => {
-				let matched = true;
-				let specValues = i.specValues.filter(j => j.specName !== 'images');
-				for (let n = 0; n < specValues.length; n++) {
-					if (specValues[n].specValue !== this.currentSelected[n]) {
-						matched = false;
-						return;
-					}
-				}
-				if (matched) {
-					return i;
-				}
-			});
-			if (selectedSkuId?.skuId) {
-				this.currentSelected[index] = specValue.value;
-				this.selectSkuList = {
-					spec: {
-						specName: val.name,
-						specValue: specValue.value
-					},
-					data: this.goodsDetail
-				};
-				this.selectName = specValue.value;
-
-				this.$emit('handleClickSku', {
-					skuId: selectedSkuId.skuId,
-					goodsId: this.goodsDetail.goodsId
-				});
-			} else {
-				uni.showToast({
-					title: '暂无该商品!',
-					duration: 2000,
-					icon: 'none'
-				});
-			}
-		},
-
-		/**
-		 * 直接购买
-		 */
-		buy(data) {
-			API_trade.addToCart(data).then(res => {
-				if (res.data.success) {
-					uni.navigateTo({
-						url: `/pages/order/fillorder?way=${data.cartType}&addr=${''}&parentOrder=${encodeURIComponent(JSON.stringify(this.parentOrder))}`
-					});
-				}
-			});
-		},
-
-		/**
-		 * 添加到购物车或购买
-		 */
-		addToCartOrBuy(val) {
-			if (!this.selectSkuList) {
-				uni.showToast({
-					title: '请选择规格商品',
-					icon: 'none'
-				});
-				return;
-			}
-			let data = {
-				skuId: this.goodsDetail.id,
-				num: this.num
-			};
-
-			if (val == 'cart') {
-				API_trade.addToCart(data).then(res => {
-					if (res.data.code == 200) {
-						uni.showToast({
-							title: '商品已添加到购物车',
-							icon: 'none'
-						});
-
-						this.$emit('queryCart');
-						this.closeMask();
-					}
-				});
-			} else {
-				// 判断是否拼团商品
-				if (this.buyType) {
-					data.cartType = 'PINTUAN';
-				} else if (this.goodsDetail.goodsType == 'VIRTUAL_GOODS') {
-					data.cartType = 'VIRTUAL';
-				} else {
-					data.cartType = 'BUY_NOW';
-				}
-
-				API_trade.addToCart(data).then(res => {
-					if (res.data.code == 200) {
-						uni.navigateTo({
-							url: `/pages/order/fillorder?way=${data.cartType}&addr=${this.addr.id || ''}&parentOrder=${encodeURIComponent(JSON.stringify(this.parentOrder))}`
-						});
-					}
-				});
-			}
-		},
-		formatSku(list) {
-			// 格式化数据
-			let arr = [{}];
-
-			if (!Array.isArray(list)) {
-				return false;
-			}
-			list.forEach((item, index) => {
-				item.specValues.forEach((spec, specIndex) => {
-					let name = spec.specName;
-					let values = {
-						value: spec.specValue,
-						quantity: item.quantity,
-						skuId: item.skuId
-					};
-					if (name === 'images') {
-						return;
-					}
-
-					arr.forEach((arrItem, arrIndex) => {
-						if (
-							arrItem.name == name &&
-							arrItem.values &&
-							!arrItem.values.find(i => {
-								return i.value === values.value;
-							})
-						) {
-							arrItem.values.push(values);
-						}
-
-						let keys = arr.map(key => {
-							return key.name;
-						});
-						if (!keys.includes(name)) {
-							arr.push({
-								name: name,
-								values: [values]
-							});
-						}
-					});
-				});
-			});
-
-			arr.shift();
-			this.formatList = arr;
-
-			list.forEach(item => {
-				// 默认选中
-				if (item.skuId === this.goodsDetail.id) {
-					item.specValues
-						.filter(i => i.specName !== 'images')
-						.forEach((value, _index) => {
-							this.currentSelected[_index] = value.specValue;
-
-							this.selectName = value.specValue;
-
-							this.selectSkuList = {
-								spec: value,
-								data: this.goodsDetail
-							};
-						});
-				}
-			});
-
-			this.skuList = list;
-			// console.log(" this.skuList", this.skuList)
-		}
-	},
-
-	mounted() {
-		this.formatSku(this.goodsSpec);
 	}
-};
+})
+
+watch(() => props.buyType, (val) => {
+	if (val) {
+		buyType.value = val as string
+	}
+}, { immediate: true })
+
+watch(selectSkuList, (_val) => {
+	emit('changed', selectSkuList.value)
+}, { deep: true })
+
+watch(() => props.goodsDetail?.quantity, (val) => {
+	if (val == 0) {
+		uni.showToast({
+			title: '商品已售罄',
+			duration: 2000,
+			icon: 'none'
+		})
+		num.value = 1
+	}
+})
+
+const numCheck = (val: number) => {
+	if (Array.isArray(props.wholesaleList) && props.wholesaleList.length > 0) {
+		if (num.value <= props.wholesaleList[0].num) {
+			uni.showToast({
+				title: '批发商品购买数量不能小于起批数量!',
+				duration: 2000,
+				icon: 'none'
+			})
+			num.value = props.wholesaleList[0].num
+		}
+	}
+}
+
+const closeMask = () => {
+	emit('closeBuy', false)
+}
+
+/**点击规格 */
+const handleClickSpec = (val: any, index: number, specValue: any) => {
+	currentSelected.value[index] = specValue.value
+	let selectedSkuId = props.goodsSpec.find((i: any) => {
+		let matched = true
+		let specValues = i.specValues.filter((j: any) => j.specName !== 'images')
+		for (let n = 0; n < specValues.length; n++) {
+			if (specValues[n].specValue !== currentSelected.value[n]) {
+				matched = false
+				return
+			}
+		}
+		if (matched) {
+			return i
+		}
+	})
+	if (selectedSkuId?.skuId) {
+		currentSelected.value[index] = specValue.value
+		selectSkuList.value = {
+			spec: {
+				specName: val.name,
+				specValue: specValue.value
+			},
+			data: props.goodsDetail
+		}
+		selectName.value = specValue.value
+
+		emit('handleClickSku', {
+			skuId: selectedSkuId.skuId,
+			goodsId: props.goodsDetail.goodsId
+		})
+	} else {
+		uni.showToast({
+			title: '暂无该商品!',
+			duration: 2000,
+			icon: 'none'
+		})
+	}
+}
+
+/**
+ * 直接购买
+ */
+const buy = (data: any) => {
+	API_trade.addToCart(data).then(res => {
+		if (res.data.success) {
+			uni.navigateTo({
+				url: `/pages/order/fillorder?way=${data.cartType}&addr=${''}&parentOrder=${encodeURIComponent(JSON.stringify(parentOrder.value))}`
+			})
+		}
+	})
+}
+
+/**
+ * 添加到购物车或购买
+ */
+const addToCartOrBuy = (val: string) => {
+	if (!selectSkuList.value) {
+		uni.showToast({
+			title: '请选择规格商品',
+			icon: 'none'
+		})
+		return
+	}
+	let data = {
+		skuId: props.goodsDetail.id,
+		num: num.value
+	}
+
+	if (val == 'cart') {
+		API_trade.addToCart(data).then(res => {
+			if (res.data.code == 200) {
+				uni.showToast({
+					title: '商品已添加到购物车',
+					icon: 'none'
+				})
+
+				emit('queryCart')
+				closeMask()
+			}
+		})
+	} else {
+		// 判断是否拼团商品
+		if (buyType.value) {
+			data.cartType = 'PINTUAN'
+		} else if (props.goodsDetail.goodsType == 'VIRTUAL_GOODS') {
+			data.cartType = 'VIRTUAL'
+		} else {
+			data.cartType = 'BUY_NOW'
+		}
+
+		API_trade.addToCart(data).then(res => {
+			if (res.data.code == 200) {
+				uni.navigateTo({
+					url: `/pages/order/fillorder?way=${data.cartType}&addr=${props.addr?.id || ''}&parentOrder=${encodeURIComponent(JSON.stringify(parentOrder.value))}`
+				})
+			}
+		})
+	}
+}
+
+const formatSku = (list: any[]) => {
+	// 格式化数据
+	let arr: any[] = [{}]
+
+	if (!Array.isArray(list)) {
+		return false
+	}
+	list.forEach((_item, _index) => {
+		let item = list[_index]
+		item.specValues.forEach((spec: any, specIndex: number) => {
+			let name = spec.specName
+		let values = {
+			value: spec.specValue,
+			quantity: item.quantity,
+			skuId: item.skuId
+		}
+		if (name === 'images') {
+			return
+		}
+
+		arr.forEach((arrItem, arrIndex) => {
+			if (
+				arrItem.name == name &&
+				arrItem.values &&
+				!arrItem.values.find((i: any) => {
+					return i.value === values.value
+				})
+			) {
+				arrItem.values.push(values)
+			}
+
+			let keys = arr.map(key => {
+				return key.name
+			})
+			if (!keys.includes(name)) {
+				arr.push({
+					name: name,
+					values: [values]
+				})
+			}
+		})
+		})
+	})
+
+	arr.shift()
+	formatList.value = arr
+
+	list.forEach(item => {
+		// 默认选中
+		if (item.skuId === props.goodsDetail.id) {
+			item.specValues
+				.filter(i => i.specName !== 'images')
+				.forEach((value, _index) => {
+					currentSelected.value[_index] = value.specValue
+
+					selectName.value = value.specValue
+
+					selectSkuList.value = {
+						spec: value,
+						data: props.goodsDetail
+					}
+				})
+		}
+	})
+
+	skuList.value = list
+}
+
+onMounted(() => {
+	formatSku(props.goodsSpec)
+})
 </script>
+
 <style lang="scss" scoped>
 @import './popup.scss';
 
diff --git a/components/m-canvas/index.vue b/components/m-canvas/index.vue
index a59a2fb..32efc88 100644
--- a/components/m-canvas/index.vue
+++ b/components/m-canvas/index.vue
@@ -17,168 +17,156 @@
 
   </div>
 </template>
-<script>
+<script setup lang="ts">
+import { ref, onMounted, getCurrentInstance } from 'vue'
 // 引入绘制插件
-import DrawPoster from "@/js_sdk/u-draw-poster";
-import logoImg from "@/pages/passport/static/logo-title.png";
+import DrawPoster from "@/js_sdk/u-draw-poster"
+import logoImg from "@/pages/passport/static/logo-title.png"
 
-export default {
-  data: () => ({
-    imgUrl: "", //绘制出来的图片路径
-    show: false, //是否展示模态框
-    dp: {}, //绘制的dp对象，用于存储绘制等一些方法。
-    logo: logoImg, //本地logo地址
-  }),
+const instance = getCurrentInstance()
 
-  props: {
-    /**
-     * 父级传参的数据
-     */
-    res: {
-      type: null,
-      default: "",
+const props = defineProps<{
+	res?: any
+}>()
+
+const imgUrl = ref("")
+const show = ref(false)
+const dp = ref<any>({})
+const logo = logoImg
+
+/**
+ * 解决微信小程序中图片模糊问题
+ */
+// #ifdef MP-WEIXIN
+const st2 = (size: number) => size * 2
+// #endif
+
+// #ifndef MP-WEIXIN
+const st2 = (size: number) => size
+// #endif
+
+/**
+ * 保存图片
+ */
+const downLoad = () => {
+  uni.saveImageToPhotosAlbum({
+    filePath: imgUrl.value,
+    success: function () {
+      uni.showToast({
+        title: "保存成功！",
+        icon: "none",
+      })
     },
-  },
-  onUnload() {},
-
-  methods: {
-    /**
-     * 解决微信小程序中图片模糊问题
-     */
-    // #ifdef MP-WEIXIN
-    st2: (size) => size * 2,
-    // #endif
-
-    // #ifndef MP-WEIXIN
-    st2: (size) => size,
-    // #endif
-
-    /**
-     * 保存图片
-     */
-    downLoad() {
-      uni.saveImageToPhotosAlbum({
-        filePath: this.imgUrl,
-        success: function () {
-          uni.showToast({
-            title: "保存成功！",
-            icon: "none",
-          });
-        },
-        fail: function () {
-          uni.showToast({
-            title: "保存失败，请稍后重试！",
-            icon: "none",
-          });
-        },
-      });
+    fail: function () {
+      uni.showToast({
+        title: "保存失败，请稍后重试！",
+        icon: "none",
+      })
     },
+  })
+}
 
-    /**
-     * 创建canvas
-     */
-    async init() {
-      this.show = true;
-      this.dp = await DrawPoster.build({
-        selector: "canvas",
-        componentThis: this,
-        loading: true,
-        debugging: true,
-      });
-      let dp = this.dp;
-      // #ifdef MP-WEIXIN
-      // 用于微信小程序中画布错乱问题
-      dp.canvas.width = this.st2(600);
-      dp.canvas.height = this.st2(960);
-      // #endif
-      this.draw(dp);
-    },
+/**
+ * 创建canvas
+ */
+const init = async () => {
+  show.value = true
+  dp.value = await DrawPoster.build({
+    selector: "canvas",
+    componentThis: instance?.proxy,
+    loading: true,
+    debugging: true,
+  })
+  let dpVal = dp.value
+  // #ifdef MP-WEIXIN
+  // 用于微信小程序中画布错乱问题
+  dpVal.canvas.width = st2(600)
+  dpVal.canvas.height = st2(960)
+  // #endif
+  await draw(dpVal)
+}
 
-    async draw(dp) {
-      const { width, height, background, title } = this.res.container;
-      const { code, img, price } = this.res.bottom;
+const draw = async (dp: any) => {
+  const { width, height, background, title } = props.res.container
+  const { code, img, price } = props.res.bottom
 
-      // /** 绘制背景 */
-      await dp.draw((ctx) => {
-        ctx.fillStyle = background;
-        ctx.fillRoundRect(
-          this.st2(0),
-          this.st2(0),
-          this.st2(width),
-          this.st2(height),
-          this.st2(12)
-        );
-        ctx.clip();
-      });
-      /** 绘制图片 */
-      dp.draw(async (ctx) => {
-        await Promise.all([
-          // 绘制Logo
-          ctx.drawImage(
-            this.logo,
-            this.st2(175),
-            this.st2(0),
-            this.st2(256),
-            this.st2(144)
-          ),
-          // 中间图片
-          ctx.drawImage(
-            img,
-            this.st2(100),
-            this.st2(150),
-            this.st2(400),
-            this.st2(400)
-          ),
-          // 二维码
-          ctx.drawImage(
-            code,
-            this.st2(39),
-            this.st2(750),
-            this.st2(150),
-            this.st2(150)
-          ),
-        ]);
-      });
+  // /** 绘制背景 */
+  await dp.draw((ctx: any) => {
+    ctx.fillStyle = background
+    ctx.fillRoundRect(
+      st2(0),
+      st2(0),
+      st2(width),
+      st2(height),
+      st2(12)
+    )
+    ctx.clip()
+  })
+  /** 绘制图片 */
+  dp.draw(async (ctx: any) => {
+    await Promise.all([
+      // 绘制Logo
+      ctx.drawImage(
+        logo,
+        st2(175),
+        st2(0),
+        st2(256),
+        st2(144)
+      ),
+      // 中间图片
+      ctx.drawImage(
+        img,
+        st2(100),
+        st2(150),
+        st2(400),
+        st2(400)
+      ),
+      // 二维码
+      ctx.drawImage(
+        code,
+        st2(39),
+        st2(750),
+        st2(150),
+        st2(150)
+      ),
+    ])
+  })
 
-      /** 绘制中间文字*/
-      await dp.draw((ctx) => {
-        ctx.fillStyle = "#333";
-        ctx.font = `bold ${this.st2(24)}px PingFang SC`;
-        ctx.textAlign = "center";
-        ctx.fillWarpText({
-          text: title,
-          maxWidth: this.st2(500),
-          x: this.st2(300),
-          y: this.st2(600),
-          layer: 1,
-        });
+  /** 绘制中间文字*/
+  await dp.draw((ctx: any) => {
+    ctx.fillStyle = "#333"
+    ctx.font = `bold ${st2(24)}px PingFang SC`
+    ctx.textAlign = "center"
+    ctx.fillWarpText({
+      text: title,
+      maxWidth: st2(500),
+      x: st2(300),
+      y: st2(600),
+      layer: 1,
+    })
 
-        ctx.fillStyle = "#ff3c2a";
-        ctx.font = `${this.st2(38)}px PingFang SC`;
-        ctx.textAlign = "center";
-        ctx.fillText(price, this.st2(300), this.st2(680));
-      });
+    ctx.fillStyle = "#ff3c2a"
+    ctx.font = `${st2(38)}px PingFang SC`
+    ctx.textAlign = "center"
+    ctx.fillText(price, st2(300), st2(680))
+  })
 
-      // /** 绘制底部文字 */
-      await dp.draw((ctx) => {
-        ctx.fillStyle = "#666";
-        ctx.font = `${this.st2(24)}px PingFang SC`;
-        ctx.fillText("长按图片，识别二维码", this.st2(200), this.st2(866));
-        ctx.fillStyle = "#666";
-        ctx.font = `${this.st2(24)}px PingFang SC`;
-        ctx.fillText("查看商品详情", this.st2(200), this.st2(900));
-      });
+  // /** 绘制底部文字 */
+  await dp.draw((ctx: any) => {
+    ctx.fillStyle = "#666"
+    ctx.font = `${st2(24)}px PingFang SC`
+    ctx.fillText("长按图片，识别二维码", st2(200), st2(866))
+    ctx.fillStyle = "#666"
+    ctx.font = `${st2(24)}px PingFang SC`
+    ctx.fillText("查看商品详情", st2(200), st2(900))
+  })
 
-      this.imgUrl = await dp.createImagePath();
+  imgUrl.value = await dp.createImagePath()
+}
 
-      // console.log(posterImgUrl)
-    },
-  },
-
-  async mounted() {
-    this.init();
-  },
-};
+onMounted(() => {
+  init()
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/components/m-city/m-city.vue b/components/m-city/m-city.vue
index 369a890..efddaa8 100644
--- a/components/m-city/m-city.vue
+++ b/components/m-city/m-city.vue
@@ -79,192 +79,182 @@
   </view>
 </template>
 
-<script>
+<script setup lang="ts">
+import { ref, getCurrentInstance } from 'vue'
+import { getRegionsById } from "@/api/common.js"
+
+const instance = getCurrentInstance()
+
 let windowWidth = 0
-import { getRegionsById } from "@/api/common.js";
-export default {
-  name: "UniCityNvue",
-  props: {
-    headTitle: {
-      //标题
-      type: String,
-      default: "区域选择",
-    },
-    pickerSize: {
-      // 使用多少个tab
-      type: [String, String],
-      default: "1",
-    },
-    provinceData: {
-      // 默认的省市区id，如果不使用id的情况下则为[]；
-      type: Array,
-      default: function () {
-        return [];
+
+const props = withDefaults(defineProps<{
+	headTitle?: string
+	pickerSize?: string | string[]
+	provinceData?: any[]
+}>(), {
+	headTitle: "区域选择",
+	pickerSize: "1",
+	provinceData: () => [],
+})
+
+const emit = defineEmits(['funcValue'])
+
+const clearRightIcon = ref(true)
+const scrollLeft = ref(500)
+const scrollTop = ref(0)
+const enableScroll = ref(true)
+const tabCurrentIndex = ref(0)
+const tabbars = ref<any[]>(props.provinceData)
+const pickersize = ref(props.pickerSize)
+const showPicker = ref(false)
+
+/**
+ * 显示选择器
+ */
+const show = () => {
+  showPicker.value = true
+  if (tabbars.value[0].children.length == 0) {
+    getRegionsById(0).then((res: any) => {
+      tabbars.value[0].children = res.data.result
+    })
+  }
+
+  windowWidth = uni.getSystemInfoSync().windowWidth
+}
+
+/**
+ * 关闭选择器
+ */
+const hide = () => {
+  showPicker.value = false
+}
+
+/**
+ * tab切换
+ */
+const changeTab = (e: number) => {
+  let index = e
+  setScroll(index)
+  //延迟300ms,等待swiper动画结束再修改tabbar
+  tabCurrentIndex.value = index
+  setTimeout(() => {
+    getScroll("show" + index)
+  }, 10)
+}
+
+/**
+ * 获得元素的大小
+ */
+const getElSize = (id: string): Promise<any> => {
+  return new Promise((res) => {
+    let el = uni
+      .createSelectorQuery()
+      .in(instance!.proxy)
+      .select("#" + id)
+    el.fields(
+      {
+        size: true,
+        scrollOffset: true,
+        rect: true,
       },
-    },
-  },
-  data() {
-    return {
-      clearRightIcon: true, //是否显示右侧关闭icon
-      scrollLeft: 500, //顶部选项卡左滑距离
-      scrollTop: 0, //默认滚动顶部为0
-      enableScroll: true, //是否启用滚动
-      tabCurrentIndex: 0, //当前选项卡索引
-      tabbars: this.provinceData, //默认的省市区id
-      pickersize: this.pickerSize, //多少个tab 推荐为4级 
-      showPicker: false, //显示选取器
-    };
-  },
-  methods: {
-
-    /**
-     * 显示选择器
-     */
-    show() {
-      this.showPicker = true;
-      if (this.tabbars[0].children.length == 0) {
-        getRegionsById(0).then((res) => {
-          this.tabbars[0].children = res.data.result;
-        });
+      (data: any) => {
+        res(data)
       }
+    ).exec()
+  })
+}
 
-      windowWidth = uni.getSystemInfoSync().windowWidth;
-    },
-
-    /**
-     * 关闭选择器
-     */
-    hide() {
-      this.showPicker = false;
-    },
-    
-    /**
-     * tab切换
-     */
-    changeTab(e) {
-      let index = e;
-      this.setScroll(index);
-      //延迟300ms,等待swiper动画结束再修改tabbar
-      this.tabCurrentIndex = index;
-      setTimeout(() => {
-        this.getScroll("show" + index);
-      }, 10);
-    },
-    
-    /**
-     * 获得元素的大小
-     */
-    getElSize(id) {
-      return new Promise((res, rej) => {
-        let el = uni
-          .createSelectorQuery()
-          .in(this)
-          .select("#" + id);
-        el.fields(
-          {
-            size: true,
-            scrollOffset: true,
-            rect: true,
-          },
-          (data) => {
-            res(data);
-          }
-        ).exec();
-      });
-    },
-
-    /**
-     * 点击城市后回调
-     */
-    async changCity(index, item) {
-      if (this.tabbars[index].id != item.id) {
-        this.tabbars[index].localName = item.name;
-        this.tabbars[index].id = item.id;
-        this.tabbars[index].center = item.center
-        if (index < this.tabbars.length - 1) {
-          this.tabbars.splice(index + 1, this.tabbars.length - index - 1);
-        }
-        if (this.tabbars.length < this.pickersize) {
-          uni.showLoading({
-            title: "加载中",
-            mask:true
-          });
-          try {
-            let data = await getRegionsById(item.id);
-            uni.hideLoading();
-            // 当前选项级为最后一级时回调，将选中的数据返回
-            if (data.data.result.length == 0) {
-              this.$emit("funcValue", this.tabbars);
-              this.hide();
-            } else {
-              // 将新的数据填充进下一级
-              var current = {
-                localName: "请选择",
-                id: "",
-                children: data.data.result,
-                
-              };
-              this.tabbars.push(current);
-              this.tabCurrentIndex++;
-
-              // 当前距离重新为最上面
-              this['scrollTop'] = 0
-            }
-            } catch (error) {
-              uni.hideLoading();
-            }
-         
+/**
+ * 点击城市后回调
+ */
+const changCity = async (index: number, item: any) => {
+  if (tabbars.value[index].id != item.id) {
+    tabbars.value[index].localName = item.name
+    tabbars.value[index].id = item.id
+    tabbars.value[index].center = item.center
+    if (index < tabbars.value.length - 1) {
+      tabbars.value.splice(index + 1, tabbars.value.length - index - 1)
+    }
+    if (tabbars.value.length < pickersize.value as number) {
+      uni.showLoading({
+        title: "加载中",
+        mask: true
+      })
+      try {
+        let data = await getRegionsById(item.id)
+        uni.hideLoading()
+        // 当前选项级为最后一级时回调，将选中的数据返回
+        if (data.data.result.length == 0) {
+          emit("funcValue", tabbars.value)
+          hide()
         } else {
-          this.$emit("funcValue", this.tabbars);
-          this.hide();
-        }
-      }
-    },
+          // 将新的数据填充进下一级
+          var current = {
+            localName: "请选择",
+            id: "",
+            children: data.data.result,
+          }
+          tabbars.value.push(current)
+          tabCurrentIndex.value++
 
-    /**
-     * 获取当前tab中滚动的距离
-     */
-    async setScroll(index) {
-      let width = 0;
-      let nowWidth = 0;
-      for (let i = 0; i <= index; i++) {
-        let result = await this.getElSize("tab" + i);
-        width += result.width;
-        if (i === index) {
-          nowWidth = result.width;
+          // 当前距离重新为最上面
+          scrollTop.value = 0
         }
+      } catch (error) {
+        uni.hideLoading()
       }
-      if (width + nowWidth > windowWidth) {
-        this.scrollLeft = width + nowWidth;
-      } else {
-        this.scrollLeft = 0;
-      }
-    },
+    } else {
+      emit("funcValue", tabbars.value)
+      hide()
+    }
+  }
+}
 
-    /**
-     * 计算当前的滚动距离
-     */
-    getScroll(id) {
+/**
+ * 获取当前tab中滚动的距离
+ */
+const setScroll = async (index: number) => {
+  let width = 0
+  let nowWidth = 0
+  for (let i = 0; i <= index; i++) {
+    let result = await getElSize("tab" + i)
+    width += result.width
+    if (i === index) {
+      nowWidth = result.width
+    }
+  }
+  if (width + nowWidth > windowWidth) {
+    scrollLeft.value = width + nowWidth
+  } else {
+    scrollLeft.value = 0
+  }
+}
+
+/**
+ * 计算当前的滚动距离
+ */
+const getScroll = (id: string) => {
+  uni
+    .createSelectorQuery()
+    .in(instance!.proxy)
+    .select(".panel-scroll-box")
+    .boundingClientRect((data: any) => {
       uni
         .createSelectorQuery()
-        .in(this)
-        .select(".panel-scroll-box")
-        .boundingClientRect((data) => {
-          uni
-            .createSelectorQuery()
-            .in(this)
-            .select("#" + id)
-            .boundingClientRect((res) => {
-              if (res != undefined && res != null && res != "") {
-                this.scrollTop = res.top - data.top;
-              }
-            })
-            .exec();
+        .in(instance!.proxy)
+        .select("#" + id)
+        .boundingClientRect((res: any) => {
+          if (res != undefined && res != null && res != "") {
+            scrollTop.value = res.top - data.top
+          }
         })
-        .exec();
-    },
-  },
-};
+        .exec()
+    })
+    .exec()
+}
+
+// 暴露方法给父组件调用
+defineExpose({ show, hide })
 </script>
 
 <style lang="scss" scoped>
diff --git a/components/m-goods-list/base-list.vue b/components/m-goods-list/base-list.vue
index 3c6e933..07b6ccb 100644
--- a/components/m-goods-list/base-list.vue
+++ b/components/m-goods-list/base-list.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <view>
     <!-- 一行两列商品展示 -->
     <view class="goods-list" v-if="type == 'twoColumns'">
       <view v-for="(item, index) in res" :key="index" class="goods-item">
@@ -10,7 +10,7 @@
             height="330rpx"
            mode="aspectFit"
           >
-            <template #loading><u-loading></u-loading></template>
+            <template #loading><u-loading-icon></u-loading-icon></template>
           </u-image>
         </view>
         <view class="goods-detail">
@@ -57,7 +57,7 @@
     </view>
 	 <!-- 一行一列商品展示 -->
     <div v-if="type == 'oneColumns'">
-      <div  v-for="(item, index) in res" :key="index" class="goods-row">
+      div  v-for="(item, index) in res" :key="index" class="goods-row">
         <div class="flex goods-col">
           <div class="goods-img" @click="navigateToDetailPage(item)">
             <u-image
@@ -67,7 +67,7 @@
 							mode="aspectFit"
               :src="item.goodsImage || item.thumbnail"
             >
-              <template #loading><u-loading></u-loading></template>
+              <template #loading><u-loading-icon></u-loading-icon></template>
             </u-image>
           </div>
           <div class="goods-detail">
@@ -112,41 +112,26 @@
         </div>
       </div>
     </div>
-  </div>
+  </view>
 </template>
 
-<script>
-import commonTpl from "@/components/m-goods-list/common";
-export default {
-  data() {
-    return {
-      lightColor: this.$mainColor,
-    };
-  },
-  mixins: [commonTpl],
-  props: {
-	// 展示的类型
-	type:{
-		type:String,
-		default:"oneColumns"
-	},
-    // 遍历的数据
-    res: {
-      type: Array,
-      default: () => {
-        return [];
-      },
-    },
-  },
-  methods: {
-    // 跳转到商品详情
-    navigateToDetailPage(item) {
-      uni.navigateTo({
-        url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`,
-      });
-    },
-  },
-};
+<script setup lang="ts">
+import { useGoodsListCommon } from './common'
+import { goodsFormatPrice } from '@/utils/filters.js'
+
+const { lightSearchStr, getPromotion, navigateToDetailPage, navigateToStoreDetailPage } = useGoodsListCommon()
+
+const props = withDefaults(defineProps<{
+	type?: string
+	res?: any[]
+	storeName?: boolean
+	keyword?: string | null
+}>(), {
+	type: 'oneColumns',
+	res: () => [],
+	storeName: true,
+	keyword: ''
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/components/m-goods-list/common.ts b/components/m-goods-list/common.ts
new file mode 100644
index 0000000..1d1806f
--- /dev/null
+++ b/components/m-goods-list/common.ts
@@ -0,0 +1,90 @@
+import { useStore } from '@/store'
+
+/**
+ * 商品列表公共逻辑（原 common.vue mixin）
+ * 提供高亮搜索、unicode 转换、促销标签、导航跳转等通用方法
+ */
+export function useGoodsListCommon() {
+  const store = useStore()
+
+  const lightColor = store.getters.lightColor
+
+  /**
+   * 高亮显示搜索内容
+   */
+  const lightSearchStr = (keyword: string, str: string) => {
+    if (!keyword) {
+      return str
+    } else {
+      let unicodes = ''
+      for (let i of Array.from(keyword)) {
+        unicodes += unicode(i) + "|"
+      }
+      const rule = '(' + unicodes + ')'
+      const reg = new RegExp(rule, 'gi')
+      return str ? str.replace(reg, (matchValue) =>
+        `<span style="color:${lightColor}">${matchValue}</span>`
+      ) : ''
+    }
+  }
+
+  /**
+   * 转换为 unicode
+   */
+  const unicode = (str: string) => {
+    var value = ''
+    for (var i = 0; i < str.length; i++) {
+      value += '\\u' + leftZero4(parseInt(str.charCodeAt(i).toString(16)))
+    }
+    return value
+  }
+
+  const leftZero4 = (str: string) => {
+    if (str != null && str != '' && str != 'undefined') {
+      if (str.length == 2) {
+        return '00' + str
+      }
+    }
+    return str
+  }
+
+  /**
+   * 数据去重 只显示一次 减免 劵等
+   */
+  const getPromotion = (item: any) => {
+    if (item.promotionMap) {
+      let array: string[] = []
+      Object.keys(item.promotionMap).forEach((child) => {
+        if (!array.includes(child.split("-")[0])) {
+          array.push(child.split("-")[0])
+        }
+      })
+      return array
+    }
+  }
+
+  /**
+   * 跳转到商品详情
+   */
+  const navigateToDetailPage = (item: any) => {
+    uni.navigateTo({
+      url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`,
+    })
+  }
+
+  /**
+   * 跳转到店铺详情
+   */
+  const navigateToStoreDetailPage = (item: any) => {
+    uni.navigateTo({
+      url: `/pages/product/shopPage?id=${item.storeId}`,
+    })
+  }
+
+  return {
+    lightSearchStr,
+    getPromotion,
+    navigateToDetailPage,
+    navigateToStoreDetailPage,
+  }
+}
diff --git a/components/m-goods-list/common.vue b/components/m-goods-list/common.vue
deleted file mode 100644
index c4cdc56..0000000
--- a/components/m-goods-list/common.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
-</template>
-
-<script>
-	export default {
-		methods: {
-			// 高亮显示搜索内容	
-			lightSearchStr(keyword, str) {
-				if (!keyword) {
-					return str
-				} else {
-					let unicodes = '';
-					for (let i of Array.from(keyword)) {
-						unicodes += this.unicode(i) + "|"
-					}
-					const rule = '(' + unicodes + ')'
-					const reg = new RegExp(rule, 'gi');
-					return str ? str.replace(reg, matchValue =>
-						`<span style="color:${this.lightColor}">${matchValue}</span>`
-					) : ''
-				}
-			},
-			//  转换为unicode
-			unicode(str) {
-				var value = '';
-				for (var i = 0; i < str.length; i++) {
-					value += '\\u' + this.left_zero_4(parseInt(str.charCodeAt(i)).toString(16));
-				}
-				return value;
-			},
-			left_zero_4(str) {
-				if (str != null && str != '' && str != 'undefined') {
-					if (str.length == 2) {
-						return '00' + str;
-					}
-				}
-				return str;
-			},
-			// 数据去重一下 只显示一次 减免 劵 什么的
-			getPromotion(item) {
-				if (item.promotionMap) {
-					let array = [];
-					Object.keys(item.promotionMap).forEach((child) => {
-						if (!array.includes(child.split("-")[0])) {
-							array.push(child.split("-")[0]);
-						}
-					});
-					return array;
-				}
-			},
-			// 跳转到商品详情
-			navigateToDetailPage(item) {
-				uni.navigateTo({
-					url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`,
-				});
-			},
-			// 跳转地址
-			navigateToStoreDetailPage(item) {
-				uni.navigateTo({
-					url: `/pages/product/shopPage?id=${item.storeId}`,
-				});
-			},
-		},
-	}
-</script>
-
-<style lang='scss' scoped>
-	
-</style>
diff --git a/components/m-goods-list/list.vue b/components/m-goods-list/list.vue
index a200f44..ba7ce07 100644
--- a/components/m-goods-list/list.vue
+++ b/components/m-goods-list/list.vue
@@ -5,7 +5,7 @@
 			<view v-for="(item, index) in res" :key="index" class="goods-item">
 				<view class="image-wrapper" @click="navigateToDetailPage(item)">
 					<u-image :src="item.thumbnail" width="100%" height='330rpx' mode="aspectFit">
-						<template #loading><u-loading></u-loading></template>
+						<template #loading><u-loading-icon></u-loading-icon></template>
 					</u-image>
 				</view>
 				<view class="goods-detail">
@@ -51,7 +51,7 @@
 				<div class="flex goods-col">
 					<div class="goods-img" @click="navigateToDetailPage(item)">
 						<u-image width="230rpx" mode="aspectFit" border-radius='16' height="230rpx" :src="item.thumbnail">
-							<template #loading><u-loading></u-loading></template>
+							<template #loading><u-loading-icon></u-loading-icon></template>
 						</u-image>
 					</div>
 					<div class="goods-detail">
@@ -94,114 +94,32 @@
 	</view>
 </template>
 
-<script>
-	import commonTpl from '@/components/m-goods-list/common'
-	export default {
-		data() {
-			return {
-				lightColor: this.$mainColor
-			}
-		},
-		mixins: [commonTpl],
-		
-		props: {
-			// 遍历的数据
-			res: {
-				type: Array,
-				default: () => {
-					return []
-				}
-			},
-			// 一行两列还是一行一列显示
-			type: {
-				type: String,
-				default: 'twoColumns',
-				validator() {
-					return ['twoColumns', 'oneColumns']
-				}
-			},
-			storeName: {
-				type: Boolean,
-				default: true
-			},
-			tabBarGap: {
-				type: Boolean,
-				default: true
-			},
-			keyword: {
-				type: null,
-				default: ''
-			}
+<script setup lang="ts">
+import { watch } from 'vue'
+import { useGoodsListCommon } from './common'
+import { goodsFormatPrice } from '@/utils/filters.js'
 
-		},
-		watch: {
-			keyword(val) {
-				if (val) {
-					this.lightSearchStr(val)
-				}
-			}
-		},
-		methods: {
+const { lightSearchStr, getPromotion, navigateToDetailPage, navigateToStoreDetailPage } = useGoodsListCommon()
 
-			// 高亮显示搜索内容	
-			lightSearchStr(keyword, str) {
-				if (!keyword) {
-					return str
-				} else {
-					let unicodes = '';
-					for (let i of Array.from(keyword)) {
-						unicodes += this.unicode(i) + "|"
-					}
-					const rule = '(' + unicodes + ')'
-					const reg = new RegExp(rule, 'gi');
-					return str ? str.replace(reg, matchValue =>
-						`<span style="color:${this.lightColor}">${matchValue}</span>`
-					) : ''
-				}
-			},
-			//  转换为unicode
-			unicode(str) {
-				var value = '';
-				for (var i = 0; i < str.length; i++) {
-					value += '\\u' + this.left_zero_4(parseInt(str.charCodeAt(i)).toString(16));
-				}
-				return value;
-			},
-			left_zero_4(str) {
-				if (str != null && str != '' && str != 'undefined') {
-					if (str.length == 2) {
-						return '00' + str;
-					}
-				}
-				return str;
-			},
-			// 数据去重一下 只显示一次 减免 劵 什么的
-			getPromotion(item) {
-				if (item ? item.promotionMap : item.promotionMap) {
-					const fieldList = item ? item.promotionMap : item.promotionMap
-					let array = [];
-					Object.keys(fieldList).forEach((child) => {
-						if (!array.includes(child.split("-")[0])) {
-							array.push(child.split("-")[0]);
-						}
-					});
-					return array;
-				}
-			},
-			// 跳转到商品详情
-			navigateToDetailPage(item) {
-				uni.navigateTo({
-					url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`,
-				});
-			},
-			// 跳转地址
-			navigateToStoreDetailPage(item) {
-				uni.navigateTo({
-					url: `/pages/product/shopPage?id=${item.storeId}`,
-				});
-			},
-		}
+const props = withDefaults(defineProps<{
+	res?: any[]
+	type?: string
+	storeName?: boolean
+	tabBarGap?: boolean
+	keyword?: string | null
+}>(), {
+	res: () => [],
+	type: 'twoColumns',
+	storeName: true,
+	tabBarGap: true,
+	keyword: ''
+})
+
+watch(() => props.keyword, (val) => {
+	if (val) {
+		lightSearchStr(val as string, '')
 	}
+})
 </script>
 
 <style lang='scss' scoped>
@@ -212,6 +130,7 @@
 		.goods-list {
 			display: flex;
 			flex-wrap: wrap;
+			justify-content: space-between;
 			margin: 10rpx 20rpx 284rpx;
 			width: calc(100% - 40rpx);
 			box-sizing: border-box;
@@ -219,21 +138,17 @@
 			&.goods-list--embedded {
 				margin-bottom: 20rpx;
 			}
-	
+
 			>.goods-item {
 				background-color: #ffffff;
 				display: flex;
 				border-radius: 16rpx;
 				flex-direction: column;
-				width: calc(50% - 30rpx);
+				width: calc(50% - 10rpx);
 				margin-bottom: 20rpx;
 				padding-bottom: 20rpx;
-	
-				&:nth-child(2n + 1) {
-					margin-right: 20rpx;
-				}
-	
-	
+
+
 				.image-wrapper {
 					width: 100%;
 					height: 330rpx;
@@ -242,12 +157,12 @@
 					padding: 0;
 				}
 			}
-	
+
 			.count-config,
 			.store-seller-name {
 				font-size: $font-sm;
 			}
-	
+
 			.store-seller-name {
 				color: #666;
 				display: flex;
@@ -322,7 +237,7 @@
 
 		.goods-detail {
 			margin: 0 20rpx;
-	
+
 			>.title {
 				font-size: $font-base;
 				color: $font-color-dark;
@@ -334,7 +249,7 @@
 				-webkit-line-clamp: 2;
 				overflow: hidden;
 			}
-	
+
 			.promotion {
 				margin-top: 4rpx;
 				display: flex;
@@ -344,10 +259,10 @@
 					color: $light-color;
 					margin-right: 10rpx;
 					padding: 0 4rpx;
-					border-radius: 2rpx;
+					border-radius: 2px;
 				}
 			}
-	
+
 			.store-seller-name {
 				color: #666;
 				display: flex;
@@ -409,7 +324,7 @@
 				padding-right: 10rpx;
 				font-size: 24rpx;
 				color: $font-color-light;
-	
+
 				>.price {
 					font-size: 26rpx;
 					line-height: 1;
@@ -421,6 +336,5 @@
 					}
 				}
 			}
-	
 		}
 </style>
diff --git a/components/m-goods-list/promotion.vue b/components/m-goods-list/promotion.vue
index 928b954..57cc804 100644
--- a/components/m-goods-list/promotion.vue
+++ b/components/m-goods-list/promotion.vue
@@ -4,7 +4,7 @@
 			<div class="flex goods-col">
 				<div class="goods-img">
 					<u-image width="230rpx" mode="aspectFit" border-radius='16' height="230rpx" :src="item.goodsImage || item.thumbnail">
-						<template #loading><u-loading></u-loading></template>
+						<template #loading><u-loading-icon></u-loading-icon></template>
 					</u-image>
 				</div>
 				<div class="goods-detail">
@@ -43,43 +43,33 @@
 	</div>
 </template>
 
-<script>
-	import commonTpl from '@/components/m-goods-list/common'
-	export default {
-		data() {
-			return {
-				lightColor: this.$mainColor,
-			}
-		},
-		mixins: [commonTpl],
-		props: {
-			// 遍历的数据
-			res: {
-				type: Array,
-				default: () => {
-					return []
-				}
-			},
-			type:{
-				type:null,
-				default:""
-			}
-		},
-		methods: {
-			// 跳转到商品详情
-			navigateToDetailPage(item) {
-				if(this.type == 'kanJia'){
-					 uni.navigateTo({
-						url: `/pages/promotion/bargain/detail?id=${item.id}`,
-					});
-					return
-				}
-				uni.navigateTo({
-					url: `/pages/product/goods?id=${item.skuId}&goodsId=${item.goodsId}`,
-				});
-			},
-		}
+<script setup lang="ts">
+import { useGoodsListCommon } from './common'
+import { goodsFormatPrice } from '@/utils/filters.js'
+
+const { navigateToDetailPage } = useGoodsListCommon()
+
+const props = withDefaults(defineProps<{
+	res?: any[]
+	type?: string | null
+}>(), {
+	res: () => [],
+	type: ''
+})
+
+// 跳转到商品详情（覆盖公共方法，增加砍价跳转）
+const navigateToDetailPageOverride = (item: any) => {
+	if(props.type == 'kanJia'){
+		 uni.navigateTo({
+			url: `/pages/promotion/bargain/detail?id=${item.id}`,
+		})
+		return
 	}
+	navigateToDetailPage({
+		id: item.skuId,
+		goodsId: item.goodsId,
+	})
+}
 </script>
 
 <style lang='scss' scoped>
@@ -87,72 +77,72 @@
 		width: 152rpx;
 		height: 108rpx;
 	}
-	.flex-j-sb {
+.flex-j-sb {
 		width: 100%;
 	}
-	.goods-row {
-		background: #fff;
-		padding: 16rpx;
-		>.goods-col {
-			display: flex;
-			>.goods-img {
-				overflow: hidden;
-				flex: 4;
-			}
-			>.goods-detail {
-				flex: 7;
-			}
-		}
-	}
-	.goods-detail {
-		margin: 0 20rpx;
-		>.title {
-			font-size: $font-base;
-			color: $font-color-dark;
-			line-height: 1.5;
-			height: 86rpx;
-			padding: 10rpx 0 0;
-			display: -webkit-box;
-			-webkit-box-orient: vertical;
-			-webkit-line-clamp: 2;
-			overflow: hidden;
-		}
-
-		.count-config {
-			padding: 5rpx 0;
-			color: #666;
-			display: flex;
-			font-size: 24rpx;
-			letter-spacing:2rpx;
-			padding-left: 10rpx;
-
-			.count-config-text {
-				font-size: 24rpx;
-			}
-		}
-
-
-
-	}
-
-	.price-box {
-		margin-top: 10rpx;
+.goods-row {
+	background: #fff;
+	padding: 16rpx;
+	>.goods-col {
 		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding-right: 10rpx;
-		font-size: 24rpx;
-		color: $font-color-light;
-
-		>.price {
-			font-size: 26rpx;
-			line-height: 1;
-			color: $main-color;
-			font-weight: bold;
-
-			.price-int {
-				font-size: 48rpx;
-			}
+		>.goods-img {
+			overflow: hidden;
+			flex: 4;
+		}
+		>.goods-detail {
+			flex: 7;
 		}
 	}
+}
+.goods-detail {
+	margin: 0 20rpx;
+	>.title {
+		font-size: $font-base;
+		color: $font-color-dark;
+		line-height: 1.5;
+		height: 86rpx;
+		padding: 10rpx 0 0;
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 2;
+		overflow: hidden;
+	}
+
+	.count-config {
+		padding: 5rpx 0;
+		color: #666;
+		display: flex;
+		font-size: 24rpx;
+		letter-spacing:2rpx;
+		padding-left: 10rpx;
+
+		.count-config-text {
+			font-size: 24rpx;
+		}
+	}
+
+
+
+}
+
+.price-box {
+	margin-top: 10rpx;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding-right: 10rpx;
+	font-size: 24rpx;
+	color: $font-color-light;
+
+	>.price {
+		font-size: 26rpx;
+		line-height: 1;
+		color: $main-color;
+		font-weight: bold;
+
+		.price-int {
+			font-size: 48rpx;
+		}
+	}
+}
 </style>
diff --git a/components/m-goods-recommend/index.vue b/components/m-goods-recommend/index.vue
index 2e95cd5..61f8cb7 100644
--- a/components/m-goods-recommend/index.vue
+++ b/components/m-goods-recommend/index.vue
@@ -1,73 +1,63 @@
 <template>
-  <div>
-    <div class="goods-recommend">{{title ? `--${title}-- `:''}}</div>
+  <view>
+    <view class="goods-recommend">{{title ? `--${title}-- `:''}}</view>
 		 <goodsTemplate :res='goodsList' />
-  </div>
+  </view>
 </template>
-<script>
-	import goodsTemplate from '@/components/m-goods-list/list'
-import { getGoodsList } from "@/api/goods.js";
-export default {
-  data() {
-    return {
-      goodsList: [],
-      params: {
-        pageNumber: 1,
-      },
-    };
-  },
-  props: {
-    title: {
-      type: String,
-      default: "",
-    },
-    pageSize: {
-      type: null,
-      default: 12,
-    },
-    categoryId: {
-      type: null,
-      default: "",
-    },
-    storeId: {
-      type: null,
-      default: "",
-    },
-  },
-	components:{goodsTemplate},
-  mounted() {
-    this.initGoods();
-  },
-  methods: {
-    /**
-     * 初始化商品
-     */
-    async initGoods() {
-      let submit = JSON.parse(
-        JSON.stringify(
-          Object.assign(this.params, {
-            pageSize: this.pageSize,
-            categoryId: this.categoryId,
-            storeId: this.storeId,
-          })
-        )
-      );
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import goodsTemplate from '@/components/m-goods-list/list.vue'
+import { getGoodsList } from "@/api/goods.js"
 
-      Object.keys(submit).map((key) => {
-        if (!submit[key] || submit[key].length == 0) {
-          delete submit[key];
-        }
-      });
-      let goodsList = await getGoodsList(submit);
-      this.goodsList.push(...goodsList.data.result.records);
-    },
-    handleClick(item) {
-      uni.navigateTo({
-        url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`,
-      });
-    },
-  },
-};
+const props = withDefaults(defineProps<{
+	title?: string
+	pageSize?: number | null
+	categoryId?: string | null
+	storeId?: string | null
+}>(), {
+	title: '',
+	pageSize: 12,
+	categoryId: '',
+	storeId: ''
+})
+
+const goodsList = ref<any[]>([])
+const params = ref({
+	pageNumber: 1,
+})
+
+onMounted(() => {
+	initGoods()
+})
+
+/**
+ * 初始化商品
+ */
+const initGoods = async () => {
+	let submit = JSON.parse(
+		JSON.stringify(
+			Object.assign(params.value, {
+				pageSize: props.pageSize,
+				categoryId: props.categoryId,
+				storeId: props.storeId,
+			})
+		)
+	)
+
+	Object.keys(submit).map((key) => {
+		if (!submit[key] || (submit[key] as any).length == 0) {
+			delete submit[key]
+		}
+	})
+	let res = await getGoodsList(submit)
+	goodsList.value.push(...(res.data.result.records as any[]))
+}
+
+const handleClick = (item: any) => {
+	uni.navigateTo({
+		url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`,
+	})
+}
 </script>
 
 <style scoped lang="scss">
@@ -130,4 +120,4 @@ $w_94: 94%;
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/m-placard/index.vue b/components/m-placard/index.vue
index d93b0cf..96bf3e5 100644
--- a/components/m-placard/index.vue
+++ b/components/m-placard/index.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="index">
+	<view class="index">
 		<view v-model="show" class="slot-content">
 			<image @click="downLoad()" class="img" :src="imgUrl" />
 			<div class="canvas-hide">
@@ -11,181 +11,153 @@
 				<!-- #endif -->
 			</div>
 		</view>
-	</div>
+	</view>
 </template>
-<script>
+<script setup lang="ts">
+import { ref, onMounted, getCurrentInstance } from 'vue'
 // 引入绘制插件
-import DrawPoster from "@/js_sdk/u-draw-poster";
+import DrawPoster from "@/js_sdk/u-draw-poster"
 // 生成二维码
-import uQRCode from '@/components/Sansnn-uQRCode/uqrcode.js';
-import logoImg from "@/pages/passport/static/logo-title.png";
-import myFaceImg from "@/pages/passport/static/missing-face.png";
+import uQRCode from '@/components/Sansnn-uQRCode/uqrcode.js'
+import logoImg from "@/pages/passport/static/logo-title.png"
+import myFaceImg from "@/pages/passport/static/missing-face.png"
 
-export default {
-  data: () => ({
-    imgUrl: "", //绘制出来的图片路径
-    show: false, //是否展示模态框
-    dp: {}, //绘制的dp对象，用于存储绘制等一些方法。
-    logo: logoImg, 	// 本地logo地址
-	myFace: myFaceImg,	// 本地默认头像
-	sharingLink: '',	// 二维码链接
-  }),
-  props: {
-    /**
-     * 父级传参的数据
-     */
-    res: {
-      type: null,
-      default: "",
-    },
-  },
-  onUnload() {},
-  onReady() {},
-  methods: {
-    /** 解决微信小程序中图片模糊问题 */
-    // #ifdef MP-WEIXIN
-    st2: (size) => size * 2,
-    // #endif
+const instance = getCurrentInstance()
 
-    // #ifndef MP-WEIXIN
-    st2: (size) => size,
-    // #endif
+const props = defineProps<{
+	res?: any
+}>()
 
-    /** 保存图片 */
-	downLoad() {
-		uni.saveImageToPhotosAlbum({
-			filePath: this.imgUrl,
-			success: function () {
-				uni.showToast({title: "保存成功！",icon: "none",});
-			},
-			fail: function () {
-				uni.showToast({title: "保存失败，请稍后重试！",icon: "none",});
-			},
-		});
-	},
-    /** 创建canvas */
-    async init() {
-		this.show = true;
-		this.dp = await DrawPoster.build({
-			selector: "canvas",
-			componentThis: this,
-			loading: true,
-			debugging: true,
-		});
-		let dp = this.dp;
-		// #ifdef MP-WEIXIN
-		// 用于微信小程序中画布错乱问题
-		dp.canvas.width = this.st2(560);
-		dp.canvas.height = this.st2(800);
-		// #endif
-		this.showQRCode(dp);
-    },
-	/** 生成二维码 */
-	async showQRCode(dp){
-		await uQRCode.make({
-			canvasId: 'canvas', // canvas画布
-			componentInstance: this, 
-			text: this.res.bottom.code, // 二维码内容
-			size: 130, // 二维码大小 
-			margin: 5, // 二维码内边距
-			backgroundColor: '#ffffff', // ！ 二维码背景颜色
-			foregroundColor: '#000000', // ！二维码色块颜色
-			fileType: 'jpg',
-			errorCorrectLevel: 0, // <== 关键 容错率，M:0,L:1,H:2,Q:3,
-			// errorCorrectLevel: uQRCode.errorCorrectLevel.M, // <== 关键 容错率，M:0,L:1,H:2,Q:3,
-			success: res => {
-				this.sharingLink = res; // res => 图片路径
-				// 对画布进行绘制
-				this.draw(dp);
-			},
-			fail: res => {
-				// console.log('失败',res)
-			}
+const imgUrl = ref("")
+const show = ref(false)
+const dp = ref<any>({})
+const logo = logoImg
+const myFace = myFaceImg
+const sharingLink = ref('')
+
+/** 解决微信小程序中图片模糊问题 */
+// #ifdef MP-WEIXIN
+const st2 = (size: number) => size * 2
+// #endif
+
+// #ifndef MP-WEIXIN
+const st2 = (size: number) => size
+// #endif
+
+/** 保存图片 */
+const downLoad = () => {
+	uni.saveImageToPhotosAlbum({
+		filePath: imgUrl.value,
+		success: function () {
+			uni.showToast({title: "保存成功！",icon: "none"})
+		},
+		fail: function () {
+			uni.showToast({title: "保存失败，请稍后重试！",icon: "none"})
+		},
+	})
+}
+
+/** 创建canvas */
+const init = async () => {
+	show.value = true
+	dp.value = await DrawPoster.build({
+		selector: "canvas",
+		componentThis: instance?.proxy,
+		loading: true,
+		debugging: true,
+	})
+	let dpVal = dp.value
+	// #ifdef MP-WEIXIN
+	// 用于微信小程序中画布错乱问题
+	dpVal.canvas.width = st2(560)
+	dpVal.canvas.height = st2(800)
+	// #endif
+	await showQRCode(dpVal)
+}
+
+/** 生成二维码 */
+const showQRCode = async (dp: any) => {
+	await uQRCode.make({
+		canvasId: 'canvas',
+		componentInstance: instance?.proxy,
+		text: props.res.bottom.code,
+		size: 130,
+		margin: 5,
+		backgroundColor: '#ffffff',
+		foregroundColor: '#000000',
+		fileType: 'jpg',
+		errorCorrectLevel: 0,
+		success: (res: any) => {
+			sharingLink.value = res
+			draw(dp)
+		},
+		fail: (_res: any) => {
+			// console.log('失败',res)
+		}
+	})
+}
+
+const draw = async (dp: any) => {
+	const { face, nickName, desc } = props.res.memberInfo
+	const { width, height, background, title } = props.res.container
+	const { img, price } = props.res.bottom
+
+	/** 绘制背景 */
+	await dp.draw((ctx: any) => {
+		ctx.fillStyle = background
+		ctx.fillRoundRect(st2(0), st2(0), st2(width), st2(height), st2(12))
+		ctx.clip()
+	})
+	/** 绘制圆角矩形 */
+	await dp.draw(async (ctx: any) => {
+		ctx.fillStyle = "#ffffff"
+		ctx.strokeStyle = "#ffffff"
+		ctx.lineWidth = st2(1)
+		ctx.fillRoundRect(30, 150, 500, 620, 0)
+	})
+	/** 绘制图片 */
+	dp.draw(async (ctx: any) => {
+		await Promise.all([
+			ctx.drawImage(face ? face : myFace, st2(30), st2(30), st2(90), st2(90)),
+			ctx.drawImage(img, st2(60), st2(170), st2(440), st2(440)),
+			ctx.drawImage(sharingLink.value, st2(375), st2(625), st2(130), st2(130))
+		])
+	})
+	/** 绘制顶部文字（昵称 简述） */
+	await dp.draw((ctx: any) => {
+		ctx.fillStyle = "#666"
+		ctx.font = `${st2(24)}px PingFang SC`
+		ctx.fillText(nickName, st2(150), st2(65))
+		ctx.fillStyle = "#666"
+		ctx.font = `${st2(24)}px PingFang SC`
+		ctx.fillText(desc, st2(150), st2(105))
+	})
+	/** 绘制中间文字（商品名称 价格） */
+	await dp.draw((ctx: any) => {
+		ctx.fillStyle = "#333"
+		ctx.font = `bold ${st2(24)}px PingFang SC`
+		ctx.textAlign = "left"
+		ctx.fillWarpText({
+			text: title,
+			lineHeight: st2(32),
+			maxWidth: st2(280),
+			x: st2(60),
+			y: st2(710),
+			layer: 2,
 		})
-	},
-    async draw(dp) {
-		const { face, nickName, desc } = this.res.memberInfo;
-		const { width, height, background, title } = this.res.container;
-		const { code, img, price } = this.res.bottom;
+		ctx.fillStyle = "#ff3c2a"
+		ctx.font = `${st2(38)}px PingFang SC`
+		ctx.textAlign = "left"
+		ctx.fillText(price, st2(60), st2(665))
+	})
 
-		/** 绘制背景 */
-		await dp.draw((ctx) => {
-			ctx.fillStyle = background;
-			ctx.fillRoundRect( this.st2(0), this.st2(0), this.st2(width), this.st2(height), this.st2(12));
-			ctx.clip();
-		});
-		/** 绘制圆角矩形 */
-		await dp.draw(async (ctx)=>{
-			// 设置矩形色彩
-			ctx.fillStyle = "#ffffff";
-			// 设置图形轮廓的颜色。默认情况下，线条和填充颜色都是黑色（CSS 颜色值 #000000）
-			ctx.strokeStyle = "#ffffff";
-			// 这个属性设置当前绘线的粗细。属性值必须为正数。描述线段宽度的数字。 0、 负数、 Infinity 和 NaN 会被忽略。默认值是1.0。
-			ctx.lineWidth = this.st2(1);
-			// 进行绘制
-			ctx.fillRoundRect(30, 150, 500, 620, 0);
-			// ctx.strokeRoundRect(30, 150, 500, 620, 0);
-			// ctx.strokeRect(30, 150, 500, 620, 0);
-		})
-		/** 绘制图片 */
-		dp.draw(async (ctx) => {
-			await Promise.all([
-				// 绘制头像face
-				ctx.drawImage(face?face:this.myFace, this.st2(30), this.st2(30), this.st2(90), this.st2(90)),
-				// 绘制Logo
-				// ctx.drawImage( this.logo, this.st2(175), this.st2(0), this.st2(256), this.st2(144)),
-				// 中间图片
-				ctx.drawImage(img, this.st2(60), this.st2(170), this.st2(440), this.st2(440)),
-				// 二维码
-				ctx.drawImage(this.sharingLink, this.st2(375), this.st2(625), this.st2(130), this.st2(130))
-			]);
-		});
-		/** 绘制顶部文字（昵称 简述） */
-		await dp.draw((ctx) => {
-			ctx.fillStyle = "#666";
-			ctx.font = `${this.st2(24)}px PingFang SC`;
-			ctx.fillText(nickName, this.st2(150), this.st2(65));
-			ctx.fillStyle = "#666";
-			ctx.font = `${this.st2(24)}px PingFang SC`;
-			ctx.fillText(desc, this.st2(150), this.st2(105));
-		});
-		/** 绘制中间文字（商品名称 价格） */
-		await dp.draw((ctx) => {
-			ctx.fillStyle = "#333";
-			ctx.font = `bold ${this.st2(24)}px PingFang SC`;
-			ctx.textAlign = "left";
-			ctx.fillWarpText({
-				text: title,
-				lineHeight: this.st2(32),
-				maxWidth: this.st2(280),
-				x: this.st2(60),
-				y: this.st2(710),
-				layer: 2,
-			});
-			ctx.fillStyle = "#ff3c2a";
-			ctx.font = `${this.st2(38)}px PingFang SC`;
-			ctx.textAlign = "left";
-			ctx.fillText(price, this.st2(60), this.st2(665));
-		});
-		/** 绘制底部文字 */
-		// await dp.draw((ctx) => {
-		// 	ctx.fillStyle = "#666";
-		// 	ctx.font = `${this.st2(24)}px PingFang SC`;
-		// 	ctx.fillText("长按图片，识别二维码", this.st2(200), this.st2(866));
-		// 	ctx.fillStyle = "#666";
-		// 	ctx.font = `${this.st2(24)}px PingFang SC`;
-		// 	ctx.fillText("查看商品详情", this.st2(200), this.st2(900));
-		// });
-		
-		// 绘制生成本地地址
-		this.imgUrl = await dp.createImagePath();
-    },
-  },
+	// 绘制生成本地地址
+	imgUrl.value = await dp.createImagePath()
+}
 
-  async mounted() {
-    this.init();
-  },
-};
+onMounted(() => {
+	init()
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/components/m-search-revision/m-search-revision.vue b/components/m-search-revision/m-search-revision.vue
index 6c3e670..b4dc2f1 100644
--- a/components/m-search-revision/m-search-revision.vue
+++ b/components/m-search-revision/m-search-revision.vue
@@ -28,138 +28,122 @@
   </view>
 </template>
 
-<script>
-export default {
-  props: {
-    mode: {
-      value: Number,
-      default: 1,
-    },
-    //HM修改 定义默认搜索关键词(水印文字)
-    placeholder: {
-      value: String,
-      default: "请输入搜索内容",
-    },
-    value: {
-      type: String,
-      default: "",
-    },
-    // 默认半径为60
-    radius: {
-      value: String,
-      default: 60,
-    },
-    // 是否获取焦点
-    isFocusVal: {
-      value: Boolean,
-      default: true,
-    },
-    showClear: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  data() {
-    return {
-      isShowSeachGoods: false, //是否显示查询的商品
-      active: false, //是否选中
-      inputVal: "", //Input中内容
-      isDelShow: false, //是否显示右侧删除icon
-      isFocus: false, //是否获取焦点
-      switchLayout: true, //切换当前商品的布局，默认为两列
-    };
-  },
-  mounted() {
-    this.isFocus = this.isFocusVal;
-  },
-  methods: {
-    //
-    out() {
-      uni.reLaunch({
-        url: "/pages/tabbar/home/index",
-      });
-    },
-    // 切换排列顺序
-    handelListClass() {
-      this.switchLayout = !this.switchLayout;
-      this.$emit("SwitchType");
-    },
-    //HM修改 触发组件confirm事件
-    triggerConfirm() {
-      this.$emit("confirm", false);
-      uni.hideKeyboard();
-    },
-    //HM修改 触发组件input事件
-    inputChange(event) {
-      var keyword = event.detail.value;
-      this.$emit("input", keyword);
-      if (this.inputVal) {
-        this.isDelShow = true;
-      }
-    },
-    focus() {
-      this.active = true;
-      //HM修改 增加获取焦点判断
-      if (this.inputVal) {
-        this.isDelShow = true;
-      }
-    },
-    blur() {
-      this.isFocus = false;
-      if (!this.inputVal) {
-        this.active = false;
-      }
-    },
-    clear() {
-      //HM修改 收起键盘
-      uni.hideKeyboard();
-      this.isFocus = false;
-      this.inputVal = "";
-      this.active = false;
-      //HM修改 清空内容时候触发组件input
-      this.$emit("input", "");
-      //this.$emit('search', '');//HM修改 清空内容时候不进行搜索
-    },
+<script setup lang="ts">
+import { ref, watch, onMounted } from 'vue'
 
-    /**
-     * 回退到上一级
-     */
-    onClickLeft() {
-      const paths = getCurrentPages();
-      console.log(paths)
-      if(paths.length > 1){
-        uni.navigateBack();
-      }else{
-        uni.switchTab({
-          url:"/pages/tabbar/home/index"
-        })
-      }
-    },
+const props = withDefaults(defineProps<{
+	mode?: number
+	placeholder?: string
+	value?: string
+	radius?: string
+	isFocusVal?: boolean
+	showClear?: boolean
+}>(), {
+	mode: 1,
+	placeholder: "请输入搜索内容",
+	value: "",
+	radius: "60",
+	isFocusVal: true,
+	showClear: true,
+})
 
-    /**
-     * 内容为空时，输入默认关键字
-     */
-    search() {
-      if (!this.inputVal) {
-        if (this.searchName == "取消") {
-          uni.hideKeyboard();
-          this.isFocus = false;
-          this.active = false;
-          return;
-        }
-      }
-      this.$emit("search", this.inputVal ? this.inputVal : this.placeholder);
-    },
-  },
-  watch: {
-    /**
-     * 监听当前是否有值 是否显示清除图标
-     */
-    inputVal(newVal) {
-      newVal ? (this.isDelShow = true) : (this.isDelShow = false);
-    },
-  },
-};
+const emit = defineEmits(['confirm', 'input', 'search', 'SwitchType'])
+
+const isShowSeachGoods = ref(false)
+const active = ref(false)
+const inputVal = ref("")
+const isDelShow = ref(false)
+const isFocus = ref(false)
+const switchLayout = ref(true)
+
+onMounted(() => {
+	isFocus.value = props.isFocusVal
+})
+
+//
+const out = () => {
+	uni.reLaunch({
+		url: "/pages/tabbar/home/index",
+	})
+}
+// 切换排列顺序
+const handelListClass = () => {
+	switchLayout.value = !switchLayout.value
+	emit("SwitchType")
+}
+//HM修改 触发组件confirm事件
+const triggerConfirm = () => {
+	emit("confirm", false)
+	uni.hideKeyboard()
+}
+//HM修改 触发组件input事件
+const inputChange = (event: any) => {
+	var keyword = event.detail.value
+	emit("input", keyword)
+	if (inputVal.value) {
+		isDelShow.value = true
+	}
+}
+const focus = () => {
+	active.value = true
+	//HM修改 增加获取焦点判断
+	if (inputVal.value) {
+		isDelShow.value = true
+	}
+}
+const blur = () => {
+	isFocus.value = false
+	if (!inputVal.value) {
+		active.value = false
+	}
+}
+const clear = () => {
+	//HM修改 收起键盘
+	uni.hideKeyboard()
+	isFocus.value = false
+	inputVal.value = ""
+	active.value = false
+	//HM修改 清空内容时候触发组件input
+	emit("input", "")
+	//this.$emit('search', '');//HM修改 清空内容时候不进行搜索
+}
+
+/**
+ * 回退到上一级
+ */
+const onClickLeft = () => {
+	const paths = getCurrentPages()
+	console.log(paths)
+	if(paths.length > 1){
+		uni.navigateBack()
+	}else{
+		uni.switchTab({
+			url:"/pages/tabbar/home/index"
+		})
+	}
+}
+
+/**
+ * 内容为空时，输入默认关键字
+ */
+const search = () => {
+	if (!inputVal.value) {
+		if (false) { // searchName == "取消" - 兼容旧逻辑
+			uni.hideKeyboard()
+			isFocus.value = false
+			active.value = false
+			return
+		}
+	}
+	emit("search", inputVal.value ? inputVal.value : props.placeholder)
+}
+
+/**
+ * 监听当前是否有值 是否显示清除图标
+ */
+watch(inputVal, (newVal) => {
+	newVal ? (isDelShow.value = true) : (isDelShow.value = false)
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/components/m-share/index.vue b/components/m-share/index.vue
index 34d886c..2c190d0 100644
--- a/components/m-share/index.vue
+++ b/components/m-share/index.vue
@@ -28,118 +28,125 @@
     </view>
   </u-popup>
 </template>
-<script>
-import { h5Copy } from "@/js_sdk/h5-copy/h5-copy.js";
-import configs from "@/config/config";
-import mpShare from "@/utils/mpShare.js";
-import { setClipboard } from "@/utils/filters.js";
 
-export default {
-  mixins: [mpShare],
-  data() {
-    return {
-      configs,
-      show: true,
-      list: [
-        {
-          color: "#04BE02",
-          title: "微信好友",
-          icon: "weixin-fill",
-          type: 0,
-        },
-        {
-          color: "#04BE02",
-          title: "朋友圈",
-          icon: "weixin-circle-fill",
-          type: 1,
-        },
-      ],
-    };
+<script setup lang="ts">
+import { ref } from 'vue'
+import configs from "@/config/config"
+import mpShare from "@/utils/mpShare.js"
+import { setClipboard } from "@/utils/filters.js"
+
+// mixin 处理：mpShare 提供小程序分享能力
+mpShare
+
+const props = defineProps<{
+  thumbnail?: string
+  goodsName?: string
+  type?: string
+  goodsId?: string | number
+  link?: string
+}>()
+
+const emit = defineEmits(['close'])
+
+const show = ref(true)
+const config = configs
+const list = ref([
+  {
+    color: "#04BE02",
+    title: "微信好友",
+    icon: "weixin-fill",
+    type: 0,
   },
-  // 图片缩略图、 商品名称 、 type（goods,shop,pintuan) 拼团商品分享以及店铺分享
-
-  props: ["thumbnail", "goodsName", "type", "goodsId", "link"],
-  methods: {
-    close() {
-      this.$emit("close");
-    },
-    weChatShare(){
-      this.$u.mpShare = {
-        title:  this.shareTitle(), // 默认为小程序名称，可自定义
-        path: '', // 默认为当前页面路径，一般无需修改，QQ小程序不支持
-        // 分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径。
-        // 支持PNG及JPG，默认为当前页面的截图
-        imageUrl: this.thumbnail ||''
-      }
-    },
-
-    // h5复制链接
-    // #ifdef H5
-    copyLink() {
-      let content;
-      if (this.link) {
-        content = this.configs.shareLink + this.link;
-      } else {
-        content =
-          this.configs.shareLink +
-          getCurrentPages()[getCurrentPages().length - 1].__page__.fullPath;
-      }
-      setClipboard(content)
-    },
-    // #endif
-
-    shareTitle() {
-      let shareTitle;
-      if (this.type == "goods") {
-        shareTitle = `[好友推荐]${this.goodsName}快来跟我一起看看吧`;
-      } else if (this.type == "shops") {
-        shareTitle = `[好友发现]${this.goodsName}快来跟我一起看看吧`;
-      } else if (this.type == "pintuan") {
-        shareTitle = `[好友邀请]${this.goodsName}快来跟我一起抢购吧!`;
-      } else if (this.type == "kanjia") {
-        shareTitle = `[好友邀请]请快来帮我砍一刀${this.goodsName}`;
-      }
-      return shareTitle;
-    },
-
-    // #ifdef APP-PLUS
-    handleShare(val) {
-      console.log("12312312")
-      if (val.type <= 1) {
-        let scene; //  "WXSenceTimeline 朋友圈   WXSceneSession 微信好友"
-        val.type == 1
-          ? (scene = "WXSenceTimeline")
-          : (scene = "WXSceneSession");
-        uni.share({
-          provider: "weixin",
-          scene: scene,
-          href: configs.shareLink + this.link,
-          imageUrl: this.thumbnail,
-          type: 0,
-          summary: this.goodsName,
-          title: this.shareTitle(),
-          success: function (res) {
-            uni.showToast({
-              title: "分享成功!",
-              duration: 2000,
-              icon: "none",
-            });
-            this.$emit("close");
-          },
-          fail: function (err) {
-            uni.showToast({
-              title: "分享失败!",
-              duration: 2000,
-              icon: "none",
-            });
-            this.$emit("close");
-          },
-        });
-      }
-    },
-    // #endif
+  {
+    color: "#04BE02",
+    title: "朋友圈",
+    icon: "weixin-circle-fill",
+    type: 1,
   },
-};
+])
+
+const close = () => {
+  emit("close")
+}
+
+const weChatShare = () => {
+  // @ts-ignore
+  const proxy = getCurrentInstance()?.proxy
+  if (proxy) {
+    // @ts-ignore
+    proxy.$u.mpShare = {
+      title: shareTitle(),
+      path: '',
+      imageUrl: props.thumbnail || ''
+    }
+  }
+}
+
+// h5复制链接
+// #ifdef H5
+const copyLink = () => {
+  let content: string
+  if (props.link) {
+    content = config.shareLink + props.link
+  } else {
+    content =
+      config.shareLink +
+      getCurrentPages()[getCurrentPages().length - 1].__page__.fullPath
+  }
+  setClipboard(content)
+}
+// #endif
+
+const shareTitle = (): string => {
+  let shareTitle: string = ''
+  if (props.type == "goods") {
+    shareTitle = `[好友推荐]${props.goodsName}快来跟我一起看看吧`
+  } else if (props.type == "shops") {
+    shareTitle = `[好友发现]${props.goodsName}快来跟我一起看看吧`
+  } else if (props.type == "pintuan") {
+    shareTitle = `[好友邀请]${props.goodsName}快来跟我一起抢购吧!`
+  } else if (props.type == "kanjia") {
+    shareTitle = `[好友邀请]请快来帮我砍一刀${props.goodsName}`
+  }
+  return shareTitle
+}
+
+// #ifdef APP-PLUS
+const handleShare = (val: any) => {
+  console.log("12312312")
+  if (val.type <= 1) {
+    let scene: string //  "WXSenceTimeline 朋友圈   WXSceneSession 微信好友"
+    val.type == 1
+      ? (scene = "WXSenceTimeline")
+      : (scene = "WXSceneSession")
+    uni.share({
+      provider: "weixin",
+      scene: scene,
+      href: config.shareLink + props.link,
+      imageUrl: props.thumbnail,
+      type: 0,
+      summary: props.goodsName,
+      title: shareTitle(),
+      success: function () {
+        uni.showToast({
+          title: "分享成功!",
+          duration: 2000,
+          icon: "none",
+        })
+        emit("close")
+      },
+      fail: function () {
+        uni.showToast({
+          title: "分享失败!",
+          duration: 2000,
+          icon: "none",
+        })
+        emit("close")
+      },
+    })
+  }
+}
+// #endif
 </script>
 <style lang="scss" scoped>
 @import "./mp-share.scss";
@@ -175,4 +182,4 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/m-take-down-sale-goods/index.vue b/components/m-take-down-sale-goods/index.vue
index 61efeb3..46aa9ff 100644
--- a/components/m-take-down-sale-goods/index.vue
+++ b/components/m-take-down-sale-goods/index.vue
@@ -1,27 +1,21 @@
 <template>
-  <div>
+  <view>
     <u-popup v-model:show="show" mode="bottom" height="800rpx" border-radius="14">
-      <div class="wrapper">
+      <view class="wrapper">
         <view class="down-goods-tips">该商品已下架</view>
         <scroll-view scroll-y="true" style="height: 670rpx">
           <goodsRecommend title="其他商品" />
         </scroll-view>
-      </div>
+      </view>
     </u-popup>
-  </div>
+  </view>
 </template>
 
-<script>
-import goodsRecommend from "@/components/m-goods-recommend/index.vue";
+<script setup lang="ts">
+import { ref } from 'vue'
+import goodsRecommend from "@/components/m-goods-recommend/index.vue"
 
-export default {
-  data() {
-    return {
-      show: true, // 是否显示
-    };
-  },
-  components: { goodsRecommend },
-};
+const show = ref(true)
 </script>
 
 <style lang="scss" scoped>
diff --git a/components/popups/popups.vue b/components/popups/popups.vue
index cb568f8..e4a9386 100644
--- a/components/popups/popups.vue
+++ b/components/popups/popups.vue
@@ -10,198 +10,175 @@
   </view>
 </template>
 
-<script>
-export default {
-  props: {
-    maskBg: {
-      type: String,
-      default: "rgba(0,0,0,0)",
-    },
-    placement: {
-      type: String,
-      default: "default", //default top-start top-end bottom-start bottom-end
-    },
-    direction: {
-      type: String,
-      default: "column", //column row
-    },
-    x: {
-      type: Number,
-      default: 0,
-    },
-    y: {
-      type: Number,
-      default: 0,
-    },
-    value: {
-      type: Boolean,
-      default: false,
-    },
-    popData: {
-      type: Array,
-      default: () => [],
-    },
-    theme: {
-      type: String,
-      default: "light", //light dark
-    },
-    dynamic: {
-      type: Boolean,
-      default: false,
-    },
-    gap: {
-      type: Number,
-      default: 20,
-    },
-    triangle: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  data() {
-    return {
-      popupsTop: "0rpx",
-      popupsLeft: "0rpx",
-      show: false,
-      dynPlace: "",
-    };
-  },
-  mounted() {
-    this.popupsPosition();
-  },
-  methods: {
-    tapMask() {
-      this.$emit("input", !this.value);
-    },
-    tapItem(item) {
-      if (item.disabled) return;
-      this.$emit("tapPopup", item);
-      this.$emit("input", !this.value);
-    },
-    getStatusBar() {
-      const windowInfo = uni.getWindowInfo();
-      // #ifdef H5
-      return Promise.resolve(
-        (windowInfo.statusBarHeight || 0) + (windowInfo.windowTop || 0)
-      );
-      // #endif
-      // #ifndef H5
-      return Promise.resolve(windowInfo.statusBarHeight || 0);
-      // #endif
-    },
-    async popupsPosition() {
-      let statusBar = await this.getStatusBar();
-      let promise = new Promise((resolve, reject) => {
-        let popupsDom = uni.createSelectorQuery().in(this).select(".popups");
-        popupsDom
-          .fields(
-            {
-              size: true,
-            },
-            (data) => {
-              if (!data) {
-                resolve();
-                return;
-              }
-              let width = data.width;
-              let height = data.height;
+<script setup lang="ts">
+import { ref, watch, onMounted, getCurrentInstance } from 'vue'
 
-             
+const props = withDefaults(defineProps<{
+  maskBg?: string
+  placement?: string
+  direction?: string
+  x?: number
+  y?: number
+  modelValue?: boolean
+  popData?: any[]
+  theme?: string
+  dynamic?: boolean
+  gap?: number
+  triangle?: boolean
+}>(), {
+  maskBg: "rgba(0,0,0,0)",
+  placement: "default",
+  direction: "column",
+  x: 0,
+  y: 0,
+  modelValue: false,
+  popData: () => [],
+  theme: "light",
+  dynamic: false,
+  gap: 20,
+  triangle: true,
+})
 
-              let y = this.dynamic
-                ? this.dynamicGetY(this.y, this.gap)
-                : this.transformRpx(this.y);
+const emit = defineEmits(['update:modelValue', 'tapPopup'])
 
-              let x = this.dynamic
-                ? this.dynamicGetX(this.x, this.gap)
-                : this.transformRpx(this.x);
+const instance = getCurrentInstance()
 
-              // #ifdef H5
-              y = this.dynamic
-                ? this.y + statusBar
-                : this.transformRpx(this.y + statusBar);
-              // #endif
+const popupsTop = ref("0rpx")
+const popupsLeft = ref("0rpx")
+const show = ref(false)
+const dynPlace = ref("")
 
-              this.dynPlace =
-                this.placement == "default"
-                  ? this.getPlacement(x, y)
-                  : this.placement;
+onMounted(() => {
+  popupsPosition()
+})
 
-              switch (this.dynPlace) {
-                case "top-start":
-                  this.popupsTop = `${y + 9}rpx`;
-                  this.popupsLeft = `${x - 15}rpx`;
-                  break;
-                case "top-end":
-                  this.popupsTop = `${y + 9}rpx`;
-                  this.popupsLeft = `${x + 15 - width}rpx`;
-                  break;
-                case "bottom-start":
-                  this.popupsTop = `${y - 18 - height}rpx`;
-                  this.popupsLeft = `${x - 15}rpx`;
-                  break;
-                case "bottom-end":
-                  this.popupsTop = `${y - 9 - height}rpx`;
-                  this.popupsLeft = `${x + 15 - width}rpx`;
-                  break;
-              }
-              resolve();
-            }
-          )
-          .exec();
-      });
-      return promise;
-    },
-    getPlacement(x, y) {
-      const { windowWidth: width, windowHeight: height } = uni.getWindowInfo();
-      if (x > width / 2 && y > height / 2) {
-        return "bottom-end";
-      } else if (x < width / 2 && y < height / 2) {
-        return "top-start";
-      } else if (x > width / 2 && y < height / 2) {
-        return "top-end";
-      } else if (x < width / 2 && y > height / 2) {
-        return "bottom-start";
-      } else if (x > width / 2) {
-        return "top-end";
-      } else {
-        return "top-start";
-      }
-    },
-    dynamicGetY(y, gap) {
-      const { windowHeight: height } = uni.getWindowInfo();
-      y = y < gap ? gap : y;
-      y = height - y < gap ? height - gap : y;
+const tapMask = () => {
+  emit("update:modelValue", !props.modelValue)
+}
 
-      return y;
-    },
-    dynamicGetX(x, gap) {
-      const { windowWidth: width } = uni.getWindowInfo();
-      x = x < gap ? gap : x;
-      x = width - x < gap ? width - gap : x;
-      return x;
-    },
-    transformRpx(params) {
-      const { screenWidth } = uni.getWindowInfo();
-      return (params * screenWidth) / 375;
-    },
-  },
-  watch: {
-    value: {
-      immediate: true,
-      handler: async function (newVal, oldVal) {
-        if (newVal) await this.popupsPosition();
-        this.show = newVal;
-      },
-    },
-    placement: {
-      immediate: true,
-      handler(newVal, oldVal) {
-        this.dynPlace = newVal;
-      },
-    },
-  },
-};
+const tapItem = (item: any) => {
+  if (item.disabled) return
+  emit("tapPopup", item)
+  emit("update:modelValue", !props.modelValue)
+}
+
+const getStatusBar = () => {
+  const windowInfo = uni.getWindowInfo()
+  // #ifdef H5
+  return Promise.resolve(
+    (windowInfo.statusBarHeight || 0) + (windowInfo.windowTop || 0)
+  )
+  // #endif
+  // #ifndef H5
+  return Promise.resolve(windowInfo.statusBarHeight || 0)
+  // #endif
+}
+
+const popupsPosition = async () => {
+  let statusBar = await getStatusBar()
+  await new Promise<void>((resolve) => {
+    let popupsDom = uni.createSelectorQuery().in(instance!.proxy).select(".popups")
+    popupsDom
+      .fields(
+        {
+          size: true,
+        },
+        (data: any) => {
+          if (!data) {
+            resolve()
+            return
+          }
+          let width = data.width
+          let height = data.height
+
+          let y = props.dynamic
+            ? dynamicGetY(props.y, props.gap)
+            : transformRpx(props.y)
+
+          let x = props.dynamic
+            ? dynamicGetX(props.x, props.gap)
+            : transformRpx(props.x)
+
+          // #ifdef H5
+          y = props.dynamic
+            ? props.y + statusBar
+            : transformRpx(props.y + statusBar)
+          // #endif
+
+          dynPlace.value =
+            props.placement == "default"
+              ? getPlacement(x, y)
+              : props.placement
+
+          switch (dynPlace.value) {
+            case "top-start":
+              popupsTop.value = `${y + 9}rpx`
+              popupsLeft.value = `${x - 15}rpx`
+              break
+            case "top-end":
+              popupsTop.value = `${y + 9}rpx`
+              popupsLeft.value = `${x + 15 - width}rpx`
+              break
+            case "bottom-start":
+              popupsTop.value = `${y - 18 - height}rpx`
+              popupsLeft.value = `${x - 15}rpx`
+              break
+            case "bottom-end":
+              popupsTop.value = `${y - 9 - height}rpx`
+              popupsLeft.value = `${x + 15 - width}rpx`
+              break
+          }
+          resolve()
+        }
+      )
+      .exec()
+  })
+}
+
+const getPlacement = (x: number, y: number) => {
+  const { windowWidth: width, windowHeight: height } = uni.getWindowInfo()
+  if (x > width / 2 && y > height / 2) {
+    return "bottom-end"
+  } else if (x < width / 2 && y < height / 2) {
+    return "top-start"
+  } else if (x > width / 2 && y < height / 2) {
+    return "top-end"
+  } else if (x < width / 2 && y > height / 2) {
+    return "bottom-start"
+  } else if (x > width / 2) {
+    return "top-end"
+  } else {
+    return "top-start"
+  }
+}
+
+const dynamicGetY = (y: number, gap: number) => {
+  const { windowHeight: height } = uni.getWindowInfo()
+  y = y < gap ? gap : y
+  y = height - y < gap ? height - gap : y
+  return y
+}
+
+const dynamicGetX = (x: number, gap: number) => {
+  const { windowWidth: width } = uni.getWindowInfo()
+  x = x < gap ? gap : x
+  x = width - x < gap ? width - gap : x
+  return x
+}
+
+const transformRpx = (params: number) => {
+  const { screenWidth } = uni.getWindowInfo()
+  return (params * screenWidth) / 375
+}
+
+watch(() => props.modelValue, async (newVal) => {
+  if (newVal) await popupsPosition()
+  show.value = newVal
+}, { immediate: true })
+
+watch(() => props.placement, (newVal) => {
+  dynPlace.value = newVal
+}, { immediate: true })
 </script>
 
 <style lang="scss" scoped>
diff --git a/components/u-time-line/u-time-line-item.vue b/components/u-time-line/u-time-line-item.vue
index 6c1f8a4..8b17b19 100644
--- a/components/u-time-line/u-time-line-item.vue
+++ b/components/u-time-line/u-time-line-item.vue
@@ -11,29 +11,21 @@
   </view>
 </template>
 
-<script>
-export default {
-  name: 'UTimeLineItem',
-  props: {
-    nodeTop: {
-      type: [String, Number],
-      default: ''
-    },
-    bgColor: {
-      type: String,
-      default: '#ffffff'
-    }
-  },
-  computed: {
-    nodeStyle() {
-      if (this.nodeTop === '' || this.nodeTop === null || this.nodeTop === undefined) {
-        return {}
-      }
-      const top = typeof this.nodeTop === 'number' ? `${this.nodeTop}rpx` : this.nodeTop
-      return { top }
-    }
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  nodeTop?: string | number
+  bgColor?: string
+}>()
+
+const nodeStyle = computed(() => {
+  if (props.nodeTop === '' || props.nodeTop === null || props.nodeTop === undefined) {
+    return {}
   }
-}
+  const top = typeof props.nodeTop === 'number' ? `${props.nodeTop}rpx` : props.nodeTop
+  return { top }
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/components/u-time-line/u-time-line.vue b/components/u-time-line/u-time-line.vue
index eaa6dcd..de10fc8 100644
--- a/components/u-time-line/u-time-line.vue
+++ b/components/u-time-line/u-time-line.vue
@@ -4,10 +4,8 @@
   </view>
 </template>
 
-<script>
-export default {
-  name: 'UTimeLine'
-}
+<script setup lang="ts">
+// UTimeLine 组件
 </script>
 
 <style lang="scss" scoped>
diff --git a/components/uni-load-more/uni-load-more.vue b/components/uni-load-more/uni-load-more.vue
index cf1c2f0..3405a56 100644
--- a/components/uni-load-more/uni-load-more.vue
+++ b/components/uni-load-more/uni-load-more.vue
@@ -26,42 +26,28 @@
 	</view>
 </template>
 
-<script>
-export default {
-	name: 'uni-load-more',
-	props: {
-		status: {
-			//上拉的状态：more-loading前；loading-loading中；noMore-没有更多了
-			type: String,
-			default: 'more'
-		},
-		showIcon: {
-			type: Boolean,
-			default: true
-		},
-		showText: {
-			type: Boolean,
-			default: true
-		},
-		color: {
-			type: String,
-			default: '#777777'
-		},
-		contentText: {
-			type: Object,
-			default() {
-				return {
-					contentdown: '上拉显示更多',
-					contentrefresh: '正在加载...',
-					contentnomore: '没有更多数据了'
-				};
-			}
-		}
-	},
-	data() {
-		return {};
+<script setup lang="ts">
+withDefaults(defineProps<{
+	status?: string
+	showIcon?: boolean
+	showText?: boolean
+	color?: string
+	contentText?: {
+		contentdown: string
+		contentrefresh: string
+		contentnomore: string
 	}
-};
+}>(), {
+	status: 'more',
+	showIcon: true,
+	showText: true,
+	color: '#777777',
+	contentText: () => ({
+		contentdown: '上拉显示更多',
+		contentrefresh: '正在加载...',
+		contentnomore: '没有更多数据了',
+	}),
+})
 </script>
 
 <style>
diff --git a/components/uni-number-box.vue b/components/uni-number-box.vue
index 220a256..80e8e78 100644
--- a/components/uni-number-box.vue
+++ b/components/uni-number-box.vue
@@ -10,211 +10,183 @@
 		</view>
 	</view>
 </template>
-<script>
-	/**
-	 * NumberBox 数字输入框
-	 * @description 带加减按钮的数字输入框
-	 * @tutorial https://ext.dcloud.net.cn/plugin?id=31
-	 * @property {Number} value 输入框当前值
-	 * @property {Number} min 最小值
-	 * @property {Number} max 最大值
-	 * @property {Number} step 每次点击改变的间隔大小
-	 * @property {String} background 背景色
-	 * @property {String} color 字体颜色（前景色）
-	 * @property {Boolean} disabled = [true|false] 是否为禁用状态
-	 * @event {Function} change 输入框值改变时触发的事件，参数为输入框当前的 value
-	 * @event {Function} focus 输入框聚焦时触发的事件，参数为 event 对象
-	 * @event {Function} blur 输入框失焦时触发的事件，参数为 event 对象
-	 */
 
-	export default {
-		name: "UniNumberBox",
-		emits: ['change', 'input', 'update:modelValue', 'blur', 'focus'],
-		props: {
-			value: {
-				type: [Number, String],
-				default: 1
-			},
-			modelValue: {
-				type: [Number, String],
-				default: 1
-			},
-			min: {
-				type: Number,
-				default: 0
-			},
-			max: {
-				type: Number,
-				default: 100
-			},
-			step: {
-				type: Number,
-				default: 1
-			},
-			background: {
-				type: String,
-				default: '#f5f5f5'
-			},
-			color: {
-				type: String,
-				default: '#333'
-			},
-			disabled: {
-				type: Boolean,
-				default: false
-			}
-		},
-		data() {
-			return {
-				inputValue: 0
-			};
-		},
-		watch: {
-			value(val) {
-				this.inputValue = +val;
-			},
-			modelValue(val) {
-				this.inputValue = +val;
-			}
-		},
-		created() {
-			if (this.value === 1) {
-				this.inputValue = +this.modelValue;
-			}
-			if (this.modelValue === 1) {
-				this.inputValue = +this.value;
-			}
-		},
-		methods: {
-			_calcValue(type) {
-				if (this.disabled) {
-					return;
-				}
-				const scale = this._getDecimalScale();
-				let value = this.inputValue * scale;
-				let step = this.step * scale;
-				if (type === "minus") {
-					value -= step;
-					if (value < (this.min * scale)) {
-						return;
-					}
-					if (value > (this.max * scale)) {
-						value = this.max * scale
-					}
-				}
+<script setup lang="ts">
+import { ref, watch } from 'vue'
 
-				if (type === "plus") {
-					value += step;
-					if (value > (this.max * scale)) {
-						return;
-					}
-					if (value < (this.min * scale)) {
-						value = this.min * scale
-					}
-				}
+const props = withDefaults(defineProps<{
+	value?: number | string
+	modelValue?: number | string
+	min?: number
+	max?: number
+	step?: number
+	background?: string
+	color?: string
+	disabled?: boolean
+}>(), {
+	value: 1,
+	modelValue: 1,
+	min: 0,
+	max: 100,
+	step: 1,
+	background: '#f5f5f5',
+	color: '#333',
+	disabled: false,
+})
 
-				this.inputValue = (value / scale).toFixed(String(scale).length - 1);
-				this.$emit("change", +this.inputValue);
-				// TODO vue2 兼容
-				this.$emit("input", +this.inputValue);
-				// TODO vue3 兼容
-				this.$emit("update:modelValue", +this.inputValue);
-			},
-			_getDecimalScale() {
+const emit = defineEmits<{
+	change: [value: number]
+	input: [value: number]
+	'update:modelValue': [value: number]
+	blur: [event: Event]
+	focus: [event: Event]
+}>()
 
-				let scale = 1;
-				// 浮点型
-				if (~~this.step !== this.step) {
-					scale = Math.pow(10, String(this.step).split(".")[1].length);
-				}
-				return scale;
-			},
-			_onBlur(event) {
-				this.$emit('blur', event)
-				let value = event.detail.value;
-				if (!value) {
-					// this.inputValue = 0;
-					return;
-				}
-				value = +value;
-				if (value > this.max) {
-					value = this.max;
-				} else if (value < this.min) {
-					value = this.min;
-				}
-				const scale = this._getDecimalScale();
-				this.inputValue = value.toFixed(String(scale).length - 1);
-				this.$emit("change", +this.inputValue);
-				this.$emit("input", +this.inputValue);
-			},
-			_onFocus(event) {
-				this.$emit('focus', event)
-			}
+const inputValue = ref(0)
+
+watch(() => props.value, (val) => {
+	inputValue.value = +val
+})
+
+watch(() => props.modelValue, (val) => {
+	inputValue.value = +val
+})
+
+if (props.value === 1) {
+	inputValue.value = +props.modelValue
+}
+if (props.modelValue === 1) {
+	inputValue.value = +props.value
+}
+
+function _getDecimalScale() {
+	let scale = 1
+	if (~~props.step !== props.step) {
+		scale = Math.pow(10, String(props.step).split('.')[1].length)
+	}
+	return scale
+}
+
+function _emitValue() {
+	const val = +inputValue.value
+	emit('change', val)
+	emit('input', val)
+	emit('update:modelValue', val)
+}
+
+function _calcValue(type: 'minus' | 'plus') {
+	if (props.disabled) {
+		return
+	}
+	const scale = _getDecimalScale()
+	let value = inputValue.value * scale
+	const step = props.step * scale
+	if (type === 'minus') {
+		value -= step
+		if (value < props.min * scale) {
+			return
 		}
-	};
+		if (value > props.max * scale) {
+			value = props.max * scale
+		}
+	}
+
+	if (type === 'plus') {
+		value += step
+		if (value > props.max * scale) {
+			return
+		}
+		if (value < props.min * scale) {
+			value = props.min * scale
+		}
+	}
+
+	inputValue.value = Number((value / scale).toFixed(String(scale).length - 1))
+	_emitValue()
+}
+
+function _onBlur(event: any) {
+	emit('blur', event)
+	let value = event.detail.value
+	if (!value) {
+		return
+	}
+	value = +value
+	if (value > props.max) {
+		value = props.max
+	} else if (value < props.min) {
+		value = props.min
+	}
+	const scale = _getDecimalScale()
+	inputValue.value = Number(value.toFixed(String(scale).length - 1))
+	_emitValue()
+}
+
+function _onFocus(event: Event) {
+	emit('focus', event)
+}
 </script>
+
 <style lang="scss" scoped>
-	$box-height: 48rpx;
-	$bg: #f5f5f5;
-	$br: 4rpx;
-	$color: #333;
+$box-height: 48rpx;
+$bg: #f5f5f5;
+$br: 4rpx;
+$color: #333;
 
-	.uni-numbox {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-	}
+.uni-numbox {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	flex-direction: row;
+}
 
-	.uni-numbox-btns {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		align-items: center;
-		justify-content: center;
-		padding: 0 8px;
-		background-color: $bg;
-		/* #ifdef H5 */
-		cursor: pointer;
-		/* #endif */
-	}
+.uni-numbox-btns {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+	padding: 0 8px;
+	background-color: $bg;
+	/* #ifdef H5 */
+	cursor: pointer;
+	/* #endif */
+}
 
-	.uni-numbox__value {
-		margin: 0 4rpx;
-		background-color: $bg;
-		width: 70rpx;
-		height: $box-height;
-		text-align: center;
-		font-size: 24rpx;
-		border-left-width: 0;
-		border-right-width: 0;
-		color: $color;
-	}
+.uni-numbox__value {
+	margin: 0 4rpx;
+	background-color: $bg;
+	width: 70rpx;
+	height: $box-height;
+	text-align: center;
+	font-size: 24rpx;
+	border-left-width: 0;
+	border-right-width: 0;
+	color: $color;
+}
 
-	.uni-numbox__minus {
-		border-top-left-radius: $br;
-		border-bottom-left-radius: $br;
-	}
+.uni-numbox__minus {
+	border-top-left-radius: $br;
+	border-bottom-left-radius: $br;
+}
 
-	.uni-numbox__plus {
-		border-top-right-radius: $br;
-		border-bottom-right-radius: $br;
-	}
+.uni-numbox__plus {
+	border-top-right-radius: $br;
+	border-bottom-right-radius: $br;
+}
 
-	.uni-numbox--text {
-		// fix nvue
-		line-height: 40rpx;
+.uni-numbox--text {
+	line-height: 40rpx;
+	font-size: 40rpx;
+	font-weight: 300;
+	color: $color;
+}
 
-		font-size: 40rpx;
-		font-weight: 300;
-		color: $color;
-	}
-
-	.uni-numbox .uni-numbox--disabled {
-		color: #c0c0c0 !important;
-		/* #ifdef H5 */
-		cursor: not-allowed;
-		/* #endif */
-	}
+.uni-numbox .uni-numbox--disabled {
+	color: #c0c0c0 !important;
+	/* #ifdef H5 */
+	cursor: not-allowed;
+	/* #endif */
+}
 </style>
diff --git a/components/uniMap.vue b/components/uniMap.vue
index c315487..e1f1f16 100644
--- a/components/uniMap.vue
+++ b/components/uniMap.vue
@@ -1,111 +1,99 @@
 <template></template>
-<script>
-import { getAddressCode } from "@/api/address";
+
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { getAddressCode } from '@/api/address'
 import config from '@/config/config'
-export default {
-  data() {
-    return {
-      config
-    };
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    // 初始化地图并且调用
-    initMap() {
-      let that = this;
-      uni.chooseLocation({
-        success: function (res) {
-          /**获取地址详情地址 */
-          that.posToCity(res.latitude, res.longitude).then((val) => {
-            /**获取地址code */
-            getAddressCode(
-              val.regeocode.addressComponent.citycode,
-              val.regeocode.addressComponent.township
-            ).then((code) => {
-              that.$emit("callback", { ...val, ...res, ...code });
-              that.$emit("close");
-            });
-          });
-        },
-        fail(e) {
-          console.log(e)
-          that.$emit("close");
-        },
-      });
-    },
 
-    // 根据当前客户端判断展示不同类型数据
-    init() {
-      // #ifdef MP-WEIXIN
-      this.wechatMap();
-      // #endif
-      // #ifndef MP-WEIXIN
-      this.initMap();
-      // #endif
-    },
+const emit = defineEmits<{
+	callback: [payload: Record<string, any>]
+	close: []
+}>()
 
-    // 如果是微信小程序单独走微信小程序授权模式
-    wechatMap() {
-      let that = this;
-      uni.authorize({
-        scope: "scope.userLocation",
-        success() {
-          // 允许授权
-          that.initMap();
-        },
-        fail() {
-          //拒绝授权
-          uni.showModal({
-            content: "检测到您没打开获取地址功能权限，是否去设置打开？",
-            confirmText: "确认",
-            cancelText: "取消",
-            success: (res) => {
-              if (res.confirm) {
-                // 打开设置好后重新刷新地图
-                uni.openSetting({
-                  success: (res) => {
-                    that.initMap();
-                  },
-                });
-              } else {
-                // 取消后关闭
-                that.$emit("close");
-                return false;
-              }
-            },
-          });
-          return false;
-        },
-      });
-    },
-    // 获取城市的数据
-    posToCity(latitude, longitude) {
-      return new Promise((resolve, reject) => {
-        uni.request({
-          url: `https://restapi.amap.com/v3/geocode/regeo`,
-          method: "GET",
-          data: {
-            key: config.aMapKey, //web服务的key
-            location: `${longitude},${latitude}`,
-          },
-          success: ({ data }) => {
-            const { status, info } = data;
-            if (status === "1") {
-              resolve(data);
-            } else {
-              reject(info);
-            }
-          },
-          fail: (err) => {
-            reject(err);
-          },
-        });
-      });
-    },
-  },
-};
+onMounted(() => {
+	init()
+})
+
+function initMap() {
+	uni.chooseLocation({
+		success(res) {
+			posToCity(res.latitude, res.longitude).then((val) => {
+				getAddressCode(
+					val.regeocode.addressComponent.citycode,
+					val.regeocode.addressComponent.township,
+				).then((code) => {
+					emit('callback', { ...val, ...res, ...code })
+					emit('close')
+				})
+			})
+		},
+		fail(e) {
+			console.log(e)
+			emit('close')
+		},
+	})
+}
+
+function init() {
+	// #ifdef MP-WEIXIN
+	wechatMap()
+	// #endif
+	// #ifndef MP-WEIXIN
+	initMap()
+	// #endif
+}
+
+function wechatMap() {
+	uni.authorize({
+		scope: 'scope.userLocation',
+		success() {
+			initMap()
+		},
+		fail() {
+			uni.showModal({
+				content: '检测到您没打开获取地址功能权限，是否去设置打开？',
+				confirmText: '确认',
+				cancelText: '取消',
+				success: (res) => {
+					if (res.confirm) {
+						uni.openSetting({
+							success: () => {
+								initMap()
+							},
+						})
+					} else {
+						emit('close')
+					}
+				},
+			})
+		},
+	})
+}
+
+function posToCity(latitude: number, longitude: number) {
+	return new Promise<any>((resolve, reject) => {
+		uni.request({
+			url: 'https://restapi.amap.com/v3/geocode/regeo',
+			method: 'GET',
+			data: {
+				key: config.aMapKey,
+				location: `${longitude},${latitude}`,
+			},
+			success: ({ data }: any) => {
+				const { status, info } = data
+				if (status === '1') {
+					resolve(data)
+				} else {
+					reject(info)
+				}
+			},
+			fail: (err) => {
+				reject(err)
+			},
+		})
+	})
+}
 </script>
+
 <style lang="scss" scoped>
-</style>
\ No newline at end of file
+</style>
diff --git a/components/verification/verification.vue b/components/verification/verification.vue
index 0a6cb29..54810a0 100644
--- a/components/verification/verification.vue
+++ b/components/verification/verification.vue
@@ -1,9 +1,9 @@
 <template>
   <view>
     <view
-      v-if="!hid"
+      v-if="!state.hid"
       class="flex-row-center"
-      :style="{ top: scHight }"
+      :style="{ top: state.scHight }"
       style="width: 750rpx; position: fixed; z-index: 100; left: 0"
     >
       <view
@@ -14,35 +14,35 @@
           class="flex"
           style="width: 100%"
           animation="false"
-          :style="{ height: originalHeight }"
+          :style="{ height: state.originalHeight }"
         >
           <movable-view
             scale-value="1"
             animation="false"
             damping="5000"
-            :x="moveX"
+            :x="state.moveX"
             :style="{
-              height: sliderHeight,
-              width: sliderWidth,
+              height: state.sliderHeight,
+              width: state.sliderWidth,
               'z-index': 101,
             }"
             direction="horizontal"
           >
             <image
-              :src="imgbk"
+              :src="state.imgbk"
               class="image"
               mode="aspectFit"
               :style="{
-                height: sliderHeight,
-                width: sliderWidth,
-                'margin-top': imgbKH,
+                height: state.sliderHeight,
+                width: state.sliderWidth,
+                'margin-top': state.imgbKH,
               }"
             ></image>
           </movable-view>
           <image
-            :src="img"
+            :src="state.img"
             mode="aspectFit"
-            :style="{ height: originalHeight, width: originalWidth }"
+            :style="{ height: state.originalHeight, width: state.originalWidth }"
             style="border-radius: 10rpx"
           ></image>
         </movable-area>
@@ -61,7 +61,7 @@
             scale-value="1"
             animation="false"
             damping="50"
-            :x="movePv"
+            :x="state.movePv"
             class="flex-row-center"
             style="
               border-radius: 50%;
@@ -78,14 +78,14 @@
             <u-icon
               :color="mainColor"
               size="40"
-              v-if="endLoad"
+              v-if="state.endLoad"
               name="arrow-right"
             ></u-icon>
             <u-icon :color="mainColor" size="40" v-else name="reload"></u-icon>
           </movable-view>
 
-          <text style="padding-left: 140rpx" :style="{ color: col }">{{
-            hasImg
+          <text style="padding-left: 140rpx" :style="{ color: state.col }">{{
+            state.hasImg
           }}</text>
         </movable-area>
         <view class="flex-row-around padding-top" style="width: 100%">
@@ -106,173 +106,178 @@
   </view>
 </template>
 
-<script>
-import api from "@/config/api.js";
-import storage from "@/utils/storage.js";
-import uuid from "@/utils/uuid.modified.js";
-const phone = uni.getSystemInfoSync();
-const l = phone.screenWidth / 750;
-export default {
-  name: "verification",
-  created() {
-    // 可自行调整
-    this.scHight = phone.screenHeight / 2 - 200 + "px";
-    this.getCode();
-  },
-  props: {
-    height: {
-      type: String,
-      default: "80rpx",
+<script setup lang="ts">
+import { reactive, computed } from 'vue'
+import { useStore } from '@/store'
+import api from '@/config/api.js'
+import storage from '@/utils/storage.js'
+import uuid from '@/utils/uuid.modified.js'
+
+const emit = defineEmits(['send'])
+const props = withDefaults(defineProps<{
+  height?: string
+  width?: string
+  left?: string
+  top?: string
+  business?: string
+}>(), {
+  height: '80rpx',
+  width: '350rpx',
+  left: '180rpx',
+  top: '30rpx',
+  business: 'LOGIN'
+})
+
+const store = useStore()
+const phone = uni.getSystemInfoSync()
+const l = phone.screenWidth / 750
+
+const mainColor = computed(() => store.getters.mainColor)
+const state = reactive({
+  flage: false,
+  key: '', // key
+  vsrtx: '点击进行验证', // 按钮提示语
+  vsr: false,
+  hid: true,
+  col: '#838383',
+  movePv: 0,
+  hasImg: '拖动滑块已完成拼图',
+  spcode: '',
+  tl: 0,
+  moveCode: 0,
+  // X轴移动距离
+  moveX: 0,
+  // 模版高度
+  originalHeight: '',
+  // 模版宽度
+  originalWidth: '',
+  // 拼图高度
+  sliderHeight: '',
+  // 平涂宽度
+  sliderWidth: '',
+  scHight: 0,
+  // 原图
+  img: '',
+  // 拼图
+  imgbk: '',
+  endLoad: true,
+  imgbKH: ''
+})
+
+// 可自行调整
+state.scHight = phone.screenHeight / 2 - 200 + 'px'
+getCode()
+
+function show() {
+  state.hid = false
+}
+
+function hide() {
+  if (!state.vsr) {
+    // vsr判断是否验证成功，成功隐藏验证框
+    state.hid = !state.hid
+  }
+}
+
+function error() {
+  state.vsr = false
+  state.hid = false
+  state.moveX = 0
+  state.moveCode = 0
+}
+
+// 获取验证图片
+function getCode() {
+  state.col = '#b3afae'
+  state.hasImg = '图片加载中...'
+  if (!storage.getUuid()) {
+    storage.setUuid(uuid.v1())
+  }
+  uni.request({
+    url: api.common + '/common/slider/' + props.business,
+    header: {
+      uuid: storage.getUuid()
     },
-    width: {
-      type: String,
-      default: "350rpx",
+    success: (res: any) => {
+      state.col = '#838383'
+      state.hasImg = '拖动滑块以完成拼图'
+      const data = res.data.result
+
+      // base64的图片
+      state.img = data.backImage
+      state.imgbk = data.slidingImage
+      // 根据参数动态适应验证图片的高宽
+      state.imgbKH = data.randomY * 1.8 + 'rpx'
+      state.originalHeight = data.originalHeight * 1.8 + 'rpx'
+      state.originalWidth = data.originalWidth * 1.8 + 'rpx'
+      state.sliderHeight = data.sliderHeight * 1.8 + 'rpx'
+      state.sliderWidth = data.sliderWidth * 1.8 + 'rpx'
+      // 适应比率，用来适应滑动距离
+      state.tl = 1 / (1.8 * l)
+      // 无用信息
+      state.spcode = data.capcode
+      // 验证令牌
+      state.key = data.key
+      store.state.verificationKey = data.key
+    }
+  })
+}
+
+function end() {
+  state.endLoad = false
+  // 验证拼图位置是否正确
+  uni.request({
+    method: 'POST',
+    url:
+      api.common +
+      '/common/slider/' +
+      props.business +
+      '?xPos=' +
+      parseInt(String(state.moveCode * state.tl)),
+    header: {
+      uuid: storage.getUuid()
     },
-    left: {
-      type: String,
-      default: "180rpx",
-    },
-    top: {
-      type: String,
-      default: "30rpx",
-    },
-    business: {
-      type: String,
-      default: "LOGIN",
-    },
-  },
-  data() {
-    return {
-      mainColor: this.$mainColor,
-      flage: false,
-      key: "", //key
-      vsrtx: "点击进行验证", //按钮提示语
-      vsr: false, //
-      hid: true,
-      col: "#838383",
-      movePv: 0,
-      hasImg: "拖动滑块已完成拼图",
-      spcode: "",
-      tl: 0,
-      moveCode: 0,
-      //X轴移动距离
-      moveX: 0,
-      //模版高度
-      originalHeight: "",
-      //模版宽度
-      originalWidth: "",
-      //拼图高度
-      sliderHeight: "",
-      //平涂宽度
-      sliderWidth: "",
-      scHight: 0,
-      //原图
-      img: "",
-      //拼图
-      imgbk: "",
-      endLoad: true,
-      imgbKH: "",
-    };
-  },
-  methods: {
-    show() {
-      this.hid = false;
-    },
-    hide() {
-      if (!this.vsr) {
-        // vsr判断是否验证成功，成功隐藏验证框
-        this.hid = !this.hid;
+    success: (res: any) => {
+      state.endLoad = true
+      if (res.data.result == false) {
+        res.data.result = false
+      } else {
+        res.data.result = true
+      }
+
+      if (res.data && res.data.result) {
+        // 验证成功后把key发送出去,后端会把验证信息存在缓存里
+        emit('send', state.key)
+        hide()
+        state.vsr = true
+        state.vsrtx = '已通过验证'
+      } else {
+        getCode() // 让滑块回到起始位置
+        if (state.movePv == 1) {
+          state.movePv = 0
+        } else {
+          state.movePv = 1
+        }
       }
     },
-    error() {
-      this.vsr = false;
-      this.hid = false;
-      this.moveX = 0;
-      this.moveCode = 0;
-    },
-    // 获取验证图片
-    getCode() {
-      this.col = "#b3afae";
-      this.hasImg = "图片加载中...";
-      if (!storage.getUuid()) {
-        storage.setUuid(uuid.v1());
-      }
-      uni.request({
-        url: api.common + "/common/slider/" + this.business,
-        header: {
-          uuid: storage.getUuid(),
-        },
-        success: (res) => {
-          this.col = "#838383";
-          this.hasImg = "拖动滑块以完成拼图";
-          var data = res.data.result;
+    fail: () => {
+      uni.showToast({ title: '连接服务器失败', icon: 'none' })
+    }
+  })
+}
 
-          // base64的图片
-          this.img = data.backImage;
-          this.imgbk = data.slidingImage;
-          // 根据参数动态适应验证图片的高宽
-          this.imgbKH = data.randomY * 1.8 + "rpx";
-          this.originalHeight = data.originalHeight * 1.8 + "rpx";
-          this.originalWidth = data.originalWidth * 1.8 + "rpx";
-          this.sliderHeight = data.sliderHeight * 1.8 + "rpx";
-          this.sliderWidth = data.sliderWidth * 1.8 + "rpx";
-          // 适应比率，用来适应滑动距离
-          this.tl = 1 / (1.8 * l);
-          // 无用信息
-          this.spcode = data.capcode;
-          // 验证令牌
-          this.key = data.key;
-          this.$store.state.verificationKey = data.key;
-        },
-      });
-    },
-    end(e) {
-      this.endLoad = false;
-      // 验证拼图位置是否正确
-      uni.request({
-        method: "POST",
-        url:
-          api.common +
-          "/common/slider/" +
-          this.business +
-          "?xPos=" +
-          parseInt(this.moveCode * this.tl),
-        header: {
-          uuid: storage.getUuid(),
-        },
-        success: (res) => {
-          this.endLoad = true;
-          res.data.result == false
-            ? (res.data.result = false)
-            : (res.data.result = true);
+// 绑定拼图位置
+function moveChange(e: any) {
+  state.moveX = e.detail.x
+  state.moveCode = e.detail.x
+}
 
-          if (res.data && res.data.result) {
-            //验证成功后把key发送出去,后端会把验证信息存在缓存里
-            this.$emit("send", this.key);
-            this.hide();
-            this.vsr = true;
-            this.vsrtx = "已通过验证";
-          } else {
-            this.getCode(); // 让滑块回到起始位置
-            if (this.movePv == 1) {
-              this.movePv = 0;
-            } else {
-              this.movePv = 1;
-            }
-          }
-        },
-        fail: (res) => {
-          this.$msg("连接服务器失败");
-        },
-      });
-    },
-    // 绑定拼图位置
-    moveChange(e) {
-      this.moveX = e.detail.x;
-      this.moveCode = e.detail.x;
-    },
-  },
-};
+defineExpose({
+  show,
+  hide,
+  error,
+  getCode,
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/components/verify-code/verify-code.vue b/components/verify-code/verify-code.vue
index b0137d8..4d652d7 100644
--- a/components/verify-code/verify-code.vue
+++ b/components/verify-code/verify-code.vue
@@ -10,7 +10,7 @@
 			:password="isPassword"
 			:type="inputType"
 			:maxlength="size"
-			@input="input"
+			@input="handleInput"
 			@focus="inputFocus"
 			@blur="inputBlur"
 		/>
@@ -37,7 +37,7 @@
 		</view>
 	</view>
 </template>
-<script>
+<script setup lang="ts">
 /**
  * @description 输入验证码组件
  * @property {string} type = [box|middle|bottom] - 显示类型 默认：box -eg:bottom
@@ -50,175 +50,155 @@
  * @property {string} boxActiveColor - 光标聚焦到的框的颜色 默认：#000000
  * @event {Function(data)} confirm - 输入完成
  */
-export default {
-	name: 'xt-verify-code',
-	emits: ['update:modelValue', 'input', 'confirm'],
-	props: {
-		modelValue: {
-			type: String,
-			default: () => ''
-		},
-		value: {
-			type: String,
-			default: () => ''
-		},
-		type: {
-			type: String,
-			default: () => 'box'
-		},
-		inputType: {
-			type: String,
-			default: () => 'number'
-		},
-		size: {
-			type: Number,
-			default: () => 6
-		},
-		isFocus: {
-			type: Boolean,
-			default: () => true
-		},
-		isPassword: {
-			type: Boolean,
-			default: () => false
-		},
-		cursorColor: {
-			type: String,
-			default: () => '#cccccc'
-		},
-		boxNormalColor: {
-			type: String,
-			default: () => '#cccccc'
-		},
-		boxActiveColor: {
-			type: String,
-			default: () => '#000000'
-		}
-	},
-	data() {
-		return {
-			focused: false,
-			cursorVisible: false,
-			cursorHeight: 35,
-			code: '', // 输入的验证码
-			codeCursorLeft: [] // 向左移动的距离数组
-		};
-	},
-	created() {
-		this.code = this.modelValue || this.value || '';
-		this.focused = this.isFocus;
-		this.cursorVisible = this.isFocus;
-	},
-	mounted() {
-		this.init();
-		if (this.isFocus) {
-			this.$nextTick(() => {
-				this.focusInput();
-			});
-		}
-	},
-	methods: {
-		focusInput() {
-			this.focused = false;
-			this.$nextTick(() => {
-				this.focused = true;
-				// #ifdef H5
-				const inputEl = this.$refs.codeInput;
-				if (inputEl && typeof inputEl.focus === 'function') {
-					inputEl.focus();
-				}
-				// #endif
-			});
-		},
-		/**
-		 * @description 初始化
-		 */
-		init() {
-			this.getCodeCursorLeft();
-			this.setCursorHeight();
-		},
-		/**
-		 * @description 获取元素节点
-		 * @param {string} elm - 节点的id、class 相当于 document.querySelect的参数 -eg: #id
-		 * @param {string} type = [single|array] - 单个元素获取多个元素 默认是单个元素
-		 * @param {Function} callback - 回调函数
-		 */
-		getElement(elm, type = 'single', callback) {
-			uni
-				.createSelectorQuery()
-				.in(this)
-				[type === 'array' ? 'selectAll' : 'select'](elm)
-				.boundingClientRect()
-				.exec(data => {
-					callback(data[0]);
-				});
-		},
-		/**
-		 * @description 计算光标的高度
-		 */
-		setCursorHeight() {
-			this.getElement('.xt__box', 'single', boxElm => {
-				this.cursorHeight = boxElm.height * 0.6;
-			});
-		},
-		/**
-		 * @description 获取光标在每一个box的left位置
-		 */
-		getCodeCursorLeft() {
-			// 获取父级框的位置信息
-			this.getElement('#xt__input-ground', 'single', parentElm => {
-				const parentLeft = parentElm.left;
-				// 获取各个box信息
-				this.getElement('.xt__box', 'array', elms => {
-					this.codeCursorLeft = [];
-					elms.forEach(elm => {
-						this.codeCursorLeft.push(elm.left - parentLeft + elm.width / 2);
-					});
-				});
-			});
-		},
+import { ref, watch, onMounted, nextTick, getCurrentInstance } from 'vue'
 
-		// 输入框输入变化的回调
-		input(e) {
-			const value = e.detail.value;
-			this.code = value;
-			this.cursorVisible = value.length !== this.size;
-			this.$emit('update:modelValue', value);
-			this.$emit('input', value);
-			this.inputSuccess(value);
-		},
+const emit = defineEmits(['update:modelValue', 'input', 'confirm'])
+const props = withDefaults(defineProps<{
+	modelValue?: string
+	value?: string
+	type?: string
+	inputType?: string
+	size?: number
+	isFocus?: boolean
+	isPassword?: boolean
+	cursorColor?: string
+	boxNormalColor?: string
+	boxActiveColor?: string
+}>(), {
+	modelValue: '',
+	value: '',
+	type: 'box',
+	inputType: 'number',
+	size: 6,
+	isFocus: true,
+	isPassword: false,
+	cursorColor: '#cccccc',
+	boxNormalColor: '#cccccc',
+	boxActiveColor: '#000000'
+})
 
-		// 输入完成回调
-		inputSuccess(value) {
-			if (value.length === this.size) {
-				this.$emit('confirm', value);
-			}
-		},
-		// 输入聚焦
-		inputFocus() {
-			this.cursorVisible = this.code.length !== this.size;
-		},
-		// 输入失去焦点
-		inputBlur() {
-			this.cursorVisible = false;
-		},
-		codeFormat(val, isPassword) {
-			let value = '';
-			if (val) {
-				value = isPassword ? '*' : val;
-			}
-			return value;
-		}
-	},
-	watch: {
-		modelValue(val) {
-			this.code = val || '';
-		},
-		value(val) {
-			this.code = val || '';
-		}
+const instance = getCurrentInstance()
+const codeInput = ref<any>(null)
+const focused = ref(false)
+const cursorVisible = ref(false)
+const cursorHeight = ref(35)
+const code = ref('') // 输入的验证码
+const codeCursorLeft = ref<number[]>([]) // 向左移动的距离数组
+
+// 初始化
+watch([() => props.modelValue, () => props.value], ([modelVal, val]) => {
+	code.value = modelVal || val || ''
+}, { immediate: true })
+
+onMounted(() => {
+	focused.value = props.isFocus
+	cursorVisible.value = props.isFocus
+	init()
+	if (props.isFocus) {
+		nextTick(() => {
+			focusInput()
+		})
 	}
-};
+})
+
+function focusInput() {
+	focused.value = false
+	nextTick(() => {
+		focused.value = true
+		// #ifdef H5
+		const inputEl = codeInput.value
+		if (inputEl && typeof inputEl.focus === 'function') {
+			inputEl.focus()
+		}
+		// #endif
+	})
+}
+
+/**
+ * @description 初始化
+ */
+function init() {
+	getCodeCursorLeft()
+	setCursorHeight()
+}
+
+/**
+ * @description 获取元素节点
+ * @param {string} elm - 节点的id、class 相当于 document.querySelect的参数 -eg: #id
+ * @param {string} type = [single|array] - 单个元素获取多个元素 默认是单个元素
+ * @param {Function} callback - 回调函数
+ */
+function getElement(elm: string, type: string = 'single', callback: Function) {
+	uni
+		.createSelectorQuery()
+		.in(instance?.proxy)
+		[type === 'array' ? 'selectAll' : 'select'](elm)
+		.boundingClientRect()
+		.exec((data: any) => {
+			callback(data[0])
+		})
+}
+
+/**
+ * @description 计算光标的高度
+ */
+function setCursorHeight() {
+	getElement('.xt__box', 'single', (boxElm: any) => {
+		cursorHeight.value = boxElm.height * 0.6
+	})
+}
+
+/**
+ * @description 获取光标在每一个box的left位置
+ */
+function getCodeCursorLeft() {
+	// 获取父级框的位置信息
+	getElement('#xt__input-ground', 'single', (parentElm: any) => {
+		const parentLeft = parentElm.left
+		// 获取各个box信息
+		getElement('.xt__box', 'array', (elms: any) => {
+			codeCursorLeft.value = []
+			elms.forEach((elm: any) => {
+				codeCursorLeft.value.push(elm.left - parentLeft + elm.width / 2)
+			})
+		})
+	})
+}
+
+// 输入框输入变化的回调
+function handleInput(e: any) {
+	const value = e.detail.value
+	code.value = value
+	cursorVisible.value = value.length !== props.size
+	emit('update:modelValue', value)
+	emit('input', value)
+	inputSuccess(value)
+}
+
+// 输入完成回调
+function inputSuccess(value: string) {
+	if (value.length === props.size) {
+		emit('confirm', value)
+	}
+}
+
+// 输入聚焦
+function inputFocus() {
+	cursorVisible.value = code.value.length !== props.size
+}
+
+// 输入失去焦点
+function inputBlur() {
+	cursorVisible.value = false
+}
+
+function codeFormat(val: string | undefined, isPassword: boolean): string {
+	let value = ''
+	if (val) {
+		value = isPassword ? '*' : val
+	}
+	return value
+}
 </script>
 <style lang="scss" scoped>
 .xt__verify-code {
diff --git a/config/api.js b/config/api.js
index c83d0db..396de63 100644
--- a/config/api.js
+++ b/config/api.js
@@ -8,9 +8,7 @@ const dev = {
   common: "https://common-api.pickmall.cn",
   buyer: "https://buyer-api.pickmall.cn",
   mqtt: "wss://lilishop-mqtt-pull.dllll.xyz/mqtt",
-  common: "http://192.168.31.244:8890",
-  buyer: "http://192.168.31.244:8888",
-  im: "http://192.168.0.113:8885",
+
 };
 // 生产环境
 const prod = {
diff --git a/js_sdk/lili-pay/wx-pay.js b/js_sdk/lili-pay/wx-pay.js
index 14991cd..1e9ffc7 100644
--- a/js_sdk/lili-pay/wx-pay.js
+++ b/js_sdk/lili-pay/wx-pay.js
@@ -74,7 +74,7 @@ function sendMessage(price) {
     uni.requestSubscribeMessage({
       tmplIds: templateid,
       success: (res) => {
-      
+
       },
       fail: (res) => {
         console.log('fail', res)
diff --git a/main.js b/main.js
index e845274..a53dfd8 100644
--- a/main.js
+++ b/main.js
@@ -38,6 +38,12 @@ export function createApp() {
     config: {
       loadFontOnce: true,
     },
+    props: {
+      form: {
+        labelWidth: '180rpx',
+        labelPosition: 'left',
+      },
+    },
   })
 
   app.config.globalProperties.$store = store
diff --git a/pages.json b/pages.json
index 52362b2..13b73c7 100644
--- a/pages.json
+++ b/pages.json
@@ -580,6 +580,7 @@
 					}
 				},
 				
+				// #ifndef MP-WEIXIN
 				{
 					"path": "live/room",
 					"style": {
@@ -588,6 +589,7 @@
 						"disableScroll": true
 					}
 				},
+				// #endif
 				 {
 					"path": "joinGroup",
 					"style": {
@@ -599,14 +601,17 @@
 							"bounce": "none"
 						}
 					}
-				},{
+				},
+				// #ifndef MP-WEIXIN
+				{
 					"path": "lives",
 					"style": {
 						"navigationStyle": "custom",
 						"navigationBarTextStyle": "black"
-
 					}
-				},{
+				},
+				// #endif
+				{
 					"path": "bargain/list",
 					"style": {
 						"navigationStyle": "custom",
@@ -699,6 +704,17 @@
 						}
 					}
 				},
+				{
+					"path": "payment/error",
+					"style": {
+						"navigationBarTitleText": "支付失败",
+						"navigationStyle": "custom",
+						"navigationBarTextStyle": "black",
+						"app-plus": {
+							"popGesture": "none"
+						}
+					}
+				},
 				{
 					"path": "payment/shareOrderGoods",
 					"style": {
diff --git a/pages/cart/coupon/couponCenter.vue b/pages/cart/coupon/couponCenter.vue
index cf60975..6abb94d 100644
--- a/pages/cart/coupon/couponCenter.vue
+++ b/pages/cart/coupon/couponCenter.vue
@@ -1,302 +1,262 @@
 <template>
 	<view class="coupon-center">
-		<div class="swiper-box">
-			<div class="swiper-item">
-				<div class="scroll-v" enableBackToTop="true" scroll-y>
-					<u-empty mode="coupon" style='margin-top: 20%;' text="没有优惠券了" v-if="whetherEmpty"></u-empty>
-					<view v-else class="coupon-item" v-for="(item, index) in couponList" :key="index">
-						<view class="left">
-							<view class="wave-line">
-								<view class="wave" v-for="(item, index) in 12" :key="index"></view>
-							</view>
-							<view class="message">
-								<view>
-									<!--判断当前优惠券类型  couponType  PRICE || DISCOUNT -->
-									<span v-if="item.couponType == 'DISCOUNT'">{{ item.couponDiscount }}折</span>
-									<span v-else>{{ item.price }}元</span>
-								</view>
-								<view>满{{unitPrice(item.consumeThreshold) }}元可用</view>
-							</view>
-							<view class="circle circle-top"></view>
-							<view class="circle circle-bottom"></view>
-						</view>
-						<view class="right">
-							<view>
-								<!-- 根据scopeType 判断是否是 平台、品类或店铺  -->
-								<view class="coupon-title wes-3" v-if="item.scopeType">
-									<span v-if="item.scopeType == 'ALL' && item.storeId == '0'">全平台</span>
-									<span v-if="item.scopeType == 'PORTION_GOODS_CATEGORY'">仅限品类</span>
-									<view v-else>{{ item.storeName == 'platform' ? '全平台' :item.storeName+'店铺' }}使用
-									</view>
-								</view>
-								<view v-if="item.endTime">有效期至：{{ item.endTime.split(" ")[0] }}</view>
-							</view>
-							<view class="receive" @click="receive(item)">
-								<text>点击</text><br />
-								<text>领取</text>
-							</view>
-							<view class="bg-quan"> 券 </view>
-						</view>
+		<view class="coupon-list">
+			<u-empty mode="coupon" style='margin-top: 20%;' text="没有优惠券了" v-if="whetherEmpty"></u-empty>
+			<view v-else class="coupon-card" v-for="(item, index) in couponList" :key="index">
+				<view class="coupon-card-left">
+					<text class="coupon-price-symbol">¥</text>
+					<text class="coupon-price-value">{{ item.couponType == 'DISCOUNT' ? item.couponDiscount + '折' : unitPrice(item.price) }}</text>
+				</view>
+				<view class="coupon-divider"></view>
+				<view class="coupon-card-right">
+					<view class="coupon-info">
+						<text class="coupon-card-name">{{ item.storeName == 'platform' ? '全平台' : item.storeName + '店铺' }}使用</text>
+						<text class="coupon-card-desc">满{{unitPrice(item.consumeThreshold) }}元可用</text>
+						<text class="coupon-card-time" v-if="item.endTime">有效期至：{{ item.endTime.split(" ")[0] }}</text>
 					</view>
-
-				</div>
-			</div>
-		</div>
+					<view class="coupon-claim-btn" @click="receive(item)">
+						领取
+					</view>
+				</view>
+			</view>
+		</view>
 	</view>
 </template>
 
-<script>
-	import {
-		receiveCoupons
-	} from "@/api/members.js";
-	import {
-		getAllCoupons
-	} from "@/api/promotions.js";
-	export default {
-		data() {
-			return {
-				loadStatus: "more", //下拉状态
-				whetherEmpty: false, //是否为空
-				couponList: [], // 优惠券列表
-				params: {
-					pageNumber: 1,
-					pageSize: 10,
-				},
-				storeId: "", //店铺 id,
-				couponData: ""
-			};
-		},
-		onLoad(option) {
-			this.storeId = option.storeId;
-			this.getCoupon();
-		},
-		onReachBottom() {
+<script setup lang="ts">
+import { receiveCoupons } from '@/api/members.js'
+import { getAllCoupons } from '@/api/promotions.js'
+import { useStore } from '@/store'
+import { unitPrice } from '@/utils/filters.js'
+import {
+	onLoad,
+	onNavigationBarButtonTap,
+	onPullDownRefresh,
+	onReachBottom,
+} from '@dcloudio/uni-app'
+import { getCurrentInstance, ref } from 'vue'
 
-			this.loadMore()
-		},
-		onPullDownRefresh() {
-			//下拉刷新
-			this.params.pageNumber = 1;
-			this.couponList = [];
-			this.getCoupon();
-		},
-		methods: {
-			/**
-			 * 获取当前优惠券
-			 */
-			getCoupon() {
-				uni.showLoading({
-					title: "加载中",
-				});
-				let submitData = {
-					...this.params
-				};
-				// 判断当前是否有店铺
-				this.storeId ? (submitData = {
-						...this.params,
-						storeId: this.storeId
-					}) : "",
-					getAllCoupons(submitData)
-					.then((res) => {
-						if (this.$store.state.isShowToast){ uni.hideLoading() };
-						uni.stopPullDownRefresh();
-						if (res.data.code == 200) {
-							// 如果请求成功，展示数据并进行展示
-							this.couponData = res.data.result
-							if (this.couponData.total == 0) {
-								// 当本次请求数据为空展示空信息
-								this.whetherEmpty = true;
-							} else {
-								this.couponList.push(...this.couponData.records);
-								this.loadStatus = "noMore";
-							}
-						}
-					})
-					.catch((err) => {
-						 if (this.$store.state.isShowToast){ uni.hideLoading() };
-					});
-			},
-			/**
-			 * 领取优惠券
-			 */
-			receive(val) {
-				this.$u.throttle(()=>{
-					this.fetchCoupon(val)
-				}, 1500)
-				
-			},
+const store = useStore()
+const { proxy } = getCurrentInstance()!
 
-			fetchCoupon(val){
-				receiveCoupons(val.id).then((res) => {
-					if (res.data.code == 200) {
-						uni.showToast({
-							title: "领取成功",
-							icon: "none",
-						});
-					} else {
-						uni.showToast({
-							title: res.data.message,
-							icon: "none",
-						});
-					}
-				});
-			},
+const loadStatus = ref('more')
+const whetherEmpty = ref(false)
+const couponList = ref<any[]>([])
+const params = ref({
+  pageNumber: 1,
+  pageSize: 10,
+})
+const storeId = ref('')
+const couponData = ref<any>(null)
 
-			/**
-			 * 加载更多
-			 */
-			loadMore() {
-				if (this.couponData.total > this.params.pageNumber * this.params.pageSize) {
-					this.params.pageNumber++;
-					this.getCoupon();
-				}
-			},
-		},
-		onNavigationBarButtonTap(e) {
-			uni.navigateTo({
-				url: "/pages/cart/coupon/couponIntro",
-			});
-		},
-	};
+onLoad((option) => {
+  storeId.value = option.storeId || ''
+  getCoupon()
+})
+
+onReachBottom(() => {
+  loadMore()
+})
+
+onPullDownRefresh(() => {
+  params.value.pageNumber = 1
+  couponList.value = []
+  getCoupon()
+})
+
+onNavigationBarButtonTap(() => {
+  uni.navigateTo({
+    url: '/pages/cart/coupon/couponIntro',
+  })
+})
+
+function hideLoadingIfNeeded() {
+  if (store.state.isShowToast) uni.hideLoading()
+}
+
+function getCoupon() {
+  uni.showLoading({ title: '加载中' })
+  const submitData = storeId.value
+    ? { ...params.value, storeId: storeId.value }
+    : { ...params.value }
+
+  getAllCoupons(submitData)
+    .then((res) => {
+      hideLoadingIfNeeded()
+      uni.stopPullDownRefresh()
+      if (res.data.code == 200) {
+        couponData.value = res.data.result
+        if (couponData.value.total == 0) {
+          whetherEmpty.value = true
+        } else {
+          couponList.value.push(...couponData.value.records)
+          loadStatus.value = 'noMore'
+        }
+      }
+    })
+    .catch(() => {
+      hideLoadingIfNeeded()
+    })
+}
+
+function receive(val: any) {
+  proxy.$u.throttle(() => {
+    fetchCoupon(val)
+  }, 1500)
+}
+
+function fetchCoupon(val: any) {
+  receiveCoupons(val.id).then((res) => {
+    if (res.data.code == 200) {
+      uni.showToast({ title: '领取成功', icon: 'none' })
+    } else {
+      uni.showToast({ title: res.data.message, icon: 'none' })
+    }
+  })
+}
+
+function loadMore() {
+  if (couponData.value?.total > params.value.pageNumber * params.value.pageSize) {
+    params.value.pageNumber++
+    getCoupon()
+  }
+}
 </script>
-<style>
-	page {
-		height: 100%;
-	}
-</style>
+
 <style lang="scss" scoped>
-	.coupon-center {
-		height: 100%;
+.coupon-center {
+  min-height: 100vh;
+  background: #f7f8fa;
+}
 
-		.swiper-box {
-			.coupon-item {
-				display: flex;
-				align-items: center;
-				height: 220rpx;
-				margin: 20rpx;
+.coupon-list {
+  padding: 24rpx;
+}
 
-				.left {
-					height: 100%;
-					width: 260rpx;
-					background-color: $light-color;
-					position: relative;
+.coupon-card {
+  display: flex;
+  align-items: stretch;
+  background: #fff;
+  border-radius: 24rpx;
+  margin-bottom: 24rpx;
+  position: relative;
+  box-shadow: none;
+  border: 1rpx solid #f0f1f5;
+  overflow: hidden;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
 
-					.message {
-						color: $font-color-white;
-						display: flex;
-						justify-content: center;
-						align-items: center;
-						flex-direction: column;
-						margin-top: 40rpx;
+  &:active {
+    transform: scale(0.98);
+  }
 
-						view:nth-child(1) {
-							font-weight: bold;
-							font-size: 60rpx;
-						}
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    width: 32rpx;
+    height: 32rpx;
+    background: #f7f8fa;
+    border-radius: 50%;
+    left: 204rpx;
+    z-index: 2;
+    box-shadow: inset 0 0 0 1rpx #eceef2;
+  }
 
-						view:nth-child(2) {
-							font-size: $font-sm;
-						}
-					}
+  &::before {
+    top: -16rpx;
+  }
 
-					.wave-line {
-						height: 220rpx;
-						width: 8rpx;
-						position: absolute;
-						top: 0;
-						left: 0;
-						background-color: $light-color;
-						overflow: hidden;
+  &::after {
+    bottom: -16rpx;
+  }
+}
 
-						.wave {
-							width: 8rpx;
-							height: 16rpx;
-							background-color: #ffffff;
-							border-radius: 0 16rpx 16rpx 0;
-							margin-top: 4rpx;
-						}
-					}
+.coupon-card-left {
+  width: 220rpx;
+  min-height: 180rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: #ff3b30;
+  position: relative;
+  background: linear-gradient(135deg, #fff5f5 0%, #ffecec 100%);
+}
 
-					.circle {
-						width: 40rpx;
-						height: 40rpx;
-						background-color: $bg-color;
-						position: absolute;
-						border-radius: 50%;
-						z-index: 111;
-					}
+.coupon-price-symbol {
+  font-size: 32rpx;
+  font-weight: 700;
+  margin-right: 4rpx;
+}
 
-					.circle-top {
-						top: -20rpx;
-						right: -20rpx;
-					}
+.coupon-price-value {
+  font-size: 56rpx;
+  font-weight: 900;
+  line-height: 1;
+  letter-spacing: -1rpx;
+}
 
-					.circle-bottom {
-						bottom: -20rpx;
-						right: -20rpx;
-					}
-				}
+.coupon-divider {
+  position: absolute;
+  left: 220rpx;
+  top: 24rpx;
+  bottom: 24rpx;
+  width: 0;
+  border-left: 2rpx dashed #eceef2;
+}
 
-				.right {
-					display: flex;
-					justify-content: space-between;
-					align-items: center;
-					width: 450rpx;
-					font-size: $font-sm;
-					height: 100%;
-					background-color: #ffffff;
-					overflow: hidden;
-					position: relative;
+.coupon-card-right {
+  flex: 1;
+  padding: 32rpx 32rpx 32rpx 40rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20rpx;
+  background: #fff;
+}
 
-					>view:nth-child(1) {
-						color: #666666;
-						margin-left: 20rpx;
-						display: flex;
-						height: 100%;
-						flex-direction: column;
-						justify-content: space-around;
+.coupon-info {
+  display: flex;
+  flex-direction: column;
+  gap: 12rpx;
+  flex: 1;
+  min-width: 0;
+}
 
-						>view:nth-child(1) {
-							color: #ff6262;
-							font-size: 30rpx;
-						}
-					}
+.coupon-card-name {
+  font-size: 30rpx;
+  color: #111;
+  font-weight: 700;
+  line-height: 1.3;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
 
-					.receive {
-						color: #ffffff;
-						background-color: $main-color;
-						border-radius: 50%;
-						width: 86rpx;
-						height: 86rpx;
-						text-align: center;
-						margin-right: 30rpx;
-						vertical-align: middle;
-						padding-top: 8rpx;
-						position: relative;
-						z-index: 2;
-					}
+.coupon-card-desc {
+  font-size: 24rpx;
+  color: #8a8f99;
+  font-weight: 500;
+}
 
-					.bg-quan {
-						width: 244rpx;
-						height: 244rpx;
-						border: 6rpx solid $main-color;
-						border-radius: 50%;
-						opacity: 0.1;
-						color: $main-color;
-						text-align: center;
-						padding-top: 30rpx;
-						font-size: 130rpx;
-						position: absolute;
-						right: -54rpx;
-						bottom: -60rpx;
-					}
-				}
-			}
-		}
-	}
+.coupon-card-time {
+  font-size: 22rpx;
+  color: #b0b3bf;
+}
 
-	.coupon-title {
-		width: 260rpx;
+.coupon-claim-btn {
+  flex-shrink: 0;
+  padding: 16rpx 32rpx;
+  border-radius: 40rpx;
+  font-size: 26rpx;
+  font-weight: 700;
+  color: #fff;
+  background: linear-gradient(135deg, #ff6b35, #ff4b2b);
+  box-shadow: 0 8rpx 16rpx rgba(255, 75, 43, 0.25);
 
-	}
+  &:active {
+    opacity: 0.9;
+  }
+}
 </style>
diff --git a/pages/cart/coupon/couponDetail.vue b/pages/cart/coupon/couponDetail.vue
index 7e2675d..aea60ff 100644
--- a/pages/cart/coupon/couponDetail.vue
+++ b/pages/cart/coupon/couponDetail.vue
@@ -2,52 +2,46 @@
   <view class="content">
     <view class="body">
       <view class="top-view">
-        <view class="title">{{coupon.title}}</view>
-        <view class="price" v-if="coupon.couponType =='PRICE'"><text>￥</text>{{unitPrice(coupon.price)}}</view>
-        <view class="price" v-if="coupon.couponType =='DISCOUNT'">{{coupon.discount}}折</view>
-        <view class="text">满{{coupon.consumeThreshold}}元可用</view>
-        <view class="bg-quan">
-          券
-        </view>
-        <view class="jiao-1" :class="{'used-color':coupon.used_status!=0}">
-          <text class="text-1">{{coupon.used_status == 0?'新到':coupon.used_status_text}}</text>
+        <view class="title">{{ coupon.title }}</view>
+        <view class="price" v-if="coupon.couponType == 'PRICE'"><text>￥</text>{{ unitPrice(coupon.price) }}</view>
+        <view class="price" v-if="coupon.couponType == 'DISCOUNT'">{{ coupon.discount }}折</view>
+        <view class="text">满{{ coupon.consumeThreshold }}元可用</view>
+        <view class="bg-quan">券</view>
+        <view class="jiao-1" :class="{ 'used-color': coupon.used_status != 0 }">
+          <text class="text-1">{{ coupon.used_status == 0 ? '新到' : coupon.used_status_text }}</text>
         </view>
       </view>
       <view class="bottom-view">
         <view class="text">• 使用范围：{{
-                    coupon.scopeType == 'ALL' && coupon.storeId == '0'
-                      ? "全平台"
-                      : coupon.scopeType == "PORTION_GOODS"
-                      ? "部分商品"
-					  : coupon.scopeType == "PORTION_GOODS_CATEGORY"
-					  ? "部分分类商品"
-                      : coupon.storeName == 'platform' ? '全平台' :coupon.storeName+''
-                  }}使用</view>
-        <view class="text">• 有效期至：{{coupon.endTime}}</view>
-
+          coupon.scopeType == 'ALL' && coupon.storeId == '0'
+            ? '全平台'
+            : coupon.scopeType == 'PORTION_GOODS'
+              ? '部分商品'
+              : coupon.scopeType == 'PORTION_GOODS_CATEGORY'
+                ? '部分分类商品'
+                : coupon.storeName == 'platform' ? '全平台' : coupon.storeName + ''
+        }}使用</view>
+        <view class="text">• 有效期至：{{ coupon.endTime }}</view>
       </view>
-
     </view>
   </view>
 </template>
 
-<script>
-export default {
-  data() {
-    return {
-      coupon: {}, //优惠券数据
-    };
-  },
-  onLoad(option) {
-    this.coupon = JSON.parse(decodeURIComponent(option.item));
-  },
-};
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { unitPrice } from '@/utils/filters.js'
+
+const coupon = ref<Record<string, any>>({})
+
+onLoad((option) => {
+  coupon.value = JSON.parse(decodeURIComponent(option.item))
+})
 </script>
 
 <style lang="scss" scoped>
 page,
 .content {
-  // background: $main-color;
   height: 100%;
 }
 .body {
diff --git a/pages/cart/coupon/index.vue b/pages/cart/coupon/index.vue
index 3f60d3d..a331dad 100644
--- a/pages/cart/coupon/index.vue
+++ b/pages/cart/coupon/index.vue
@@ -59,81 +59,59 @@
     </view>
   </div>
 </template>
-<script>
-import { useCoupon } from "@/api/trade.js";
+<script setup lang="ts">
+import { ref, computed, watch, onMounted } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import { useCoupon } from '@/api/trade.js'
+import { unitPrice } from '@/utils/filters.js'
 
-export default {
-  data() {
-    return {
-      lightColor: this.$lightColor,
-      current: 0,
-      list: [
-        {
-          name: "可用优惠券",
-        },
-        {
-          name: "不可用优惠券",
-        },
-      ],
-      couponsList: [], //优惠券集合
-      params: {
-        //传参
-        memberCouponStatus: "NEW", //优惠券状态
-        pageNumber: 1,
-        pageSize: 10,
-        scopeId: "", //商品skuid
-        storeId: "", //店铺id
-        totalPrice: "", //价格
-      },
-      routerVal: "", //上级传参
-    };
-  },
-  onLoad(options) {
-    this.routerVal = options;
-  },
-  watch: {
-    current(val) {
-      console.log(this.$store.state.cantUseCoupons);
-      val == 0
-        ? (this.couponsList = this.$store.state.canUseCoupons)
-        : (this.couponsList = this.$store.state.cantUseCoupons);
-    },
-  },
+const store = useStore()
 
-  mounted() {
-    this.init();
-    console.log(this.routerVal);
-  },
+const lightColor = computed(() => store.getters.lightColor)
+const current = ref(0)
+const list = [
+  { name: '可用优惠券' },
+  { name: '不可用优惠券' },
+]
+const couponsList = ref<any[]>([])
+const routerVal = ref<Record<string, any>>({})
 
-  methods: {
-    /**
-     * 从vuex中拿取优惠券信息
-     */
-    init() {
-      this.couponsList = this.$store.state.canUseCoupons;
-    },
-    /**
-     * 领取优惠券
-     */
-    clickWay(coupon) {
-      useCoupon({
-        memberCouponId: coupon.id,
-        used: !this.routerVal.selectedCoupon.includes(coupon.id),
-        way: this.routerVal.way,
-      }).then((res) => {
-        if (res.data.success) {
-          uni.navigateBack();
-        } else {
-          uni.showToast({
-            title: res.data.message,
-            duration: 2000,
-            icon: "none",
-          });
-        }
-      });
-    },
-  },
-};
+onLoad((options) => {
+  routerVal.value = options || {}
+})
+
+watch(current, (val) => {
+  couponsList.value = val == 0
+    ? store.state.canUseCoupons
+    : store.state.cantUseCoupons
+})
+
+onMounted(() => {
+  init()
+})
+
+function init() {
+  couponsList.value = store.state.canUseCoupons
+}
+
+function clickWay(coupon: any) {
+  useCoupon({
+    memberCouponId: coupon.id,
+    used: !routerVal.value.selectedCoupon.includes(coupon.id),
+    way: routerVal.value.way,
+  }).then((res) => {
+    if (res.data.success) {
+      uni.navigateBack()
+    } else {
+      uni.showToast({
+        title: res.data.message,
+        duration: 2000,
+        icon: 'none',
+      })
+    }
+  })
+}
 </script>
 <style scoped lang="scss">
 .desc {
diff --git a/pages/cart/coupon/myCoupon.vue b/pages/cart/coupon/myCoupon.vue
index 7f2a949..6b04446 100644
--- a/pages/cart/coupon/myCoupon.vue
+++ b/pages/cart/coupon/myCoupon.vue
@@ -1,471 +1,393 @@
-<template>
-  <view class="b-content">
-    <view class="navbar">
-      <!-- 循环出头部tab栏 -->
-      <view
-        v-for="(item, index) in navList"
-        :key="index"
-        class="nav-item"
-        @click="handleTabClick(index)"
-        ><text :class="{ current: tabCurrentIndex === index }">{{
-          item.text
-        }}</text></view
-      >
-    </view>
-    <swiper
-      :current="tabCurrentIndex"
-      class="swiper-box"
-      duration="300"
-      @change="changeTab"
-    >
-      <swiper-item
-        class="tab-content"
-        v-for="(navItem, navIndex) in navList"
-        :key="navIndex"
-      >
-        <scroll-view
-          class="list-scroll-content"
-          scroll-y
-          @scrolltolower="loadData"
-        >
-          <!-- 空白页 -->
-          <u-empty
-            mode="coupon"
-            text="暂无优惠券了"
-            v-if="navItem.whetherEmpty"
-          ></u-empty>
-
-          <!-- 数据 -->
-          <view
-            class="coupon-item"
-            :class="{ 'coupon-used': navIndex != 0 }"
-            v-for="(coupon, index) in navItem.dataList"
-            :key="index"
-          >
-            <view class="left">
-              <view class="wave-line">
-                <view
-                  class="wave"
-                  v-for="(item, index) in 12"
-                  :key="index"
-                ></view>
-              </view>
-              <view class="message">
-                <view class="price" v-if="coupon.couponType == 'DISCOUNT'"
-                  >{{ coupon.discount }}折</view
-                >
-                <view class="price" v-else>{{ coupon.price }}元</view>
-                <view class="sub-price"
-                  >满{{unitPrice(coupon.consumeThreshold) }}可用</view
-                >
-              </view>
-              <view class="circle circle-top"></view>
-              <view class="circle circle-bottom"></view>
-            </view>
-            <view class="right" v-if="coupon">
-              <view class="content">
-                <view class="title-1">{{ coupon.title }}</view>
-                <view class="title-2"
-                  >使用范围：{{
-                    coupon.scopeType == "ALL" && coupon.storeId == "0"
-                      ? "全平台"
-                      : coupon.scopeType == "PORTION_GOODS"
-                      ? "部分商品"
-					  : coupon.scopeType == "PORTION_GOODS_CATEGORY"
-					  ? "部分分类商品"
-                      : coupon.storeName == "platform"
-                      ? "全平台"
-                      : coupon.storeName + ""
-                  }}使用</view
-                >
-                <view v-if="coupon.endTime">{{ coupon.endTime }}</view>
-                <view @click="couponDetail(coupon)"
-                  >详细说明
-                  <u-icon
-                    style="float: right; margin-top: 10rpx"
-                    name="arrow-right"
-                  ></u-icon>
-                </view>
-              </view>
-              <view class="jiao-1" v-if="navIndex == 0">
-                <text class="text-1">新到</text>
-                <text class="text-2" v-if="coupon.used_status == 1"
-                  >将过期</text
-                >
-              </view>
-              <image
-                class="no-icon"
-                v-if="navIndex == 1"
-                src="@/static/img/used.png"
-              ></image>
-              <image
-                class="no-icon"
-                v-if="navIndex == 2"
-                src="@/static/img/overdue.png"
-              ></image>
-              <view
-                class="receive"
-                v-if="navIndex == 0"
-                @click="useItNow(coupon)"
-              >
-                <text>立即</text><br />
-                <text>使用</text>
-              </view>
-              <view class="bg-quan"> 券 </view>
-            </view>
-          </view>
-          <uni-load-more :status="navItem.loadStatus"></uni-load-more>
-        </scroll-view>
-      </swiper-item>
-    </swiper>
-  </view>
-</template>
-
-<script>
-import { getMemberCoupons } from "@/api/members.js";
-
-export default {
-  data() {
-    return {
-      tabCurrentIndex: 0, //tab栏下标默认为0 未使用
-      navList: [
-        //每个tab存储的信息
-        {
-          text: "未使用",
-          loadStatus: "more",
-          dataList: [],
-          params: {
-            memberCouponStatus: "NEW",
-            pageNumber: 1,
-            pageSize: 10,
-            status: 1,
-          },
-          whetherEmpty: false,
-        },
-        {
-          text: "已使用",
-          loadStatus: "more",
-          dataList: [],
-          params: {
-            memberCouponStatus: "USED",
-            pageNumber: 1,
-            pageSize: 10,
-            status: 2,
-          },
-          whetherEmpty: false,
-        },
-        {
-          text: "已过期",
-          loadStatus: "more",
-          dataList: [],
-          params: {
-            memberCouponStatus: "EXPIRE",
-            pageNumber: 1,
-            pageSize: 10,
-            status: 3,
-          },
-          whetherEmpty: false,
-        },
-      ],
-      couponList: [], //优惠券列表
-    };
-  },
-
-  onShow() {
-    this.navList[this.tabCurrentIndex].params.pageNumber = 1;
-    this.navList[this.tabCurrentIndex].dataList = [];
-    this.getData();
-  },
-
-  watch: {
-    /**
-     * 监听切换顶部tab栏实现刷新数据
-     */
-    tabCurrentIndex(val) {
-      if (this.navList[val].dataList.length == 0) this.getData();
-    },
-  },
-  methods: {
-    /**
-     * 顶部tab点击
-     */
-    handleTabClick(index) {
-      this.tabCurrentIndex = index;
-    },
-
-    /**
-     * 读取优惠券
-     */
-    getData() {
-      uni.showLoading({
-        title: "加载中",
-      });
-      let index = this.tabCurrentIndex;
-      getMemberCoupons(this.navList[index].params).then((res) => {
-        uni.stopPullDownRefresh();
-        if (res.data.success) {
-          let data = res.data.result.records;
-          if (data.length == 0) {
-            if (res.data.pageNumber == 1) {
-              this.navList[index].whetherEmpty = true;
-            } else {
-              this.navList[index].loadStatus = "noMore";
-            }
-          } else if (data.length < 10) {
-            this.navList[index].loadStatus = "noMore";
-            this.navList[index].dataList.push(...data);
-          } else {
-            this.navList[index].dataList.push(...data);
-          }
-        }
-         if (this.$store.state.isShowToast){ uni.hideLoading() };
-      });
-    },
-
-    /**
-     * 切换tab
-     */
-    changeTab(e) {
-      this.tabCurrentIndex = e.target.current;
-    },
-
-    /**
-     * 加载数据
-     */
-    loadData() {
-      let index = this.tabCurrentIndex;
-      if (this.navList[index].loadStatus != "noMore") {
-        this.navList[index].params.pageNumber++;
-        this.getData();
-      }
-    },
-
-    /**
-     * 立即使用优惠券
-     */
-    useItNow(item) {
-      uni.navigateTo({
-        url: `/pages/navigation/search/searchPage?promotionsId=${item.couponId}&promotionType=COUPON`,
-      });
-    },
-
-    /**
-     * 优惠券详情
-     */
-    couponDetail(item) {
-      uni.navigateTo({
-        url:
-          "/pages/cart/coupon/couponDetail?item=" +
-          encodeURIComponent(JSON.stringify(item)),
-      });
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-page {
-  height: 100%;
-}
-$item-color: #fff;
-
-.b-content {
-  background: $page-color-base;
-  height: 100%;
-}
-
-.swiper-box {
-  height: calc(100vh - 40px);
-}
-
-.list-scroll-content {
-  height: 100%;
-  width: 100%;
-
-  .coupon-item {
-    display: flex;
-    align-items: center;
-    height: 220rpx;
-    margin: 20rpx;
-
-    .left {
-      height: 100%;
-      width: 260rpx;
-      background-color: $light-color;
-      position: relative;
-
-      .message {
-        color: $font-color-white;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
-        margin-top: 40rpx;
-
-        view:nth-child(1) {
-          font-weight: bold;
-          font-size: 60rpx;
-        }
-
-        view:nth-child(2) {
-          font-size: $font-sm;
-        }
-      }
-
-      .wave-line {
-        height: 220rpx;
-        width: 8rpx;
-        position: absolute;
-        top: 0;
-        left: 0;
-        background-color: $light-color;
-        overflow: hidden;
-
-        .wave {
-          width: 8rpx;
-          height: 16rpx;
-          background-color: #ffffff;
-          border-radius: 0 16rpx 16rpx 0;
-          margin-top: 4rpx;
-        }
-      }
-
-      .circle {
-        width: 40rpx;
-        height: 40rpx;
-        background-color: $bg-color;
-        position: absolute;
-        border-radius: 50%;
-        z-index: 111;
-      }
-
-      .circle-top {
-        top: -20rpx;
-        right: -20rpx;
-      }
-
-      .circle-bottom {
-        bottom: -20rpx;
-        right: -20rpx;
-      }
-    }
-
-    .right {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      width: 450rpx;
-      font-size: $font-sm;
-      height: 100%;
-      background-color: #ffffff;
-      overflow: hidden;
-      position: relative;
-
-      .content {
-        color: #666666;
-        margin-left: 20rpx;
-        line-height: 2em;
-        > view:nth-child(1) {
-          color: #ff6262;
-          font-size: 30rpx;
-        }
-
-        .title-1,
-        .title-2,
-        .title-3 {
-          font-size: 25rpx;
-        }
-      }
-      .receive {
-        color: #ffffff;
-        background-color: $main-color;
-        border-radius: 50%;
-        width: 86rpx;
-        height: 86rpx;
-        text-align: center;
-        margin-right: 48rpx;
-        vertical-align: middle;
-        padding-top: 8rpx;
-        position: relative;
-        z-index: 2;
-      }
-
-      .jiao-1 {
-        background-color: #ffc71c;
-        width: 400rpx;
-        transform: rotate(45deg);
-        text-align: center;
-        position: absolute;
-        color: #ffffff;
-        right: -130rpx;
-        top: 0;
-        .text-1 {
-          margin-left: 68rpx;
-          font-size: 28rpx;
-        }
-        .text-2 {
-          margin-left: 68rpx;
-          font-size: 28rpx;
-        }
-      }
-      .no-icon {
-        border-radius: 50%;
-        width: 86rpx;
-        height: 86rpx;
-        margin-right: 48rpx;
-        position: relative;
-        z-index: 2;
-      }
-      .bg-quan {
-        width: 244rpx;
-        height: 244rpx;
-        border: 6rpx solid $main-color;
-        border-radius: 50%;
-        opacity: 0.1;
-        color: $main-color;
-        text-align: center;
-        padding-top: 30rpx;
-        font-size: 130rpx;
-        position: absolute;
-        right: -54rpx;
-        bottom: -60rpx;
-      }
-    }
-  }
-}
-
-.navbar {
-  display: flex;
-  height: 80rpx;
-  padding: 0 5px;
-  background: #fff;
-  color: $light-color;
-  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
-  position: relative;
-  z-index: 10;
-
-  .nav-item {
-    flex: 1;
-    height: 100%;
-    font-size: 26rpx;
-    color: $light-color;
-    position: relative;
-    text-align: center;
-    text {
-      line-height: 80rpx;
-    }
-    .current {
-      font-weight: bold;
-      font-size: 28rpx;
-      &:after {
-        content: "";
-        position: absolute;
-        bottom: 10rpx;
-        left: 108rpx;
-        width: 30rpx;
-        border-bottom: 2px solid $light-color;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <view class="b-content">
+    <view class="coupon-tabs">
+      <u-tabs
+        :list="navList"
+        keyName="text"
+        :scrollable="false"
+        :inactiveStyle="{ color: '#333' }"
+        v-model:current="tabCurrentIndex"
+        :lineColor="lightColor"
+        :activeStyle="{ color: lightColor }"
+      ></u-tabs>
+    </view>
+    <swiper
+      :current="tabCurrentIndex"
+      class="swiper-box"
+      duration="300"
+      @change="changeTab"
+    >
+      <swiper-item
+        class="tab-content"
+        v-for="(navItem, navIndex) in navList"
+        :key="navIndex"
+      >
+        <scroll-view
+          class="list-scroll-content"
+          scroll-y
+          @scrolltolower="loadData"
+        >
+          <u-empty
+            mode="coupon"
+            text="暂无优惠券了"
+            v-if="navItem.whetherEmpty"
+          ></u-empty>
+
+          <view
+            class="coupon-card"
+            :class="{ 'coupon-used': navIndex != 0, 'coupon-expired': navIndex == 2 }"
+            v-for="(coupon, index) in navItem.dataList"
+            :key="index"
+          >
+            <view class="coupon-card-left">
+              <text class="coupon-price-symbol" v-if="coupon.couponType != 'DISCOUNT'">¥</text>
+              <text class="coupon-price-value">{{ coupon.couponType == 'DISCOUNT' ? coupon.discount + '折' : unitPrice(coupon.price) }}</text>
+            </view>
+            <view class="coupon-divider"></view>
+            <view class="coupon-card-right">
+              <view class="coupon-info">
+                <text class="coupon-card-name">{{ coupon.title }}</text>
+                <text class="coupon-card-desc">使用范围：{{
+                  coupon.scopeType == "ALL" && coupon.storeId == "0"
+                    ? "全平台"
+                    : coupon.scopeType == "PORTION_GOODS"
+                    ? "部分商品"
+                    : coupon.scopeType == "PORTION_GOODS_CATEGORY"
+                    ? "部分分类商品"
+                    : coupon.storeName == "platform"
+                    ? "全平台"
+                    : coupon.storeName + ""
+                }}使用</text>
+                <text class="coupon-card-time" v-if="coupon.endTime">{{ coupon.endTime }}</text>
+              </view>
+              <view class="coupon-status-btn" v-if="navIndex == 0" @click="useItNow(coupon)">
+                立即使用
+              </view>
+              <view class="coupon-status-btn disabled" v-else-if="navIndex == 1">
+                已使用
+              </view>
+              <view class="coupon-status-btn disabled" v-else>
+                已过期
+              </view>
+            </view>
+          </view>
+          <uni-load-more :status="navItem.loadStatus"></uni-load-more>
+        </scroll-view>
+      </swiper-item>
+    </swiper>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { getMemberCoupons } from '@/api/members.js'
+import { useStore } from '@/store'
+import { unitPrice } from '@/utils/filters.js'
+import { onShow } from '@dcloudio/uni-app'
+import { computed, ref, watch } from 'vue'
+
+const store = useStore()
+
+const lightColor = computed(() => store.getters.lightColor)
+const tabCurrentIndex = ref(0)
+const navList = ref([
+  {
+    text: '未使用',
+    loadStatus: 'more',
+    dataList: [] as any[],
+    params: {
+      memberCouponStatus: 'NEW',
+      pageNumber: 1,
+      pageSize: 10,
+      status: 1,
+    },
+    whetherEmpty: false,
+  },
+  {
+    text: '已使用',
+    loadStatus: 'more',
+    dataList: [] as any[],
+    params: {
+      memberCouponStatus: 'USED',
+      pageNumber: 1,
+      pageSize: 10,
+      status: 2,
+    },
+    whetherEmpty: false,
+  },
+  {
+    text: '已过期',
+    loadStatus: 'more',
+    dataList: [] as any[],
+    params: {
+      memberCouponStatus: 'EXPIRE',
+      pageNumber: 1,
+      pageSize: 10,
+      status: 3,
+    },
+    whetherEmpty: false,
+  },
+])
+
+onShow(() => {
+  navList.value[tabCurrentIndex.value].params.pageNumber = 1
+  navList.value[tabCurrentIndex.value].dataList = []
+  getData()
+})
+
+watch(tabCurrentIndex, (val) => {
+  if (navList.value[val].dataList.length == 0) getData()
+})
+
+function hideLoadingIfNeeded() {
+  if (store.state.isShowToast) uni.hideLoading()
+}
+
+function handleTabClick(index: number) {
+  tabCurrentIndex.value = index
+}
+
+function getData() {
+  uni.showLoading({ title: '加载中' })
+  const index = tabCurrentIndex.value
+  getMemberCoupons(navList.value[index].params).then((res) => {
+    uni.stopPullDownRefresh()
+    if (res.data.success) {
+      const data = res.data.result.records
+      if (data.length == 0) {
+        if (res.data.pageNumber == 1) {
+          navList.value[index].whetherEmpty = true
+        } else {
+          navList.value[index].loadStatus = 'noMore'
+        }
+      } else if (data.length < 10) {
+        navList.value[index].loadStatus = 'noMore'
+        navList.value[index].dataList.push(...data)
+      } else {
+        navList.value[index].dataList.push(...data)
+      }
+    }
+    hideLoadingIfNeeded()
+  })
+}
+
+function changeTab(e: any) {
+  tabCurrentIndex.value = e.detail.current
+}
+
+function loadData() {
+  const index = tabCurrentIndex.value
+  if (navList.value[index].loadStatus != 'noMore') {
+    navList.value[index].params.pageNumber++
+    getData()
+  }
+}
+
+function useItNow(item: any) {
+  uni.navigateTo({
+    url: `/pages/navigation/search/searchPage?promotionsId=${item.couponId}&promotionType=COUPON`,
+  })
+}
+
+function couponDetail(item: any) {
+  uni.navigateTo({
+    url: '/pages/cart/coupon/couponDetail?item=' + encodeURIComponent(JSON.stringify(item)),
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.b-content {
+  background: #f7f8fa;
+  min-height: 100vh;
+}
+
+.coupon-tabs {
+  background: #fff;
+  height: 88rpx;
+  box-shadow: 0 1rpx 8rpx rgba(0, 0, 0, 0.04);
+  position: relative;
+  z-index: 2;
+}
+
+:deep(.u-tabs),
+:deep(.u-tabs__wrapper),
+:deep(.u-tabs__wrapper__scroll-view-wrapper),
+:deep(.u-tabs__wrapper__scroll-view),
+:deep(.u-tabs__wrapper__nav) {
+  background: #fff;
+  height: 88rpx;
+}
+
+:deep(.u-tabs__wrapper__nav__item) {
+  min-height: 88rpx;
+}
+
+:deep(.u-tabs__wrapper__nav__item__text) {
+  color: #333;
+  font-size: 28rpx;
+}
+
+.swiper-box {
+  height: calc(100vh - 88rpx - var(--status-bar-height));
+}
+
+.list-scroll-content {
+  height: 100%;
+  width: 100%;
+  padding: 24rpx;
+  box-sizing: border-box;
+}
+
+.coupon-card {
+  display: flex;
+  align-items: stretch;
+  background: #fff;
+  border-radius: 24rpx;
+  margin-bottom: 24rpx;
+  position: relative;
+  box-shadow: none;
+  border: 1rpx solid #f0f1f5;
+  overflow: hidden;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+
+  &:active {
+    transform: scale(0.98);
+  }
+
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    width: 32rpx;
+    height: 32rpx;
+    background: #f7f8fa;
+    border-radius: 50%;
+    left: 204rpx;
+    z-index: 2;
+    box-shadow: inset 0 0 0 1rpx #eceef2;
+  }
+
+  &::before {
+    top: -16rpx;
+  }
+
+  &::after {
+    bottom: -16rpx;
+  }
+
+  &.coupon-used {
+    .coupon-card-left {
+      background: linear-gradient(135deg, #f5f5f5 0%, #eeeeee 100%);
+      color: #999;
+    }
+    .coupon-status-btn {
+      background: #ccc;
+      box-shadow: none;
+    }
+  }
+
+  &.coupon-expired {
+    .coupon-card-left {
+      background: linear-gradient(135deg, #f5f5f5 0%, #eeeeee 100%);
+      color: #999;
+    }
+    .coupon-status-btn {
+      background: #ccc;
+      box-shadow: none;
+    }
+  }
+}
+
+.coupon-card-left {
+  width: 220rpx;
+  min-height: 180rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: #ff3b30;
+  position: relative;
+  background: linear-gradient(135deg, #fff5f5 0%, #ffecec 100%);
+}
+
+.coupon-price-symbol {
+  font-size: 32rpx;
+  font-weight: 700;
+  margin-right: 4rpx;
+}
+
+.coupon-price-value {
+  font-size: 56rpx;
+  font-weight: 900;
+  line-height: 1;
+  letter-spacing: -1rpx;
+}
+
+.coupon-divider {
+  position: absolute;
+  left: 220rpx;
+  top: 24rpx;
+  bottom: 24rpx;
+  width: 0;
+  border-left: 2rpx dashed #eceef2;
+}
+
+.coupon-card-right {
+  flex: 1;
+  padding: 32rpx 32rpx 32rpx 40rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20rpx;
+  background: #fff;
+}
+
+.coupon-info {
+  display: flex;
+  flex-direction: column;
+  gap: 12rpx;
+  flex: 1;
+  min-width: 0;
+}
+
+.coupon-card-name {
+  font-size: 30rpx;
+  color: #111;
+  font-weight: 700;
+  line-height: 1.3;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.coupon-card-desc {
+  font-size: 24rpx;
+  color: #8a8f99;
+  font-weight: 500;
+}
+
+.coupon-card-time {
+  font-size: 22rpx;
+  color: #b0b3bf;
+}
+
+.coupon-status-btn {
+  flex-shrink: 0;
+  padding: 16rpx 32rpx;
+  border-radius: 40rpx;
+  font-size: 26rpx;
+  font-weight: 700;
+  color: #fff;
+  background: linear-gradient(135deg, #ff6b35, #ff4b2b);
+
+  &:active {
+    opacity: 0.9;
+  }
+
+  &.disabled {
+    background: #ccc;
+    box-shadow: none;
+  }
+}
+</style>
diff --git a/pages/cart/payment/error.vue b/pages/cart/payment/error.vue
index e69de29..d57ed28 100644
--- a/pages/cart/payment/error.vue
+++ b/pages/cart/payment/error.vue
@@ -0,0 +1,87 @@
+<template>
+  <view class="error-page">
+    <u-navbar title="支付失败" :border="false" :fixed="true" :placeholder="true" :auto-back="true"></u-navbar>
+    <view class="error-content">
+      <u-icon name="close-circle-fill" color="#f56c6c" size="120"></u-icon>
+      <text class="error-title">支付失败</text>
+      <text class="error-desc">{{ errorMessage || '支付过程中出现错误，请重试' }}</text>
+      <view class="btn-group">
+        <u-button type="primary" text="返回订单" @click="goBack"></u-button>
+        <u-button type="warning" text="去支付" @click="rePay"></u-button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+
+const errorMessage = ref('')
+const orderSn = ref('')
+
+onLoad((options: any) => {
+  if (options) {
+    errorMessage.value = options.message || ''
+    orderSn.value = options.orderSn || ''
+  }
+})
+
+function goBack() {
+  uni.navigateBack({
+    fail: () => {
+      uni.switchTab({ url: '/pages/tabbar/user/my' })
+    }
+  })
+}
+
+function rePay() {
+  if (orderSn.value) {
+    uni.navigateTo({
+      url: `/pages/cart/payment/payOrder?orderSn=${orderSn.value}`
+    })
+  } else {
+    goBack()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.error-page {
+  min-height: 100vh;
+  background: #fff;
+}
+
+.error-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 200rpx 40rpx;
+}
+
+.error-title {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #333;
+  margin-top: 40rpx;
+}
+
+.error-desc {
+  font-size: 28rpx;
+  color: #999;
+  margin-top: 20rpx;
+  text-align: center;
+}
+
+.btn-group {
+  display: flex;
+  gap: 24rpx;
+  margin-top: 60rpx;
+  width: 100%;
+
+  :deep(.u-button) {
+    flex: 1;
+  }
+}
+</style>
diff --git a/pages/cart/payment/payOrder.vue b/pages/cart/payment/payOrder.vue
index 50093a9..21af8f6 100644
--- a/pages/cart/payment/payOrder.vue
+++ b/pages/cart/payment/payOrder.vue
@@ -66,410 +66,264 @@
     </div>
   </div>
 </template>
-<script>
-	import * as API_Trade from "@/api/trade";
-	import {payCallback} from '@/api/members'
-	export default {
-		data() {
-			return {
-				//路径传参
-				routerVal: "",
-				//收银台参数
-				cashierParams: "",
-				//支付方式集合
-				payList: "",
-				//支付sn
-				sn: "",
-				//订单类型
-				orderType: "",
-				//支付异常
-				exception: {},
-				//支付表单
-				payForm: {},
-				//支付类型 APP/WECHAT_MP/H5/NATIVE app/微信小程序/h5/二维码
-				paymentType: "",
-				// 支付客户端 APP/NATIVE/JSAPI/H5
-				paymentClient: "",
-				//余额
-				walletValue: 0.0,
-				// 支付倒计时（毫秒）
-				autoCancelTime: 0,
-			
-			};
-		},
-		onLoad(val) {
-			this.routerVal = val;
+<script setup lang="ts">
+import { ref, getCurrentInstance, onMounted } from 'vue'
+import { onLoad, onBackPress } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import * as API_Trade from '@/api/trade'
+import { payCallback } from '@/api/members'
+import { unitPrice } from '@/utils/filters.js'
 
-			//初始化参数
-			// #ifdef APP-PLUS
-			this.paymentType = "APP";
-			this.paymentClient = "APP";
-			//#endif
-			// #ifdef MP-WEIXIN
-			this.paymentType = "WECHAT_MP";
-			this.paymentClient = "MP";
-			//#endif
-			// #ifdef H5
-			this.paymentType = "H5";
-			//如果是微信浏览器，则使用公众号支付，否则使用h5，
-			// 区别是：h5是通过浏览器外部调用微信app进行支付，而JSAPI则是 在微信浏览器内部，或者小程序 调用微信支付
-			this.paymentClient = this.isWeiXin() ? "JSAPI" : "H5";
-			//#endif
+const store = useStore()
+const { proxy } = getCurrentInstance()!
 
+const routerVal = ref<Record<string, string>>({})
+const cashierParams = ref<Record<string, any>>({ price: 0 })
+const payList = ref<string[]>([])
+const sn = ref('')
+const orderType = ref('')
+const paymentType = ref('')
+const paymentClient = ref('')
+const walletValue = ref(0)
+const autoCancelTime = ref(0)
 
+onLoad((val) => {
+  routerVal.value = val || {}
+  // #ifdef APP-PLUS
+  paymentType.value = 'APP'
+  paymentClient.value = 'APP'
+  // #endif
+  // #ifdef MP-WEIXIN
+  paymentType.value = 'WECHAT_MP'
+  paymentClient.value = 'MP'
+  // #endif
+  // #ifdef H5
+  paymentType.value = 'H5'
+  paymentClient.value = isWeiXin() ? 'JSAPI' : 'H5'
+  // #endif
+})
 
-			// 
-		},
-		onBackPress(e) {
-			if (e.from == "backbutton") {
-							if(this.routerVal.recharge_sn){
-								uni.switchTab({
-									 url: '/pages/tabbar/user/my'
-								});
-							}
-							else{
-							uni.navigateTo({
-								url: "/pages/order/myOrder?status=0",
-							});
-							}
-							return true; //阻止默认返回行为
-							}
-		},
-		mounted() {
-			this.cashierData();
-		},
-		methods: {
+onBackPress((e) => {
+  if (e.from == 'backbutton') {
+    if (routerVal.value.recharge_sn) {
+      uni.switchTab({ url: '/pages/tabbar/user/my' })
+    } else {
+      uni.navigateTo({ url: '/pages/order/myOrder?status=0' })
+    }
+    return true
+  }
+  return false
+})
 
-			/**
-			 * 支付成功后跳转
-			 */
-			callback(paymentMethod){
-				uni.navigateTo({
-					url: "/pages/cart/payment/success?paymentMethod=" +
-					paymentMethod +
-					"&payPrice=" +
-					this.cashierParams.price+
-					"&orderType="+this.orderType 
-				});
-			},
-			
-			/**
-			 * 获取收银详情
-			 */
-			cashierData() {
-				let parms = {};
+onMounted(() => {
+  cashierData()
+})
 
-				if (this.routerVal.recharge_sn) {
-					// 判断当前是否是充值
-					this.sn = this.routerVal.recharge_sn;
-					this.orderType = "RECHARGE";
-					
-				} else if (this.routerVal.trade_sn) {
-					this.sn = this.routerVal.trade_sn;
-					this.orderType = "TRADE";
-				} else {
-					this.sn = this.routerVal.order_sn;
-					this.orderType = "ORDER";
-				}
-				parms.sn = this.sn;
-				parms.orderType = this.orderType;
-				parms.clientType = this.paymentType;
+function hideLoadingIfNeeded() {
+  if (store.state.isShowToast) uni.hideLoading()
+}
 
-				API_Trade.getCashierData(parms).then((res) => {
-				
-					if(res.data.success){
-					this.cashierParams = res.data.result;
+function callback(paymentMethod: string) {
+  uni.navigateTo({
+    url:
+      '/pages/cart/payment/success?paymentMethod=' +
+      paymentMethod +
+      '&payPrice=' +
+      cashierParams.value.price +
+      '&orderType=' +
+      orderType.value,
+  })
+}
 
-					// #ifdef MP-WEIXIN
-					this.payList = res.data.result.support.filter((item) => {
-						return item != "ALIPAY";
-					});
-					// #endif
+function cashierData() {
+  const parms: Record<string, string> = {}
 
-					
-				  if(this.routerVal.recharge_sn){
-						this.payList = res.data.result.support.filter((item) => {
-						return item != "WALLET";
-					})
-					}
-					 else{
-						this.payList = res.data.result.support;
-					}
-					// #ifdef H5
-					//判断是否微信浏览器
-					var ua = window.navigator.userAgent.toLowerCase();
-					if (ua.match(/MicroMessenger/i) == 'micromessenger') {
-					
-						this.payList = res.data.result.support.filter((item) => {
-							return item != "ALIPAY";
-						});
-						// 充值的话仅保留微信支付
-						if(this.orderType == "RECHARGE"){
-							this.payList = res.data.result.support.filter((item) => {
-								return item == "WECHAT";
-							});
-						}
-						
-					}
-					// #endif
-					
-				
-					
+  if (routerVal.value.recharge_sn) {
+    sn.value = routerVal.value.recharge_sn
+    orderType.value = 'RECHARGE'
+  } else if (routerVal.value.trade_sn) {
+    sn.value = routerVal.value.trade_sn
+    orderType.value = 'TRADE'
+  } else {
+    sn.value = routerVal.value.order_sn
+    orderType.value = 'ORDER'
+  }
+  parms.sn = sn.value
+  parms.orderType = orderType.value
+  parms.clientType = paymentType.value
 
-					this.walletValue = res.data.result.walletValue;
-					const cancelAt = Number(res.data.result.autoCancel);
-					this.autoCancelTime = cancelAt > 0 ? Math.max(cancelAt - Date.now(), 0) : 0;
-					}
-					else if(res.data.code == 32000){
-						setTimeout(()=>{
-							uni.redirectTo({
-							 url: `/pages/order/myOrder?status=0`
-						});
-						},500)
-						
-					}
-				});
-			},
+  API_Trade.getCashierData(parms).then((res) => {
+    if (res.data.success) {
+      cashierParams.value = res.data.result
 
+      // #ifdef MP-WEIXIN
+      payList.value = res.data.result.support.filter((item: string) => item != 'ALIPAY')
+      // #endif
 
-			awaitPay(payment){
-				this.$u.throttle(()=>{
-					this.pay(payment)
-				}, 2000)
-			},
+      if (routerVal.value.recharge_sn) {
+        payList.value = res.data.result.support.filter((item: string) => item != 'WALLET')
+      } else {
+        payList.value = res.data.result.support
+      }
 
-			padTime(val) {
-				return String(val ?? 0).padStart(2, '0');
-			},
+      // #ifdef H5
+      const ua = window.navigator.userAgent.toLowerCase()
+      if (ua.match(/MicroMessenger/i) == 'micromessenger') {
+        payList.value = res.data.result.support.filter((item: string) => item != 'ALIPAY')
+        if (orderType.value == 'RECHARGE') {
+          payList.value = res.data.result.support.filter((item: string) => item == 'WECHAT')
+        }
+      }
+      // #endif
 
-			onPayTimeout() {
-				uni.showToast({
-					title: '支付超时，请重新下单',
-					icon: 'none',
-				});
-				setTimeout(() => {
-					uni.redirectTo({
-						url: '/pages/order/myOrder?status=0',
-					});
-				}, 1500);
-			},
+      walletValue.value = res.data.result.walletValue
+      const cancelAt = Number(res.data.result.autoCancel)
+      autoCancelTime.value = cancelAt > 0 ? Math.max(cancelAt - Date.now(), 0) : 0
+    } else if (res.data.code == 32000) {
+      setTimeout(() => {
+        uni.redirectTo({ url: '/pages/order/myOrder?status=0' })
+      }, 500)
+    }
+  })
+}
 
-			//订单支付
-			async pay(payment) {
-				
-				// 支付编号
-				const sn = this.sn;
-				// 交易类型【交易号|订单号】
-				const orderType = this.orderType;
+function awaitPay(payment: string) {
+  proxy.$u.throttle(() => {
+    pay(payment)
+  }, 2000)
+}
 
-				const clientType = this.paymentType;
-				let params = {
-					sn,
-					orderType,
-					clientType,
-				};
+function padTime(val: number) {
+  return String(val ?? 0).padStart(2, '0')
+}
 
-				//支付方式 WECHAT/ALIPAY
-				const paymentMethod = payment;
-				// 客户端类型 APP/NATIVE/JSAPI/H5
-				const paymentClient = this.paymentClient;
-				
-				uni.showLoading({
-				  title: "正在唤起支付...",
-				  mask:true
-				});
-				
-				// #ifdef APP-PLUS
-				//APP pay
-				// 初始化支付签名
-				await API_Trade.initiatePay(paymentMethod, paymentClient, params).then(
-					(signXml) => {
-						 if (this.$store.state.isShowToast){ uni.hideLoading() };
-						//如果支付异常
-						if (!signXml.data.success) {
-							uni.showToast({
-								title: signXml.data.message,
-								duration: 2000
-							});
-							return;
-						}
-						
-						let payForm = signXml.data.result;
-						
-						let paymentType = paymentMethod === "WECHAT" ? "wxpay" : "alipay";
-						
-						if(paymentMethod === "WALLET"){
-							uni.showToast({
-								icon: "none",
-								title: "支付成功!",
-							});
-							this.callback(paymentMethod)
-						}
-						else{
-							uni.requestPayment({
-								provider: paymentType,
-								orderInfo: payForm || '',
-								success: (e) => {
-									uni.showToast({
-										icon: "none",
-										title: "支付成功!",
-									});
-									this.callback(paymentMethod)
-								},
-								fail: (e) => {
-									console.log(this);
-									this.exception = e;
-									uni.showModal({
-										content: "支付失败,如果您已支付，请勿反复支付",
-										showCancel: false,
-									});
-								},
-							});
-						}
-					}
-				);
-				//APP pay
-				// #endif
+function onPayTimeout() {
+  uni.showToast({ title: '支付超时，请重新下单', icon: 'none' })
+  setTimeout(() => {
+    uni.redirectTo({ url: '/pages/order/myOrder?status=0' })
+  }, 1500)
+}
 
-				//#ifdef H5
-				//H5 pay
-				await API_Trade.initiatePay(paymentMethod, paymentClient, params).then(
-					(res) => {
-						let response = res.data;
-						//如果非支付宝支付才需要进行判定，因为支付宝h5支付是直接输出的，没有返回所谓的消息状态
-						if(paymentMethod !== "ALIPAY"){
-							//如果支付异常
-							if (!response.success) {
-								uni.showToast({
-									title: response.message,
-									duration: 2000,
-									icon:"none"
-								});
-								return;
-							}
-						}
-						if (paymentMethod === "ALIPAY") {
-							document.write(response);
-						} else if (paymentMethod === "WECHAT") {
-							if (this.isWeiXin()) {
-								//微信公众号支付
-								WeixinJSBridge.invoke(
-									"getBrandWCPayRequest",
-									response.result,
-									(res) => {
-										if (res.err_msg == "get_brand_wcpay_request:ok") {
-											// 使用以上方式判断前端返回,微信团队郑重提示：
-											//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
-											uni.showToast({
-												icon: "none",
-												title: "支付成功!",
-											});
-											this.callback(paymentMethod)
-											 
-										} else {
-											uni.showModal({
-												content: "支付失败,如果您已支付，请勿反复支付",
-												showCancel: false,
-											});
-										}
-									}
-								);
-								 if (this.$store.state.isShowToast){ uni.hideLoading() };
-							} else {
-								window.location.href = JSON.parse(response.result).h5_url;
-								const searchParams = {
-									...params,
-									price:this.cashierParams,
-								}
-								const timer = setInterval(()=>{
-									payCallback(searchParams).then(res=>{
-									if(res.data.result){
-										clearTimeout(timer);
-										uni.navigateTo({
-											url:"/pages/order/myOrder"
-										})
-									}
-								})
-								},3000)
-								
-								 if (this.$store.state.isShowToast){ uni.hideLoading() };		
-							}
-						} else if (paymentMethod === "WALLET") {
-							uni.showToast({
-								title: response.message,
-								icon: "none",
-							});
-							if (response.success) {
-								this.callback(paymentMethod)
-							}
-						}
-					}
-				);
-				//H5pay
-				// #endif
+function goPayError(message = '支付失败，如果您已支付，请勿反复支付') {
+  const query = [`orderSn=${encodeURIComponent(sn.value)}`, `message=${encodeURIComponent(message)}`]
+  uni.navigateTo({ url: `/pages/cart/payment/error?${query.join('&')}` })
+}
 
-				//#ifdef MP-WEIXIN
-				//微信小程序
-				await API_Trade.initiatePay(paymentMethod, paymentClient, params).then(
-					(res) => {
-						let response = res.data.result;
-						//如果支付异常
-						if (!res.data.success) {
-							uni.showModal({
-								content: res.data.message,
-								showCancel: false,
-							})
-							return;
-						}
-						if (paymentMethod === "WECHAT") {
-							uni.requestPayment({
-								provider: "wxpay",
-								appid: response.appid,
-								timeStamp: response.timeStamp,
-								nonceStr: response.nonceStr,
-								package: response.package,
-								signType: response.signType,
-								paySign: response.paySign,
-								success: (e) => {
-									console.log(e);
-									uni.showToast({
-										icon: "none",
-										title: "支付成功!",
-									});
-									this.callback(paymentMethod)
-									 
-								},
-								fail: (e) => {
-									console.log(e);
-									this.exception = e;
-									uni.showModal({
-										content: "支付失败,如果您已支付，请勿反复支付",
-										showCancel: false,
-									});
-								},
-							});
-						} else {
-							uni.showToast({
-								icon: "none",
-								title: "支付成功!",
-							});
-							this.callback(paymentMethod)
-							 
-						}
-					}
-				);
-				// #endif
-			},
-			isWeiXin() {
-				var ua = window.navigator.userAgent.toLowerCase();
-				if (ua.match(/MicroMessenger/i) == "micromessenger") {
-					return true;
-				} else {
-					return false;
-				}
-			},
-		},
-	};
+async function pay(payment: string) {
+  const params = {
+    sn: sn.value,
+    orderType: orderType.value,
+    clientType: paymentType.value,
+  }
+  const paymentMethod = payment
+  const client = paymentClient.value
+
+  uni.showLoading({ title: '正在唤起支付...', mask: true })
+
+  // #ifdef APP-PLUS
+  await API_Trade.initiatePay(paymentMethod, client, params).then((signXml) => {
+    hideLoadingIfNeeded()
+    if (!signXml.data.success) {
+      uni.showToast({ title: signXml.data.message, duration: 2000 })
+      return
+    }
+    const payForm = signXml.data.result
+    const provider = paymentMethod === 'WECHAT' ? 'wxpay' : 'alipay'
+    if (paymentMethod === 'WALLET') {
+      uni.showToast({ icon: 'none', title: '支付成功!' })
+      callback(paymentMethod)
+    } else {
+      uni.requestPayment({
+        provider,
+        orderInfo: payForm || '',
+        success: () => {
+          uni.showToast({ icon: 'none', title: '支付成功!' })
+          callback(paymentMethod)
+        },
+        fail: () => {
+          goPayError()
+        },
+      })
+    }
+  })
+  // #endif
+
+  // #ifdef H5
+  await API_Trade.initiatePay(paymentMethod, client, params).then((res) => {
+    const response = res.data
+    if (paymentMethod !== 'ALIPAY' && !response.success) {
+      uni.showToast({ title: response.message, duration: 2000, icon: 'none' })
+      return
+    }
+    if (paymentMethod === 'ALIPAY') {
+      document.write(response)
+    } else if (paymentMethod === 'WECHAT') {
+      if (isWeiXin()) {
+        WeixinJSBridge.invoke('getBrandWCPayRequest', response.result, (payRes: any) => {
+          if (payRes.err_msg == 'get_brand_wcpay_request:ok') {
+            uni.showToast({ icon: 'none', title: '支付成功!' })
+            callback(paymentMethod)
+          } else {
+            goPayError()
+          }
+        })
+        hideLoadingIfNeeded()
+      } else {
+        window.location.href = JSON.parse(response.result).h5_url
+        const searchParams = { ...params, price: cashierParams.value }
+        const timer = setInterval(() => {
+          payCallback(searchParams).then((cbRes) => {
+            if (cbRes.data.result) {
+              clearInterval(timer)
+              uni.navigateTo({ url: '/pages/order/myOrder' })
+            }
+          })
+        }, 3000)
+        hideLoadingIfNeeded()
+      }
+    } else if (paymentMethod === 'WALLET') {
+      uni.showToast({ title: response.message, icon: 'none' })
+      if (response.success) callback(paymentMethod)
+    }
+  })
+  // #endif
+
+  // #ifdef MP-WEIXIN
+  await API_Trade.initiatePay(paymentMethod, client, params).then((res) => {
+    const response = res.data.result
+    if (!res.data.success) {
+      uni.showModal({ content: res.data.message, showCancel: false })
+      return
+    }
+    if (paymentMethod === 'WECHAT') {
+      uni.requestPayment({
+        provider: 'wxpay',
+        appid: response.appid,
+        timeStamp: response.timeStamp,
+        nonceStr: response.nonceStr,
+        package: response.package,
+        signType: response.signType,
+        paySign: response.paySign,
+        success: () => {
+          uni.showToast({ icon: 'none', title: '支付成功!' })
+          callback(paymentMethod)
+        },
+        fail: () => {
+          goPayError()
+        },
+      })
+    } else {
+      uni.showToast({ icon: 'none', title: '支付成功!' })
+      callback(paymentMethod)
+    }
+  })
+  // #endif
+}
+
+function isWeiXin() {
+  const ua = window.navigator.userAgent.toLowerCase()
+  return ua.match(/MicroMessenger/i) == 'micromessenger'
+}
 </script>
 <style scoped lang="scss">
 .method_icon {
diff --git a/pages/cart/payment/shareOrderGoods.vue b/pages/cart/payment/shareOrderGoods.vue
index e8d300a..e81702b 100644
--- a/pages/cart/payment/shareOrderGoods.vue
+++ b/pages/cart/payment/shareOrderGoods.vue
@@ -49,7 +49,13 @@
 
     <!-- 倒计时 -->
     <div class="count-down" v-if="!isOver && master.toBeGroupedNum">
-      <u-count-down bg-color="#ededed" :hide-zero-day="true" @end="isOver" :timestamp="timeStamp"></u-count-down>
+      <u-count-down
+        v-if="timeStamp > 0"
+        bgColor="#ededed"
+        :time="timeStamp * 1000"
+        format="HH:mm:ss"
+        @finish="onCountDownEnd"
+      ></u-count-down>
     </div>
 
     <div class="user-list" v-if="data.pintuanMemberVOS">
@@ -59,173 +65,184 @@
       </div>
     </div>
 
-    <popupGoods :addr="addr" ref="popupGoods" :buyMask="maskFlag" @closeBuy="closePopupBuy" :goodsDetail="goodsDetail" :goodsSpec="goodsSpec" v-if="goodsDetail.id " @handleClickSku="getGoodsDetail" />
-    <shares @close="closeShare" :link="'/pages/cart/payment/shareOrderGoods?sn='+this.routers.sn+'&sku='+this.routers.sku+'&goodsId='+this.routers.goodsId" type="pintuan"
-      :thumbnail="data.promotionGoods.thumbnail" :goodsName="data.promotionGoods.goodsName" v-if="shareFlag " />
+    <popupGoods
+      :addr="addr"
+      ref="popupGoodsRef"
+      :buyMask="maskFlag"
+      @closeBuy="closePopupBuy"
+      :goodsDetail="goodsDetail"
+      :goodsSpec="goodsSpec"
+      v-if="goodsDetail.id"
+      @handleClickSku="getGoodsDetail"
+    />
+    <shares
+      @close="closeShare"
+      :link="shareLink"
+      type="pintuan"
+      :thumbnail="data.promotionGoods.thumbnail"
+      :goodsName="data.promotionGoods.goodsName"
+      v-if="shareFlag"
+    />
   </view>
 </template>
 
-<script>
-import { getGoods } from "@/api/goods.js";
-import { getPinTuanShare } from "@/api/order";
-import shares from "@/components/m-share/index";
-import storage from "@/utils/storage.js";
-import popupGoods from "@/components/m-buy/goods"; //购物车商品的模块
+<script setup lang="ts">
+import { ref, computed, watch, onMounted } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import { getGoods } from '@/api/goods.js'
+import { getPinTuanShare } from '@/api/order'
+import shares from '@/components/m-share/index'
+import storage from '@/utils/storage.js'
+import popupGoods from '@/components/m-buy/goods'
+import { unitPrice } from '@/utils/filters.js'
 
-export default {
-  data() {
-    return {
-      flag: false, //判断接口是否正常请求
-      addr: {
-        id: "",
-      },
-      maskFlag: false, //商品弹框
-      timeStamp: 0,
-      shareFlag: false,
-      data: "",
-      isMaster: true,
-      selectedGoods: "", //选择的商品规格昵称
-      routers: "", //传参数据
-      goodsDetail: "", //商品详情
-      goodsSpec: "",
-      master: "", // 团长
-      PromotionList: "", //优惠集合
-      isGroup: false, //是否拼团
-      isOver: false, //是否结束活动
-      isBuy: false, //当前用户是是否购买
-    };
-  },
-  components: {
-    shares,
-    popupGoods,
-  },
-  watch: {
-    isGroup(val) {
-      if (val) {
-        let timer = setInterval(() => {
-          this.$refs.popupGoods.buyType = "PINTUAN";
-          clearInterval(timer);
-        }, 100);
-      } else {
-        this.$refs.popupGoods.buyType = "";
+const store = useStore()
+
+const popupGoodsRef = ref<any>(null)
+const flag = ref(false)
+const addr = ref({ id: '' })
+const maskFlag = ref(false)
+const timeStamp = ref(0)
+const shareFlag = ref(false)
+const data = ref<any>(null)
+const isMaster = ref(true)
+const selectedGoods = ref<any>(null)
+const routers = ref<Record<string, string>>({})
+const goodsDetail = ref<any>({})
+const goodsSpec = ref<any>(null)
+const master = ref<any>(null)
+const PromotionList = ref<any>(null)
+const isGroup = ref(false)
+const isOver = ref(false)
+const isBuy = ref(false)
+
+const shareLink = computed(() => {
+  const { sn, sku, goodsId } = routers.value
+  return `/pages/cart/payment/shareOrderGoods?sn=${sn}&sku=${sku}&goodsId=${goodsId}`
+})
+
+watch(isGroup, (val) => {
+  if (val) {
+    const timer = setInterval(() => {
+      if (popupGoodsRef.value) {
+        popupGoodsRef.value.buyType = 'PINTUAN'
       }
-    },
-  },
-  onLoad(options) {
-    this.routers = options;
-  },
-  mounted() {
-    this.init(this.routers.sn, this.routers.sku);
-  },
-  methods: {
-    closeShare() {
-      this.shareFlag = false;
-    },
-    // 这里的话得先跳到商品详情才能购买商品
-    toBuy() {
-      this.maskFlag = true;
-      this.$refs.popupGoods.parentOrder = {
-        ...this.master,
-        orderSn: this.routers.sn,
-      };
-      this.$refs.popupGoods.isMask = true;
-      this.$refs.popupGoods.isClose = true;
-      this.$refs.popupGoods.buyType = "PINTUAN";
-    },
-    // 分享
-    share() {
-      this.shareFlag = true;
-    },
-    closePopupBuy(val) {
-      this.maskFlag = false;
-    },
-    // 实例化本页面
-    async init(sn, sku) {
-      let res = await getPinTuanShare(sn, sku);
-      if (res.data.success && res.data.result.promotionGoods) {
-        this.flag = true;
-        this.data = res.data.result;
-        this.selectedGoods = res.data.result.promotionGoods;
-        let endTime = Date.parse(
-          res.data.result.promotionGoods.endTime.replace(/-/g, "/")
-        );
-        // 获取当前剩余的拼团商品时间
-        let timeStamp = Date.parse(new Date(endTime)) / 1000;
+      clearInterval(timer)
+    }, 100)
+  } else if (popupGoodsRef.value) {
+    popupGoodsRef.value.buyType = ''
+  }
+})
 
-        // 获取当前时间时间戳
-        let dateTime = Date.parse(new Date()) / 1000;
+onLoad((options) => {
+  routers.value = options || {}
+})
 
-        this.timeStamp = parseInt(timeStamp - dateTime);
+onMounted(() => {
+  init(routers.value.sn, routers.value.sku)
+})
 
-        this.timeStamp <= 0 ? (this.isOver = true) : (this.isOver = false);
+function hideLoadingIfNeeded() {
+  if (store.state.isShowToast) uni.hideLoading()
+}
 
-        // 获取剩余拼团人数
-        this.master =
-          res.data.result.pintuanMemberVOS.length != 0 &&
-          res.data.result.pintuanMemberVOS.filter((item) => {
-            return item.orderSn == "";
-          })[0];
+function closeShare() {
+  shareFlag.value = false
+}
 
-        // 获取当前是否是拼团本人
-        if (
-          storage.getUserInfo(this.routers.sku, this.routers.goodsId).id ==
-          this.master.memberId
-        ) {
-          this.isMaster = true;
-        } else {
-          this.isMaster = false;
-          // 获取商品详情
-          this.getGoodsDetail({
-            id: this.routers.sku,
-            goodsId: this.routers.goodsId,
-          });
+function onCountDownEnd() {
+  isOver.value = true
+}
+
+function toBuy() {
+  maskFlag.value = true
+  if (!popupGoodsRef.value) return
+  popupGoodsRef.value.parentOrder = {
+    ...master.value,
+    orderSn: routers.value.sn,
+  }
+  popupGoodsRef.value.isMask = true
+  popupGoodsRef.value.isClose = true
+  popupGoodsRef.value.buyType = 'PINTUAN'
+}
+
+function share() {
+  shareFlag.value = true
+}
+
+function closePopupBuy() {
+  maskFlag.value = false
+}
+
+async function init(sn: string, sku: string) {
+  const res = await getPinTuanShare(sn, sku)
+  if (res.data.success && res.data.result.promotionGoods) {
+    flag.value = true
+    data.value = res.data.result
+    selectedGoods.value = res.data.result.promotionGoods
+    const endTime = Date.parse(
+      res.data.result.promotionGoods.endTime.replace(/-/g, '/')
+    )
+    const endTimestamp = Date.parse(new Date(endTime) as any) / 1000
+    const dateTime = Date.parse(new Date() as any) / 1000
+    timeStamp.value = parseInt(String(endTimestamp - dateTime))
+    isOver.value = timeStamp.value <= 0
+
+    master.value =
+      res.data.result.pintuanMemberVOS.length != 0 &&
+      res.data.result.pintuanMemberVOS.filter((item: any) => item.orderSn == '')[0]
+
+    if (
+      storage.getUserInfo(routers.value.sku, routers.value.goodsId).id ==
+      master.value.memberId
+    ) {
+      isMaster.value = true
+    } else {
+      isMaster.value = false
+      getGoodsDetail({
+        id: routers.value.sku,
+        goodsId: routers.value.goodsId,
+      })
+    }
+
+    if (storage.getUserInfo().id) {
+      const bought = res.data.result.pintuanMemberVOS.filter(
+        (item: any) => item.memberId == storage.getUserInfo().id
+      )
+      isBuy.value = bought.length != 0
+    }
+  } else {
+    uni.showToast({
+      title: '当前拼团单有误！请联系管理员重试',
+      duration: 2000,
+      icon: 'none',
+    })
+  }
+}
+
+function getGoodsDetail(val: { id: string; goodsId: string }) {
+  const { id, goodsId } = val
+  uni.showLoading({ title: '加载中', mask: true })
+  getGoods(id, goodsId).then((response) => {
+    goodsDetail.value = response.data.result.data
+    selectedGoods.value = response.data.result.data
+    goodsSpec.value = response.data.result.specs
+    hideLoadingIfNeeded()
+    PromotionList.value = response.data.result.promotionMap
+    if (PromotionList.value) {
+      Object.keys(PromotionList.value).forEach((item) => {
+        if (item.indexOf('PINTUAN') == 0) {
+          isGroup.value = true
         }
+      })
+    }
+  })
+}
 
-        // 获取当前商品是否已经购买
-        if (storage.getUserInfo().id) {
-          let isBuy = res.data.result.pintuanMemberVOS.filter((item) => {
-            return item.memberId == storage.getUserInfo().id;
-          });
-          isBuy.length != 0 ? (this.isBuy = true) : (this.isBuy = false);
-        }
-      } else {
-        uni.showToast({
-          title: "当前拼团单有误！请联系管理员重试",
-          duration: 2000,
-          icon: "none",
-        });
-      }
-    },
-    // 获取商品详情
-    getGoodsDetail(val) {
-      let { id, goodsId } = val;
-      uni.showLoading({
-        title: "加载中",
-        mask: true,
-      });
-      getGoods(id, goodsId).then((response) => {
-        this.goodsDetail = response.data.result.data;
-        this.selectedGoods = response.data.result.data;
-        this.goodsSpec = response.data.result.specs;
-         if (this.$store.state.isShowToast){ uni.hideLoading() };
-        this.PromotionList = response.data.result.promotionMap;
-
-        // 判断是否拼团活动 如果有则显示拼团活动信息
-        this.PromotionList &&
-          Object.keys(this.PromotionList).forEach((item) => {
-            if (item.indexOf("PINTUAN") == 0) {
-              this.isGroup = true;
-            }
-          });
-      });
-    },
-    handleClickHome() {
-      uni.switchTab({
-        url: "/pages/tabbar/home/index",
-      });
-    },
-  },
-};
+function handleClickHome() {
+  uni.switchTab({ url: '/pages/tabbar/home/index' })
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/cart/payment/success.vue b/pages/cart/payment/success.vue
index b63bb71..21ff222 100644
--- a/pages/cart/payment/success.vue
+++ b/pages/cart/payment/success.vue
@@ -5,7 +5,7 @@
         ￥{{unitPrice(Number(payPrice)) }}
       </div>
       <div class="pay-btns">
-        <div v-show="!from" @click="checkOrder">查看{{ this.orderType == "RECHARGE" ? '余额' : '订单' }}</div>
+        <div v-show="!from" @click="checkOrder">查看{{ orderType == "RECHARGE" ? '余额' : '订单' }}</div>
         <div @click="navigateTo('/pages/tabbar/home/index', 'switch')">回到首页</div>
       </div>
     </div>
@@ -24,73 +24,55 @@
   </div>
 
 </template>
-<script>
-import goodsRecommend from "@/components/m-goods-recommend";
-export default {
-  data() {
-    return {
-      checked: false,
-      paymentMethod: "",
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import goodsRecommend from '@/components/m-goods-recommend'
+import { unitPrice } from '@/utils/filters.js'
 
-      from: "",
-      payPrice: 0,
-      goodsList: [],
-      activeColor: this.$mainColor,
-    };
-  },
-  components: {
-    goodsRecommend,
-  },
-  onLoad(options) {
-    this.paymentMethod = options.paymentMethod || "";
-    this.from = options.from || "";
-    this.payPrice = options.payPrice || 0;
-    this.orderType = options.orderType;
+const paymentMethod = ref('')
+const from = ref('')
+const payPrice = ref<number | string>(0)
+const orderType = ref('')
 
-  },
-  methods: {
-    paymentTypeFilter(val) {
-      switch (val) {
-        case "WECHAT":
-          return "微信";
-        case "ALIPAY":
-          return "支付宝";
-        case "WALLET":
-          return "余额支付";
-        default:
-          return "";
-      }
-    },
-    checkOrder() {
-      /**
-       * 查看订单
-       * 1.充值跳转到明细里面
-       * 2.支付跳转到订单详情
-       */
-      if (this.orderType == "RECHARGE") {
-        uni.reLaunch({
-          url: `/pages/mine/deposit/operation`,
-        });
-      } else {
-        this.navigateTo("/pages/order/myOrder?status=0");
-      }
-    },
+onLoad((options) => {
+  paymentMethod.value = options.paymentMethod || ''
+  from.value = options.from || ''
+  payPrice.value = options.payPrice || 0
+  orderType.value = options.orderType || ''
+})
 
-    navigateTo(url, type) {
-      if (type === "switch") {
-        uni.switchTab({
-          url,
-        });
-      } else {
-        uni.redirectTo({
-          url,
-        });
-      }
-    },
-  },
-};
-</script>
-<style scoped lang="scss">
+function paymentTypeFilter(val: string) {
+  switch (val) {
+    case 'WECHAT':
+      return '微信'
+    case 'ALIPAY':
+      return '支付宝'
+    case 'WALLET':
+      return '余额支付'
+    default:
+      return ''
+  }
+}
+
+function checkOrder() {
+  if (orderType.value == 'RECHARGE') {
+    uni.reLaunch({
+      url: '/pages/mine/deposit/operation',
+    })
+  } else {
+    navigateTo('/pages/order/myOrder?status=0')
+  }
+}
+
+function navigateTo(url: string, type?: string) {
+  if (type === 'switch') {
+    uni.switchTab({ url })
+  } else {
+    uni.redirectTo({ url })
+  }
+}
+</script><style scoped lang="scss">
 .subscribe {
   justify-content: space-between;
   align-items: center;
diff --git a/pages/floor/empty.vue b/pages/floor/empty.vue
index 5eb2617..47f526d 100644
--- a/pages/floor/empty.vue
+++ b/pages/floor/empty.vue
@@ -2,21 +2,16 @@
 	<default-page v-if="type" :type="type" title="您的设备已断网" :isBtn="false" />
 </template>
 
-<script>
-	import defaultPage from '@/components/default-page/default-page.vue';
-	export default {
-		components: {
-			defaultPage
-		},
-		data() {
-			return {
-				type: undefined
-			}
-		},
-		onLoad(options) {
-			
-		}
-	}
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import defaultPage from '@/components/default-page/default-page.vue'
+
+const type = ref<string>()
+
+onLoad(() => {
+	type.value = 'msg'
+})
 </script>
 
 <style>
diff --git a/pages/mine/address/add.vue b/pages/mine/address/add.vue
index 204f187..ba9f50e 100644
--- a/pages/mine/address/add.vue
+++ b/pages/mine/address/add.vue
@@ -1,7 +1,14 @@
 <template>
   <view class="add-address">
-    <u-form :model="form" ref="uForm" error-type="toast" :rules="rules">
-      <u-form-item label="收货人" label-width="130" prop="name" :border-bottom="true">
+    <up-form
+      :model="form"
+      ref="uForm"
+      error-type="toast"
+      :rules="rules"
+      label-position="left"
+      label-width="180rpx"
+    >
+      <up-form-item label="收货人" label-width="180rpx" prop="name" :border-bottom="true">
         <u-input
           v-model="form.name"
           border="none"
@@ -9,9 +16,9 @@
           clearable
           placeholder="请输入收货人姓名"
         />
-      </u-form-item>
+      </up-form-item>
 
-      <u-form-item label="手机号码" label-width="130" prop="mobile" :border-bottom="true">
+      <up-form-item label="手机号码" label-width="180rpx" prop="mobile" :border-bottom="true">
         <u-input
           v-model="form.mobile"
           type="number"
@@ -20,18 +27,18 @@
           input-align="right"
           placeholder="请输入收货人手机号码"
         />
-      </u-form-item>
+      </up-form-item>
 
-      <u-form-item label="所在区域" label-width="130" prop="___path" :border-bottom="true">
+      <up-form-item label="所在区域" label-width="180rpx" prop="___path" :border-bottom="true">
         <view class="form-value" @click="showPicker">
           {{ form.___path || '请选择所在地区' }}
         </view>
         <template #right>
           <u-icon name="arrow-right" color="#ccc" size="16"></u-icon>
         </template>
-      </u-form-item>
+      </up-form-item>
 
-      <u-form-item class="detailAddress" label="详细地址" label-width="130" prop="detail" :border-bottom="true">
+      <up-form-item class="detailAddress" label="详细地址" label-width="180rpx" prop="detail" :border-bottom="true">
         <u-input
           type="textarea"
           v-model="form.detail"
@@ -40,16 +47,16 @@
           border="none"
           placeholder="街道楼牌号等"
         />
-      </u-form-item>
+      </up-form-item>
 
-      <u-form-item label="地址别名" label-width="130" :border-bottom="false">
+      <up-form-item label="地址别名" label-width="180rpx" :border-bottom="false">
         <u-input
           v-model="form.alias"
           border="none"
           input-align="right"
           placeholder="请输入地址别名"
         />
-      </u-form-item>
+      </up-form-item>
 
       <view class="default-row">
         <u-checkbox
@@ -63,7 +70,7 @@
       </view>
 
       <view class="saveBtn" @click="save">保存</view>
-    </u-form>
+    </up-form>
 
     <m-city
       :provinceData="list"
@@ -76,266 +83,208 @@
     <uniMap v-if="mapFlag" @close="closeMap" @callback="callBackAddress" />
   </view>
 </template>
-<script>
-import { addAddress, editAddress, getAddressDetail } from "@/api/address.js";
-import city from "@/components/m-city/m-city.vue";
-import uniMap from "@/components/uniMap";
-import permision from "@/js_sdk/wa-permission/permission.js";
-export default {
-  components: {
-    "m-city": city,
-    uniMap,
+<script setup lang="ts">
+import { ref, reactive, computed, getCurrentInstance } from 'vue'
+import { onLoad, onShow, onReady } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import { addAddress as addAddressApi, editAddress, getAddressDetail } from '@/api/address.js'
+import MCity from '@/components/m-city/m-city.vue'
+import uniMap from '@/components/uniMap'
+import permision from '@/js_sdk/wa-permission/permission.js'
+
+const store = useStore()
+const { proxy } = getCurrentInstance()!
+
+const lightColor = computed(() => store.getters.lightColor)
+const mapFlag = ref(false)
+const routerVal = ref<Record<string, string>>({})
+const uForm = ref<any>(null)
+const cityPicker = ref<any>(null)
+
+const form = reactive<Record<string, any>>({
+  detail: '',
+  name: '',
+  mobile: '',
+  consigneeAddressIdPath: [],
+  consigneeAddressPath: [],
+  ___path: '',
+  isDefault: false,
+})
+
+const list = ref([
+  {
+    id: '',
+    localName: '请选择',
+    children: [],
   },
-  onShow() {
-    // 判断当前系统权限定位是否开启
-  },
-  methods: {
-    // 关闭地图
-    closeMap() {
-      this.mapFlag = false;
+])
+
+const rules = {
+  name: [
+    {
+      required: true,
+      message: '收货人姓名不能为空',
+      trigger: ['blur', 'change'],
     },
-    // 打开地图并访问权限
-    clickUniMap() {
-      // #ifdef APP-PLUS
-      if (plus.os.name == "iOS") {
-        // ios系统
-        permision.judgeIosPermission("location")
-          ? (this.mapFlag = true)
-          : this.refuseMap();
-      } else {
-        // 安卓
-        this.requestAndroidPermission(
-          "android.permission.ACCESS_FINE_LOCATION"
-        );
-      }
-      // #endif
-
-      // #ifndef APP-PLUS
-      this.mapFlag = true;
-      // #endif
+  ],
+  mobile: [
+    {
+      required: true,
+      message: '手机号码不能为空',
+      trigger: ['blur', 'change'],
     },
-
-    // 如果拒绝权限 提示区设置
-    refuseMap() {
-      uni.showModal({
-        title: "温馨提示",
-        content: "您已拒绝定位,请开启",
-        confirmText: "去设置",
-        success(res) {
-          if (res.confirm) {
-            //打开授权设置
-            // #ifndef MP-WEIXIN
-            uni.getSystemInfo({
-              success(res) {
-                if (res.platform == "ios") {
-                  //IOS
-                  plus.runtime.openURL("app-settings://");
-                } else if (res.platform == "android") {
-                  //安卓
-                  let main = plus.android.runtimeMainActivity();
-                  let Intent = plus.android.importClass(
-                    "android.content.Intent"
-                  );
-                  let mIntent = new Intent("android.settings.ACTION_SETTINGS");
-                  main.startActivity(mIntent);
-                }
-              },
-            });
-            // #endif
-          }
-        },
-      });
+    {
+      validator: (_rule: unknown, value: string) => proxy.$u.test.mobile(value),
+      message: '手机号码不正确',
+      trigger: ['change', 'blur'],
     },
-
-    // 获取安卓是否拥有地址权限
-    async requestAndroidPermission(permisionID) {
-      var result = await permision.requestAndroidPermission(permisionID);
-
-      if (result == 1) {
-        this.mapFlag = true;
-      } else {
-        this.refuseMap();
-      }
+  ],
+  ___path: [
+    {
+      required: true,
+      message: '请选择所在区域',
+      trigger: ['change'],
     },
-
-    // 选择地址后数据的回调
-    callBackAddress(val) {
-      console.log(val)
-      uni.showLoading({
-        title: "加载中",
-      });
-
-      if (val.regeocode && val) {
-        let address = val.regeocode;
-        this.form.detail = address.formatted_address; //地址详情
-        this.form.___path = val.data.result.name;
-        this.form.consigneeAddressIdPath = val.data.result.id; // 地址id分割
-        this.form.consigneeAddressPath = val.data.result.name; //地址名称， '，'分割
-        this.form.lat = val.latitude; //纬度
-        this.form.lon = val.longitude; //经度
-         uni.hideLoading();
-      }
-
-      this.mapFlag = !this.mapFlag; //关闭地图
+  ],
+  detail: [
+    {
+      required: true,
+      message: '请填写详细地址',
+      trigger: ['blur', 'change'],
     },
+  ],
+}
 
-    // 保存当前 地址
-    save() {
-      this.$refs.uForm.validate().then(() => {
-        const params = { ...this.form };
-        delete params.___path;
+onShow(() => {})
 
-        if (Array.isArray(params.consigneeAddressIdPath)) {
-          params.consigneeAddressIdPath = params.consigneeAddressIdPath.join(",");
-        }
-        if (Array.isArray(params.consigneeAddressPath)) {
-          params.consigneeAddressPath = params.consigneeAddressPath.join(",");
-        }
+onLoad((option) => {
+  uni.showLoading({ title: '加载中' })
+  routerVal.value = option || {}
+  if (option.id) {
+    getAddressDetail(option.id).then((res) => {
+      const params = res.data.result
+      params.___path = params.consigneeAddressPath
+      Object.assign(form, params)
+      if (store.state.isShowToast) uni.hideLoading()
+    })
+  }
+  uni.hideLoading()
+})
 
-        if (!params.id) {
-          addAddress(params).then((res) => {
-            if (res.data.success) {
-              uni.navigateBack();
-            } else {
-              uni.showToast({
-                title: res.data.message || "保存失败",
-                icon: "none",
-              });
+onReady(() => {
+  uForm.value?.setRules(rules)
+})
+
+function closeMap() {
+  mapFlag.value = false
+}
+
+function refuseMap() {
+  uni.showModal({
+    title: '温馨提示',
+    content: '您已拒绝定位,请开启',
+    confirmText: '去设置',
+    success(res) {
+      if (res.confirm) {
+        // #ifndef MP-WEIXIN
+        uni.getSystemInfo({
+          success(sysRes) {
+            if (sysRes.platform == 'ios') {
+              plus.runtime.openURL('app-settings://')
+            } else if (sysRes.platform == 'android') {
+              const main = plus.android.runtimeMainActivity()
+              const Intent = plus.android.importClass('android.content.Intent')
+              const mIntent = new Intent('android.settings.ACTION_SETTINGS')
+              main.startActivity(mIntent)
             }
-          });
-        } else {
-          delete params.updateBy;
-          delete params.updateTime;
-          editAddress(params).then((res) => {
-            if (res.data.success) {
-              uni.navigateBack();
-            } else {
-              uni.showToast({
-                title: res.data.message || "保存失败",
-                icon: "none",
-              });
-            }
-          });
-        }
-      }).catch(() => {});
+          },
+        })
+        // #endif
+      }
     },
+  })
+}
 
-    // 三级地址联动回调
-    getpickerParentValue(e) {
-      // 将需要绑定的地址设置为空，并赋值
-      this.form.consigneeAddressIdPath = [];
-      this.form.consigneeAddressPath = [];
-      let name = "";
+async function requestAndroidPermission(permisionID: string) {
+  const result = await permision.requestAndroidPermission(permisionID)
+  if (result == 1) {
+    mapFlag.value = true
+  } else {
+    refuseMap()
+  }
+}
 
-      e.forEach((item, index) => {
-        if (item.id) {
-          // 遍历数据
-          this.form.consigneeAddressIdPath.push(item.id);
-          this.form.consigneeAddressPath.push(item.localName);
-          name += item.localName;
-          this.form.___path = name;
-        }
-        if (index == e.length - 1) {
-          //如果是最后一个
-          let _town = item.children.filter((_child) => {
-            return _child.id == item.id;
-          });
+function callBackAddress(val: any) {
+  uni.showLoading({ title: '加载中' })
+  if (val.regeocode && val) {
+    const address = val.regeocode
+    form.detail = address.formatted_address
+    form.___path = val.data.result.name
+    form.consigneeAddressIdPath = val.data.result.id
+    form.consigneeAddressPath = val.data.result.name
+    form.lat = val.latitude
+    form.lon = val.longitude
+    uni.hideLoading()
+  }
+  mapFlag.value = !mapFlag.value
+}
 
-          this.form.lat = _town[0].center.split(",")[1];
-          this.form.lon = _town[0].center.split(",")[0];
-        }
-      });
-    },
+function save() {
+  uForm.value?.validate().then(() => {
+    const params = { ...form }
+    delete params.___path
 
-    // 显示三级地址联动
-    showPicker() {
-      this.$refs.cityPicker.show();
-    },
-  },
-  mounted() {},
-  data() {
-    return {
-      lightColor: this.$lightColor, //高亮颜色
-      mapFlag: false, // 地图选择开
-      routerVal: "",
-      form: {
-        detail: "", //地址详情
-        name: "", //收货人姓名
-        mobile: "", //手机号码
-        consigneeAddressIdPath: [], //地址id
-        consigneeAddressPath: [], //地址名字
-        ___path: "", //所在区域
-        isDefault: false, //是否默认地址
-      },
-      // 表单提交校验规则
-      rules: {
-        name: [
-          {
-            required: true,
-            message: "收货人姓名不能为空",
-            trigger: ["blur", "change"],
-          },
-        ],
-        mobile: [
-          {
-            required: true,
-            message: "手机号码不能为空",
-            trigger: ["blur", "change"],
-          },
-          {
-            validator: (rule, value, callback) => {
-              return this.$u.test.mobile(value);
-            },
-            message: "手机号码不正确",
-            trigger: ["change", "blur"],
-          },
-        ],
-        ___path: [
-          {
-            required: true,
-            message: "请选择所在区域",
-            trigger: ["change"],
-          },
-        ],
-        detail: [
-          {
-            required: true,
-            message: "请填写详细地址",
-            trigger: ["blur", "change"],
-          },
-        ],
-      },
-      list: [
-        {
-          id: "",
-          localName: "请选择",
-          children: [],
-        },
-      ],
-    };
-  },
-  onLoad(option) {
-    uni.showLoading({
-      title: "加载中",
-    });
-    this.routerVal = option;
-    // 如果当前是编辑地址,则需要查询出地址详情信息
-    if (option.id) {
-      getAddressDetail(option.id).then((res) => {
-        const params = res.data.result;
-        params.___path = params.consigneeAddressPath;
-        this["form"] = params;
-
-         if (this.$store.state.isShowToast){ uni.hideLoading() };
-      });
+    if (Array.isArray(params.consigneeAddressIdPath)) {
+      params.consigneeAddressIdPath = params.consigneeAddressIdPath.join(',')
     }
-     uni.hideLoading();
-  },
-  // 初始化rules必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
-  onReady() {
-    this.$refs.uForm.setRules(this.rules);
-  },
-};
+    if (Array.isArray(params.consigneeAddressPath)) {
+      params.consigneeAddressPath = params.consigneeAddressPath.join(',')
+    }
+
+    if (!params.id) {
+      addAddressApi(params).then((res) => {
+        if (res.data.success) {
+          uni.navigateBack()
+        } else {
+          uni.showToast({ title: res.data.message || '保存失败', icon: 'none' })
+        }
+      })
+    } else {
+      delete params.updateBy
+      delete params.updateTime
+      editAddress(params).then((res) => {
+        if (res.data.success) {
+          uni.navigateBack()
+        } else {
+          uni.showToast({ title: res.data.message || '保存失败', icon: 'none' })
+        }
+      })
+    }
+  }).catch(() => {})
+}
+
+function getpickerParentValue(e: any[]) {
+  form.consigneeAddressIdPath = []
+  form.consigneeAddressPath = []
+  let name = ''
+  e.forEach((item, index) => {
+    if (item.id) {
+      form.consigneeAddressIdPath.push(item.id)
+      form.consigneeAddressPath.push(item.localName)
+      name += item.localName
+      form.___path = name
+    }
+    if (index == e.length - 1) {
+      const _town = item.children.filter((_child: any) => _child.id == item.id)
+      form.lat = _town[0].center.split(',')[1]
+      form.lon = _town[0].center.split(',')[0]
+    }
+  })
+}
+
+function showPicker() {
+  cityPicker.value?.show()
+}
 </script>
 <style scoped lang="scss">
 page {
diff --git a/pages/mine/address/address.vue b/pages/mine/address/address.vue
index 9d0e6b8..4f59d18 100644
--- a/pages/mine/address/address.vue
+++ b/pages/mine/address/address.vue
@@ -42,126 +42,95 @@
   </view>
 </template>
 
-<script>
-import * as API_Trade from "@/api/trade";
-import * as API_Address from "@/api/address.js";
-export default {
-  data() {
-    return {
-      addressList: [], //地址列表
-      showAction: false, //是否显示下栏框
-      removeList: [
-        {
-          text: "确定",
-        },
-      ],
-      tips: {
-        text: "确定要删除该收货人信息吗？",
-      },
-      removeId: "", //删除的地址id
-      routerVal: "",
-      params: {
-        pageNumber: 1,
-        pageSize: 1000,
-      },
-    };
-  },
-  onPullDownRefresh() {
-    //下拉刷新
-    this.addressList = [];
-    this.getAddressList();
-  },
-  onLoad: function (val) {
-    this.routerVal = val;
-  },
-  onShow() {
-    this.addressList = [];
-    this.getAddressList();
-  },
-  onHide() {},
-  methods: {
-    async selectAddressData(val) {
-      await API_Trade.setAddressId(val.id, this.routerVal.way);
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onLoad, onShow, onPullDownRefresh } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import * as API_Trade from '@/api/trade'
+import * as API_Address from '@/api/address.js'
 
-      uni.navigateBack({
-        delta: 1,
-      });
-    },
-    //获取地址列表
-    getAddressList() {
-      uni.showLoading();
+const store = useStore()
 
-      API_Address.getAddressList(
-        this.params.pageNumber,
-        this.params.pageSize
-      ).then((res) => {
-        res.data.result.records.forEach((item) => {
-          item.consigneeAddressPath = item.consigneeAddressPath.split(",");
-        });
-        this.addressList = res.data.result.records;
-        console.log(this.addressList);
+const addressList = ref<any[]>([])
+const showAction = ref(false)
+const removeList = [{ text: '确定' }]
+const tips = { text: '确定要删除该收货人信息吗？' }
+const removeId = ref('')
+const routerVal = ref<Record<string, string>>({})
+const params = { pageNumber: 1, pageSize: 1000 }
 
-         if (this.$store.state.isShowToast){ uni.hideLoading() };
-      });
-    },
-    //删除地址
-    removeAddress(id) {
-      this.removeId = id;
-      this.showAction = true;
-    },
-    deleteAddressMessage() {
-      API_Address.deleteAddress(this.removeId).then((res) => {
-        if (res.statusCode == 200) {
-          uni.showToast({
-            icon: "none",
-            title: "删除成功",
-          });
-          this.getAddressList();
-        } else {
-          uni.showToast({
-            icon: "none",
-            title: res.data.message,
-            duration: 2000,
-          });
-        }
-      });
-    },
-    //新建。编辑地址
-    addAddress(id) {
-      if (id) {
-        uni.navigateTo({
-          url:
-            "/pages/mine/address/add?id=" +
-            id +
-            "&way=" +
-            this.routerVal.way +
-            "&type=order",
-        });
-      } else {
-        uni.navigateTo({
-          url:
-            "/pages/mine/address/add?way=" + this.routerVal.way + "&type=order",
-        });
-      }
-    },
-    //设为默认地址
-    setDefault(item) {
-      delete item.updateBy;
-      delete item.updateTime;
-      delete item.deleteFlag;
+onPullDownRefresh(() => {
+  addressList.value = []
+  getAddressList()
+})
 
-      item.isDefault ? "" : (item.isDefault = !item.isDefault);
+onLoad((val) => {
+  routerVal.value = val || {}
+})
 
-      API_Address.editAddress(item).then((res) => {
-        uni.showToast({
-          title: "设置默认地址成功",
-          icon: "none",
-        });
-        this.getAddressList();
-      });
-    },
-  },
-};
+onShow(() => {
+  addressList.value = []
+  getAddressList()
+})
+
+function hideLoadingIfNeeded() {
+  if (store.state.isShowToast) uni.hideLoading()
+}
+
+async function selectAddressData(val: any) {
+  await API_Trade.setAddressId(val.id, routerVal.value.way)
+  uni.navigateBack({ delta: 1 })
+}
+
+function getAddressList() {
+  uni.showLoading()
+  API_Address.getAddressList(params.pageNumber, params.pageSize).then((res) => {
+    res.data.result.records.forEach((item: any) => {
+      item.consigneeAddressPath = item.consigneeAddressPath.split(',')
+    })
+    addressList.value = res.data.result.records
+    hideLoadingIfNeeded()
+  })
+}
+
+function removeAddress(id: string) {
+  removeId.value = id
+  showAction.value = true
+}
+
+function deleteAddressMessage() {
+  API_Address.deleteAddress(removeId.value).then((res) => {
+    if (res.statusCode == 200) {
+      uni.showToast({ icon: 'none', title: '删除成功' })
+      getAddressList()
+    } else {
+      uni.showToast({ icon: 'none', title: res.data.message, duration: 2000 })
+    }
+  })
+}
+
+function addAddress(id: string) {
+  if (id) {
+    uni.navigateTo({
+      url: `/pages/mine/address/add?id=${id}&way=${routerVal.value.way}&type=order`,
+    })
+  } else {
+    uni.navigateTo({
+      url: `/pages/mine/address/add?way=${routerVal.value.way}&type=order`,
+    })
+  }
+}
+
+function setDefault(item: any) {
+  delete item.updateBy
+  delete item.updateTime
+  delete item.deleteFlag
+  if (!item.isDefault) item.isDefault = true
+  API_Address.editAddress(item).then(() => {
+    uni.showToast({ title: '设置默认地址成功', icon: 'none' })
+    getAddressList()
+  })
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/mine/address/addressManage.vue b/pages/mine/address/addressManage.vue
index ed21393..40a7e3b 100644
--- a/pages/mine/address/addressManage.vue
+++ b/pages/mine/address/addressManage.vue
@@ -1,6 +1,6 @@
 <template>
   <view class="address">
-    <u-empty class="empty" v-if="this.addressList.length === 0" text="暂无收货地址" mode="address"></u-empty>
+    <u-empty class="empty" v-if="addressList.length === 0" text="暂无收货地址" mode="address"></u-empty>
     <view class="list" >
       <view class="item c-content" v-for="(item, index) in addressList" :key="index">
         <view class="basic">
@@ -43,116 +43,90 @@
   </view>
 </template>
 
-<script>
-import * as API_Address from "@/api/address.js";
-export default {
-  data() {
-    return {
-      addressList: [], //地址列表
-      showAction: false, //是否显示下栏框
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onLoad, onShow, onPullDownRefresh, onBackPress } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import { tipsToLogin } from '@/utils/filters.js'
+import * as API_Address from '@/api/address.js'
 
-      removeList: [
-        {
-          text: "确定",
-        },
-      ],
-      tips: {
-        text: "确定要删除该收货人信息吗？",
-      },
-      removeId: "", //删除的地址id
-      routerVal: "",
-      params: {
-        pageNumber: 1,
-        pageSize: 1000,
-      },
-    };
-  },
-  // 返回上一级
-  onBackPress(e) {
-    uni.switchTab({
-      url: "/pages/tabbar/user/my",
-    });
-    return true;
-  },
-  onLoad: function (val) {
-    this.routerVal = val;
-  },
-  onPullDownRefresh() {
-    //下拉刷新
-    this.addressList = [];
-    this.getAddressList();
-  },
-  /**
-   * 进入页面检测当前账户是否登录
-   */
-  onShow() {
-    if (this.tipsToLogin()) {
-      this.getAddressList();
+const store = useStore()
+
+const addressList = ref<any[]>([])
+const showAction = ref(false)
+const removeList = [{ text: '确定' }]
+const tips = { text: '确定要删除该收货人信息吗？' }
+const removeId = ref('')
+const routerVal = ref<Record<string, string>>({})
+const params = { pageNumber: 1, pageSize: 1000 }
+
+onBackPress(() => {
+  uni.switchTab({ url: '/pages/tabbar/user/my' })
+  return true
+})
+
+onLoad((val) => {
+  routerVal.value = val || {}
+})
+
+onPullDownRefresh(() => {
+  addressList.value = []
+  getAddressList()
+})
+
+onShow(() => {
+  if (tipsToLogin()) {
+    getAddressList()
+  }
+})
+
+function hideLoadingIfNeeded() {
+  if (store.state.isShowToast) uni.hideLoading()
+}
+
+function getAddressList() {
+  uni.showLoading()
+  API_Address.getAddressList(params.pageNumber, params.pageSize).then((res) => {
+    res.data.result.records.forEach((item: any) => {
+      item.consigneeAddressPath = item.consigneeAddressPath.split(',')
+    })
+    addressList.value = res.data.result.records
+    hideLoadingIfNeeded()
+  })
+}
+
+function removeAddress(id: string) {
+  removeId.value = id
+  showAction.value = true
+}
+
+function deleteAddressMessage() {
+  API_Address.deleteAddress(removeId.value).then((res) => {
+    if (res.statusCode == 200) {
+      uni.showToast({ icon: 'none', title: '删除成功' })
+      getAddressList()
+    } else {
+      uni.showToast({ icon: 'none', title: res.data.message, duration: 2000 })
     }
-  },
-  methods: {
-    //获取地址列表
-    getAddressList() {
-      uni.showLoading();
-      API_Address.getAddressList(
-        this.params.pageNumber,
-        this.params.pageSize
-      ).then((res) => {
-        res.data.result.records.forEach((item) => {
-          item.consigneeAddressPath = item.consigneeAddressPath.split(",");
-        });
-        this.addressList = res.data.result.records;
+  })
+}
 
-         if (this.$store.state.isShowToast){ uni.hideLoading() };
-      });
-    },
-    //删除地址
-    removeAddress(id) {
-      this.removeId = id;
-      this.showAction = true;
-    },
-    // 删除地址
-    deleteAddressMessage() {
-      API_Address.deleteAddress(this.removeId).then((res) => {
-        if (res.statusCode == 200) {
-          uni.showToast({
-            icon: "none",
-            title: "删除成功",
-          });
-          this.getAddressList();
-        } else {
-          uni.showToast({
-            icon: "none",
-            title: res.data.message,
-            duration: 2000,
-          });
-        }
-      });
-    },
-    //新建。编辑地址
-    addAddress(id) {
-      uni.navigateTo({
-        url: `/pages/mine/address/add${id ? "?id=" + id : ""}`,
-      });
-    },
-    //设为默认地址
-    setDefault(item) {
-      delete item.updateBy;
-      delete item.updateTime;
-      delete item.deleteFlag;
+function addAddress(id?: string) {
+  uni.navigateTo({
+    url: `/pages/mine/address/add${id ? '?id=' + id : ''}`,
+  })
+}
 
-      item.isDefault ? "" : (item.isDefault = !item.isDefault);
-
-      API_Address.editAddress(item).then(() => {
-        uni.showToast({
-          title: "设置默认地址成功",
-          icon: "none",
-        });
-        this.getAddressList();
-      });
-    },
-  },
-};
+function setDefault(item: any) {
+  delete item.updateBy
+  delete item.updateTime
+  delete item.deleteFlag
+  if (!item.isDefault) item.isDefault = true
+  API_Address.editAddress(item).then(() => {
+    uni.showToast({ title: '设置默认地址成功', icon: 'none' })
+    getAddressList()
+  })
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/mine/address/storeAddress.vue b/pages/mine/address/storeAddress.vue
index 7882055..1a6c404 100644
--- a/pages/mine/address/storeAddress.vue
+++ b/pages/mine/address/storeAddress.vue
@@ -20,67 +20,57 @@
   </view>
 </template>
 
-<script>
-import * as API_Trade from "@/api/trade";
-import * as API_Store from "@/api/store.js";
-export default {
-  data() {
-    return {
-      storeAddressList: [], //地址列表
-      showAction: false, //是否显示下栏框
-      removeList: [
-        {
-          text: "确定",
-        },
-      ],
-      tips: {
-        text: "确定要删除该收货人信息吗？",
-      },
-      removeId: "", //删除的地址id
-      routerVal: "",
-      params: {
-        pageNumber: 1,
-        pageSize: 1000,
-      },
-    };
-  },
-  onPullDownRefresh() {
-    //下拉刷新
-    this.storeAddressList = [];
-    this.getAddressList();
-  },
-  onLoad: function (val) {
-    this.routerVal = val;
-  },
-  onShow() {
-    this.storeAddressList = [];
-    this.getAddressList();
-  },
-  onHide() {},
-  methods: {
-    async selectAddressData(val) {
-      await API_Trade.setStoreAddressId(val.id, this.routerVal.way);
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onLoad, onShow, onPullDownRefresh } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import * as API_Trade from '@/api/trade'
+import * as API_Store from '@/api/store.js'
 
-      uni.navigateBack({
-        delta: 1,
-      });
-    },
-    //获取地址列表
-    getAddressList() {
-      uni.showLoading();
+const store = useStore()
 
-      API_Store.getStoreAddress(
-        this.routerVal.storeId,
-        this.params
-      ).then((res) => {
-        this.storeAddressList = res.data.result.records;
-        console.log(this.storeAddressList);
+const storeAddressList = ref<any[]>([])
+const showAction = ref(false)
+const removeList = [{ text: '确定' }]
+const tips = { text: '确定要删除该收货人信息吗？' }
+const removeId = ref('')
+const routerVal = ref<Record<string, string>>({})
+const params = { pageNumber: 1, pageSize: 1000 }
 
-         if (this.$store.state.isShowToast){ uni.hideLoading() };
-      });
-    },
-  },
-};
+onPullDownRefresh(() => {
+  storeAddressList.value = []
+  getAddressList()
+})
+
+onLoad((val) => {
+  routerVal.value = val || {}
+})
+
+onShow(() => {
+  storeAddressList.value = []
+  getAddressList()
+})
+
+function hideLoadingIfNeeded() {
+  if (store.state.isShowToast) uni.hideLoading()
+}
+
+async function selectAddressData(val: any) {
+  await API_Trade.setStoreAddressId(val.id, routerVal.value.way)
+  uni.navigateBack({ delta: 1 })
+}
+
+function getAddressList() {
+  uni.showLoading()
+  API_Store.getStoreAddress(routerVal.value.storeId, params).then((res) => {
+    storeAddressList.value = res.data.result.records
+    hideLoadingIfNeeded()
+  })
+}
+
+function deleteAddressMessage() {
+  // 保留 action-sheet 回调占位，当前页面无删除入口
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/mine/deposit/index.vue b/pages/mine/deposit/index.vue
index 3abfdec..c16cf66 100644
--- a/pages/mine/deposit/index.vue
+++ b/pages/mine/deposit/index.vue
@@ -52,84 +52,64 @@
   </view>
 </template>
 
-<script>
-import { getUserRecharge, getWalletLog, getUserWallet } from "@/api/members";
-export default {
-  data() {
-    return {
-      walletNum: 0,
-      current: 0,
-      swiperCurrent: 0,
-      userInfo: "",
-      params: {
-        pageNumber: 1,
-        pageSize: 10,
-        order: "desc",
-      },
-      depositData: [],
-      rechargeList: "",
-      walletLogList: "",
-      list: [{ name: "预存款变动明细" }],
-    };
-  },
-  watch: {
-    swiperCurrent(index) {
-      this.swiperCurrent = index;
-    },
-  },
-  async mounted() {
-    this.getWallet();
-    const result = await getUserWallet();
-    this.walletNum = result.data.result.memberWallet;
-  },
-  methods: {
-    isOutgoing(serviceType) {
-      return serviceType === "WALLET_PAY" || serviceType === "WALLET_WITHDRAWAL";
-    },
-    isIncoming(serviceType) {
-      return (
-        serviceType === "WALLET_REFUND" ||
-        serviceType === "WALLET_RECHARGE" ||
-        serviceType === "WALLET_COMMISSION"
-      );
-    },
-    getMoneyClass(serviceType) {
-      if (this.isOutgoing(serviceType)) return "out";
-      if (this.isIncoming(serviceType)) return "in";
-      return "";
-    },
-    formatLogMoney(logItem) {
-      const amount = this.unitPrice(logItem.money);
-      if (this.isOutgoing(logItem.serviceType)) return `-${amount}`;
-      if (this.isIncoming(logItem.serviceType)) return `+${amount}`;
-      return amount;
-    },
-    getRecharge() {
-      getUserRecharge(this.params).then((res) => {
-        if (res.data.success && res.data.result.records.length) {
-          this.depositData.push(...res.data.result.records);
-        }
-      });
-    },
-    getWallet() {
-      getWalletLog(this.params).then((res) => {
-        if (res.data.success && res.data.result.records.length) {
-          this.depositData.push(...res.data.result.records);
-        }
-      });
-    },
-    changed(index) {
-      this.depositData = [];
-      this.swiperCurrent = index;
-      this.params.pageNumber = 1;
-      this.getWallet();
-    },
-    loadMore() {
-      this.params.pageNumber++;
-      this.getWallet();
-    },
-  },
-};
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { getWalletLog, getUserWallet } from '@/api/members'
+import { unitPrice } from '@/utils/filters.js'
+
+const walletNum = ref(0)
+const swiperCurrent = ref(0)
+const params = ref({
+  pageNumber: 1,
+  pageSize: 10,
+  order: 'desc',
+})
+const depositData = ref<any[]>([])
+const list = [{ name: '预存款变动明细' }]
+
+onMounted(async () => {
+  getWallet()
+  const result = await getUserWallet()
+  walletNum.value = result.data.result.memberWallet
+})
+
+function isOutgoing(serviceType: string) {
+  return serviceType === 'WALLET_PAY' || serviceType === 'WALLET_WITHDRAWAL'
+}
+
+function isIncoming(serviceType: string) {
+  return (
+    serviceType === 'WALLET_REFUND' ||
+    serviceType === 'WALLET_RECHARGE' ||
+    serviceType === 'WALLET_COMMISSION'
+  )
+}
+
+function getMoneyClass(serviceType: string) {
+  if (isOutgoing(serviceType)) return 'out'
+  if (isIncoming(serviceType)) return 'in'
+  return ''
+}
+
+function formatLogMoney(logItem: any) {
+  const amount = unitPrice(logItem.money)
+  if (isOutgoing(logItem.serviceType)) return `-${amount}`
+  if (isIncoming(logItem.serviceType)) return `+${amount}`
+  return amount
+}
+
+function getWallet() {
+  getWalletLog(params.value).then((res) => {
+    if (res.data.success && res.data.result.records.length) {
+      depositData.value.push(...res.data.result.records)
+    }
+  })
+}
+
+function loadMore() {
+  params.value.pageNumber++
+  getWallet()
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/mine/deposit/info.vue b/pages/mine/deposit/info.vue
index 9b39f5f..5cf22f9 100644
--- a/pages/mine/deposit/info.vue
+++ b/pages/mine/deposit/info.vue
@@ -12,8 +12,7 @@
   </view>
 </template>
 
-<script>
-export default {};
+<script setup lang="ts">
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/mine/deposit/operation.vue b/pages/mine/deposit/operation.vue
index dac91f1..cc3b72c 100644
--- a/pages/mine/deposit/operation.vue
+++ b/pages/mine/deposit/operation.vue
@@ -38,33 +38,30 @@
   </view>
 </template>
 
-<script>
-import { getUserWallet } from "@/api/members";
-export default {
-  data() {
-    return {
-      walletNum: 0,
-    };
-  },
-  async onShow() {
-    if (this.isLogin("auth")) {
-      let result = await getUserWallet();
-      this.walletNum = result.data.result.memberWallet;
-    } else {
-      this.navigateToLogin("redirectTo");
-    }
-  },
-  methods: {
-    back() {
-      uni.switchTab({
-        url: "/pages/tabbar/user/my",
-      });
-    },
-    navigateTo(url) {
-      uni.navigateTo({ url });
-    },
-  },
-};
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onShow } from '@dcloudio/uni-app'
+import { getUserWallet } from '@/api/members'
+import { isLogin, navigateToLogin, unitPrice } from '@/utils/filters.js'
+
+const walletNum = ref(0)
+
+onShow(async () => {
+  if (isLogin('auth')) {
+    const result = await getUserWallet()
+    walletNum.value = result.data.result.memberWallet
+  } else {
+    navigateToLogin('redirectTo')
+  }
+})
+
+function back() {
+  uni.switchTab({ url: '/pages/tabbar/user/my' })
+}
+
+function navigateTo(url: string) {
+  uni.navigateTo({ url })
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/mine/deposit/recharge.vue b/pages/mine/deposit/recharge.vue
index 21604e7..a422d62 100644
--- a/pages/mine/deposit/recharge.vue
+++ b/pages/mine/deposit/recharge.vue
@@ -19,40 +19,30 @@
   </view>
 </template>
 
-<script>
-import { recharge } from "@/api/members";
-export default {
-  data() {
-    return {
-      price: "",
-      flag: true,
-    };
-  },
-  watch: {
-    price(val) {
-      this.flag = !(Number(val) > 0);
-    },
-  },
-  methods: {
-    async handlerRecharge() {
-      const amount = Number(this.price);
-      if (!(amount > 0)) {
-        uni.showToast({
-          title: "请输入充值金额",
-          icon: "none",
-        });
-        return;
-      }
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { recharge } from '@/api/members'
 
-      const res = await recharge({ price: amount });
-      if (res.data.success) {
-        uni.navigateTo({
-          url: `/pages/cart/payment/payOrder?orderType=RECHARGE&recharge_sn=${res.data.result.rechargeSn}`,
-        });
-      }
-    },
-  },
-};
+const price = ref('')
+const flag = ref(true)
+
+watch(price, (val) => {
+  flag.value = !(Number(val) > 0)
+})
+
+async function handlerRecharge() {
+  const amount = Number(price.value)
+  if (!(amount > 0)) {
+    uni.showToast({ title: '请输入充值金额', icon: 'none' })
+    return
+  }
+  const res = await recharge({ price: amount })
+  if (res.data.success) {
+    uni.navigateTo({
+      url: `/pages/cart/payment/payOrder?orderType=RECHARGE&recharge_sn=${res.data.result.rechargeSn}`,
+    })
+  }
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/mine/deposit/withdrawApply.vue b/pages/mine/deposit/withdrawApply.vue
index ef5f029..aac633a 100644
--- a/pages/mine/deposit/withdrawApply.vue
+++ b/pages/mine/deposit/withdrawApply.vue
@@ -25,182 +25,149 @@
   </view>
 </template>
 
-<script>
-import { getWithdrawApplyPage, getWithdrawApplyWechatTransferInfo } from "@/api/members";
-export default {
-  data() {
-    return {
-      loaded: false,
-      params: {
-        pageNumber: 1,
-        pageSize: 10,
-        order: "desc",
-      },
-      records: [],
-    };
-  },
-  onShow() {
-    this.params.pageNumber = 1;
-    this.records = [];
-    this.loaded = false;
-    this.getData();
-  },
-  methods: {
-    withdrawStatusText(applyStatus) {
-      switch (applyStatus) {
-        case "APPLY":
-          return "申请中";
-        case "VIA_AUDITING":
-          return "审核通过";
-        case "D_VIA_AUDITING":
-          return "分销提现审核通过";
-        case "FAIL_AUDITING":
-          return "审核未通过";
-        case "D_FAIL_AUDITING":
-          return "分销提现审核未通过";
-        case "WAIT_USER_CONFIRM":
-          return "等待用户确认";
-        case "SUCCESS":
-          return "提现成功";
-        case "ERROR":
-          return "提现失败";
-        default:
-          return applyStatus || "";
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onShow } from '@dcloudio/uni-app'
+import { getWithdrawApplyPage, getWithdrawApplyWechatTransferInfo } from '@/api/members'
+import { unitPrice } from '@/utils/filters.js'
+
+const loaded = ref(false)
+const params = ref({
+  pageNumber: 1,
+  pageSize: 10,
+  order: 'desc',
+})
+const records = ref<any[]>([])
+
+onShow(() => {
+  params.value.pageNumber = 1
+  records.value = []
+  loaded.value = false
+  getData()
+})
+
+function withdrawStatusText(applyStatus: string) {
+  switch (applyStatus) {
+    case 'APPLY':
+      return '申请中'
+    case 'VIA_AUDITING':
+      return '审核通过'
+    case 'D_VIA_AUDITING':
+      return '分销提现审核通过'
+    case 'FAIL_AUDITING':
+      return '审核未通过'
+    case 'D_FAIL_AUDITING':
+      return '分销提现审核未通过'
+    case 'WAIT_USER_CONFIRM':
+      return '等待用户确认'
+    case 'SUCCESS':
+      return '提现成功'
+    case 'ERROR':
+      return '提现失败'
+    default:
+      return applyStatus || ''
+  }
+}
+
+function getData() {
+  getWithdrawApplyPage(params.value).then((res) => {
+    loaded.value = true
+    if (res.data.success && res.data.result.records.length != 0) {
+      records.value.push(...res.data.result.records)
+    }
+  })
+}
+
+function loadMore() {
+  params.value.pageNumber++
+  getData()
+}
+
+function confirmWechatReceive(item: any) {
+  const id = item && item.id
+  if (!id) {
+    uni.showToast({ title: '缺少提现记录ID', duration: 2000, icon: 'none' })
+    return
+  }
+
+  uni.showLoading({ title: '加载中' })
+  getWithdrawApplyWechatTransferInfo(id)
+    .then((res) => {
+      if (!res.data || !res.data.success) return
+
+      const info = res.data.result || {}
+      const mchId = info.mchId
+      const wechatPackage = info.wechatPackage
+      let appId = info.appId
+
+      if (typeof wx !== 'undefined' && wx.getAccountInfoSync) {
+        try {
+          const accountInfo = wx.getAccountInfoSync()
+          const mpAppId = accountInfo && accountInfo.miniProgram && accountInfo.miniProgram.appId
+          if (mpAppId) appId = mpAppId
+        } catch (e) {}
       }
-    },
-    getData() {
-      getWithdrawApplyPage(this.params).then((res) => {
-        this.loaded = true;
-        if (res.data.success) {
-          if (res.data.result.records.length != 0) {
-            this.records.push(...res.data.result.records);
-          }
+
+      if (!mchId || !appId || !wechatPackage) {
+        uni.showToast({ title: '微信确认参数缺失', duration: 2000, icon: 'none' })
+        return
+      }
+
+      const openResultToast = (errMsg?: string) => {
+        if (errMsg === 'requestMerchantTransfer:ok') {
+          uni.showToast({ title: '已唤起确认页面', duration: 2000, icon: 'none' })
+          return
+        }
+        if (errMsg === 'requestMerchantTransfer:cancel') {
+          uni.showToast({ title: '已取消', duration: 2000, icon: 'none' })
+          return
         }
-      });
-    },
-    loadMore() {
-      this.params.pageNumber++;
-      this.getData();
-    },
-    confirmWechatReceive(item) {
-      const id = item && item.id;
-      if (!id) {
         uni.showToast({
-          title: "缺少提现记录ID",
-          duration: 2000,
-          icon: "none",
-        });
-        return;
+          title: errMsg ? `唤起失败：${errMsg}` : '唤起失败',
+          duration: 2500,
+          icon: 'none',
+        })
       }
 
-      uni.showLoading({
-        title: "加载中",
-      });
-      getWithdrawApplyWechatTransferInfo(id)
-        .then((res) => {
-          if (!res.data || !res.data.success) return;
-
-          const info = res.data.result || {};
-          const mchId = info.mchId;
-          const wechatPackage = info.wechatPackage;
-          let appId = info.appId;
-
-          if (typeof wx !== "undefined" && wx.getAccountInfoSync) {
-            try {
-              const accountInfo = wx.getAccountInfoSync();
-              const mpAppId = accountInfo && accountInfo.miniProgram && accountInfo.miniProgram.appId;
-              if (mpAppId) appId = mpAppId;
-            } catch (e) {}
-          }
-
-          if (!mchId || !appId || !wechatPackage) {
+      if (typeof wx !== 'undefined' && wx.getSystemInfoSync) {
+        try {
+          const sys = wx.getSystemInfoSync()
+          if (sys && sys.platform === 'devtools') {
             uni.showToast({
-              title: "微信确认参数缺失",
-              duration: 2000,
-              icon: "none",
-            });
-            return;
-          }
-
-          const openResultToast = (errMsg) => {
-            if (errMsg === "requestMerchantTransfer:ok") {
-              uni.showToast({
-                title: "已唤起确认页面",
-                duration: 2000,
-                icon: "none",
-              });
-              return;
-            }
-            if (errMsg === "requestMerchantTransfer:cancel") {
-              uni.showToast({
-                title: "已取消",
-                duration: 2000,
-                icon: "none",
-              });
-              return;
-            }
-            uni.showToast({
-              title: errMsg ? `唤起失败：${errMsg}` : "唤起失败",
+              title: '开发者工具可能不支持，请真机测试',
               duration: 2500,
-              icon: "none",
-            });
-          };
-
-          if (typeof wx !== "undefined" && wx.getSystemInfoSync) {
-            try {
-              const sys = wx.getSystemInfoSync();
-              if (sys && sys.platform === "devtools") {
-                uni.showToast({
-                  title: "开发者工具可能不支持，请真机测试",
-                  duration: 2500,
-                  icon: "none",
-                });
-              }
-            } catch (e) {}
+              icon: 'none',
+            })
           }
+        } catch (e) {}
+      }
 
-          if (typeof wx !== "undefined" && wx.canIUse && wx.canIUse("requestMerchantTransfer")) {
-            wx.requestMerchantTransfer({
-              mchId,
-              appId,
-              package: wechatPackage,
-              success: (r) => {
-                openResultToast(r && (r.errMsg || r.err_msg));
-              },
-              fail: (r) => {
-                openResultToast(r && (r.errMsg || r.err_msg));
-              },
-            });
-            return;
-          }
-
-          if (typeof WeixinJSBridge !== "undefined" && WeixinJSBridge.invoke) {
-            WeixinJSBridge.invoke(
-              "requestMerchantTransfer",
-              {
-                mchId,
-                appId,
-                package: wechatPackage,
-              },
-              (r) => {
-                openResultToast(r && (r.errMsg || r.err_msg));
-              }
-            );
-            return;
-          }
-
-          uni.showToast({
-            title: "请在微信内打开确认收款",
-            duration: 2000,
-            icon: "none",
-          });
+      if (typeof wx !== 'undefined' && wx.canIUse && wx.canIUse('requestMerchantTransfer')) {
+        wx.requestMerchantTransfer({
+          mchId,
+          appId,
+          package: wechatPackage,
+          success: (r: any) => openResultToast(r && (r.errMsg || r.err_msg)),
+          fail: (r: any) => openResultToast(r && (r.errMsg || r.err_msg)),
         })
-        .finally(() => {
-          uni.hideLoading();
-        });
-    },
-  },
-};
+        return
+      }
+
+      if (typeof WeixinJSBridge !== 'undefined' && WeixinJSBridge.invoke) {
+        WeixinJSBridge.invoke(
+          'requestMerchantTransfer',
+          { mchId, appId, package: wechatPackage },
+          (r: any) => openResultToast(r && (r.errMsg || r.err_msg))
+        )
+        return
+      }
+
+      uni.showToast({ title: '请在微信内打开确认收款', duration: 2000, icon: 'none' })
+    })
+    .finally(() => {
+      uni.hideLoading()
+    })
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/mine/deposit/withdrawal.vue b/pages/mine/deposit/withdrawal.vue
index 4edc3dd..5907120 100644
--- a/pages/mine/deposit/withdrawal.vue
+++ b/pages/mine/deposit/withdrawal.vue
@@ -58,77 +58,68 @@
   </view>
 </template>
 
-<script>
-import { getUserWallet, withdrawalApply, withdrawalSettingVO } from "@/api/members";
-export default {
-  data() {
-    return {
-      price: "",
-      walletNum: 0,
-      minPrice: 0,
-      type: "",
-      connectNumber: "",
-      realName: "",
-    };
-  },
-  computed: {
-    typeLabel() {
-      if (this.type === "ALI") return "支付宝";
-      if (this.type) return "微信";
-      return "--";
-    },
-  },
-  async mounted() {
-    const result = await getUserWallet();
-    const res = await withdrawalSettingVO();
-    this.walletNum = result.data.result.memberWallet;
-    this.minPrice = res.data.result.minPrice;
-    this.type = res.data.result.type;
-  },
-  methods: {
-    cashd() {
-      const amount = Number(this.price);
-      if (!this.$u.test.amount(parseInt(amount))) {
-        uni.showToast({
-          title: "请输入正确金额",
-          duration: 2000,
-          icon: "none",
-        });
-        return;
-      }
+<script setup lang="ts">
+import { ref, computed, getCurrentInstance, onMounted } from 'vue'
+import { getUserWallet, withdrawalApply, withdrawalSettingVO } from '@/api/members'
+import { unitPrice } from '@/utils/filters.js'
 
-      const params = { price: amount };
-      if (this.type === "ALI") {
-        if (!this.connectNumber || !this.realName) {
-          uni.showToast({
-            title: "请输入真实姓名和第三方登录账号",
-            duration: 2000,
-            icon: "none",
-          });
-          return;
-        }
-        params.connectNumber = this.connectNumber;
-        params.realName = this.realName;
-      }
+const { proxy } = getCurrentInstance()!
 
-      withdrawalApply(params).then((res) => {
-        if (res.data.success) {
-          uni.showToast({
-            title: "提现成功!",
-            duration: 2000,
-            icon: "none",
-          });
-          setTimeout(() => {
-            uni.navigateBack({ delta: 1 });
-          }, 1000);
-        }
-      });
-    },
-    handleAll() {
-      this.price = String(this.walletNum || "");
-    },
-  },
-};
+const price = ref('')
+const walletNum = ref(0)
+const minPrice = ref(0)
+const type = ref('')
+const connectNumber = ref('')
+const realName = ref('')
+
+const typeLabel = computed(() => {
+  if (type.value === 'ALI') return '支付宝'
+  if (type.value) return '微信'
+  return '--'
+})
+
+onMounted(async () => {
+  const result = await getUserWallet()
+  const res = await withdrawalSettingVO()
+  walletNum.value = result.data.result.memberWallet
+  minPrice.value = res.data.result.minPrice
+  type.value = res.data.result.type
+})
+
+function cashd() {
+  const amount = Number(price.value)
+  if (!proxy.$u.test.amount(parseInt(String(amount)))) {
+    uni.showToast({ title: '请输入正确金额', duration: 2000, icon: 'none' })
+    return
+  }
+
+  const params: Record<string, any> = { price: amount }
+  if (type.value === 'ALI') {
+    if (!connectNumber.value || !realName.value) {
+      uni.showToast({
+        title: '请输入真实姓名和第三方登录账号',
+        duration: 2000,
+        icon: 'none',
+      })
+      return
+    }
+    params.connectNumber = connectNumber.value
+    params.realName = realName.value
+  }
+
+  withdrawalApply(params).then((res) => {
+    if (res.data.success) {
+      uni.showToast({ title: '提现成功!', duration: 2000, icon: 'none' })
+      setTimeout(() => {
+        uni.navigateBack({ delta: 1 })
+      }, 1000)
+    }
+  })
+}
+
+function handleAll() {
+  price.value = String(walletNum.value || '')
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/mine/distribution/achievement.vue b/pages/mine/distribution/achievement.vue
index 813f8c2..1977201 100644
--- a/pages/mine/distribution/achievement.vue
+++ b/pages/mine/distribution/achievement.vue
@@ -1,11 +1,10 @@
 <template>
-    
+  <view></view>
 </template>
-<script>
-export default {
-    
-}
-</script>
-<style lang="scss" scoped>
 
-</style>
\ No newline at end of file
+<script setup lang="ts">
+// 占位页，暂无业务逻辑
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/pages/mine/distribution/auth.vue b/pages/mine/distribution/auth.vue
index d3bf436..954da91 100644
--- a/pages/mine/distribution/auth.vue
+++ b/pages/mine/distribution/auth.vue
@@ -3,160 +3,100 @@
     <view>
       <h4>实名认证（请上传真实的个人信息，认证通过后将无法修改）</h4>
       <view>
-        <u-form :model="ruleForm" label-width="200rpx" ref="uForm">
-          <u-form-item label="姓名" prop="name">
-            <u-input v-model="ruleForm.name" placeholder="请输入您的真实姓名" />
-          </u-form-item>
-          <u-form-item label="身份证" prop="idNumber">
-            <u-input v-model="ruleForm.idNumber" placeholder="请输入身份证号码" />
-          </u-form-item>
-          <u-form-item label="银行开户行" prop="settlementBankBranchName">
-            <u-input v-model="ruleForm.settlementBankBranchName" type="text" placeholder="请输入银行开户行" />
-          </u-form-item>
-          <u-form-item label="银行开户名" prop="settlementBankAccountName">
-            <u-input v-model="ruleForm.settlementBankAccountName" type="text" placeholder="请输入银行开户名" />
-          </u-form-item>
-          <u-form-item label="银行账号" prop="settlementBankAccountNum">
-            <u-input v-model="ruleForm.settlementBankAccountNum" type="text" placeholder="请输入银行账号" />
-          </u-form-item>
-          <!-- <u-form-item label="身份证正面照" prop="name">
-            <u-upload></u-upload>
-          </u-form-item>
-          <u-form-item label="身份证反面照" prop="name">
-            <u-upload></u-upload>
-          </u-form-item>
-          <u-form-item label="手持身份证照" prop="name">
-            <u-upload></u-upload>
-          </u-form-item> -->
-        </u-form>
-        <u-button :customStyle="{'background':$lightColor,'color':'#fff' }" @click="submit">提交</u-button>
+        <up-form
+          :model="formData"
+          label-position="left"
+          label-width="180rpx"
+          ref="uFormRef"
+        >
+        <up-form-item label="姓名" prop="name">
+            <u-input v-model="formData.name" placeholder="请输入您的真实姓名" />
+          </up-form-item>
+          <up-form-item label="身份证" prop="idNumber">
+            <u-input v-model="formData.idNumber" placeholder="请输入身份证号码" />
+          </up-form-item>
+          <up-form-item label="银行开户行" prop="settlementBankBranchName">
+            <u-input v-model="formData.settlementBankBranchName" placeholder="请输入银行开户行" />
+          </up-form-item>
+          <up-form-item label="银行开户名" prop="settlementBankAccountName">
+            <u-input v-model="formData.settlementBankAccountName" placeholder="请输入银行开户名" />
+          </up-form-item>
+          <up-form-item label="银行账号" prop="settlementBankAccountNum">
+            <u-input v-model="formData.settlementBankAccountNum" placeholder="请输入银行账号" />
+          </up-form-item>
+        </up-form>
+        <u-button :customStyle="{ background: lightColor, color: '#fff' }" @click="submitForm">提交</u-button>
       </view>
     </view>
-
     <view class="tips">
       <view>您提交的信息正在审核</view>
       <view>提交认证申请后，工作人员将在三个工作日进行核对完成审核</view>
     </view>
   </view>
 </template>
-<script>
-import { applyDistribution } from "@/api/goods";
-export default {
-  data() {
-    return {
-      ruleForm: {
-        name: "",
-        idNumber: "",
-        settlementBankBranchName: "", // 银行开户行
-        settlementBankAccountName: "", //银行开户名
-        settlementBankAccountNum: "", //银行账号
-      },
-      rules: {
-        name: [
-          {
-            required: true,
-            message: "请输入姓名",
-            // 可以单个或者同时写两个触发验证方式
-            trigger: "blur",
-          },
-          {
-            // 自定义验证函数，见上说明
-            validator: (rule, value, callback) => {
-              // 上面有说，返回true表示校验通过，返回false表示不通过
-              // this.$u.test.mobile()就是返回true或者false的
-              return this.$u.test.chinese(value);
-            },
-            message: "姓名输入不正确",
-            // 触发器可以同时用blur和change
-            trigger: ["change", "blur"],
-          },
-        ],
-        // 银行开户行
-        settlementBankBranchName: [
-          {
-            required: true,
-            message: "请输入银行开户行",
-            // 可以单个或者同时写两个触发验证方式
-            trigger: "blur",
-          },
-        ], //银行开户名
-        settlementBankAccountName: [
-          {
-            required: true,
-            message: "银行开户名",
-            // 可以单个或者同时写两个触发验证方式
-            trigger: "blur",
-          },
-        ],
-        //银行账号
-        settlementBankAccountNum: [
-          {
-            required: true,
-            message: "请输入银行账号",
-            // 可以单个或者同时写两个触发验证方式
-            trigger: "blur",
-          },
-        ],
-        idNumber: [
-          {
-            required: true,
-            message: "请输入身份证",
-            // 可以单个或者同时写两个触发验证方式
-            trigger: "blur",
-          },
-          {
-            // 自定义验证函数，见上说明
-            validator: (rule, value, callback) => {
-              // 上面有说，返回true表示校验通过，返回false表示不通过
-              // this.$u.test.mobile()就是返回true或者false的
-              return this.$u.test.idCard(value);
-            },
-            message: "身份证号码不正确",
-            // 触发器可以同时用blur和change
-            trigger: ["change", "blur"],
-          },
-        ],
-      },
-    };
-  },
-  methods: {
-    submit() {
-      this.$refs.uForm.validate((valid) => {
-        if (valid) {
-          applyDistribution(this.ruleForm).then((res) => {
-            if (res.data.success) {
-              uni.showToast({
-                title: "认证提交成功!",
-                duration: 2000,
-                icon: "none",
-              });
 
-              setTimeout(() => {
-                uni.navigateBack();
-              }, 500);
-            } else {
-              uni.showToast({
-                title: res.data.message,
-                duration: 2000,
-                icon: "none",
-              });
-            }
-          });
-        } else {
-          uni.showToast({
-            title: "请填写有效信息",
-            duration: 2000,
-            icon: "none",
-          });
-        }
-      });
+<script setup lang="ts">
+import { reactive, computed, ref, getCurrentInstance } from 'vue'
+import { onReady } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import { applyDistribution } from '@/api/goods'
+
+const store = useStore()
+const { proxy } = getCurrentInstance()!
+
+const lightColor = computed(() => store.getters.lightColor)
+const uFormRef = ref<any>(null)
+
+const formData = reactive({
+  name: '',
+  idNumber: '',
+  settlementBankBranchName: '',
+  settlementBankAccountName: '',
+  settlementBankAccountNum: '',
+})
+
+const rules = {
+  name: [
+    { required: true, message: '请输入姓名', trigger: 'blur' },
+    {
+      validator: (_rule: unknown, value: string) => proxy.$u.test.chinese(value),
+      message: '姓名输入不正确',
+      trigger: ['change', 'blur'],
     },
-  },
-  onReady() {
-    this.$refs.uForm.setRules(this.rules);
-  },
-};
+  ],
+  settlementBankBranchName: [{ required: true, message: '请输入银行开户行', trigger: 'blur' }],
+  settlementBankAccountName: [{ required: true, message: '银行开户名', trigger: 'blur' }],
+  settlementBankAccountNum: [{ required: true, message: '请输入银行账号', trigger: 'blur' }],
+  idNumber: [
+    { required: true, message: '请输入身份证', trigger: 'blur' },
+    {
+      validator: (_rule: unknown, value: string) => proxy.$u.test.idCard(value),
+      message: '身份证号码不正确',
+      trigger: ['change', 'blur'],
+    },
+  ],
+}
+
+onReady(() => {
+  uFormRef.value?.setRules(rules)
+})
+
+function submitForm() {
+  uFormRef.value?.validate().then(() => {
+    applyDistribution(formData).then((res) => {
+      if (res.data.success) {
+        uni.showToast({ title: '认证提交成功!', duration: 2000, icon: 'none' })
+        setTimeout(() => uni.navigateBack(), 500)
+      } else {
+        uni.showToast({ title: res.data.message, duration: 2000, icon: 'none' })
+      }
+    })
+  }).catch(() => {
+    uni.showToast({ title: '请填写有效信息', duration: 2000, icon: 'none' })
+  })
+}
 </script>
+
 <style lang="scss" scoped>
 .wrapper {
   padding: 32rpx;
diff --git a/pages/mine/distribution/history.vue b/pages/mine/distribution/history.vue
index 7d98d8d..39d6825 100644
--- a/pages/mine/distribution/history.vue
+++ b/pages/mine/distribution/history.vue
@@ -1,30 +1,38 @@
 <template>
   <view class="log-list">
-    <!-- 提现记录 -->
-    <view class="log-way" v-if="cashLogData.length != 0" v-for="(item, index) in cashLogData" :key="index">
+    <view
+      class="log-way"
+      v-if="withdrawLogList.length != 0"
+      v-for="(item, index) in withdrawLogList"
+      :key="'cash-' + index"
+    >
       <view class="log-item">
         <view class="log-item-view">
           <view class="title">{{
-            item.distributionCashStatus == "APPLY"
-              ? "待处理"
-              : item.distributionCashStatus == "VIA_AUDITING"
-                ? "通过"
-                : "拒绝"
+            item.distributionCashStatus == 'APPLY'
+              ? '待处理'
+              : item.distributionCashStatus == 'VIA_AUDITING'
+                ? '通过'
+                : '拒绝'
           }}</view>
-          <view class="price">+{{unitPrice(item.price) }}</view>
+          <view class="price">+{{ unitPrice(item.price) }}</view>
         </view>
         <view class="log-item-view">
           <view>{{ item.createTime }}</view>
-          <view></view>
         </view>
       </view>
     </view>
-    <!-- 分销业绩 -->
-    <view class="log-way" v-if="achievementData.length != 0" v-for="(item, index) in achievementData" :key="index">
+
+    <view
+      class="log-way"
+      v-if="achievementList.length != 0"
+      v-for="(item, index) in achievementList"
+      :key="'ach-' + index"
+    >
       <view class="log-item">
         <view class="log-item-view">
           <view class="title">{{ item.goodsName }}</view>
-          <view class="price">提成金额：+{{unitPrice(item.rebate) }}</view>
+          <view class="price">提成金额：+{{ unitPrice(item.rebate) }}</view>
         </view>
         <view class="log-item-view">
           <view>创建时间：{{ item.createTime }}</view>
@@ -38,101 +46,98 @@
         </view>
       </view>
     </view>
-    <view class="empty" v-if="empty">
-      <u-loadmore :status="status" :icon-type="iconType" bg-color="#f7f7f7" />
+
+    <view class="empty" v-if="isEmpty">
+      <u-loadmore :status="loadStatus" :icon-type="iconType" bg-color="#f7f7f7" />
     </view>
   </view>
 </template>
-<script>
-import { cashLog, distributionOrderList } from "@/api/goods";
-export default {
-  data () {
-    return {
-      cashLogData: [], //提现记录数据集合
-      achievementData: [], //分销业绩数据合集,
-      status: "loadmore",
-      iconType: "flower",
-      empty: false,
-      params: {
-        pageNumber: 1,
-        pageSize: 10,
-      },
 
-      type: 0,
-      routers: "",
-      achParams: {
-        pageNumber: 1,
-        pageSize: 10,
-      },
-    };
-  },
-  onLoad (option) {
-    let title;
-    option.type == 0 ? (title = "分销业绩") : (title = "提现记录");
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onLoad, onReachBottom } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import { cashLog, distributionOrderList } from '@/api/goods'
+import { unitPrice } from '@/utils/filters.js'
 
-    uni.setNavigationBarTitle({
-      title: title, //这是修改后的导航栏文字
-    });
-    this.routers = option;
-    this.type = option.type;
-    option.type == 0 ? this.achievement() : this.history();
-  },
-  mounted () { },
-  onReachBottom () {
-    this.status = "loading";
-    this.type == 0 ? this.achParams.pageNumber++ : this.params.pageNumber++;
-    this.type == 0 ? this.achievement() : this.history();
-  },
-  methods: {
-    // 业绩
-    achievement () {
-      uni.showLoading({
-        title: "加载中",
-      });
-      distributionOrderList(this.achParams).then((res) => {
-        if (res.data.success && res.data.result.records.length >= 1) {
-          this.achievementData.push(...res.data.result.records);
-        } else {
-          this.status = "nomore";
-          this.empty = true;
-        }
-         if (this.$store.state.isShowToast){ uni.hideLoading() };
-      });
-    },
-    // 初始化提现历史
-    history () {
-      uni.showLoading({
-        title: "加载中",
-      });
-      cashLog(this.params).then((res) => {
-        if (res.data.success && res.data.result.records.length >= 1) {
-          this.cashLogData.push(...res.data.result.records);
-        } else {
-          this.status = "nomore";
-          this.empty = true;
-        }
-         if (this.$store.state.isShowToast){ uni.hideLoading() };
-      });
-    },
-  },
-};
+const store = useStore()
+
+const withdrawLogList = ref<any[]>([])
+const achievementList = ref<any[]>([])
+const loadStatus = ref('loadmore')
+const iconType = ref('flower')
+const isEmpty = ref(false)
+const listType = ref(0)
+const routeQuery = ref<Record<string, string>>({})
+
+const withdrawParams = ref({ pageNumber: 1, pageSize: 10 })
+const achievementParams = ref({ pageNumber: 1, pageSize: 10 })
+
+onLoad((option) => {
+  const type = Number(option.type ?? 0)
+  listType.value = type
+  routeQuery.value = option || {}
+  uni.setNavigationBarTitle({
+    title: type === 0 ? '分销业绩' : '提现记录',
+  })
+  type === 0 ? fetchAchievementList() : fetchWithdrawLog()
+})
+
+onReachBottom(() => {
+  loadStatus.value = 'loading'
+  if (listType.value === 0) {
+    achievementParams.value.pageNumber++
+    fetchAchievementList()
+  } else {
+    withdrawParams.value.pageNumber++
+    fetchWithdrawLog()
+  }
+})
+
+function hideLoadingIfNeeded() {
+  if (store.state.isShowToast) uni.hideLoading()
+}
+
+function fetchAchievementList() {
+  uni.showLoading({ title: '加载中' })
+  distributionOrderList(achievementParams.value).then((res) => {
+    if (res.data.success && res.data.result.records.length >= 1) {
+      achievementList.value.push(...res.data.result.records)
+    } else {
+      loadStatus.value = 'nomore'
+      isEmpty.value = true
+    }
+    hideLoadingIfNeeded()
+  })
+}
+
+function fetchWithdrawLog() {
+  uni.showLoading({ title: '加载中' })
+  cashLog(withdrawParams.value).then((res) => {
+    if (res.data.success && res.data.result.records.length >= 1) {
+      withdrawLogList.value.push(...res.data.result.records)
+    } else {
+      loadStatus.value = 'nomore'
+      isEmpty.value = true
+    }
+    hideLoadingIfNeeded()
+  })
+}
 </script>
+
 <style lang="scss" scoped>
 .empty {
   margin: 40rpx 0;
 }
-
 .price {
   color: $main-color;
   font-weight: bold;
 }
-
 .log-list {
   padding: 0 8rpx;
   overflow: hidden;
   margin: 20rpx 0;
 }
-
 .log-way {
   margin: 10rpx 0;
   overflow: hidden;
@@ -140,26 +145,17 @@ export default {
   border-radius: 10rpx;
   padding: 20rpx 0;
 }
-
 .title {
   font-size: 30rpx;
   font-weight: bold;
 }
-
 .log-item-view {
   padding: 8rpx 32rpx;
   display: flex;
   font-size: 13px;
   justify-content: space-between;
 }
-
-.log-item-footer {
-  padding: 8rpx 32rpx;
-  display: flex;
-  font-size: 13px;
-  justify-content: space-between;
-}
-
+.log-item-footer,
 .log-item-footers {
   padding: 8rpx 32rpx;
   display: flex;
diff --git a/pages/mine/distribution/home.vue b/pages/mine/distribution/home.vue
index 42223e8..ee89e33 100644
--- a/pages/mine/distribution/home.vue
+++ b/pages/mine/distribution/home.vue
@@ -1,18 +1,15 @@
 <template>
   <view>
-	
     <view class="nav-list">
       <view class="total">可提现金额</view>
-      <view class="price">{{unitPrice(distributionData.canRebate) }}</view>
-      <view class="frozen"
-        >冻结金额{{unitPrice(distributionData.commissionFrozen) }}</view
-      >
+      <view class="price">{{ unitPrice(distributionData.canRebate) }}</view>
+      <view class="frozen">冻结金额{{ unitPrice(distributionData.commissionFrozen) }}</view>
     </view>
     <view class="nav">
       <view class="nav-item">
         <u-icon
           size="50"
-          @click="handleClick('/pages/mine/distribution/list?id='+distributionData.id+'&name='+distributionData.memberName)"
+          @click="navigateTo(`/pages/mine/distribution/list?id=${distributionData.id}&name=${distributionData.memberName}`)"
           color="#ff6b35"
           name="bag-fill"
         ></u-icon>
@@ -20,72 +17,54 @@
       </view>
       <view
         class="nav-item"
-        @click="handleClick(`/pages/mine/distribution/history?type=0&id=${distributionData.id}&name=${distributionData.memberName}`)"
+        @click="navigateTo(`/pages/mine/distribution/history?type=0&id=${distributionData.id}&name=${distributionData.memberName}`)"
       >
         <u-icon size="50" color="#ff6b35" name="order"></u-icon>
         <view>分销业绩</view>
       </view>
-      <view
-        class="nav-item"
-        @click="handleClick('/pages/mine/distribution/history?type=1')"
-      >
+      <view class="nav-item" @click="navigateTo('/pages/mine/distribution/history?type=1')">
         <u-icon size="50" color="#ff6b35" name="red-packet-fill"></u-icon>
         <view>提现记录</view>
       </view>
-      <view
-        class="nav-item"
-        @click="handleClick('/pages/mine/distribution/withdrawal')"
-      >
+      <view class="nav-item" @click="navigateTo('/pages/mine/distribution/withdrawal')">
         <u-icon size="50" color="#ffc71c" name="rmb-circle-fill"></u-icon>
         <view>提现</view>
       </view>
-  
-     
     </view>
-
   </view>
 </template>
 
-<script>
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onShow } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import { distribution } from '@/api/goods'
+import { unitPrice } from '@/utils/filters.js'
 
-import { distribution } from "@/api/goods";
-export default {
+const store = useStore()
+const distributionData = ref<Record<string, any>>({})
 
-  data() {
-    return {
-      distributionData: "",
-    };
-  },
-  methods: {
-    handleClick(url) {
-      uni.navigateTo({
-        url,
-      });
-    },
-    queryGoods(src) {
-      uni.navigateTo({
-        url: `/pages/mine/distribution/${src}`,
-      });
-    },
-    /**
-     * 初始化推广商品
-     */
-    init() {
-      uni.showLoading({
-        title: "加载中",
-      });
-      distribution().then((res) => {
-        if (res.data.result) {
-          this.distributionData = res.data.result;
-        }
-         if (this.$store.state.isShowToast){ uni.hideLoading() };
-      });
-    },
-  },
-  onShow() {
-    this.init();
-  },
-};
+onShow(() => {
+  fetchDistributionInfo()
+})
+
+function hideLoadingIfNeeded() {
+  if (store.state.isShowToast) uni.hideLoading()
+}
+
+function navigateTo(url: string) {
+  uni.navigateTo({ url })
+}
+
+function fetchDistributionInfo() {
+  uni.showLoading({ title: '加载中' })
+  distribution().then((res) => {
+    if (res.data.result) {
+      distributionData.value = res.data.result
+    }
+    hideLoadingIfNeeded()
+  })
+}
 </script>
 
 <style lang="scss" scoped>
@@ -124,6 +103,5 @@ export default {
   justify-content: center;
   gap: 20rpx;
   width: 33%;
-  //   color: #fff;
 }
 </style>
diff --git a/pages/mine/distribution/join.vue b/pages/mine/distribution/join.vue
index 516dee1..a8b1d85 100644
--- a/pages/mine/distribution/join.vue
+++ b/pages/mine/distribution/join.vue
@@ -1,104 +1,127 @@
 <template>
-  <view class="wrapper">
+  <view class="wrapper" :style="themeStyle">
     <u-tabs
-      :list="list"
+      :list="stepList"
       :scrollable="false"
-      v-model:current="current"
+      v-model:current="currentStep"
       :lineColor="lightColor"
       :activeStyle="{ color: lightColor }"
     ></u-tabs>
 
-  
-
-    <!-- 推广人资料 -->
-    <view class="message">
-      <u-form :model="ruleForm" label-width="250rpx" ref="uForm">
-        <u-form-item label="会员昵称" prop="name">
-          <u-input v-model="ruleForm.name" />
-        </u-form-item>
-        <u-form-item label="账户类型" prop="name"> </u-form-item>
-        <u-form-item
-          label="收款人姓名"
-          placeholder="请输入收款人姓名"
-          prop="name"
-        >
-          <u-input v-model="ruleForm.name" />
-        </u-form-item>
-        <u-form-item
-          label="收款账号"
-          placeholder="请输入收款人账号"
-          prop="name"
-        >
-          <u-input v-model="ruleForm.name" />
-        </u-form-item>
-        <u-form-item
-          label="银行名称"
-          placeholder="请输入开户银行支行名称"
-          prop="name"
-        >
-          <u-input v-model="ruleForm.name" />
-        </u-form-item>
-      </u-form>
-      <u-button  :customStyle="{'background':$lightColor,'color':'#fff' }"  @click="submit">提交</u-button>
+    <view class="feedBack-box">
+      <up-form
+        :model="formData"
+        label-position="top"
+        ref="uFormRef"
+      >
+        <up-form-item label="会员昵称" prop="name">
+          <u-input
+            border="none"
+            class="field-input"
+            v-model="formData.name"
+            :custom-style="fieldInputStyle"
+          />
+        </up-form-item>
+        <up-form-item label="账户类型" prop="name"></up-form-item>
+        <up-form-item label="收款人姓名" prop="name">
+          <u-input
+            border="none"
+            class="field-input"
+            v-model="formData.name"
+            placeholder="请输入收款人姓名"
+            :custom-style="fieldInputStyle"
+          />
+        </up-form-item>
+        <up-form-item label="收款账号" prop="name">
+          <u-input
+            border="none"
+            class="field-input"
+            v-model="formData.name"
+            placeholder="请输入收款人账号"
+            :custom-style="fieldInputStyle"
+          />
+        </up-form-item>
+        <up-form-item label="银行名称" prop="name">
+          <u-input
+            border="none"
+            class="field-input"
+            v-model="formData.name"
+            placeholder="请输入开户银行支行名称"
+            :custom-style="fieldInputStyle"
+          />
+        </up-form-item>
+      </up-form>
     </view>
+
+    <view class="submit" @click="submitForm">提交</view>
   </view>
 </template>
-<script>
-export default {
-  components: {},
-  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
-  onReady() {
-    this.$refs.uForm.setRules(this.rules);
-  },
-  data() {
-    return {
-      current:0,
-      lightColor: this.$lightColor,
-      list: [
-        {
-          name: "推广人资料",
-        },
-        {
-          name: "平台审核",
-        },
-        {
-          name: "完成",
-        },
-      ],
-      ruleForm: {
-        name: "",
-        radio: "",
-      },
-      rules: {
-        name: [
-          {
-            required: true,
-            message: "请输入姓名",
-            // 可以单个或者同时写两个触发验证方式
-            trigger: "blur",
-          },
-        ],
-      },
-    };
-  },
-};
+
+<script setup lang="ts">
+import { ref, reactive, computed } from 'vue'
+import { onReady } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import { getThemeStyle } from '@/utils/theme'
+import { fieldInputStyle } from '@/utils/form-style.js'
+
+const store = useStore()
+
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
+const lightColor = computed(() => store.getters.lightColor)
+const currentStep = ref(0)
+const uFormRef = ref<any>(null)
+
+const stepList = [
+  { name: '推广人资料' },
+  { name: '平台审核' },
+  { name: '完成' },
+]
+
+const formData = reactive({
+  name: '',
+  radio: '',
+})
+
+const rules = {
+  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
+}
+
+onReady(() => {
+  uFormRef.value?.setRules(rules)
+})
+
+function submitForm() {
+  uFormRef.value?.validate().catch(() => {
+    uni.showToast({ title: '请填写有效信息', icon: 'none' })
+  })
+}
 </script>
-<style lang="scss" scoped>
-.menu {
-  height: 88rpx;
-  line-height: 88rpx;
-  background: $main-color;
-  display: flex;
-  > .menu-item {
-    flex: 1;
-    text-align: center;
-    color: $light-color;
-  }
-}
-.active {
-  color: #fff !important;
-}
-.message {
-  padding: 0 32rpx;
+
+<style lang="scss">
+page {
+  background: #f8f8f8;
+}
+</style>
+
+<style lang="scss" scoped>
+@import '@/pages/passport/entry/seller/entry-form.scss';
+
+.wrapper {
+  box-sizing: border-box;
+  min-height: 100vh;
+  padding: 20rpx 24rpx 40rpx;
+  background: #f8f8f8;
+  @include seller-entry-form;
+}
+
+.feedBack-box {
+  background: #fff;
+  border-radius: 20rpx;
+  padding: 32rpx;
+  margin-top: 20rpx;
+}
+
+.submit {
+  @include seller-entry-submit;
 }
 </style>
diff --git a/pages/mine/distribution/list.vue b/pages/mine/distribution/list.vue
index 8bb4077..2548251 100644
--- a/pages/mine/distribution/list.vue
+++ b/pages/mine/distribution/list.vue
@@ -58,44 +58,44 @@
 
     <!-- 导航栏 -->
     <view class="nav">
-      <view class="nav-item" @click="handleMyGoods(true)" :class="{ checked: params.checked }">已选择</view>
-      <view class="nav-item" @click="handleMyGoods(false)" :class="{ checked: !params.checked }">未选择</view>
+      <view class="nav-item" @click="toggleGoodsTab(true)" :class="{ checked: queryParams.checked }">已选择</view>
+      <view class="nav-item" @click="toggleGoodsTab(false)" :class="{ checked: !queryParams.checked }">未选择</view>
 
       <!-- <view class="nav-item" @click="popup = !popup">筛选</view> -->
     </view>
     <!-- 商品列表 -->
 
     <view class="goods-list">
-      <scroll-view class="body-view" scroll-y @scrolltolower="renderDate">
+      <scroll-view class="body-view" scroll-y @scrolltolower="loadMore">
         <block v-for="(item, index) in goodsList" :key="item.id">
-          <u-swipe-action v-if="params.checked" class="distribution-swipe">
+          <u-swipe-action v-if="queryParams.checked" class="distribution-swipe">
             <u-swipe-action-item
               :show="item.___selected"
-              @open="openAction(item)"
+              @open="openSwipeAction(item)"
               :name="index"
-              :options="options"
-              @click="changeActionTab(item)"
+              :options="swipeOptions"
+              @click="confirmUnbindPrompt(item)"
             >
               <view class="goods-item">
-                <view class="goods-item-img" @click="handleNavgationGoods(item)">
+                <view class="goods-item-img" @click="navigateToGoods(item)">
                   <u-image width="176rpx" height="176rpx" :src="item.thumbnail"></u-image>
                 </view>
                 <view class="goods-item-desc">
-                  <view class="-item-title" @click="handleNavgationGoods(item)">
+                  <view class="-item-title" @click="navigateToGoods(item)">
                     {{ item.goodsName }}
                   </view>
-                  <view class="-item-price" @click="handleNavgationGoods(item)">
+                  <view class="-item-price" @click="navigateToGoods(item)">
                     佣金:
                     <span> ￥{{ unitPrice(item.commission) }}</span>
                   </view>
                   <view class="-item-bottom">
-                    <view class="-item-bootom-money" @click="handleNavgationGoods(item)">
+                    <view class="-item-bootom-money" @click="navigateToGoods(item)">
                       <view class="-item-yj">
                         <span>￥{{ unitPrice(item.price) }}</span>
                       </view>
                     </view>
                     <view>
-                      <view class="click" @click="handleLink(item)">分销商品</view>
+                      <view class="click" @click="shareDistributionGoods(item)">分销商品</view>
                     </view>
                   </view>
                 </view>
@@ -104,25 +104,25 @@
           </u-swipe-action>
 
           <view v-else class="goods-item">
-            <view class="goods-item-img" @click="handleNavgationGoods(item)">
+            <view class="goods-item-img" @click="navigateToGoods(item)">
               <u-image width="176rpx" height="176rpx" :src="item.thumbnail"></u-image>
             </view>
             <view class="goods-item-desc">
-              <view class="-item-title" @click="handleNavgationGoods(item)">
+              <view class="-item-title" @click="navigateToGoods(item)">
                 {{ item.goodsName }}
               </view>
-              <view class="-item-price" @click="handleNavgationGoods(item)">
+              <view class="-item-price" @click="navigateToGoods(item)">
                 佣金:
                 <span> ￥{{ unitPrice(item.commission) }}</span>
               </view>
               <view class="-item-bottom">
-                <view class="-item-bootom-money" @click="handleNavgationGoods(item)">
+                <view class="-item-bootom-money" @click="navigateToGoods(item)">
                   <view class="-item-yj">
                     <span>￥{{ unitPrice(item.price) }}</span>
                   </view>
                 </view>
                 <view>
-                  <view class="click" @click="handleClickGoods(item)">立即选取</view>
+                  <view class="click" @click="selectGoods(item)">立即选取</view>
                 </view>
               </view>
             </view>
@@ -136,210 +136,164 @@
       </view>
     </view>
     <canvas class="canvas-hide" canvas-id="qrcode" />
-    <drawCanvas ref="drawCanvas" v-if="showFlag" :res="res" />
-    <u-modal v-model:show="deleteShow" :confirm-style="{'color':lightColor}" @confirm="delectConfirm" show-cancel-button :content="deleteContent" :async-close="true"></u-modal>
+    <drawCanvas ref="drawCanvasRef" v-if="showPoster" :res="posterData" />
+    <u-modal
+      v-model:show="showUnbindModal"
+      :confirm-style="{ color: lightColor }"
+      @confirm="confirmUnbind"
+      show-cancel-button
+      :content="unbindModalContent"
+      :async-close="true"
+    ></u-modal>
 
   </view>
 </template>
-<script>
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { onLoad, onShow } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
 import {
   distributionGoods,
   checkedDistributionGoods,
   getMpCode,
-} from "@/api/goods";
+} from '@/api/goods'
+import drawCanvas from '@/components/m-canvas'
+import { unitPrice } from '@/utils/filters.js'
 
-import drawCanvas from "@/components/m-canvas";
-export default {
-  data() {
-    return {
-      lightColor: this.$lightColor,
-      deleteContent: "解绑该商品？", //删除显示的信息
-      // 商品栏右侧滑动按钮
-      options: [
-        {
-          text: "解绑",
-          style: {
-            backgroundColor: this.$lightColor, //高亮颜色
-          },
-        },
-      ],
-      showFlag: false, //分销分享开关
-      empty: false,
-      popup: false, //弹出层开关
-      active_color: this.$mainColor,
-      current: 0,
-      params: {
-        pageNumber: 1,
-        pageSize: 10,
-        checked: true,
-      },
-      goodsList: [],
-
-      // 分销分享 实例
-      res: {
-        container: {
-          width: 600,
-          height: 960,
-          background: "#fff",
-          title: "分享背景",
-        },
-        // 分销分享
-        bottom: {
-          img: "",
-          code: "",
-          price: 0,
-        },
-      },
-
-      routers: "",
-      deleteShow: false, //删除模态框
-      goodsVal: false, //分销商铺信息
-    };
+const store = useStore()
+const lightColor = computed(() => store.getters.lightColor)
+const swipeOptions = computed(() => [
+  {
+    text: '解绑',
+    style: { backgroundColor: lightColor.value },
   },
-  components: {
-    drawCanvas,
+])
+
+const unbindModalContent = '解绑该商品？'
+const showPoster = ref(false)
+const showUnbindModal = ref(false)
+const routeQuery = ref<Record<string, string>>({})
+const selectedGoods = ref<any>(null)
+const drawCanvasRef = ref<any>(null)
+
+const queryParams = ref({
+  pageNumber: 1,
+  pageSize: 10,
+  checked: true,
+})
+const goodsList = ref<any[]>([])
+
+const posterData = ref({
+  container: {
+    width: 600,
+    height: 960,
+    background: '#fff',
+    title: '分享背景',
   },
-  onLoad(options) {
-    this.routers = options;
+  bottom: {
+    img: '',
+    code: '',
+    price: 0,
+    desc: '',
   },
-  watch: {},
-  onShow() {
-    this.goodsList = [];
-    this.init();
-  },
-  methods: {
-    /**
-     * 滑动删除
-     */
-    changeActionTab(val) {
-      this.deleteShow = true;
-      this.goodsVal = val;
-    },
+})
 
-    /**
-     * 点击解绑商品
-     */
-    delectConfirm() {
-      checkedDistributionGoods({ id: this.goodsVal.id, checked: false }).then(
-        (res) => {
-          if (res.data.success) {
-            uni.showToast({
-              title: "此商品解绑成功",
-              duration: 2000,
-            });
-            this.deleteShow = false;
-            this.goodsList = [];
-            this.init();
-          }
-        }
-      );
-    },
+onLoad((options) => {
+  routeQuery.value = options || {}
+})
 
-    /**
-     * 左滑打开删除
-     */
-    openAction(val) {
-      this.goodsList.forEach((item) => {
-        item["___selected"] = false;
-      });
-      val["___selected"] = true;
-    },
+onShow(() => {
+  goodsList.value = []
+  queryParams.value.pageNumber = 1
+  fetchGoodsList()
+})
 
-    /**
-     * 查看图片
-     */
-    handleNavgationGoods(val) {
-      uni.navigateTo({
-        url: `/pages/product/goods?id=${val.skuId}&goodsId=${val.goodsId}`,
-      });
-    },
+function confirmUnbindPrompt(item: any) {
+  showUnbindModal.value = true
+  selectedGoods.value = item
+}
 
-    async handleLink(goods) {
-      uni.showToast({
-        title: "请请按住保存图片",
-        duration: 2000,
-        icon: "none",
-      });
-      let page = `pages/product/goods`;
-      let scene = `${goods.skuId},${goods.goodsId},${this.routers.id}`;
-      let result = await getMpCode({ page, scene });
-      if (result.data.success) {
-        let callback = result.data.result;
-        this.res.container.title = `${goods.goodsName}`;
-        this.res.bottom.code = `data:image/png;base64,${callback}`;
-        this.res.bottom.price = this.unitPrice(
-          goods.price,
-          "￥"
-        );
-        this.res.bottom.desc = `${goods.goodsName}`;
-        this.res.bottom.img = `${goods.thumbnail}`;
+function confirmUnbind() {
+  checkedDistributionGoods({ id: selectedGoods.value.id, checked: false }).then((res) => {
+    if (res.data.success) {
+      uni.showToast({ title: '此商品解绑成功', duration: 2000 })
+      showUnbindModal.value = false
+      goodsList.value = []
+      queryParams.value.pageNumber = 1
+      fetchGoodsList()
+    }
+  })
+}
 
-        if (this.showFlag) {
-          this.$refs.drawCanvas.init();
-        }
-        this.showFlag = true;
-      } else {
-        uni.showToast({
-          title: `制作二维码失败！请稍后重试`,
-          duration: 2000,
-          icon: "none",
-        });
-      }
-    },
+function openSwipeAction(item: any) {
+  goodsList.value.forEach((row) => {
+    row.___selected = false
+  })
+  item.___selected = true
+}
 
-    change(index) {
-      this.current = index;
-    },
-    // 点击我的选品库
-    handleMyGoods(flag) {
-      this.goodsList = [];
-      this.params.checked = flag;
-      this.init();
-    },
+function navigateToGoods(item: any) {
+  uni.navigateTo({
+    url: `/pages/product/goods?id=${item.skuId}&goodsId=${item.goodsId}`,
+  })
+}
 
-    // 选择商品
-    handleClickGoods(val) {
-      checkedDistributionGoods({ id: val.id, checked: true }).then((res) => {
-        if (res.data.success) {
-          uni.showToast({
-            title: "已添加到我的选品库",
-            duration: 2000,
-            icon: "none",
-          });
+async function shareDistributionGoods(goods: any) {
+  uni.showToast({ title: '请请按住保存图片', duration: 2000, icon: 'none' })
+  const page = 'pages/product/goods'
+  const scene = `${goods.skuId},${goods.goodsId},${routeQuery.value.id}`
+  const result = await getMpCode({ page, scene })
+  if (result.data.success) {
+    const callback = result.data.result
+    posterData.value.container.title = `${goods.goodsName}`
+    posterData.value.bottom.code = `data:image/png;base64,${callback}`
+    posterData.value.bottom.price = unitPrice(goods.price, '￥')
+    posterData.value.bottom.desc = `${goods.goodsName}`
+    posterData.value.bottom.img = `${goods.thumbnail}`
+    if (showPoster.value) {
+      drawCanvasRef.value?.init()
+    }
+    showPoster.value = true
+  } else {
+    uni.showToast({ title: '制作二维码失败！请稍后重试', duration: 2000, icon: 'none' })
+  }
+}
 
-          setTimeout(() => {
-            this.goodsList = [];
-            this.init();
-          }, 500);
-        }
-      });
-    },
+function toggleGoodsTab(isSelected: boolean) {
+  goodsList.value = []
+  queryParams.value.checked = isSelected
+  queryParams.value.pageNumber = 1
+  fetchGoodsList()
+}
 
-    init() {
-      distributionGoods(this.params).then((res) => {
-        if (res.data.success && res.data.result.records.length >= 1) {
-          res.data.result.records.forEach((item) => {
-            item["___selected"] = false;
-          });
-          this.goodsList.push(...res.data.result.records);
-        }
-        if (this.goodsList.length === 0) {
-          this.empty = true;
-        }
-      });
-    },
+function selectGoods(item: any) {
+  checkedDistributionGoods({ id: item.id, checked: true }).then((res) => {
+    if (res.data.success) {
+      uni.showToast({ title: '已添加到我的选品库', duration: 2000, icon: 'none' })
+      setTimeout(() => {
+        goodsList.value = []
+        queryParams.value.pageNumber = 1
+        fetchGoodsList()
+      }, 500)
+    }
+  })
+}
 
-    /**
-     * 底部加载数据
-     */
-    renderDate() {
+function fetchGoodsList() {
+  distributionGoods(queryParams.value).then((res) => {
+    if (res.data.success && res.data.result.records.length >= 1) {
+      res.data.result.records.forEach((item: any) => {
+        item.___selected = false
+      })
+      goodsList.value.push(...res.data.result.records)
+    }
+  })
+}
 
-      this.params.pageNumber += 1;
-      this.init();
-    },
-
-  },
-};
+function loadMore() {
+  queryParams.value.pageNumber += 1
+  fetchGoodsList()
+}
 </script>
 <style lang="scss" scoped>
 
diff --git a/pages/mine/distribution/withdrawal.vue b/pages/mine/distribution/withdrawal.vue
index 8aa02ac..bcfabfb 100644
--- a/pages/mine/distribution/withdrawal.vue
+++ b/pages/mine/distribution/withdrawal.vue
@@ -1,129 +1,182 @@
 <template>
-  <view>
-    <view class="withdrawal-list">
-      <view class="title">提现金额</view>
-      <view class="content">
-        <view class="price">
-          <span> ￥</span>
-          <u-input v-model="price" placeholder="" type="number" />
-        </view>
-
-        <view class="all">
-          <view @click="handleAll" :style="{ color: $mainColor }">全部</view>
-          <view style="font-size: 24rpx; color: #999"
-            >可提现金额<span>{{unitPrice(distributionData.canRebate) }}</span
-            >元</view
-          >
+  <view class="wrapper" :style="themeStyle">
+    <view class="feedBack-box">
+      <view class="box-title">提现金额</view>
+      <view class="amount-row">
+        <text class="currency">￥</text>
+        <u-input
+          v-model="price"
+          type="digit"
+          border="none"
+          placeholder="请输入提现金额"
+          class="amount-input"
+        />
+      </view>
+      <view class="amount-extra">
+        <view class="all-btn" @click="fillAllAmount">全部</view>
+        <view class="balance-tip">
+          可提现金额
+          <text class="balance-value">{{ unitPrice(distributionData.canRebate) }}</text>
+          元
         </view>
       </view>
     </view>
 
-    <view class="submit" @click="cashd">提现</view>
+    <view class="submit" @click="submitWithdraw">提现</view>
   </view>
 </template>
-<script>
-import { distribution, cash } from "@/api/goods";
-export default {
-  data() {
-    return {
-      price: 0,
-      distributionData: "",
-    };
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    cashd() {
-      this.price = this.price + "";
-    
 
-      if (this.$u.test.amount(parseInt(this.price))) {
-        cash({ price: this.price }).then((res) => {
-          if(res.data.success){
-            uni.showToast({
-              title: '提现成功!',
-              duration: 2000,
-              icon:"none"
-            });
-          setTimeout(()=>{
-            uni.navigateBack({
-               delta: 1
-            });
-          },1000)
-          }
-        });
-      } else {
-        uni.showToast({
-          title: "请输入正确金额",
-          duration: 2000,
-          icon: "none",
-        });
+<script setup lang="ts">
+import { ref, computed, getCurrentInstance, onMounted } from 'vue'
+import { useStore } from '@/store'
+import { distribution, cash } from '@/api/goods'
+import { unitPrice } from '@/utils/filters.js'
+import { getThemeStyle } from '@/utils/theme'
+
+const store = useStore()
+const { proxy } = getCurrentInstance()!
+
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
+const price = ref('')
+const distributionData = ref<Record<string, any>>({})
+
+onMounted(() => {
+  fetchDistributionInfo()
+})
+
+function hideLoadingIfNeeded() {
+  if (store.state.isShowToast) uni.hideLoading()
+}
+
+function fetchDistributionInfo() {
+  uni.showLoading({ title: '加载中' })
+  distribution().then((res) => {
+    if (res.data.result) {
+      distributionData.value = res.data.result
+    }
+    hideLoadingIfNeeded()
+  })
+}
+
+function submitWithdraw() {
+  const amount = String(price.value ?? '')
+  if (proxy.$u.test.amount(parseInt(amount))) {
+    cash({ price: amount }).then((res) => {
+      if (res.data.success) {
+        uni.showToast({ title: '提现成功!', duration: 2000, icon: 'none' })
+        setTimeout(() => {
+          uni.navigateBack({ delta: 1 })
+        }, 1000)
       }
-    },
-    handleAll() {
-      this.price = this.distributionData.canRebate;
-    },
-    /**
-     * 初始化推广商品
-     */
-    init() {
-      uni.showLoading({
-        title: "加载中",
-      });
-      distribution().then((res) => {
-        if (res.data.result) {
-          this.distributionData = res.data.result;
-        }
-         if (this.$store.state.isShowToast){ uni.hideLoading() };
-      });
-    },
-  },
-};
+    })
+  } else {
+    uni.showToast({ title: '请输入正确金额', duration: 2000, icon: 'none' })
+  }
+}
+
+function fillAllAmount() {
+  price.value = distributionData.value.canRebate ?? ''
+}
 </script>
-<style lang="scss" scoped>
-::v-deep .u-input__input,
-.u-input {
-  font-size: 80rpx !important;
-  height: 102rpx !important;
- 
-}
-::v-deep .u-input__input{
-  height: 100%;
-   font-size: 80rpx;
-}
-.content {
-  display: flex;
-  > .price {
-    width: 60%;
-    margin: 20rpx 0;
-    font-size: 80rpx;
-    display: flex;
-  }
-  > .all {
-    justify-content: center;
-    width: 40%;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-  }
-}
-.withdrawal-list {
-  margin: 20rpx 0;
-  background: #fff;
-  padding: 16rpx 32rpx;
-}
-.title {
-  font-size: 35rpx;
-}
-.submit {
-  margin: 80rpx auto;
-  width: 94%;
-  background: $light-color;
-  height: 90rpx;
-  color: #fff;
-  border-radius: 10rpx;
-  text-align: center;
-  line-height: 90rpx;
+
+<style lang="scss">
+page {
+  background: #f8f8f8;
+}
+</style>
+
+<style lang="scss" scoped>
+@import '@/pages/passport/entry/seller/entry-form.scss';
+
+.wrapper {
+  box-sizing: border-box;
+  min-height: 100vh;
+  padding: 20rpx 24rpx 40rpx;
+  background: #f8f8f8;
+}
+
+.feedBack-box {
+  background: #fff;
+  border-radius: 20rpx;
+  padding: 32rpx;
+}
+
+.box-title {
+  font-size: 30rpx;
+  font-weight: 600;
+  color: #333;
+  line-height: 1.4;
+}
+
+.amount-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-top: 24rpx;
+  padding: 16rpx 24rpx;
+  background: #fafafa;
+  border-radius: 12rpx;
+}
+
+.currency {
+  flex-shrink: 0;
+  margin-right: 16rpx;
+  font-size: 56rpx;
+  font-weight: 600;
+  line-height: 1;
+  color: #333;
+}
+
+.amount-input {
+  flex: 1;
+  min-width: 0;
+}
+
+:deep(.amount-input .u-input) {
+  padding: 0 !important;
+}
+
+:deep(.amount-input .u-input__content) {
+  background: transparent !important;
+}
+
+:deep(.amount-input .u-input__content__field-wrapper__field) {
+  height: 72rpx !important;
+  min-height: 72rpx !important;
+  font-size: 56rpx !important;
+  font-weight: 600 !important;
+  color: #333 !important;
+}
+
+:deep(.amount-input .u-input__content__field-wrapper__field--placeholder) {
+  font-size: 32rpx !important;
+  font-weight: 400 !important;
+  color: #c0c4cc !important;
+}
+
+.amount-extra {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 24rpx;
+}
+
+.all-btn {
+  font-size: 28rpx;
+  color: var(--theme-light, #ff6b35);
+}
+
+.balance-tip {
+  font-size: 24rpx;
+  color: #999;
+}
+
+.balance-value {
+  margin: 0 4rpx;
+  color: #333;
+}
+
+.submit {
+  @include seller-entry-submit;
 }
 </style>
diff --git a/pages/mine/help/tips.vue b/pages/mine/help/tips.vue
index 79ff8c9..bb026e1 100644
--- a/pages/mine/help/tips.vue
+++ b/pages/mine/help/tips.vue
@@ -1,62 +1,42 @@
 <template>
   <div class="wrapper">
-    <u-parse :lazy-load="true" :selectable="true" :content="res.content" v-if="res"></u-parse>
-
+    <u-parse :lazy-load="true" :selectable="true" :content="article.content" v-if="article"></u-parse>
   </div>
 </template>
-<script>
-import { getArticleDetailByType } from "@/api/article";
-export default {
-  data() {
-    return {
-      res: "",
-      way: {
-        USER_AGREEMENT: {
-          title: "服务协议",
-          type: "USER_AGREEMENT",
-        },
-        PRIVACY_POLICY: {
-          title: "隐私政策",
-          type: "PRIVACY_POLICY",
-        },
-        LICENSE_INFORMATION: {
-          title: "证照信息",
-          type: "LICENSE_INFORMATION",
-        },
-        ABOUT: {
-          title: "关于我们",
-          type: "ABOUT",
-        },
-        STORE_REGISTER: {
-          title: "店铺入驻协议",
-          type: "STORE_REGISTER",
-        },
-      },
-    };
-  },
-  mounted() {},
-  onLoad(option) {
-    console.log(this.way)
-    uni.setNavigationBarTitle({
-      title: this.way[option.type].title,
-    });
-    this.init(option);
-  },
 
-  methods: {
-    init(option) {
-      getArticleDetailByType(this.way[option.type].type).then((res) => {
-        if (res.data.success) {
-          this.res = res.data.result;
-          console.log(res)
-        }
-      });
-    },
-  },
-};
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { getArticleDetailByType } from '@/api/article'
+
+const ARTICLE_TYPE_MAP: Record<string, { title: string; type: string }> = {
+  USER_AGREEMENT: { title: '服务协议', type: 'USER_AGREEMENT' },
+  PRIVACY_POLICY: { title: '隐私政策', type: 'PRIVACY_POLICY' },
+  LICENSE_INFORMATION: { title: '证照信息', type: 'LICENSE_INFORMATION' },
+  ABOUT: { title: '关于我们', type: 'ABOUT' },
+  STORE_REGISTER: { title: '店铺入驻协议', type: 'STORE_REGISTER' },
+}
+
+const article = ref<any>(null)
+
+onLoad((option) => {
+  const meta = ARTICLE_TYPE_MAP[option.type]
+  if (!meta) return
+  uni.setNavigationBarTitle({ title: meta.title })
+  fetchArticle(meta.type)
+})
+
+function fetchArticle(type: string) {
+  getArticleDetailByType(type).then((res) => {
+    if (res.data.success) {
+      article.value = res.data.result
+    }
+  })
+}
 </script>
+
 <style lang="scss" scoped>
 .wrapper {
   padding: 16rpx;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/pages/mine/im/index.vue b/pages/mine/im/index.vue
index b0e992a..c865f9f 100644
--- a/pages/mine/im/index.vue
+++ b/pages/mine/im/index.vue
@@ -196,515 +196,356 @@
   </view>
 </template>
 
-<script>
-// rpx和px的比率
-var l
-// 可用窗口高度
-var wh
-// 顶部空盒子的高度
-var mgUpHeight
+<script setup lang="ts">
+import { ref, nextTick, getCurrentInstance } from 'vue'
 import {
-  getTalkMessage,
+  onLoad,
+  onHide,
+  onUnload,
+  onPullDownRefresh,
+  onPageScroll,
+} from '@dcloudio/uni-app'
+import {
+  getTalkMessage as fetchTalkMessageApi,
   getTalkByUser,
-  jumpObtain
-} from "@/api/im.js";
-import SocketService from "@/utils/socket_service.js";
-import storage from "@/utils/storage.js";
-import {
-  beautifyTime
-} from "@/utils/filters.js"
+  jumpObtain,
+} from '@/api/im.js'
+import SocketService from '@/utils/socket_service.js'
+import storage from '@/utils/storage.js'
+import { beautifyTime, unitPrice } from '@/utils/filters.js'
 import config from '@/config/config.js'
-import { textReplaceEmoji, emojistwo } from '@/utils/emojis.js';
-export default {
-  // 页面卸载后清除imGoodId
-  onUnload () {
-    // #ifdef H5
-    uni.setStorageSync("imGoodId", '');
-    // #endif
+import { textReplaceEmoji, emojistwo } from '@/utils/emojis.js'
 
-    if (this.socketOpen == true) {
-      uni.closeSocket();
-    }
-  },
-  onLoad (options) {
-    // 没有goodsid则不显示 发送商品弹窗
-    this.showHideModel = options.goodsid
-    // 发送后刷新页面不显示 发送商品弹窗 local里面imGoodId不为空显示
-    // #ifdef H5
-    this.localImGoodsId = uni.getStorageSync("imGoodId");
-    // #endif
-    this.resolve = options
-    // 请求商品信息
-    if (this.resolve.goodsid) {
-      this.commodityDetails()
-    }
- 
-    var query = uni.getSystemInfoSync()
+// rpx和px的比率
+let l: number
+// 可用窗口高度
+let wh: number
+// 顶部空盒子的高度
+let mgUpHeight: number
 
-    l = query.screenWidth / 750
-    wh = query.windowHeight
-    this.scrollHeight = (query.windowHeight - 44) + "px"
-    this.user = storage.getUserInfo()
-    this.toUser = storage.getTalkToUser()
+const { proxy } = getCurrentInstance()!
 
-    if (options.talkId) {
-      this.params.talkId = options.talkId;
-      this.getTalkMessage()
-    } else {
-      this.getTalk(options.userId)
+const socketOpen = ref(false)
+const showHideModel = ref<string | undefined>(undefined)
+const localImGoodsId = ref('')
+const showHide = ref(true)
+const anData = ref<Record<string, any>>({})
+const animationData = ref<Record<string, any>>({})
+const msgList = ref<any[]>([])
+const oldHeight = ref(0)
+const params = ref({
+  talkId: '',
+  pageSize: 10,
+  pageNumber: 1,
+})
+const msg = ref('')
+const go = ref(0)
+const user = ref<Record<string, any>>({})
+const toUser = ref<Record<string, any>>({})
+const scrollHeight = ref(0)
+const ws = new SocketService()
+const resolve = ref<Record<string, any>>({})
+const goodListData = ref<Record<string, any>>({})
+const reconnectCount = ref(0)
+const inputHeight = ref(0)
+const isShow = ref(false)
 
-    }
-
-    // this.ws.connect();
-    this.socket();
-  },
-
-
-
-
-  // 页面隐藏
-  onHide () {
-    uni.closeSocket();
-  },
-  onUnload () {
-    uni.closeSocket();
-  },
-  onPullDownRefresh () {
-    this.params.pageNumber = this.params.pageNumber + 1
-    this.getTalkMessage()
-    setTimeout(function () {
-      uni.stopPullDownRefresh();
-    }, 1000);
-  },
-
-  data () {
-    return {
-      textReplaceEmoji,
-      emojistwo,
-      socketOpen: false, //是否连接
-      storage,
-      fixed: 'fixed',
-      bottom: '50px',
-      width: '100%',
-      showHideModel: undefined,
-      localImGoodsId: '',
-      showHide: true,
-      msgLoad: false,
-      anData: {},
-      animationData: {},
-      msgList: [],
-      oldHeight: 0,
-      params: { //搜索条件
-        talkId: '',
-        pageSize: 10,
-        pageNumber: 1,
-      },
-      goToIndex: 0, // 前往位置
-      msg: "",
-      go: 0,
-      newMessageNum: 0,
-      user: {},
-      toUser: {},
-      scrollHeight: 0,
-      ws: new SocketService(),
-      resolve: {},
-      goodListData: {},
-      count: 0, //判断socket断开连接请求次数
-      inputHeight:0,
-      isShow:false,
-    
-   
-    }
-  },
-  onPageScroll (e) {
- 
-    // #ifdef APP-PLUS
-    uni.hideKeyboard()
-    this.isShow = false
-    // #endif
-  },
-  methods: {
-    navigateToBottom(){
-      // #ifdef H5
-      this.isShow = true
-      this.$refs.inputRef.focus()
-      // #endif
-
-      // #ifdef APP-PLUS
-      this.$nextTick(() => {
-        uni.pageScrollTo({
-          scrollTop: 5000000,
-          duration: 50,
-          success: () => {
-           setTimeout(() => { 
-            this.isShow = true
-           }, 200);
-          ;
-          },
-          fail: () => { },
-          complete: () => {}
-        });
-      });
-      // #endif
-      
-    },
-
-    eventHandle(){
-     
-      this.inputHeight = 0
-      this.isShow = false
-    },
-    inputBindFocus(e){
-       if (e.detail.height) {
-     
-       
-          // #ifdef APP-PLUS
-          // 判断是否是ios
-          if (uni.getSystemInfoSync().platform == 'ios') {
-            this.inputHeight = e.detail.height - 40 //这个高度就是软键盘的高度
-          }else{
-            this.inputHeight = e.detail.height
-          }
-         //  #endif
-        
-          // #ifndef APP-PLUS
-          this.inputHeight = e.detail.height //这个高度就是软键盘的高度
-          //  #endif
-       }
-    },
-    sendMessage () {
-      if (this.msg == "") {
-        return 0;
-      }
-      if (this.socketOpen == false) {
-        return
-      }
-      let msg = {
-        operation_type: "MESSAGE",
-        to: this.toUser.userId,
-        from: this.user.id,
-        message_type: "MESSAGE",
-        context: this.msg,
-        talk_id: this.params.talkId,
-      }
-      let data = JSON.stringify(msg);
-      uni.sendSocketMessage({
-        data: data,
-      });
-      this.msgList.push({
-        "text": this.msg,
-        "my": true,
-        "messageType": 'MESSAGE'
-      })
-      let type = 'down';
-      this.msgGo(type)
-      this.msg = ""
-    },
-    sendGoodsMessage () {
-      let msg = {
-        operation_type: "MESSAGE",
-        to: this.toUser.userId,
-        from: this.user.id,
-        message_type: "GOODS",
-        context: this.goodListData,
-        talk_id: this.params.talkId,
-      }
-      let data = JSON.stringify(msg);
-      uni.sendSocketMessage({
-        data: data
-      });
-      this.msgList.push({
-        "text": JSON.stringify(this.goodListData),
-        "my": true,
-        "messageType": 'GOODS'
-      })
-      this.showHide = false
-      // #ifdef H5
-      uni.setStorageSync("imGoodId", 1111111);
-      // #endif
-      this.$nextTick(() => {
-        uni.pageScrollTo({
-          scrollTop: 2000000,
-          duration: 300
-        });
-      })
-    },
-    socket () {
-      var _this = this;
-      uni.closeSocket();
-      this.socketOpen = false;
-      try {
-        //WebSocket的地址
-        var url = config.baseWsUrl + '/' + storage.getAccessToken();
-        // 连接
-        uni.connectSocket({
-          url: url,
-        });
-        // 监听WebSocket连接已打开
-        uni.onSocketOpen(function (res) {
-          _this.socketOpen = true;
-        });
-        if (!this.socketOpen) {
-          // 监听连接失败
-
-          uni.onSocketError(function (err) {
-            if (this.count < 3) {
-              if (err && err.code != 1000) {
-                _this.socketOpen = true;
-                setTimeout(() => {
-                  uni.connectSocket({
-                    url: url,
-                  });
-                }, 2000)
-              }
-            } else {
-              uni.closeSocket();
-            }
-            this.count++
-          });
-        }
-        // 监听收到信息
-        uni.onSocketMessage(function (res) {
-          res.data = JSON.parse(res.data)
-          console.log(res.data.result);
-          if (res.data.messageResultType == 'MESSAGE') {
-            _this.msgList.push(res.data.result)
-            console.log(_this.msgList)
-          }
-          console.log(res.data)
-          _this.msgGo()
-        })
-      } catch (e) {
-        uni.closeSocket();
-      }
-      // 监听是否断线，断线进行重新连接
-      uni.onSocketClose((res) => {
-        if (res.code != null && res.code != 1000) {
-          this.socket()
-        }
-      })
-    },
-    beautifyTime,
-    //订单详情
-    linkTosOrders (val) {
-      let order = JSON.parse(val)
-      uni.navigateTo({
-        url: '/pages/order/orderDetail?sn=' + order.sn,
-      });
-
-    },
-    // 跳转商品详情页
-    jumpGoodDesc (item) {
-      let info = JSON.parse(item.text)
-      uni.navigateTo({
-        url: `/pages/product/goods?id=${info.id}&goodsId=${info.goodsId}`,
-      });
-    },
-
-    //取消发送
-    cancelModel () {
-      this.showHide = false
-    },
-    // 请求商品详情
-    commodityDetails () {
-      jumpObtain(this.resolve.skuid, this.resolve.goodsid).then((res) => {
-        this.goodListData = res.data.result.data
-      })
-    },
-    // 切换输入法时移动输入框(按照官方的上推页面的原理应该会自动适应不同的键盘高度-->官方bug)
-    goPag (kh) {
-      this.retractBox(0, 250)
-      if (this.keyHeight != 0) {
-        if (kh - this.keyHeight > 0) {
-          this.retractBox(this.keyHeight - kh, 250)
-        }
-      }
-    },
-    // 移动顶部的空盒子
-    messageBoxMove (x, t) {
-      var animation = uni.createAnimation({
-        duration: t,
-        timingFunction: 'linear',
-      })
-      this.animation = animation
-      animation.height(x).step()
-      this.anData = animation.export()
-    },
-    // 保持消息体可见
-    msgGo (type) {
-      const query = uni.createSelectorQuery()
-      // 延时100ms保证是最新的高度
-      setTimeout(() => {
-        // 获取消息体高度
-        query.select('#msgList').boundingClientRect(data => {
-          // 如果超过scorll高度就滚动scorll
-          if (type == 'up') {
-            this.go = data.height - this.oldHeight
-          } else if (type == 'down') {
-            this.go = data.height - wh + 120
-          }
-          // if (this.oldHeight > 0) {
-          // 	this.go = data.height - this.oldHeight
-          // } else {
-          // 	// if (data.height - (wh - 32) > 0) {
-          // 	this.go = data.height - wh + 120
-          // }
-          // 保证键盘第一次拉起时消息体能保持可见
-          var moveY = wh - data.height
-          // 超出页面则缩回空盒子
-          if (moveY - mgUpHeight < 0) {
-            // 小于0则视为0
-            if (moveY < 0) {
-              this.messageBoxMove(0, 200)
-            } else {
-              // 否则缩回盒子对应的高度
-              this.messageBoxMove(moveY, 200)
-            }
-          }
-          uni.pageScrollTo({
-            scrollTop: this.go,
-            duration: 0
-          })
-          this.oldHeight = data.height
-        }).exec();
-      }, 100)
-    },
-    // 回答问题的业务逻辑
-    answer (id) {
-      // 这里应该传入问题的id,模拟就用index代替了
-
-    },
-    // 不建议输入框聚焦时操作此动画
-    ckAdd () {
-      if (!this.showTow) {
-        this.retractBox(-180, 350)
-      } else {
-        this.retractBox(0, 200)
-      }
-      this.showTow = !this.showTow
-    },
-    hideKey () {
-      uni.hideKeyboard()
-    },
-    // 拉起/收回附加栏
-    retractBox (x, t) {
-      var animation = uni.createAnimation({
-        duration: t,
-        timingFunction: 'ease',
-      })
-      this.animation = animation
-      animation.translateY(x).step()
-      this.animationData = animation.export()
-    },
-    async getTalkMessage () {
-      let type = '';
-      await getTalkMessage(this.params).then(res => {
-        if (res.data.success) {
-          if (this.msgList.length >= 10) {
-            this.msgList.unshift(...res.data.result)
-            type = 'up'
-          } else {
-            this.msgList.unshift(...res.data.result)
-            type = 'down'
-          }
-          this.msgList.forEach(item => {
-            if (item.fromUser === this.user.id) {
-              item.my = true
-            }
-          })
-        }
-      })
-      console.log(this.msgList);
-      this.msgGo(type)
-    },
-    // 上拉加载
-    touchMoreMessage (e) {
-      if (e.target.scrollTop == 0) {
-        this.params.pageNumber = this.params.pageNumber + 1
-        this.getTalkMessage()
-      }
-    },
-    async getTalk (userId) {
-      getTalkByUser(userId).then(res => {
-        if (res.data.success) {
-          this.toUser = res.data.result
-          this.params.talkId = res.data.result.id
-          this.getTalkMessage()
-        }
-      })
-    },
-    // 处理消息时间是否显示
-    compareTime (index, datetime) {
-      if (datetime == undefined) {
-        return false;
-      }
-      if (typeof datetime == "number") {
-        datetime = this.unixToDate(datetime, "yyyy-MM-dd hh:mm");
-      }
-
-      if (this.msgList[index].is_revoke == 1) {
-        return false;
-      }
-      if (datetime) {
-        datetime = datetime.replace(/-/g, "/");
-      }
-
-      let time = Math.floor(Date.parse(datetime) / 1000);
-      let currTime = Math.floor(new Date().getTime() / 1000);
-
-      // 当前时间5分钟内时间不显示
-      if (currTime - time < 300) return false;
-      // 判断是否是最后一条消息,最后一条消息默认显示时间
-      if (index == this.msgList.length - 1) {
-        return true;
-      }
-      let nextDate
-      if (this.msgList[index + 1] && this.msgList[index + 1].createTime) {
-        nextDate = this.msgList[index + 1].createTime.replace(/-/g, "/");
-        if (nextDate - datetime < 300) return false;
-      }
-
-      return !(
-        this.unixToDate(new Date(datetime), "{y}-{m}-{d} {h}:{i}") ==
-        this.unixToDate(new Date(nextDate), "{y}-{m}-{d} {h}:{i}")
-      );
-    },
-
-    /**
-     * 将unix时间戳转换为指定格式
-     * @param unix   时间戳【秒】
-     * @param format 转换格式
-     * @returns {*|string}
-     */
-    unixToDate (unix, format) {
-      if (!unix) return unix;
-      let _format = format || "yyyy-MM-dd hh:mm:ss";
-      const d = new Date(unix);
-      const o = {
-        "M+": d.getMonth() + 1,
-        "d+": d.getDate(),
-        "h+": d.getHours(),
-        "m+": d.getMinutes(),
-        "s+": d.getSeconds(),
-        "q+": Math.floor((d.getMonth() + 3) / 3),
-        S: d.getMilliseconds(),
-      };
-      if (/(y+)/.test(_format))
-        _format = _format.replace(
-          RegExp.$1,
-          (d.getFullYear() + "").substr(4 - RegExp.$1.length)
-        );
-      for (const k in o)
-        if (new RegExp("(" + k + ")").test(_format))
-          _format = _format.replace(
-            RegExp.$1,
-            RegExp.$1.length === 1 ?
-              o[k] :
-              ("00" + o[k]).substr(("" + o[k]).length)
-          );
-      return _format;
-    },
+onLoad((options: Record<string, string | undefined> = {}) => {
+  showHideModel.value = options.goodsid
+  // #ifdef H5
+  localImGoodsId.value = uni.getStorageSync('imGoodId')
+  // #endif
+  resolve.value = options
+  if (resolve.value.goodsid) {
+    commodityDetails()
   }
+
+  const query = uni.getSystemInfoSync()
+  l = query.screenWidth / 750
+  wh = query.windowHeight
+  scrollHeight.value = query.windowHeight - 44 + 'px'
+  user.value = storage.getUserInfo()
+  toUser.value = storage.getTalkToUser()
+
+  if (options.talkId) {
+    params.value.talkId = options.talkId
+    fetchTalkMessages()
+  } else {
+    getTalk(options.userId!)
+  }
+
+  socket()
+})
+
+onHide(() => {
+  uni.closeSocket()
+})
+
+onUnload(() => {
+  // #ifdef H5
+  uni.setStorageSync('imGoodId', '')
+  // #endif
+  uni.closeSocket()
+})
+
+onPullDownRefresh(() => {
+  params.value.pageNumber = params.value.pageNumber + 1
+  fetchTalkMessages()
+  setTimeout(() => {
+    uni.stopPullDownRefresh()
+  }, 1000)
+})
+
+onPageScroll(() => {
+  // #ifdef APP-PLUS
+  uni.hideKeyboard()
+  isShow.value = false
+  // #endif
+})
+
+function navigateToBottom() {
+  // #ifdef H5
+  isShow.value = true
+  ;(proxy as any).$refs.inputRef?.focus()
+  // #endif
+
+  // #ifdef APP-PLUS
+  nextTick(() => {
+    uni.pageScrollTo({
+      scrollTop: 5000000,
+      duration: 50,
+      success: () => {
+        setTimeout(() => {
+          isShow.value = true
+        }, 200)
+      },
+      fail: () => {},
+      complete: () => {},
+    })
+  })
+  // #endif
+}
+
+function eventHandle() {
+  inputHeight.value = 0
+  isShow.value = false
+}
+
+function inputBindFocus(e: any) {
+  if (e.detail.height) {
+    // #ifdef APP-PLUS
+    if (uni.getSystemInfoSync().platform == 'ios') {
+      inputHeight.value = e.detail.height - 40
+    } else {
+      inputHeight.value = e.detail.height
+    }
+    // #endif
+
+    // #ifndef APP-PLUS
+    inputHeight.value = e.detail.height
+    // #endif
+  }
+}
+
+function sendMessage() {
+  if (msg.value == '') {
+    return 0
+  }
+  if (socketOpen.value == false) {
+    return
+  }
+  const payload = {
+    operation_type: 'MESSAGE',
+    to: toUser.value.userId,
+    from: user.value.id,
+    message_type: 'MESSAGE',
+    context: msg.value,
+    talk_id: params.value.talkId,
+  }
+  const data = JSON.stringify(payload)
+  uni.sendSocketMessage({
+    data: data,
+  })
+  msgList.value.push({
+    text: msg.value,
+    my: true,
+    messageType: 'MESSAGE',
+  })
+  const type = 'down'
+  msgGo(type)
+  msg.value = ''
+}
+
+function sendGoodsMessage() {
+  const payload = {
+    operation_type: 'MESSAGE',
+    to: toUser.value.userId,
+    from: user.value.id,
+    message_type: 'GOODS',
+    context: goodListData.value,
+    talk_id: params.value.talkId,
+  }
+  const data = JSON.stringify(payload)
+  uni.sendSocketMessage({
+    data: data,
+  })
+  msgList.value.push({
+    text: JSON.stringify(goodListData.value),
+    my: true,
+    messageType: 'GOODS',
+  })
+  showHide.value = false
+  // #ifdef H5
+  uni.setStorageSync('imGoodId', 1111111)
+  // #endif
+  nextTick(() => {
+    uni.pageScrollTo({
+      scrollTop: 2000000,
+      duration: 300,
+    })
+  })
+}
+
+function socket() {
+  uni.closeSocket()
+  socketOpen.value = false
+  try {
+    const url = config.baseWsUrl + '/' + storage.getAccessToken()
+    uni.connectSocket({
+      url: url,
+    })
+    uni.onSocketOpen(function () {
+      socketOpen.value = true
+    })
+    if (!socketOpen.value) {
+      uni.onSocketError(function (err: any) {
+        if (reconnectCount.value < 3) {
+          if (err && err.code != 1000) {
+            socketOpen.value = true
+            setTimeout(() => {
+              uni.connectSocket({
+                url: url,
+              })
+            }, 2000)
+          }
+        } else {
+          uni.closeSocket()
+        }
+        reconnectCount.value++
+      })
+    }
+    uni.onSocketMessage(function (res) {
+      const data = JSON.parse(res.data as string)
+      console.log(data.result)
+      if (data.messageResultType == 'MESSAGE') {
+        msgList.value.push(data.result)
+        console.log(msgList.value)
+      }
+      console.log(data)
+      msgGo()
+    })
+  } catch (e) {
+    uni.closeSocket()
+  }
+  uni.onSocketClose((res) => {
+    if (res.code != null && res.code != 1000) {
+      socket()
+    }
+  })
+}
+
+function linkTosOrders(val: string) {
+  const order = JSON.parse(val)
+  uni.navigateTo({
+    url: '/pages/order/orderDetail?sn=' + order.sn,
+  })
+}
+
+function jumpGoodDesc(item: any) {
+  const info = JSON.parse(item.text)
+  uni.navigateTo({
+    url: `/pages/product/goods?id=${info.id}&goodsId=${info.goodsId}`,
+  })
+}
+
+function cancelModel() {
+  showHide.value = false
+}
+
+function commodityDetails() {
+  jumpObtain(resolve.value.skuid, resolve.value.goodsid).then((res) => {
+    goodListData.value = res.data.result.data
+  })
+}
+
+function messageBoxMove(x: number, t: number) {
+  const animation = uni.createAnimation({
+    duration: t,
+    timingFunction: 'linear',
+  })
+  animation.height(x).step()
+  anData.value = animation.export()
+}
+
+function msgGo(type?: string) {
+  const query = uni.createSelectorQuery()
+  setTimeout(() => {
+    query
+      .select('#msgList')
+      .boundingClientRect((data: any) => {
+        if (type == 'up') {
+          go.value = data.height - oldHeight.value
+        } else if (type == 'down') {
+          go.value = data.height - wh + 120
+        }
+        const moveY = wh - data.height
+        if (moveY - mgUpHeight < 0) {
+          if (moveY < 0) {
+            messageBoxMove(0, 200)
+          } else {
+            messageBoxMove(moveY, 200)
+          }
+        }
+        uni.pageScrollTo({
+          scrollTop: go.value,
+          duration: 0,
+        })
+        oldHeight.value = data.height
+      })
+      .exec()
+  }, 100)
+}
+
+async function fetchTalkMessages() {
+  let type = ''
+  await fetchTalkMessageApi(params.value).then((res) => {
+    if (res.data.success) {
+      if (msgList.value.length >= 10) {
+        msgList.value.unshift(...res.data.result)
+        type = 'up'
+      } else {
+        msgList.value.unshift(...res.data.result)
+        type = 'down'
+      }
+      msgList.value.forEach((item) => {
+        if (item.fromUser === user.value.id) {
+          item.my = true
+        }
+      })
+    }
+  })
+  console.log(msgList.value)
+  msgGo(type)
+}
+
+function getTalk(userId: string) {
+  getTalkByUser(userId).then((res) => {
+    if (res.data.success) {
+      toUser.value = res.data.result
+      params.value.talkId = res.data.result.id
+      fetchTalkMessages()
+    }
+  })
 }
 </script>
 
diff --git a/pages/mine/im/list.vue b/pages/mine/im/list.vue
index d1cb771..5de6a71 100644
--- a/pages/mine/im/list.vue
+++ b/pages/mine/im/list.vue
@@ -9,12 +9,12 @@
       :border="false"
       :auto-back="true"
     ></u-navbar>
-    <scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData(tabIndex)">
+    <scroll-view class="list-scroll-content" scroll-y @scrolltolower="fetchTalkList">
       
       <!-- 消息列表 -->
       <div class="iconBox">
         <view class="icon-list">
-          <view class="icon-item" @click="cleanUnread()">
+          <view class="icon-item" @click="clearUnreadMessages()">
             <div class="bag bag1">
               <u-icon name="trash" size="50" color="#fff"></u-icon>
             </div>
@@ -28,7 +28,7 @@
           </view>
         </view>
       </div>
-      <u-search class="nav-search" v-model="userName" clearabled @change="userTalkList()" placeholder="搜索用户"
+      <u-search class="nav-search" v-model="userName" clearabled @change="fetchTalkList()" placeholder="搜索用户"
         :show-action="false"></u-search>
       <view class="talk-view" :key="index" v-for="(item, index) in talkList">
         <view>
@@ -65,85 +65,80 @@
   </view>
 </template>
 
-<script>
-import { getTalkList, clearmeaager } from "@/api/im.js";
-import storage from "@/utils/storage.js";
-import { beautifyTime } from "@/utils/filters.js"
-export default {
-  data () {
-    return {
-      storage,
-      count: {
-        loadStatus: "more",
-      },
-      talkList: [], //聊天列表
-      userName: '',
-      pointData: {}, //累计获取 未输入 集合
-    };
-  },
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onShow, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import { getTalkList, clearmeaager } from '@/api/im.js'
+import storage from '@/utils/storage.js'
+import { beautifyTime } from '@/utils/filters.js'
 
-  onShow () {
-    this.userTalkList();
-  },
-  onPullDownRefresh () {
-    this.userTalkList()
-    console.log('下拉事件');
-    setTimeout(function () {
-      uni.stopPullDownRefresh();
-    }, 1000);
-  },
-  /**
-   * 触底加载
-   */
-  onReachBottom () {
-    this.userTalkList();
-  },
-  methods: {
-    beautifyTime,
-    onclickToTalkInfo (val) {
-      storage.setTalkToUser(val)
-      uni.navigateTo({
-        url:
-          "/pages/mine/im/index?talkId=" + val.id,
-      });
-    },
-    /**
-     * 获取聊天列表
-     */
-    userTalkList () {
-      let params = {
-        userName: this.userName,
-      }
-      uni.showLoading({
-        title: "加载中",
-      });
-      getTalkList(params).then((res) => {
-         if (this.$store.state.isShowToast){ uni.hideLoading() };
-        if (res.data.success) {
-          this.talkList = res.data.result;
-          console.log(this.talkList, 'this.talkListthis.talkList');
-        }
-      });
-    },
-    navigateTo (url) {
-      uni.navigateTo({
-        url,
-      });
-    },
-    cleanUnread () {
-      clearmeaager().then((res) => {
-        console.log(res);
-        if (res.data.code == 200) {
-          this.userTalkList();
-          uni.showToast({
-            icon: "none",
-            title: res.data.message,
-          });
-        }
+const store = useStore()
+
+const talkList = ref<any[]>([])
+const userName = ref('')
+
+onShow(() => {
+  fetchTalkList()
+})
+
+onPullDownRefresh(() => {
+  fetchTalkList()
+  console.log('下拉事件')
+  setTimeout(() => {
+    uni.stopPullDownRefresh()
+  }, 1000)
+})
+
+onReachBottom(() => {
+  fetchTalkList()
+})
+
+function hideLoadingIfNeeded() {
+  if (store.state.isShowToast) uni.hideLoading()
+}
+
+function onclickToTalkInfo(val: any) {
+  storage.setTalkToUser(val)
+  uni.navigateTo({
+    url: '/pages/mine/im/index?talkId=' + val.id,
+  })
+}
+
+function fetchTalkList() {
+  const params = {
+    userName: userName.value,
+  }
+  uni.showLoading({
+    title: '加载中',
+  })
+  getTalkList(params).then((res) => {
+    hideLoadingIfNeeded()
+    if (res.data.success) {
+      talkList.value = res.data.result
+      console.log(talkList.value, 'this.talkListthis.talkList')
+    }
+  })
+}
+
+function navigateTo(url: string) {
+  uni.navigateTo({
+    url,
+  })
+}
+
+function clearUnreadMessages() {
+  clearmeaager().then((res) => {
+    console.log(res)
+    if (res.data.code == 200) {
+      fetchTalkList()
+      uni.showToast({
+        icon: 'none',
+        title: res.data.message,
       })
-    },
-  },
-};
+    }
+  })
+}
 </script>
   
 <style lang="scss" scoped>
diff --git a/pages/mine/msgTips/main.vue b/pages/mine/msgTips/main.vue
index c860969..9334538 100644
--- a/pages/mine/msgTips/main.vue
+++ b/pages/mine/msgTips/main.vue
@@ -1,183 +1,98 @@
 <template>
-	<view class="container">
-		<view class="list-cell b-b m-t" hover-class="cell-hover" :hover-stay-time="50">
-			<u-row gutter="12" justify="start" @click="navigateTo('/pages/msgTips/sysMsg/index')">
-				<u-col span="2" class="uCol" style="text-align:center;">
-					<image class="img" src="/static/mine/setting.png"></image>
-				</u-col>
-				<u-col span="7">
-					<p class="tit_title">系统消息</p>
-					<p class="tit_tips">查看系统消息</p>
-				</u-col>
-				<u-col span="3">
-					<view class="cell-more">
-						<u-tag size="mini" v-if="no_read.system_num>0" shape="circle" mode="dark" type="error" :text="no_read.system_num"></u-tag>
-						<span class="yticon icon-you"></span>
-					</view>
-				</u-col>
-			</u-row>
-		</view>
-		<!-- <view class="list-cell b-b m-t" hover-class="cell-hover" :hover-stay-time="50">
-			<u-row gutter="12" justify="start" @click="navigateTo('/pages/msgTips/packagemsg/index')">
-				<u-col span="2" class="uCol" style="text-align:center;">
-					<image class="img" src="/static/mine/logistics.png"></image>
-
-				</u-col>
-				<u-col span="7">
-					<p class="tit_title">物流消息</p>
-					<p class="tit_tips">查看物流消息</p>
-				</u-col>
-				<u-col span="3">
-					<view class="cell-more">
-						
-						<u-tag v-if="no_read.logistics_num>0" shape="circle" mode="dark" type="warning" :text="no_read.logistics_num"></u-tag>
-						<span class="yticon icon-you"></span>
-					</view>
-				</u-col>
-			</u-row>
-		</view> -->
-	</view>
+  <view class="container">
+    <view class="list-cell b-b m-t" hover-class="cell-hover" :hover-stay-time="50">
+      <u-row gutter="12" justify="start" @click="navigateTo('/pages/mine/msgTips/sysMsg/index')">
+        <u-col span="2" class="uCol" style="text-align: center">
+          <image class="img" src="/static/mine/setting.png"></image>
+        </u-col>
+        <u-col span="7">
+          <p class="tit_title">系统消息</p>
+          <p class="tit_tips">查看系统消息</p>
+        </u-col>
+        <u-col span="3">
+          <view class="cell-more">
+            <u-tag
+              size="mini"
+              v-if="unreadCount.system_num > 0"
+              shape="circle"
+              mode="dark"
+              type="error"
+              :text="String(unreadCount.system_num)"
+            ></u-tag>
+            <span class="yticon icon-you"></span>
+          </view>
+        </u-col>
+      </u-row>
+    </view>
+  </view>
 </template>
 
-<script>
-	import {
-		mapMutations
-	} from "vuex";
-	import * as API_Message from "@/api/members.js";
-	export default {
-		data() {
-			return {
-				no_read: ''
-			};
-		},
-		onLoad() {
-			this.GET_NoReadMessageNum();
-		},
-		methods: {
-			...mapMutations(["logout"]),
-			navigateTo(url) {
-				uni.navigateTo({
-					url
-				});
-			},
-			/** 获取未读消息数量信息 */
-			GET_NoReadMessageNum() {
-				API_Message.getNoReadMessageNum().then(response => {
-					this.no_read = response.data
-				})
-			}
-		}
-	};
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { getNoReadMessageNum } from '@/api/members.js'
+
+const unreadCount = ref<Record<string, number>>({ system_num: 0 })
+
+onLoad(() => {
+  fetchUnreadCount()
+})
+
+function navigateTo(url: string) {
+  uni.navigateTo({ url })
+}
+
+function fetchUnreadCount() {
+  getNoReadMessageNum().then((response) => {
+    unreadCount.value = response.data || { system_num: 0 }
+  })
+}
 </script>
 
-<style scoped lang='scss'>
-	.uCol {
-		display: flex;
-		justify-content: center !important;
-	}
-
-	.img {
-		width: 60rpx;
-		height: 60rpx;
-
-	}
-
-	.container {
-		background: #f9f9f9;
-	}
-
-	::v-deep .u-col-2 {
-		height: 60px;
-		line-height: 60px;
-		text-align: center !important;
-
-	}
-
-	.qicon {
-		text-align: center;
-		display: block;
-		font-size: 20px;
-	}
-
-	.redBox {
-		display: inline-block;
-		text-align: center;
-		line-height: 1.5em;
-		font-size: 12px;
-		min-width: 1.5em;
-		min-height: 1.5em;
-
-		background: #ed6533;
-		border-radius: 50%;
-		color: #fff;
-	}
-
-	.tit_title {
-		color: $u-main-color;
-	}
-
-	.tit_tips {
-		color: $u-tips-color;
-	}
-
-	.u-col-3 {
-		text-align: right !important;
-		padding-right: 20rpx !important;
-	}
-
-	.list-cell {
-		background: #fff;
-		align-items: baseline;
-		padding: 20rpx 0;
-		line-height: 60rpx;
-
-		background: #fff;
-		justify-content: center;
-
-		&.log-out-btn {
-			margin-top: 40rpx;
-
-			.cell-tit {
-				color: $uni-color-primary;
-				text-align: center;
-				margin-right: 0;
-			}
-		}
-
-		&.cell-hover {
-			background: #fafafa;
-		}
-
-		&.b-b:after {
-			left: 30rpx;
-		}
-
-		&.m-t {
-			margin-top: 16rpx;
-		}
-
-		.cell-more {
-			/* margin-top: 10rpx; */
-			height: 60rpx;
-			text-align: right;
-			/* display: flex;
-			justify-content: center; //这个是X轴居中
-			align-items: center; //这个是 Y轴居中 */
-			font-size: $font-lg;
-			color: $font-color-light;
-			/* width: 100rpx; */
-		}
-
-		.cell-tit {
-			flex: 1;
-			font-size: $font-base + 2rpx;
-			color: $font-color-dark;
-			margin-right: 10rpx;
-		}
-
-		.cell-tip {
-			font-size: $font-base;
-			color: $font-color-light;
-		}
-	}
+<style scoped lang="scss">
+.uCol {
+  display: flex;
+  justify-content: center !important;
+}
+.img {
+  width: 60rpx;
+  height: 60rpx;
+}
+.container {
+  background: #f9f9f9;
+}
+::v-deep .u-col-2 {
+  height: 60px;
+  line-height: 60px;
+  text-align: center !important;
+}
+.tit_title {
+  color: $u-main-color;
+}
+.tit_tips {
+  color: $u-tips-color;
+}
+.u-col-3 {
+  text-align: right !important;
+  padding-right: 20rpx !important;
+}
+.list-cell {
+  background: #fff;
+  align-items: baseline;
+  padding: 20rpx 0;
+  line-height: 60rpx;
+  justify-content: center;
+  &.cell-hover {
+    background: #fafafa;
+  }
+  &.m-t {
+    margin-top: 16rpx;
+  }
+  .cell-more {
+    height: 60rpx;
+    text-align: right;
+    font-size: $font-lg;
+    color: $font-color-light;
+  }
+}
 </style>
diff --git a/pages/mine/msgTips/packageMsg/index.vue b/pages/mine/msgTips/packageMsg/index.vue
index 6c41628..7b0067a 100644
--- a/pages/mine/msgTips/packageMsg/index.vue
+++ b/pages/mine/msgTips/packageMsg/index.vue
@@ -1,99 +1,113 @@
 <template>
-  <view class="container " style="font-size: 13px;">
-	 <block v-for="(row, index) in messageList" :key="index">
-		<view class="msgItem">
-		  <div class="msgMsg">
-			<div class="bagbar">{{$u.timeFormat(row.send_time, 'yyyy-mm-dd')}}</div>
-		  </div>
-		  <u-card @click="goDetail(row.sn,row.logi_id,row.ship_no)" :title="title" title-color="#666666" title-size="24" sub-title-color="#666666" sub-title-size="24" :border="false" :sub-title=row.status>
-			<template #body>
-			  <view class="msg-body">
-			  <image class="msgImg" :src="row.goods_img" mode=""></image>
-			  <view class="msgView">
-				<view>{{row.goodsName}}</view>
-				<view class="msgNum">订单号:{{row.sn}}</view>
-			  </view>
-			  </view>
-			</template>
-		  </u-card>
-		</view>
-	</block>	
-	<uni-load-more :status="loadStatus"></uni-load-more>
+  <view class="container" style="font-size: 13px">
+    <block v-for="(row, index) in messageList" :key="index">
+      <view class="msgItem">
+        <div class="msgMsg">
+          <div class="bagbar">{{ formatSendTime(row.send_time) }}</div>
+        </div>
+        <u-card
+          @click="navigateToLogisticsDetail(row.sn, row.logi_id, row.ship_no)"
+          :title="pageTitle"
+          title-color="#666666"
+          title-size="24"
+          sub-title-color="#666666"
+          sub-title-size="24"
+          :border="false"
+          :sub-title="row.status"
+        >
+          <template #body>
+            <view class="msg-body">
+              <image class="msgImg" :src="row.goods_img" mode=""></image>
+              <view class="msgView">
+                <view>{{ row.goodsName }}</view>
+                <view class="msgNum">订单号:{{ row.sn }}</view>
+              </view>
+            </view>
+          </template>
+        </u-card>
+      </view>
+    </block>
+    <uni-load-more :status="loadStatus"></uni-load-more>
   </view>
 </template>
 
-<script>
-import * as API_Message from "@/api/message.js";
-export default {
-  data() {
-    return {
-	  messageList: [],
-	  title: "物流更新通知",
-	  subTitle: "运输中",
-	  loadStatus:'more',
-	  params: {
-	    pageNumber: 1,
-	    pageSize: 10,
-	  },
-	  loadStatus:'more'
-    };
-  },
-  onLoad(){
-  	this.GET_LogisticsList(true);
-  },
-  onReachBottom() {
-  	this.params.pageNumber++
-  	this.GET_LogisticsList(false)
-  },
-  methods: {
-    goDetail(sn,logi_id,ship_no){
-		uni.navigateTo({
-			url:'/pages/msgTips/packagemsg/logisticsDetail?order_sn=' + sn +'&logi_id='+logi_id+'&ship_no='+ship_no,
-		})
-	},
-	//获取物流消息
-	GET_LogisticsList(reset){
-		if (reset) {
-			this.params.pageNumber = 1
-		 }
-		uni.showLoading({
-			title:"加载中"
-		})
-		API_Message.getLogisticsMessages(this.params).then(async response => {
-			 if (this.$store.state.isShowToast){ uni.hideLoading() }
-		    const { data } = response
-		    if (!data || !data.length) {
-				this.messageList.push(...data.data)
-		    }
-		 })
-		
-	}
-		
+<script setup lang="ts">
+import { ref, getCurrentInstance } from 'vue'
+import { onLoad, onReachBottom } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import * as API_Message from '@/api/message.js'
+
+const store = useStore()
+const { proxy } = getCurrentInstance()!
+
+const messageList = ref<any[]>([])
+const pageTitle = '物流更新通知'
+const loadStatus = ref('more')
+const queryParams = ref({ pageNumber: 1, pageSize: 10 })
+
+onLoad(() => {
+  fetchLogisticsList(true)
+})
+
+onReachBottom(() => {
+  queryParams.value.pageNumber++
+  fetchLogisticsList(false)
+})
+
+function hideLoadingIfNeeded() {
+  if (store.state.isShowToast) uni.hideLoading()
+}
+
+function formatSendTime(time: number) {
+  return proxy.$u.timeFormat(time, 'yyyy-mm-dd')
+}
+
+function extractRecords(res: any) {
+  if (Array.isArray(res?.result?.records)) return res.result.records
+  if (Array.isArray(res?.result)) return res.result
+  if (Array.isArray(res?.data)) return res.data
+  return []
+}
+
+function navigateToLogisticsDetail(sn: string, logiId: string, shipNo: string) {
+  uni.navigateTo({
+    url: `/pages/mine/msgTips/packageMsg/logisticsDetail?order_sn=${sn}&logi_id=${logiId}&ship_no=${shipNo}`,
+  })
+}
+
+function fetchLogisticsList(reset: boolean) {
+  if (reset) {
+    queryParams.value.pageNumber = 1
+    messageList.value = []
+    loadStatus.value = 'more'
   }
-};
+  uni.showLoading({ title: '加载中' })
+  API_Message.getLogisticsMessages(queryParams.value).then((response) => {
+    hideLoadingIfNeeded()
+    const records = extractRecords(response.data)
+    if (records.length) {
+      messageList.value.push(...records)
+    } else {
+      loadStatus.value = 'noMore'
+    }
+  })
+}
 </script>
 
-<style scoped lang='scss'>
-.ddnumber {
-  color: $u-tips-color;
-  font-size: 24rpx;
-}
-.msg-body{
-	display: flex;
-	background-color: rgba(102, 110, 232, 0.0470588235294118);
-	
-	
-	.msgImg{
-		width: 160rpx;
-		height: 160rpx;
-	}
-	.msgView{
-		margin-left: 20rpx;
-		.msgNum:last-child{
-			margin-top: 60rpx;
-		}
-	}
-	
+<style scoped lang="scss">
+.msg-body {
+  display: flex;
+  background-color: rgba(102, 110, 232, 0.0470588235294118);
+  .msgImg {
+    width: 160rpx;
+    height: 160rpx;
+  }
+  .msgView {
+    margin-left: 20rpx;
+    .msgNum:last-child {
+      margin-top: 60rpx;
+    }
+  }
 }
 .bagbar {
   display: inline;
@@ -103,13 +117,8 @@ export default {
   padding: 10rpx 20rpx;
   background: $u-info-disabled;
 }
-.storeImg {
-  width: 100%;
-  height: 100rpx;
-  margin-right: 20rpx;
-}
 .container {
-  background: #F9F9F9;
+  background: #f9f9f9;
   min-height: 100vh;
 }
 .msgMsg {
@@ -119,12 +128,8 @@ export default {
 .msgItem {
   padding: 1em 0;
 }
-view{
-	font-size: 13px;
-	color: #666666;
+view {
+  font-size: 13px;
+  color: #666666;
 }
-u-card{
-	font-size: 13px;
-	color: #666666;
-}
-</style>
\ No newline at end of file
+</style>
diff --git a/pages/mine/msgTips/packageMsg/logisticsDetail.vue b/pages/mine/msgTips/packageMsg/logisticsDetail.vue
index d6a98ad..3646f4a 100644
--- a/pages/mine/msgTips/packageMsg/logisticsDetail.vue
+++ b/pages/mine/msgTips/packageMsg/logisticsDetail.vue
@@ -2,21 +2,23 @@
   <view class="logistics-detail">
     <view class="card">
       <view class="card-title">
-        <span>{{ logiList.shipper }}</span>快递 <span>{{ logiList.logisticCode }}</span>
+        <span>{{ logisticsInfo.shipper }}</span>快递 <span>{{ logisticsInfo.logisticCode }}</span>
       </view>
       <view class="time-line">
-        <u-time-line v-if="logiList.traces && logiList.traces.length != 0">
-          <u-time-line-item nodeTop="2" v-for="(item, index) in logiList.traces" :key="index">
-            <!-- 此处自定义了左边内容，用一个图标替代 -->
-            <template v-slot:node >
-              <view v-if="index == logiList.traces.length - 1" class="u-node" :style="{ background: $lightColor }" style="padding: 0 4px">
-                <!-- 此处为uView的icon组件 -->
+        <u-time-line v-if="logisticsInfo.traces && logisticsInfo.traces.length != 0">
+          <u-time-line-item nodeTop="2" v-for="(item, index) in logisticsInfo.traces" :key="index">
+            <template #node>
+              <view
+                v-if="index == logisticsInfo.traces.length - 1"
+                class="u-node"
+                :style="{ background: lightColor }"
+                style="padding: 0 4px"
+              >
                 <u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
               </view>
             </template>
-            <template v-slot:content>
+            <template #content>
               <view>
-                <!-- <view class="u-order-title">待取件</view> -->
                 <view class="u-order-desc">{{ item.AcceptStation }}</view>
                 <view class="u-order-time">{{ item.AcceptTime }}</view>
               </view>
@@ -29,32 +31,26 @@
   </view>
 </template>
 
-<script>
-import { getExpress } from "@/api/trade.js";
-export default {
-  data() {
-    return {
-      express: "",
-      resData: {
-        title: "物流详情",
-      },
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import { getExpress } from '@/api/trade.js'
 
-      logiList: "",
-      activeStep: 0,
-    };
-  },
-  methods: {
-    init(sn) {
-      getExpress(sn).then((res) => {
-        this.logiList = res.data.result;
-      });
-    },
-  },
-  onLoad(option) {
-    let sn = option.order_sn;
-    this.init(sn);
-  },
-};
+const store = useStore()
+
+const lightColor = computed(() => store.getters.lightColor)
+const logisticsInfo = ref<Record<string, any>>({})
+
+onLoad((option) => {
+  fetchLogistics(option.order_sn)
+})
+
+function fetchLogistics(orderSn: string) {
+  getExpress(orderSn).then((res) => {
+    logisticsInfo.value = res.data.result || {}
+  })
+}
 </script>
 
 <style lang="scss">
@@ -79,9 +75,6 @@ export default {
     padding: 16rpx 32rpx;
   }
 }
-.u-order-title {
-  font-weight: bold;
-}
 .u-order-desc {
   font-size: 26rpx;
   color: #666;
diff --git a/pages/mine/msgTips/serviceMsg/index.vue b/pages/mine/msgTips/serviceMsg/index.vue
index 2ccbbec..260918e 100644
--- a/pages/mine/msgTips/serviceMsg/index.vue
+++ b/pages/mine/msgTips/serviceMsg/index.vue
@@ -30,20 +30,11 @@
   </view>
 </template>
 
-<script>
-import { mapMutations } from "vuex";
-export default {
-  data() {
-    return {};
-  },
-  methods: {
-    ...mapMutations(["logout"]),
-    
-  }
-};
+<script setup lang="ts">
+// 占位页，后续接入客服消息
 </script>
 
-<style scoped lang='scss'>
+<style scoped lang="scss">
 .msgTime {
   font-size: 13px;
 }
@@ -56,11 +47,6 @@ page {
   vertical-align: middle;
   border-radius: 0.4em;
 }
-.qicon {
-  text-align: center;
-  display: block;
-  font-size: 20px;
-}
 .redBox {
   padding: 10rpx 12rpx;
   display: inline-block;
@@ -71,7 +57,6 @@ page {
   height: 1em;
   background: #ed6533;
   border-radius: 50%;
-
   color: #fff;
 }
 .tit_title,
@@ -92,25 +77,14 @@ page {
 }
 .list-cell {
   align-items: baseline;
-  padding: 20rpx  30rpx;
+  padding: 20rpx 30rpx;
   line-height: 60rpx;
   position: relative;
   background: #fff;
   justify-content: center;
-  &.log-out-btn {
-    margin-top: 40rpx;
-    .cell-tit {
-      color: $uni-color-primary;
-      text-align: center;
-      margin-right: 0;
-    }
-  }
   &.cell-hover {
     background: #fafafa;
   }
-  &.b-b:after {
-    left: 30rpx;
-  }
   &.m-t {
     margin-top: 16rpx;
   }
@@ -119,22 +93,12 @@ page {
     margin-top: 10rpx;
     height: 60rpx;
     display: flex;
-    justify-content: center; //这个是X轴居中
-    align-items: center; //这个是 Y轴居中
+    justify-content: center;
+    align-items: center;
     align-self: baseline;
     font-size: $font-lg;
     color: $font-color-light;
     margin-left: 10rpx;
   }
-  .cell-tit {
-    flex: 1;
-    font-size: $font-base + 2rpx;
-    color: $font-color-dark;
-    margin-right: 10rpx;
-  }
-  .cell-tip {
-    font-size: $font-base;
-    color: $font-color-light;
-  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/pages/mine/msgTips/sysMsg/index.vue b/pages/mine/msgTips/sysMsg/index.vue
index f811960..8d71ffb 100644
--- a/pages/mine/msgTips/sysMsg/index.vue
+++ b/pages/mine/msgTips/sysMsg/index.vue
@@ -2,17 +2,15 @@
   <view class="container">
     <block v-for="(row, index) in messageList" :key="index">
       <view class="msgItem">
-        <div  class="is_read">
-			<!-- {{row.is_read}} -->
-			<span v-if="row.is_read"></span>
-			<span v-else class="red">·</span>
-
-		</div>
-        <div class="msgMsg">{{$u.timeFormat(row.send_time, 'yyyy-mm-dd')}}</div>
-        <u-card :title="title" :title-size="35" :border="false">
+        <div class="is_read">
+          <span v-if="row.is_read"></span>
+          <span v-else class="red">·</span>
+        </div>
+        <div class="msgMsg">{{ formatSendTime(row.send_time) }}</div>
+        <u-card :title="pageTitle" :title-size="35" :border="false">
           <template #body>
             <view class="u-body-item u-flex u-row-between u-p-b-0">
-              <view class="u-body-item-title u-line-2">{{row.content}}</view>
+              <view class="u-body-item-title u-line-2">{{ row.content }}</view>
             </view>
           </template>
         </u-card>
@@ -22,74 +20,85 @@
   </view>
 </template>
 
-<script>
-import { mapMutations } from "vuex";
-import * as API_Message from "@/api/message.js";
-export default {
-  data() {
-    return {
-      title: "系统消息",
-      subTitle: "未读",
-      finished: false,
-      loadStatus: "more",
-      params: {
-        pageNumber: 0,
-        pageSize: 5
-      },
-      messageList: []
-    };
-  },
-  onLoad() {
-    this.GET_MessageList(true);
-  },
-  onReachBottom() {
-    this.params.pageNumber++;
-    this.GET_MessageList(false);
-  },
-  methods: {
-    ...mapMutations(["logout"]),
-   
-    /** 获取站内消息 */
-    GET_MessageList(reset) {
-      if (reset) {
-        this.params.pageNumber = 1;
-        this.messageList = [];
-      }
-      uni.showLoading({
-        title: "加载中"
-      });
-      API_Message.getMessages(this.params).then(async response => {
-         if (this.$store.state.isShowToast){ uni.hideLoading() };
-        const { data } = response;
-        if (!data || !data.length) {
-          this.messageList.push(...data.data);
-          this.handleReadPageMessages();
-        }
-      });
-    },
-    /** 设置消息已读 **/
-    handleReadPageMessages() {
-      const ids = this.messageList.map(item => item.id).join(",");
-      API_Message.messageMarkAsRead(ids).then(async () => {});
-    }
+<script setup lang="ts">
+import { ref, getCurrentInstance } from 'vue'
+import { onLoad, onReachBottom } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import * as API_Message from '@/api/message.js'
+
+const store = useStore()
+const { proxy } = getCurrentInstance()!
+
+const pageTitle = '系统消息'
+const loadStatus = ref('more')
+const queryParams = ref({ pageNumber: 1, pageSize: 5 })
+const messageList = ref<any[]>([])
+
+onLoad(() => {
+  fetchMessageList(true)
+})
+
+onReachBottom(() => {
+  queryParams.value.pageNumber++
+  fetchMessageList(false)
+})
+
+function hideLoadingIfNeeded() {
+  if (store.state.isShowToast) uni.hideLoading()
+}
+
+function formatSendTime(time: number) {
+  return proxy.$u.timeFormat(time, 'yyyy-mm-dd')
+}
+
+function extractRecords(res: any) {
+  if (Array.isArray(res?.result?.records)) return res.result.records
+  if (Array.isArray(res?.result)) return res.result
+  if (Array.isArray(res?.data)) return res.data
+  return []
+}
+
+function fetchMessageList(reset: boolean) {
+  if (reset) {
+    queryParams.value.pageNumber = 1
+    messageList.value = []
+    loadStatus.value = 'more'
   }
-};
+  uni.showLoading({ title: '加载中' })
+  API_Message.getMessages(queryParams.value).then((response) => {
+    hideLoadingIfNeeded()
+    const res = response.data
+    const records = extractRecords(res)
+    if (records.length) {
+      messageList.value.push(...records)
+      markPageMessagesAsRead()
+    } else {
+      loadStatus.value = 'noMore'
+    }
+  })
+}
+
+function markPageMessagesAsRead() {
+  const ids = messageList.value.map((item) => item.id).join(',')
+  if (!ids) return
+  API_Message.messageMarkAsRead(ids)
+}
 </script>
 
-<style scoped lang='scss'>
-.is_read{
-	position: absolute;
-    right: 25px;
-    top: 80rpx;
-    z-index: 999;
+<style scoped lang="scss">
+.is_read {
+  position: absolute;
+  right: 25px;
+  top: 80rpx;
+  z-index: 999;
 }
 .container {
   background: #f9f9f9;
   min-height: 100vh;
 }
-.red{
-	color: coral;
-	font-size: 100rpx;
+.red {
+  color: coral;
+  font-size: 100rpx;
 }
 .msgMsg {
   text-align: center;
@@ -99,4 +108,4 @@ export default {
   padding: 1em 0;
   position: relative;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/pages/mine/myCollect.vue b/pages/mine/myCollect.vue
index 4b6004b..9189b48 100644
--- a/pages/mine/myCollect.vue
+++ b/pages/mine/myCollect.vue
@@ -14,7 +14,7 @@
 						:activeStyle="{ color: lightColor }"
 						class="collect-tabs"
 						:list="navList"
-						:scrollable="true"
+						:scrollable="false"
 						v-model:current="tabCurrentIndex"
 					></u-tabs>
 				</view>
@@ -22,278 +22,238 @@
 		</u-navbar>
 		<view class="collect-body">
 			<!-- 显示商品栏 -->
-			<view v-if="tabCurrentIndex == 0" class="tab-content">
-				<scroll-view class="list-scroll-content" scroll-y>
-					<u-empty style="margin-top: 40rpx" text="暂无收藏商品数据" mode="favor" v-if="goodsEmpty"></u-empty>
-					<template v-else>
-						<u-swipe-action
-							v-for="(item, index) in goodList"
-							:key="index"
-							class="collect-swipe"
+			<view v-if="tabCurrentIndex === 0" class="tab-content">
+				<u-empty style="margin-top: 40rpx" text="暂无收藏商品数据" mode="favor" v-if="goodsEmpty"></u-empty>
+				<template v-else>
+					<u-swipe-action
+						v-for="(item, index) in goodsList"
+						:key="item.skuId || item.goodsId || index"
+						class="collect-swipe"
+					>
+						<u-swipe-action-item
+							@open="openSwipeItem(item, 'goods')"
+							:show="item.selected"
+							:options="swipeOptions"
+							@click="removeGoodsCollection(item, index)"
+							:name="index"
 						>
-							<u-swipe-action-item
-								@open="openLeftChange(item, 'goods')"
-								:show="item.selected"
-								:options="LeftOptions"
-								@click="clickGoodsSwiperAction(item, index)"
-								:name="index"
-							>
-								<view class="goods" @click="goGoodsDetail(item)">
-									<u-image width="131rpx" height="131rpx" :src="item.image" mode="aspectFit">
-										<template #loading><u-loading></u-loading></template>
-									</u-image>
-									<view class="goods-intro">
-										<view class="goods-name">{{ item.goodsName }}</view>
-										<view class="goods-sn">{{ item.goods_sn }}</view>
-										<view class="goods-price">￥{{ unitPrice(item.price) }}</view>
-									</view>
+							<view class="goods" @click="goGoodsDetail(item)">
+								<u-image width="131rpx" height="131rpx" :src="item.image" mode="aspectFit">
+									<template #loading><u-loading-icon></u-loading-icon></template>
+								</u-image>
+								<view class="goods-intro">
+									<view class="goods-name">{{ item.goodsName }}</view>
+									<view class="goods-sn">{{ item.goods_sn }}</view>
+									<view class="goods-price">￥{{ unitPrice(item.price) }}</view>
 								</view>
-							</u-swipe-action-item>
-						</u-swipe-action>
-					</template>
-				</scroll-view>
+							</view>
+						</u-swipe-action-item>
+					</u-swipe-action>
+				</template>
 			</view>
 			<!-- 显示收藏的店铺栏 -->
 			<view v-else class="tab-content">
-				<scroll-view class="list-scroll-content" scroll-y>
-					<u-empty style="margin-top: 40rpx" text="暂无收藏店铺数据" mode="favor" v-if="storeEmpty"></u-empty>
-					<template v-else>
-						<u-swipe-action
-							v-for="(item, index) in storeList"
-							:key="index"
-							class="collect-swipe"
+				<u-empty style="margin-top: 40rpx" text="暂无收藏店铺数据" mode="favor" v-if="storeEmpty"></u-empty>
+				<template v-else>
+					<u-swipe-action
+						v-for="(item, index) in storeList"
+						:key="item.id || index"
+						class="collect-swipe"
+					>
+						<u-swipe-action-item
+							@open="openSwipeItem(item, 'store')"
+							:show="item.selected"
+							:options="swipeOptions"
+							@click="removeStoreCollection(item)"
+							:name="index"
 						>
-							<u-swipe-action-item
-								@open="openLeftChange(item, 'store')"
-								:show="item.selected"
-								:options="LeftOptions"
-								@click="clickStoreSwiperAction(item)"
-								:name="index"
-							>
-								<view class="store" @click="goStoreMainPage(item.id)">
-									<view class="intro">
-										<view class="store-logo">
-											<u-image width="102rpx" height="102rpx" :src="item.storeLogo" :alt="item.storeName"
-												mode="aspectFit">
-												<template #loading><u-loading></u-loading></template>
-											</u-image>
-										</view>
-										<view class="store-name">
-											<view>{{ item.storeName }}</view>
-											<u-tag size="mini" type="error" :color="$mainColor" v-if="item.selfOperated"
-												text="自营" mode="plain" shape="circle" />
-										</view>
-										<view class="store-collect">
-											<view>进店逛逛</view>
-										</view>
+							<view class="store" @click="goStoreMainPage(item.id)">
+								<view class="intro">
+									<view class="store-logo">
+										<u-image width="102rpx" height="102rpx" :src="item.storeLogo" :alt="item.storeName"
+											mode="aspectFit">
+											<template #loading><u-loading-icon></u-loading-icon></template>
+										</u-image>
+									</view>
+									<view class="store-name">
+										<view>{{ item.storeName }}</view>
+										<u-tag size="mini" type="error" :color="mainColor" v-if="item.selfOperated"
+											text="自营" mode="plain" shape="circle" />
+									</view>
+									<view class="store-collect">
+										<view>进店逛逛</view>
 									</view>
 								</view>
-							</u-swipe-action-item>
-						</u-swipe-action>
-					</template>
-				</scroll-view>
+							</view>
+						</u-swipe-action-item>
+					</u-swipe-action>
+				</template>
 			</view>
 		</view>
 	</view>
 </template>
 
-<script>
-	import {
-		getGoodsCollection,
-		getStoreCollection,
-		deleteGoodsCollection,
-		deleteStoreCollection,
-	} from "@/api/members.js";
-	export default {
-		data() {
-			return {
-        lightColor:this.$lightColor,
-				// 商品左滑侧边栏
-				LeftOptions: [{
-					text: "取消",
-					style: {
-						backgroundColor: this.$lightColor,
-					},
-				}, ],
-				tabCurrentIndex: 0, //tab的下标默认为0，也就是说会默认请求商品
-				navList: [
-					//tab显示数据
-					{
-						name: "商品(0)",
-					
-						params: {
-							pageNumber: 1,
-							pageSize: 10,
-						},
-					},
-					{
-						name: "店铺(0)",
-					
-						params: {
-							pageNumber: 1,
-							pageSize: 10,
-						},
-					},
-				],
-			
-				goodsEmpty: false, //商品数据是否为空
-				storeEmpty: false, //店铺数据是否为空
-				goodList: [], //商品集合
-				storeList: [], //店铺集合
-			};
-		},
-		onShow() {
-			this.fetchReloadOrNextPage('reload')
-		},
-		onReachBottom() {
-			this.fetchReloadOrNextPage('next')
-		},
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { onShow, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import { unitPrice } from '@/utils/filters.js'
+import {
+	getGoodsCollection,
+	getStoreCollection,
+	deleteGoodsCollection,
+	deleteStoreCollection,
+} from '@/api/members.js'
 
-		methods: {
-			// 刷新或者下一页
-			fetchReloadOrNextPage(type) {
-				if(type == 'next'){
-					this.navList[this.tabCurrentIndex].params.pageNumber ++;
-					if (this.tabCurrentIndex == 0) {
-					this.getGoodList();
-					} else {
-						this.getStoreList();
-					}
+const store = useStore()
+
+const lightColor = computed(() => store.getters.lightColor)
+const mainColor = computed(() => store.getters.mainColor)
+
+const swipeOptions = computed(() => [
+	{
+		text: '取消',
+		style: { backgroundColor: lightColor.value },
+	},
+])
+
+const tabCurrentIndex = ref(0)
+const navList = ref([
+	{ name: '商品(0)', params: { pageNumber: 1, pageSize: 10 } },
+	{ name: '店铺(0)', params: { pageNumber: 1, pageSize: 10 } },
+])
+const goodsEmpty = ref(false)
+const storeEmpty = ref(false)
+const goodsList = ref<any[]>([])
+const storeList = ref<any[]>([])
+
+onShow(() => {
+	reloadOrLoadMore('reload')
+})
+
+onReachBottom(() => {
+	reloadOrLoadMore('next')
+})
+
+onPullDownRefresh(() => {
+	if (tabCurrentIndex.value === 0) {
+		navList.value[0].params.pageNumber = 1
+		goodsList.value = []
+		fetchGoodsList()
+	} else {
+		navList.value[1].params.pageNumber = 1
+		storeList.value = []
+		fetchStoreList()
+	}
+})
+
+function hideLoadingIfNeeded() {
+	if (store.state.isShowToast) uni.hideLoading()
+}
+
+function reloadOrLoadMore(type: 'reload' | 'next') {
+	if (type === 'next') {
+		navList.value[tabCurrentIndex.value].params.pageNumber++
+		if (tabCurrentIndex.value === 0) {
+			fetchGoodsList()
+		} else {
+			fetchStoreList()
+		}
+		return
+	}
+	navList.value[0].params.pageNumber = 1
+	navList.value[1].params.pageNumber = 1
+	goodsEmpty.value = false
+	storeEmpty.value = false
+	goodsList.value = []
+	storeList.value = []
+	fetchGoodsList()
+	fetchStoreList()
+}
+
+function openSwipeItem(val: any, type: 'goods' | 'store') {
+	const targetList = type === 'goods' ? goodsList.value : storeList.value
+	targetList.forEach((item) => {
+		item.selected = false
+	})
+	val.selected = true
+}
+
+function removeGoodsCollection(val: any) {
+	deleteGoodsCollection(val.skuId).then((res) => {
+		if (res.statusCode === 200) {
+			goodsList.value = []
+			navList.value[0].params.pageNumber = 1
+			fetchGoodsList()
+		}
+	})
+}
+
+function removeStoreCollection(val: any) {
+	deleteStoreCollection(val.id).then((res) => {
+		if (res.statusCode === 200) {
+			storeList.value = []
+			navList.value[1].params.pageNumber = 1
+			fetchStoreList()
+		}
+	})
+}
+
+function goGoodsDetail(val: any) {
+	uni.navigateTo({
+		url: `/pages/product/goods?id=${val.skuId}&goodsId=${val.goodsId}`,
+	})
+}
+
+function goStoreMainPage(id: string) {
+	uni.navigateTo({
+		url: `/pages/product/shopPage?id=${id}`,
+	})
+}
+
+function fetchGoodsList() {
+	uni.showLoading({ title: '加载中' })
+	getGoodsCollection(navList.value[0].params, 'GOODS')
+		.then((res) => {
+			hideLoadingIfNeeded()
+			uni.stopPullDownRefresh()
+			if (res.data.success) {
+				const data = res.data.result
+				navList.value[0].name = `商品(${data.total})`
+				goodsEmpty.value = data.total === 0
+				if (data.records?.length) {
+					const records = data.records.map((item: any) => ({ ...item, selected: false }))
+					goodsList.value.push(...records)
 				}
-				else{
-					this.navList[0].params.pageNumber = 1;
-					this.navList[1].params.pageNumber = 1;
-					this.goodList = [];
-					this.storeList = [];
-					this.getGoodList();
-					this.getStoreList();
-				}
-			},
-
-			/**
-			 * 打开商品左侧取消收藏
-			 */
-			openLeftChange(val, type) {
-				const way = type === "goods" ? this.goodList : this.storeList;
-				way.forEach((item) => {
-					item.selected = false;
-				});
-				val.selected = true;
-			},
-
-			/**
-			 * 点击商品左侧取消收藏
-			 */
-			clickGoodsSwiperAction(val) {
-				deleteGoodsCollection(val.skuId).then((res) => {
-					if (res.statusCode == 200) {
-						this.storeList = [];
-						this.goodList = [];
-						this.getGoodList();
-					}
-				});
-			},
-
-			/**
-			 * 点击店铺左侧取消收藏
-			 */
-			clickStoreSwiperAction(val) {
-				deleteStoreCollection(val.id).then((res) => {
-					if (res.statusCode == 200) {
-						this.storeList = [];
-						this.getStoreList();
-					}
-				});
-			},
-
-			/**
-			 * 查看商品详情
-			 */
-			goGoodsDetail(val) {
-				//商品详情
-				uni.navigateTo({
-					url: "/pages/product/goods?id=" + val.skuId + "&goodsId=" + val.goodsId,
-				});
-			},
-
-			/**
-			 * 查看店铺详情
-			 */
-			goStoreMainPage(id) {
-				//店铺主页
-				uni.navigateTo({
-					url: "/pages/product/shopPage?id=" + id,
-				});
-			},
-
-			/**
-			 * 获取商品集合
-			 */
-			getGoodList() {
-				uni.showLoading({
-					title: "加载中",
-				});
-				getGoodsCollection(this.navList[0].params, "GOODS").then((res) => {
-					 if (this.$store.state.isShowToast){ uni.hideLoading() };
-					uni.stopPullDownRefresh();
-					if (res.data.success) {
-						let data = res.data.result;
-						data.selected = false;
-						  this.navList[0].name = `商品(${data.total})`;
-          
-						if (data.total == 0) {
-							this.goodsEmpty = true;
-						} else if (data.total < 10) {
-							this.goodsLoad = "noMore";
-							this.goodList.push(...data.records);
-						} else {
-							this.goodList.push(...data.records);
-							if (data.total.length < 10) this.goodsLoad = "noMore";
-						}
-					}
-				});
-			},
-
-			/**
-			 * 获取店铺集合
-			 */
-			getStoreList() {
-				uni.showLoading({
-					title: "加载中",
-				});
-				getStoreCollection(this.navList[1].params, "STORE").then((res) => {
-					 if (this.$store.state.isShowToast){ uni.hideLoading() };
-					uni.stopPullDownRefresh();
-					if (res.data.success) {
-						let data = res.data.result;
-						data.selected = false;
-						 this.navList[1].name = `店铺(${data.total})`;
-						if (data.total == 0) {
-							this.storeEmpty = true;
-						} else if (data.total < 10) {
-						
-							this.storeList.push(...data.records);
-						} 
-					}
-				});
-			},
-		},
-
-		/**
-		 * 下拉刷新时
-		 */
-		onPullDownRefresh() {
-			if (this.tabCurrentIndex == 0) {
-				this.navList[0].params.pageNumber = 1;
-				this.goodList = [];
-				this.getGoodList();
-			} else {
-				this.navList[1].params.pageNumber = 1;
-				this.storeList = [];
-				this.getStoreList();
 			}
-		},
-	};
+		})
+		.catch(() => {
+			hideLoadingIfNeeded()
+			uni.stopPullDownRefresh()
+		})
+}
+
+function fetchStoreList() {
+	uni.showLoading({ title: '加载中' })
+	getStoreCollection(navList.value[1].params, 'STORE')
+		.then((res) => {
+			hideLoadingIfNeeded()
+			uni.stopPullDownRefresh()
+			if (res.data.success) {
+				const data = res.data.result
+				navList.value[1].name = `店铺(${data.total})`
+				storeEmpty.value = data.total === 0
+				if (data.records?.length) {
+					const records = data.records.map((item: any) => ({ ...item, selected: false }))
+					storeList.value.push(...records)
+				}
+			}
+		})
+		.catch(() => {
+			hideLoadingIfNeeded()
+			uni.stopPullDownRefresh()
+		})
+}
 </script>
 
 <style lang="scss">
@@ -324,15 +284,18 @@
 
 	.collect-body {
 		flex: 1;
-		min-height: 0;
+		width: 100%;
 	}
 
 	.tab-content {
-		height: 100%;
+		width: 100%;
 	}
 
-	.list-scroll-content {
-		height: 100%;
+	:deep(.u-tabs),
+	:deep(.u-tabs__wrapper),
+	:deep(.u-tabs__wrapper__scroll-view-wrapper),
+	:deep(.u-tabs__wrapper__scroll-view),
+	:deep(.u-tabs__wrapper__nav) {
 		width: 100%;
 	}
 
diff --git a/pages/mine/myTracks.vue b/pages/mine/myTracks.vue
index 7408fc1..8533378 100644
--- a/pages/mine/myTracks.vue
+++ b/pages/mine/myTracks.vue
@@ -7,14 +7,14 @@
 			:auto-back="true"
 		>
 			<template #right>
-        <div class="light-color edit" @click="isEdit = !isEdit">{{ !isEdit ? '编辑' : '完成'}}</div>
+        <view class="light-color edit" @click="isEdit = !isEdit">{{ !isEdit ? '编辑' : '完成'}}</view>
       </template>
 		</u-navbar>
 		<view class="tracks-tip">
 			<u-icon name="volume" color="#f9ae3d" size="19"></u-icon>
 			<text class="tracks-tip-text">右划删除浏览记录</text>
 		</view>
-		<u-empty text="暂无历史记录" style="margin-top:200rpx;" mode="history" v-if="whetherEmpty"></u-empty>
+		<u-empty text="暂无历史记录" style="margin-top:200rpx;" mode="history" v-if="isEmpty"></u-empty>
 		<view v-else class="tracks-list">
 			<block v-for="(item, index) in trackList" :key="index">
 				<view
@@ -26,9 +26,9 @@
 					<u-swipe-action-item
 						:show="item.show"
 						:name="index"
-						@click="delTracks"
-						@open="open"
-						:options="options"
+						@click="deleteTracks"
+						@open="openSwipe"
+						:options="swipeOptions"
 					>
 						<view class="myTracks-item">
 							<u-checkbox-group v-if="isEdit" class="store-line-check">
@@ -37,7 +37,7 @@
 									shape="circle"
 									:active-color="lightColor"
 									v-model:checked="item.checked"
-									@change="checkboxChangeDP(item)"
+									@change="onTrackCheckChange(item)"
 								></u-checkbox>
 							</u-checkbox-group>
 							<view class="myTracks-item-img" @click.stop="navigateToDetail(item)">
@@ -56,7 +56,7 @@
 				</u-swipe-action>
 				<view class="myTracks-divider"></view>
 			</block>
-			<view v-if="isEdit" class="submit" @click="handleClickDeleteSelected">
+			<view v-if="isEdit" class="submit" @click="deleteSelectedTracks">
 				删除所选
 			</view>
 		</view>
@@ -64,172 +64,147 @@
 	</view>
 </template>
 
-<script>
-	import {
-		myTrackList,
-		deleteHistoryListId
-	} from "@/api/members.js";
-	import { getStoreBaseInfo } from "@/api/store.js";
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { onShow, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import { unitPrice } from '@/utils/filters.js'
+import { myTrackList, deleteHistoryListId } from '@/api/members.js'
+import { getStoreBaseInfo } from '@/api/store.js'
 
-	export default {
-		data() {
-			return {
-				isEdit:false,
-				whetherEmpty: false, //是否数据为空
-				params: {
-					pageNumber: 1,
-					pageSize: 10,
-					order: "desc",
-					sort: "updateTime",
-				},
-				lightColor:this.$lightColor,
-				options: [{
-					text: '删除',
-					style: {
-						backgroundColor: '#dd524d'
-					}
-				}],
-				trackList: [], //足迹列表
-				storeNameMap: {},
-			};
-		},
+const store = useStore()
+const lightColor = computed(() => store.getters.lightColor)
 
-		/**
-		 * 滑到底部加载下一页数据
-		 */
-		onReachBottom() {
-			this.params.pageNumber++;
-			this.getList();
-		},
-		onShow() {
-			this.params.pageNumber = 1
-			this.trackList = [];
-			this.getList();
-		},
-		onPullDownRefresh() {
-			this.trackList = [];
-			this.getList();
-		},
-		methods: {
-			getStoreName(item) {
-				return item.storeName || this.storeNameMap[item.storeId] || "";
-			},
-			async enrichStoreNames(records) {
-				const storeIds = [
-					...new Set(
-						records
-							.filter((item) => !item.storeName && item.storeId)
-							.map((item) => item.storeId)
-					),
-				].filter((storeId) => !this.storeNameMap[storeId]);
+const isEdit = ref(false)
+const isEmpty = ref(false)
+const params = ref({
+	pageNumber: 1,
+	pageSize: 10,
+	order: 'desc',
+	sort: 'updateTime',
+})
+const swipeOptions = [{ text: '删除', style: { backgroundColor: '#dd524d' } }]
+const trackList = ref<any[]>([])
+const storeNameMap = ref<Record<string, string>>({})
 
-				await Promise.all(
-					storeIds.map(async (storeId) => {
-						try {
-							const res = await getStoreBaseInfo(storeId);
-							const name = res.data?.result?.storeName;
-							if (name) {
-								this.storeNameMap[storeId] = name;
-							}
-						} catch (e) {
-							// ignore
-						}
-					})
-				);
-			},
-			checkboxChangeDP(val){
-				console.log(val)
-			},
-			// 删除所选的数据
-			handleClickDeleteSelected(val){
-				const ids = this.trackList.filter(item=>item.checked).map(item=>item.goodsId);
-				if(!ids.length){
-					uni.showToast({
-						title:"请选择删除数据",
-						icon:"none"
-					})
-				}else{
-					this.delTracks(0,ids)
+onReachBottom(() => {
+	params.value.pageNumber++
+	fetchTrackList()
+})
+
+onShow(() => {
+	params.value.pageNumber = 1
+	trackList.value = []
+	fetchTrackList()
+})
+
+onPullDownRefresh(() => {
+	params.value.pageNumber = 1
+	trackList.value = []
+	fetchTrackList()
+})
+
+function getStoreName(item: any) {
+	return item.storeName || storeNameMap.value[item.storeId] || ''
+}
+
+async function enrichStoreNames(records: any[]) {
+	const storeIds = [
+		...new Set(
+			records
+				.filter((item) => !item.storeName && item.storeId)
+				.map((item) => item.storeId)
+		),
+	].filter((storeId) => !storeNameMap.value[storeId])
+
+	await Promise.all(
+		storeIds.map(async (storeId) => {
+			try {
+				const res = await getStoreBaseInfo(storeId)
+				const name = res.data?.result?.storeName
+				if (name) {
+					storeNameMap.value[storeId] = name
 				}
-			},
-			/**
-			 * 导航到店铺
-			 */
-			navigateToStore(val) {
-				uni.navigateTo({
-					url: "/pages/product/shopPage?id=" + val.storeId,
-				});
-			},
-			open(index) {
-				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
-				// 原本为'false'，再次设置为'false'会无效
-				this.trackList[index].show = true;
-				this.trackList.map((val, idx) => {
-					if (index != idx) this.trackList[idx].show = false;
-				})
-			},
-			/**
-			 * 跳转详情
-			 */
-			navigateToDetail(item) {
-				uni.navigateTo({
-					url: "/pages/product/goods?id=" + item.id + "&goodsId=" + item.goodsId,
-				});
-			},
+			} catch {
+				// ignore
+			}
+		})
+	)
+}
 
-			/**
-			 * 获取我的足迹列表
-			 */
-			getList() {
-				uni.showLoading({
-					title: "加载中",
-				});
-				myTrackList(this.params).then(async (res) => {
-					uni.stopPullDownRefresh();
-					uni.hideLoading();
-					if (res.statusCode == 200) {
-						const records = res.data.result.records || [];
-						records.forEach((item) => {
-							item.show = false;
-							item.checked = false;
-						});
+function onTrackCheckChange(_val: any) {
+	// 勾选状态由 v-model:checked 维护
+}
 
-						if (!records.length) {
-							if (this.trackList.length === 0) {
-								this.whetherEmpty = true;
-							}
-						} else {
-							await this.enrichStoreNames(records);
-							this.trackList.push(...records);
-						}
-					}
-				});
-			},
+function deleteSelectedTracks() {
+	const ids = trackList.value.filter((item) => item.checked).map((item) => item.goodsId)
+	if (!ids.length) {
+		uni.showToast({ title: '请选择删除数据', icon: 'none' })
+		return
+	}
+	deleteTracks(0, ids)
+}
 
+function navigateToStore(val: any) {
+	uni.navigateTo({ url: `/pages/product/shopPage?id=${val.storeId}` })
+}
 
-			/**
-			 * 删除足迹
-			 */
-			delTracks(e, ids) {
-				const index = typeof e === 'object' ? (e.name ?? e.index) : e;
-				const goodsId = ids || this.trackList[index]?.goodsId;
-				if (!goodsId) return;
-				deleteHistoryListId(goodsId).then((res) => {
-					if (res.data.code == 200) {
-						this.trackList = [];
-						this.params.pageNumber = 1
-						this.getList();
-					} else {
-						uni.showToast({
-							title: res.data.message,
-							duration: 2000,
-							icon: "none",
-						});
-					}
-				});
-			},
-		},
-	};
+function openSwipe(index: number) {
+	trackList.value[index].show = true
+	trackList.value.forEach((val, idx) => {
+		if (index !== idx) val.show = false
+	})
+}
+
+function navigateToDetail(item: any) {
+	uni.navigateTo({
+		url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`,
+	})
+}
+
+function fetchTrackList() {
+	uni.showLoading({ title: '加载中' })
+	myTrackList(params.value).then(async (res) => {
+		uni.stopPullDownRefresh()
+		uni.hideLoading()
+		if (res.statusCode === 200) {
+			const records = res.data.result.records || []
+			records.forEach((item: any) => {
+				item.show = false
+				item.checked = false
+			})
+
+			if (!records.length) {
+				if (trackList.value.length === 0) {
+					isEmpty.value = true
+				}
+			} else {
+				isEmpty.value = false
+				await enrichStoreNames(records)
+				trackList.value.push(...records)
+			}
+		}
+	})
+}
+
+function deleteTracks(e: any, ids?: any) {
+	const index = typeof e === 'object' ? (e.name ?? e.index) : e
+	const goodsId = ids || trackList.value[index]?.goodsId
+	if (!goodsId) return
+	deleteHistoryListId(goodsId).then((res) => {
+		if (res.data.code === 200) {
+			trackList.value = []
+			params.value.pageNumber = 1
+			fetchTrackList()
+		} else {
+			uni.showToast({
+				title: res.data.message,
+				duration: 2000,
+				icon: 'none',
+			})
+		}
+	})
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/mine/point/myPoint.vue b/pages/mine/point/myPoint.vue
index 6365db4..d92ce3a 100644
--- a/pages/mine/point/myPoint.vue
+++ b/pages/mine/point/myPoint.vue
@@ -1,249 +1,245 @@
-<template>
-  <view class="content">
-    <view class="portrait-box">
-      <image src="/static/pointTrade/point_bg_1.png" mode=""></image>
-      <image class="point-img" src="/static/pointTrade/tradehall.png" />
-      <view class="position-point">
-       
-
-      </view>
-    </view>
-    <view class="point-summary">
-      <view class="point-summary-item">
-        <text>累计获得：</text>
-        <text class="pcolor">{{ pointData.totalPoint || 0 }}</text>
-      </view>
-      <view class="point-summary-divider"></view>
-      <view class="point-summary-item">
-        <text>剩余积分：</text>
-        <text class="pcolor">{{ pointData.point || 0 }}</text>
-      </view>
-    </view>
-
-    <div class="point-list">
-      <view class="point-item" v-for="(item, index) in pointList" :key="index">
-        <view class="point-item-left">
-          <view class="point-label">{{ item.content }}</view>
-          <view class="point-item-time">{{ item.createTime }}</view>
-        </view>
-        <view class="point-item-value" :class="[item.pointType == 'INCREASE' ? 'plus' : 'reduce']">
-          <text>{{ item.pointType == "INCREASE" ? "+" : "-" }}</text>{{ item.variablePoint }}
-        </view>
-      </view>
-      <uni-load-more :status="count.loadStatus"></uni-load-more>
-    </div>
-  </view>
-</template>
-
-<script>
-import { getPointsData } from "@/api/members.js";
-import { getMemberPointSum } from "@/api/members.js";
-export default {
-  data() {
-    return {
-      count: {
-        loadStatus: "more",
-      },
-      pointList: [], //积分数据集合
-      params: {
-        pageNumber: 1,
-        pageSize: 10,
-      },
-      pointData: {}, //累计获取 未输入 集合
-    };
-  },
-
-  onLoad() {
-    this.initPointData();
-    this.getList();
-  },
-
-  /**
-   * 触底加载
-   */
-  onReachBottom() {
-    this.params.pageNumber++;
-    this.getList();
-  },
-  methods: {
-    /**
-     * 获取积分数据
-     */
-    getList() {
-      let params = this.params;
-      uni.showLoading({
-        title: "加载中",
-      });
-      getPointsData(params).then((res) => {
-         if (this.$store.state.isShowToast){ uni.hideLoading() };
-        if (res.data.success) {
-          let data = res.data.result.records;
-          if (data.length < 10) {
-            this.count["loadStatus"] = "noMore";
-            this.pointList.push(...data);
-          } else {
-            this.pointList.push(...data);
-            if (data.length < 10) this.count["loadStatus"] = "noMore";
-          }
-        }
-      });
-    },
-
-    /**
-     * 获得累计积分使用
-     */
-    initPointData() {
-      getMemberPointSum().then((res) => {
-        this.pointData = res.data.result;
-      });
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.point-list {
-  margin-top: 20rpx;
-}
-.title {
-  height: 80rpx;
-  text-align: center;
-  line-height: 80rpx;
-  font-size: 32rpx;
-  font-weight: bold;
-}
-.plus{
-  color: $light-color;
-  font-weight: bold;
-}
-.reduce{
-  color: $weChat-color;
-  font-weight: bold;
-}
-
-.point-item {
-  width: 100%;
-  min-height: 130rpx;
-  padding: 24rpx 20rpx;
-  background: #ffffff;
-  font-size: $font-sm;
-  border-bottom: 1px solid $border-color-light;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  box-sizing: border-box;
-
-  .point-item-left {
-    flex: 1;
-    min-width: 0;
-    line-height: 40rpx;
-  }
-
-  .point-item-time {
-    color: #999;
-  }
-
-  .point-item-value {
-    flex-shrink: 0;
-    width: 100rpx;
-    text-align: center;
-  }
-}
-
-.point-summary {
-  display: flex;
-  align-items: center;
-  min-height: 100rpx;
-  padding: 28rpx 0;
-  background: #ffffff;
-  border-radius: 0 0 20rpx 20rpx;
-  margin: 0 20rpx;
-  font-size: 26rpx;
-  box-sizing: border-box;
-
-  .point-summary-item {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .point-summary-divider {
-    width: 1px;
-    height: 48rpx;
-    background: $border-color-light;
-    flex-shrink: 0;
-  }
-
-  .pcolor {
-    color: $light-color;
-    margin-left: 8rpx;
-  }
-}
-
-.content {
-  background: #f9f9f9;
-}
-
-.more {
-  text-align: right;
-  color: $u-tips-color;
-  font-size: 24rpx;
-  padding-right: 40rpx !important;
-}
-
-.portrait-box {
-  background-color: $main-color;
-  height: 250rpx;
-   background: linear-gradient(91deg, $light-color 1%, $aider-light-color 99%);
-  border-radius: 20rpx 20rpx 0 0;
-  margin: 20rpx 20rpx 0;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  color: #ffffff;
-
-  > image:first-child {
-    width: 263rpx;
-    height: 250rpx;
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    transform: rotateY(180deg);
-  }
-
-  .position-point {
-    position: absolute;
-    right: -2rpx;
-    top: 0;
-
-    .apply-point {
-      margin-top: 30rpx;
-      text-align: center;
-      line-height: 40rpx;
-      font-size: $font-sm;
-      color: #ffffff;
-      width: 142rpx;
-      height: 40rpx;
-      background: rgba(#ffffff, 0.2);
-      border-radius: 20rpx 0px 0px 20rpx;
-    }
-  }
-  .point-img {
-    height: 108rpx;
-    width: 108rpx;
-    margin-bottom: 30rpx;
-  }
-  .point {
-    font-size: 56rpx;
-  }
-  
-}
-.point-label {
-  font-weight: bold;
-  margin-bottom: 10rpx;
-  color: #666666;
-}
-</style>
+<template>
+  <view class="content">
+    <view class="portrait-box">
+      <image src="/static/pointTrade/point_bg_1.png" mode=""></image>
+      <image class="point-img" src="/static/pointTrade/tradehall.png" />
+      <view class="position-point">
+
+
+      </view>
+    </view>
+    <view class="point-summary">
+      <view class="point-summary-item">
+        <text>累计获得：</text>
+        <text class="pcolor">{{ pointSummary.totalPoint || 0 }}</text>
+      </view>
+      <view class="point-summary-divider"></view>
+      <view class="point-summary-item">
+        <text>剩余积分：</text>
+        <text class="pcolor">{{ pointSummary.point || 0 }}</text>
+      </view>
+    </view>
+
+    <view class="point-list">
+      <view class="point-item" v-for="(item, index) in pointList" :key="index">
+        <view class="point-item-left">
+          <view class="point-label">{{ item.content }}</view>
+          <view class="point-item-time">{{ item.createTime }}</view>
+        </view>
+        <view class="point-item-value" :class="[item.pointType == 'INCREASE' ? 'plus' : 'reduce']">
+          <text>{{ item.pointType == "INCREASE" ? "+" : "-" }}</text>{{ item.variablePoint }}
+        </view>
+      </view>
+      <uni-load-more :status="loadStatus"></uni-load-more>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onLoad, onReachBottom } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import { getPointsData, getMemberPointSum } from '@/api/members.js'
+
+const store = useStore()
+
+const loadStatus = ref('more')
+const pointList = ref<any[]>([])
+const params = ref({ pageNumber: 1, pageSize: 10 })
+const pointSummary = ref<Record<string, any>>({})
+
+onLoad(() => {
+	fetchPointSummary()
+	fetchPointLogList()
+})
+
+onReachBottom(() => {
+	params.value.pageNumber++
+	fetchPointLogList()
+})
+
+function hideLoadingIfNeeded() {
+	if (store.state.isShowToast) uni.hideLoading()
+}
+
+function fetchPointLogList() {
+	uni.showLoading({ title: '加载中' })
+	getPointsData(params.value).then((res) => {
+		hideLoadingIfNeeded()
+		if (res.data.success) {
+			const data = res.data.result.records || []
+			if (data.length < params.value.pageSize) {
+				loadStatus.value = 'noMore'
+			}
+			pointList.value.push(...data)
+		}
+	})
+}
+
+function fetchPointSummary() {
+	getMemberPointSum().then((res) => {
+		pointSummary.value = res.data.result
+	})
+}
+</script>
+
+<style lang="scss">
+page,
+.content {
+  min-height: 100vh;
+  background: #f9f9f9;
+}
+
+.content {
+  overflow: hidden;
+}
+
+.point-list {
+  margin-top: 20rpx;
+  background: #f9f9f9;
+  min-height: calc(100vh - 390rpx);
+  padding-bottom: 24rpx;
+  box-sizing: border-box;
+}
+.title {
+  height: 80rpx;
+  text-align: center;
+  line-height: 80rpx;
+  font-size: 32rpx;
+  font-weight: bold;
+}
+.plus{
+  color: $light-color;
+  font-weight: bold;
+}
+.reduce{
+  color: $weChat-color;
+  font-weight: bold;
+}
+
+.point-item {
+  width: 100%;
+  min-height: 130rpx;
+  padding: 24rpx 20rpx;
+  background: #ffffff;
+  font-size: $font-sm;
+  border-bottom: 1px solid $border-color-light;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+
+  .point-item-left {
+    flex: 1;
+    min-width: 0;
+    line-height: 40rpx;
+  }
+
+  .point-item-time {
+    color: #999;
+  }
+
+  .point-item-value {
+    flex-shrink: 0;
+    width: 100rpx;
+    text-align: center;
+  }
+}
+
+.point-summary {
+  display: flex;
+  align-items: center;
+  min-height: 100rpx;
+  padding: 28rpx 0;
+  background: #ffffff;
+  border-radius: 0 0 20rpx 20rpx;
+  margin: 0 20rpx;
+  font-size: 26rpx;
+  box-sizing: border-box;
+
+  .point-summary-item {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .point-summary-divider {
+    width: 1px;
+    height: 48rpx;
+    background: $border-color-light;
+    flex-shrink: 0;
+  }
+
+  .pcolor {
+    color: $light-color;
+    margin-left: 8rpx;
+  }
+}
+
+.more {
+  text-align: right;
+  color: $u-tips-color;
+  font-size: 24rpx;
+  padding-right: 40rpx !important;
+}
+
+.portrait-box {
+  background-color: $main-color;
+  height: 250rpx;
+   background: linear-gradient(91deg, $light-color 1%, $aider-light-color 99%);
+  border-radius: 20rpx 20rpx 0 0;
+  margin: 20rpx 20rpx 0;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #ffffff;
+
+  > image:first-child {
+    width: 263rpx;
+    height: 250rpx;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    transform: rotateY(180deg);
+  }
+
+  .position-point {
+    position: absolute;
+    right: -2rpx;
+    top: 0;
+
+    .apply-point {
+      margin-top: 30rpx;
+      text-align: center;
+      line-height: 40rpx;
+      font-size: $font-sm;
+      color: #ffffff;
+      width: 142rpx;
+      height: 40rpx;
+      background: rgba(#ffffff, 0.2);
+      border-radius: 20rpx 0px 0px 20rpx;
+    }
+  }
+  .point-img {
+    height: 108rpx;
+    width: 108rpx;
+    margin-bottom: 30rpx;
+  }
+  .point {
+    font-size: 56rpx;
+  }
+
+}
+.point-label {
+  font-weight: bold;
+  margin-bottom: 10rpx;
+  color: #666666;
+}
+
+.point-list .uni-load-more {
+  background: #f9f9f9;
+}
+</style>
diff --git a/pages/mine/set/editionIntro.vue b/pages/mine/set/editionIntro.vue
index 0fe7edb..ebcc8c3 100644
--- a/pages/mine/set/editionIntro.vue
+++ b/pages/mine/set/editionIntro.vue
@@ -16,7 +16,7 @@
 
     <u-cell-group class="cell-group" :border="false">
       <!-- #ifdef APP-PLUS -->
-      <u-cell v-if="IosWhether" is-link title="去评分" @click="checkStar"></u-cell>
+      <u-cell v-if="showIosRating" is-link title="去评分" @click="openAppStoreRating"></u-cell>
       <u-cell is-link title="功能介绍" @click="navigateTo('/pages/mine/set/versionFunctionList')"></u-cell>
       <u-cell is-link title="检查更新" @click="checkUpdate"></u-cell>
       <!-- #endif -->
@@ -40,93 +40,72 @@
   </view>
 </template>
 
-<script>
-import APPUpdate from "@/plugins/APPUpdate";
-import config from "@/config/config";
-import { getAppVersion } from "@/api/message.js";
-export default {
-  data() {
-    return {
-      config,
-      IosWhether: false,
-      editionHistory: [],
-      versionData: {},
-      localVersion: "",
-      params: {
-        pageNumber: 1,
-        pageSize: 5,
-      },
-    };
-  },
-  onLoad() {
-    // #ifdef APP-PLUS
-    const platform = uni.getSystemInfoSync().platform;
-    if (platform === "android") {
-      this.params.type = 0;
-    } else {
-      this.IosWhether = true;
-      this.params.type = 1;
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import APPUpdate from '@/plugins/APPUpdate'
+import config from '@/config/config'
+import { getAppVersion } from '@/api/message.js'
+
+const showIosRating = ref(false)
+const versionData = ref<Record<string, any>>({})
+const localVersion = ref<Record<string, any>>({})
+const params = ref<Record<string, any>>({ pageNumber: 1, pageSize: 5 })
+
+onLoad(() => {
+  // #ifdef APP-PLUS
+  const platform = uni.getSystemInfoSync().platform
+  if (platform === 'android') {
+    params.value.type = 0
+  } else {
+    showIosRating.value = true
+    params.value.type = 1
+  }
+  fetchRemoteVersion(platform)
+
+  plus.runtime.getProperty(plus.runtime.appid, (inf) => {
+    localVersion.value = {
+      versionCode: inf.version.replace(/\./g, ''),
+      version: inf.version,
     }
-    this.getVersion(platform);
+  })
+  // #endif
 
-    plus.runtime.getProperty(plus.runtime.appid, (inf) => {
-      this.localVersion = {
-        versionCode: inf.version.replace(/\./g, ""),
-        version: inf.version,
-      };
-    });
-    // #endif
+  // #ifdef MP-WEIXIN
+  const accountInfo = wx.getAccountInfoSync()
+  localVersion.value = {
+    versionCode: accountInfo.miniProgram.version.replace(/\./g, ''),
+    version: accountInfo.miniProgram.version,
+    envVersion: accountInfo.miniProgram.envVersion,
+  }
+  // #endif
+})
 
-    // #ifdef MP-WEIXIN
-    const accountInfo = wx.getAccountInfoSync();
-    this.version_number = accountInfo.miniProgram.version;
-    this.localVersion = {
-      versionCode: accountInfo.miniProgram.version.replace(/\./g, ""),
-      version: accountInfo.miniProgram.version,
-      envVersion: accountInfo.miniProgram.envVersion,
-    };
-    // #endif
-  },
+async function fetchRemoteVersion(platform: string) {
+  const type = platform === 'android' ? 'ANDROID' : 'IOS'
+  const res = await getAppVersion(type)
+  if (res.data.success) {
+    versionData.value = res.data.result
+  }
+}
 
-  methods: {
-    async getVersion(platform) {
-      let type;
-      platform == "android" ? (type = "ANDROID") : (type = "IOS");
+function navigateTo(url: string) {
+  uni.navigateTo({ url })
+}
 
-      let res = await getAppVersion(type);
-      if (res.data.success) {
-        this.versionData = res.data.result;
-      }
-    },
+function openAppStoreRating() {
+  plus.runtime.launchApplication({
+    action: `itms-apps://itunes.apple.com/app/${config.iosAppId}?action=write-review`,
+  })
+}
 
-    navigateTo(url) {
-      uni.navigateTo({
-        url,
-      });
-    },
-
-    checkStar() {
-      plus.runtime.launchApplication({
-        action: `itms-apps://itunes.apple.com/app/${config.iosAppId}?action=write-review`,
-      });
-    },
-
-    checkUpdate() {
-      if (
-        this.versionData.version.replace(/\./g, "") <
-        this.localVersion.versionCode
-      ) {
-        APPUpdate();
-      } else {
-        uni.showToast({
-          title: "当前版本已是最新版",
-          duration: 2000,
-          icon: "none",
-        });
-      }
-    },
-  },
-};
+function checkUpdate() {
+  if (versionData.value.version?.replace(/\./g, '') < localVersion.value.versionCode) {
+    APPUpdate()
+  } else {
+    uni.showToast({ title: '当前版本已是最新版', duration: 2000, icon: 'none' })
+  }
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/mine/set/feedBack.vue b/pages/mine/set/feedBack.vue
index 51b50c7..d48ea9a 100644
--- a/pages/mine/set/feedBack.vue
+++ b/pages/mine/set/feedBack.vue
@@ -4,9 +4,9 @@
       <view class="box-title">猜你想问</view>
       <view
         class="feedBack-item"
-        :class="{ active: feedBack.type == item.value }"
-        @click="handleClick(index)"
-        v-for="(item, index) in list"
+        :class="{ active: feedbackForm.type == item.value }"
+        @click="selectFeedbackType(index)"
+        v-for="(item, index) in feedbackTypeList"
         :key="index"
       >
         {{ item.text }}
@@ -15,11 +15,11 @@
 
     <view class="feedBack-box">
       <view class="box-title">问题反馈
-        <text class="box-tag" v-if="feedBack.type">@{{ list.find(item => item.value == feedBack.type).text }}</text>
+        <text class="box-tag" v-if="feedbackForm.type">@{{ feedbackTypeList.find(item => item.value == feedbackForm.type)?.text }}</text>
       </view>
       <u-textarea
         class="field-textarea"
-        v-model="feedBack.context"
+        v-model="feedbackForm.context"
         placeholder="请输入反馈信息"
         border="none"
         height="240"
@@ -39,7 +39,7 @@
       <view class="box-title">手机号</view>
       <u-input
         class="field-input"
-        v-model="feedBack.mobile"
+        v-model="feedbackForm.mobile"
         type="number"
         maxlength="11"
         border="none"
@@ -48,98 +48,69 @@
       ></u-input>
     </view>
 
-    <view class="submit" @click="submit()">提交</view>
+    <view class="submit" @click="submitFeedback">提交</view>
   </view>
 
 </template>
 
-<script>
-import storage from "@/utils/storage.js";
-import config from "@/config/config";
-import { feedBack } from "@/api/members.js";
-import { handleUploadAfterRead } from "@/utils/uploadHelper.js";
-export default {
-  data() {
-    return {
-      storage,
-      config,
-      feedBack: {
-        type: "FUNCTION",
-        context: "",
-        mobile: "",
-      },
-      inputStyle: {
-        background: "#fafafa",
-        borderRadius: "12rpx",
-        padding: "0 24rpx",
-        height: "80rpx",
-      },
-      uploadFileList: [],
-      list: [
-        { text: "功能相关", value: "FUNCTION" },
-        { text: "优化反馈", value: "OPTIMIZE" },
-        { text: "其他", value: "OTHER" },
-      ],
-    };
-  },
-  methods: {
-    // 点击反馈内容
-    handleClick(index) {
-      this.feedBack["type"] = this.list[index].value;
-    },
+<script setup lang="ts">
+import { ref, reactive, getCurrentInstance } from 'vue'
+import { feedBack as submitFeedBackApi } from '@/api/members.js'
+import { handleUploadAfterRead } from '@/utils/uploadHelper.js'
 
-    onUploadAfterRead(event) {
-      handleUploadAfterRead(event, this.uploadFileList, (urls) => {
-        this.feedBack.images = urls.join(",");
-      });
-    },
+const { proxy } = getCurrentInstance()!
 
-    /**
-     * 提交意见反馈
-     */
-    submit() {
-      if (!this.feedBack.type) {
-        uni.showToast({
-          title: "请填写反馈类型",
-          duration: 2000,
-          icon: "none",
-        });
-        return false;
-      }
-      if (!this.feedBack.context) {
-        uni.showToast({
-          title: "请填写反馈信息",
-          duration: 2000,
-          icon: "none",
-        });
-        return false;
-      }
-      if (this.feedBack.mobile && !this.$u.test.mobile(this.feedBack.mobile)) {
-        uni.showToast({
-          title: "请填写您的正确手机号",
-          duration: 2000,
-          icon: "none",
-        });
-        return false;
-      }
-      /** 提交 */
-      feedBack(this.feedBack).then((res) => {
-        if (res.data.success) {
-          uni.showToast({
-            title: "提交成功!",
-            duration: 2000,
-            icon: "none",
-          });
-          setTimeout(() => {
-            uni.navigateBack({
-              delta: 1,
-            });
-          }, 500);
-        }
-      });
-    },
-  },
-};
+const feedbackForm = reactive({
+	type: 'FUNCTION',
+	context: '',
+	mobile: '',
+	images: '',
+})
+const inputStyle = {
+	background: '#fafafa',
+	borderRadius: '12rpx',
+	padding: '0 24rpx',
+	height: '80rpx',
+}
+const uploadFileList = ref<any[]>([])
+const feedbackTypeList = [
+	{ text: '功能相关', value: 'FUNCTION' },
+	{ text: '优化反馈', value: 'OPTIMIZE' },
+	{ text: '其他', value: 'OTHER' },
+]
+
+function selectFeedbackType(index: number) {
+	feedbackForm.type = feedbackTypeList[index].value
+}
+
+function onUploadAfterRead(event: any) {
+	handleUploadAfterRead(event, uploadFileList.value, (urls) => {
+		feedbackForm.images = urls.join(',')
+	})
+}
+
+function submitFeedback() {
+	if (!feedbackForm.type) {
+		uni.showToast({ title: '请填写反馈类型', duration: 2000, icon: 'none' })
+		return
+	}
+	if (!feedbackForm.context) {
+		uni.showToast({ title: '请填写反馈信息', duration: 2000, icon: 'none' })
+		return
+	}
+	if (feedbackForm.mobile && !proxy.$u.test.mobile(feedbackForm.mobile)) {
+		uni.showToast({ title: '请填写您的正确手机号', duration: 2000, icon: 'none' })
+		return
+	}
+	submitFeedBackApi(feedbackForm).then((res) => {
+		if (res.data.success) {
+			uni.showToast({ title: '提交成功!', duration: 2000, icon: 'none' })
+			setTimeout(() => {
+				uni.navigateBack({ delta: 1 })
+			}, 500)
+		}
+	})
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/mine/set/personMsg.vue b/pages/mine/set/personMsg.vue
index e256f02..3042c3d 100644
--- a/pages/mine/set/personMsg.vue
+++ b/pages/mine/set/personMsg.vue
@@ -5,48 +5,54 @@
       <view>点击修改头像</view>
     </view>
 
-    <u-form :model="form" ref="uForm" class="form">
-      <u-form-item label="昵称" label-width="150" :border-bottom="true">
+    <up-form
+      :model="form"
+      ref="uForm"
+      class="form"
+      label-position="left"
+      label-width="180rpx"
+    >
+      <up-form-item label="昵称" label-width="180rpx" :border-bottom="true">
         <u-input
           v-model="form.nickName"
           border="none"
           input-align="right"
           placeholder="请输入昵称"
         />
-      </u-form-item>
+      </up-form-item>
 
-      <u-form-item label="性别" label-width="150" :border-bottom="true">
+      <up-form-item label="性别" label-width="180rpx" :border-bottom="true">
         <view class="sex-row">
           <u-radio-group v-model="form.sex" :active-color="lightColor" :gap="40">
             <u-radio name="1" label="男" shape="circle"></u-radio>
             <u-radio name="0" label="女" shape="circle"></u-radio>
           </u-radio-group>
         </view>
-      </u-form-item>
+      </up-form-item>
 
-      <u-form-item label="生日" label-width="150" :border-bottom="true">
+      <up-form-item label="生日" label-width="180rpx" :border-bottom="true">
         <view class="form-value" @click="showBirthday = true">
           {{ birthday || '请选择出生日期' }}
         </view>
         <template #right>
           <u-icon name="arrow-right" color="#ccc" size="16"></u-icon>
         </template>
-      </u-form-item>
+      </up-form-item>
 
-      <u-form-item label="城市" label-width="150" :border-bottom="true">
+      <up-form-item label="城市" label-width="180rpx" :border-bottom="true">
         <view class="form-value" @click="clickRegion">
-          {{ form.___path || '请选择城市' }}
+          {{ form.regionPath || '请选择城市' }}
         </view>
         <template #right>
           <u-icon name="arrow-right" color="#ccc" size="16"></u-icon>
         </template>
-      </u-form-item>
+      </up-form-item>
 
-      <u-form-item label="手机号" label-width="150" :border-bottom="false">
+      <up-form-item label="手机号" label-width="180rpx" :border-bottom="false">
         <view v-if="form.mobile" class="form-value">{{ form.mobile }}</view>
-        <view v-else class="bind-mobile" @click="navigateTo(form.username)">绑定手机号码</view>
-      </u-form-item>
-    </u-form>
+        <view v-else class="bind-mobile" @click="navigateToBindMobile(form.username)">绑定手机号码</view>
+      </up-form-item>
+    </up-form>
 
     <view class="bottom">
       <view class="submit" @click="submit">保存</view>
@@ -74,152 +80,135 @@
   </view>
 </template>
 
-<script>
-import { saveUserInfo } from "@/api/members.js";
-import { upload } from "@/api/common.js";
-import storage from "@/utils/storage.js";
-import city from "@/components/m-city/m-city.vue";
+<script setup lang="ts">
+import { ref, reactive, computed } from 'vue'
+import { onShow } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import { quiteLoginOut } from '@/utils/filters.js'
+import { saveUserInfo } from '@/api/members.js'
+import { upload } from '@/api/common.js'
+import storage from '@/utils/storage.js'
+import MCity from '@/components/m-city/m-city.vue'
 
-function parseBirthdayTimestamp(str) {
-  if (!str) {
-    return Date.now();
-  }
-  const timestamp = Date.parse(String(str).replace(/-/g, "/"));
-  return Number.isFinite(timestamp) ? timestamp : Date.now();
+function parseBirthdayTimestamp(str?: string) {
+	if (!str) return Date.now()
+	const timestamp = Date.parse(String(str).replace(/-/g, '/'))
+	return Number.isFinite(timestamp) ? timestamp : Date.now()
 }
 
-function formatBirthday(timestamp) {
-  const date = new Date(timestamp);
-  const year = date.getFullYear();
-  const month = String(date.getMonth() + 1).padStart(2, "0");
-  const day = String(date.getDate()).padStart(2, "0");
-  return `${year}-${month}-${day}`;
+function formatBirthday(timestamp: number) {
+	const date = new Date(timestamp)
+	const year = date.getFullYear()
+	const month = String(date.getMonth() + 1).padStart(2, '0')
+	const day = String(date.getDate()).padStart(2, '0')
+	return `${year}-${month}-${day}`
 }
 
-export default {
-  components: { "m-city": city },
-  data() {
-    const userInfo = storage.getUserInfo() || {};
-    return {
-      lightColor: this.$lightColor,
-      form: {
-        nickName: userInfo.nickName || "",
-        birthday: userInfo.birthday || "",
-        face: userInfo.face || "/static/missing-face.png",
-        regionId: [],
-        region: userInfo.region || [],
-        sex: userInfo.sex != null ? String(userInfo.sex) : "1",
-        ___path: userInfo.region,
-        mobile: userInfo.mobile,
-        username: userInfo.username,
-      },
-      birthday: userInfo.birthday || "",
-      birthdayValue: parseBirthdayTimestamp(userInfo.birthday),
-      minBirthdayDate: new Date("1950-01-01").getTime(),
-      maxBirthdayDate: Date.now(),
-      region: [
-        {
-          id: "",
-          localName: "请选择",
-          children: [],
-        },
-      ],
-      showBirthday: false,
-    };
-  },
-  methods: {
-    getPickerParentValue(e) {
-      this.form.region = [];
-      this.form.regionId = [];
-      let name = "";
+const store = useStore()
+const lightColor = computed(() => store.getters.lightColor)
 
-      e.forEach((item, index) => {
-        if (item.id) {
-          this.form.region.push(item.localName);
-          this.form.regionId.push(item.id);
-          if (index == e.length - 1) {
-            name += item.localName;
-          } else {
-            name += item.localName + ",";
-          }
-          this.form.___path = name;
-        }
-      });
-    },
+const userInfo = storage.getUserInfo() || {}
+const form = reactive<Record<string, any>>({
+	nickName: userInfo.nickName || '',
+	birthday: userInfo.birthday || '',
+	face: userInfo.face || '/static/missing-face.png',
+	regionId: [],
+	region: userInfo.region || [],
+	sex: userInfo.sex != null ? String(userInfo.sex) : '1',
+	regionPath: userInfo.region,
+	mobile: userInfo.mobile,
+	username: userInfo.username,
+})
+const birthday = ref(userInfo.birthday || '')
+const birthdayValue = ref(parseBirthdayTimestamp(userInfo.birthday))
+const minBirthdayDate = new Date('1950-01-01').getTime()
+const maxBirthdayDate = Date.now()
+const region = ref([{ id: '', localName: '请选择', children: [] }])
+const showBirthday = ref(false)
+const cityPicker = ref<any>(null)
 
-    clickRegion() {
-      this.$refs.cityPicker.show();
-    },
+function getPickerParentValue(selected: any[]) {
+	form.region = []
+	form.regionId = []
+	let name = ''
+	selected.forEach((item, index) => {
+		if (item.id) {
+			form.region.push(item.localName)
+			form.regionId.push(item.id)
+			name += index === selected.length - 1 ? item.localName : `${item.localName},`
+			form.regionPath = name
+		}
+	})
+}
 
-    submit() {
-      delete this.form.___path;
-      const params = JSON.parse(JSON.stringify(this.form));
-      saveUserInfo(params).then((res) => {
-        if (res.statusCode == 200) {
-          storage.setUserInfo(res.data.result);
-          uni.navigateBack();
-        }
-      });
-    },
+function clickRegion() {
+	cityPicker.value?.show()
+}
 
-    changeFace() {
-      uni.chooseImage({
-        success: (chooseImageRes) => {
-          const tempFilePaths = chooseImageRes.tempFilePaths;
-          uni.uploadFile({
-            url: upload,
-            filePath: tempFilePaths[0],
-            name: "file",
-            header: {
-              accessToken: storage.getAccessToken(),
-            },
-            success: (uploadFileRes) => {
-              const data = JSON.parse(uploadFileRes.data);
-              this.form.face = data.result;
-            },
-          });
-        },
-      });
-    },
+function submit() {
+	const params = JSON.parse(JSON.stringify(form))
+	delete params.regionPath
+	saveUserInfo(params).then((res) => {
+		if (res.statusCode === 200) {
+			storage.setUserInfo(res.data.result)
+			uni.navigateBack()
+		}
+	})
+}
 
-    selectTime(e) {
-      const timestamp = typeof e?.value === "number" ? e.value : this.birthdayValue;
-      const formatted = formatBirthday(timestamp);
-      this.birthdayValue = timestamp;
-      this.form.birthday = formatted;
-      this.birthday = formatted;
-      this.showBirthday = false;
-    },
+function changeFace() {
+	uni.chooseImage({
+		success: (chooseImageRes) => {
+			uni.uploadFile({
+				url: upload,
+				filePath: chooseImageRes.tempFilePaths[0],
+				name: 'file',
+				header: { accessToken: storage.getAccessToken() },
+				success: (uploadFileRes) => {
+					const data = JSON.parse(uploadFileRes.data)
+					form.face = data.result
+				},
+			})
+		},
+	})
+}
 
-    closeBirthdayPicker() {
-      this.showBirthday = false;
-    },
+function selectTime(e: any) {
+	const timestamp = typeof e?.value === 'number' ? e.value : birthdayValue.value
+	const formatted = formatBirthday(timestamp)
+	birthdayValue.value = timestamp
+	form.birthday = formatted
+	birthday.value = formatted
+	showBirthday.value = false
+}
 
-    navigateTo(username) {
-      uni.navigateTo({
-        url: "/pages/mine/set/securityCenter/bindMobile?username=" + username,
-      });
-    },
+function closeBirthdayPicker() {
+	showBirthday.value = false
+}
 
-    syncUserInfo() {
-      const userInfo = storage.getUserInfo() || {};
-      this.form.nickName = userInfo.nickName || "";
-      this.form.birthday = userInfo.birthday || "";
-      this.form.face = userInfo.face || "/static/missing-face.png";
-      this.form.region = userInfo.region || [];
-      this.form.sex = userInfo.sex != null ? String(userInfo.sex) : "1";
-      this.form.___path = userInfo.region;
-      this.form.mobile = userInfo.mobile;
-      this.form.username = userInfo.username;
-      this.birthday = userInfo.birthday || "";
-      this.birthdayValue = parseBirthdayTimestamp(userInfo.birthday);
-    },
-  },
+function navigateToBindMobile(username: string) {
+	uni.navigateTo({
+		url: `/pages/mine/set/securityCenter/bindMobile?username=${username}`,
+	})
+}
 
-  onShow() {
-    this.syncUserInfo();
-  },
-};
+function syncUserInfo() {
+	const latest = storage.getUserInfo() || {}
+	form.nickName = latest.nickName || ''
+	form.birthday = latest.birthday || ''
+	form.face = latest.face || '/static/missing-face.png'
+	form.region = latest.region || []
+	form.sex = latest.sex != null ? String(latest.sex) : '1'
+	form.regionPath = latest.region
+	form.mobile = latest.mobile
+	form.username = latest.username
+	birthday.value = latest.birthday || ''
+	birthdayValue.value = parseBirthdayTimestamp(latest.birthday)
+}
+
+onShow(() => {
+	syncUserInfo()
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/mine/set/securityCenter/bindMobile.vue b/pages/mine/set/securityCenter/bindMobile.vue
index 54fe34f..48e860a 100644
--- a/pages/mine/set/securityCenter/bindMobile.vue
+++ b/pages/mine/set/securityCenter/bindMobile.vue
@@ -1,227 +1,211 @@
 <template>
 	<view class="box">
 		<view class="box-tips">
-			<h2 class='h2'>
-				绑定手机号码
-			</h2>
+			<h2 class="h2">绑定手机号码</h2>
 			<view class="verification"></view>
 		</view>
 		<view class="form">
-			<u-form :model="codeForm" ref="validateCodeForm">
-				<view v-if="!validateFlage">
-					<u-form-item label-width="120" label="手机号" prop="mobile">
+			<up-form
+        :model="codeForm"
+        ref="validateCodeForm"
+        label-position="left"
+        label-width="180rpx"
+      >
+				<view v-if="!phoneVerified">
+					<up-form-item label-width="180rpx" label="手机号" prop="mobile">
 						<u-input maxlength="11" v-model="codeForm.mobile" placeholder="请输入您的手机号" />
-					</u-form-item>
-					
-					<u-form-item class="sendCode" label-width="120" prop="code" label="验证码">
-						<u-input v-model="codeForm.code" placeholder="请输入验证码" />
-						<u-code unique-key="page-edit" :seconds="seconds" @end="end" @start="start"
-							ref="uCode" @change="codeChange"></u-code>
-						<view @tap="getCode" class="text-tips">{{ tips }}</view>
-					</u-form-item>
+					</up-form-item>
 
-					<view class="submit" @click="validatePhone">绑定</view>
-					<myVerification keep-running @send="verification" class="verification" ref="verification"
-						business="BIND_MOBILE" />
+					<up-form-item class="sendCode" label-width="180rpx" prop="code" label="验证码">
+						<u-input v-model="codeForm.code" placeholder="请输入验证码" />
+						<u-code
+							unique-key="page-edit"
+							:seconds="seconds"
+							@end="onCodeCountdownEnd"
+							@start="onCodeCountdownStart"
+							ref="uCodeRef"
+							@change="onCodeTextChange"
+						></u-code>
+						<view @tap="requestSmsCode" class="text-tips">{{ codeTips }}</view>
+					</up-form-item>
+
+					<view class="submit" @click="submitBindMobile">绑定</view>
+					<myVerification
+						keep-running
+						@send="onVerificationPassed"
+						class="verification"
+						ref="verificationRef"
+						business="BIND_MOBILE"
+					/>
 				</view>
-			</u-form>
+			</up-form>
 		</view>
 	</view>
 </template>
 
-<script>
-import {
-	sendMobile,
-	bindMobile
-} from "@/api/login";
-import { getUserInfo } from "@/api/members.js";
-import storage from "@/utils/storage.js";
+<script setup lang="ts">
+import { ref, reactive, watch, getCurrentInstance } from 'vue'
+import { onLoad, onReady } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import { sendMobile, bindMobile } from '@/api/login'
+import { getUserInfo } from '@/api/members.js'
+import storage from '@/utils/storage.js'
+import MyVerification from '@/components/verification/verification.vue'
 
-import myVerification from "@/components/verification/verification.vue"; //验证
-import uuid from "@/utils/uuid.modified.js";
-	export default {
-		components: {
-			myVerification,
+const store = useStore()
+const { proxy } = getCurrentInstance()!
+
+const phoneVerified = ref(false)
+const verificationPassed = ref(false)
+const codeForm = reactive({
+	mobile: '',
+	code: '',
+	username: '',
+})
+const codeTips = ref('')
+const seconds = 69
+
+const validateCodeForm = ref<any>(null)
+const uCodeRef = ref<any>(null)
+const verificationRef = ref<any>(null)
+
+const codeRules = {
+	mobile: [
+		{
+			validator: (_rule: any, value: string) => proxy.$u.test.mobile(value),
+			message: '手机号码不正确',
+			trigger: ['blur'],
 		},
-		data() {
-			return {
-				uuid,
-				validateFlage: false, //是否进行了手机号验证
-				step: 0, //当前验证步骤
-				flage: false, //是否验证码验证
-				codeForm: {
-					mobile: "", //手机号
-					code: "", //验证码
-					username: "", //用户名
-				},
-				tips: "", //提示
-				seconds: 69, // 60s等待时间
-
-				// 验证码登录校验
-				codeRules: {
-					mobile: [{
-						validator: (rule, value, callback) => {
-							return this.$u.test.mobile(value);
-						},
-						message: "手机号码不正确",
-						trigger: ["blur"],
-					}, ],
-					code: [{
-						min: 4,
-						max: 6,
-						required: true,
-						message: "请输入验证码",
-						trigger: ["blur"],
-					}, ],
-				},
-			};
-		},
-		onLoad(options) {
-		  this.codeForm.username = options.username;
-		},
-		onReady() {
-			// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
-			this.$refs.validateCodeForm.setRules(this.codeRules);
-		},
-		watch: {
-			flage(val) {
-				if (val) {
-					if (this.$refs.uCode.canGetCode) {
-						uni.showLoading({
-							title: "正在获取验证码",
-						});
-						sendMobile(this.codeForm.mobile, "BIND_MOBILE").then((res) => {
-							 if (this.$store.state.isShowToast){ uni.hideLoading() };
-							// 这里此提示会被this.start()方法中的提示覆盖
-							if (res.data.success) {
-								this.$refs.uCode.start();
-							} else {
-								uni.showToast({
-									title: res.data.message,
-									duration: 2000,
-									icon: "none",
-								});
-								this.flage = false;
-								this.$refs.verification.getCode();
-							}
-						})
-					} else {
-						this.$u.toast("请倒计时结束后再发送");
-					}
-				}
-			},
+	],
+	code: [
+		{
+			min: 4,
+			max: 6,
+			required: true,
+			message: '请输入验证码',
+			trigger: ['blur'],
 		},
+	],
+}
 
-		methods: {
-			// 验证码验证
-			verification(val) {
-				this.flage = val == this.$store.state.verificationKey ? true : false;
-			},
+onLoad((options) => {
+	codeForm.username = options?.username || ''
+})
 
-			// 验证手机号
-			validatePhone() {
-				this.$refs.validateCodeForm.validate((valid) => {
-					if (valid) {
-						bindMobile(this.codeForm).then((res) => {
-							if (res.data.success) {
-								this.validateFlage = !this.validateFlage;
-								// 获取最新的用户信息并更新缓存
-								getUserInfo().then(userRes => {
-									if (userRes.data.success) {
-										storage.setUserInfo(userRes.data.result);
-									}
-									// 显示成功提示
-									uni.showToast({
-										title: "绑定成功!",
-										duration: 2000,
-										icon: "none",
-									});
-									// 返回上一页
-									setTimeout(() => {
-										uni.navigateBack({
-											delta: 1,
-										});
-									}, 1000);
-								});
-							}
-						});
-					}
-				});
-			},
+onReady(() => {
+	validateCodeForm.value?.setRules(codeRules)
+})
 
-			codeChange(text) {
-				this.tips = text;
-			},
-			end() {
-				
-				this.flage = false;
-					this.$refs.verification.getCode()
-			},
-
-			/**获取验证码 */
-			getCode() {
-				if (this.tips == "重新获取") {
-					this.$refs.verification.error(); //发送
-				}
-				if (!this.$u.test.mobile(this.codeForm.mobile)) {
-					uni.showToast({
-						title: "请输入正确手机号",
-						icon: "none",
-					});
-					return false;
-				}
-				if (!this.flage) {
-					this.$refs.verification.error(); //发送
-					return false;
-				}
-			},
-			start() {
-				this.$u.toast("验证码已发送");
-				this.flage = true;
-
-				this.$refs.verification.hide();
-			},
-		},
-	};
-</script>
-<style lang="scss" scoped>
-	@import url("@/pages/passport/login.scss");
-
-	::v-deep .u-form-item {
-		margin: 40rpx 0;
+watch(verificationPassed, (val) => {
+	if (!val) return
+	if (!uCodeRef.value?.canGetCode) {
+		proxy.$u.toast('请倒计时结束后再发送')
+		return
 	}
-
-	.sendCode {
-		::v-deep .u-form-item--right__content__slot {
-			display: flex;
+	uni.showLoading({ title: '正在获取验证码' })
+	sendMobile(codeForm.mobile, 'BIND_MOBILE').then((res) => {
+		if (store.state.isShowToast) uni.hideLoading()
+		if (res.data.success) {
+			uCodeRef.value?.start()
+		} else {
+			uni.showToast({ title: res.data.message, duration: 2000, icon: 'none' })
+			verificationPassed.value = false
+			verificationRef.value?.getCode()
 		}
-	}
+	})
+})
 
-	.h2 {
-		font-size: 40rpx;
-		font-weight: bold;
-	}
+function onVerificationPassed(val: string) {
+	verificationPassed.value = val === store.state.verificationKey
+}
 
-	page {
-		background: #fff;
-	}
+function submitBindMobile() {
+	validateCodeForm.value?.validate((valid: boolean) => {
+		if (!valid) return
+		bindMobile(codeForm).then((res) => {
+			if (res.data.success) {
+				phoneVerified.value = true
+				getUserInfo().then((userRes) => {
+					if (userRes.data.success) {
+						storage.setUserInfo(userRes.data.result)
+					}
+					uni.showToast({ title: '绑定成功!', duration: 2000, icon: 'none' })
+					setTimeout(() => {
+						uni.navigateBack({ delta: 1 })
+					}, 1000)
+				})
+			}
+		})
+	})
+}
 
-	.box {
-		padding: 80rpx 0;
-		border-radius: 20rpx;
-	}
+function onCodeTextChange(text: string) {
+	codeTips.value = text
+}
 
-	.submit {
-		background: $light-color;
-	}
+function onCodeCountdownEnd() {
+	verificationPassed.value = false
+	verificationRef.value?.getCode()
+}
 
-	.box-tips {
-		margin: 0 72rpx;
+function requestSmsCode() {
+	if (codeTips.value === '重新获取') {
+		verificationRef.value?.error()
 	}
+	if (!proxy.$u.test.mobile(codeForm.mobile)) {
+		uni.showToast({ title: '请输入正确手机号', icon: 'none' })
+		return
+	}
+	if (!verificationPassed.value) {
+		verificationRef.value?.error()
+	}
+}
 
-	.verification {
-		font-size: 24rpx;
-		color: #999;
-		margin-top: 10rpx;
+function onCodeCountdownStart() {
+	proxy.$u.toast('验证码已发送')
+	verificationPassed.value = true
+	verificationRef.value?.hide()
+}
+</script>
+
+<style lang="scss" scoped>
+@import url("@/pages/passport/login.scss");
+
+::v-deep .u-form-item {
+	margin: 40rpx 0;
+}
+
+.sendCode {
+	::v-deep .u-form-item__body__right__content__slot {
+		display: flex;
 	}
+}
+
+.h2 {
+	font-size: 40rpx;
+	font-weight: bold;
+}
+
+page {
+	background: #fff;
+}
+
+.box {
+	padding: 80rpx 0;
+	border-radius: 20rpx;
+}
+
+.submit {
+	background: $light-color;
+}
+
+.box-tips {
+	margin: 0 72rpx;
+}
+
+.verification {
+	font-size: 24rpx;
+	color: #999;
+	margin-top: 10rpx;
+}
 </style>
diff --git a/pages/mine/set/securityCenter/editLoginPassword.vue b/pages/mine/set/securityCenter/editLoginPassword.vue
index 5024965..25e6d37 100644
--- a/pages/mine/set/securityCenter/editLoginPassword.vue
+++ b/pages/mine/set/securityCenter/editLoginPassword.vue
@@ -1,160 +1,99 @@
 <template>
 	<view class="box">
 		<view class="box-tips">
-			<h2 class='h2'>
-				{{verificationTitle.title}}
-			</h2>
-			<view class="verification">{{verificationTitle.desc}}</view>
+			<h2 class="h2">{{ verificationTitle.title }}</h2>
+			<view class="verification">{{ verificationTitle.desc }}</view>
 		</view>
 		<view class="form">
-			<u-form :model="codeForm" ref="validateCodeForm">
-				<u-form-item label-width="120" label="旧密码">
-						<u-input type="password" v-model="oldPassword" placeholder="请输入您的旧密码" />
-					</u-form-item>
+			<up-form
+        :model="codeForm"
+        ref="validateCodeForm"
+        label-position="left"
+        label-width="180rpx"
+      >
+				<up-form-item label-width="180rpx" label="旧密码">
+					<u-input type="password" v-model="oldPassword" placeholder="请输入您的旧密码" />
+				</up-form-item>
 
-					<u-form-item label-width="120" label="密码">
-						<u-input type="password" v-model="password" placeholder="请输入您的密码" />
-					</u-form-item>
+				<up-form-item label-width="180rpx" label="密码">
+					<u-input type="password" v-model="password" placeholder="请输入您的密码" />
+				</up-form-item>
 
-					<u-form-item label-width="120" label="确认密码">
-						<u-input type="password" v-model="newPassword" placeholder="请再次输入您的密码" />
-					</u-form-item>
+				<up-form-item label-width="180rpx" label="确认密码">
+					<u-input type="password" v-model="confirmPassword" placeholder="请再次输入您的密码" />
+				</up-form-item>
 
-					<view class="submit" @click="updatePassword">修改密码</view>
-			</u-form>
+				<view class="submit" @click="updatePassword">修改密码</view>
+			</up-form>
 		</view>
 	</view>
 </template>
 
-<script>
-	import {
-		resetByMobile,
-		modifyPass
-	} from "@/api/login";
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { modifyPass } from '@/api/login'
+import { md5 } from '@/utils/md5.js'
 
-	import {
-		md5
-	} from "@/utils/md5.js"; // md5
-	import myVerification from "@/components/verification/verification.vue"; //验证
-	import uuid from "@/utils/uuid.modified.js";
-	export default {
-		components: {
-			myVerification,
-		},
-		data() {
-			return {
-				uuid,
-				validateFlage: false, //是否进行了手机号验证
-				verificationTitle: {
-					title: "修改密码",
-					desc: "请验证并输入密码",
-				},
-				step: 0, //当前验证步骤
-				flage: false, //是否验证码验证
+const verificationTitle = {
+	title: '修改密码',
+	desc: '请验证并输入密码',
+}
+const codeForm = reactive({ mobile: '', code: '' })
+const oldPassword = ref('')
+const password = ref('')
+const confirmPassword = ref('')
 
-				codeForm: {
-					mobile: "", //手机号
-					code: "", //验证码
-				},
-				newPassword: "", //新密码
-				password: "", //密码
-				oldPassword: '', //旧密码
-				tips: "", //提示
-				seconds: 69, // 60s等待时间
-
-				// 验证码登录校验
-				codeRules: {
-					mobile: [{
-						validator: (rule, value, callback) => {
-							return this.$u.test.mobile(value);
-						},
-						message: "手机号码不正确",
-						trigger: ["blur"],
-					}, ],
-					code: [{
-						min: 4,
-						max: 6,
-						required: true,
-						message: "请输入验证码",
-						trigger: ["blur"],
-					}, ],
-				},
-			};
-		},
-		onReady() {
-			// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
-			this.$refs.validateCodeForm.setRules(this.codeRules);
-		},
-
-		methods: {
-			// 修改密码
-			updatePassword() {
-				if(this.password !== this.newPassword){
-					uni.showToast({
-						title: "两次输入密码不一致!",
-						icon: "none",
-					});
-					return;
-				}
-				modifyPass({
-					password: md5(this.oldPassword),
-					newPassword: md5(this.newPassword),
-				}).then((res) => {
-					if (res.data.success) {
-						uni.showToast({
-							title: "修改成功!",
-							duration: 2000,
-							icon: "none",
-						});
-						setTimeout(() => {
-							uni.navigateBack({
-								delta: 1,
-							});
-						}, 1000);
-					}
-				});
-			},
-		},
-	};
-</script>
-<style lang="scss" scoped>
-	@import url("@/pages/passport/login.scss");
-
-	::v-deep .u-form-item {
-		margin: 40rpx 0;
+function updatePassword() {
+	if (password.value !== confirmPassword.value) {
+		uni.showToast({ title: '两次输入密码不一致!', icon: 'none' })
+		return
 	}
-
-	.sendCode {
-		::v-deep .u-form-item--right__content__slot {
-			display: flex;
+	modifyPass({
+		password: md5(oldPassword.value),
+		newPassword: md5(password.value),
+	}).then((res) => {
+		if (res.data.success) {
+			uni.showToast({ title: '修改成功!', duration: 2000, icon: 'none' })
+			setTimeout(() => {
+				uni.navigateBack({ delta: 1 })
+			}, 1000)
 		}
-	}
+	})
+}
+</script>
 
-	.h2 {
-		font-size: 40rpx;
-		font-weight: bold;
-	}
+<style lang="scss" scoped>
+@import url("@/pages/passport/login.scss");
 
-	page {
-		background: #fff;
-	}
+::v-deep .u-form-item {
+	margin: 40rpx 0;
+}
 
-	.box {
-		padding: 80rpx 0;
-		border-radius: 20rpx;
-	}
+.h2 {
+	font-size: 40rpx;
+	font-weight: bold;
+}
 
-	.submit {
-		background: $light-color;
-	}
+page {
+	background: #fff;
+}
 
-	.box-tips {
-		margin: 0 72rpx;
-	}
+.box {
+	padding: 80rpx 0;
+	border-radius: 20rpx;
+}
 
-	.verification {
-		font-size: 24rpx;
-		color: #999;
-		margin-top: 10rpx;
-	}
+.submit {
+	background: $light-color;
+}
+
+.box-tips {
+	margin: 0 72rpx;
+}
+
+.verification {
+	font-size: 24rpx;
+	color: #999;
+	margin-top: 10rpx;
+}
 </style>
diff --git a/pages/mine/set/securityCenter/editPassword.vue b/pages/mine/set/securityCenter/editPassword.vue
index 35465a9..b668d6e 100644
--- a/pages/mine/set/securityCenter/editPassword.vue
+++ b/pages/mine/set/securityCenter/editPassword.vue
@@ -1,281 +1,238 @@
 <template>
 	<view class="box">
 		<view class="box-tips">
-			<h2 class='h2'>
-				{{verificationTitle[validateFlage==false ? 0 : 1].title}}
-			</h2>
-			<view class="verification">{{verificationTitle[step].desc}}</view>
+			<h2 class="h2">{{ verificationTitle[phoneVerified ? 1 : 0].title }}</h2>
+			<view class="verification">{{ verificationTitle[step].desc }}</view>
 		</view>
 		<view class="form">
-			<u-form :model="codeForm" ref="validateCodeForm">
-				<view v-if="!validateFlage">
-					<u-form-item label-width="120" label="手机号" prop="mobile">
+			<up-form
+        :model="codeForm"
+        ref="validateCodeForm"
+        label-position="left"
+        label-width="180rpx"
+      >
+				<view v-if="!phoneVerified">
+					<up-form-item label-width="180rpx" label="手机号" prop="mobile">
 						<u-input maxlength="11" v-model="codeForm.mobile" placeholder="请输入您的手机号" />
-					</u-form-item>
+					</up-form-item>
 
-					<u-form-item class="sendCode" label-width="120" prop="code" label="验证码">
+					<up-form-item class="sendCode" label-width="180rpx" prop="code" label="验证码">
 						<u-input v-model="codeForm.code" placeholder="请输入验证码" />
-						<u-code unique-key="page-edit" :seconds="seconds" @end="end" @start="start"
-							ref="uCode" @change="codeChange"></u-code>
-						<view @tap="getCode" class="text-tips">{{ tips }}</view>
-					</u-form-item>
+						<u-code
+							unique-key="page-edit"
+							:seconds="seconds"
+							@end="onCodeCountdownEnd"
+							@start="onCodeCountdownStart"
+							ref="uCodeRef"
+							@change="onCodeTextChange"
+						></u-code>
+						<view @tap="requestSmsCode" class="text-tips">{{ codeTips }}</view>
+					</up-form-item>
 
-					<view class="submit" @click="validatePhone">验证</view>
-					<myVerification keep-running @send="verification" class="verification" ref="verification"
-						business="FIND_USER" />
+					<view class="submit" @click="verifyMobile">验证</view>
+					<myVerification
+						keep-running
+						@send="onVerificationPassed"
+						class="verification"
+						ref="verificationRef"
+						business="FIND_USER"
+					/>
 				</view>
-				<view v-if="validateFlage">
-					<u-form-item label-width="120" label="密码">
+				<view v-if="phoneVerified">
+					<up-form-item label-width="180rpx" label="密码">
 						<u-input type="password" v-model="password" placeholder="请输入您的密码" />
-					</u-form-item>
+					</up-form-item>
 
-					<u-form-item label-width="120" label="确认密码">
-						<u-input type="password" v-model="newPassword" placeholder="请再次输入您的密码" />
-					</u-form-item>
+					<up-form-item label-width="180rpx" label="确认密码">
+						<u-input type="password" v-model="confirmPassword" placeholder="请再次输入您的密码" />
+					</up-form-item>
 
 					<view class="submit" @click="updatePassword">修改密码</view>
 				</view>
-			</u-form>
+			</up-form>
 		</view>
 	</view>
 </template>
 
-<script>
-	import {
-		sendMobile,
-		resetByMobile,
-		resetPassword
-	} from "@/api/login";
+<script setup lang="ts">
+import { ref, reactive, watch, getCurrentInstance } from 'vue'
+import { onReady } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import { isLogin } from '@/utils/filters.js'
+import { sendMobile, resetByMobile, resetPassword } from '@/api/login'
+import { md5 } from '@/utils/md5.js'
+import MyVerification from '@/components/verification/verification.vue'
 
-	import {
-		md5
-	} from "@/utils/md5.js"; // md5
-	import myVerification from "@/components/verification/verification.vue"; //验证
-	import uuid from "@/utils/uuid.modified.js";
-	export default {
-		components: {
-			myVerification,
+const store = useStore()
+const { proxy } = getCurrentInstance()!
+
+const phoneVerified = ref(false)
+const verificationPassed = ref(false)
+const verificationTitle = [
+	{ title: '安全验证', desc: '请输入当前手机号进行安全验证' },
+	{ title: '修改密码', desc: '请输入新密码' },
+]
+const step = ref(0)
+const codeForm = reactive({ mobile: '', code: '' })
+const password = ref('')
+const confirmPassword = ref('')
+const codeTips = ref('')
+const seconds = 69
+
+const validateCodeForm = ref<any>(null)
+const uCodeRef = ref<any>(null)
+const verificationRef = ref<any>(null)
+
+const codeRules = {
+	mobile: [
+		{
+			validator: (_rule: any, value: string) => proxy.$u.test.mobile(value),
+			message: '手机号码不正确',
+			trigger: ['blur'],
 		},
-		data() {
-			return {
-				uuid,
-				validateFlage: false, //是否进行了手机号验证
-				verificationTitle: [{
-						title: "安全验证",
-						desc: "请输入当前手机号进行安全验证",
-					},
-					{
-						title: "修改密码",
-						desc: "请输入新密码",
-					},
-				],
-				step: 0, //当前验证步骤
-				flage: false, //是否验证码验证
-
-				codeForm: {
-					mobile: "", //手机号
-					code: "", //验证码
-				},
-				newPassword: "", //新密码
-				password: "", //密码
-				tips: "", //提示
-				seconds: 69, // 60s等待时间
-
-				// 验证码登录校验
-				codeRules: {
-					mobile: [{
-						validator: (rule, value, callback) => {
-							return this.$u.test.mobile(value);
-						},
-						message: "手机号码不正确",
-						trigger: ["blur"],
-					}, ],
-					code: [{
-						min: 4,
-						max: 6,
-						required: true,
-						message: "请输入验证码",
-						trigger: ["blur"],
-					}, ],
-				},
-			};
+	],
+	code: [
+		{
+			min: 4,
+			max: 6,
+			required: true,
+			message: '请输入验证码',
+			trigger: ['blur'],
 		},
-		onReady() {
-			// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
-			this.$refs.validateCodeForm.setRules(this.codeRules);
-		},
-		watch: {
-			flage(val) {
-				if (val) {
+	],
+}
 
-					if (this.$refs.uCode.canGetCode) {
-						uni.showLoading({
-							title: "正在获取验证码",
-						});
-						sendMobile(this.codeForm.mobile, "FIND_USER").then((res) => {
-							 if (this.$store.state.isShowToast){ uni.hideLoading() };
-							// 这里此提示会被this.start()方法中的提示覆盖
-							if (res.data.success) {
-								this.$refs.uCode.start();
-							} else {
-								uni.showToast({
-									title: res.data.message,
-									duration: 2000,
-									icon: "none",
-								});
-								this.flage = false;
-								this.$refs.verification.getCode();
-							}
-						})
-					} else {
-						this.$u.toast("请倒计时结束后再发送");
-					}
-				}
-			},
-		},
+onReady(() => {
+	validateCodeForm.value?.setRules(codeRules)
+})
 
-		methods: {
-			// 修改密码
-			updatePassword() {
-				if(this.password !== this.newPassword){
-					uni.showToast({
-						title: "两次输入密码不一致!",
-						icon: "none",
-					});
-					return;
-				}
-				resetPassword({
-					password: md5(this.password),
-				}).then((res) => {
-					if (res.data.success) {
-						uni.showToast({
-							title: "修改成功!",
-							duration: 2000,
-							icon: "none",
-						});
-						setTimeout(() => {
-							uni.navigateBack({
-								delta: 1,
-							});
-						}, 1000);
-					}
-				});
-			},
-
-			// 验证码验证
-			verification(val) {
-				this.flage = val == this.$store.state.verificationKey ? true : false;
-			},
-
-			// 验证手机号
-			validatePhone() {
-				this.$refs.validateCodeForm.validate((valid) => {
-					if (valid) {
-						resetByMobile(this.codeForm).then((res) => {
-							if (res.data.success) {
-								this.validateFlage = !this.validateFlage;
-								// 登录成功
-								uni.showToast({
-									title: "验证成功!",
-									icon: "none",
-								});
-							}
-						});
-					}
-				});
-			},
-
-			codeChange(text) {
-				this.tips = text;
-			},
-			end() {
-				
-				this.flage = false;
-					this.$refs.verification.getCode()
-			},
-
-			/**判断是否是当前用户的手机号 */
-			isUserPhone() {
-				let flage = false;
-				let user = this.isLogin();
-				if (user.mobile != this.codeForm.mobile) {
-					uni.showToast({
-						title: "请输入当前绑定手机号",
-						icon: "none",
-					});
-					flage = false;
-				} else {
-					flage = true;
-				}
-
-				return flage;
-			},
-			/**获取验证码 */
-			getCode() {
-				if (this.isUserPhone()) {
-					if (this.tips == "重新获取") {
-						this.$refs.verification.error(); //发送
-					}
-					if (!this.$u.test.mobile(this.codeForm.mobile)) {
-						uni.showToast({
-							title: "请输入正确手机号",
-							icon: "none",
-						});
-						return false;
-					}
-					if (!this.flage) {
-						this.$refs.verification.error(); //发送
-						return false;
-					}
-				}
-			},
-			start() {
-				this.$u.toast("验证码已发送");
-				this.flage = true;
-
-				this.$refs.verification.hide();
-			},
-		},
-	};
-</script>
-<style lang="scss" scoped>
-	@import url("@/pages/passport/login.scss");
-
-	::v-deep .u-form-item {
-		margin: 40rpx 0;
+watch(verificationPassed, (val) => {
+	if (!val) return
+	if (!uCodeRef.value?.canGetCode) {
+		proxy.$u.toast('请倒计时结束后再发送')
+		return
 	}
-
-	.sendCode {
-		::v-deep .u-form-item--right__content__slot {
-			display: flex;
+	uni.showLoading({ title: '正在获取验证码' })
+	sendMobile(codeForm.mobile, 'FIND_USER').then((res) => {
+		if (store.state.isShowToast) uni.hideLoading()
+		if (res.data.success) {
+			uCodeRef.value?.start()
+		} else {
+			uni.showToast({ title: res.data.message, duration: 2000, icon: 'none' })
+			verificationPassed.value = false
+			verificationRef.value?.getCode()
 		}
-	}
+	})
+})
 
-	.h2 {
-		font-size: 40rpx;
-		font-weight: bold;
-	}
+function onVerificationPassed(val: string) {
+	verificationPassed.value = val === store.state.verificationKey
+}
 
-	page {
-		background: #fff;
+function updatePassword() {
+	if (password.value !== confirmPassword.value) {
+		uni.showToast({ title: '两次输入密码不一致!', icon: 'none' })
+		return
 	}
+	resetPassword({ password: md5(password.value) }).then((res) => {
+		if (res.data.success) {
+			uni.showToast({ title: '修改成功!', duration: 2000, icon: 'none' })
+			setTimeout(() => {
+				uni.navigateBack({ delta: 1 })
+			}, 1000)
+		}
+	})
+}
 
-	.box {
-		padding: 80rpx 0;
-		border-radius: 20rpx;
-	}
+function verifyMobile() {
+	validateCodeForm.value?.validate((valid: boolean) => {
+		if (!valid) return
+		resetByMobile(codeForm).then((res) => {
+			if (res.data.success) {
+				phoneVerified.value = true
+				uni.showToast({ title: '验证成功!', icon: 'none' })
+			}
+		})
+	})
+}
 
-	.submit {
-		background: $light-color;
-	}
+function onCodeTextChange(text: string) {
+	codeTips.value = text
+}
 
-	.box-tips {
-		margin: 0 72rpx;
-	}
+function onCodeCountdownEnd() {
+	verificationPassed.value = false
+	verificationRef.value?.getCode()
+}
 
-	.verification {
-		font-size: 24rpx;
-		color: #999;
-		margin-top: 10rpx;
+function isCurrentUserPhone() {
+	const user = isLogin()
+	if (user?.mobile !== codeForm.mobile) {
+		uni.showToast({ title: '请输入当前绑定手机号', icon: 'none' })
+		return false
 	}
+	return true
+}
+
+function requestSmsCode() {
+	if (!isCurrentUserPhone()) return
+	if (codeTips.value === '重新获取') {
+		verificationRef.value?.error()
+	}
+	if (!proxy.$u.test.mobile(codeForm.mobile)) {
+		uni.showToast({ title: '请输入正确手机号', icon: 'none' })
+		return
+	}
+	if (!verificationPassed.value) {
+		verificationRef.value?.error()
+	}
+}
+
+function onCodeCountdownStart() {
+	proxy.$u.toast('验证码已发送')
+	verificationPassed.value = true
+	verificationRef.value?.hide()
+}
+</script>
+
+<style lang="scss" scoped>
+@import url("@/pages/passport/login.scss");
+
+::v-deep .u-form-item {
+	margin: 40rpx 0;
+}
+
+.sendCode {
+	::v-deep .u-form-item__body__right__content__slot {
+		display: flex;
+	}
+}
+
+.h2 {
+	font-size: 40rpx;
+	font-weight: bold;
+}
+
+page {
+	background: #fff;
+}
+
+.box {
+	padding: 80rpx 0;
+	border-radius: 20rpx;
+}
+
+.submit {
+	background: $light-color;
+}
+
+.box-tips {
+	margin: 0 72rpx;
+}
+
+.verification {
+	font-size: 24rpx;
+	color: #999;
+	margin-top: 10rpx;
+}
 </style>
diff --git a/pages/mine/set/securityCenter/faceLogin.vue b/pages/mine/set/securityCenter/faceLogin.vue
index c4ad729..1966ad1 100644
--- a/pages/mine/set/securityCenter/faceLogin.vue
+++ b/pages/mine/set/securityCenter/faceLogin.vue
@@ -4,7 +4,7 @@
     <u-cell-group>
       <u-cell class="border-top" :isLink="false" title="面容登录">
         <template #right-icon>
-          <u-switch @change="faceSwitchChange" active-color="#1abc9c" size="40" v-model="checked"></u-switch>
+          <u-switch @change="onFaceSwitchChange" active-color="#1abc9c" size="40" v-model="enabled"></u-switch>
         </template>
       </u-cell>
     </u-cell-group>
@@ -12,74 +12,65 @@
   </view>
 </template>
 
-<script>
-import storage from "@/utils/storage.js";
-import { setBiolofy } from "@/api/passport.js";
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import storage from '@/utils/storage.js'
+import { setBiolofy } from '@/api/passport.js'
 
-export default {
-  data() {
-    return {
-      lightColor: this.$lightColor,
-      checked: true,
-    };
-  },
-  methods: {
-    faceSwitchChange(value) {
-      if (value === true) {
-        const res = uni.getSystemInfoSync();
-        plus.device.getInfo({
-          success: function (e) {
-            let params = {
-              mobile_type: res.model,
-              secret_key: e.uuid,
-            };
-            setBiolofy(params).then((res) => {
-              if (res.statusCode === 200) {
-                storage.setFaceLogin(true);
-              }
-            });
-          },
-          fail: function (e) {
-            //plus.nativeUI.toast('获取设备信息错误：' + JSON.stringify(e));
-            console.error("getDeviceInfo failed: " + JSON.stringify(e));
-          },
-        });
-      } else {
-        storage.setFaceLogin(false);
+const enabled = ref(false)
+
+onLoad(() => {
+  // #ifdef APP-PLUS
+  uni.checkIsSupportSoterAuthentication({
+    success(res) {
+      if (!res.supportMode.find((e) => e === 'facial')) {
+        plus.nativeUI.toast('此设备不支持面部识别')
+        uni.navigateBack()
       }
+      uni.checkIsSoterEnrolledInDevice({
+        checkAuthMode: 'facial',
+        success(_res) {
+          if (!_res.isEnrolled) {
+            plus.nativeUI.toast('此设备未录入面部信息')
+            uni.navigateBack()
+          }
+        },
+        fail() {
+          uni.navigateBack()
+        },
+      })
     },
-  },
-  onLoad() {
-    // #ifdef APP-PLUS
-    uni.checkIsSupportSoterAuthentication({
-      success(res) {
-        if (!res.supportMode.find((e) => e === "facial")) {
-          plus.nativeUI.toast("此设备不支持面部识别");
-          uni.navigateBack();
-        }
-        uni.checkIsSoterEnrolledInDevice({
-          checkAuthMode: "facial",
-          success(_res) {
-            if (!_res.isEnrolled) {
-              plus.nativeUI.toast("此设备未录入面部信息");
-              uni.navigateBack();
-            }
-          },
-          fail(_err) {
-            // plus.nativeUI.toast(JSON.stringify(_err));
-            uni.navigateBack();
-          },
-        });
+    fail() {
+      uni.navigateBack()
+    },
+  })
+  enabled.value = storage.getFaceLogin() || false
+  // #endif
+})
+
+function onFaceSwitchChange(value: boolean) {
+  if (value) {
+    const systemInfo = uni.getSystemInfoSync()
+    plus.device.getInfo({
+      success(e) {
+        setBiolofy({
+          mobile_type: systemInfo.model,
+          secret_key: e.uuid,
+        }).then((res) => {
+          if (res.statusCode === 200) {
+            storage.setFaceLogin(true)
+          }
+        })
       },
       fail(err) {
-        // plus.nativeUI.toast(JSON.stringify(err));
-        uni.navigateBack();
+        console.error('getDeviceInfo failed: ' + JSON.stringify(err))
       },
-    });
-    this.checked = storage.getFaceLogin() || false;
-    // #endif
-  },
-};
+    })
+  } else {
+    storage.setFaceLogin(false)
+  }
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/mine/set/securityCenter/fingerLogin.vue b/pages/mine/set/securityCenter/fingerLogin.vue
index 8d4a63f..e20f449 100644
--- a/pages/mine/set/securityCenter/fingerLogin.vue
+++ b/pages/mine/set/securityCenter/fingerLogin.vue
@@ -4,7 +4,7 @@
     <u-cell-group>
       <u-cell class="border-top" :isLink="false" title="指纹登录">
         <template #right-icon>
-          <u-switch @change="fingerSwitchChange" :active-color="lightColor" size="40" v-model="checked"></u-switch>
+          <u-switch @change="onFingerSwitchChange" :active-color="lightColor" size="40" v-model="enabled"></u-switch>
         </template>
       </u-cell>
     </u-cell-group>
@@ -12,60 +12,57 @@
   </view>
 </template>
 
-<script>
-import storage from "@/utils/storage.js";
-import { setBiolofy } from "@/api/passport.js";
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import storage from '@/utils/storage.js'
+import { setBiolofy } from '@/api/passport.js'
 
-export default {
-  data() {
-    return {
-      lightColor: this.$lightColor,
-      checked: false,
-    };
-  },
-  methods: {
-    fingerSwitchChange(value) {
-      if (value === true) {
-        const res = uni.getSystemInfoSync();
-        plus.device.getInfo({
-          success: function (e) {
-            let params = {
-              mobile_type: res.model,
-              secret_key: e.uuid,
-            };
-            setBiolofy(params).then((res) => {
-              if (res.statusCode === 200) {
-                storage.setFingerLogin(true);
-              }
-            });
-          },
-          fail: function (e) {
-            console.error("getDeviceInfo failed: " + JSON.stringify(e));
-          },
-        });
-      } else {
-        storage.setFingerLogin(false);
-      }
-    },
-  },
-  onLoad() {
-    // #ifdef APP-PLUS
-    if (!plus.fingerprint.isSupport()) {
-      plus.nativeUI.toast("此设备不支持指纹识别");
-      uni.navigateBack();
-    }
-    if (!plus.fingerprint.isKeyguardSecure()) {
-      plus.nativeUI.toast("此设备未设置密码锁屏");
-      uni.navigateBack();
-    }
-    if (!plus.fingerprint.isEnrolledFingerprints()) {
-      plus.nativeUI.toast("此设备未录入指纹");
-      uni.navigateBack();
-    }
-    this.checked = storage.getFingerLogin() || false;
-    // #endif
-  },
-};
+const store = useStore()
+const lightColor = computed(() => store.getters.lightColor)
+const enabled = ref(false)
+
+onLoad(() => {
+  // #ifdef APP-PLUS
+  if (!plus.fingerprint.isSupport()) {
+    plus.nativeUI.toast('此设备不支持指纹识别')
+    uni.navigateBack()
+  }
+  if (!plus.fingerprint.isKeyguardSecure()) {
+    plus.nativeUI.toast('此设备未设置密码锁屏')
+    uni.navigateBack()
+  }
+  if (!plus.fingerprint.isEnrolledFingerprints()) {
+    plus.nativeUI.toast('此设备未录入指纹')
+    uni.navigateBack()
+  }
+  enabled.value = storage.getFingerLogin() || false
+  // #endif
+})
+
+function onFingerSwitchChange(value: boolean) {
+  if (value) {
+    const systemInfo = uni.getSystemInfoSync()
+    plus.device.getInfo({
+      success(e) {
+        setBiolofy({
+          mobile_type: systemInfo.model,
+          secret_key: e.uuid,
+        }).then((res) => {
+          if (res.statusCode === 200) {
+            storage.setFingerLogin(true)
+          }
+        })
+      },
+      fail(err) {
+        console.error('getDeviceInfo failed: ' + JSON.stringify(err))
+      },
+    })
+  } else {
+    storage.setFingerLogin(false)
+  }
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/pages/mine/set/securityCenter/securityCenter.vue b/pages/mine/set/securityCenter/securityCenter.vue
index dd1a0b9..794b23c 100644
--- a/pages/mine/set/securityCenter/securityCenter.vue
+++ b/pages/mine/set/securityCenter/securityCenter.vue
@@ -2,56 +2,44 @@
   <view class="securityCenter">
     <u-cell-group>
       <u-cell title="修改密码" @click="navigateTo('/pages/mine/set/securityCenter/updatePwdTab')"></u-cell>
-      <u-cell title="注销账户" @click="zhuxiao"></u-cell>
+      <u-cell title="注销账户" @click="confirmAccountDeletion"></u-cell>
     </u-cell-group>
   </view>
 </template>
 
-<script>
-export default {
-  data() {
-    return {
-      mobile: "", //存储手机号
-    };
-  },
+<script setup lang="ts">
+function navigateTo(url: string) {
+  uni.navigateTo({ url })
+}
 
-  methods: {
-    zhuxiao(){
-
-      uni.showModal({
-        title: "警告",
-        content: "您确定要注销当前账号吗？",
-        confirmText: "确定注销",
-        confirmColor: "#FF0000",
-        cancelText: "取消",
-        success: (res) => {
-          if (res.confirm) {
-            uni.showModal({
-              title: "谨慎操作",
-              content: "再次向您确认，您确定要注销当前账号吗？",
-              confirmText: "坚持注销",
-              confirmColor: "#FF0000",
-              cancelText: "取消",
-              success: (res) => {
-                if (res.confirm) {
-                  uni.showToast({
-                    title: "您的注销申请已经提交，待管理员审核后。会自动注销当前账号",
-                    duration: 10000,
-                  });
-                }
-              },
-            });
-          }
-        },
-      });
+function confirmAccountDeletion() {
+  uni.showModal({
+    title: '警告',
+    content: '您确定要注销当前账号吗？',
+    confirmText: '确定注销',
+    confirmColor: '#FF0000',
+    cancelText: '取消',
+    success: (res) => {
+      if (res.confirm) {
+        uni.showModal({
+          title: '谨慎操作',
+          content: '再次向您确认，您确定要注销当前账号吗？',
+          confirmText: '坚持注销',
+          confirmColor: '#FF0000',
+          cancelText: '取消',
+          success: (confirmRes) => {
+            if (confirmRes.confirm) {
+              uni.showToast({
+                title: '您的注销申请已经提交，待管理员审核后。会自动注销当前账号',
+                duration: 10000,
+              })
+            }
+          },
+        })
+      }
     },
-    navigateTo(url) {
-      uni.navigateTo({
-        url: url,
-      });
-    },
-  },
-};
+  })
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/mine/set/securityCenter/updatePwdTab.vue b/pages/mine/set/securityCenter/updatePwdTab.vue
index 997fa69..35e7168 100644
--- a/pages/mine/set/securityCenter/updatePwdTab.vue
+++ b/pages/mine/set/securityCenter/updatePwdTab.vue
@@ -7,22 +7,10 @@
   </view>
 </template>
 
-<script>
-export default {
-  data() {
-    return {
-      mobile: "", //存储手机号
-    };
-  },
-
-  methods: {
-    navigateTo(url) {
-      uni.navigateTo({
-        url: url,
-      });
-    },
-  },
-};
+<script setup lang="ts">
+function navigateTo(url: string) {
+  uni.navigateTo({ url })
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/mine/set/setUp.vue b/pages/mine/set/setUp.vue
index 1fa442e..b54915d 100644
--- a/pages/mine/set/setUp.vue
+++ b/pages/mine/set/setUp.vue
@@ -38,112 +38,95 @@
   </view>
 </template>
 
-<script>
-import config from "@/config/config";
-export default {
-  data() {
-    return {
-      config,
-      userImage: config.defaultUserPhoto,
-      isCertificate: false,
-      userInfo: {},
-      fileSizeString: "0B",
-    };
-  },
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onShow } from '@dcloudio/uni-app'
+import config from '@/config/config'
+import { isLogin, tipsToLogin, quiteLoginOut, logoff } from '@/utils/filters.js'
 
-  methods: {
-    navigateTo(url) {
-      if (url == "/pages/set/securityCenter/securityCenter") {
-        url += `?mobile=${this.userInfo.mobile}`;
-      }
-      uni.navigateTo({
-        url: url,
-      });
-    },
+const userImage = config.defaultUserPhoto
+const userInfo = ref<Record<string, any>>({})
+const fileSizeString = ref('0B')
 
-    getCacheSize() {
-      let that = this;
-      plus.cache.calculate(function (size) {
-        let sizeCache = parseInt(size);
-        if (sizeCache == 0) {
-          that.fileSizeString = "0B";
-        } else if (sizeCache < 1024) {
-          that.fileSizeString = sizeCache + "B";
-        } else if (sizeCache < 1048576) {
-          that.fileSizeString = (sizeCache / 1024).toFixed(2) + "KB";
-        } else if (sizeCache < 1073741824) {
-          that.fileSizeString = (sizeCache / 1048576).toFixed(2) + "MB";
-        } else {
-          that.fileSizeString = (sizeCache / 1073741824).toFixed(2) + "GB";
-        }
-      });
-    },
+onShow(() => {
+	userInfo.value = isLogin() || {}
+	// #ifdef APP-PLUS
+	getCacheSize()
+	// #endif
+})
 
-    checkUserInfo() {
-      if (this.isLogin("auth")) {
-        this.navigateTo("/pages/mine/set/personMsg");
-      } else {
-        this.tipsToLogin();
-      }
-    },
+function navigateTo(url: string) {
+	if (url === '/pages/mine/set/securityCenter/securityCenter') {
+		url += `?mobile=${userInfo.value.mobile || ''}`
+	}
+	uni.navigateTo({ url })
+}
 
-    clearCache() {
-      let that = this;
-      let os = plus.os.name;
-      if (os == "Android") {
-        let main = plus.android.runtimeMainActivity();
-        let sdRoot = main.getCacheDir();
-        let files = plus.android.invoke(sdRoot, "listFiles");
-        let len = files.length;
-        for (let i = 0; i < len; i++) {
-          let filePath = "" + files[i];
-          plus.io.resolveLocalFileSystemURL(
-            filePath,
-            function (entry) {
-              if (entry.isDirectory) {
-                entry.removeRecursively(
-                  function () {
-                    uni.showToast({
-                      title: "缓存清理完成",
-                      duration: 2000,
-                      icon: "none",
-                    });
-                    that.getCacheSize();
-                  },
-                  function () {}
-                );
-              } else {
-                entry.remove();
-              }
-            },
-            function () {
-              uni.showToast({
-                title: "文件路径读取失败",
-                duration: 2000,
-                icon: "none",
-              });
-            }
-          );
-        }
-      } else {
-        plus.cache.clear(function () {
-          uni.showToast({
-            title: "缓存清理完成",
-            duration: 2000,
-            icon: "none",
-          });
-          that.getCacheSize();
-        });
-      }
-    },
-  },
-  onShow() {
-    this.userInfo = this.isLogin();
-    // #ifdef APP-PLUS
-    this.getCacheSize();
-    // #endif
-  },
-};
+function getCacheSize() {
+	// #ifdef APP-PLUS
+	plus.cache.calculate((size) => {
+		const sizeCache = parseInt(String(size))
+		if (sizeCache === 0) {
+			fileSizeString.value = '0B'
+		} else if (sizeCache < 1024) {
+			fileSizeString.value = `${sizeCache}B`
+		} else if (sizeCache < 1048576) {
+			fileSizeString.value = `${(sizeCache / 1024).toFixed(2)}KB`
+		} else if (sizeCache < 1073741824) {
+			fileSizeString.value = `${(sizeCache / 1048576).toFixed(2)}MB`
+		} else {
+			fileSizeString.value = `${(sizeCache / 1073741824).toFixed(2)}GB`
+		}
+	})
+	// #endif
+}
+
+function checkUserInfo() {
+	if (isLogin('auth')) {
+		navigateTo('/pages/mine/set/personMsg')
+	} else {
+		tipsToLogin()
+	}
+}
+
+function clearCache() {
+	// #ifdef APP-PLUS
+	const os = plus.os.name
+	if (os === 'Android') {
+		const main = plus.android.runtimeMainActivity()
+		const sdRoot = main.getCacheDir()
+		const files = plus.android.invoke(sdRoot, 'listFiles')
+		const len = files.length
+		for (let i = 0; i < len; i++) {
+			const filePath = `${files[i]}`
+			plus.io.resolveLocalFileSystemURL(
+				filePath,
+				(entry) => {
+					if (entry.isDirectory) {
+						entry.removeRecursively(
+							() => {
+								uni.showToast({ title: '缓存清理完成', duration: 2000, icon: 'none' })
+								getCacheSize()
+							},
+							() => {}
+						)
+					} else {
+						entry.remove()
+					}
+				},
+				() => {
+					uni.showToast({ title: '文件路径读取失败', duration: 2000, icon: 'none' })
+				}
+			)
+		}
+	} else {
+		plus.cache.clear(() => {
+			uni.showToast({ title: '缓存清理完成', duration: 2000, icon: 'none' })
+			getCacheSize()
+		})
+	}
+	// #endif
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/mine/set/versionFunctionList.vue b/pages/mine/set/versionFunctionList.vue
index eb550b1..1d8f06c 100644
--- a/pages/mine/set/versionFunctionList.vue
+++ b/pages/mine/set/versionFunctionList.vue
@@ -1,58 +1,45 @@
 <template>
   <div>
-    <u-collapse v-if="versionData.length !=0">
-      <u-collapse-item class="version-item" :title="item.versionName" v-for="(item, index) in versionData" :key="index">
-        <!-- {{item.body}} -->
-
-        {{item.content}}
+    <u-collapse v-if="versionList.length !== 0">
+      <u-collapse-item
+        class="version-item"
+        :title="item.versionName"
+        v-for="(item, index) in versionList"
+        :key="index"
+      >
+        {{ item.content }}
       </u-collapse-item>
-
     </u-collapse>
     <u-empty class="empty" v-else text="暂无版本信息" mode="list"></u-empty>
   </div>
 </template>
 
-<script>
-import { getAppVersionList } from "@/api/message";
-export default {
-  data() {
-    return {
-      versionData: [],
-      appType: "",
-      params: {
-        pageNumber: 1,
-        pageSize: 10,
-      },
-    };
-  },
-  mounted() {
-    const platform = uni.getSystemInfoSync().platform;
-    /**
-     * 获取是否是安卓
-     */
-    if (platform === "android") {
-      this.appType = "ANDROID";
-    } else {
-      this.IosWhether = true;
-      this.appType = "IOS";
-    }
-    this.getVersionList();
-  },
-  methods: {
-    async getVersionList() {
-      let res = await getAppVersionList(this.appType, this.params);
-      if (res.data.success) {
-        this.versionData = res.data.result.records;
-      }
-    },
-  },
-};
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { getAppVersionList } from '@/api/message'
+
+const versionList = ref<any[]>([])
+const appType = ref('')
+const params = { pageNumber: 1, pageSize: 10 }
+
+onLoad(() => {
+  const platform = uni.getSystemInfoSync().platform
+  appType.value = platform === 'android' ? 'ANDROID' : 'IOS'
+  fetchVersionList()
+})
+
+async function fetchVersionList() {
+  const res = await getAppVersionList(appType.value, params)
+  if (res.data.success) {
+    versionList.value = res.data.result.records
+  }
+}
 </script>
 
 <style scoped lang="scss">
-.version-item{
-    padding: 10rpx;
-    background: #fff;
+.version-item {
+  padding: 10rpx;
+  background: #fff;
 }
-
-</style>
\ No newline at end of file
+</style>
diff --git a/pages/mine/signIn.vue b/pages/mine/signIn.vue
index 2cfa3c7..fd034bb 100644
--- a/pages/mine/signIn.vue
+++ b/pages/mine/signIn.vue
@@ -3,10 +3,10 @@
     <view class="date-card">
       <div class="box">
         <div class="circle-box">
-          <div class="cricle" @click="signIn()">
-            <span v-if="!ifSign" :class="{ active: signFlag || ifSign }">签到</span>
-            <span v-else :class="{ active: signFlag || ifSign }"
-              :style="ifSign ? 'transform: rotateY(0deg);' : ''">已签</span>
+          <div class="cricle" @click="handleSignIn()">
+            <span v-if="!hasSignedToday" :class="{ active: signAnimating || hasSignedToday }">签到</span>
+            <span v-else :class="{ active: signAnimating || hasSignedToday }"
+              :style="hasSignedToday ? 'transform: rotateY(0deg);' : ''">已签</span>
           </div>
         </div>
         <text class="tips">坚持每天连续签到可以获多重奖励哦</text>
@@ -22,19 +22,19 @@
         <view class="week">
           <text v-for="item in weekArr" :key="item.id">{{ item }}</text>
         </view>
-        <view class="date" v-for="obj in dataObj" :key="obj.id">
-          <view class="item" v-for="item in obj" :key="item.id" :class="item == '' ? 'hide' : ''"
+        <view class="date" v-for="(obj, rowIndex) in calendarRows" :key="rowIndex">
+          <view class="item" v-for="(item, dayIndex) in obj" :key="dayIndex" :class="item == '' ? 'hide' : ''"
             :animation="item == currentDay ? animationData : ''">
-            <view class="just" :class="signArr.indexOf(item) != -1 ? 'active' : ''">
+            <view class="just" :class="signedDays.indexOf(item) != -1 ? 'active' : ''">
               <view class="top">{{ item }} </view>
               <view class="bottom">
                 <u-icon name="error" v-if="item <= currentDay" size="24" color="#999"></u-icon>
               </view>
             </view>
-            <view class="back" :class="signArr.indexOf(item) != -1 ? 'active' : ''" :style="
-                signArr.indexOf(item) != -1 && ifSign
+            <view class="back" :class="signedDays.indexOf(item) != -1 ? 'active' : ''" :style="
+                signedDays.indexOf(item) != -1 && hasSignedToday
                   ? 'transform: rotateY(0deg);'
-                  : signArr.indexOf(item) != -1 && item != currentDay
+                  : signedDays.indexOf(item) != -1 && item != currentDay
                   ? 'transform: rotateY(0deg);'
                   : ''
               ">
@@ -47,11 +47,11 @@
         </view>
       </view>
     </div>
-    <view class="mask" :class="{ show: maskFlag, trans: transFlag }" ref="mask">
+    <view class="mask" :class="{ show: showSuccessMask, trans: maskClosing }" ref="mask">
       <view class="mask-header">
         <text class="close"></text>
         <text>签到成功</text>
-        <text class="close" @click="close">×</text>
+        <text class="close" @click="closeSuccessMask">×</text>
       </view>
       <view class="mask-con">
         <u-icon size="120" style="margin: 50rpx 0" :color="aiderLightColor" name="checkmark"></u-icon>
@@ -61,231 +61,147 @@
   </view>
 </template>
 
-<script>
-import { sign, signTime } from "@/api/point.js";
-export default {
-  data() {
-    return {
-      aiderLightColor:this.$aiderLightColor,
-      signFlag: false,
-      animationData: {},
-      maskFlag: false, //
-      transFlag: false, //动画
-      weekArr: ["日", "一", "二", "三", "四", "五", "六"], //周数组
-      dateArr: [], //每个月的天数
-      monthArr: [
-        //实例化每个月
-        "1月",
-        "2月",
-        "3月",
-        "4月",
-        "5月",
-        "6月",
-        "7月",
-        "8月",
-        "9月",
-        "10月",
-        "11月",
-        "12月",
-      ], //今天一个月英文
-      currentMonth: "", //当月
-      currentMonthIndex: "", //当月
-      currentYear: "", //今年
-      currentDay: "", //今天
-      currentWeek: "", //获取当月一号是周几
-      dataObj: [], //一个月有多少天这个获取
-      signArr: [], //本月签到过的天数 该参数用于请求接口后获取当月都哪天签到了
-      signAll: [], //所有签到数据
-      ifSign: false, //今天是否签到
-    };
-  },
-  async onLoad() {
-    //获取签到数据
-    var response = await signTime(
-      new Date().getFullYear() + "" + this.makeUp(new Date().getMonth() + 1)
-    );
-    this.signAll = response.data.result;
-    //获取展示数据
-    this.getDate();
-  },
-  methods: {
-    /**
-     * 补0
-     */
-    makeUp(val) {
-      if (val >= 10) {
-        return val;
-      } else {
-        return "0" + val;
-      }
-    },
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import { sign, signTime } from '@/api/point.js'
 
-    /**
-     * 点击签到
-     */
-    async signIn() {
-      await sign().then((response) => {
-        if (this.ifSign) return;
-        if (this.signFlag) return;
-        if (response.data.code != 200) {
-          uni.showToast({
-            title: response.data.message,
-            duration: 2000,
-            icon: "none",
-          });
+const store = useStore()
+const aiderLightColor = computed(() => store.getters.aiderLightColor)
 
-          return false;
-        }
-        var that = this;
-        var animation = uni.createAnimation({
-          duration: 200,
-          timingFunction: "linear",
-        });
-        this.signArr.push(this.currentDay);
-        this.animation = animation;
-        animation.rotateY(0).step();
-        this.animationData = animation.export();
+const signAnimating = ref(false)
+const animationData = ref({})
+const showSuccessMask = ref(false)
+const maskClosing = ref(false)
+const weekArr = ['日', '一', '二', '三', '四', '五', '六']
+const monthLabels = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+const currentMonth = ref('')
+const currentMonthIndex = ref(0)
+const currentYear = ref(0)
+const currentDay = ref(0)
+const calendarRows = ref<any[][]>([])
+const signedDays = ref<number[]>([])
+const signRecords = ref<any[]>([])
+const hasSignedToday = ref(false)
 
-        setTimeout(
-          function () {
-            that.signFlag = true;
-            this.maskFlag = true;
-            this.ifSign = !this.ifSign;
-            animation.rotateY(0).step();
-            this.animationData = animation.export();
-          }.bind(this),
-          200
-        );
-      });
-    },
+onLoad(async () => {
+	const response = await signTime(
+		`${new Date().getFullYear()}${padZero(new Date().getMonth() + 1)}`
+	)
+	signRecords.value = response.data.result
+	buildCalendar()
+})
 
-    /**
-     * 签到成功后关闭弹窗
-     */
-    close() {
-      var that = this;
-      this.maskFlag = false;
-      this.transFlag = true;
-      setTimeout(() => {
-        that.transFlag = false;
-      }, 500);
-    },
+function padZero(val: number) {
+	return val >= 10 ? String(val) : `0${val}`
+}
 
-    /**
-     * 获取今天时间
-     *
-     */
-    getDate() {
-      var date = new Date(),
-        index = date.getMonth(),
-        curDay = null;
-      this.currentYear = date.getFullYear();
-      this.currentMonth = this.monthArr[index];
-      this.currentMonthIndex = index + 1;
-      this.currentDay = date.getDate();
-      if (this.currentDay == this.signArr[this.signArr.length - 1]) {
-        this.ifSign = true;
-      }
-      curDay = this.getWeekByDay(this.currentYear + "-" + (index + 1) + "-1");
-      this.getMonthDays(index, curDay);
-      this.curentSignData();
-    },
+async function handleSignIn() {
+	if (hasSignedToday.value || signAnimating.value) return
 
-    /**
-     * 获取当前已经签到的时间
-     */
-    curentSignData() {
-      var date = new Date(),
-        index = date.getMonth(),
-        curDay = null;
-      this.signArr = [];
-      for (var i = 0; i < this.signAll.length; i++) {
-        var item = this.signAll[i];
-        item.createTime = item.createTime.split(" ")[0];
-        var itemVal = item.createTime.split("-");
-        if (
-          Number(itemVal[0]) === Number(this.currentYear) &&
-          Number(itemVal[1]) === Number(this.currentMonthIndex)
-        ) {
-          this.signArr.push(Number(itemVal[2]));
-        }
-        if (
-          Number(itemVal[0]) === Number(date.getFullYear()) &&
-          Number(itemVal[1]) === Number(index + 1) &&
-          Number(itemVal[2]) === Number(date.getDate())
-        ) {
-          this.ifSign = true;
-        }
-      }
-    },
+	const response = await sign()
+	if (response.data.code !== 200) {
+		uni.showToast({
+			title: response.data.message,
+			duration: 2000,
+			icon: 'none',
+		})
+		return
+	}
 
-    /**
-     *  循环出当前月份的时间
-     *  例子：
-     *  "","","","","","",1,
-     *  2 ,3 ,4 ,5 ,6 ,7 ,8,
-     *  ...依次向下排
-     */
-    getMonthDays(index, day) {
-      //day 当月1号是周几
-      this.dateArr = [];
-      this.dataObj = [];
-      for (var i = 0; i < day; i++) {
-        this.dateArr.push("");
-      }
-      if (
-        index == 0 ||
-        index == 2 ||
-        index == 4 ||
-        index == 6 ||
-        index == 7 ||
-        index == 9 ||
-        index == 11
-      ) {
-        for (let i = 1; i < 32; i++) {
-          this.dateArr.push(i);
-        }
-      }
-      if (index == 3 || index == 5 || index == 8 || index == 10) {
-        for (let i = 1; i < 31; i++) {
-          this.dateArr.push(i);
-        }
-      }
-      if (index == 1) {
-        if (
-          (this.currentYear % 4 == 0 && this.currentYear % 100 != 0) ||
-          this.currentYear % 400 == 0
-        ) {
-          for (let i = 1; i < 30; i++) {
-            this.dateArr.push(i);
-          }
-        } else {
-          for (let i = 1; i < 29; i++) {
-            this.dateArr.push(i);
-          }
-        }
-      }
-      for (var y = 0; y < 10; y++) {
-        if (this.dateArr.length > 7) {
-          this.dataObj.push(this.dateArr.splice(0, 7));
-        } else {
-          for (let i = 0; i < 7 - this.dateArr.length; i++) {
-            this.dateArr.push("");
-          }
-        }
-      }
-      this.dataObj.push(this.dateArr);
-    },
+	const animation = uni.createAnimation({ duration: 200, timingFunction: 'linear' })
+	signedDays.value.push(currentDay.value)
+	animation.rotateY(0).step()
+	animationData.value = animation.export()
 
-    /**
-     * 获取当前月份有几周
-     */
-    getWeekByDay(dayValue) {
-      var day = new Date(Date.parse(dayValue.replace(/-/g, "/"))).getDay(); //将日期值格式化
-      return day;
-    },
-  },
-};
+	setTimeout(() => {
+		signAnimating.value = true
+		showSuccessMask.value = true
+		hasSignedToday.value = true
+		animation.rotateY(0).step()
+		animationData.value = animation.export()
+	}, 200)
+}
+
+function closeSuccessMask() {
+	showSuccessMask.value = false
+	maskClosing.value = true
+	setTimeout(() => {
+		maskClosing.value = false
+	}, 500)
+}
+
+function buildCalendar() {
+	const date = new Date()
+	const monthIndex = date.getMonth()
+	currentYear.value = date.getFullYear()
+	currentMonth.value = monthLabels[monthIndex]
+	currentMonthIndex.value = monthIndex + 1
+	currentDay.value = date.getDate()
+	syncSignedDays()
+	const firstWeekDay = getWeekByDay(`${currentYear.value}-${monthIndex + 1}-1`)
+	buildMonthDays(monthIndex, firstWeekDay)
+}
+
+function syncSignedDays() {
+	const date = new Date()
+	const monthIndex = date.getMonth()
+	signedDays.value = []
+	hasSignedToday.value = false
+
+	signRecords.value.forEach((item) => {
+		const datePart = item.createTime.split(' ')[0]
+		const parts = datePart.split('-')
+		if (
+			Number(parts[0]) === currentYear.value &&
+			Number(parts[1]) === currentMonthIndex.value
+		) {
+			signedDays.value.push(Number(parts[2]))
+		}
+		if (
+			Number(parts[0]) === date.getFullYear() &&
+			Number(parts[1]) === monthIndex + 1 &&
+			Number(parts[2]) === date.getDate()
+		) {
+			hasSignedToday.value = true
+		}
+	})
+}
+
+function buildMonthDays(monthIndex: number, firstWeekDay: number) {
+	const daysInRow: any[] = []
+	const rows: any[][] = []
+	for (let i = 0; i < firstWeekDay; i++) {
+		daysInRow.push('')
+	}
+
+	const isLongMonth = [0, 2, 4, 6, 7, 9, 11].includes(monthIndex)
+	const isFebruary = monthIndex === 1
+	let totalDays = isLongMonth ? 31 : 30
+	if (isFebruary) {
+		const year = currentYear.value
+		const isLeap = (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0
+		totalDays = isLeap ? 29 : 28
+	}
+
+	for (let day = 1; day <= totalDays; day++) {
+		daysInRow.push(day)
+	}
+
+	while (daysInRow.length) {
+		const row = daysInRow.splice(0, 7)
+		while (row.length < 7) {
+			row.push('')
+		}
+		rows.push(row)
+	}
+	calendarRows.value = rows
+}
+
+function getWeekByDay(dayValue: string) {
+	return new Date(Date.parse(dayValue.replace(/-/g, '/'))).getDay()
+}
 </script>
 <style scoped>
 page {
diff --git a/pages/navigation/search/search.scss b/pages/navigation/search/search.scss
index a705291..4ed9545 100644
--- a/pages/navigation/search/search.scss
+++ b/pages/navigation/search/search.scss
@@ -185,6 +185,8 @@ page {
 }
 
 .goods-list-wrap {
+  width: 100%;
+  box-sizing: border-box;
   padding-bottom: 40rpx;
 }
 
diff --git a/pages/navigation/search/searchPage.vue b/pages/navigation/search/searchPage.vue
index fc89846..6f26522 100644
--- a/pages/navigation/search/searchPage.vue
+++ b/pages/navigation/search/searchPage.vue
@@ -13,7 +13,7 @@
 			<template #left>
 				<view class="search-navbar-wrap" :style="searchNavbarStyle">
 					<mSearch
-						ref="mSearch"
+						ref="mSearchRef"
 						class="mSearch-input-box"
 						:show-clear="false"
 						@clickLeft="back"
@@ -108,11 +108,11 @@
 			</view>
 			<!-- #ifdef H5 -->
 			<view v-if="!empty && isSWitch" class="goods-list-wrap">
-				<goodsList :res="goodsList" type="oneColumns" :keyword="keyword" :tab-bar-gap="false" />
+				<goodsList :res="goodsListData" type="oneColumns" :keyword="keyword" :tab-bar-gap="false" />
 				<uni-load-more :status="loadingType" @clickLoadMore="loadmore"></uni-load-more>
 			</view>
-			<view v-if="!empty && !isSWitch && goodsList.length" class="goods-list-wrap">
-				<goodsList :res="goodsList" :keyword="keyword" :tab-bar-gap="false" />
+			<view v-if="!empty && !isSWitch && goodsListData.length" class="goods-list-wrap">
+				<goodsList :res="goodsListData" :keyword="keyword" :tab-bar-gap="false" />
 				<uni-load-more :status="loadingType" @clickLoadMore="loadmore"></uni-load-more>
 			</view>
 			<!-- #endif -->
@@ -128,12 +128,12 @@
 				scroll-with-animation
 				scroll-y
 			>
-				<goodsList :res="goodsList" type="oneColumns" :keyword="keyword" :tab-bar-gap="false" />
+				<goodsList :res="goodsListData" type="oneColumns" :keyword="keyword" :tab-bar-gap="false" />
 				<uni-load-more :status="loadingType" @loadmore="loadmore()"></uni-load-more>
 			</scroll-view>
 			<!-- 一行两个商品展示 -->
 			<scroll-view
-				v-if="!empty && !isSWitch && goodsList.length"
+				v-if="!empty && !isSWitch && goodsListData.length"
 				class="goods-scroll"
 				:style="goodsScrollStyle"
 				scroll-anchoring
@@ -143,7 +143,7 @@
 				scroll-y
 				lower-threshold="250"
 			>
-				<goodsList :res="goodsList" :keyword="keyword" :tab-bar-gap="false" />
+				<goodsList :res="goodsListData" :keyword="keyword" :tab-bar-gap="false" />
 				<uni-load-more :status="loadingType"></uni-load-more>
 			</scroll-view>
 			<!-- #endif -->
@@ -235,7 +235,7 @@
 				<div class="null-view"></div>
 				<view class="sort-btn mp-iphonex-bottom">
 					<view class="sort-btn-repick" @click="repick">重置</view>
-					<view class="sort-btn-confim" @click="sortConfim">确定</view>
+					<view class="sort-btn-confim" @click="sortConfirm">确定</view>
 				</view>
 			</view>
 		</u-popup>
@@ -243,614 +243,608 @@
 	</view>
 </template>
 
-<script>
-import { getGoodsList, getGoodsRelated } from '@/api/goods.js';
-import goodsList from '@/components/m-goods-list/list.vue';
-import { getHotKeywords } from '@/api/home.js';
-import mSearch from '@/components/m-search-revision/m-search-revision.vue';
-import storage from '@/utils/storage';
-export default {
-	data() {
+<script setup lang="ts">
+import {
+	ref,
+	reactive,
+	computed,
+	watch,
+	nextTick,
+	getCurrentInstance,
+	onMounted,
+	onBeforeUnmount,
+} from 'vue'
+import {
+	onLoad,
+	onReady,
+	onShow,
+	onReachBottom,
+	onPageScroll,
+} from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import { getGoodsList, getGoodsRelated } from '@/api/goods.js'
+import goodsList from '@/components/m-goods-list/list.vue'
+import { getHotKeywords } from '@/api/home.js'
+import mSearch from '@/components/m-search-revision/m-search-revision.vue'
+import storage from '@/utils/storage'
+
+const store = useStore()
+const { proxy } = getCurrentInstance()!
+
+const mSearchRef = ref<InstanceType<typeof mSearch> | null>(null)
+
+const empty = ref(false)
+const scrollTop = ref(0)
+const loadIndex = ref(10)
+const oldKeywordIndex = ref(0)
+const selectedWay = reactive<{
+	brand: any[]
+	categoryId: any[]
+	prop: any[]
+}>({
+	brand: [],
+	categoryId: [],
+	prop: [],
+})
+
+const sortPopup = ref(false)
+const navObj = reactive({
+	background: '#fff',
+})
+const typeSortData = reactive({
+	type: '',
+	index: '',
+})
+const defaultKeyword = ref('')
+const keyword = ref('')
+const oldKeywordList = ref<string[]>([])
+const hotKeywordList = ref<string[]>([])
+const keywordList = ref<any[]>([])
+const goodsListData = ref<any[]>([])
+
+const cateMaskState = ref(0)
+const loadingType = ref('more')
+const filterIndex = ref(0)
+const cateId = ref(0)
+const priceOrder = ref(0)
+const cateList = ref<any[]>([])
+const isShowSeachGoods = ref(false)
+const isShowKeywordList = ref(false)
+const sortData = ref<any>('')
+const isSWitch = ref(false)
+
+const params = ref<any>({
+	pageNumber: 1,
+	pageSize: 10,
+	keyword: '',
+})
+const minPrice = ref('')
+const maxPrice = ref('')
+const sortParams = ref<any>({
+	pageNumber: 1,
+	pageSize: 10,
+	categoryId: '',
+})
+
+const routerVal = ref<any>('')
+const capsuleInsetRight = ref(0)
+const searchNavbarWidth = ref(0)
+const goodsScrollHeight = ref(0)
+
+const searchNavbarStyle = computed(() => {
+	if (searchNavbarWidth.value) {
 		return {
-			empty: false,
-			scrollTop: 0,
-			loadIndex: 10,
-			oldKeywordIndex: 0,
-			selectedWay: {
-				brand: [],
-				categoryId: [],
-				prop: []
-			},
-
-			sortPopup: false, //筛选的开关
-			navObj: {
-				background: '#fff'
-			},
-			typeSortData: {
-				type: '',
-				index: ''
-			},
-			defaultKeyword: '',
-			keyword: '',
-			oldKeywordList: [],
-			hotKeywordList: [],
-			keywordList: [],
-			goodsList: [],
-
-			cateMaskState: 0, //分类面板展开状态
-			loadingType: 'more', //加载更多状态
-			filterIndex: 0,
-			cateId: 0, //已选三级分类id
-			priceOrder: 0, //1 价格从低到高 2价格从高到低
-			cateList: [],
-			isShowSeachGoods: false,
-			isShowKeywordList: false,
-			sortData: '',
-			isSWitch: false,
-
-			params: {
-				pageNumber: 1,
-				pageSize: 10,
-				// sort: 'grade_asc',
-
-				keyword: ''
-			},
-			minPrice: '',
-			maxPrice: '',
-			sortParams: {
-				pageNumber: 1,
-				pageSize: 10,
-
-				// price: "", //价格,示例值(10_30)
-				// prop: "", //属性:参数名_参数值@参数名_参数值,示例值(屏幕类型_LED@屏幕尺寸_15英寸)
-				// brandId:"", //品牌,可以多选 品牌Id@品牌Id@品牌Id
-				categoryId: ''
-			},
-
-			routerVal: '',
-			capsuleInsetRight: 0,
-			searchNavbarWidth: 0,
-			goodsScrollHeight: 0,
-		};
-	},
-
-	computed: {
-		searchNavbarStyle() {
-			if (this.searchNavbarWidth) {
-				return {
-					width: `${this.searchNavbarWidth}px`,
-				};
-			}
-			return {
-				width: '100%',
-			};
-		},
-		goodsScrollStyle() {
-			if (this.goodsScrollHeight > 0) {
-				return {
-					height: `${this.goodsScrollHeight}px`,
-				};
-			}
-			return {};
-		},
-	},
-
-	onPageScroll(e) {
-		console.log(e);
-		this.scrollTop = e.scrollTop;
-	},
-	onLoad(val) {
-		this.init();
-		//  this.initSortGoods();
-		// 接收分类的数据
-
-		this.routerVal = val;
-
-		// 有值
-		if (this.routerVal.category) {
-			this.params.categoryId = this.routerVal.category;
-			this.sortParams.categoryId = this.routerVal.category;
-			this.isShowSeachGoods = true;
-			this.$nextTick(() => {
-				this.$refs.mSearch.isShowSeachGoods = true;
-			});
-		}
-		if (this.routerVal.keyword) {
-			this.params.keyword = this.routerVal.keyword;
-			this.isShowSeachGoods = true;
-		}
-		if (this.routerVal.storeId) {
-			this.params.storeId = this.routerVal.storeId;
-			this.isShowSeachGoods = true;
-		}
-		if (this.routerVal.promotionType) {
-			this.params.promotionType = this.routerVal.promotionType;
-			this.isShowSeachGoods = true;
-		}
-		if (this.routerVal.promotionsId) {
-			this.params.promotionsId = this.routerVal.promotionsId;
-			this.isShowSeachGoods = true;
-		}
-		this.loadData();
-	},
-	onReady() {
-		this.setSearchNavbarWidth();
-		this.calcGoodsScrollHeight();
-	},
-	onShow() {
-		this.calcGoodsScrollHeight();
-	},
-	mounted() {
-		// #ifdef H5
-		window.addEventListener('resize', this.calcGoodsScrollHeight);
-		// #endif
-	},
-	beforeUnmount() {
-		// #ifdef H5
-		window.removeEventListener('resize', this.calcGoodsScrollHeight);
-		// #endif
-	},
-	components: {
-		mSearch,
-		goodsList
-	},
-	watch: {
-		/**
-		 * 将搜索的字和热词进行匹配,如果为热词则不改商品搜索关键字
-		 */
-		keyword(val) {
-			if (val) {
-				if (val) {
-					this.defaultKeyword = val;
-				}
-			} else {
-				this.defaultKeyword = '请输入搜索商品';
-			}
-		},
-		sortPopup(val) {
-			if (val) {
-				this.selectedWay = { brand: [], categoryId: [], prop: [] };
-			}
-		},
-		isShowSeachGoods(val) {
-			if (val) {
-				this.$nextTick(() => {
-					this.calcGoodsScrollHeight();
-				});
-			}
-		},
-		isSWitch() {
-			this.$nextTick(() => {
-				this.calcGoodsScrollHeight();
-			});
-		}
-	},
-
-	onReachBottom() {
-		// #ifdef H5
-		if (!this.isShowSeachGoods || this.loadingType !== 'more') {
-			return;
-		}
-		this.loadmore();
-		// #endif
-	},
-
-	methods: {
-		calcGoodsScrollHeight() {
-			this.$nextTick(() => {
-				const query = uni.createSelectorQuery().in(this);
-				query.select('.goods-content').boundingClientRect();
-				query.select('.goods-content .navbar').boundingClientRect();
-				query.exec((res) => {
-					const contentRect = res[0];
-					const navbarRect = res[1];
-					if (!contentRect) {
-						return;
-					}
-					const sortBarHeight = navbarRect ? navbarRect.height : uni.upx2px(80);
-					const { windowHeight } = uni.getWindowInfo();
-					const height = Math.max(contentRect.height, windowHeight - contentRect.top) - sortBarHeight;
-					this.goodsScrollHeight = Math.max(height, 0);
-				});
-			});
-		},
-		setSearchNavbarWidth() {
-			// #ifdef MP-WEIXIN
-			try {
-				const menuButton = uni.getMenuButtonBoundingClientRect();
-				const { windowWidth } = uni.getWindowInfo();
-				this.capsuleInsetRight = windowWidth - menuButton.left;
-				const leftPadding = uni.upx2px(16);
-				const gap = uni.upx2px(8);
-				this.searchNavbarWidth =
-					windowWidth - this.capsuleInsetRight - leftPadding - gap;
-			} catch (e) {
-				this.searchNavbarWidth = 280;
-			}
-			// #endif
-		},
-		// 数据去重一下 只显示一次 减免 劵 什么的
-		getPromotion(item) {
-			if (item.promotionMap) {
-				let array = [];
-				Object.keys(item.promotionMap).forEach(child => {
-					if (!array.includes(child.split('-')[0])) {
-						array.push(child.split('-')[0]);
-					}
-				});
-
-				return array;
-			}
-		},
-		// 展示更多数据
-		showMore() {
-			this.loadOldKeyword(this.oldKeywordIndex);
-		},
-
-		// 点击确定进行筛选
-		sortConfim() {
-			// 处理品牌（多选
-			if (!this.params.brandId) {
-				this.params.brandId = [];
-			} else {
-				this.params.brandId = [this.params.brandId];
-			}
-
-			// 如果选中品牌 赋值
-			this.selectedWay['brand'].forEach(item => {
-				if (item.__selected) {
-					this.params.brandId.push(item.value);
-				}
-			});
-
-			this.params.brandId = this.params.brandId.join('@') || '';
-
-			// 处理分类 (单选)
-			if (this.selectedWay['categoryId'][0]) {
-				this.params.categoryId = this.selectedWay['categoryId'][0].value;
-			}
-			if (!this.params.prop) {
-				this.params.prop = [];
-			} else {
-				this.params.prop = [this.params.prop];
-			}
-
-			this.selectedWay['prop'].forEach(item => {
-				if (item.__selected) {
-					this.params.prop.push(`${item.parent}_${item.title}`);
-				}
-			});
-			this.params.prop = this.params.prop.join('@');
-			// 处理价格
-			if (this.minPrice || this.maxPrice) {
-				this.params.price = `${this.minPrice}_${this.maxPrice}`;
-			} else {
-				this.params.price = 0;
-			}
-
-			this.goodsList = [];
-
-			this.params.pageNumber = 1;
-			this.sortParams = this.params;
-
-			this.loadData();
-			this.sortPopup = false;
-		},
-
-		// 重置
-		repick() {
-			this.sortParams = {
-				pageNumber: 1,
-				pageSize: 10,
-				categoryId: this.routerVal.category || ''
-			};
-			this.sortPopup = false;
-			this.initSortGoods();
-			this.minPrice = '';
-			this.maxPrice = '';
-			this.params = {
-				pageNumber: 1,
-				pageSize: 10,
-				categoryId: this.routerVal.category || ''
-			};
-			this.goodsList = [];
-			this.loadData();
-		},
-
-		// 点击筛选的内容
-		handleSort(val, index, type, parent) {
-			if (type == 'prop') {
-				val.parent = parent.key;
-			}
-			this.selectedWay[type].push(val);
-			if (type == 'categoryId') {
-				this.sortData.categories.forEach(item => {
-					item.__selected = false;
-				});
-				val.__selected = true;
-			} else {
-				val.__selected ? (val.__selected = false) : (val.__selected = true);
-			}
-		},
-
-		init() {
-			// 加载搜索记录
-			this.loadOldKeyword(this.loadIndex);
-			// 加载热词
-			this.loadHotKeyword();
-		},
-		blur() {
-			uni.hideKeyboard();
-		},
-		back() {
-			uni.navigateBack({
-				delta: 1
-			});
-		},
-		// 跳转到商品详情
-		navigateToDetailPage(item) {
-			uni.navigateTo({
-				url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`
-			});
-		},
-		// 跳转地址
-		navigateToStoreDetailPage(item) {
-			uni.navigateTo({
-				url: `/pages/product/shopPage?id=${item.storeId}`
-			});
-		},
-		loadmore() {
-			if (this.loadingType !== 'more') {
-				return;
-			}
-			this.params.pageNumber++;
-			this.loadData();
-		},
-		initSortGoods() {
-			getGoodsRelated(this.sortParams).then(res => {
-				if (res.data.success) {
-					for (let item of Object.keys(res.data.result)) {
-						res.data.result[item].forEach(child => {
-							child.__selected = false;
-
-							// 循环出和品牌分类一样的数据格式
-							if (child.values) {
-								child.values = child.values.map(item => ({
-									title: item,
-									__selected: false
-								}));
-							}
-						});
-					}
-					this.sortData = res.data.result;
-				}
-			});
-		},
-
-		// 筛选商品
-		sortGoods() {
-			this.sortPopup = true;
-		},
-
-		tabClick(index, type) {
-			this.params.pageNumber = 1;
-			this.params.pageSize = 10;
-			// this.params.order = "desc";
-			if (this.params.sort == type) {
-				this.params.order == 'asc' ? (this.params.order = 'desc') : (this.params.order = 'asc');
-
-				this.params['sort'] = type;
-			} else {
-				this.params.order = 'desc';
-				this.params['sort'] = type;
-			}
-
-			if (index == 0) {
-				this.params.sort = 'releaseTime';
-				this.params.order = 'desc';
-			}
-
-			this.filterIndex = index;
-
-			uni.pageScrollTo({
-				duration: 300,
-				scrollTop: 0
-			});
-			this.loadData('refresh', 1);
-			uni.showLoading({
-				title: '正在加载'
-			});
-		},
-		//加载默认搜索关键字
-		loadDefaultKeyword() {
-			/**
-			 * 定义默认搜索关键字会根据当前热门搜索来进行显示
-			 * 如果当前热门搜索没有的话，则会显示默认关键字
-			 */
-			if (this.hotKeywordList.length != 0) {
-				//
-				this.defaultKeyword = this.hotKeywordList[0];
-			} else {
-				this.defaultKeyword = '请输入搜索商品';
-			}
-		},
-		//加载历史搜索,自动读取本地Storage
-		loadOldKeyword(index) {
-			this.oldKeywordList = [];
-			uni.getStorage({
-				key: 'OldKeys',
-				success: res => {
-					var OldKeys = JSON.parse(res.data);
-					this.oldKeywordIndex = OldKeys.length;
-					for (let i = 0; i < index; i++) {
-						this.oldKeywordList.push(OldKeys[i]);
-					}
-				}
-			});
-		},
-
-		/**
-		 * 加载热门搜索
-		 * 1.5分钟之后更新缓存
-		 * 2.如果有缓存热门关键字则去请求缓存
-		 */
-		async loadHotKeyword() {
-			this.hotKeywordList = [];
-			if (!storage.getHotWords().time || storage.getHotWords().time <= new Date().getTime() / 1000) {
-				// 没有缓存或者第一次进入请求接口保存缓存
-				let res = await getHotKeywords(10);
-				let keywords = res.data.result;
-
-				keywords.forEach(item => {
-					this.hotKeywordList.push(item);
-				});
-
-				let hotData = {
-					time: new Date().getTime() / 1000 + 30 * 5,
-					keywords: keywords
-				};
-				storage.setHotWords(hotData);
-			} else {
-				let keywords = storage.getHotWords().keywords;
-
-				keywords.forEach(item => {
-					this.hotKeywordList.push(item);
-				});
-			}
-			this.loadDefaultKeyword();
-		},
-		//加载商品 ，带下拉刷新和上滑加载
-		async loadData(type, loading) {
-			this.loadingType = 'loading';
-			if (type == 'refresh') {
-				this.goodsList = [];
-			}
-			//没有更多直接返回 #TODO
-			let goodsList = await getGoodsList(this.params);
-			const records = goodsList.data.result.records || [];
-			if (records.length < 10) {
-				this.loadingType = 'noMore';
-			} else {
-				this.loadingType = 'more';
-			}
-			this.goodsList.push(...records);
-			this.empty = this.goodsList.length === 0;
-			
-			this.initSortGoods();
-			this.$nextTick(() => {
-				this.calcGoodsScrollHeight();
-			});
-			 if (this.$store.state.isShowToast){ uni.hideLoading() };
-		},
-
-		//高亮关键字
-		drawCorrelativeKeyword(keywords, keyword) {
-			var len = keywords.length,
-				keywordArr = [];
-			for (var i = 0; i < len; i++) {
-				var row = keywords[i];
-				//定义高亮#9f9f9f
-				var html = row[0].replace(keyword, "<span style='color: #9f9f9f;'>" + keyword + '</span>');
-				html = '<div>' + html + '</div>';
-				var tmpObj = {
-					keyword: row[0],
-					htmlStr: html
-				};
-				keywordArr.push(tmpObj);
-			}
-			return keywordArr;
-		},
-		//顶置关键字
-		setKeyword(index) {
-			this.keyword = this.keywordList[index].keyword;
-		},
-		//清除历史搜索
-		oldDelete() {
-			uni.showModal({
-				content: '确定清除历史搜索记录？',
-				success: res => {
-					if (res.confirm) {
-						this.oldKeywordList = [];
-						uni.removeStorage({
-							key: 'OldKeys'
-						});
-					}
-				}
-			});
-		},
-
-		// 样式修改布局
-		doSearchSwitch() {
-			this.isSWitch = !this.isSWitch;
-			this.isShowSeachGoods = true;
-			this.params.pageNumber = 1;
-			this.params.pageSize = 10;
-			this.loadData('refresh', 1);
-		},
-
-		/**
-		 * 执行搜索
-		 */
-		doSearch(keyword) {
-			//  用户自行搜索/热门搜索/搜索历史
-			keyword = keyword === false ? this.keyword : keyword;
-
-			if (!keyword) {
-				/**
-				 * 进行空搜索
-				 * 第一次搜索如果没有关键词会将热门搜索中第一个热词进行判定
-				 * 如果没有热词则会展示一个空词搜索
-				 */
-				keyword = (this.hotKeywordList.length && this.hotKeywordList[0]) || '';
-			}
-			this.defaultKeyword == '请输入搜索商品' ? (keyword = '') : '';
-			
-		
-			keyword ? (this.keyword = keyword) : '';
-			this.saveKeyword(keyword); //保存为历史
-			this.isShowSeachGoods = true;
-			this.$refs.mSearch.isShowSeachGoods = true;
-			this.$refs.mSearch.inputVal = keyword;
-			this.params.keyword = this.keyword;
-			this.params.pageNumber = 1;
-			this.sortParams['keyword'] = keyword;
-			this.loadData('refresh', 1);
-		},
-		//保存关键字到历史记录
-		saveKeyword(keyword) {
-			if (!keyword) return false;
-			uni.getStorage({
-				key: 'OldKeys',
-				success: res => {
-					var OldKeys = JSON.parse(res.data);
-					var findIndex = OldKeys.indexOf(keyword);
-					if (findIndex == -1) {
-						OldKeys.unshift(keyword);
-					} else {
-						OldKeys.splice(findIndex, 1);
-						OldKeys.unshift(keyword);
-					}
-					//最多10个纪录
-					OldKeys.length > 10 && OldKeys.pop();
-
-					uni.setStorage({
-						key: 'OldKeys',
-						data: JSON.stringify(OldKeys)
-					});
-					this.oldKeywordList = OldKeys; //更新历史搜索
-				},
-				fail: e => {
-					var OldKeys = [keyword];
-					uni.setStorage({
-						key: 'OldKeys',
-						data: JSON.stringify(OldKeys)
-					});
-					this.oldKeywordList = OldKeys; //更新历史搜索
-				}
-			});
+			width: `${searchNavbarWidth.value}px`,
 		}
 	}
-};
+	return {
+		width: '100%',
+	}
+})
+
+const goodsScrollStyle = computed(() => {
+	if (goodsScrollHeight.value > 0) {
+		return {
+			height: `${goodsScrollHeight.value}px`,
+		}
+	}
+	return {}
+})
+
+onPageScroll((e) => {
+	console.log(e)
+	scrollTop.value = e.scrollTop
+})
+
+onLoad((val) => {
+	init()
+	routerVal.value = val
+
+	if (routerVal.value.category) {
+		params.value.categoryId = routerVal.value.category
+		sortParams.value.categoryId = routerVal.value.category
+		isShowSeachGoods.value = true
+		nextTick(() => {
+			if (mSearchRef.value) {
+				mSearchRef.value.isShowSeachGoods = true
+			}
+		})
+	}
+	if (routerVal.value.keyword) {
+		params.value.keyword = routerVal.value.keyword
+		isShowSeachGoods.value = true
+	}
+	if (routerVal.value.storeId) {
+		params.value.storeId = routerVal.value.storeId
+		isShowSeachGoods.value = true
+	}
+	if (routerVal.value.promotionType) {
+		params.value.promotionType = routerVal.value.promotionType
+		isShowSeachGoods.value = true
+	}
+	if (routerVal.value.promotionsId) {
+		params.value.promotionsId = routerVal.value.promotionsId
+		isShowSeachGoods.value = true
+	}
+	loadData()
+})
+
+onReady(() => {
+	setSearchNavbarWidth()
+	calcGoodsScrollHeight()
+})
+
+onShow(() => {
+	calcGoodsScrollHeight()
+})
+
+onMounted(() => {
+	// #ifdef H5
+	window.addEventListener('resize', calcGoodsScrollHeight)
+	// #endif
+})
+
+onBeforeUnmount(() => {
+	// #ifdef H5
+	window.removeEventListener('resize', calcGoodsScrollHeight)
+	// #endif
+})
+
+watch(keyword, (val) => {
+	if (val) {
+		if (val) {
+			defaultKeyword.value = val
+		}
+	} else {
+		defaultKeyword.value = '请输入搜索商品'
+	}
+})
+
+watch(sortPopup, (val) => {
+	if (val) {
+		selectedWay.brand = []
+		selectedWay.categoryId = []
+		selectedWay.prop = []
+	}
+})
+
+watch(isShowSeachGoods, (val) => {
+	if (val) {
+		nextTick(() => {
+			calcGoodsScrollHeight()
+		})
+	}
+})
+
+watch(isSWitch, () => {
+	nextTick(() => {
+		calcGoodsScrollHeight()
+	})
+})
+
+onReachBottom(() => {
+	// #ifdef H5
+	if (!isShowSeachGoods.value || loadingType.value !== 'more') {
+		return
+	}
+	loadmore()
+	// #endif
+})
+
+function calcGoodsScrollHeight() {
+	nextTick(() => {
+		const query = uni.createSelectorQuery().in(proxy)
+		query.select('.goods-content').boundingClientRect()
+		query.select('.goods-content .navbar').boundingClientRect()
+		query.exec((res) => {
+			const contentRect = res[0]
+			const navbarRect = res[1]
+			if (!contentRect) {
+				return
+			}
+			const sortBarHeight = navbarRect ? navbarRect.height : uni.upx2px(80)
+			const { windowHeight } = uni.getWindowInfo()
+			const height =
+				Math.max(contentRect.height, windowHeight - contentRect.top) -
+				sortBarHeight
+			goodsScrollHeight.value = Math.max(height, 0)
+		})
+	})
+}
+
+function setSearchNavbarWidth() {
+	// #ifdef MP-WEIXIN
+	try {
+		const menuButton = uni.getMenuButtonBoundingClientRect()
+		const { windowWidth } = uni.getWindowInfo()
+		capsuleInsetRight.value = windowWidth - menuButton.left
+		const leftPadding = uni.upx2px(16)
+		const gap = uni.upx2px(8)
+		searchNavbarWidth.value =
+			windowWidth - capsuleInsetRight.value - leftPadding - gap
+	} catch (e) {
+		searchNavbarWidth.value = 280
+	}
+	// #endif
+}
+
+function getPromotion(item: any) {
+	if (item.promotionMap) {
+		const array: string[] = []
+		Object.keys(item.promotionMap).forEach((child) => {
+			if (!array.includes(child.split('-')[0])) {
+				array.push(child.split('-')[0])
+			}
+		})
+		return array
+	}
+}
+
+function showMore() {
+	loadOldKeyword(oldKeywordIndex.value)
+}
+
+function sortConfirm() {
+	if (!params.value.brandId) {
+		params.value.brandId = []
+	} else {
+		params.value.brandId = [params.value.brandId]
+	}
+
+	selectedWay.brand.forEach((item) => {
+		if (item.__selected) {
+			params.value.brandId.push(item.value)
+		}
+	})
+
+	params.value.brandId = params.value.brandId.join('@') || ''
+
+	if (selectedWay.categoryId[0]) {
+		params.value.categoryId = selectedWay.categoryId[0].value
+	}
+	if (!params.value.prop) {
+		params.value.prop = []
+	} else {
+		params.value.prop = [params.value.prop]
+	}
+
+	selectedWay.prop.forEach((item) => {
+		if (item.__selected) {
+			params.value.prop.push(`${item.parent}_${item.title}`)
+		}
+	})
+	params.value.prop = params.value.prop.join('@')
+
+	if (minPrice.value || maxPrice.value) {
+		params.value.price = `${minPrice.value}_${maxPrice.value}`
+	} else {
+		params.value.price = 0
+	}
+
+	goodsListData.value = []
+	params.value.pageNumber = 1
+	sortParams.value = params.value
+
+	loadData()
+	sortPopup.value = false
+}
+
+function repick() {
+	sortParams.value = {
+		pageNumber: 1,
+		pageSize: 10,
+		categoryId: routerVal.value.category || '',
+	}
+	sortPopup.value = false
+	initSortGoods()
+	minPrice.value = ''
+	maxPrice.value = ''
+	params.value = {
+		pageNumber: 1,
+		pageSize: 10,
+		categoryId: routerVal.value.category || '',
+	}
+	goodsListData.value = []
+	loadData()
+}
+
+function handleSort(val: any, _index: number, type: string, parent?: any) {
+	if (type == 'prop') {
+		val.parent = parent.key
+	}
+	selectedWay[type as keyof typeof selectedWay].push(val)
+	if (type == 'categoryId') {
+		sortData.value.categories.forEach((item: any) => {
+			item.__selected = false
+		})
+		val.__selected = true
+	} else {
+		val.__selected ? (val.__selected = false) : (val.__selected = true)
+	}
+}
+
+function init() {
+	loadOldKeyword(loadIndex.value)
+	loadHotKeyword()
+}
+
+function blur() {
+	uni.hideKeyboard()
+}
+
+function back() {
+	uni.navigateBack({
+		delta: 1,
+	})
+}
+
+function navigateToDetailPage(item: any) {
+	uni.navigateTo({
+		url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`,
+	})
+}
+
+function navigateToStoreDetailPage(item: any) {
+	uni.navigateTo({
+		url: `/pages/product/shopPage?id=${item.storeId}`,
+	})
+}
+
+function loadmore() {
+	if (loadingType.value !== 'more') {
+		return
+	}
+	params.value.pageNumber++
+	loadData()
+}
+
+function initSortGoods() {
+	getGoodsRelated(sortParams.value).then((res) => {
+		if (res.data.success) {
+			for (const item of Object.keys(res.data.result)) {
+				res.data.result[item].forEach((child: any) => {
+					child.__selected = false
+
+					if (child.values) {
+						child.values = child.values.map((v: string) => ({
+							title: v,
+							__selected: false,
+						}))
+					}
+				})
+			}
+			sortData.value = res.data.result
+		}
+	})
+}
+
+function sortGoods() {
+	sortPopup.value = true
+}
+
+function tabClick(index: number, type?: string) {
+	params.value.pageNumber = 1
+	params.value.pageSize = 10
+	if (params.value.sort == type) {
+		params.value.order == 'asc'
+			? (params.value.order = 'desc')
+			: (params.value.order = 'asc')
+
+		params.value['sort'] = type
+	} else {
+		params.value.order = 'desc'
+		params.value['sort'] = type
+	}
+
+	if (index == 0) {
+		params.value.sort = 'releaseTime'
+		params.value.order = 'desc'
+	}
+
+	filterIndex.value = index
+
+	uni.pageScrollTo({
+		duration: 300,
+		scrollTop: 0,
+	})
+	loadData('refresh', 1)
+	uni.showLoading({
+		title: '正在加载',
+	})
+}
+
+function loadDefaultKeyword() {
+	if (hotKeywordList.value.length != 0) {
+		defaultKeyword.value = hotKeywordList.value[0]
+	} else {
+		defaultKeyword.value = '请输入搜索商品'
+	}
+}
+
+function loadOldKeyword(index: number) {
+	oldKeywordList.value = []
+	uni.getStorage({
+		key: 'OldKeys',
+		success: (res) => {
+			const OldKeys = JSON.parse(res.data)
+			oldKeywordIndex.value = OldKeys.length
+			for (let i = 0; i < index; i++) {
+				oldKeywordList.value.push(OldKeys[i])
+			}
+		},
+	})
+}
+
+async function loadHotKeyword() {
+	hotKeywordList.value = []
+	if (
+		!storage.getHotWords().time ||
+		storage.getHotWords().time <= new Date().getTime() / 1000
+	) {
+		const res = await getHotKeywords(10)
+		const keywords = res.data.result
+
+		keywords.forEach((item: string) => {
+			hotKeywordList.value.push(item)
+		})
+
+		const hotData = {
+			time: new Date().getTime() / 1000 + 30 * 5,
+			keywords: keywords,
+		}
+		storage.setHotWords(hotData)
+	} else {
+		const keywords = storage.getHotWords().keywords
+
+		keywords.forEach((item: string) => {
+			hotKeywordList.value.push(item)
+		})
+	}
+	loadDefaultKeyword()
+}
+
+async function loadData(type?: string, _loading?: number) {
+	loadingType.value = 'loading'
+	if (type == 'refresh') {
+		goodsListData.value = []
+	}
+	const goodsListRes = await getGoodsList(params.value)
+	const records = goodsListRes.data.result.records || []
+	if (records.length < 10) {
+		loadingType.value = 'noMore'
+	} else {
+		loadingType.value = 'more'
+	}
+	goodsListData.value.push(...records)
+	empty.value = goodsListData.value.length === 0
+
+	initSortGoods()
+	nextTick(() => {
+		calcGoodsScrollHeight()
+	})
+	if (store.state.isShowToast) {
+		uni.hideLoading()
+	}
+}
+
+function drawCorrelativeKeyword(keywords: any[], keyword: string) {
+	const len = keywords.length
+	const keywordArr = []
+	for (let i = 0; i < len; i++) {
+		const row = keywords[i]
+		const html = row[0].replace(
+			keyword,
+			"<span style='color: #9f9f9f;'>" + keyword + '</span>'
+		)
+		const htmlStr = '<div>' + html + '</div>'
+		const tmpObj = {
+			keyword: row[0],
+			htmlStr: htmlStr,
+		}
+		keywordArr.push(tmpObj)
+	}
+	return keywordArr
+}
+
+function setKeyword(index: number) {
+	keyword.value = keywordList.value[index].keyword
+}
+
+function oldDelete() {
+	uni.showModal({
+		content: '确定清除历史搜索记录？',
+		success: (res) => {
+			if (res.confirm) {
+				oldKeywordList.value = []
+				uni.removeStorage({
+					key: 'OldKeys',
+				})
+			}
+		},
+	})
+}
+
+function doSearchSwitch() {
+	isSWitch.value = !isSWitch.value
+	isShowSeachGoods.value = true
+	params.value.pageNumber = 1
+	params.value.pageSize = 10
+	loadData('refresh', 1)
+}
+
+function doSearch(searchKeyword: string | false) {
+	let resolvedKeyword = searchKeyword === false ? keyword.value : searchKeyword
+
+	if (!resolvedKeyword) {
+		resolvedKeyword =
+			(hotKeywordList.value.length && hotKeywordList.value[0]) || ''
+	}
+	defaultKeyword.value == '请输入搜索商品' ? (resolvedKeyword = '') : ''
+
+	resolvedKeyword ? (keyword.value = resolvedKeyword) : ''
+	saveKeyword(resolvedKeyword)
+	isShowSeachGoods.value = true
+	if (mSearchRef.value) {
+		mSearchRef.value.isShowSeachGoods = true
+		mSearchRef.value.inputVal = resolvedKeyword
+	}
+	params.value.keyword = keyword.value
+	params.value.pageNumber = 1
+	sortParams.value['keyword'] = resolvedKeyword
+	loadData('refresh', 1)
+}
+
+function saveKeyword(saveKey: string) {
+	if (!saveKey) return false
+	uni.getStorage({
+		key: 'OldKeys',
+		success: (res) => {
+			const OldKeys = JSON.parse(res.data)
+			const findIndex = OldKeys.indexOf(saveKey)
+			if (findIndex == -1) {
+				OldKeys.unshift(saveKey)
+			} else {
+				OldKeys.splice(findIndex, 1)
+				OldKeys.unshift(saveKey)
+			}
+			OldKeys.length > 10 && OldKeys.pop()
+
+			uni.setStorage({
+				key: 'OldKeys',
+				data: JSON.stringify(OldKeys),
+			})
+			oldKeywordList.value = OldKeys
+		},
+		fail: () => {
+			const OldKeys = [saveKey]
+			uni.setStorage({
+				key: 'OldKeys',
+				data: JSON.stringify(OldKeys),
+			})
+			oldKeywordList.value = OldKeys
+		},
+	})
+}
 </script>
 <style lang="scss" scoped>
 @import './search.scss';
diff --git a/pages/order/afterSales/afterSales.vue b/pages/order/afterSales/afterSales.vue
index 46c57dd..1555622 100644
--- a/pages/order/afterSales/afterSales.vue
+++ b/pages/order/afterSales/afterSales.vue
@@ -6,8 +6,8 @@
         :scrollable="false"
         v-model:current="current"
         @change="change"
-        :lineColor="$lightColor"
-        :activeStyle="{ color: $lightColor }"
+        :lineColor="lightColor"
+        :activeStyle="{ color: lightColor }"
       ></u-tabs>
     </view>
     <div class="u-tabs-search">
@@ -194,279 +194,199 @@
   </view>
 </template>
 
-<script>
-import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
-import { getAfterSaleList, cancelAfterSale } from "@/api/after-sale.js";
-import { getOrderList } from "@/api/order.js";
-import storage from "@/utils/storage";
+<script setup lang="ts">
+import { ref, reactive, computed } from 'vue'
+import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import { unitPrice, serviceStatusList, parseGoodsImageUrl } from '@/utils/filters.js'
+import { getAfterSaleList, cancelAfterSale } from '@/api/after-sale.js'
+import { getOrderList } from '@/api/order.js'
+import storage from '@/utils/storage'
 
-export default {
-  components: {
-    uniLoadMore,
-  },
-  data() {
-    return {
-      list: [
-        //tab表头
+const store = useStore()
+const lightColor = computed(() => store.getters.lightColor)
+
+const list = [
+  { name: '售后申请' },
+  { name: '申请中' },
+  { name: '申请记录' },
+]
+
+const current = ref(0)
+const tipsShow = ref(false)
+const cancelShow = ref(false)
+const selectedOrder = ref<any>(null)
+const orderList = ref<any[]>([])
+const params = reactive<Record<string, any>>({
+  pageNumber: 1,
+  pageSize: 10,
+  sort: 'createTime',
+  flowPrice: 0,
+  order: 'desc',
+})
+const logParams = reactive<Record<string, any>>({
+  pageNumber: 1,
+  pageSize: 10,
+})
+const status = ref('loadmore')
+const keywords = ref('')
+
+onLoad((options) => {
+  orderList.value = []
+  params.pageNumber = 1
+  if (options?.orderSn) params.keywords = options.orderSn
+  searchOrderList(current.value)
+})
+
+onPullDownRefresh(() => {
+  change(current.value)
+})
+
+function hideLoadingIfNeeded() {
+  if (store.state.isShowToast) uni.hideLoading()
+}
+
+function getGoodsName(sku: any) {
+  return sku.goodsName || sku.name || ''
+}
+
+function getGoodsImage(goods: any, order: any, index: number) {
+  let image = goods.image || goods.goodsImage || goods.thumbnail
+  if (!image && order.groupImages) {
+    const images = String(order.groupImages).split(',')
+    image = images[index] || images[0]
+  }
+  return parseGoodsImageUrl(image)
+}
+
+function submitSearchOrderList(tabIndex: number) {
+  params.pageNumber = 1
+  logParams.pageNumber = 1
+  orderList.value = []
+  searchOrderList(tabIndex)
+}
+
+function clear(tabIndex: number) {
+  params.pageNumber = 1
+  logParams.pageNumber = 1
+  params.keywords = ''
+  orderList.value = []
+  searchOrderList(tabIndex)
+}
+
+function change(e: number | { index: number }) {
+  const index = typeof e === 'object' && e != null ? e.index : e
+  current.value = index
+  Object.assign(params, { pageNumber: 1, pageSize: 10 })
+  orderList.value = []
+  searchOrderList(index)
+  uni.stopPullDownRefresh()
+}
+
+function searchOrderList(index: number) {
+  if (index == 0) {
+    if (keywords.value) params.keywords = keywords.value
+    fetchOrderList()
+  } else {
+    Object.assign(logParams, {
+      pageNumber: 1,
+      pageSize: 10,
+      sort: 'createTime',
+      order: 'desc',
+    })
+    if (index === 1) {
+      logParams.serviceStatus = 'APPLY'
+    }
+    if (keywords.value) logParams.keywords = keywords.value
+    orderList.value = []
+    fetchAfterSaleLogList()
+  }
+}
+
+function fetchOrderList() {
+  uni.showLoading({ title: '加载中', mask: true })
+  getOrderList(params).then((res) => {
+    hideLoadingIfNeeded()
+    const records = res.data.result.records
+    if (records.length > 0) {
+      orderList.value = orderList.value.concat(records)
+      params.pageNumber += 1
+    }
+    status.value = records.length < 10 ? 'nomore' : 'loading'
+  })
+}
+
+function close(order: any, _sku: any) {
+  selectedOrder.value = order
+  cancelShow.value = true
+}
+
+async function closeService() {
+  uni.showLoading({ title: '加载中' })
+  const res = await cancelAfterSale(selectedOrder.value.sn)
+  if (res.data.success) {
+    uni.showToast({ title: '取消成功!', duration: 2000, icon: 'none' })
+  }
+  orderList.value = []
+  searchOrderList(current.value)
+  hideLoadingIfNeeded()
+}
+
+function afterDetails(order: any, _sku?: any) {
+  uni.navigateTo({ url: './applyDetail?sn=' + order.sn })
+}
+
+function fetchAfterSaleLogList() {
+  getAfterSaleList(logParams).then((res) => {
+    const afterSaleLogList = res.data.result.records
+    afterSaleLogList.forEach((item: any) => {
+      item.orderItems = [
         {
-          name: "售后申请",
+          image: item.goodsImage,
+          skuId: item.skuId,
+          name: item.goodsName,
+          num: item.num,
+          price: item.flowPrice,
         },
-        {
-          name: "申请中",
-        },
-        {
-          name: "申请记录",
-        },
-      ],
-      current: 0, //当前表头索引
-      tipsShow: false, //提示开关
-      cancelShow: false, //取消显示开关
-      selectedOrder: "", //选中的order
-      orderList: [], //订单集合
-      params: {
-        pageNumber: 1,
-        pageSize: 10,
-        sort: "createTime",
-        flowPrice: 0,
-        order: "desc",
-      },
+      ]
+    })
+    orderList.value = orderList.value.concat(afterSaleLogList)
+    status.value = afterSaleLogList.length < 10 ? 'nomore' : 'loading'
+  })
+}
 
-      logParams: {
-        pageNumber: 1,
-        pageSize: 10,
-      },
-      status: "loadmore",
-      keywords: "", // 搜索订单sn
-    };
-  },
-  onLoad(options) {
-    this.orderList = [];
-    this.params.pageNumber = 1;
-    if (options.orderSn) this.params.keywords = options.orderSn;
-    this.searchOrderList(this.current);
-  },
-  onPullDownRefresh() {
-    this.change(this.current);
-  },
-  methods: {
-    getGoodsName(sku) {
-      return sku.goodsName || sku.name || "";
-    },
-    getGoodsImage(goods, order, index) {
-      let image = goods.image || goods.goodsImage || goods.thumbnail;
-      if (!image && order.groupImages) {
-        const images = String(order.groupImages).split(",");
-        image = images[index] || images[0];
-      }
-      return this.parseGoodsImageUrl(image);
-    },
-    /**
-     * 点击搜索执行搜索
-     */
-    submitSearchOrderList(current) {
-      this.params.pageNumber = 1;
-      this.logParams.pageNumber = 1;
-      this.orderList = [];
-      this.searchOrderList(current);
-    },
-    // 清空
-    clear(current){
-      this.params.pageNumber = 1;
-      this.logParams.pageNumber = 1;
-      this.params.keywords = ''
-      this.orderList = [];
-      this.searchOrderList(current);
-    },
-    /**
-     * 切换tab页时，初始化数据
-     */
-    change(e) {
-      const index = typeof e === 'object' && e != null ? e.index : e;
-      this.current = index;
-      this.params = {
-        pageNumber: 1,
-        pageSize: 10,
-      };
-      this.orderList = [];
-      //如果是2 则读取售后申请记录列表
-      this.searchOrderList(index);
-      uni.stopPullDownRefresh();
-    },
+function applyService(sn: string, order: any, sku: any) {
+  storage.setAfterSaleData({ ...order, ...sku })
+  uni.navigateTo({ url: `/pages/order/afterSales/afterSalesSelect?sn=${sn}` })
+}
 
-    /**
-     * 搜索初始化
-     * 根据当前tab传值的索引进行更改
-     */
-    searchOrderList(index) {
-      if (index == 0) {
-        this.keywords ? (this.params.keywords = this.keywords) : "";
-        this.getOrderList();
-      } else {
-        this.logParams = {
-          pageNumber: 1,
-          pageSize: 10,
-          sort: "createTime",
-          order: "desc",
-        };
-        if (index === 1) {
-          this.logParams.serviceStatus = "APPLY";
-        }
-        this.keywords ? (this.logParams.keywords = this.keywords) : "";
-        this.orderList = [];
-        this.getAfterSaleLogList();
-      }
-    },
+function onExpress(order: any, sku: any) {
+  sku.storeName = order.storeName
+  storage.setAfterSaleData({ ...order, ...sku })
+  uni.navigateTo({ url: `./afterSalesDetailExpress?serviceSn=${order.sn}` })
+}
 
-    /**
-     * 获取订单列表
-     */
-    getOrderList() {
-      uni.showLoading({
-        title: "加载中",
-        mask: true,
-      });
-      getOrderList(this.params).then((res) => {
-         if (this.$store.state.isShowToast){ uni.hideLoading() };
-        const orderList = res.data.result.records;
-        if (orderList.length > 0) {
-          this.orderList = this.orderList.concat(orderList);
-          this.params.pageNumber += 1;
-        }
-        if (orderList.length < 10) {
-          this.status = "nomore";
-        } else {
-          this.status = "loading";
-        }
-      });
-    },
+function onDetail(goods: any, sku: any) {
+  if (current.value == 0) {
+    uni.navigateTo({
+      url: `/pages/product/goods?id=${sku.skuId}&goodsId=${sku.goodsId || sku.goodsId}`,
+    })
+  } else {
+    uni.navigateTo({
+      url: `/pages/product/goods?id=${goods.skuId}&goodsId=${goods.goodsId || goods.goodsId}`,
+    })
+  }
+}
 
-    close(order, sku) {
-      console.log(order, sku);
-      this.selectedOrder = order;
-      this.cancelShow = true;
-    },
-
-    async closeService() {
-      uni.showLoading({
-        title: "加载中",
-      });
-      console.log(this.selectedOrder);
-      let res = await cancelAfterSale(this.selectedOrder.sn);
-      if (res.data.success) {
-        uni.showToast({
-          title: "取消成功!",
-          duration: 2000,
-          icon: "none",
-        });
-      }
-      this.orderList = [];
-      this.searchOrderList(this.current);
-
-       if (this.$store.state.isShowToast){ uni.hideLoading() };
-    },
-
-    /**
-     * 售后详情
-     */
-    afterDetails(order) {
-      uni.navigateTo({
-        url: "./applyDetail?sn=" + order.sn,
-      });
-    },
-
-    /**
-     * 申请记录列表
-     */
-    getAfterSaleLogList() {
-      getAfterSaleList(this.logParams).then((res) => {
-        let afterSaleLogList = res.data.result.records;
-
-        afterSaleLogList.forEach((item) => {
-          item.orderItems = [
-            {
-              image: item.goodsImage,
-              skuId: item.skuId,
-              name: item.goodsName,
-              num: item.num,
-              price: item.flowPrice,
-            },
-          ];
-        });
-
-        this.orderList = this.orderList.concat(afterSaleLogList);
-
-        if (afterSaleLogList.length < 10) {
-          this.status = "nomore";
-        } else {
-          this.status = "loading";
-        }
-      });
-    },
-
-    /**
-     * 申请售后
-     */
-    applyService(sn, order, sku) {
-      let data = {
-        ...order,
-        ...sku,
-      };
-      storage.setAfterSaleData(data);
-      uni.navigateTo({
-        url: `/pages/order/afterSales/afterSalesSelect?sn=${sn}`,
-      });
-    },
-
-    /**
-     * 提交物流信息
-     */
-    onExpress(order, sku) {
-      sku.storeName = order.storeName;
-      let data = {
-        ...order,
-        ...sku,
-      };
-
-      storage.setAfterSaleData(data);
-      uni.navigateTo({
-        url: `./afterSalesDetailExpress?serviceSn=${order.sn}`,
-      });
-    },
-
-    /**
-     * 查看详情
-     */
-    onDetail(goods, sku) {
-      // 售后申请
-      if (this.current == 0) {
-        uni.navigateTo({
-          url: `/pages/product/goods?id=${sku.skuId}&goodsId=${
-            sku.goodsId || sku.goodsId
-          }`,
-        });
-      } else {
-        uni.navigateTo({
-          url: `/pages/product/goods?id=${goods.skuId}&goodsId=${
-            goods.goodsId || goods.goodsId
-          }`,
-        });
-      }
-    },
-
-    /**
-     * 底部加载数据
-     */
-    renderDate() {
-      if (this.current === 0) {
-        this.params.pageNumber += 1;
-        this.getOrderList();
-      } else {
-        this.logParams.pageNumber += 1;
-        this.getAfterSaleLogList();
-      }
-    },
-  },
-};
+function renderDate() {
+  if (current.value === 0) {
+    params.pageNumber += 1
+    fetchOrderList()
+  } else {
+    logParams.pageNumber += 1
+    fetchAfterSaleLogList()
+  }
+}
 </script>
 
 <style lang="scss">
diff --git a/pages/order/afterSales/afterSalesDetail.vue b/pages/order/afterSales/afterSalesDetail.vue
index c858601..0786a8f 100644
--- a/pages/order/afterSales/afterSalesDetail.vue
+++ b/pages/order/afterSales/afterSalesDetail.vue
@@ -1,7 +1,12 @@
 <template>
   <view class="page-wrap">
     <scroll-view scroll-y class="page-scroll">
-      <u-form :model="form" ref="uForm">
+      <up-form
+        :model="form"
+        ref="uForm"
+        label-position="left"
+        label-width="180rpx"
+      >
         <view class="after-sales-goods-detail-view">
         <view class="header">
           <view>
@@ -58,7 +63,7 @@
               <u-icon name="arrow-right" color="#ccc" size="16"></u-icon>
             </view>
           </view>
-          <u-form-item label="申请说明" label-width="150" :border-bottom="false" class="desc-item">
+          <up-form-item label="申请说明" label-width="180rpx" :border-bottom="false" class="desc-item">
             <u-input
               v-model="form.problemDesc"
               type="textarea"
@@ -67,54 +72,54 @@
               height="120"
               placeholder="请描述申请售后的说明"
             />
-          </u-form-item>
+          </up-form-item>
         </view>
 
         <!-- 退款方式 / 银行信息 -->
         <view class="opt-view form-block">
-          <u-form-item label="退款方式" label-width="150" :border-bottom="true">
+          <up-form-item label="退款方式" label-width="180rpx" :border-bottom="true">
             <view class="form-value">{{
               applyInfo.refundWay == 'ORIGINAL' ? '原路退回' : '账号退款'
             }}</view>
-          </u-form-item>
+          </up-form-item>
           <template v-if="
               applyInfo.accountType === 'BANK_TRANSFER' &&
               applyInfo.applyRefundPrice != 0
             ">
-            <u-form-item label="银行开户行" label-width="150" :border-bottom="true">
+            <up-form-item label="银行开户行" label-width="180rpx" :border-bottom="true">
               <u-input
                 v-model="form.bankDepositName"
                 border="none"
                 input-align="right"
                 placeholder="请输入银行开户行"
               />
-            </u-form-item>
-            <u-form-item label="银行开户名" label-width="150" :border-bottom="true">
+            </up-form-item>
+            <up-form-item label="银行开户名" label-width="180rpx" :border-bottom="true">
               <u-input
                 v-model="form.bankAccountName"
                 border="none"
                 input-align="right"
                 placeholder="请输入银行开户名"
               />
-            </u-form-item>
-            <u-form-item label="银行账号" label-width="150" :border-bottom="true" class="bank-account-item">
+            </up-form-item>
+            <up-form-item label="银行账号" label-width="180rpx" :border-bottom="true" class="bank-account-item">
               <u-input
                 v-model="form.bankAccountNumber"
                 border="none"
                 input-align="right"
                 placeholder="请输入银行账号"
               />
-            </u-form-item>
+            </up-form-item>
           </template>
 
-          <u-form-item
+          <up-form-item
             v-if="form.serviceType !== 'RETURN_MONEY'"
             label="返回方式"
-            label-width="150"
+            label-width="180rpx"
             :border-bottom="false"
           >
             <view class="form-value">快递至第三方卖家</view>
-          </u-form-item>
+          </up-form-item>
         </view>
 
         <!-- 上传凭证 -->
@@ -133,7 +138,7 @@
 
         <view class="opt-tip">提交服务单后，售后专员可能与您电话沟通，请保持手机畅通</view>
       </view>
-      </u-form>
+      </up-form>
     </scroll-view>
 
     <view class="submit-view">
@@ -142,7 +147,7 @@
         ripple
         shape="circle"
         v-if="applyInfo.refundWay"
-        :custom-style="{ backgroundColor: $lightColor, width: '100%' }"
+        :custom-style="{ backgroundColor: lightColor, width: '100%' }"
         @click="onSubmit"
       >提交申请</u-button>
     </view>
@@ -158,246 +163,214 @@
   </view>
 </template>
 
-<script>
-import {
-  getAfterSaleReason,
-  applyReturn,
-  getAfterSaleInfo,
-} from "@/api/after-sale";
+<script setup lang="ts">
+import { ref, reactive, computed, getCurrentInstance } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import { unitPrice, parseGoodsImageUrl } from '@/utils/filters.js'
+import { getAfterSaleReason, applyReturn, getAfterSaleInfo } from '@/api/after-sale'
+import { handleUploadAfterRead } from '@/utils/uploadHelper.js'
+import storage from '@/utils/storage.js'
 
-import city from "@/components/m-city/m-city";
-import { handleUploadAfterRead } from "@/utils/uploadHelper.js";
-import storage from "@/utils/storage.js";
-export default {
-  component: {
-    city,
-  },
-  data() {
-    return {
-      storage,
-      list: [{ id: "", localName: "请选择", children: [] }],
-      fileList: [],
-      sn: "",
-      sku: {},
-      typeValue: 0,
-      value: "",
-      type: "textarea",
-      border: true,
-      //退款原因 弹出框
-      reasonSelectShow: false,
-      reasonList: [],
-      applyInfo: {},
-      form: {
-        orderItemSn: "", // 订单sn
-        skuId: "",
-        reason: "", //退款原因
-        problemDesc: "", //退款说明
-        images: [], //图片凭证
-        num: 1, //退货数量
-        goodsId: "", //商品id
-        accountType: "",
-        applyRefundPrice: "",
-        refundWay: "",
-        serviceType: "", //申请类型
-      },
-    };
-  },
+const store = useStore()
+const { proxy } = getCurrentInstance()!
+const $u = proxy!.$u
 
-  /**
-   * 判断当前内容并生成数据
-   */
-  onLoad(options) {
-    let navTitle = "申请售后";
-    this.form.serviceType = "RETURN_GOODS";
-    if (options.value == 1) {
-      navTitle = "申请退货";
-      this.form.serviceType = "RETURN_GOODS";
+const lightColor = computed(() => store.getters.lightColor)
+
+const fileList = ref<any[]>([])
+const sn = ref('')
+const sku = ref<any>({})
+const reasonSelectShow = ref(false)
+const reasonList = ref<any[]>([])
+const applyInfo = ref<any>({})
+const uToast = ref<any>(null)
+
+const form = reactive({
+  orderItemSn: '',
+  skuId: '',
+  reason: '',
+  problemDesc: '',
+  images: [] as string[],
+  num: 1,
+  goodsId: '',
+  accountType: '',
+  applyRefundPrice: '',
+  refundWay: '',
+  serviceType: 'RETURN_GOODS',
+  bankDepositName: '',
+  bankAccountName: '',
+  bankAccountNumber: '',
+})
+
+onLoad((options) => {
+  let navTitle = '申请售后'
+  form.serviceType = 'RETURN_GOODS'
+  if (options?.value == '1') {
+    navTitle = '申请退货'
+    form.serviceType = 'RETURN_GOODS'
+  }
+  if (options?.value == '2') {
+    navTitle = '申请换货'
+    form.serviceType = 'EXCHANGE_GOODS'
+  }
+  if (options?.value == '3') {
+    navTitle = '申请退款'
+    form.serviceType = 'RETURN_MONEY'
+  }
+  uni.setNavigationBarTitle({ title: navTitle })
+  sn.value = options?.sn || ''
+  sku.value = storage.getAfterSaleData()
+  form.orderItemSn = options?.sn || ''
+  form.skuId = sku.value.skuId
+  form.num = sku.value.num
+  form.goodsId = sku.value.goodsId
+  fetchReasonActions(form.serviceType)
+  init(options?.sn || '')
+})
+
+function hideLoadingIfNeeded() {
+  if (store.state.isShowToast) uni.hideLoading()
+}
+
+function getGoodsName(item: any) {
+  return item.goodsName || item.name || ''
+}
+
+function getGoodsImage(item: any) {
+  const image = item.image || item.goodsImage || item.thumbnail
+  return parseGoodsImageUrl(image)
+}
+
+function gotoGoodsDetail(goodsId: string) {
+  if (!goodsId) return
+  uni.navigateTo({
+    url: `/pages/product/goods?id=${form.skuId}&goodsId=${goodsId}`,
+  })
+}
+
+async function fetchReasonActions(serviceType: string) {
+  uni.showLoading({ title: '加载中' })
+  await getAfterSaleReason(serviceType).then((res) => {
+    if (res.data.success) {
+      reasonList.value = res.data.result.map((item: any) => ({
+        value: item.id,
+        label: item.reason,
+      }))
     }
-    if (options.value == 2) {
-      navTitle = "申请换货";
-      this.form.serviceType = "EXCHANGE_GOODS";
-    }
-    if (options.value == 3) {
-      navTitle = "申请退款";
-      this.form.serviceType = "RETURN_MONEY";
-    }
-    this.typeValue = options.value;
-    uni.setNavigationBarTitle({
-      title: navTitle, //此处写页面的title
-    });
-    this.sn = options.sn;
-    this.sku = storage.getAfterSaleData();;
+  })
+  hideLoadingIfNeeded()
+}
 
-    this.form.orderItemSn = options.sn;
-    this.form.skuId = this.sku.skuId;
-    this.form.num = this.sku.num;
-    this.form.goodsId = this.sku.goodsId;
-    this.getReasonActions(this.form.serviceType);
-
-    this.init(options.sn);
-  },
-  methods: {
-    getGoodsName(item) {
-      return item.goodsName || item.name || "";
-    },
-    getGoodsImage(item) {
-      const image = item.image || item.goodsImage || item.thumbnail;
-      return this.parseGoodsImageUrl(image);
-    },
-    gotoGoodsDetail(goodsId) {
-      if (!goodsId) return;
-      uni.navigateTo({
-        url: `/pages/product/goods?id=${this.form.skuId}&goodsId=${goodsId}`,
-      });
-    },
-    /** 获取申请原因下拉框数据 */
-    async getReasonActions(serviceType) {
-      uni.showLoading({
-        title: "加载中",
-      });
-      await getAfterSaleReason(serviceType).then((res) => {
-        if (res.data.success) {
-          let action = [];
-          res.data.result.forEach((item) => {
-            action.push({
-              value: item.id,
-              label: item.reason,
-            });
-          });
-
-          this.reasonList = action;
-        }
-      });
-       if (this.$store.state.isShowToast){ uni.hideLoading() };
-    },
-    //打开地区选择器
-    showCitySelect() {
-      this.$refs.cityPicker.show();
-    },
-
-    // 初始化数据
-    init(sn) {
-      getAfterSaleInfo(sn).then((response) => {
-        if (response.data.code == 400) {
-          uni.showToast({
-            title: response.data.message,
-            duration: 2000,
-            icon: "none",
-          });
-        } else {
-          this.applyInfo = response.data.result;
-
-          this.form.accountType = response.data.result.accountType;
-        }
-      });
-    },
-
-    openReasonPicker() {
-      if (!this.reasonList.length) {
-        uni.showToast({
-          title: "暂无可选原因",
-          icon: "none",
-        });
-        return;
-      }
-      this.reasonSelectShow = true;
-    },
-
-    //退款原因
-    reasonSelectConfirm(val) {
-      const selected = val?.value?.[0] || val?.[0];
-      if (selected) {
-        this.form.reason = selected.label || selected.text || "";
-      }
-    },
-
-    //修改申请数量
-    valChange(e) {
-      this.form.num = e.value;
-    },
-    onUploadAfterRead(event) {
-      handleUploadAfterRead(event, this.fileList, (urls) => {
-        this.form.images = urls;
-      });
-    },
-    showToast(message, type = "error") {
-      const text = message || (type === "success" ? "操作成功" : "操作失败");
-      if (this.$refs.uToast) {
-        this.$refs.uToast.show({ message: text, type });
-        return;
-      }
+function init(orderItemSn: string) {
+  getAfterSaleInfo(orderItemSn).then((response) => {
+    if (response.data.code == 400) {
       uni.showToast({
-        title: text,
-        icon: type === "success" ? "success" : "none",
-      });
-    },
-    //提交申请
-    onSubmit() {
-      //提交申请前检测参数
-      if (!this.handleCheckParams()) {
-        return;
-      }
+        title: response.data.message,
+        duration: 2000,
+        icon: 'none',
+      })
+    } else {
+      applyInfo.value = response.data.result
+      form.accountType = response.data.result.accountType
+    }
+  })
+}
 
-      uni.showLoading({
-        title: "加载中",
-      });
-      this.form.accountType = this.applyInfo.accountType;
-      this.form.refundWay = this.applyInfo.refundWay;
-      this.form.applyRefundPrice = this.applyInfo.applyRefundPrice;
+function openReasonPicker() {
+  if (!reasonList.value.length) {
+    uni.showToast({ title: '暂无可选原因', icon: 'none' })
+    return
+  }
+  reasonSelectShow.value = true
+}
 
-      applyReturn(this.sn, this.form).then((resp) => {
-         if (this.$store.state.isShowToast){ uni.hideLoading() };
-        if (resp.data.success) {
-          this.showToast("提交成功", "success");
-          uni.redirectTo({
-            url: "/pages/order/afterSales/applySuccess",
-          });
-        } else {
-          this.showToast(resp.data.message || "提交失败", "error");
-        }
-      });
-    },
-    //检测提交参数
-    handleCheckParams() {
-      if (this.$u.test.isEmpty(this.form.reason)) {
-        this.showToast("请选择退款原因");
-        return false;
-      }
-      if (this.$u.test.isEmpty(this.form.problemDesc)) {
-        this.showToast("请输入退款说明");
-        return false;
-      }
+function reasonSelectConfirm(val: any) {
+  const selected = val?.value?.[0] || val?.[0]
+  if (selected) {
+    form.reason = selected.label || selected.text || ''
+  }
+}
 
-      if (
-        this.applyInfo.accountType === "BANK_TRANSFER" &&
-        this.applyInfo.applyRefundPrice != 0
-      ) {
-        if (this.$u.test.isEmpty(this.form.bankDepositName)) {
-          this.showToast("请输入银行开户行");
-          return false;
-        }
-        if (this.$u.test.isEmpty(this.form.bankAccountName)) {
-          this.showToast("请输入银行开户名");
-          return false;
-        }
-        if (this.$u.test.isEmpty(this.form.bankAccountNumber)) {
-          this.showToast("请输入银行账号");
-          return false;
-        }
-        if (this.$u.test.chinese(this.form.bankAccountName) === false) {
-          this.showToast("银行开户名需为中文");
-          return false;
-        }
-        if (this.$u.test.chinese(this.form.bankDepositName) === false) {
-          this.showToast("银行开户行需为中文");
-          return false;
-        }
-      }
+function valChange(e: { value: number }) {
+  form.num = e.value
+}
 
-      return true;
-    },
-  },
-};
+function onUploadAfterRead(event: any) {
+  handleUploadAfterRead(event, fileList.value, (urls) => {
+    form.images = urls
+  })
+}
+
+function showToast(message: string, type = 'error') {
+  const text = message || (type === 'success' ? '操作成功' : '操作失败')
+  if (uToast.value) {
+    uToast.value.show({ message: text, type })
+    return
+  }
+  uni.showToast({
+    title: text,
+    icon: type === 'success' ? 'success' : 'none',
+  })
+}
+
+function onSubmit() {
+  if (!validateFormParams()) return
+
+  uni.showLoading({ title: '加载中' })
+  form.accountType = applyInfo.value.accountType
+  form.refundWay = applyInfo.value.refundWay
+  form.applyRefundPrice = applyInfo.value.applyRefundPrice
+
+  applyReturn(sn.value, form).then((resp) => {
+    hideLoadingIfNeeded()
+    if (resp.data.success) {
+      showToast('提交成功', 'success')
+      uni.redirectTo({ url: '/pages/order/afterSales/applySuccess' })
+    } else {
+      showToast(resp.data.message || '提交失败', 'error')
+    }
+  })
+}
+
+function validateFormParams() {
+  if ($u.test.isEmpty(form.reason)) {
+    showToast('请选择退款原因')
+    return false
+  }
+  if ($u.test.isEmpty(form.problemDesc)) {
+    showToast('请输入退款说明')
+    return false
+  }
+
+  if (
+    applyInfo.value.accountType === 'BANK_TRANSFER' &&
+    applyInfo.value.applyRefundPrice != 0
+  ) {
+    if ($u.test.isEmpty(form.bankDepositName)) {
+      showToast('请输入银行开户行')
+      return false
+    }
+    if ($u.test.isEmpty(form.bankAccountName)) {
+      showToast('请输入银行开户名')
+      return false
+    }
+    if ($u.test.isEmpty(form.bankAccountNumber)) {
+      showToast('请输入银行账号')
+      return false
+    }
+    if ($u.test.chinese(form.bankAccountName) === false) {
+      showToast('银行开户名需为中文')
+      return false
+    }
+    if ($u.test.chinese(form.bankDepositName) === false) {
+      showToast('银行开户行需为中文')
+      return false
+    }
+  }
+
+  return true
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/order/afterSales/afterSalesDetailExpress.vue b/pages/order/afterSales/afterSalesDetailExpress.vue
index 79c4558..e0a4140 100644
--- a/pages/order/afterSales/afterSalesDetailExpress.vue
+++ b/pages/order/afterSales/afterSalesDetailExpress.vue
@@ -1,6 +1,11 @@
 <template>
   <view class="mp-iphonex-bottom content">
-    <u-form :model="form" ref="uForm">
+    <up-form
+      :model="form"
+      ref="uForm"
+      label-position="left"
+      label-width="180rpx"
+    >
       <view class="after-sales-goods-detail-view">
         <view class="header">
           <view>
@@ -29,32 +34,32 @@
         <!-- 上传凭证 -->
         <view class="opt-view">
           <view class="img-title" style="font-size: 30rpx">填写物流信息</view>
-          <u-form-item label="返回方式" :label-width="150">
+          <up-form-item label="返回方式" label-width="180rpx">
             <div style="width: 100%; text-align: right;">快递至第三方卖家</div>
-          </u-form-item>
-          <u-form-item label="快递公司" :label-width="150">
+          </up-form-item>
+          <up-form-item label="快递公司" label-width="180rpx">
             <div style="width: 100%; text-align: right;" @click="companySelectShow = true">
               {{ form.courierCompany || '请选择快递公司' }}
             </div>
-          </u-form-item>
-          <u-form-item label="快递单号" :label-width="150">
+          </up-form-item>
+          <up-form-item label="快递单号" label-width="180rpx">
             <u-input input-align="right" v-model="form.logisticsNo" placeholder="请输入快递单号"/>
-          </u-form-item>
-          <u-form-item label="发货时间" :label-width="150">
+          </up-form-item>
+          <up-form-item label="发货时间" label-width="180rpx">
             <div style="width: 100%; text-align: right;" @click="timeshow = true">{{
                 form.mDeliverTime || '请选择发货时间'
               }}
             </div>
-          </u-form-item>
+          </up-form-item>
         </view>
       </scroll-view>
 
       <view class="submit-view">
-        <u-button ripple :customStyle="{'background':$lightColor,'color':'#fff' }" shape="circle" @click="onSubmit">
+        <u-button ripple :customStyle="{ background: lightColor, color: '#fff' }" shape="circle" @click="onSubmit">
           提交申请
         </u-button>
       </view>
-    </u-form>
+    </up-form>
     <u-select mode="single-column" :list="companyList" v-model:show="companySelectShow"
               @confirm="companySelectConfirm"></u-select>
     <u-calendar v-model:show="timeshow" :mode="'date'" @change="onTimeChange"></u-calendar>
@@ -62,124 +67,98 @@
   </view>
 </template>
 
-<script>
-import {getLogistics} from "@/api/address.js";
-import {fillShipInfo} from "@/api/after-sale.js";
-import storage from "@/utils/storage";
+<script setup lang="ts">
+import { ref, reactive, computed } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import { unitPrice } from '@/utils/filters.js'
+import { getLogistics } from '@/api/address.js'
+import { fillShipInfo } from '@/api/after-sale.js'
+import storage from '@/utils/storage'
 
-export default {
-  data() {
-    return {
-      //快递公司 弹出框
-      companySelectShow: false,
-      companyList: [], //快递公司集合
-      timeshow: false, //发货时间
-      form: {
-        courierCompany: "", //快递公司
-        logisticsId: "", //快递公司ID
-        logisticsNo: "", //快递单号
-        mDeliverTime: "", //发货时间
-      },
-      serviceDetail: {}, //服务详情
-      sku: {}, //sku信息
-    };
-  },
-  onLoad(options) {
+const store = useStore()
+const lightColor = computed(() => store.getters.lightColor)
 
-    this.sku = storage.getAfterSaleData();
-    let navTitle = "服务单详情";
-    uni.setNavigationBarTitle({
-      title: navTitle, //此处写页面的title
-    });
-    this.serviceDetail.sn = options.serviceSn;
-    this.Logistics();
-  },
-  methods: {
-    /**
-     * 确认快递公司
-     */
-    companySelectConfirm(e) {
-      this.form.logisticsId = e[0].value;
-      this.form.courierCompany = e[0].label;
-    },
+const companySelectShow = ref(false)
+const companyList = ref<any[]>([])
+const timeshow = ref(false)
+const form = reactive({
+  courierCompany: '',
+  logisticsId: '',
+  logisticsNo: '',
+  mDeliverTime: '',
+})
+const serviceDetail = reactive<{ sn: string }>({ sn: '' })
+const sku = ref<any>({})
+const uToast = ref<any>(null)
 
-    /**
-     * 获取快递公司
-     */
-    Logistics() {
-      getLogistics().then((res) => {
-        if (res.data.success) {
-          res.data.result.forEach((item, index) => {
-            this.companyList[index] = {
-              value: item.id,
-              label: item.name,
-            };
-          });
-        }
-      });
-    },
+onLoad((options) => {
+  sku.value = storage.getAfterSaleData()
+  uni.setNavigationBarTitle({ title: '服务单详情' })
+  serviceDetail.sn = options?.serviceSn || ''
+  fetchLogisticsList()
+})
 
-    /**
-     * 更改时间
-     */
-    onTimeChange(e) {
-      this.form.mDeliverTime = e.result;
-    },
+function hideLoadingIfNeeded() {
+  if (store.state.isShowToast) uni.hideLoading()
+}
 
-    /**
-     * 点击提交
-     */
-    onSubmit() {
-      delete this.form.courierCompany;
+function companySelectConfirm(e: any[]) {
+  form.logisticsId = e[0].value
+  form.courierCompany = e[0].label
+}
 
-      if (this.form.logisticsId == "") {
-        this.$refs.uToast.show({
-          title: "请选择快递公司",
-          type: "error",
-        });
-        return;
-      }
-      if (this.form.logisticsNo == "") {
-        this.$refs.uToast.show({
-          title: "请填写快递单号",
-          type: "error",
-        });
-        return;
-      }
-      if (this.form.mDeliverTime == "") {
-        this.$refs.uToast.show({
-          title: "请选择发货时间",
-          type: "error",
-        });
-        return;
-      }
+function fetchLogisticsList() {
+  getLogistics().then((res) => {
+    if (res.data.success) {
+      companyList.value = res.data.result.map((item: any) => ({
+        value: item.id,
+        label: item.name,
+      }))
+    }
+  })
+}
 
-      uni.showLoading({
-        title: "加载中",
-        mask: true,
-      });
-      fillShipInfo(this.serviceDetail.sn, this.form).then((res) => {
-        if (this.$store.state.isShowToast) {
-          uni.hideLoading()
-        }
-        ;
-        if (res.statusCode === 200) {
-          this.$refs.uToast.show({
-            title: "提交成功",
-            type: "success",
-            back: true,
-            url: "/pages/order/afterSales/afterSales",
-          });
-        }
-      });
-    },
-    gotoGoodsDetail(sku) {
-      uni.navigateTo({
-        url: `/pages/product/goods?id=${sku.skuId}&goodsId=${sku.goodsId}`,
-      });
-    },
-  },
-};
+function onTimeChange(e: { result: string }) {
+  form.mDeliverTime = e.result
+}
+
+function onSubmit() {
+  const submitForm = { ...form }
+  delete submitForm.courierCompany
+
+  if (form.logisticsId == '') {
+    uToast.value?.show({ title: '请选择快递公司', type: 'error' })
+    return
+  }
+  if (form.logisticsNo == '') {
+    uToast.value?.show({ title: '请填写快递单号', type: 'error' })
+    return
+  }
+  if (form.mDeliverTime == '') {
+    uToast.value?.show({ title: '请选择发货时间', type: 'error' })
+    return
+  }
+
+  uni.showLoading({ title: '加载中', mask: true })
+  fillShipInfo(serviceDetail.sn, submitForm).then((res) => {
+    hideLoadingIfNeeded()
+    if (res.statusCode === 200) {
+      uToast.value?.show({
+        title: '提交成功',
+        type: 'success',
+        back: true,
+        url: '/pages/order/afterSales/afterSales',
+      })
+    }
+  })
+}
+
+function gotoGoodsDetail(item: any) {
+  uni.navigateTo({
+    url: `/pages/product/goods?id=${item.skuId}&goodsId=${item.goodsId}`,
+  })
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/order/afterSales/afterSalesSelect.vue b/pages/order/afterSales/afterSalesSelect.vue
index c1d2b6a..bc34987 100644
--- a/pages/order/afterSales/afterSalesSelect.vue
+++ b/pages/order/afterSales/afterSalesSelect.vue
@@ -57,59 +57,51 @@
   </view>
 </template>
 
-<script>
-import { getAfterSaleInfo } from "@/api/after-sale";
-import storage from "@/utils/storage";
-export default {
-  data() {
-    return {
-      sn: "",
-      sku: {}, //sku
-      applyInfo:""
-    };
-  },
-  onLoad(options) {
-    this.sn = options.sn;
-    this.sku = storage.getAfterSaleData();
-    // 查看当前商品是否支持退款退货
-    this.init()
-  },
-  methods: {
-    getGoodsName(item) {
-      return item.goodsName || item.name || "";
-    },
-    getGoodsImage(item) {
-      const image = item.image || item.goodsImage || item.thumbnail;
-      return this.parseGoodsImageUrl(image);
-    },
-    // 初始化数据
-    init() {
-      getAfterSaleInfo(this.sn).then((response) => {
-        if (response.data.success) {
-          this.applyInfo = response.data.result;
-        }
-      });
-    },
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { unitPrice, parseGoodsImageUrl } from '@/utils/filters.js'
+import { getAfterSaleInfo } from '@/api/after-sale'
+import storage from '@/utils/storage'
 
-    /**
-     * 选择退货流程
-     */
-    onSelect(value) {
-      uni.redirectTo({
-        url: `./afterSalesDetail?sn=${this.sn}&value=${value}`,
-      });
-    },
+const sn = ref('')
+const sku = ref<any>({})
+const applyInfo = ref<any>({})
 
-    /**
-     * 跳转到商品信息
-     */
-    navigateToGoodsDetail(id) {
-      uni.navigateTo({
-        url: `/pages/product/goods?id=${id}&goodsId=${goodsId}`,
-      });
-    },
-  },
-};
+onLoad((options) => {
+  sn.value = options?.sn || ''
+  sku.value = storage.getAfterSaleData()
+  init()
+})
+
+function getGoodsName(item: any) {
+  return item.goodsName || item.name || ''
+}
+
+function getGoodsImage(item: any) {
+  const image = item.image || item.goodsImage || item.thumbnail
+  return parseGoodsImageUrl(image)
+}
+
+function init() {
+  getAfterSaleInfo(sn.value).then((response) => {
+    if (response.data.success) {
+      applyInfo.value = response.data.result
+    }
+  })
+}
+
+function onSelect(value: number) {
+  uni.redirectTo({
+    url: `./afterSalesDetail?sn=${sn.value}&value=${value}`,
+  })
+}
+
+function navigateToGoodsDetail(skuId: string) {
+  uni.navigateTo({
+    url: `/pages/product/goods?id=${skuId}&goodsId=${sku.value.goodsId}`,
+  })
+}
 </script>
 
 <style lang="scss">
diff --git a/pages/order/afterSales/applyDetail.vue b/pages/order/afterSales/applyDetail.vue
index f057050..57dd9b7 100644
--- a/pages/order/afterSales/applyDetail.vue
+++ b/pages/order/afterSales/applyDetail.vue
@@ -25,7 +25,7 @@
       </view>
       <view class="goods-info">
         <view class="info-box">
-          <view class="goods-item-view" @click="navgiateToGoodsDetail(serviceDetail)">
+          <view class="goods-item-view" @click="navigateToGoodsDetail(serviceDetail)">
             <view class="goods-img">
               <u-image
                 border-radius="6"
@@ -184,198 +184,184 @@
   </view>
 </template>
 
-<script>
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import {
+  unitPrice,
+  parseGoodsImageUrl,
+  serviceStatusList,
+  secrecyMobile,
+  unixToDate,
+} from '@/utils/filters.js'
 import {
   getServiceDetail,
   getStoreAfterSaleAddress,
   getAfterSaleLog,
   getAfterSaleReason,
-} from "@/api/after-sale.js";
-export default {
-  data() {
-    return {
-      reason: "", //申请原因
-      serviceTypeList: {
-        // 售后类型
-        CANCEL: "取消",
-        RETURN_GOODS: "退货",
-        EXCHANGE_GOODS: "换货",
-        RETURN_MONEY: "退款",
-      },
-      serviceDetail: {}, // 售后详情
-      logs: [], //日志
-      goodsList: [], //商品列表
-      storeAfterSaleAddress: {}, //售后地址
-      refundShow: false, //退款开关
-      accountShow: false, //账户显示
-      bankShow: false, //银行显示
-      sn: "", //订单sn
-    };
-  },
-  onLoad(options) {
-    uni.setNavigationBarTitle({
-      title: "服务单详情",
-    });
-    this.sn = options.sn;
-    this.loadDetail();
-    this.getAddress();
-    this.getLog(options.sn);
-  },
-  methods: {
-    statusFilter(val) {
-      switch (val) {
-        case "APPLY":
-          return "售后服务申请成功，等待商家审核";
-        case "PASS":
-          return "售后服务申请审核通过";
-        case "REFUSE":
-          return "售后服务申请已被商家拒绝，如有疑问请及时联系商家";
-        case "FULL_COURIER":
-          return "申请售后的商品已经寄出，等待商家收货";
-        case "STOCK_IN":
-          return "商家已将售后商品入库";
-        case "WAIT_FOR_MANUAL":
-          return "等待平台进行人工退款";
-        case "REFUNDING":
-          return "商家退款中，请您耐心等待";
-        case "COMPLETED":
-          return "售后服务已完成，感谢您的支持";
-        case "ERROR_EXCEPTION":
-          return "系统生成新订单异常，等待商家手动创建新订单";
-        case "CLOSED":
-          return "售后服务已关闭";
-        case "WAIT_REFUND":
-          return "等待平台进行退款";
-        default:
-          return "";
-      }
-    },
-    refundWayFilter(val) {
-      switch (val) {
-        case "OFFLINE":
-          return "账户退款";
-        case "ORIGINAL":
-          return "原路退回";
-        default:
-          return "";
-      }
-    },
-    accountTypeFilter(val) {
-      switch (val) {
-        case "WEIXINPAY":
-          return "微信";
-        case "ALIPAY":
-          return "支付宝";
-        case "BANK_TRANSFER":
-          return "银行卡";
-        default:
-          return "";
-      }
-    },
-    /**
-     * 点击图片放大或保存
-     */
-    preview(urls, index) {
-      uni.previewImage({
-        current: index,
-        urls: urls,
-        longPressActions: {
-          itemList: ["保存图片"],
-          success: function (data) {},
-          fail: function (err) {},
-        },
-      });
-    },
+} from '@/api/after-sale.js'
 
-    /**
-     * 获取地址信息
-     */
-    getAddress() {
-      getStoreAfterSaleAddress(this.sn).then((res) => {
-        if (res.data.success) {
-          this.storeAfterSaleAddress = res.data.result;
-        }
-      });
+const store = useStore()
+
+const reason = ref('')
+const serviceTypeList: Record<string, string> = {
+  CANCEL: '取消',
+  RETURN_GOODS: '退货',
+  EXCHANGE_GOODS: '换货',
+  RETURN_MONEY: '退款',
+}
+const serviceDetail = ref<any>(null)
+const logs = ref<any[]>([])
+const storeAfterSaleAddress = ref<any>({})
+const refundShow = ref(false)
+const accountShow = ref(false)
+const bankShow = ref(false)
+const sn = ref('')
+
+onLoad((options) => {
+  uni.setNavigationBarTitle({ title: '服务单详情' })
+  sn.value = options?.sn || ''
+  loadDetail()
+  fetchAddress()
+  fetchLog(sn.value)
+})
+
+function hideLoadingIfNeeded() {
+  if (store.state.isShowToast) uni.hideLoading()
+}
+
+function statusFilter(val: string) {
+  switch (val) {
+    case 'APPLY':
+      return '售后服务申请成功，等待商家审核'
+    case 'PASS':
+      return '售后服务申请审核通过'
+    case 'REFUSE':
+      return '售后服务申请已被商家拒绝，如有疑问请及时联系商家'
+    case 'FULL_COURIER':
+      return '申请售后的商品已经寄出，等待商家收货'
+    case 'STOCK_IN':
+      return '商家已将售后商品入库'
+    case 'WAIT_FOR_MANUAL':
+      return '等待平台进行人工退款'
+    case 'REFUNDING':
+      return '商家退款中，请您耐心等待'
+    case 'COMPLETED':
+      return '售后服务已完成，感谢您的支持'
+    case 'ERROR_EXCEPTION':
+      return '系统生成新订单异常，等待商家手动创建新订单'
+    case 'CLOSED':
+      return '售后服务已关闭'
+    case 'WAIT_REFUND':
+      return '等待平台进行退款'
+    default:
+      return ''
+  }
+}
+
+function refundWayFilter(val: string) {
+  switch (val) {
+    case 'OFFLINE':
+      return '账户退款'
+    case 'ORIGINAL':
+      return '原路退回'
+    default:
+      return ''
+  }
+}
+
+function accountTypeFilter(val: string) {
+  switch (val) {
+    case 'WEIXINPAY':
+      return '微信'
+    case 'ALIPAY':
+      return '支付宝'
+    case 'BANK_TRANSFER':
+      return '银行卡'
+    default:
+      return ''
+  }
+}
+
+function preview(urls: string[], index: number) {
+  uni.previewImage({
+    current: index,
+    urls,
+    longPressActions: {
+      itemList: ['保存图片'],
+      success: () => {},
+      fail: () => {},
     },
+  })
+}
 
-    /**
-     * 获取日志
-     */
-    getLog(sn) {
-      getAfterSaleLog(sn).then((res) => {
-        this.logs = res.data.result;
-      });
-    },
+function fetchAddress() {
+  getStoreAfterSaleAddress(sn.value).then((res) => {
+    if (res.data.success) {
+      storeAfterSaleAddress.value = res.data.result
+    }
+  })
+}
 
-    /**
-     * 获取申请原因
-     */
-    getReasonList(serviceType) {
-      getAfterSaleReason(serviceType).then((res) => {
-        if (res.data.success) {
-          // 1357583466371219456
-          this.reason = this.serviceDetail.reason;
-        }
-      });
-    },
+function fetchLog(serviceSn: string) {
+  getAfterSaleLog(serviceSn).then((res) => {
+    logs.value = res.data.result
+  })
+}
 
-    /**
-     * 初始化详情
-     */
-    loadDetail() {
-      uni.showLoading({
-        title: "加载中",
-      });
-      getServiceDetail(this.sn).then((res) => {
-         if (this.$store.state.isShowToast){ uni.hideLoading() };
-        this.serviceDetail = res.data.result;
-        if (
-          this.serviceDetail.serviceType == "RETURN_GOODS" ||
-          this.serviceDetail.serviceType === "RETURN_MONEY"
-        ) {
-          this.refundShow = true;
-        }
+function fetchReasonList(serviceType: string) {
+  getAfterSaleReason(serviceType).then((res) => {
+    if (res.data.success) {
+      reason.value = serviceDetail.value.reason
+    }
+  })
+}
 
-        this.accountShow =
-          (this.serviceDetail.serviceType === "RETURN_GOODS" ||
-            this.serviceDetail.serviceType === "ORDER_CANCEL") &&
-          this.serviceDetail.refundWay === "OFFLINE";
+function loadDetail() {
+  uni.showLoading({ title: '加载中' })
+  getServiceDetail(sn.value).then((res) => {
+    hideLoadingIfNeeded()
+    serviceDetail.value = res.data.result
+    if (
+      serviceDetail.value.serviceType == 'RETURN_GOODS' ||
+      serviceDetail.value.serviceType === 'RETURN_MONEY'
+    ) {
+      refundShow.value = true
+    }
 
-        this.bankShow =
-          this.serviceDetail.accountType === "BANK_TRANSFER" &&
-          this.serviceDetail.refundWay === "OFFLINE" &&
-          ((this.serviceDetail.serviceType === "RETURN_GOODS") |
-            (this.serviceDetail.serviceType === "ORDER_CANCEL") ||
-            this.serviceDetail.serviceType === "RETURN_MONEY");
+    accountShow.value =
+      (serviceDetail.value.serviceType === 'RETURN_GOODS' ||
+        serviceDetail.value.serviceType === 'ORDER_CANCEL') &&
+      serviceDetail.value.refundWay === 'OFFLINE'
 
-        this.getReasonList(this.serviceDetail.serviceType);
-      });
-    },
+    bankShow.value =
+      serviceDetail.value.accountType === 'BANK_TRANSFER' &&
+      serviceDetail.value.refundWay === 'OFFLINE' &&
+      ((serviceDetail.value.serviceType === 'RETURN_GOODS') |
+        (serviceDetail.value.serviceType === 'ORDER_CANCEL') ||
+        serviceDetail.value.serviceType === 'RETURN_MONEY')
 
-    /**
-     * 访问商品详情
-     */
-    navgiateToGoodsDetail(item) {
-      uni.navigateTo({
-        url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`,
-      });
-    },
+    fetchReasonList(serviceDetail.value.serviceType)
+  })
+}
 
-    /**
-     * 进度
-     */
-    onProgress() {
-      uni.navigateTo({
-        url: `./applyProgress?sn=${
-          this.serviceDetail.sn
-        }&createTime=${encodeURIComponent(this.serviceDetail.createTime)}
-         &logs=${encodeURIComponent(JSON.stringify(this.logs))}&serviceStatus=${
-          this.serviceDetail.serviceStatus
-        }`,
-      });
-    },
-  },
-};
+function navigateToGoodsDetail(item: any) {
+  uni.navigateTo({
+    url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`,
+  })
+}
+
+function onProgress() {
+  uni.navigateTo({
+    url: `./applyProgress?sn=${
+      serviceDetail.value.sn
+    }&createTime=${encodeURIComponent(serviceDetail.value.createTime)}
+         &logs=${encodeURIComponent(JSON.stringify(logs.value))}&serviceStatus=${
+      serviceDetail.value.serviceStatus
+    }`,
+  })
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/order/afterSales/applyProgress.vue b/pages/order/afterSales/applyProgress.vue
index aa99f61..b4c3acc 100644
--- a/pages/order/afterSales/applyProgress.vue
+++ b/pages/order/afterSales/applyProgress.vue
@@ -35,54 +35,50 @@
   </view>
 </template>
 
-<script>
-export default {
-  data() {
-    return {
-      sn: "", //sn
-      createTime: "", //创建时间
-      logList: [], //日志集合
-      serviceStatus: "", //订单状态
-    };
-  },
-  onLoad(options) {
-    this.sn = options.sn;
-    this.createTime = decodeURIComponent(options.createTime);
-    this.serviceStatus = this.statusFilter(options.serviceStatus);
-    this.logList = JSON.parse(decodeURIComponent(options.logs));
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
 
-  },
-  methods: {
-    statusFilter(val) {
-      switch (val) {
-        case "APPLY":
-          return "售后服务申请成功，等待商家审核";
-        case "PASS":
-          return "售后服务申请审核通过";
-        case "REFUSE":
-          return "售后服务申请已被商家拒绝，如有疑问请及时联系商家";
-        case "FULL_COURIER":
-          return "申请售后的商品已经寄出，等待商家收货";
-        case "STOCK_IN":
-          return "商家已将售后商品入库";
-        case "WAIT_FOR_MANUAL":
-          return "等待平台进行人工退款";
-        case "REFUNDING":
-          return "商家退款中，请您耐心等待";
-        case "COMPLETED":
-          return "售后服务已完成，感谢您的支持";
-        case "ERROR_EXCEPTION":
-          return "系统生成新订单异常，等待商家手动创建新订单";
-        case "CLOSED":
-          return "售后服务已关闭";
-        case "WAIT_REFUND":
-          return "等待平台进行退款";
-        default:
-          return "";
-      }
-    },
-  },
-};
+const sn = ref('')
+const createTime = ref('')
+const logList = ref<any[]>([])
+const serviceStatus = ref('')
+
+function statusFilter(val: string) {
+  switch (val) {
+    case 'APPLY':
+      return '售后服务申请成功，等待商家审核'
+    case 'PASS':
+      return '售后服务申请审核通过'
+    case 'REFUSE':
+      return '售后服务申请已被商家拒绝，如有疑问请及时联系商家'
+    case 'FULL_COURIER':
+      return '申请售后的商品已经寄出，等待商家收货'
+    case 'STOCK_IN':
+      return '商家已将售后商品入库'
+    case 'WAIT_FOR_MANUAL':
+      return '等待平台进行人工退款'
+    case 'REFUNDING':
+      return '商家退款中，请您耐心等待'
+    case 'COMPLETED':
+      return '售后服务已完成，感谢您的支持'
+    case 'ERROR_EXCEPTION':
+      return '系统生成新订单异常，等待商家手动创建新订单'
+    case 'CLOSED':
+      return '售后服务已关闭'
+    case 'WAIT_REFUND':
+      return '等待平台进行退款'
+    default:
+      return ''
+  }
+}
+
+onLoad((options) => {
+  sn.value = options.sn || ''
+  createTime.value = decodeURIComponent(options.createTime || '')
+  serviceStatus.value = statusFilter(options.serviceStatus || '')
+  logList.value = JSON.parse(decodeURIComponent(options.logs || '[]'))
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/order/afterSales/applySuccess.vue b/pages/order/afterSales/applySuccess.vue
index 190d887..6d55443 100644
--- a/pages/order/afterSales/applySuccess.vue
+++ b/pages/order/afterSales/applySuccess.vue
@@ -21,31 +21,18 @@
   </view>
 </template>
 
-<script>
-export default {
-  data() {
-    return {};
-  },
-  methods: {
-    /**
-     * 跳转到售后服务
-     */
-    navigateToAfterSales() {
-      uni.redirectTo({
-        url: "/pages/order/afterSales/afterSales",
-      });
-    },
+<script setup lang="ts">
+function navigateToAfterSales() {
+  uni.redirectTo({
+    url: '/pages/order/afterSales/afterSales',
+  })
+}
 
-    /**
-     * 跳转到首页
-     */
-    navigateToHome() {
-      uni.switchTab({
-        url: "/pages/tabbar/home/index",
-      });
-    },
-  },
-};
+function navigateToHome() {
+  uni.switchTab({
+    url: '/pages/tabbar/home/index',
+  })
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/order/complain/complain.vue b/pages/order/complain/complain.vue
index 5e4f67f..9b7caf4 100644
--- a/pages/order/complain/complain.vue
+++ b/pages/order/complain/complain.vue
@@ -57,137 +57,112 @@
   </view>
 </template>
 
-<script>
-import storage from "@/utils/storage.js";
-import { getOrderDetail } from "@/api/order.js";
-import { getComplainReason, addComplain } from "@/api/after-sale.js";
-import { handleUploadAfterRead } from "@/utils/uploadHelper.js";
-export default {
-  data() {
-    return {
-      storage,
-      uploadFileList: [],
-      orderStatusMap: {
-        //订单状态列表
-        UNDELIVERED: "待发货",
-        PARTS_DELIVERED: "部分发货",
-        UNPAID: "未付款",
-        PAID: "已付款",
-        DELIVERED: "已发货",
-        CANCELLED: "已取消",
-        COMPLETE: "已完成",
-        TAKE: "已完成",
-      },
-      complainValue: "", //投诉内容
-      complainShow: false, //投诉主题开关
-      complainTopic: "", //投诉抱怨话题
-      complainList: [], // 投诉列表
-      images: [], //投诉内容图片
-      order: "", //订单
-      orderGoodsList: "", //订单商品
-      orderDetail: "", //订单详情
-      sn: "",
-      skuId: "", //商品skuid
-    };
-  },
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import { getOrderDetail } from '@/api/order.js'
+import { getComplainReason, addComplain } from '@/api/after-sale.js'
+import { handleUploadAfterRead } from '@/utils/uploadHelper.js'
+import { unitPrice } from '@/utils/filters.js'
 
-  onLoad(option) {
-    this.loadData(option.sn);
-    this.sn = option.sn;
-    this.skuId = option.skuId;
-    this.getReasion();
-  },
+const store = useStore()
 
-  methods: {
-    onUploadAfterRead(event) {
-      handleUploadAfterRead(event, this.uploadFileList, (urls) => {
-        this.images = urls;
-      });
-    },
-    /**
-     * 提交
-     */
-    handleSubmit() {
-      if(!this.images.length && !this.complainValue){
-        uni.showToast({
-          title:'请上传图片凭证和投诉内容',
-          icon:'none'
+const orderStatusMap: Record<string, string> = {
+  UNDELIVERED: '待发货',
+  PARTS_DELIVERED: '部分发货',
+  UNPAID: '未付款',
+  PAID: '已付款',
+  DELIVERED: '已发货',
+  CANCELLED: '已取消',
+  COMPLETE: '已完成',
+  TAKE: '已完成',
+}
+
+const uploadFileList = ref<any[]>([])
+const complainValue = ref('')
+const complainShow = ref(false)
+const complainTopic = ref('')
+const complainList = ref<any[]>([])
+const images = ref<string[]>([])
+const order = ref<Record<string, any>>({})
+const orderGoodsList = ref<any[]>([])
+const sn = ref('')
+const skuId = ref('')
+
+onLoad((option) => {
+  loadData(option.sn)
+  sn.value = option.sn
+  skuId.value = option.skuId
+  getReasion()
+})
+
+function onUploadAfterRead(event: any) {
+  handleUploadAfterRead(event, uploadFileList.value, (urls) => {
+    images.value = urls
+  })
+}
+
+function handleSubmit() {
+  if (!images.value.length && !complainValue.value) {
+    uni.showToast({
+      title: '请上传图片凭证和投诉内容',
+      icon: 'none',
+    })
+    return
+  }
+  const goods = orderGoodsList.value.filter((item) => item.skuId == skuId.value)
+  const data = {
+    complainTopic: complainTopic.value,
+    content: complainValue.value,
+    goodsId: goods[0].goodsId,
+    images: images.value,
+    orderSn: sn.value,
+    skuId: skuId.value,
+  }
+  addComplain(data).then((res) => {
+    if (res.data.success) {
+      uni.showToast({
+        title: '提交成功!',
+        duration: 2000,
+        icon: 'none',
+      })
+      setTimeout(() => {
+        uni.redirectTo({
+          url: '/pages/order/complain/complainList',
         })
-        return
+      }, 1000)
+    }
+  })
+}
 
-      }
-      // 循环出商品
-      let goods = this.orderGoodsList.filter((item) => {
-        return item.skuId == this.skuId;
-      });
-      //数据赋值
-      let data = {
-        complainTopic: this.complainTopic, //投诉主题,
-        content: this.complainValue, //投诉内容
-        goodsId: goods[0].goodsId, //商品id
-        images: this.images, //图片
-        orderSn: this.sn, //订单号
-        skuId: this.skuId, //skuid
-      };
-      addComplain(data).then((res) => {
-        if (res.data.success) {
-          uni.showToast({
-            title: "提交成功!",
-            duration: 2000,
-            icon: "none",
-          });
+function getReasion() {
+  getComplainReason().then((res) => {
+    if (res.data.result.length >= 1) {
+      res.data.result.forEach((item: any) => {
+        complainList.value.push({
+          value: item.reason,
+          label: item.reason,
+        })
+      })
+      complainTopic.value = res.data.result[0].reason
+    }
+  })
+}
 
-          setTimeout(() => {
-            uni.redirectTo({
-              url: "/pages/order/complain/complainList",
-            });
-          }, 1000);
-        }
-      });
-    },
+function loadData(orderSn: string) {
+  uni.showLoading({ title: '加载中' })
+  getOrderDetail(orderSn).then((res) => {
+    const result = res.data.result
+    order.value = result.order
+    orderGoodsList.value = result.orderItems
+    if (store.state.isShowToast) uni.hideLoading()
+  })
+}
 
-    /**
-     * 获取投诉原因
-     */
-    getReasion() {
-      getComplainReason().then((res) => {
-        if (res.data.result.length >= 1) {
-          res.data.result.forEach((item) => {
-            let way = {
-              value: item.reason,
-              label: item.reason,
-            };
-            this.complainList.push(way);
-          });
-          this.complainTopic = res.data.result[0].reason;
-        }
-      });
-    },
-
-    /**
-     * 加载订单详情
-     */
-    loadData(sn) {
-      uni.showLoading({
-        title: "加载中",
-      });
-      getOrderDetail(sn).then((res) => {
-        const order = res.data.result;
-        this.order = order.order;
-        this.orderGoodsList = order.orderItems;
-        this.orderDetail = res.data.result;
-         if (this.$store.state.isShowToast){ uni.hideLoading() };
-      });
-    },
-
-    /**
-     * 确认投诉
-     */
-    confirmComplain(e) {
-      this.complainTopic = e[0].label;
-    },
-  },
-};
+function confirmComplain(e: any[]) {
+  complainTopic.value = e[0].label
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/order/complain/complainInfo.vue b/pages/order/complain/complainInfo.vue
index 4de148b..72cd809 100644
--- a/pages/order/complain/complainInfo.vue
+++ b/pages/order/complain/complainInfo.vue
@@ -34,7 +34,7 @@
         <span>{{ complaint.content }}</span>
       </view>
     </view>
-    <view class="speak-way" v-else>暂无对话</view>
+    <view class="speak-way" v-else>暂无对话</view>
 	<div v-if="complainDetail.complainStatus!='COMPLETE'">
 		<view class="tips">回复对话</view>
 		<view class="cell-item complain-content">
@@ -42,7 +42,7 @@
 			<u-input type="textarea" height="70rpx" auto-height v-model="complainValue" />
 		  </view>
 		</view>
-		<view class="submit-btn" @click="handleSubmit">回复</view>
+		<view class="submit-btn" @click="handleSubmit">回复</view>
 	</div>
     <view class="tips">平台仲裁</view>
     <u-cell-group>
@@ -51,99 +51,91 @@
   </view>
 </template>
 
-<script>
-import { getComplainDetail, communication } from "@/api/after-sale";
-export default {
-  data() {
-    return {
-      complainId: "",
-      complainValue: "", //回复内容
-      complainDetail: "", //投诉详情
-      statusData: {
-        NEW: "新投诉",
-        NO_APPLY: "未申请",
-        APPLYING: "申请中",
-        COMPLETE: "已完成",
-        EXPIRED: "已失效",
-        CANCEL: "已取消",
-        WAIT_ARBITRATION:"等待仲裁"
-      },
-    };
-  },
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import { getComplainDetail, communication } from '@/api/after-sale'
 
-  onLoad(option) {
-    this.complainId = option.id;
-    this.init(option.id);
-  },
-  methods: {
-    /**
-     * 点击图片放大或保存
-     */
-    preview(urls, index) {
-      uni.previewImage({
-        current: index,
-        urls: urls,
-        longPressActions: {
-          itemList: ["保存图片"],
-          success: function (data) {},
-          fail: function (err) {},
-        },
-      });
-    },
-    handleSubmit() {
-      if (!this.complainValue) {
-        uni.showToast({
-          title: "请输入回复内容",
-          duration: 2000,
-          icon: "none",
-        });
-        return;
-      }
-      let params = {
-        content: this.complainValue,
-        complainId: this.complainId,
-      };
-      communication(params).then((res) => {
-        if (res.data.success) {
-          uni.showToast({
-            title: "回复成功",
-            duration: 2000,
-            icon: "none",
-          });
-          this.complainValue = '';
-          this.init(this.complainId);
-        } else {
-          uni.showToast({
-            title: res.data.message,
-            duration: 2000,
-            icon: "none",
-          });
-        }
-      });
+const store = useStore()
 
+const complainId = ref('')
+const complainValue = ref('')
+const complainDetail = ref<Record<string, any>>({})
+const statusData: Record<string, string> = {
+  NEW: '新投诉',
+  NO_APPLY: '未申请',
+  APPLYING: '申请中',
+  COMPLETE: '已完成',
+  EXPIRED: '已失效',
+  CANCEL: '已取消',
+  WAIT_ARBITRATION: '等待仲裁',
+}
+
+onLoad((option) => {
+  complainId.value = option.id
+  init(option.id)
+})
+
+function preview(urls: string[], index: number) {
+  uni.previewImage({
+    current: index,
+    urls,
+    longPressActions: {
+      itemList: ['保存图片'],
+      success: () => {},
+      fail: () => {},
     },
-    /**
-     * 初始化投诉详情
-     */
-    init(id) {
-      uni.showLoading({
-        title: "加载中",
-      });
-      getComplainDetail(id).then((res) => {
-        if (res.data.success) {
-          this.complainDetail = res.data.result;
-        } else {
-          uni.showToast({
-            title: res.data.message,
-            duration: 2000,
-            icon: "none",
-          });
-        }
-         if (this.$store.state.isShowToast){ uni.hideLoading() };
-      });
-    },
-  },
-};
+  })
+}
+
+function handleSubmit() {
+  if (!complainValue.value) {
+    uni.showToast({
+      title: '请输入回复内容',
+      duration: 2000,
+      icon: 'none',
+    })
+    return
+  }
+  const params = {
+    content: complainValue.value,
+    complainId: complainId.value,
+  }
+  communication(params).then((res) => {
+    if (res.data.success) {
+      uni.showToast({
+        title: '回复成功',
+        duration: 2000,
+        icon: 'none',
+      })
+      complainValue.value = ''
+      init(complainId.value)
+    } else {
+      uni.showToast({
+        title: res.data.message,
+        duration: 2000,
+        icon: 'none',
+      })
+    }
+  })
+}
+
+function init(id: string) {
+  uni.showLoading({ title: '加载中' })
+  getComplainDetail(id).then((res) => {
+    if (res.data.success) {
+      complainDetail.value = res.data.result
+    } else {
+      uni.showToast({
+        title: res.data.message,
+        duration: 2000,
+        icon: 'none',
+      })
+    }
+    if (store.state.isShowToast) uni.hideLoading()
+  })
+}
 </script>
 <style lang="scss" scoped>
 .row {
diff --git a/pages/order/complain/complainList.vue b/pages/order/complain/complainList.vue
index c5b89a7..35aeeb9 100644
--- a/pages/order/complain/complainList.vue
+++ b/pages/order/complain/complainList.vue
@@ -1,181 +1,239 @@
-<template>
-  <view>
-    <view class="seller-view" v-for="(item, index) in complaionData" :key="index">
-      <view class="seller-info u-flex u-row-between">
-        <view class="seller-name">
-          <view class="name">{{ item.storeName }}</view>
-        </view>
-        <view class="order-sn">{{ statusData[item.complainStatus] }}</view>
-      </view>
-      <u-line color="#DCDFE6"></u-line>
-      <view class="goods-item-view">
-        <view class="goods-img" @click="handleToGoods(item)">
-          <u-image border-radius="6" width="131rpx" height="131rpx" :src="item.goodsImage"></u-image>
-        </view>
-        <view class="goods-info" @click="handleToGoods(item)">
-          <view class="goods-title u-line-2">{{ item.goodsName }}</view>
-          <view class="goods-price">
-            ￥{{unitPrice(item.goodsPrice) }}
-            <!-- <span>+{{ '1' }}积分</span> -->
-          </view>
-        </view>
-        <view class="goods-num">
-          <view>x{{ item.num }}</view>
-        </view>
-      </view>
-      <view class="complain-item-view">
-        <view class="complain-time"> {{ item.createTime }} </view>
-        <view class="complain-speak"> {{ item.complainTopic }} </view>
-      </view>
-      <view class="complain-btn">
-        <u-tag mode="plain" @click="handleClear(item)" class="complain-tag" text="撤销投诉" type="info"
-		 v-if="item.complainStatus === 'APPLYING' || item.complainStatus === 'NEW'" />
-        <u-tag mode="plain" @click="handleInfo(item)" class="complain-tag" text="投诉详情" type="info" />
-      </view>
-    </view>
-
-    <u-empty v-if="empty" :style="{'marginTop':complaionDetail.total == 0 ? '200rpx':'0rpx'}" class="empty" style="" text="暂无投诉列表" mode="list"></u-empty>
-
-    <u-modal show-cancel-button @confirm="handleClearConfirm" v-model:show="show" :content="content"></u-modal>
-  </view>
-</template>
-
-<script>
-import { getComplain, clearComplain } from "@/api/after-sale";
-
-export default {
-  data() {
-    return {
-      statusData: {
-        NEW: "新投诉",
-        NO_APPLY: "未申请",
-        APPLYING: "申请中",
-        COMPLETE: "已完成",
-        EXPIRED: "已失效",
-        CANCEL: "已取消",
-        WAIT_ARBITRATION:"等待仲裁"
-      },
-      show: false,
-      content: "是否撤销投诉？",
-      params: {
-        pageNumber: 1,
-        pageSize: 20,
-      },
-      complaionDetail: "", //返回的整个response
-      complaionData: [], //投诉列表
-      empty: false,
-      checkComplainData: "", //存储投诉信息
-    };
-  },
-  mounted() {
-    this.init();
-  },
-  /**
-   * 触底加载
-   */
-  onReachBottom() {
-    if (
-      this.complaionDetail &&
-      this.complaionDetail.total < this.params.pageNumber * this.params.pageSize
-    ) {
-      this.params.pageNumber++;
-      this.init();
-    }
-  },
-
-  methods: {
-    // 点击跳转到商品
-    handleToGoods(val) {
-      uni.navigateTo({
-        url: "/pages/product/goods?id=" + val.skuId + "&goodsId=" + val.goodsId,
-      });
-    },
-
-    /**
-     * 点击撤销投诉
-     */
-    handleClear(val) {
-      this.show = true;
-      this.checkComplainData = val;
-    },
-    /**
-     * 执行撤销
-     */
-    handleClearConfirm() {
-      clearComplain(this.checkComplainData.id).then((res) => {
-        if (res.data.success) {
-          uni.showToast({
-            title: "撤销成功",
-            duration: 2000,
-            icon: "none",
-          });
-          this.complaionData = [];
-          this.params.pageNumber = 1;
-          this.init();
-        }
-      });
-    },
-
-    /**
-     * 查看详情
-     */
-    handleInfo(val) {
-      uni.navigateTo({
-        url: "./complainInfo?id=" + val.id,
-      });
-    },
-
-    /**
-     * 初始化投诉列表
-     */
-    init() {
-      uni.showLoading({
-        title: "加载中",
-      });
-      getComplain(this.params).then((res) => {
-        this.complaionDetail = res.data.result;
-        if (res.data.result.records.length >= 1) {
-          this.complaionData.push(...res.data.result.records);
-        } else {
-          this.empty = true;
-        }
-         if (this.$store.state.isShowToast){ uni.hideLoading() };
-      });
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import "../goods.scss";
-
-.complain-item-view {
-  border-bottom: 2rpx solid #f5f7fa;
-  border-top: 2rpx solid #f5f7fa;
-  padding: 20rpx 30rpx;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.complain-time {
-  font-size: 24rpx;
-  color: #999;
-}
-::v-deep .seller-name {
-  width: auto !important;
-}
-.complain-btn {
-  padding: 20rpx 0;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  margin-right: 30rpx;
-}
-.complain-tag {
-  margin-left: 10rpx;
-}
-.empty {
-  margin-top: 40rpx;
-}
-</style>
+<template>
+  <view>
+    <view class="seller-view" v-for="(item, index) in complaionData" :key="index">
+      <view class="seller-info u-flex u-row-between">
+        <view class="seller-name">
+          <view class="name">{{ item.storeName }}</view>
+        </view>
+        <view class="order-sn">{{ statusData[item.complainStatus] }}</view>
+      </view>
+      <u-line color="#DCDFE6"></u-line>
+      <view class="goods-item-view">
+        <view class="goods-img" @click="handleToGoods(item)">
+          <u-image radius="6rpx" width="131rpx" height="131rpx" :src="item.goodsImage"></u-image>
+        </view>
+        <view class="goods-info" @click="handleToGoods(item)">
+          <view class="goods-title u-line-2">{{ item.goodsName }}</view>
+          <view class="goods-price">
+            ￥{{unitPrice(item.goodsPrice) }}
+            <!-- <span>+{{ '1' }}积分</span> -->
+          </view>
+        </view>
+        <view class="goods-num">
+          <view>x{{ item.num }}</view>
+        </view>
+      </view>
+      <view class="complain-item-view">
+        <view class="complain-time"> {{ item.createTime }} </view>
+        <view class="complain-speak"> {{ item.complainTopic }} </view>
+      </view>
+      <view class="complain-btn">
+        <u-tag plain @click="handleClear(item)" class="complain-tag" text="撤销投诉" type="info"
+		 v-if="item.complainStatus === 'APPLYING' || item.complainStatus === 'NEW'" />
+        <u-tag plain @click="handleInfo(item)" class="complain-tag" text="投诉详情" type="info" />
+      </view>
+    </view>
+
+    <u-empty v-if="empty" :style="{'marginTop':complaionDetail.total == 0 ? '200rpx':'0rpx'}" class="empty" style="" text="暂无投诉列表" mode="list"></u-empty>
+
+    <u-modal show-cancel-button @confirm="handleClearConfirm" v-model:show="show" :content="content"></u-modal>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onLoad, onReachBottom } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import { unitPrice } from '@/utils/filters.js'
+import { getComplain, clearComplain } from '@/api/after-sale'
+
+const store = useStore()
+
+const statusData: Record<string, string> = {
+  NEW: '新投诉',
+  NO_APPLY: '未申请',
+  APPLYING: '申请中',
+  COMPLETE: '已完成',
+  EXPIRED: '已失效',
+  CANCEL: '已取消',
+  WAIT_ARBITRATION: '等待仲裁',
+}
+
+const show = ref(false)
+const content = ref('是否撤销投诉？')
+const params = ref({ pageNumber: 1, pageSize: 20 })
+const complaionDetail = ref<any>(null)
+const complaionData = ref<any[]>([])
+const empty = ref(false)
+const checkComplainData = ref<any>(null)
+
+onLoad(() => {
+  init()
+})
+
+onReachBottom(() => {
+  if (
+    complaionDetail.value &&
+    complaionDetail.value.total > params.value.pageNumber * params.value.pageSize
+  ) {
+    params.value.pageNumber++
+    init()
+  }
+})
+
+function handleToGoods(val: any) {
+  uni.navigateTo({
+    url: '/pages/product/goods?id=' + val.skuId + '&goodsId=' + val.goodsId,
+  })
+}
+
+function handleClear(val: any) {
+  show.value = true
+  checkComplainData.value = val
+}
+
+function handleClearConfirm() {
+  clearComplain(checkComplainData.value.id).then((res) => {
+    if (res.data.success) {
+      uni.showToast({
+        title: '撤销成功',
+        duration: 2000,
+        icon: 'none',
+      })
+      complaionData.value = []
+      params.value.pageNumber = 1
+      init()
+    }
+  })
+}
+
+function handleInfo(val: any) {
+  uni.navigateTo({
+    url: './complainInfo?id=' + val.id,
+  })
+}
+
+function hideLoadingIfNeeded() {
+  if (store.state.isShowToast) uni.hideLoading()
+}
+
+function init() {
+  uni.showLoading({
+    title: '加载中',
+  })
+  getComplain(params.value).then((res) => {
+    complaionDetail.value = res.data.result
+    if (res.data.result.records.length >= 1) {
+      complaionData.value.push(...res.data.result.records)
+    } else {
+      empty.value = true
+    }
+    hideLoadingIfNeeded()
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.seller-view {
+  background-color: #fff;
+  margin: 20rpx 0;
+}
+
+.seller-info {
+  height: 70rpx;
+  padding: 0 20rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.seller-name {
+  width: auto;
+  min-width: 0;
+  font-size: 33rpx;
+  font-weight: 600;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 90rpx;
+}
+
+.name {
+  margin-left: 15rpx;
+  margin-top: -2rpx;
+  font-size: 28rpx;
+  flex: 1;
+}
+
+.order-sn {
+  color: #ff0000;
+  font-size: 26rpx;
+  flex-shrink: 0;
+  margin-left: 20rpx;
+}
+
+.goods-item-view {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10rpx 30rpx;
+}
+
+.goods-img {
+  width: 131rpx;
+  height: 131rpx;
+  flex: 0 0 131rpx;
+}
+
+.goods-info {
+  padding-left: 30rpx;
+  min-width: 0;
+  flex: 1;
+}
+
+.goods-title {
+  margin-bottom: 10rpx;
+  color: $font-color-dark;
+}
+
+.goods-price {
+  font-size: 28rpx;
+  margin-bottom: 10rpx;
+  color: #ff5a10;
+}
+
+.goods-num {
+  text-align: center;
+  flex: 0 0 60rpx;
+  width: 60rpx;
+  color: $main-color;
+}
+
+.complain-item-view {
+  border-bottom: 2rpx solid #f5f7fa;
+  border-top: 2rpx solid #f5f7fa;
+  padding: 20rpx 30rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.complain-time {
+  font-size: 24rpx;
+  color: #999;
+}
+.complain-btn {
+  padding: 20rpx 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-right: 30rpx;
+}
+.complain-tag {
+  margin-left: 10rpx;
+}
+.empty {
+  margin-top: 40rpx;
+}
+</style>
diff --git a/pages/order/deliverDetail.vue b/pages/order/deliverDetail.vue
index a5774f0..e4d61f2 100644
--- a/pages/order/deliverDetail.vue
+++ b/pages/order/deliverDetail.vue
@@ -45,34 +45,24 @@
 	</div>
 </template>
 
-<script>
-import { getPackage } from "@/api/trade.js";
-export default {
-    data() {
-        return {
-            order: {},
-            logisticsList: [],
-        }
-    },
-    components: {
-    },
-    computed: {
-    },
-	onLoad(option) {
-	  let sn = option.order_sn;
-	  this.tracesList(sn);
-	},
-    mounted() {
-    },
-    methods: {
-        tracesList(sn) {
-            getPackage(sn).then((res) => {
-                if(res.data.success){
-                    this.logisticsList = res.data.result;
-                }
-            });
-        },
-    },
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { getPackage } from '@/api/trade.js'
+
+const logisticsList = ref<any[]>([])
+
+onLoad((option) => {
+  const sn = option.order_sn
+  if (sn) fetchLogistics(sn)
+})
+
+function fetchLogistics(sn: string) {
+  getPackage(sn).then((res) => {
+    if (res.data.success) {
+      logisticsList.value = res.data.result
+    }
+  })
 }
 </script>
 <style >
diff --git a/pages/order/evaluate/evaluateDetail.vue b/pages/order/evaluate/evaluateDetail.vue
index 2bc673f..c4b160f 100644
--- a/pages/order/evaluate/evaluateDetail.vue
+++ b/pages/order/evaluate/evaluateDetail.vue
@@ -31,7 +31,7 @@
           <view class="img">
             <!-- 循环出商家回复评价的图片 -->
             <u-image width="140rpx" height="140rpx" v-if="comment.replyImage" v-for="(replyImg, replyIndex) in splitImg(comment.replyImage)" :src="replyImg" :key="replyIndex"
-              @click="preview(splitImg( comment.replyImage), index)">
+              @click="preview(splitImg(comment.replyImage), replyIndex)">
             </u-image>
           </view>
         </view>
@@ -40,56 +40,46 @@
   </view>
 </template>
 
-<script>
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
 import configs from '@/config/config'
-export default {
-  data() {
-    return {
-      configs,
-      userImage:configs.defaultUserPhoto,
 
-      comment: {}, //评论信息
-      gradeList: {
-        //评价grade
-        GOOD: "好评",
-        MODERATE: "中评",
-        WORSE: "差评",
-        haveImage: "有图",
-      },
-    };
-  },
-  onLoad(options) {
-    this.comment = JSON.parse(decodeURIComponent(options.comment));
-  },
-  methods: {
-    /**
-     * 切割图像
-     */
-    splitImg(val) {
-      if (val && val.split(",")) {
-        return val.split(",");
-      } else if (val) {
-        return val;
-      } else {
-        return false;
-      }
+const userImage = configs.defaultUserPhoto
+
+const comment = ref<Record<string, any>>({})
+const gradeList: Record<string, string> = {
+  GOOD: '好评',
+  MODERATE: '中评',
+  WORSE: '差评',
+  haveImage: '有图',
+}
+
+onLoad((options) => {
+  comment.value = JSON.parse(decodeURIComponent(options.comment))
+})
+
+function splitImg(val: string) {
+  if (val && val.split(',')) {
+    return val.split(',')
+  } else if (val) {
+    return val
+  }
+  return false
+}
+
+function preview(urls: string[] | false, index: number) {
+  if (!urls) return
+  uni.previewImage({
+    current: index,
+    urls: Array.isArray(urls) ? urls : [urls],
+    longPressActions: {
+      itemList: ['保存图片'],
+      success: () => {},
+      fail: () => {},
     },
-    /**
-     * 点击图片放大或保存
-     */
-    preview(urls, index) {
-      uni.previewImage({
-        current: index,
-        urls: urls,
-        longPressActions: {
-          itemList: ["保存图片"],
-          success: function (data) {},
-          fail: function (err) {},
-        },
-      });
-    },
-  },
-};
+  })
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/order/evaluate/myEvaluate.vue b/pages/order/evaluate/myEvaluate.vue
index 909d775..5df582d 100644
--- a/pages/order/evaluate/myEvaluate.vue
+++ b/pages/order/evaluate/myEvaluate.vue
@@ -8,8 +8,9 @@
           :inactiveStyle="{ color: '#333' }"
           v-model:current="current"
           class="utabs"
-          :lineColor="$lightColor"
-          :activeStyle="{ color: $lightColor }"
+          :lineColor="lightColor"
+          :activeStyle="{ color: lightColor }"
+          :bg-color="'#ffffff'"
         ></u-tabs>
       </view>
       <swiper class="swiper-box" :current="current" @change="changeSwiper" duration="500">
@@ -38,7 +39,7 @@
                 <view class="btn-view u-row-between" v-if="current == 2">
                   <view class="description">
                     <view class="text title">
-                      <u-read-more ref="uReadMore" :color="$lightColor" text-indent="0">
+                      <u-read-more ref="uReadMore" :color="lightColor" text-indent="0">
                         <rich-text :nodes="'评论内容：' + order.content || ''"></rich-text>
                       </u-read-more>
                     </view>
@@ -78,209 +79,144 @@
   </view>
 </template>
 
-<script>
-import { getOrderList } from "@/api/order.js";
-import { getComments } from "@/api/members.js";
+<script setup lang="ts">
+import { ref, reactive, computed, watch } from 'vue'
+import { onShow } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import { getOrderList } from '@/api/order.js'
+import { getComments } from '@/api/members.js'
 
-export default {
-  data() {
-    return {
-      list: [
-        //顶部tab
+const store = useStore()
+const lightColor = computed(() => store.getters.lightColor)
 
+const list = [
+  { name: '全部订单' },
+  { name: '待评价' },
+  { name: '已评价' },
+]
+
+const gradeList: Record<string, string> = {
+  GOOD: '好评',
+  MODERATE: '中评',
+  WORSE: '差评',
+  haveImage: '有图',
+}
+
+const groupCommentStatusWay: Record<string, string> = {
+  NEW: '新订单，不能进行评论',
+  UNFINISHED: '未完成评论',
+  WAIT_CHASE: '待追评的评论信息',
+  FINISHED: '已经完成评论',
+}
+
+const current = ref(0)
+const orderList = ref<any[]>([])
+const params = reactive<Record<string, any>>({
+  pageNumber: 1,
+  pageSize: 10,
+  loadStatus: 'more',
+})
+
+onShow(() => {
+  orderList.value = []
+  params.pageNumber = 1
+  current.value = 0
+  loadData()
+})
+
+watch(current, (val) => {
+  params.pageNumber = 1
+  params.loadStatus = 'more'
+  orderList.value = []
+
+  if (val == 0) {
+    delete params.commentStatus
+    loadData()
+  } else if (val == 1) {
+    params.commentStatus = 'UNFINISHED'
+    orderList.value = []
+    loadData()
+  } else {
+    params.commentStatus = 'FINISHED'
+    orderList.value = []
+    loadComments()
+  }
+})
+
+function preview(urls: string[], index: number) {
+  uni.previewImage({
+    current: index,
+    urls,
+    longPressActions: {
+      itemList: ['保存图片'],
+      success: () => {},
+      fail: () => {},
+    },
+  })
+}
+
+function changeSwiper(e: any) {
+  current.value = e.target.current
+}
+
+function loadData() {
+  uni.showLoading({ title: '加载中' })
+  getOrderList(params).then((res) => {
+    if (store.state.isShowToast) uni.hideLoading()
+    const records = res.data.result.records
+    if (records.length < 10) {
+      params.loadStatus = 'noMore'
+    }
+    if (records.length > 0) {
+      orderList.value = orderList.value.concat(records)
+      params.pageNumber += 1
+    }
+  })
+}
+
+function talkCommont(sku: any) {
+  uni.navigateTo({
+    url: `./releaseEvaluate?sn=${sku.sn}&sku=${encodeURIComponent(JSON.stringify(sku))}`,
+  })
+}
+
+function loadComments() {
+  uni.showLoading({ title: '加载中' })
+  getComments(params).then((res) => {
+    if (store.state.isShowToast) uni.hideLoading()
+    const records = res.data.result.records
+    if (records.length < 10) {
+      params.loadStatus = 'noMore'
+    }
+    records.forEach((item: any) => {
+      item.orderItems = [
         {
-          name: "全部订单",
+          image: item.goodsImage,
+          name: item.goodsName,
+          goodsId: item.goodsId,
+          skuId: item.skuId,
         },
-        {
-          name: "待评价",
-        },
-        {
-          name: "已评价",
-        },
-      ],
-      gradeList: {
-        //评论表
-        GOOD: "好评",
-        MODERATE: "中评",
-        WORSE: "差评",
-        haveImage: "有图",
-      },
-      groupCommentStatusWay: {
-        NEW: "新订单，不能进行评论",
-        UNFINISHED: "未完成评论",
-        WAIT_CHASE: "待追评的评论信息",
-        FINISHED: "已经完成评论",
-      },
-      current: 0, //当前tabIndex
-      orderList: [], //商品集合
-      params: {
-        pageNumber: 1,
-        pageSize: 10,
-        loadStatus: "more",
-      },
-    };
-  },
+      ]
+    })
+    orderList.value = orderList.value.concat(records)
+    params.pageNumber += 1
+  })
+}
 
-  onShow() {
-    this.orderList = [];
-    this.params.pageNumber = 1;
-    this.current = 0
-    this.loadData()
-  },
-  watch: {
-    /**
-     * 切换current
-     * 更改页面并重新加载数据
-     */
-    current(val) {
-      this.params.pageNumber = 1;
-      this.params.loadStatus = "more";
-      this.orderList = [];
-      //重新读取数据
+function renderData(index: number) {
+  if (params.loadStatus == 'noMore') return
+  if (index == 0) {
+    loadData()
+  } else {
+    loadComments()
+  }
+}
 
-      if (val == 0) {
-        delete  this.params.commentStatus 
-        this.loadData();
-      } else if (val == 1) {
-        this.params.commentStatus = "UNFINISHED";
-        this.orderList = [];
-        this.loadData();
-      } else {
-        this.params.commentStatus = "FINISHED";
-        this.orderList = [];
-        return this.loadComments();
-      }
-    },
-  },
-
-  methods: {
-    /**
-     * 判断当前店铺是否有可评价的商品
-     */
-    commentStatus(val) {
-      if (this.current == 2) {
-        return true;
-      } else {
-        let show;
-        val.orderItems &&
-          val.orderItems.forEach((item) => {
-            if (item.commentStatus == "UNFINISHED") {
-              show = true;
-            } else {
-              show = false;
-            }
-          });
-
-        return show;
-      }
-    },
-
-    /**
-     * 点击图片放大或保存
-     */
-    preview(urls, index) {
-      uni.previewImage({
-        current: index,
-        urls: urls,
-        longPressActions: {
-          itemList: ["保存图片"],
-          success: function (data) {},
-          fail: function (err) {},
-        },
-      });
-    },
-
-    /**
-     * 点击swiper
-     */
-    changeSwiper(e) {
-      this.current = e.target.current;
-    },
-
-    /**
-     * 获取订单数据
-     */
-    loadData() {
-      uni.showLoading({
-        title: "加载中",
-      });
-      getOrderList(this.params).then((res) => {
-         if (this.$store.state.isShowToast){ uni.hideLoading() };
-        const orderList = res.data.result.records;
-        if (orderList.length < 10) {
-          this.params.loadStatus = "noMore";
-        }
-        if (orderList.length > 0) {
-          this.orderList = this.orderList.concat(orderList);
-          this.params.pageNumber += 1;
-        }
-      });
-    },
-
-    /**
-     * 发表评价
-     */
-    talkCommont(sku) {
-      console.log(sku);
-      uni.navigateTo({
-        url: `./releaseEvaluate?sn=${sku.sn}&sku=${encodeURIComponent(
-          JSON.stringify(sku)
-        )}`,
-      });
-    },
-
-    /**
-     * 加载已评价数据
-     */
-    loadComments() {
-      uni.showLoading({
-        title: "加载中",
-      });
-      getComments(this.params).then((res) => {
-         if (this.$store.state.isShowToast){ uni.hideLoading() };
-        let orderList = res.data.result.records;
-        if (orderList.length < 10) {
-          this.params.loadStatus = "noMore";
-        }
-        orderList.forEach((item) => {
-          item.orderItems = [
-            {
-              image: item.goodsImage,
-              name: item.goodsName,
-              goodsId: item.goodsId,
-              skuId: item.skuId,
-            },
-          ];
-        });
-        this.orderList = this.orderList.concat(orderList);
-        this.params.pageNumber += 1;
-      });
-    },
-
-    /**
-     * 滑到底部加载数据
-     */
-    renderData(index) {
-      if (this.params.loadStatus == "noMore") return;
-      if (index == 0) {
-        this.loadData();
-      } else {
-        this.loadComments();
-      }
-    },
-
-    /**
-     * 评价详情
-     */
-    onDetail(comment) {
-      uni.navigateTo({
-        url:
-          "./evaluateDetail?comment=" +
-          encodeURIComponent(JSON.stringify(comment)),
-      });
-    },
-  },
-};
+function onDetail(comment: any) {
+  uni.navigateTo({
+    url: './evaluateDetail?comment=' + encodeURIComponent(JSON.stringify(comment)),
+  })
+}
 </script>
 <style lang="scss" scoped>
 page {
@@ -310,6 +246,7 @@ page {
 .u-tabs-box {
   position: relative;
   z-index: 10;
+  background: #ffffff;
 }
 .box-content {
   margin: 20rpx 0;
diff --git a/pages/order/evaluate/releaseEvaluate.vue b/pages/order/evaluate/releaseEvaluate.vue
index 4e01e33..63e4e02 100644
--- a/pages/order/evaluate/releaseEvaluate.vue
+++ b/pages/order/evaluate/releaseEvaluate.vue
@@ -86,80 +86,69 @@
   </view>
 </template>
 
-<script>
-import storage from "@/utils/storage.js";
-import { commentsMemberOrder } from "@/api/members.js";
-import { handleUploadAfterRead } from "@/utils/uploadHelper.js";
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import { commentsMemberOrder } from '@/api/members.js'
+import { handleUploadAfterRead } from '@/utils/uploadHelper.js'
 
-export default {
-  data() {
-    return {
-      storage,
-      type: "textarea", //输入框状态为 textarea
-      border: false, //没有border
-      maxlength: 500, //评价最大字数为500字
-      placeholder:
-        "宝贝满足您的期待吗？说说它的优点和美中不足的地方吧。您的评价会帮助更多的人",
-      sku: {}, //订单信息
-      form: {
-        content: "", //评价详情
-        goodsId: "", //商品id
-        grade: "GOOD", //默认为好评
-        orderItemSn: "", //商品的sn
-        skuId: "", //商品skuId
-        descriptionScore: 5, //默认描述得分为5分
-        serviceScore: 5, //默认服务得分为5分
-        deliveryScore: 5, //默认物流得分为5分
-      },
-      uploadFileList: [],
-    };
-  },
-  onLoad(options) {
-    // 获取上一级传过来的数据进行解析
-    this.form.orderItemSn = options.sn;
-    this.sku = JSON.parse(decodeURIComponent(options.sku));
-    this.form.goodsId = this.sku.goodsId;
-    this.form.skuId = this.sku.skuId;
-  },
-  methods: {
-    /**
-     * 点击评价
-     */
-    onGrade(grade) {
-      this.form.grade = grade;
-    },
+const store = useStore()
 
-    /**
-     * 提交评价
-     */
-    onSubmit() {
-      uni.showLoading({
-        title: "加载中",
-      });
-      commentsMemberOrder(this.form).then((res) => {
-         if (this.$store.state.isShowToast){ uni.hideLoading() };
-        if (res.data.success) {
-          uni.showToast({
-            title: "发布评价成功",
-            duration: 2000,
-            icon: "none",
-            success: () => {
-              setTimeout(() => {
-                uni.navigateBack();
-              }, 500);
-            },
-          });
-        }
-      });
-    },
+const type = 'textarea'
+const border = false
+const maxlength = 500
+const placeholder =
+  '宝贝满足您的期待吗？说说它的优点和美中不足的地方吧。您的评价会帮助更多的人'
 
-    onUploadAfterRead(event) {
-      handleUploadAfterRead(event, this.uploadFileList, (urls) => {
-        this.form.images = urls;
-      });
-    },
-  },
-};
+const sku = ref<Record<string, any>>({})
+const form = reactive<Record<string, any>>({
+  content: '',
+  goodsId: '',
+  grade: 'GOOD',
+  orderItemSn: '',
+  skuId: '',
+  descriptionScore: 5,
+  serviceScore: 5,
+  deliveryScore: 5,
+})
+const uploadFileList = ref<any[]>([])
+
+onLoad((options) => {
+  form.orderItemSn = options.sn
+  sku.value = JSON.parse(decodeURIComponent(options.sku))
+  form.goodsId = sku.value.goodsId
+  form.skuId = sku.value.skuId
+})
+
+function onGrade(grade: string) {
+  form.grade = grade
+}
+
+function onSubmit() {
+  uni.showLoading({ title: '加载中' })
+  commentsMemberOrder(form).then((res) => {
+    if (store.state.isShowToast) uni.hideLoading()
+    if (res.data.success) {
+      uni.showToast({
+        title: '发布评价成功',
+        duration: 2000,
+        icon: 'none',
+        success: () => {
+          setTimeout(() => {
+            uni.navigateBack()
+          }, 500)
+        },
+      })
+    }
+  })
+}
+
+function onUploadAfterRead(event: any) {
+  handleUploadAfterRead(event, uploadFileList.value, (urls) => {
+    form.images = urls
+  })
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/order/fillorder.vue b/pages/order/fillorder.vue
index 5257ebd..20fff28 100644
--- a/pages/order/fillorder.vue
+++ b/pages/order/fillorder.vue
@@ -384,471 +384,426 @@
     </div>
   </div>
 </template>
-<script>
-import * as API_Address from "@/api/address";
-import * as API_Order from "@/api/order";
-import * as API_Trade from "@/api/trade";
-import configs from "@/config/config";
-import LiLiWXPay from "@/js_sdk/lili-pay/wx-pay.js";
-import invoices from "@/pages/order/invoice/setInvoice";
-import { mapState } from "vuex";
-export default {
-  onLoad: function (val) {
-    this.routerVal = val;
-  },
-  components: {
-    invoices,
-  },
+<script setup lang="ts">
+import { ref, computed, watch, getCurrentInstance } from 'vue'
+import { onLoad, onShow, onBackPress } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import * as API_Address from '@/api/address'
+import * as API_Order from '@/api/order'
+import * as API_Trade from '@/api/trade'
+import configs from '@/config/config'
+import LiLiWXPay from '@/js_sdk/lili-pay/wx-pay.js'
+import invoices from '@/pages/order/invoice/setInvoice'
+import {
+  unitPrice,
+  goodsFormatPrice,
+  secrecyMobile,
+  isLogin,
+} from '@/utils/filters.js'
 
-  data() {
-    return {
-      configs,
-      userImage: configs.defaultUserPhoto,
-      invoiceFlag: false, //开票开关
-      shippingText: "LOGISTICS",
-      shippingFlag: false,
-      shippingMethod: [],
-      shippingWay: [
-        {
-          value: "LOGISTICS",
-          label: "物流",
-        },
-        {
-          value: "SELF_PICK_UP",
-          label: "自提",
-        },
-      ],
-      isAssemble: false, //是否拼团
-      // 判断是否填写过备注
-      remarkFlag: false,
-      selectAddressId: "",
-      routerVal: "",
-      params: {},
-      // 优惠劵
-      couponList: "",
-      // 已选地址
-      address: "",
-      shopAddress: "",
-      // 发票信息
-      receiptList: "",
-      // 店铺信息
-      orderMessage: "",
-      data: "",
-      // 存储备注
-      remarkVal: [],
-      remarkVal1: "",
-      detail: "", //返回的所有数据
-      endWay: "", //最后一个参团人
-      masterWay: "", //团长信息
-      pintuanFlage: true, //是开团还是拼团
-      notSupportFreight: [], //不支持运费
-      notSupportFreightNoticeText: "",
-      storeAddress: "",
+const store = useStore()
+const { proxy } = getCurrentInstance()!
+const lightColor = computed(() => store.getters.lightColor)
+const mainColor = computed(() => store.getters.mainColor)
+const aiderLightColor = computed(() => store.getters.aiderLightColor)
+const remark = computed(() => store.state.remark)
 
-      originOrderData:"", // 原始订单数据
-    };
+interface ShippingOption {
+  value: string
+  label: string
+}
+
+const shippingWay: ShippingOption[] = [
+  { value: 'LOGISTICS', label: '物流' },
+  { value: 'SELF_PICK_UP', label: '自提' },
+]
+
+const userImage = configs.defaultUserPhoto
+const invoiceFlag = ref(false)
+const shippingText = ref('LOGISTICS')
+const shippingFlag = ref(false)
+const shippingMethod = ref<ShippingOption[]>([])
+const isAssemble = ref(false)
+const remarkFlag = ref(false)
+const selectAddressId = ref('')
+const routerVal = ref<Record<string, any>>({})
+const params = ref<Record<string, any>>({})
+const couponList = ref('')
+const address = ref<any>('')
+const shopAddress = ref('')
+const receiptList = ref<any>('')
+const orderMessage = ref<any>('')
+const data = ref('')
+const remarkVal = ref<any[]>([])
+const remarkVal1 = ref('')
+const detail = ref('')
+const endWay = ref<any>('')
+const masterWay = ref<any>('')
+const pintuanFlage = ref(true)
+const notSupportFreight = ref<any[]>([])
+const notSupportFreightNoticeText = ref('')
+const storeAddress = ref<any>('')
+const originOrderData = ref<any>('')
+
+watch(
+  remarkVal,
+  (val) => {
+    store.commit('setRemark', val)
   },
-  watch: {
-    // 监听备注 并在 vuex 中存储
-    remarkVal: {
-      handler(val) {
-        this.$store.commit("setRemark", val);
-      },
-      immediate: true,
-      deep: true,
-    },
-  },
-  computed: {
-    ...mapState(["remark"]),
-  },
-  /**
-   * 监听返回
-   */
-  onBackPress(e) {
-    if (e.from == "backbutton") {
-      const curRoute = getCurrentPages().slice(-1)[0]?.options || {};
-      if (curRoute.addId) {
-        uni.reLaunch({
-          url: "/pages/tabbar/cart/cartList",
-        });
-      } else if (this.routerVal?.way === "CART") {
-        uni.switchTab({
-          url: "/pages/tabbar/cart/cartList",
-        });
-      } else {
-        uni.navigateBack();
-      }
-      return true;
+  { immediate: true, deep: true }
+)
+
+onLoad((val) => {
+  routerVal.value = val || {}
+})
+
+onBackPress((e) => {
+  if (e.from == 'backbutton') {
+    const curRoute = getCurrentPages().slice(-1)[0]?.options || {}
+    if (curRoute.addId) {
+      uni.reLaunch({
+        url: '/pages/tabbar/cart/cartList',
+      })
+    } else if (routerVal.value?.way === 'CART') {
+      uni.switchTab({
+        url: '/pages/tabbar/cart/cartList',
+      })
+    } else {
+      uni.navigateBack()
     }
-  },
+    return true
+  }
+  return false
+})
 
-  async onShow() {
-    // 判断是否存在写过备注信息的商品
-    if (this.remark && this.remark.length > 0) {
-      this.remarkFlag = true;
+onShow(async () => {
+  if (remark.value && remark.value.length > 0) {
+    remarkFlag.value = true
+  }
+  uni.showLoading({
+    mask: true,
+  })
+  try {
+    await getOrderList()
+    await getDistribution()
+    if (routerVal.value.way == 'PINTUAN') {
+      isAssemble.value = true
+      routerVal.value.parentOrder = JSON.parse(
+        decodeURIComponent(routerVal.value.parentOrder)
+      )
+      pintuanWay()
     }
-    uni.showLoading({
-      mask: true,
-    });
-    try {
-      await this.getOrderList();
-      await this.getDistribution();
-      if (this.routerVal.way == "PINTUAN") {
-        this.isAssemble = true;
-        this.routerVal.parentOrder = JSON.parse(
-          decodeURIComponent(this.routerVal.parentOrder)
-        );
-        this.pintuanWay();
-      }
-    } finally {
-      uni.hideLoading();
+  } finally {
+    uni.hideLoading()
+  }
+})
+
+function getShippingLabel() {
+  const item =
+    shippingMethod.value.find((e) => e.value === shippingText.value) ||
+    shippingWay.find((e) => e.value === shippingText.value)
+  return item ? item.label : ''
+}
+
+async function callbackInvoice(val: any) {
+  invoiceFlag.value = false
+  receiptList.value = val
+  if (val) {
+    const submit = {
+      way: routerVal.value.way,
+      ...receiptList.value,
     }
-  },
-  mounted() {},
+    const receipt = await API_Order.getReceipt(submit)
+    if (receipt.data.success) {
+      shippingFlag.value = false
+      getOrderList()
+    }
+  }
+}
 
-  methods: {
-    getShippingLabel() {
-      const item =
-        this.shippingMethod.find((e) => e.value === this.shippingText) ||
-        this.shippingWay.find((e) => e.value === this.shippingText);
-      return item ? item.label : "";
-    },
+function navigateToStore(val: any) {
+  uni.navigateTo({
+    url: '/pages/product/shopPage?id=' + val.storeId,
+  })
+}
 
-    //发票回调 选择发票之后刷新购物车
-    async callbackInvoice(val) {
-      this.invoiceFlag = false;
-      this.receiptList = val;
-      if (val) {
-        let submit = {
-          way: this.routerVal.way,
-          ...this.receiptList,
-        };
-        let receipt = await API_Order.getReceipt(submit);
-        if (receipt.data.success) {
-          this.shippingFlag = false;
-          this.getOrderList();
-        }
+function clickToAddress() {
+  navigateTo(
+    `/pages/mine/address/address?from=cart&way=${
+      routerVal.value.way
+    }&parentOrder=${encodeURIComponent(
+      JSON.stringify(routerVal.value.parentOrder)
+    )}`
+  )
+}
+
+function clickToStoreAddress() {
+  navigateTo(
+    `/pages/mine/address/storeAddress?from=cart&way=${routerVal.value.way}&storeId=${remarkVal.value[0].storeId}`
+  )
+}
+
+function pintuanWay() {
+  const { memberId } = routerVal.value.parentOrder
+  const userInfo = isLogin()
+  if (memberId) {
+    endWay.value = userInfo
+    masterWay.value = routerVal.value.parentOrder
+    pintuanFlage.value = false
+  } else {
+    pintuanFlage.value = true
+    masterWay.value = userInfo
+  }
+}
+
+function invoice() {
+  invoiceFlag.value = true
+}
+
+function GET_Discount() {
+  let storeIds: any[] = []
+  let skus: any[] = []
+  const selectedCoupon: any[] = []
+  if (orderMessage.value.platformCoupon) {
+    selectedCoupon.push(orderMessage.value.platformCoupon.memberCoupon.id)
+  }
+  if (
+    orderMessage.value.storeCoupons &&
+    Object.keys(orderMessage.value.storeCoupons)[0]
+  ) {
+    const storeMemberCouponsId = Object.keys(
+      orderMessage.value.storeCoupons
+    )[0]
+    const storeCouponId =
+      orderMessage.value.storeCoupons[storeMemberCouponsId].memberCoupon.id
+    selectedCoupon.push(storeCouponId)
+  }
+  orderMessage.value.cartList.forEach((item: any) => {
+    item.skuList.forEach((sku: any) => {
+      storeIds.push(sku.storeId)
+      skus.push(sku.goodsSku.id)
+    })
+  })
+  storeIds = Array.from(new Set(storeIds))
+  skus = Array.from(new Set(skus))
+  uni.setStorage({
+    key: 'totalPrice',
+    data: orderMessage.value.priceDetailDTO.goodsPrice,
+  })
+  navigateTo(
+    `/pages/cart/coupon/index?way=${routerVal.value.way}&storeId=${storeIds}&skuId=${skus}&selectedCoupon=${selectedCoupon}`
+  )
+}
+
+function navigateTo(url: string) {
+  uni.navigateTo({
+    url,
+  })
+}
+
+function createTradeFun() {
+  proxy!.$u.throttle(() => {
+    if (shippingText.value === 'SELF_PICK_UP') {
+      if (!storeAddress.value.id) {
+        uni.showToast({
+          title: '请选择提货点',
+          duration: 2000,
+          icon: 'none',
+        })
+        return false
       }
-    },
-
-    // 跳转到店铺
-    navigateToStore(val) {
-      uni.navigateTo({
-        url: "/pages/product/shopPage?id=" + val.storeId,
-      });
-    },
-    // 点击跳转地址
-    clickToAddress() {
-      this.navigateTo(
-        `/pages/mine/address/address?from=cart&way=${
-          this.routerVal.way
-        }&parentOrder=${encodeURIComponent(
-          JSON.stringify(this.routerVal.parentOrder)
-        )}`
-      );
-    },
-    clickToStoreAddress() {
-      this.navigateTo(
-        `/pages/mine/address/storeAddress?from=cart&way=${this.routerVal.way}&storeId=${this.remarkVal[0].storeId}`
-      );
-    },
-
-    // 判断团长以及团员信息
-    pintuanWay() {
-      const { memberId } = this.routerVal.parentOrder;
-
-      const userInfo = this.isLogin();
-      if (memberId) {
-        this.endWay = userInfo;
-        this.masterWay = this.routerVal.parentOrder;
-        this.pintuanFlage = false;
-      } else {
-        this.pintuanFlage = true;
-        this.masterWay = userInfo;
+    } else if (
+      shippingText.value === 'LOGISTICS' &&
+      orderMessage.value.cartTypeEnum !== 'VIRTUAL'
+    ) {
+      if (!address.value.id) {
+        uni.showToast({
+          title: '请选择地址',
+          duration: 2000,
+          icon: 'none',
+        })
+        return false
       }
-    },
-    // 判断发票
-    invoice() {
-      this.invoiceFlag = true;
-    },
+    }
 
-    // 领取优惠券
-    GET_Discount() {
-      // 循环店铺id,商品id获取优惠券
-      let store = [];
-      let skus = [];
-      let selectedCoupon = [];
-      if (this.orderMessage.platformCoupon)
-        selectedCoupon.push(this.orderMessage.platformCoupon.memberCoupon.id);
-      if (
-        this.orderMessage.storeCoupons &&
-        Object.keys(this.orderMessage.storeCoupons)[0]
-      ) {
-        let storeMemberCouponsId = Object.keys(
-          this.orderMessage.storeCoupons
-        )[0];
-        let storeCouponId =
-          this.orderMessage.storeCoupons[storeMemberCouponsId].memberCoupon.id;
-        selectedCoupon.push(storeCouponId);
-      }
-      this.orderMessage.cartList.forEach((item) => {
-        item.skuList.forEach((sku) => {
-          store.push(sku.storeId);
-          skus.push(sku.goodsSku.id);
-        });
-      });
-      store = Array.from(new Set(store));
-      skus = Array.from(new Set(skus));
-      uni.setStorage({
-        key: "totalPrice",
-        data: this.orderMessage.priceDetailDTO.goodsPrice,
-      });
-      this.navigateTo(
-        `/pages/cart/coupon/index?way=${this.routerVal.way}&storeId=${store}&skuId=${skus}&selectedCoupon=${selectedCoupon}`
-      );
-    },
+    let client
+    // #ifdef H5
+    client = 'H5'
+    // #endif
+    // #ifdef MP-WEIXIN
+    client = 'WECHAT_MP'
+    // #endif
+    // #ifdef APP-PLUS
+    client = 'APP'
+    // #endif
 
-    /**
-     * 跳转
-     */
-    navigateTo(url) {
-      uni.navigateTo({
-        url,
-      });
-    },
+    const submit: Record<string, any> = {
+      client,
+      way: routerVal.value.way,
+      remark: remarkVal.value,
+      parentOrderSn: '',
+    }
+    if (routerVal.value.parentOrder && routerVal.value.parentOrder.orderSn) {
+      submit.parentOrderSn = routerVal.value.parentOrder.orderSn
+    } else {
+      delete submit.parentOrderSn
+    }
 
-    /**
-     * 提交订单准备支付
-     */
-
-    // 创建订单
-    createTradeFun() {
-      // 防抖
-      this.$u.throttle(() => {
-        if (this.shippingText === "SELF_PICK_UP") {
-          if (!this.storeAddress.id) {
-            uni.showToast({
-              title: "请选择提货点",
-              duration: 2000,
-              icon: "none",
-            });
-            return false;
-          }
-        } else if (this.shippingText === "LOGISTICS" && this.orderMessage.cartTypeEnum !== 'VIRTUAL') {
-          if (!this.address.id) {
-            uni.showToast({
-              title: "请选择地址",
-              duration: 2000,
-              icon: "none",
-            });
-            return false;
-          }
-        }
-
-        //  创建订单
-        let client;
-        // #ifdef H5
-        client = "H5";
-        // #endif
-        // #ifdef MP-WEIXIN
-        client = "WECHAT_MP";
-        // #endif
-        // #ifdef APP-PLUS
-        client = "APP";
-        // #endif
-
-        let submit = {
-          client,
-          way: this.routerVal.way,
-          remark: this.remarkVal,
-          parentOrderSn: "",
-        };
-        // 如果是拼团并且当前用户不是团长
-        this.routerVal.parentOrder && this.routerVal.parentOrder.orderSn
-          ? (submit.parentOrderSn = this.routerVal.parentOrder.orderSn)
-          : delete submit.parentOrderSn;
-
-        /**
-         * 创建订单
-         */
-        API_Trade.createTrade(submit).then((res) => {
-          if (res.data.success) {
-            uni.showToast({
-              title: "创建订单成功!",
-              duration: 2000,
-              icon: "none",
-            });
-            // 如果当前价格为0跳转到订单列表
-            if (this.orderMessage.priceDetailDTO.billPrice == 0) {
-              uni.navigateTo({
-                url: "/pages/order/myOrder?status=0",
-              });
-            } else {
-              // #ifdef MP-WEIXIN
-              // 微信小程序中点击创建订单直接开始支付
-              this.pay(res.data.result.sn);
-              // #endif
-
-              // #ifndef MP-WEIXIN
-              this.navigateTo(
-                `/pages/cart/payment/payOrder?trade_sn=${res.data.result.sn}`
-              );
-              // #endif
-            }
-          } else {
-            uni.showToast({
-              title: res.data.message,
-              duration: 2000,
-              icon: "none",
-            });
-          }
-        });
-      }, 3000);
-    },
-
-    /**
-     * 微信小程序中直接支付
-     */
-    async pay(sn) {
-      new LiLiWXPay({
-        sn: sn,
-        price: this.orderMessage.priceDetailDTO.billPrice,
-      }).pay();
-    },
-
-    /**
-     * 获取用户地址
-     */
-    getUserAddress() {
-      // 如果没有商品选择地址的话 则选择 默认地址
-      API_Address.getAddressDefault().then((res) => {
-        if (res.data.result) {
-          res.data.result.consigneeAddressPath =
-            res.data.result.consigneeAddressPath.split(",");
-          this.address = res.data.result;
-        }
-      });
-    },
-    // 获取配送列表
-    async getDistribution() {
-      let shopRes = await API_Trade.shippingMethodList({
-        way: this.routerVal.way,
-      });
-      let shopList;
-      if (shopRes.data.success) {
-        shopList = shopRes.data.result;
-        let way = [];
-        console.log(shopList);
-        this.shippingWay.forEach((item) => {
-          shopList.forEach((child) => {
-            if (item.value == child) {
-              way.push(item);
-            }
-          });
-        });
-        this.shippingMethod = way;
-        if (way.length && !way.some((item) => item.value === this.shippingText)) {
-          this.shippingText = way[0].value;
-        }
-      }
-    },
-
-    // 选择配送
-    async confirmDistribution(val) {
-      const selected = val?.value?.[0] || val?.[0];
-      if (!selected?.value) {
-        return;
-      }
-      let res = await API_Trade.setShipMethod({
-        shippingMethod: selected.value,
-        way: this.routerVal.way,
-      });
-
-      this.shippingText = selected.value;
+    API_Trade.createTrade(submit).then((res) => {
       if (res.data.success) {
-        this.getOrderList();
-      }
-    },
-
-    // 获取结算参数
-    getOrderList() {
-      this.notSupportFreight = [];
-      this.notSupportFreightNoticeText = "";
-      return API_Trade.getCheckoutParams(this.routerVal.way).then((res) => {
-        // 获取结算参数 进行首次判断
-        this.originOrderData = this.orderMessage
-          ? JSON.parse(JSON.stringify(this.orderMessage))
-          : null;
-
-        if (
-          !res.data.result.checkedSkuList ||
-          res.data.result.checkedSkuList.length === 0
-        ) {
-          if (!this.originOrderData?.checkedSkuList?.length) {
-            uni.switchTab({
-              url: "/pages/tabbar/cart/cartList",
-            });
-          }
-        }
-        if (res.data.result.skuList.length <= 0) {
-          if (!this.originOrderData?.skuList?.length) {
-            uni.navigateTo({
-              url: "/pages/order/myOrder?status=0",
-            });
-          }
-        }
-
-        let repeatData;
-        res.data.result.cartList.forEach((item, index) => {
-          // 如果已经写过备注信息的话赋值
-          repeatData = {
-            remark: this.remarkFlag
-              ? this.remark[index].storeId == item.storeId
-                ? this.remark[index].remark
-                : item.remark
-              : item.remark,
-            storeId: item.storeId,
-          };
-
-          this.remarkVal[index] = repeatData;
-        });
-
-        this.orderMessage = res.data.result;
-        /**
-         * 为了避免路径传值在h5中超出限制问题
-         * 这块将可用的优惠券以及不可用的优惠券放入到vuex里面进行存储
-         */
-        this.$store.state.canUseCoupons = res.data.result.canUseCoupons;
-        this.$store.state.cantUseCoupons = res.data.result.cantUseCoupons;
-
-        if (!res.data.result.memberAddress) {
-          // 获取会员默认地址
-          this.getUserAddress();
+        uni.showToast({
+          title: '创建订单成功!',
+          duration: 2000,
+          icon: 'none',
+        })
+        if (orderMessage.value.priceDetailDTO.billPrice == 0) {
+          uni.navigateTo({
+            url: '/pages/order/myOrder?status=0',
+          })
         } else {
-          this.address = res.data.result.memberAddress;
-          res.data.result.memberAddress.consigneeAddressPath =
-            res.data.result.memberAddress.consigneeAddressPath.split(",");
-        }
-        if (res.data.result.storeAddress) {
-          this.storeAddress = res.data.result.storeAddress;
-          console.log("storeAddress", this.storeAddress);
-        }
-        if (
-          res.data.result.notSupportFreight &&
-          res.data.result.notSupportFreight.length != 0
-        ) {
-          this.notSupportFreight = res.data.result.notSupportFreight;
-          this.notSupportFreightNoticeText = "以下商品超出配送范围：";
-          res.data.result.notSupportFreight.forEach((item) => {
-            this.notSupportFreightNoticeText += item.goodsSku.goodsName;
-          });
-        }
-      });
-    },
+          // #ifdef MP-WEIXIN
+          pay(res.data.result.sn)
+          // #endif
 
-    //
-  },
-};
+          // #ifndef MP-WEIXIN
+          navigateTo(
+            `/pages/cart/payment/payOrder?trade_sn=${res.data.result.sn}`
+          )
+          // #endif
+        }
+      } else {
+        uni.showToast({
+          title: res.data.message,
+          duration: 2000,
+          icon: 'none',
+        })
+      }
+    })
+  }, 3000)
+}
+
+async function pay(sn: string) {
+  new LiLiWXPay({
+    sn,
+    price: orderMessage.value.priceDetailDTO.billPrice,
+  }).pay()
+}
+
+function getUserAddress() {
+  API_Address.getAddressDefault().then((res) => {
+    if (res.data.result) {
+      res.data.result.consigneeAddressPath =
+        res.data.result.consigneeAddressPath.split(',')
+      address.value = res.data.result
+    }
+  })
+}
+
+async function getDistribution() {
+  const shopRes = await API_Trade.shippingMethodList({
+    way: routerVal.value.way,
+  })
+  if (shopRes.data.success) {
+    const shopList = shopRes.data.result
+    const way: ShippingOption[] = []
+    console.log(shopList)
+    shippingWay.forEach((item) => {
+      shopList.forEach((child: string) => {
+        if (item.value == child) {
+          way.push(item)
+        }
+      })
+    })
+    shippingMethod.value = way
+    if (way.length && !way.some((item) => item.value === shippingText.value)) {
+      shippingText.value = way[0].value
+    }
+  }
+}
+
+async function confirmDistribution(val: any) {
+  const selected = val?.value?.[0] || val?.[0]
+  if (!selected?.value) {
+    return
+  }
+  const res = await API_Trade.setShipMethod({
+    shippingMethod: selected.value,
+    way: routerVal.value.way,
+  })
+
+  shippingText.value = selected.value
+  if (res.data.success) {
+    getOrderList()
+  }
+}
+
+function getOrderList() {
+  notSupportFreight.value = []
+  notSupportFreightNoticeText.value = ''
+  return API_Trade.getCheckoutParams(routerVal.value.way).then((res) => {
+    originOrderData.value = orderMessage.value
+      ? JSON.parse(JSON.stringify(orderMessage.value))
+      : null
+
+    if (
+      !res.data.result.checkedSkuList ||
+      res.data.result.checkedSkuList.length === 0
+    ) {
+      if (!originOrderData.value?.checkedSkuList?.length) {
+        uni.switchTab({
+          url: '/pages/tabbar/cart/cartList',
+        })
+      }
+    }
+    if (res.data.result.skuList.length <= 0) {
+      if (!originOrderData.value?.skuList?.length) {
+        uni.navigateTo({
+          url: '/pages/order/myOrder?status=0',
+        })
+      }
+    }
+
+    let repeatData
+    res.data.result.cartList.forEach((item: any, index: number) => {
+      repeatData = {
+        remark: remarkFlag.value
+          ? remark.value[index].storeId == item.storeId
+            ? remark.value[index].remark
+            : item.remark
+          : item.remark,
+        storeId: item.storeId,
+      }
+
+      remarkVal.value[index] = repeatData
+    })
+
+    orderMessage.value = res.data.result
+    ;(store.state as any).canUseCoupons = res.data.result.canUseCoupons
+    ;(store.state as any).cantUseCoupons = res.data.result.cantUseCoupons
+
+    if (!res.data.result.memberAddress) {
+      getUserAddress()
+    } else {
+      address.value = res.data.result.memberAddress
+      res.data.result.memberAddress.consigneeAddressPath =
+        res.data.result.memberAddress.consigneeAddressPath.split(',')
+    }
+    if (res.data.result.storeAddress) {
+      storeAddress.value = res.data.result.storeAddress
+      console.log('storeAddress', storeAddress.value)
+    }
+    if (
+      res.data.result.notSupportFreight &&
+      res.data.result.notSupportFreight.length != 0
+    ) {
+      notSupportFreight.value = res.data.result.notSupportFreight
+      notSupportFreightNoticeText.value = '以下商品超出配送范围：'
+      res.data.result.notSupportFreight.forEach((item: any) => {
+        notSupportFreightNoticeText.value += item.goodsSku.goodsName
+      })
+    }
+  })
+}
 </script>
 <style scoped>
 page {
diff --git a/pages/order/invoice/invoiceDetail.vue b/pages/order/invoice/invoiceDetail.vue
index fbf8d73..7253908 100644
--- a/pages/order/invoice/invoiceDetail.vue
+++ b/pages/order/invoice/invoiceDetail.vue
@@ -74,185 +74,128 @@
   </view>
 </template>
 
-<script>
-import { getReceiptDetail } from "@/api/order.js";
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { getReceiptDetail } from '@/api/order.js'
+import { unitPrice } from '@/utils/filters.js'
 
-export default {
-  data() {
-    return {
-      order: {},
-      title_type: "",
-      showInvoicePopup: false,
-    };
-  },
-  onLoad(options) {
-    this.loadData(options.id);
-  },
-  methods: {
-    loadData(id) {
-      getReceiptDetail(id).then((res) => {
-        let order = res.data.result;
-        this.order = order;
-        this.title_type = order.companyName || order.taxpayerId ? "单位" : "个人";
-      });
-    },
-    getTitleNameValue() {
-      return this.title_type === "单位"
-        ? this.order.companyName || "-"
-        : this.order.personalName || "-";
-    },
-    viewInvoice() {
-      if (!this.order.invoiceAddress) {
+const order = ref<Record<string, any>>({})
+const title_type = ref('')
+const showInvoicePopup = ref(false)
+
+onLoad((options) => {
+  loadData(options.id)
+})
+
+function loadData(id: string) {
+  getReceiptDetail(id).then((res) => {
+    const result = res.data.result
+    order.value = result
+    title_type.value = result.companyName || result.taxpayerId ? '单位' : '个人'
+  })
+}
+
+function getTitleNameValue() {
+  return title_type.value === '单位'
+    ? order.value.companyName || '-'
+    : order.value.personalName || '-'
+}
+
+function viewInvoice() {
+  if (!order.value.invoiceAddress) {
+    uni.showToast({
+      title: '暂无发票地址',
+      duration: 2000,
+      icon: 'none',
+    })
+    return
+  }
+  if (isImageInvoice()) {
+    showInvoicePopup.value = true
+    return
+  }
+  // #ifdef APP-PLUS
+  plus.runtime.openURL(order.value.invoiceAddress)
+  // #endif
+  // #ifndef APP-PLUS
+  uni.navigateTo({
+    url: '/pages/tabbar/home/web-view?src=' + encodeURIComponent(order.value.invoiceAddress),
+  })
+  // #endif
+}
+
+function isImageInvoice() {
+  const url = (order.value.invoiceAddress || '').split('?')[0].toLowerCase()
+  return /\.(png|jpe?g|gif|bmp|webp)$/.test(url)
+}
+
+function previewImageInvoice() {
+  if (!order.value.invoiceAddress) return
+  uni.previewImage({
+    current: 0,
+    urls: [order.value.invoiceAddress],
+  })
+}
+
+function downloadImageInvoice() {
+  if (!order.value.invoiceAddress) {
+    uni.showToast({
+      title: '暂无发票可下载',
+      duration: 2000,
+      icon: 'none',
+    })
+    return
+  }
+  uni.downloadFile({
+    url: order.value.invoiceAddress,
+    success: (res) => {
+      if (res.statusCode !== 200) {
         uni.showToast({
-          title: "暂无发票地址",
+          title: '下载失败',
           duration: 2000,
-          icon: "none",
-        });
-        return;
+          icon: 'none',
+        })
+        return
       }
-      if (this.isImageInvoice()) {
-        this.showInvoicePopup = true;
-        return;
-      }
-      // #ifdef APP-PLUS
-      plus.runtime.openURL(this.order.invoiceAddress);
+      const tempFilePath = res.tempFilePath
+      // #ifdef H5
+      const link = document.createElement('a')
+      link.href = tempFilePath || order.value.invoiceAddress
+      link.download = 'invoice'
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
       // #endif
-      // #ifndef APP-PLUS
-      uni.navigateTo({
-        url:
-          "/pages/tabbar/home/web-view?src=" +
-          encodeURIComponent(this.order.invoiceAddress),
-      });
-      // #endif
-    },
-    isImageInvoice() {
-      const url = (this.order.invoiceAddress || "").split("?")[0].toLowerCase();
-      return /\.(png|jpe?g|gif|bmp|webp)$/.test(url);
-    },
-    previewImageInvoice() {
-      if (!this.order.invoiceAddress) {
-        return;
-      }
-      uni.previewImage({
-        current: 0,
-        urls: [this.order.invoiceAddress],
-      });
-    },
-    downloadImageInvoice() {
-      if (!this.order.invoiceAddress) {
-        uni.showToast({
-          title: "暂无发票可下载",
-          duration: 2000,
-          icon: "none",
-        });
-        return;
-      }
-      uni.downloadFile({
-        url: this.order.invoiceAddress,
-        success: (res) => {
-          if (res.statusCode !== 200) {
-            uni.showToast({
-              title: "下载失败",
-              duration: 2000,
-              icon: "none",
-            });
-            return;
-          }
-          const tempFilePath = res.tempFilePath;
-          // #ifdef H5
-          const link = document.createElement("a");
-          link.href = tempFilePath || this.order.invoiceAddress;
-          link.download = "invoice";
-          document.body.appendChild(link);
-          link.click();
-          document.body.removeChild(link);
-          // #endif
-          // #ifndef H5
-          uni.saveImageToPhotosAlbum({
-            filePath: tempFilePath,
-            success: () => {
-              uni.showToast({
-                title: "发票已保存到相册",
-                duration: 2000,
-                icon: "none",
-              });
-            },
-            fail: () => {
-              uni.showToast({
-                title: "保存失败",
-                duration: 2000,
-                icon: "none",
-              });
-            },
-          });
-          // #endif
+      // #ifndef H5
+      uni.saveImageToPhotosAlbum({
+        filePath: tempFilePath,
+        success: () => {
+          uni.showToast({
+            title: '发票已保存到相册',
+            duration: 2000,
+            icon: 'none',
+          })
         },
         fail: () => {
           uni.showToast({
-            title: "下载失败",
+            title: '保存失败',
             duration: 2000,
-            icon: "none",
-          });
+            icon: 'none',
+          })
         },
-      });
+      })
+      // #endif
     },
-    /**
-     * 点击图片放大或保存
-     */
-    preview() {
-      //预览发票
-      if (this.order.elec_file_list.length) {
-        uni.previewImage({
-          current: 0,
-          urls: this.order.elec_file_list,
-          longPressActions: {
-            itemList: ["发送给朋友", "保存图片", "收藏"],
-            success: function (data) {},
-            fail: function (err) {},
-          },
-        });
-      } else {
-        uni.showToast({
-          title: "暂无发票可预览",
-          duration: 2000,
-          icon: "none",
-        });
-      }
+    fail: () => {
+      uni.showToast({
+        title: '下载失败',
+        duration: 2000,
+        icon: 'none',
+      })
     },
-    download() {
-      //下载发票
-      let _this = this;
-      if (this.order.elec_file_list.length) {
-        this.order.elec_file_list.forEach((item) => {
-          uni.downloadFile({
-            url: item,
-            success: (res) => {
-              if (res.statusCode === 200) {
-                let tempFilePath = res.tempFilePath;
-                uni.saveFile({
-                  tempFilePath: tempFilePath,
-                  success: function (res) {
-                    uni.showToast({
-                      title: "发票已下载到" + res.savedFilePath,
-                      duration: 2000,
-                      icon: "none",
-                    });
-                  },
-                });
-              }
-            },
-          });
-        });
-      } else {
-        uni.showToast({
-          title: "暂无发票可下载",
-          duration: 2000,
-          icon: "none",
-        });
-      }
-    },
-  },
-};
+  })
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/order/invoice/setInvoice.vue b/pages/order/invoice/setInvoice.vue
index f9eef9c..ec3b87e 100644
--- a/pages/order/invoice/setInvoice.vue
+++ b/pages/order/invoice/setInvoice.vue
@@ -92,340 +92,355 @@
     </div>
   </u-popup>
 </template>
-<script>
-export default {
-  props: ["res"],
-  computed: {
-    isSpecialInvoice() {
-      return this.getActiveTitle(this.invoiceType) === "增值税专用发票";
-    },
-    titleName: {
-      get() {
-        return this.isUnitTitle()
-          ? this.submitData.companyName
-          : this.submitData.personalName;
-      },
-      set(value) {
-        if (this.isUnitTitle()) {
-          this.submitData.companyName = value;
-        } else {
-          this.submitData.personalName = value;
-        }
-        this.syncReceiptTitle();
-      },
-    },
+<script setup lang="ts">
+import { ref, reactive, computed, watch, onMounted, getCurrentInstance } from 'vue'
+
+interface InvoiceOption {
+  title: string
+  active: boolean
+  disabled?: boolean
+}
+
+interface SubmitData {
+  receiptTitle: string
+  receiptType: string
+  personalName: string
+  companyName: string
+  taxpayerId: string
+  receiptContent: string
+  companyAddress: string
+  companyPhone: string
+  bankName: string
+  bankAccount: string
+  receiptPhone: string
+  receiptEmail: string
+}
+
+const props = defineProps<{
+  res?: Record<string, any>
+}>()
+
+const emit = defineEmits<{
+  callbackInvoice: [val: SubmitData | boolean]
+}>()
+
+const { proxy } = getCurrentInstance()!
+
+const shouldClearOnTypeChange = ref(false)
+const taxpayerFlag = ref(false)
+const submitData = reactive<SubmitData>({
+  receiptTitle: '',
+  receiptType: '1',
+  personalName: '',
+  companyName: '',
+  taxpayerId: '',
+  receiptContent: '',
+  companyAddress: '',
+  companyPhone: '',
+  bankName: '',
+  bankAccount: '',
+  receiptPhone: '',
+  receiptEmail: '',
+})
+const show = ref(true)
+const title = ref('')
+const tips =
+  '电子发票即电子增值税发票，是税局认可的有效凭证，其法律效力、基本用途及使用规定同纸质发票。'
+
+const invoiceType = reactive<InvoiceOption[]>([
+  { title: '电子普通发票', active: true },
+  { title: '增值税专用发票', active: false },
+])
+
+const invoiceHeader = reactive<InvoiceOption[]>([
+  { title: '个人', active: false },
+  { title: '单位', active: false },
+])
+
+const goodsType = reactive<InvoiceOption[]>([
+  { title: '商品明细', active: false },
+  { title: '商品类别', active: false },
+])
+
+const isSpecialInvoice = computed(
+  () => getActiveTitle(invoiceType) === '增值税专用发票'
+)
+
+const titleName = computed({
+  get() {
+    return isUnitTitle() ? submitData.companyName : submitData.personalName
   },
-  watch: {
-    invoiceType: {
-      handler(val) {
-        const currentType = this.getActiveTitle(val);
-        const nextReceiptType =
-          currentType === "增值税专用发票" ? "2" : "1";
-        const previousReceiptType = this.submitData.receiptType;
-        this.submitData.receiptType = nextReceiptType;
-
-        if (
-          this.shouldClearOnTypeChange &&
-          previousReceiptType &&
-          previousReceiptType !== nextReceiptType
-        ) {
-          this.clearInvoiceInfo();
-        }
-
-        if (currentType === "增值税专用发票") {
-          this.setActiveByTitle(this.invoiceHeader, "单位");
-          this.setActiveByTitle(this.goodsType, "商品明细");
-          this.title = "单位";
-          this.taxpayerFlag = true;
-          this.submitData.receiptContent = "商品明细";
-          this.syncReceiptTitle();
-        } else {
-          this.setActiveByTitle(this.invoiceHeader, "个人");
-          this.setActiveByTitle(this.goodsType, "商品明细");
-          this.title = "个人";
-          this.taxpayerFlag = false;
-          this.submitData.receiptContent = "商品明细";
-          this.syncReceiptTitle();
-        }
-        this.shouldClearOnTypeChange = false;
-      },
-      deep: true,
-    },
-    invoiceHeader: {
-      handler(val) {
-        if (this.isSpecialInvoice) {
-          this.title = "单位";
-          this.taxpayerFlag = true;
-          return;
-        }
-
-        this.title = this.getActiveTitle(val) || "个人";
-        this.taxpayerFlag = this.title == "单位";
-        if (!this.taxpayerFlag) {
-          this.submitData.taxpayerId = "";
-        }
-        this.syncReceiptTitle();
-      },
-      deep: true,
-    },
-    goodsType: {
-      handler(val) {
-        this.submitData.receiptContent = val.filter((item) => {
-          return item.active == true;
-        })[0].title;
-      },
-      deep: true,
-    },
-  },
-
-  data() {
-    return {
-      shouldClearOnTypeChange: false,
-      taxpayerFlag: false,
-      submitData: {
-        receiptTitle: "", //发票抬头
-        receiptType: "1", // 发票类型
-        personalName: "",
-        companyName: "",
-        taxpayerId: "", //纳税人
-        receiptContent: "",
-        companyAddress: "", //单位地址
-        companyPhone: "", //单位电话
-        bankName: "", //开户银行
-        bankAccount: "", //银行账号
-        receiptPhone: "", //收票人手机
-        receiptEmail: "", //收票人邮箱
-      },
-      show: true,
-      title: "",
-      tips:
-        "电子发票即电子增值税发票，是税局认可的有效凭证，其法律效力、基本用途及使用规定同纸质发票。",
-      //   发票类型
-      invoiceType: [
-        {
-          title: "电子普通发票",
-          active: true,
-        },
-        {
-          title: "增值税专用发票",
-          active: false,
-        },
-      ],
-      //   发票抬头
-      invoiceHeader: [
-        {
-          title: "个人",
-          active: false,
-        },
-        {
-          title: "单位",
-          active: false,
-        },
-      ],
-      //   商品类型
-      goodsType: [
-        {
-          title: "商品明细",
-          active: false,
-        },
-        {
-          title: "商品类别",
-          active: false,
-        },
-      ],
-    };
-  },
-  mounted() {
-    if (this.res) {
-      this.submitData.receiptType = this.normalizeReceiptType(this.res.receiptType);
-      this.submitData.personalName =
-        this.res.personalName ||
-        (!this.res.companyName && !this.res.taxpayerId ? this.res.receiptTitle || "" : "");
-      this.submitData.companyName =
-        this.res.companyName ||
-        (this.res.taxpayerId ? this.res.receiptTitle || "" : "");
-      this.submitData.taxpayerId = this.res.taxpayerId; //纳税人
-      this.submitData.receiptContent = this.res.receiptContent;
-      this.submitData.companyAddress = this.res.companyAddress || "";
-      this.submitData.companyPhone = this.res.companyPhone || "";
-      this.submitData.bankName = this.res.bankName || "";
-      this.submitData.bankAccount = this.res.bankAccount || "";
-      this.submitData.receiptPhone = this.res.receiptPhone || "";
-      this.submitData.receiptEmail = this.res.receiptEmail || "";
-      if (this.submitData.receiptType === "2") {
-        this.setActiveByTitle(this.invoiceType, "增值税专用发票");
-        this.setActiveByTitle(this.invoiceHeader, "单位");
-        this.setActiveByTitle(this.goodsType, "商品明细");
-      } else {
-        this.setActiveByTitle(this.invoiceType, "电子普通发票");
-        this.res.receiptContent == "商品类别"
-          ? this.setActiveByTitle(this.goodsType, "商品类别")
-          : this.setActiveByTitle(this.goodsType, "商品明细");
-        this.res.taxpayerId
-          ? this.setActiveByTitle(this.invoiceHeader, "单位")
-          : this.setActiveByTitle(this.invoiceHeader, "个人");
-      }
-      this.syncReceiptTitle();
+  set(value: string) {
+    if (isUnitTitle()) {
+      submitData.companyName = value
     } else {
-      this.setActiveByTitle(this.invoiceType, "电子普通发票");
-      this.setActiveByTitle(this.invoiceHeader, "个人");
-      this.setActiveByTitle(this.goodsType, "商品明细");
-      this.syncReceiptTitle();
+      submitData.personalName = value
+    }
+    syncReceiptTitle()
+  },
+})
+
+watch(
+  invoiceType,
+  (val) => {
+    const currentType = getActiveTitle(val)
+    const nextReceiptType = currentType === '增值税专用发票' ? '2' : '1'
+    const previousReceiptType = submitData.receiptType
+    submitData.receiptType = nextReceiptType
+
+    if (
+      shouldClearOnTypeChange.value &&
+      previousReceiptType &&
+      previousReceiptType !== nextReceiptType
+    ) {
+      clearInvoiceInfo()
     }
 
+    if (currentType === '增值税专用发票') {
+      setActiveByTitle(invoiceHeader, '单位')
+      setActiveByTitle(goodsType, '商品明细')
+      title.value = '单位'
+      taxpayerFlag.value = true
+      submitData.receiptContent = '商品明细'
+      syncReceiptTitle()
+    } else {
+      setActiveByTitle(invoiceHeader, '个人')
+      setActiveByTitle(goodsType, '商品明细')
+      title.value = '个人'
+      taxpayerFlag.value = false
+      submitData.receiptContent = '商品明细'
+      syncReceiptTitle()
+    }
+    shouldClearOnTypeChange.value = false
   },
-  methods: {
-    normalizeReceiptType(type) {
-      return type === "2" || type === "VATOSPECIAL" ? "2" : "1";
-    },
-    getActiveTitle(list) {
-      const current = list.find((item) => item.active);
-      return current ? current.title : "";
-    },
-    setActiveByTitle(list, title) {
-      list.forEach((item) => {
-        item.active = item.title === title;
-      });
-    },
-    isUnitTitle() {
-      return this.isSpecialInvoice || this.title === "单位";
-    },
-    syncReceiptTitle() {
-      this.submitData.receiptTitle = this.isUnitTitle()
-        ? this.submitData.companyName
-        : this.submitData.personalName;
-    },
-    clearInvoiceInfo() {
-      this.submitData.receiptTitle = "";
-      this.submitData.personalName = "";
-      this.submitData.companyName = "";
-      this.submitData.taxpayerId = "";
-      this.submitData.receiptContent = "";
-      this.submitData.companyAddress = "";
-      this.submitData.companyPhone = "";
-      this.submitData.bankName = "";
-      this.submitData.bankAccount = "";
-      this.submitData.receiptPhone = "";
-      this.submitData.receiptEmail = "";
-    },
-    handleClickHeader(val, index, arr) {
-      if (val.disabled) {
-        return;
-      }
-      const previousTitle = this.getActiveTitle(arr);
-      if (arr === this.invoiceType && previousTitle !== val.title) {
-        this.shouldClearOnTypeChange = true;
-      }
-      arr.forEach((item) => {
-        item.active = false;
-      });
-      val.active = true;
-    },
-    /**
-     * 监听关闭
-     */
-    close(val) {
-      this.$emit("callbackInvoice", val);
-    },
-    submitInvoice() {
-      /**
-       * 验证
-       */
-      const {
-        receiptTitle,
-        taxpayerId,
-        companyAddress,
-        companyPhone,
-        bankName,
-        bankAccount,
-        receiptPhone,
-        receiptEmail,
-      } = this.submitData;
-      this.syncReceiptTitle();
+  { deep: true }
+)
 
-      if (this.$u.test.isEmpty(receiptTitle)) {
-        uni.showToast({
-          title: "请您填写发票抬头!",
-          duration: 2000,
-          icon: "none",
-        });
-        return false;
-      }
-      if (
-        !this.$u.test.isEmpty(receiptTitle) &&
-        this.$u.test.isEmpty(taxpayerId) &&
-        this.invoiceHeader[1].active == true
-      ) {
-        uni.showToast({
-          title: "请您填写纳税人识别号!",
-          duration: 2000,
-          icon: "none",
-        });
+watch(
+  invoiceHeader,
+  (val) => {
+    if (isSpecialInvoice.value) {
+      title.value = '单位'
+      taxpayerFlag.value = true
+      return
+    }
 
-        return false;
-      }
-      if (this.isSpecialInvoice && this.$u.test.isEmpty(companyAddress)) {
-        uni.showToast({
-          title: "请您填写单位地址!",
-          duration: 2000,
-          icon: "none",
-        });
-        return false;
-      }
-      if (this.isSpecialInvoice && this.$u.test.isEmpty(companyPhone)) {
-        uni.showToast({
-          title: "请您填写单位电话!",
-          duration: 2000,
-          icon: "none",
-        });
-        return false;
-      }
-      if (this.isSpecialInvoice && this.$u.test.isEmpty(bankName)) {
-        uni.showToast({
-          title: "请您填写开户银行!",
-          duration: 2000,
-          icon: "none",
-        });
-        return false;
-      }
-      if (this.isSpecialInvoice && this.$u.test.isEmpty(bankAccount)) {
-        uni.showToast({
-          title: "请您填写银行账号!",
-          duration: 2000,
-          icon: "none",
-        });
-        return false;
-      }
-      if (this.$u.test.isEmpty(receiptPhone)) {
-        uni.showToast({
-          title: "请您填写收票人手机!",
-          duration: 2000,
-          icon: "none",
-        });
-        return false;
-      }
-      if (!this.$u.test.mobile(receiptPhone)) {
-        uni.showToast({
-          title: "请输入正确的收票人手机号!",
-          duration: 2000,
-          icon: "none",
-        });
-        return false;
-      }
-      if (!this.$u.test.isEmpty(receiptEmail) && !this.$u.test.email(receiptEmail)) {
-        uni.showToast({
-          title: "请输入正确的收票人邮箱!",
-          duration: 2000,
-          icon: "none",
-        });
-        return false;
-      }
-
-      this.show = false;
-      this.close(this.submitData);
-    },
+    title.value = getActiveTitle(val) || '个人'
+    taxpayerFlag.value = title.value == '单位'
+    if (!taxpayerFlag.value) {
+      submitData.taxpayerId = ''
+    }
+    syncReceiptTitle()
   },
-};
+  { deep: true }
+)
+
+watch(
+  goodsType,
+  (val) => {
+    submitData.receiptContent = val.filter((item) => item.active == true)[0].title
+  },
+  { deep: true }
+)
+
+onMounted(() => {
+  if (props.res) {
+    submitData.receiptType = normalizeReceiptType(props.res.receiptType)
+    submitData.personalName =
+      props.res.personalName ||
+      (!props.res.companyName && !props.res.taxpayerId
+        ? props.res.receiptTitle || ''
+        : '')
+    submitData.companyName =
+      props.res.companyName ||
+      (props.res.taxpayerId ? props.res.receiptTitle || '' : '')
+    submitData.taxpayerId = props.res.taxpayerId
+    submitData.receiptContent = props.res.receiptContent
+    submitData.companyAddress = props.res.companyAddress || ''
+    submitData.companyPhone = props.res.companyPhone || ''
+    submitData.bankName = props.res.bankName || ''
+    submitData.bankAccount = props.res.bankAccount || ''
+    submitData.receiptPhone = props.res.receiptPhone || ''
+    submitData.receiptEmail = props.res.receiptEmail || ''
+    if (submitData.receiptType === '2') {
+      setActiveByTitle(invoiceType, '增值税专用发票')
+      setActiveByTitle(invoiceHeader, '单位')
+      setActiveByTitle(goodsType, '商品明细')
+    } else {
+      setActiveByTitle(invoiceType, '电子普通发票')
+      props.res.receiptContent == '商品类别'
+        ? setActiveByTitle(goodsType, '商品类别')
+        : setActiveByTitle(goodsType, '商品明细')
+      props.res.taxpayerId
+        ? setActiveByTitle(invoiceHeader, '单位')
+        : setActiveByTitle(invoiceHeader, '个人')
+    }
+    syncReceiptTitle()
+  } else {
+    setActiveByTitle(invoiceType, '电子普通发票')
+    setActiveByTitle(invoiceHeader, '个人')
+    setActiveByTitle(goodsType, '商品明细')
+    syncReceiptTitle()
+  }
+})
+
+function normalizeReceiptType(type: string) {
+  return type === '2' || type === 'VATOSPECIAL' ? '2' : '1'
+}
+
+function getActiveTitle(list: InvoiceOption[]) {
+  const current = list.find((item) => item.active)
+  return current ? current.title : ''
+}
+
+function setActiveByTitle(list: InvoiceOption[], activeTitle: string) {
+  list.forEach((item) => {
+    item.active = item.title === activeTitle
+  })
+}
+
+function isUnitTitle() {
+  return isSpecialInvoice.value || title.value === '单位'
+}
+
+function syncReceiptTitle() {
+  submitData.receiptTitle = isUnitTitle()
+    ? submitData.companyName
+    : submitData.personalName
+}
+
+function clearInvoiceInfo() {
+  submitData.receiptTitle = ''
+  submitData.personalName = ''
+  submitData.companyName = ''
+  submitData.taxpayerId = ''
+  submitData.receiptContent = ''
+  submitData.companyAddress = ''
+  submitData.companyPhone = ''
+  submitData.bankName = ''
+  submitData.bankAccount = ''
+  submitData.receiptPhone = ''
+  submitData.receiptEmail = ''
+}
+
+function handleClickHeader(
+  val: InvoiceOption,
+  _index: number,
+  arr: InvoiceOption[]
+) {
+  if (val.disabled) {
+    return
+  }
+  const previousTitle = getActiveTitle(arr)
+  if (arr === invoiceType && previousTitle !== val.title) {
+    shouldClearOnTypeChange.value = true
+  }
+  arr.forEach((item) => {
+    item.active = false
+  })
+  val.active = true
+}
+
+function close(val: SubmitData | boolean) {
+  emit('callbackInvoice', val)
+}
+
+function submitInvoice() {
+  const {
+    receiptTitle,
+    taxpayerId,
+    companyAddress,
+    companyPhone,
+    bankName,
+    bankAccount,
+    receiptPhone,
+    receiptEmail,
+  } = submitData
+  syncReceiptTitle()
+
+  if (proxy.$u.test.isEmpty(receiptTitle)) {
+    uni.showToast({
+      title: '请您填写发票抬头!',
+      duration: 2000,
+      icon: 'none',
+    })
+    return false
+  }
+  if (
+    !proxy.$u.test.isEmpty(receiptTitle) &&
+    proxy.$u.test.isEmpty(taxpayerId) &&
+    invoiceHeader[1].active == true
+  ) {
+    uni.showToast({
+      title: '请您填写纳税人识别号!',
+      duration: 2000,
+      icon: 'none',
+    })
+    return false
+  }
+  if (isSpecialInvoice.value && proxy.$u.test.isEmpty(companyAddress)) {
+    uni.showToast({
+      title: '请您填写单位地址!',
+      duration: 2000,
+      icon: 'none',
+    })
+    return false
+  }
+  if (isSpecialInvoice.value && proxy.$u.test.isEmpty(companyPhone)) {
+    uni.showToast({
+      title: '请您填写单位电话!',
+      duration: 2000,
+      icon: 'none',
+    })
+    return false
+  }
+  if (isSpecialInvoice.value && proxy.$u.test.isEmpty(bankName)) {
+    uni.showToast({
+      title: '请您填写开户银行!',
+      duration: 2000,
+      icon: 'none',
+    })
+    return false
+  }
+  if (isSpecialInvoice.value && proxy.$u.test.isEmpty(bankAccount)) {
+    uni.showToast({
+      title: '请您填写银行账号!',
+      duration: 2000,
+      icon: 'none',
+    })
+    return false
+  }
+  if (proxy.$u.test.isEmpty(receiptPhone)) {
+    uni.showToast({
+      title: '请您填写收票人手机!',
+      duration: 2000,
+      icon: 'none',
+    })
+    return false
+  }
+  if (!proxy.$u.test.mobile(receiptPhone)) {
+    uni.showToast({
+      title: '请输入正确的收票人手机号!',
+      duration: 2000,
+      icon: 'none',
+    })
+    return false
+  }
+  if (
+    !proxy.$u.test.isEmpty(receiptEmail) &&
+    !proxy.$u.test.email(receiptEmail)
+  ) {
+    uni.showToast({
+      title: '请输入正确的收票人邮箱!',
+      duration: 2000,
+      icon: 'none',
+    })
+    return false
+  }
+
+  show.value = false
+  close(submitData)
+}
 </script>
 <style scoped lang="scss">
 .form-item {
diff --git a/pages/order/myOrder.vue b/pages/order/myOrder.vue
index 3184e9c..ebd6cd7 100644
--- a/pages/order/myOrder.vue
+++ b/pages/order/myOrder.vue
@@ -11,7 +11,7 @@
 					<u-empty text="暂无订单" mode="list"
 						v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></u-empty>
 					<!-- 订单列表 -->
-					<view class="seller-view" :key="oderIndex" v-for="(order, oderIndex) in tabItem.orderList">
+					<view class="seller-view" :key="orderIndex" v-for="(order, orderIndex) in tabItem.orderList">
 						<!-- 店铺名称 -->
 						<view class="seller-info u-flex u-row-between">
 							<view class="seller-name wes" @click="navigateToStore(order)">
@@ -108,458 +108,339 @@
 	</view>
 </template>
 
-<script>
-	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
-	import {
-		getOrderList,
-		cancelOrder,
-		confirmReceipt
-	} from "@/api/order.js";
-	import {
-		getClearReason
-	} from "@/api/after-sale.js";
-	import LiLiWXPay from "@/js_sdk/lili-pay/wx-pay.js";
-	export default {
-		components: {
-			uniLoadMore,
-		},
-		data() {
-			return {
-				lightColor: this.$lightColor,
-				tabCurrentIndex: 0, //导航栏索引
-				navList: [
-					//导航栏list
-					{
-						state: 0,
-						text: "全部",
-						loadStatus: "more",
-						orderList: [],
-						pageNumber: 1,
-					},
-					{
-						state: 1,
-						text: "待付款",
-						loadStatus: "more",
-						orderList: [],
-						pageNumber: 1,
-					},
-					{
-						state: 2,
-						text: "待发货",
-						loadStatus: "more",
-						orderList: [],
-						pageNumber: 1,
-					},
-					{
-						state: 3,
-						text: "待收货",
-						loadStatus: "more",
-						orderList: [],
-						pageNumber: 1,
-					},
-					{
-						state: 4,
-						text: "已完成",
-						loadStatus: "more",
-						orderList: [],
-						pageNumber: 1,
-					},
-					{
-						state: 5,
-						text: "已取消",
-						loadStatus: "more",
-						orderList: [],
-						pageNumber: 1,
-					},
-				],
-				status: "", //接收导航栏状态
-				params: {
-					pageNumber: 1,
-					pageSize: 10,
-					tag: "ALL",
-				},
-				orderStatus: [
-					//订单状态
-					{
-						orderStatus: "ALL", //全部
-					},
-					{
-						orderStatus: "WAIT_PAY", //代付款
-					},
-					{
-						orderStatus: "WAIT_SHIP",
-					},
-					{
-						orderStatus: "WAIT_ROG", //待收货
-					},
-					{
-						orderStatus: "COMPLETE", //已完成
-					},
-					{
-						orderStatus: "CANCELLED", //已取消
-					},
-					{
-						orderStatus: "STAY_PICKED_UP", //待自提
-					},
-				],
-				cancelShow: false, //是否显示取消
-				orderSn: "", //ordersn
-				reason: "", //取消原因
-				cancelList: [], //取消列表
-				rogShow: false, //显示是否收货
-			};
-		},
+<script setup lang="ts">
+import { ref, reactive, computed, watch, getCurrentInstance } from 'vue'
+import { onLoad, onShow, onPullDownRefresh, onBackPress } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
+import { getOrderList, cancelOrder, confirmReceipt } from '@/api/order.js'
+import { getClearReason } from '@/api/after-sale.js'
+import LiLiWXPay from '@/js_sdk/lili-pay/wx-pay.js'
+import {
+	unitPrice,
+	parseGoodsImageUrl,
+	tipsToLogin,
+	orderStatusList,
+} from '@/utils/filters.js'
 
-		/**
-		 * 跳转到个人中心
-		 */
-		onBackPress(e) {
-			if (e.from == "backbutton") {
-				uni.switchTab({
-					url: "/pages/tabbar/user/my",
-				});
-				return true; //阻止默认返回行为
-			}
-		},
-		onPullDownRefresh() {
-			if (this.tabCurrentIndex) {
-				this.initData(this.tabCurrentIndex);
-			} else {
-				this.initData(0);
-			}
-			// this.loadData(this.status);
-		},
-		onShow() {
-			if (this.tipsToLogin()) {
-				if (!this.tabCurrentIndex) {
-					this.initData(0);
-				}
-			}
-			// this.loadData(this.status);
-		},
+const store = useStore()
+const { proxy } = getCurrentInstance()!
+const lightColor = computed(() => store.getters.lightColor)
+const mainColor = computed(() => store.getters.mainColor)
 
-		onLoad(options) {
-			/**
-			 * 修复app端点击除全部订单外的按钮进入时不加载数据的问题
-			 * 替换onLoad下代码即可
-			 */
-			let status = Number(options.status);
-			this.status = status;
+interface NavTabItem {
+	state: number
+	text: string
+	loadStatus: string
+	orderList: any[]
+	pageNumber: number
+	loaded?: boolean
+}
 
-			this.tabCurrentIndex = status;
-			// if (status == 0) {
-			//   this.loadData(status);
-			// }
-		},
+const tabCurrentIndex = ref(0)
+const navList = reactive<NavTabItem[]>([
+	{ state: 0, text: '全部', loadStatus: 'more', orderList: [], pageNumber: 1 },
+	{ state: 1, text: '待付款', loadStatus: 'more', orderList: [], pageNumber: 1 },
+	{ state: 2, text: '待发货', loadStatus: 'more', orderList: [], pageNumber: 1 },
+	{ state: 3, text: '待收货', loadStatus: 'more', orderList: [], pageNumber: 1 },
+	{ state: 4, text: '已完成', loadStatus: 'more', orderList: [], pageNumber: 1 },
+	{ state: 5, text: '已取消', loadStatus: 'more', orderList: [], pageNumber: 1 },
+])
 
-		watch: {
-			/**监听更改请求数据 */
-			tabCurrentIndex(val) {
-				this.params.tag = this.orderStatus[val].orderStatus;
-				//切换标签页将所有的页数都重置为1
-				this.navList.forEach((res) => {
-					res.pageNumber = 1;
-					res.loadStatus = "more";
-					res.orderList = [];
-				});
-				this.loadData(val);
-			},
-		},
-		methods: {
-			// 售后
-			applyService(order) {
-				uni.navigateTo({
-					url: `/pages/order/afterSales/afterSales?orderSn=${order.sn}`,
-				});
-			},
+const status = ref<number>(0)
+const params = reactive({
+	pageNumber: 1,
+	pageSize: 10,
+	tag: 'ALL',
+})
 
-			// 店铺详情
-			navigateToStore(val) {
-				uni.navigateTo({
-					url: "/pages/product/shopPage?id=" + val.storeId,
-				});
-			},
-			renderOrderTag(orderPromotionType) {
-				switch (orderPromotionType) {
-					case "NORMAL":
-						return "";
-					case "PINTUAN":
-						return "拼团订单";
-						break;
-					case "GIFT":
-						return "赠品订单";
-						break;
-					case "POINTS":
-						return "积分订单";
-						break;
-					case "KANJIA":
-						return "砍价订单";
-					default:
-						return "";
-				}
-			},
-			renderOrderTagType(orderPromotionType) {
-				switch (orderPromotionType) {
-					case "PINTUAN":
-						return "error";
-					case "GIFT":
-						return "primary";
-					case "POINTS":
-						return "info";
-					case "KANJIA":
-						return "warning";
-					default:
-						return "info";
-				}
-			},
-			getOrderItemImage(goods, order, index) {
-				let image = goods.image;
-				if (!image && order.groupImages) {
-					const images = String(order.groupImages).split(",");
-					image = images[index] || images[0];
-				}
-				return this.parseGoodsImageUrl(image);
-			},
-			/**
-			 * 取消订单
-			 */
-			onCancel(sn) {
-				this.orderSn = sn;
-				this.cancelShow = true;
-				uni.showLoading({
-					title: "加载中",
-				});
-				getClearReason().then((res) => {
-					if (res.data.result.length >= 1) {
-						this.cancelList = res.data.result;
-					}
-					if (this.$store.state.isShowToast) {
-						uni.hideLoading()
-					};
-				});
-			},
+const orderStatus = [
+	{ orderStatus: 'ALL' },
+	{ orderStatus: 'WAIT_PAY' },
+	{ orderStatus: 'WAIT_SHIP' },
+	{ orderStatus: 'WAIT_ROG' },
+	{ orderStatus: 'COMPLETE' },
+	{ orderStatus: 'CANCELLED' },
+	{ orderStatus: 'STAY_PICKED_UP' },
+]
 
-			/**
-			 * 初始化数据
-			 */
-			initData(index) {
-				this.navList[index].pageNumber = 1;
-				this.navList[index].loadStatus = "more";
-				this.navList[index].orderList = [];
-				this.loadData(index);
-			},
+const cancelShow = ref(false)
+const orderSn = ref('')
+const reason = ref('')
+const cancelList = ref<any[]>([])
+const rogShow = ref(false)
 
-			/**
-			 * 等待支付
-			 */
-			waitPay(val) {
-				this.$u.debounce(this.pay(val), 3000);
-			},
+function hideLoadingIfNeeded() {
+	if (store.state.isShowToast) uni.hideLoading()
+}
 
-			/**
-			 * 支付
-			 */
-			pay(val) {
-				if (val.sn) {
-					// #ifdef MP-WEIXIN
-					new LiLiWXPay({
-						sn: val.sn,
-						price: val.flowPrice,
-						orderType: "ORDER",
-					}).pay();
-					// #endif
-					// #ifndef MP-WEIXIN
-					uni.navigateTo({
-						url: "/pages/cart/payment/payOrder?order_sn=" + val.sn,
-					});
-					// #endif
-				}
-			},
+onBackPress((e) => {
+	if (e.from == 'backbutton') {
+		uni.switchTab({ url: '/pages/tabbar/user/my' })
+		return true
+	}
+	return false
+})
 
-			/**
-			 * 获取订单列表
-			 */
-			loadData(index) {
-				this.params.pageNumber = this.navList[index].pageNumber;
-				// this.params.tag = this.orderStatus[index].orderStatus;
-				getOrderList(this.params).then((res) => {
-					uni.stopPullDownRefresh();
-					if (!res.data.success) {
-						this.navList[index].loadStatus = "noMore";
-						return false;
-					}
-					let orderList = res.data.result.records;
-					if (orderList.length == 0) {
-						this.navList[index].loadStatus = "noMore";
-					} else if (orderList.length < 10) {
-						this.navList[index].loadStatus = "noMore";
-					}
-					if (orderList.length > 0) {
-						this.navList[index].orderList =
-							this.navList[index].orderList.concat(orderList);
-						this.navList[index].pageNumber += 1;
-					}
-				});
-			},
-			//swiper 切换监听
-			changeTab(e) {
-				this.tabCurrentIndex = e.target.current;
-			},
-			//顶部tab点击
-			tabClick(index) {
-				this.tabCurrentIndex = index;
-			},
-			//删除订单
-			deleteOrder(index) {
-				uni.showLoading({
-					title: "请稍后",
-				});
-				setTimeout(() => {
-					this.navList[this.tabCurrentIndex].orderList.splice(index, 1);
-					if (this.$store.state.isShowToast) {
-						uni.hideLoading()
-					};
-				}, 600);
-			},
-			//取消订单
-			cancelOrder(item) {
-				uni.showLoading({
-					title: "请稍后",
-				});
-				setTimeout(() => {
-					let {
-						stateTip,
-						stateTipColor
-					} = this.orderStateExp(9);
-					item = Object.assign(item, {
-						state: 9,
-						stateTip,
-						stateTipColor,
-					});
+onPullDownRefresh(() => {
+	if (tabCurrentIndex.value) {
+		initData(tabCurrentIndex.value)
+	} else {
+		initData(0)
+	}
+})
 
-					//取消订单后删除待付款中该项
-					let list = this.navList[1].orderList;
-					let index = list.findIndex((val) => val.id === item.id);
-					index !== -1 && list.splice(index, 1);
-					if (this.$store.state.isShowToast) {
-						uni.hideLoading()
-					};
-				}, 600);
-			},
+onShow(() => {
+	if (tipsToLogin()) {
+		if (!tabCurrentIndex.value) {
+			initData(0)
+		}
+	}
+})
 
-			//订单状态文字和颜色
-			orderStateExp(state) {
-				let stateTip = "",
-					stateTipColor = this.$lightColor;
-				switch (+state) {
-					case 1:
-						stateTip = "待付款";
-						break;
-					case 2:
-						stateTip = "待发货";
-						break;
-					case 9:
-						stateTip = "订单已关闭";
-						stateTipColor = "#909399";
-						break;
+onLoad((options) => {
+	const statusNum = Number(options?.status)
+	status.value = statusNum
+	tabCurrentIndex.value = statusNum
+})
 
-						//更多自定义
-				}
-				return {
-					stateTip,
-					stateTipColor,
-				};
-			},
+watch(tabCurrentIndex, (val) => {
+	params.tag = orderStatus[val].orderStatus
+	navList.forEach((res) => {
+		res.pageNumber = 1
+		res.loadStatus = 'more'
+		res.orderList = []
+	})
+	loadData(val)
+})
 
-			/**
-			 * 跳转到订单详情
-			 */
-			navigateToOrderDetail(sn) {
-				uni.navigateTo({
-					url: "./orderDetail?sn=" + sn,
-				});
-			},
+function applyService(order: any) {
+	uni.navigateTo({
+		url: `/pages/order/afterSales/afterSales?orderSn=${order.sn}`,
+	})
+}
 
-			/**
-			 * 选择取消原因
-			 */
-			reasonChange(reason) {
-				this.reason = reason;
-			},
+function navigateToStore(val: any) {
+	uni.navigateTo({
+		url: '/pages/product/shopPage?id=' + val.storeId,
+	})
+}
 
-			/**
-			 * 提交取消订单（未付款）
-			 */
-			submitCancel() {
-				cancelOrder(this.orderSn, {
-					reason: this.reason
-				}).then((res) => {
-					if (res.data.success) {
-						uni.showToast({
-							title: "订单已取消",
-							duration: 2000,
-							icon: "none",
-						});
-						this.initData(this.tabCurrentIndex);
+function renderOrderTag(orderPromotionType: string) {
+	switch (orderPromotionType) {
+		case 'NORMAL':
+			return ''
+		case 'PINTUAN':
+			return '拼团订单'
+		case 'GIFT':
+			return '赠品订单'
+		case 'POINTS':
+			return '积分订单'
+		case 'KANJIA':
+			return '砍价订单'
+		default:
+			return ''
+	}
+}
 
-						this.cancelShow = false;
-					} else {
-						uni.showToast({
-							title: res.data.message,
-							duration: 2000,
-							icon: "none",
-						});
-						this.cancelShow = false;
-					}
-				});
-			},
+function renderOrderTagType(orderPromotionType: string) {
+	switch (orderPromotionType) {
+		case 'PINTUAN':
+			return 'error'
+		case 'GIFT':
+			return 'primary'
+		case 'POINTS':
+			return 'info'
+		case 'KANJIA':
+			return 'warning'
+		default:
+			return 'info'
+	}
+}
 
-			/**
-			 * 确认收货显示
-			 */
-			onRog(sn) {
-				this.orderSn = sn;
-				this.rogShow = true;
-			},
+function getOrderItemImage(goods: any, order: any, index: number) {
+	let image = goods.image
+	if (!image && order.groupImages) {
+		const images = String(order.groupImages).split(',')
+		image = images[index] || images[0]
+	}
+	return parseGoodsImageUrl(image)
+}
 
-			/**
-			 * 点击确认收货
-			 */
-			confirmRog() {
-				confirmReceipt(this.orderSn).then((res) => {
-					if (res.data.code == 200) {
-						uni.showToast({
-							title: "已确认收货",
-							duration: 2000,
-							icon: "none",
-						});
-						this.initData(this.tabCurrentIndex);
-						this.rogShow = false;
-					}
-				});
-			},
+function onCancel(sn: string) {
+	orderSn.value = sn
+	cancelShow.value = true
+	uni.showLoading({ title: '加载中' })
+	getClearReason().then((res) => {
+		if (res.data.result.length >= 1) {
+			cancelList.value = res.data.result
+		}
+		hideLoadingIfNeeded()
+	})
+}
 
-			/**
-			 * 评价商品
-			 */
-			onComment(sn) {
-				uni.navigateTo({
-					url: "./evaluate/myEvaluate",
-				});
-			},
+function initData(index: number) {
+	navList[index].pageNumber = 1
+	navList[index].loadStatus = 'more'
+	navList[index].orderList = []
+	loadData(index)
+}
 
-			/**
-			 * 重新购买
-			 */
-			reBuy(order) {
-				console.log(order);
-				return;
-				uni.navigateTo({
-					url: "/pages/product/goods?id=" + order.id + "&goodsId=" + order.goodsId,
-				});
-			},
-		},
-	};
+function waitPay(val: any) {
+	proxy?.$u?.debounce?.(() => pay(val), 3000, true)?.()
+}
+
+function pay(val: any) {
+	if (val.sn) {
+		// #ifdef MP-WEIXIN
+		new LiLiWXPay({
+			sn: val.sn,
+			price: val.flowPrice,
+			orderType: 'ORDER',
+		}).pay()
+		// #endif
+		// #ifndef MP-WEIXIN
+		uni.navigateTo({
+			url: '/pages/cart/payment/payOrder?order_sn=' + val.sn,
+		})
+		// #endif
+	}
+}
+
+function loadData(index: number) {
+	params.pageNumber = navList[index].pageNumber
+	getOrderList(params).then((res) => {
+		uni.stopPullDownRefresh()
+		if (!res.data.success) {
+			navList[index].loadStatus = 'noMore'
+			return false
+		}
+		const records = res.data.result.records
+		if (records.length == 0) {
+			navList[index].loadStatus = 'noMore'
+		} else if (records.length < 10) {
+			navList[index].loadStatus = 'noMore'
+		}
+		if (records.length > 0) {
+			navList[index].orderList = navList[index].orderList.concat(records)
+			navList[index].pageNumber += 1
+		}
+	})
+}
+
+function changeTab(e: any) {
+	tabCurrentIndex.value = e.target.current
+}
+
+function tabClick(index: number) {
+	tabCurrentIndex.value = index
+}
+
+function deleteOrder(index: number) {
+	uni.showLoading({ title: '请稍后' })
+	setTimeout(() => {
+		navList[tabCurrentIndex.value].orderList.splice(index, 1)
+		hideLoadingIfNeeded()
+	}, 600)
+}
+
+function cancelOrderLocal(item: any) {
+	uni.showLoading({ title: '请稍后' })
+	setTimeout(() => {
+		const { stateTip, stateTipColor } = orderStateExp(9)
+		Object.assign(item, {
+			state: 9,
+			stateTip,
+			stateTipColor,
+		})
+		const list = navList[1].orderList
+		const idx = list.findIndex((val) => val.id === item.id)
+		if (idx !== -1) list.splice(idx, 1)
+		hideLoadingIfNeeded()
+	}, 600)
+}
+
+function orderStateExp(state: number) {
+	let stateTip = ''
+	let stateTipColor = lightColor.value
+	switch (+state) {
+		case 1:
+			stateTip = '待付款'
+			break
+		case 2:
+			stateTip = '待发货'
+			break
+		case 9:
+			stateTip = '订单已关闭'
+			stateTipColor = '#909399'
+			break
+	}
+	return { stateTip, stateTipColor }
+}
+
+function navigateToOrderDetail(sn: string) {
+	uni.navigateTo({
+		url: './orderDetail?sn=' + sn,
+	})
+}
+
+function reasonChange(val: string) {
+	reason.value = val
+}
+
+function submitCancel() {
+	cancelOrder(orderSn.value, { reason: reason.value }).then((res) => {
+		if (res.data.success) {
+			uni.showToast({
+				title: '订单已取消',
+				duration: 2000,
+				icon: 'none',
+			})
+			initData(tabCurrentIndex.value)
+			cancelShow.value = false
+		} else {
+			uni.showToast({
+				title: res.data.message,
+				duration: 2000,
+				icon: 'none',
+			})
+			cancelShow.value = false
+		}
+	})
+}
+
+function onRog(sn: string) {
+	orderSn.value = sn
+	rogShow.value = true
+}
+
+function confirmRog() {
+	confirmReceipt(orderSn.value).then((res) => {
+		if (res.data.code == 200) {
+			uni.showToast({
+				title: '已确认收货',
+				duration: 2000,
+				icon: 'none',
+			})
+			initData(tabCurrentIndex.value)
+			rogShow.value = false
+		}
+	})
+}
+
+function onComment(_sn: string) {
+	uni.navigateTo({
+		url: './evaluate/myEvaluate',
+	})
+}
+
+function reBuy(order: any) {
+	const goods = order.orderItems?.[0]
+	if (!goods) return
+	uni.navigateTo({
+		url: '/pages/product/goods?id=' + goods.id + '&goodsId=' + goods.goodsId,
+	})
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/order/orderDetail.vue b/pages/order/orderDetail.vue
index 90f2281..d94b44a 100644
--- a/pages/order/orderDetail.vue
+++ b/pages/order/orderDetail.vue
@@ -51,7 +51,7 @@
             <view class="title">自提点地址:</view>
             <view class="value address-line-height">{{ order.storeAddressPath }}</view>
           </view>
-          <view class="order-info-view" @click="callPhone" >
+          <view class="order-info-view" @click="handleCallPhone" >
             <view class="title">联系方式:</view>
             <view class="value">{{ order.storeAddressMobile }}<u-icon name='phone-fill' ></u-icon></view>
           </view>
@@ -245,287 +245,258 @@
   </view>
 </template>
 
-<script>
-import { getExpress, getPackage } from "@/api/trade.js";
-import { cancelOrder, confirmReceipt, getOrderDetail } from "@/api/order.js";
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import { getExpress, getPackage } from '@/api/trade.js'
+import { cancelOrder, confirmReceipt, getOrderDetail } from '@/api/order.js'
+import shares from '@/components/m-share/index'
+import { getClearReason } from '@/api/after-sale.js'
+import {
+	unitPrice,
+	secrecyMobile,
+	setClipboard,
+	talkIm,
+	callPhone,
+} from '@/utils/filters.js'
 
-import shares from "@/components/m-share/index"; //分享
+const store = useStore()
+const lightColor = computed(() => store.getters.lightColor)
+const mainColor = computed(() => store.getters.mainColor)
 
-import { getClearReason } from "@/api/after-sale.js";
+const orderStatusMap: Record<string, { title: string; value?: string }> = {
+	UNPAID: { title: '未付款', value: '商品暂未付款' },
+	PAID: { title: '已付款', value: '买家已付款' },
+	UNDELIVERED: { title: '待发货', value: '商品等待发货中' },
+	PARTS_DELIVERED: { title: '部分发货', value: '商品已部分发货。' },
+	DELIVERED: { title: '已发货', value: '商品已发货,请您耐心等待' },
+	CANCELLED: { title: '已取消', value: '订单已取消' },
+	COMPLETED: { title: '已完成', value: '订单已完成,祝您生活愉快' },
+	STAY_PICKED_UP: { title: '待自提', value: '商品正在等待提取' },
+	TAKE: { title: '待核验' },
+}
 
-export default {
-  components: {
-    shares,
-  },
-  data() {
-    return {
-      lightColor: this.$lightColor,
-      logisticsList: "", //物流信息
-      shareFlag: false, //拼团分享开关
-      orderStatusMap: {
-        UNPAID: {
-          title: "未付款",
-          value: "商品暂未付款",
-        },
-        PAID: {
-          title: "已付款",
-          value: "买家已付款",
-        },
-        UNDELIVERED: {
-          title: "待发货",
-          value: "商品等待发货中",
-        },
-        PARTS_DELIVERED: {
-          title: "部分发货",
-          value: "商品已部分发货。",
-        },
-        DELIVERED: {
-          title: "已发货",
-          value: "商品已发货,请您耐心等待",
-        },
-        CANCELLED: {
-          title: "已取消",
-          value: "订单已取消",
-        },
-        COMPLETED: {
-          title: "已完成",
-          value: "订单已完成,祝您生活愉快",
-        },
-        STAY_PICKED_UP: {
-          title: "待自提",
-          value: "商品正在等待提取",
-        },
-        TAKE: {
-          title: "待核验",
-        },
-      },
-      order: {},
-      cancelShow: false, //取消订单
-      orderSn: "",
-      orderGoodsList: "", //订单中商品集合
-      orderDetail: "", //订单详情信息
-      sn: "",
-      cancelList: "",
-      rogShow: false,
-      reason: "",
-	  orderPackage:"",
-    };
-  },
-  onLoad(options) {
-    this.loadData(options.sn);
-    this.sn = options.sn;
-  },
-  methods: {
-	//获取包裹
-	async getOrderPackage() {
-		getPackage(this.order.sn).then(res => {
-			if (res.data.success) {
-				this.orderPackage = res.data.result
-			}
-		})
-	},
-	handleClickDeliver(){
-		uni.navigateTo({
-			url: `/pages/order/deliverDetail?order_sn=${this.order.sn}`,
-		});
-	},
-	// 退款状态枚举
-	refundPriceList(status) {
-		switch (status) {
-		case 'ALL_REFUND':
-		  return "全部退款";
-		case 'PART_REFUND':
-		  return "部分退款";
-		case 'NO_REFUND':
-		  return "未退款";
-		case 'REFUNDING':
-		  return "退款中";
-		default:
-			return "";
+const logisticsList = ref<any>('')
+const shareFlag = ref(false)
+const order = ref<Record<string, any>>({})
+const cancelShow = ref(false)
+const orderSn = ref('')
+const orderGoodsList = ref<any[]>([])
+const orderDetail = ref<Record<string, any>>({})
+const sn = ref('')
+const cancelList = ref<any[]>([])
+const rogShow = ref(false)
+const reason = ref('')
+const orderPackage = ref<any>('')
+
+function hideLoadingIfNeeded() {
+	if (store.state.isShowToast) uni.hideLoading()
+}
+
+onLoad((options) => {
+	const orderSnParam = options?.sn || ''
+	sn.value = orderSnParam
+	loadData(orderSnParam)
+})
+
+function getOrderPackage() {
+	getPackage(order.value.sn).then((res) => {
+		if (res.data.success) {
+			orderPackage.value = res.data.result
 		}
-	},
-    callPhone(){
-      this.callPhone(this.order.storeAddressMobile )
-    },
-    //联系客服
-    contact(storeId){
-      this.talkIm(storeId)
-    },
-    goToShopPage(val) {
-      uni.navigateTo({
-        url: "/pages/product/shopPage?id=" + val.storeId,
-      });
-    },
-    // 获取物流信息
-    loadLogistics(sn) {
-      getExpress(sn).then((res) => {
-        this.logisticsList = res.data.result;
-      });
-    },
+	})
+}
 
-    // 分享当前拼团信息
-    inviteGroup() {
-      this.shareFlag = true;
-    },
-    // #TODO 这块需要写一下 目前没有拼团的详细信息
-    ByUserMessage(order) {
-      uni.navigateTo({
-        url:
-          "/pages/cart/payment/shareOrderGoods?sn=" +
-          order.sn +
-          "&sku=" +
-          this.orderGoodsList[0].skuId +
-          "&goodsId=" +
-          this.orderGoodsList[0].goodsId,
-      });
-    },
-    async loadData(sn) {
-      uni.showLoading({
-        title: "加载中",
-      });
-      getOrderDetail(sn).then((res) => {
-        const order = res.data.result;
-        this.order = order.order;
-        this.orderGoodsList = order.orderItems;
-        this.orderDetail = res.data.result;
-        if (this.order.deliveryMethod === 'LOGISTICS') {
-          this.loadLogistics(sn);
-		  this.getOrderPackage();
-        }
-         if (this.$store.state.isShowToast){ uni.hideLoading() };
-      });
+function handleClickDeliver() {
+	uni.navigateTo({
+		url: `/pages/order/deliverDetail?order_sn=${order.value.sn}`,
+	})
+}
 
-    },
-    onReceipt(val) {
-      uni.navigateTo({
-        url: "/pages/order/invoice/invoiceDetail?id=" + val.id,
-      });
-    },
-    gotoGoodsDetail(sku) {
-      uni.navigateTo({
-        url: `/pages/product/goods?id=${sku.skuId}&goodsId=${sku.goodsId}`,
-      });
-    },
-    onCopy(sn) {
-      setClipboard(sn)
-    },
+function refundPriceList(status: string) {
+	switch (status) {
+		case 'ALL_REFUND':
+			return '全部退款'
+		case 'PART_REFUND':
+			return '部分退款'
+		case 'NO_REFUND':
+			return '未退款'
+		case 'REFUNDING':
+			return '退款中'
+		default:
+			return ''
+	}
+}
 
-    //售后按钮
-    onAfterSales(sn, sku) {
-      uni.navigateTo({
-        url: `./afterSales/afterSalesSelect?sn=${sn}&sku=${encodeURIComponent(
-          JSON.stringify(sku)
-        )}`,
-      });
-    },
-    // 去支付
-    toPay(val) {
-      val.sn
-        ? uni.navigateTo({
-          url: "/pages/cart/payment/payOrder?order_sn=" + val.sn,
-        })
-        : false;
-    }, //删除订单
-    deleteOrder(index) {
-      uni.showLoading({
-        title: "请稍后",
-      });
-      setTimeout(() => {
-        this.navList[this.tabCurrentIndex].orderList.splice(index, 1);
-         if (this.$store.state.isShowToast){ uni.hideLoading() };
-      }, 600);
-    },
-    //取消订单
-    onCancel(sn) {
-      this.orderSn = sn;
+function handleCallPhone() {
+	if (order.value.storeAddressMobile) {
+		callPhone(order.value.storeAddressMobile)
+	}
+}
 
-      uni.showLoading({
-        title: "加载中",
-      });
-      getClearReason().then((res) => {
-        if (res.data.result.length >= 1) {
-          this.cancelList = res.data.result;
-        }
-         if (this.$store.state.isShowToast){ uni.hideLoading() };
-      });
+function contact(storeId: string) {
+	talkIm(storeId)
+}
 
-      this.cancelShow = true;
-    },
+function goToShopPage(val: any) {
+	uni.navigateTo({
+		url: '/pages/product/shopPage?id=' + val.storeId,
+	})
+}
 
-    //提交取消订单（未付款）
-    submitCancel() {
-      cancelOrder(this.orderSn, { reason: this.reason }).then((res) => {
-        if (res.data.success) {
-          uni.showToast({
-            title: "已取消",
-            duration: 2000,
-            icon: "none",
-          });
-          this.cancelShow = false;
-          setTimeout(() => {
-            uni.reLaunch({
-              url: "/pages/order/myOrder?status=0",
-            });
-          }, 500);
-        } else {
-          uni.showToast({
-            title: res.data.message,
-            duration: 2000,
-            icon: "none",
-          });
-          this.cancelShow = false;
-        }
-      });
-    },
+function loadLogistics(orderSnParam: string) {
+	getExpress(orderSnParam).then((res) => {
+		logisticsList.value = res.data.result
+	})
+}
 
-    //确认收货
-    onRog(sn) {
-      this.orderSn = sn;
-      this.rogShow = true;
-    },
-    confirmRog() {
-      confirmReceipt(this.orderSn).then((res) => {
-        if (res.data.success) {
-          uni.showToast({
-            title: "已确认收货",
-            duration: 2000,
-            icon: "none",
-          });
-          this.rogShow = false;
-          this.loadData(this.sn);
-        }
-      });
-    },
-    //评价商品
-    onComment(sn) {
-      uni.navigateTo({
-        url: "./evaluate/myEvaluate",
-      });
-    }, //查看物流
-    onLogistics(order) {
-      uni.navigateTo({
-        url:
-          "/pages/mine/msgTips/packageMsg/logisticsDetail?logi_id=" +
-          order.logi_id +
-          "&ship_no=" +
-          order.ship_no +
-          "&order_sn=" +
-          order.sn,
-      });
-    },
+function inviteGroup() {
+	shareFlag.value = true
+}
 
-    //选择取消原因
-    reasonChange(reason) {
-      this.reason = reason;
-    },
-    reBuy(order) {
-      uni.navigateTo({
-        url:
-          "/pages/product/goods?id=" + order.id + "&goodsId=" + order.goodsId,
-      });
-    },
-  },
-};
+function ByUserMessage(orderItem: any) {
+	uni.navigateTo({
+		url:
+			'/pages/cart/payment/shareOrderGoods?sn=' +
+			orderItem.sn +
+			'&sku=' +
+			orderGoodsList.value[0].skuId +
+			'&goodsId=' +
+			orderGoodsList.value[0].goodsId,
+	})
+}
+
+function loadData(orderSnParam: string) {
+	uni.showLoading({ title: '加载中' })
+	getOrderDetail(orderSnParam).then((res) => {
+		const result = res.data.result
+		order.value = result.order
+		orderGoodsList.value = result.orderItems
+		orderDetail.value = result
+		if (order.value.deliveryMethod === 'LOGISTICS') {
+			loadLogistics(orderSnParam)
+			getOrderPackage()
+		}
+		hideLoadingIfNeeded()
+	})
+}
+
+function onReceipt(val: any) {
+	uni.navigateTo({
+		url: '/pages/order/invoice/invoiceDetail?id=' + val.id,
+	})
+}
+
+function gotoGoodsDetail(sku: any) {
+	uni.navigateTo({
+		url: `/pages/product/goods?id=${sku.skuId}&goodsId=${sku.goodsId}`,
+	})
+}
+
+function onCopy(orderSnText: string) {
+	setClipboard(orderSnText)
+}
+
+function onAfterSales(orderSnText: string, sku: any) {
+	uni.navigateTo({
+		url: `./afterSales/afterSalesSelect?sn=${orderSnText}&sku=${encodeURIComponent(
+			JSON.stringify(sku)
+		)}`,
+	})
+}
+
+function toPay(val: any) {
+	if (val.sn) {
+		uni.navigateTo({
+			url: '/pages/cart/payment/payOrder?order_sn=' + val.sn,
+		})
+	}
+}
+
+function onCancel(orderSnText: string) {
+	orderSn.value = orderSnText
+	uni.showLoading({ title: '加载中' })
+	getClearReason().then((res) => {
+		if (res.data.result.length >= 1) {
+			cancelList.value = res.data.result
+		}
+		hideLoadingIfNeeded()
+	})
+	cancelShow.value = true
+}
+
+function submitCancel() {
+	cancelOrder(orderSn.value, { reason: reason.value }).then((res) => {
+		if (res.data.success) {
+			uni.showToast({
+				title: '已取消',
+				duration: 2000,
+				icon: 'none',
+			})
+			cancelShow.value = false
+			setTimeout(() => {
+				uni.reLaunch({
+					url: '/pages/order/myOrder?status=0',
+				})
+			}, 500)
+		} else {
+			uni.showToast({
+				title: res.data.message,
+				duration: 2000,
+				icon: 'none',
+			})
+			cancelShow.value = false
+		}
+	})
+}
+
+function onRog(orderSnText: string) {
+	orderSn.value = orderSnText
+	rogShow.value = true
+}
+
+function confirmRog() {
+	confirmReceipt(orderSn.value).then((res) => {
+		if (res.data.success) {
+			uni.showToast({
+				title: '已确认收货',
+				duration: 2000,
+				icon: 'none',
+			})
+			rogShow.value = false
+			loadData(sn.value)
+		}
+	})
+}
+
+function onComment(_orderSnText: string) {
+	uni.navigateTo({
+		url: './evaluate/myEvaluate',
+	})
+}
+
+function onLogistics(orderItem: any) {
+	uni.navigateTo({
+		url:
+			'/pages/mine/msgTips/packageMsg/logisticsDetail?logi_id=' +
+			orderItem.logi_id +
+			'&ship_no=' +
+			orderItem.ship_no +
+			'&order_sn=' +
+			orderItem.sn,
+	})
+}
+
+function reasonChange(val: string) {
+	reason.value = val
+}
+
+function reBuy(orderItem: any) {
+	uni.navigateTo({
+		url: '/pages/product/goods?id=' + orderItem.id + '&goodsId=' + orderItem.goodsId,
+	})
+}
 </script>
 
 <style lang="scss">
diff --git a/pages/passport/article.vue b/pages/passport/article.vue
index 8a401a5..f278c8a 100644
--- a/pages/passport/article.vue
+++ b/pages/passport/article.vue
@@ -10,31 +10,23 @@
   </view>
 </template>
 
-<script>
-import { getArticleDetail } from "@/api/article.js";
-export default {
-  data() {
-    return {
-      // 用于接收上一级通过路径传输的数据
-      routers: "", 
-      // 请求文章接口后存储文章信息
-      articleData: "",
-    };
-  },
-  onLoad(val) {
-    this.routers = val;
-    getArticleDetail(val.id).then((res) => {
-      if (res.data.result) {
-        // 将请求的文章数据赋值
-        this.articleData = res.data.result.content;
-      }
-      // 修改当前NavigationBar(标题头)为文章头部
-      uni.setNavigationBarTitle({
-        title: val.title,
-      });
-    });
-  },
-};
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { getArticleDetail } from '@/api/article.js'
+
+const articleData = ref('')
+
+onLoad((val) => {
+  getArticleDetail(val.id).then((res) => {
+    if (res.data.result) {
+      articleData.value = res.data.result.content
+    }
+    uni.setNavigationBarTitle({
+      title: val.title,
+    })
+  })
+})
 </script>
 <style lang="scss" scoped>
 page {
diff --git a/pages/passport/entry/seller/control.vue b/pages/passport/entry/seller/control.vue
index d6dfee7..9b581c2 100644
--- a/pages/passport/entry/seller/control.vue
+++ b/pages/passport/entry/seller/control.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="seller-control" :style="themeStyle">
     <u-navbar
       :border="false"
       :fixed="true"
@@ -18,56 +18,71 @@
   </div>
 </template>
 
-<script>
-import { getCompanyDetail } from "@/api/entry";
-import step1 from "./step1";
-import step2 from "./step2";
-import step3 from "./step3";
-export default {
-  data() {
-    return {
-      companyData: "",
-      current: 1,
-    };
-  },
-  components: {
-    step1,
-    step2,
-    step3,
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    back() {
-      if (this.current > 1) {
-        this.current--;
-        return;
-      }
-      uni.navigateBack({
-        delta: 1,
-        fail: () => {
-          uni.switchTab({ url: "/pages/tabbar/home/index" });
-        },
-      });
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useStore } from '@/store'
+import { getCompanyDetail } from '@/api/entry'
+import step1 from './step1.vue'
+import step2 from './step2.vue'
+import step3 from './step3.vue'
+import { getThemeStyle } from '@/utils/theme'
+
+const store = useStore()
+
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
+
+const companyData = ref<any>('')
+const current = ref(1)
+
+onMounted(() => {
+  init()
+})
+
+function back() {
+  if (current.value > 1) {
+    current.value--
+    return
+  }
+  uni.navigateBack({
+    delta: 1,
+    fail: () => {
+      uni.switchTab({ url: '/pages/tabbar/home/index' })
     },
-    async init(next) {
-      const res = await getCompanyDetail();
-      if (res.data.success) {
-        this.companyData = res.data.result;
-        next ? this.current++ : "";
-      }
-    },
-    next() {
-      this.init("next");
-    },
-    finished() {
-      uni.navigateTo({
-        url: "/pages/passport/entry/seller/index",
-      });
-    },
-  },
-};
+  })
+}
+
+async function init(next?: string) {
+  const res = await getCompanyDetail()
+  if (res.data.success) {
+    companyData.value = res.data.result
+    if (next) {
+      current.value++
+    }
+  }
+}
+
+function next() {
+  init('next')
+}
+
+function finished() {
+  uni.navigateTo({
+    url: '/pages/passport/entry/seller/index',
+  })
+}
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss">
+page {
+  background: #f7f7f7;
+}
+</style>
+
+<style lang="scss" scoped>
+@import "./entry.scss";
+
+.seller-control {
+  min-height: 100vh;
+  background: #f7f7f7;
+}
+</style>
diff --git a/pages/passport/entry/seller/entry-form.scss b/pages/passport/entry/seller/entry-form.scss
new file mode 100644
index 0000000..fd3cc81
--- /dev/null
+++ b/pages/passport/entry/seller/entry-form.scss
@@ -0,0 +1,92 @@
+@mixin seller-entry-form {
+  :deep(.u-form-item) {
+    padding: 0;
+    margin-top: 24rpx;
+  }
+
+  :deep(.u-form-item__body) {
+    flex-direction: column !important;
+    align-items: stretch !important;
+    padding: 0;
+  }
+
+  :deep(.u-form-item__body__left) {
+    width: 100% !important;
+    margin-bottom: 16rpx;
+  }
+
+  :deep(.u-form-item__body__left__content__label) {
+    display: block;
+    font-size: 30rpx;
+    font-weight: 600;
+    color: #333;
+    line-height: 1.4;
+    white-space: normal;
+  }
+
+  :deep(.u-form-item__body__right),
+  :deep(.u-form-item__body__right__content),
+  :deep(.u-form-item__body__right__content__slot) {
+    width: 100%;
+    flex: none;
+    min-width: 0;
+  }
+
+  :deep(.u-form-item__body__right__content__slot) {
+    display: block;
+  }
+
+  .field-input {
+    width: 100%;
+    margin-top: 0;
+  }
+
+  .field-row {
+    display: flex;
+    align-items: center;
+    gap: 16rpx;
+    width: 100%;
+  }
+
+  .field-row .field-input {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .field-textarea {
+    width: 100%;
+
+    :deep(.u-textarea) {
+      background: #fafafa !important;
+      border-radius: 12rpx;
+      padding: 20rpx;
+      box-sizing: border-box;
+    }
+
+    :deep(.u-textarea__field) {
+      width: 100%;
+      font-size: 28rpx;
+      line-height: 1.6;
+      color: #333;
+    }
+  }
+}
+
+@mixin seller-entry-submit {
+  text-align: center;
+  background: var(--theme-light, #ff6b35);
+  height: 88rpx;
+  line-height: 88rpx;
+  color: #fff;
+  width: 92%;
+  margin: 40rpx auto 60rpx;
+  border-radius: 100px;
+  font-size: 30rpx;
+}
+
+.picker-action {
+  flex-shrink: 0;
+  color: var(--theme-light, #ff6b35);
+  font-size: 28rpx;
+  white-space: nowrap;
+}
diff --git a/pages/passport/entry/seller/entry.scss b/pages/passport/entry/seller/entry.scss
index 01d8c6c..3fb8e54 100644
--- a/pages/passport/entry/seller/entry.scss
+++ b/pages/passport/entry/seller/entry.scss
@@ -1,18 +1,28 @@
 .flag-title {
-    font-size: 42rpx;
-    font-weight: bold;
+  font-size: 30rpx;
+  font-weight: 600;
+  color: #333;
+  line-height: 1.4;
+  margin-bottom: 8rpx;
 }
-.submit,
-.notice {
-  font-weight: bold;
-  font-size: 28rpx;
 
-  height: 92rpx;
-  text-align: center;
-  letter-spacing: 4rpx;
-  line-height: 92rpx;
+.wrapper {
+  box-sizing: border-box;
+  min-height: 100vh;
+  padding: 20rpx 24rpx 40rpx;
+  background: #f8f8f8;
+}
+
+.column {
+  padding: 32rpx;
+  margin-bottom: 20rpx;
+  background: #fff;
   border-radius: 20rpx;
 }
-.wrapper {
-  padding:16rpx;
-}
\ No newline at end of file
+
+.tips {
+  color: #999;
+  font-size: 24rpx;
+  line-height: 1.4;
+  margin-top: 12rpx;
+}
diff --git a/pages/passport/entry/seller/index.vue b/pages/passport/entry/seller/index.vue
index 3c456fb..3ececcc 100644
--- a/pages/passport/entry/seller/index.vue
+++ b/pages/passport/entry/seller/index.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="wrapper">
-       <u-navbar
-         :border="false"
-         :fixed="true"
-         :placeholder="true"
-         :auto-back="true"
-       ></u-navbar>
-    <div>
+  <div class="wrapper" :style="themeStyle">
+    <u-navbar
+      :border="false"
+      :fixed="true"
+      :placeholder="true"
+      :auto-back="true"
+    ></u-navbar>
+    <div class="entry-content">
       <div class="title">店铺入驻</div>
       <div class="step-list">
         <div
@@ -24,144 +24,164 @@
   </div>
 </template>
 
-<script>
-import { getCompanyDetail } from "@/api/entry";
-export default {
-  components: {},
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { onLoad, onShow } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import { tipsToLogin } from '@/utils/filters.js'
+import { getCompanyDetail } from '@/api/entry'
+import { getThemeStyle } from '@/utils/theme'
 
-  data() {
-    return {
-      current: 999,
-      entrySteps: [
-        {
-          title: "填写资质信息",
-          value: "APPLY",
-        },
-        {
-          title: "提交审核",
-          value: "APPLYING",
-        },
-      ],
+const store = useStore()
 
-      storeStatusWay: [
-        {
-          title: "申请已通过，请联系管理员",
-          value: "OPEN",
-        },
-        {
-          title: "店铺已关闭，重申请联系管理员",
-          value: "CLOSED",
-        },
-        {
-          title: "审核未通过,请修改资质信息",
-          value: "REFUSED",
-        },
-      ],
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 
-      companyData: "", // 公司信息
-    };
+const current = ref(999)
+const companyData = ref<any>('')
+
+const entrySteps = ref([
+  {
+    title: '填写资质信息',
+    value: 'APPLY',
   },
-  onShow() {
-    if(this.tipsToLogin()){
-        this.init();
-    }
+  {
+    title: '提交审核',
+    value: 'APPLYING',
   },
+])
 
-  mounted() {},
+const storeStatusWay = [
+  {
+    title: '申请已通过，请联系管理员',
+    value: 'OPEN',
+  },
+  {
+    title: '店铺已关闭，重申请联系管理员',
+    value: 'CLOSED',
+  },
+  {
+    title: '审核未通过,请修改资质信息',
+    value: 'REFUSED',
+  },
+]
 
-  onLoad(options) {},
-  methods: {
-    getEntryNotice() {
-      uni.navigateTo({
-        url: "/pages/mine/help/tips?type=STORE_REGISTER",
-      });
+onShow(() => {
+  if (tipsToLogin()) {
+    init()
+  }
+})
+
+onLoad(() => {})
+
+function getEntryNotice() {
+  uni.navigateTo({
+    url: '/pages/mine/help/tips?type=STORE_REGISTER',
+  })
+}
+
+function keepOn() {
+  if (companyData.value && companyData.value.storeDisable == 'OPEN') {
+    uni.showToast({
+      title: '审核已通过',
+      icon: 'none',
+    })
+  } else {
+    uni.navigateTo({
+      url: '/pages/passport/entry/seller/control',
+    })
+  }
+}
+
+async function init() {
+  entrySteps.value = [
+    {
+      title: '填写资质信息',
+      value: 'APPLY',
     },
-    keepOn() {
-      if (this.companyData && this.companyData.storeDisable == "OPEN") {
-        uni.showToast({
-          title:"审核已通过",
-          icon:"none"
-        })
-      } else {
-        uni.navigateTo({
-          url: "/pages/passport/entry/seller/control",
-        });
-      }
+    {
+      title: '提交审核',
+      value: 'APPLYING',
     },
-    async init() {
-      this.entrySteps = [
-        {
-          title: "填写资质信息",
-          value: "APPLY",
-        },
-        {
-          title: "提交审核",
-          value: "APPLYING",
-        },
-      ];
-      const res = await getCompanyDetail();
-      if (res.data.success) {
-        this.companyData = res.data.result;
+  ]
+  const res = await getCompanyDetail()
+  if (res.data.success) {
+    companyData.value = res.data.result
 
-        if (this.companyData) {
-          this.storeStatusWay.forEach((item) => {
-            if (item.value == this.companyData.storeDisable) {
-              this.entrySteps.push(item);
-            }
-          });
-
-          this.current =
-            this.entrySteps.findIndex(
-              (item) => item.value == this.companyData.storeDisable
-            ) || 0;
-        } else {
-          this.current = 0;
+    if (companyData.value) {
+      storeStatusWay.forEach((item) => {
+        if (item.value == companyData.value.storeDisable) {
+          entrySteps.value.push(item)
         }
-      }
-    },
-  },
-};
+      })
+
+      current.value =
+        entrySteps.value.findIndex(
+          (item) => item.value == companyData.value.storeDisable
+        ) || 0
+    } else {
+      current.value = 0
+    }
+  }
+}
 </script>
-<style>
+<style lang="scss">
 page {
   background: #fff;
 }
 </style>
 <style lang="scss" scoped>
-@import url("./entry.scss");
 .wrapper {
-  padding: 0 80rpx;
+  min-height: 100vh;
+  background: #fff;
+  box-sizing: border-box;
+}
+
+.entry-content {
+  padding: 32rpx 80rpx calc(40rpx + env(safe-area-inset-bottom));
+  box-sizing: border-box;
 }
 
 .title {
-  padding-top: calc(104rpx);
-  font-style: normal;
-  line-height: 1;
+  line-height: 1.2;
   font-weight: 500;
   font-size: 56rpx;
   color: #333;
-  padding-left: 20rpx;
 }
+
+.step-list {
+  margin: 80rpx 0;
+}
+
 .step-item {
   padding: 30rpx 20rpx;
   font-size: 40rpx;
   font-weight: bold;
   color: #666;
 }
-.step-list {
-  margin: 80rpx 0;
-  overflow: hidden;
-}
-.active {
-  color: $light-color;
-  background: rgba($color: $light-color, $alpha: 0.1);
+
+.step-item.active {
+  color: var(--theme-light, #ff6b35);
+  background: var(--theme-light-10, rgba(255, 107, 53, 0.1));
   border-radius: 20rpx;
 }
+
+.submit,
+.notice {
+  font-weight: bold;
+  font-size: 28rpx;
+  height: 92rpx;
+  text-align: center;
+  letter-spacing: 4rpx;
+  line-height: 92rpx;
+  border-radius: 20rpx;
+}
+
 .submit {
   color: #fff;
   margin-top: 120rpx;
-  background: rgba($light-color, 0.8);
+  background: var(--theme-light, #ff6b35);
 }
+
 .notice {
   margin-top: 40rpx;
   color: #333;
diff --git a/pages/passport/entry/seller/step1.vue b/pages/passport/entry/seller/step1.vue
index 02aa49f..ebe20c1 100644
--- a/pages/passport/entry/seller/step1.vue
+++ b/pages/passport/entry/seller/step1.vue
@@ -1,113 +1,118 @@
 <template>
-  <div class="wrapper">
-    <u-form label-width="200" :model="form" ref="uForm">
+  <div class="wrapper" :style="themeStyle">
+    <up-form label-position="top" :model="form" ref="uForm">
       <div class="column">
         <div class="flag-title light-color">基础信息</div>
-        <u-form-item
+        <up-form-item
           required
           :border-bottom="false"
           prop="companyName"
           label="公司名称"
-          ><u-input
+          ><u-input border="none" class="field-input"
             v-model="form.companyName"
-            :custom-style="defaultInputStyle"
-        /></u-form-item>
-        <u-form-item
+            :custom-style="fieldInputStyle"
+        /></up-form-item>
+        <up-form-item
           required
           :border-bottom="false"
           prop="companyAddressPath"
           label="公司所在地"
           >
-          <div @click="showPicker()" style="margin-right: 30rpx;">选择</div>
-          <u-input
-            disabled
-            :custom-style="defaultInputStyle"
-            v-model="form.companyAddressPath"
-        /></u-form-item>
-        <u-form-item
+          <view class="field-row">
+            <u-input
+              disabled
+              border="none"
+              class="field-input"
+              :custom-style="fieldInputStyle"
+              v-model="form.companyAddressPath"
+            />
+            <view class="picker-action" @click="showPicker()">选择</view>
+          </view>
+        </up-form-item>
+        <up-form-item
           required
           :border-bottom="false"
           prop="companyAddress"
           label="公司详细地址"
-          ><u-input
-            :custom-style="defaultInputStyle"
+          ><u-input border="none" class="field-input"
+            :custom-style="fieldInputStyle"
             v-model="form.companyAddress"
-        /></u-form-item>
-        <u-form-item
+        /></up-form-item>
+        <up-form-item
           required
           :border-bottom="false"
           prop="employeeNum"
           label="员工人数"
-          ><u-input
+          ><u-input border="none" class="field-input"
             type="number"
-            :custom-style="defaultInputStyle"
+            :custom-style="fieldInputStyle"
             v-model="form.employeeNum"
-        /></u-form-item>
+        /></up-form-item>
 
-        <u-form-item
+        <up-form-item
           required
           :border-bottom="false"
           prop="companyPhone"
           label="公司电话"
-          ><u-input
+          ><u-input border="none" class="field-input"
             type="number"
-            :custom-style="defaultInputStyle"
+            :custom-style="fieldInputStyle"
             v-model="form.companyPhone"
-        /></u-form-item>
-        <u-form-item
+        /></up-form-item>
+        <up-form-item
           :border-bottom="false"
           prop="registeredCapital"
           label="注册资金"
           required
-          ><u-input
+          ><u-input border="none" class="field-input"
             type="number"
-            :custom-style="defaultInputStyle"
+            :custom-style="fieldInputStyle"
             v-model="form.registeredCapital"
-        /></u-form-item>
-        <u-form-item
+        /></up-form-item>
+        <up-form-item
           required
           :border-bottom="false"
           prop="linkName"
           label="联系人姓名"
-          ><u-input :custom-style="defaultInputStyle" v-model="form.linkName"
-        /></u-form-item>
-        <u-form-item
+          ><u-input border="none" class="field-input" :custom-style="fieldInputStyle" v-model="form.linkName"
+        /></up-form-item>
+        <up-form-item
           required
           :border-bottom="false"
           prop="linkPhone"
           label="联系人电话"
-          ><u-input
+          ><u-input border="none" class="field-input"
             type="number"
-            :custom-style="defaultInputStyle"
+            :custom-style="fieldInputStyle"
             v-model="form.linkPhone"
-        /></u-form-item>
-        <u-form-item
+        /></up-form-item>
+        <up-form-item
           required
           :border-bottom="false"
           prop="companyEmail"
           label="电子邮箱"
-          ><u-input
-            :custom-style="defaultInputStyle"
+          ><u-input border="none" class="field-input"
+            :custom-style="fieldInputStyle"
             v-model="form.companyEmail"
-        /></u-form-item>
+        /></up-form-item>
       </div>
       <div class="column">
         <div class="flag-title light-color">营业执照信息</div>
-        <u-form-item
+        <up-form-item
           required
           :border-bottom="false"
           prop="licenseNum"
           label="营业执照号"
-          ><u-input :custom-style="defaultInputStyle" v-model="form.licenseNum"
-        /></u-form-item>
-        <u-form-item
+          ><u-input border="none" class="field-input" :custom-style="fieldInputStyle" v-model="form.licenseNum"
+        /></up-form-item>
+        <up-form-item
           required
           :border-bottom="false"
           prop="scope"
           label="法定经营范围"
-          ><u-input :custom-style="defaultInputStyle" v-model="form.scope"
-        /></u-form-item>
-        <u-form-item
+          ><u-input border="none" class="field-input" :custom-style="fieldInputStyle" v-model="form.scope"
+        /></up-form-item>
+        <up-form-item
           :border-bottom="false"
           prop="licencePhoto"
           label="营业执照电子版"
@@ -126,25 +131,25 @@
               请压缩图片在2M以内，确保文字清晰以免上传或审核失败
             </div>
           </div>
-        </u-form-item>
+        </up-form-item>
       </div>
       <div class="column">
         <div class="flag-title light-color">法人信息</div>
-        <u-form-item
+        <up-form-item
           required
           :border-bottom="false"
           prop="legalName"
           label="法人姓名"
-          ><u-input :custom-style="defaultInputStyle" v-model="form.legalName"
-        /></u-form-item>
-        <u-form-item
+          ><u-input border="none" class="field-input" :custom-style="fieldInputStyle" v-model="form.legalName"
+        /></up-form-item>
+        <up-form-item
           required
           :border-bottom="false"
           prop="legalId"
           label="法人证件号"
-          ><u-input :custom-style="defaultInputStyle" v-model="form.legalId"
-        /></u-form-item>
-        <u-form-item
+          ><u-input border="none" class="field-input" :custom-style="fieldInputStyle" v-model="form.legalId"
+        /></up-form-item>
+        <up-form-item
           required
           :border-bottom="false"
           prop="legalPhoto"
@@ -166,11 +171,10 @@
               :max-count="1"
             ></u-upload>
           </div>
-        </u-form-item>
-        {{form}}
+        </up-form-item>
       </div>
-    </u-form>
-    <div class="submit" @click="validatorStep1Form">提交/下一步</div>
+    </up-form>
+    <view class="submit" @click="validatorStep1Form">提交/下一步</view>
     <m-city
       :provinceData="list"
       headTitle="区域选择"
@@ -182,234 +186,222 @@
   </div>
 </template>
 
-<script>
-import { applyFirst } from "@/api/entry";
-import city from "@/components/m-city/m-city.vue";
-import storage from "@/utils/storage.js";
-import { handleUploadAfterRead, getUploadedUrls } from "@/utils/uploadHelper.js";
-import * as RegExp from "@/utils/RegExp.js";
-export default {
-  components: { "m-city": city },
-  data() {
-    return {
-      storage,
-      defaultInputStyle: {
-        background: "#f7f7f7",
-        padding: "0 20rpx",
-        "border-radius": "10rpx",
-      },
-      legalPhotoFileList: [],
-      legalPhotoBackFileList: [],
-      licencePhotoFileList: [],
-      form: {
-        companyName: "",
-        companyAddressIdPath: [],
-        companyAddressPath: "",
-        companyAddress: "",
-        employeeNum: "",
-        registeredCapital: "",
-        linkName: "",
-        linkPhone: "",
-        companyPhone: "",
-        companyEmail: "",
-        licenseNum: "",
-        scope: "",
-        legalPhoto: "",
-        licencePhoto: "",
-        legalName: "",
-        legalId: "",
-      },
-      list: [
-        {
-          id: "",
-          localName: "请选择",
-          children: [],
-        },
-      ],
-      rules: {
-        // 验证规则
-        companyName: [{ required: true, message: "请填写公司信息" }],
-        companyAddressPath: [{ required: true, message: "请选择公司所在地" }],
-        companyAddress: [{ required: true, message: "请填写公司详细地址" }],
-        employeeNum: [{ required: true, message: "请填写公司员工总数" }],
-        registeredCapital: [{ required: true, message: "请填写公司注册资金" }],
-        linkName: [{ required: true, message: "请填写联系人姓名" }],
-        linkPhone: [
-          { required: true, message: "请填写联系人电话" },
-          {
-            // 自定义验证函数，见上说明
-            validator: (rule, value, callback) => {
-              // 上面有说，返回true表示校验通过，返回false表示不通过
-              // this.$u.test.mobile()就是返回true或者false的
-              return this.$u.test.mobile(value);
-            },
-            message: "手机号码不正确",
-            // 触发器可以同时用blur和change
-            trigger: ["change", "blur"],
-          },
-        ],
-        companyPhone: [
-          { required: true, message: "请填写公司电话" },
-          {
-            // 自定义验证函数，见上说明
-            validator: (rule, value, callback) => {
-              // 上面有说，返回true表示校验通过，返回false表示不通过
-              // this.$u.test.mobile()就是返回true或者false的
-              return this.$u.test.mobile(value);
-            },
-            message: "请填写正确的号码",
-            // 触发器可以同时用blur和change
-            trigger: ["change", "blur"],
-          },
-        ],
-        companyEmail: [
-          { required: true, message: "请填写电子邮箱" },
-          {
-            // 自定义验证函数，见上说明
-            validator: (rule, value, callback) => {
-              // 上面有说，返回true表示校验通过，返回false表示不通过
-              // this.$u.test.mobile()就是返回true或者false的
-              return this.$u.test.email(value);
-            },
-            message: "请填写正确的电子邮箱",
-            // 触发器可以同时用blur和change
-            trigger: ["change", "blur"],
-          },
-        ],
-        licenseNum: [
-          { required: true, message: "请填写营业执照号" },
-          { pattern: RegExp.licenseNum, message: "请输入正确的营业执照号" },
-        ],
-        scope: [{ required: true, message: "请填写营业执照所示经营范围" }],
-        legalPhoto: [{ required: true, message: "请上传法人身份证照片" },
-          {
-            // 自定义验证函数，见上说明
-            validator: (rule, value, callback) => {
-              // 上面有说，返回true表示校验通过，返回false表示不通过
-              // this.$u.test.mobile()就是返回true或者false的
-              return value.length === 2;
-            },
-            message: "请上传法人身份证正反照片",
-            // 触发器可以同时用blur和change
-            trigger: ["change", "blur"],
-          }],
-        licencePhoto: [{ required: true, message: "请上传营业执照" }],
-        legalName: [{ required: true, message: "请输入法人姓名" }],
-        legalId: [
-          { required: true, message: "请输入法人证件号" },
-          { pattern: RegExp.IDCard, message: "请输入正确的证件号" },
-        ],
-      },
-    };
+<script setup lang="ts">
+import { ref, reactive, computed, watch, getCurrentInstance } from 'vue'
+import { onReady } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import { applyFirst } from '@/api/entry'
+import MCity from '@/components/m-city/m-city.vue'
+import { handleUploadAfterRead, getUploadedUrls } from '@/utils/uploadHelper.js'
+import * as RegExp from '@/utils/RegExp.js'
+import { getThemeStyle } from '@/utils/theme'
+import { fieldInputStyle } from '@/utils/form-style.js'
+
+const props = defineProps<{ companyData?: any }>()
+const emit = defineEmits<{ callback: [] }>()
+
+const store = useStore()
+const { proxy } = getCurrentInstance()!
+
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
+
+const uForm = ref<any>(null)
+const cityPicker = ref<any>(null)
+
+const legalPhotoFileList = ref<any[]>([])
+const legalPhotoBackFileList = ref<any[]>([])
+const licencePhotoFileList = ref<any[]>([])
+
+const form = reactive<Record<string, any>>({
+  companyName: '',
+  companyAddressIdPath: [],
+  companyAddressPath: '',
+  companyAddress: '',
+  employeeNum: '',
+  registeredCapital: '',
+  linkName: '',
+  linkPhone: '',
+  companyPhone: '',
+  companyEmail: '',
+  licenseNum: '',
+  scope: '',
+  legalPhoto: '',
+  licencePhoto: '',
+  legalName: '',
+  legalId: '',
+})
+
+const list = ref([
+  {
+    id: '',
+    localName: '请选择',
+    children: [],
   },
-  mounted() {
-    this.$refs.uForm.setRules(this.rules);
-  },
-  props: ["companyData"],
-  watch: {
-    companyData: {
-      handler(val) {
-        if (val) {
-          this["form"] = val;
-          // 给图片赋值
-          const judgeDeepPhoto = ["legalPhoto", "licencePhoto"];
-          judgeDeepPhoto.forEach((key) => {
-            if (this.form[key]) {
-              this.form[key].split(",").forEach((item) => {
-                this[`${key}FileList`].push({ url: item });
-              });
-            }
-          });
-        }
-      },
-      deep: true,
+])
+
+const rules = {
+  companyName: [{ required: true, message: '请填写公司信息' }],
+  companyAddressPath: [{ required: true, message: '请选择公司所在地' }],
+  companyAddress: [{ required: true, message: '请填写公司详细地址' }],
+  employeeNum: [{ required: true, message: '请填写公司员工总数' }],
+  registeredCapital: [{ required: true, message: '请填写公司注册资金' }],
+  linkName: [{ required: true, message: '请填写联系人姓名' }],
+  linkPhone: [
+    { required: true, message: '请填写联系人电话' },
+    {
+      validator: (_rule: unknown, value: string) => proxy.$u.test.mobile(value),
+      message: '手机号码不正确',
+      trigger: ['change', 'blur'],
     },
-  },
-  methods: {
-    onUploadAfterRead(event, key, fileListKey) {
-      if (!Array.isArray(this.form[key])) {
-        this.form[key] = [];
+  ],
+  companyPhone: [
+    { required: true, message: '请填写公司电话' },
+    {
+      validator: (_rule: unknown, value: string) => proxy.$u.test.mobile(value),
+      message: '请填写正确的号码',
+      trigger: ['change', 'blur'],
+    },
+  ],
+  companyEmail: [
+    { required: true, message: '请填写电子邮箱' },
+    {
+      validator: (_rule: unknown, value: string) => proxy.$u.test.email(value),
+      message: '请填写正确的电子邮箱',
+      trigger: ['change', 'blur'],
+    },
+  ],
+  licenseNum: [
+    { required: true, message: '请填写营业执照号' },
+    { pattern: RegExp.licenseNum, message: '请输入正确的营业执照号' },
+  ],
+  scope: [{ required: true, message: '请填写营业执照所示经营范围' }],
+  legalPhoto: [
+    { required: true, message: '请上传法人身份证照片' },
+    {
+      validator: (_rule: unknown, value: string | string[]) =>
+        Array.isArray(value) ? value.length === 2 : false,
+      message: '请上传法人身份证正反照片',
+      trigger: ['change', 'blur'],
+    },
+  ],
+  licencePhoto: [{ required: true, message: '请上传营业执照' }],
+  legalName: [{ required: true, message: '请输入法人姓名' }],
+  legalId: [
+    { required: true, message: '请输入法人证件号' },
+    { pattern: RegExp.IDCard, message: '请输入正确的证件号' },
+  ],
+}
+
+watch(
+  () => props.companyData,
+  (val) => {
+    if (val) {
+      Object.assign(form, val)
+      const judgeDeepPhoto = ['legalPhoto', 'licencePhoto'] as const
+      const fileListMap = {
+        legalPhoto: legalPhotoFileList,
+        licencePhoto: licencePhotoFileList,
       }
-      handleUploadAfterRead(event, this[fileListKey], () => {
-        if (key === "legalPhoto") {
-          this.form[key] = [
-            ...getUploadedUrls(this.legalPhotoFileList),
-            ...getUploadedUrls(this.legalPhotoBackFileList),
-          ];
-        } else {
-          this.form[key] = getUploadedUrls(this[fileListKey]);
+      judgeDeepPhoto.forEach((key) => {
+        if (form[key]) {
+          form[key].split(',').forEach((item: string) => {
+            fileListMap[key].value.push({ url: item })
+          })
         }
-      });
-    },
-    getPickerParentValue(e) {
-      this.form.companyAddressIdPath = [];
-
-      let name = "";
-      e.forEach((item, index) => {
-        if (item.id) {
-          // 遍历数据
-          this.form.companyAddressIdPath.push(item.id);
-          if (index == e.length - 1) {
-            name += item.localName;
-          } else {
-            name += item.localName + ",";
-          }
-          this.form.companyAddressPath = name;
-        }
-      });
-    },
-    // 显示三级地址联动
-    showPicker() {
-      console.log(this.$refs)
-      this.$refs.cityPicker.show();
-    },
-    validatorStep1Form() {
-      this.$refs.uForm.validate(async (valid) => {
-        console.log(valid);
-        if (valid) {
-          const params = { ...this.form };
-
-          params.legalPhoto = params.legalPhoto.toString();
-          params.licencePhoto = params.licencePhoto.toString();
-          params.companyAddressIdPath = params.companyAddressIdPath.toString();
-          delete params.complexAddress;
-
-          const res = await applyFirst(params);
-          if (res.data.success) {
-            uni.showToast({
-              title: "提交成功!",
-              icon: "none",
-            });
-            this.$emit("callback");
-          }
-        }
-      });
-    },
+      })
+    }
   },
-};
+  { deep: true }
+)
+
+onReady(() => {
+  uForm.value?.setRules(rules)
+})
+
+function onUploadAfterRead(
+  event: any,
+  key: string,
+  fileListKey: 'licencePhotoFileList' | 'legalPhotoFileList' | 'legalPhotoBackFileList'
+) {
+  const fileListMap = {
+    licencePhotoFileList,
+    legalPhotoFileList,
+    legalPhotoBackFileList,
+  }
+
+  if (!Array.isArray(form[key])) {
+    form[key] = []
+  }
+
+  handleUploadAfterRead(event, fileListMap[fileListKey].value, () => {
+    if (key === 'legalPhoto') {
+      form[key] = [
+        ...getUploadedUrls(legalPhotoFileList.value),
+        ...getUploadedUrls(legalPhotoBackFileList.value),
+      ]
+    } else {
+      form[key] = getUploadedUrls(fileListMap[fileListKey].value)
+    }
+  })
+}
+
+function getPickerParentValue(e: any[]) {
+  form.companyAddressIdPath = []
+
+  let name = ''
+  e.forEach((item, index) => {
+    if (item.id) {
+      form.companyAddressIdPath.push(item.id)
+      if (index == e.length - 1) {
+        name += item.localName
+      } else {
+        name += item.localName + ','
+      }
+      form.companyAddressPath = name
+    }
+  })
+}
+
+function showPicker() {
+  cityPicker.value?.show()
+}
+
+function validatorStep1Form() {
+  uForm.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      const params = { ...form }
+
+      params.legalPhoto = params.legalPhoto.toString()
+      params.licencePhoto = params.licencePhoto.toString()
+      params.companyAddressIdPath = params.companyAddressIdPath.toString()
+      delete params.complexAddress
+
+      const res = await applyFirst(params)
+      if (res.data.success) {
+        uni.showToast({
+          title: '提交成功!',
+          icon: 'none',
+        })
+        emit('callback')
+      }
+    }
+  })
+}
 </script>
-<style>
-/* page {
-  background: #fff;
-} */
+<style lang="scss">
+page {
+  background: #f8f8f8;
+}
 </style>
 <style lang="scss" scoped>
-@import url("./entry.scss");
+@import "./entry.scss";
+@import "./entry-form.scss";
 
-.column {
-  padding: 32rpx;
-  margin-bottom: 20rpx;
-  background: #fff;
+.wrapper {
+  @include seller-entry-form;
 }
+
 .submit {
-  color: #fff;
-  margin-top: 120rpx;
-  background: rgba($light-color, 0.8);
-}
-.tips {
-  color: #999;
-  font-size: 24rpx;
-  line-height: 1.2;
-  margin-top: 10rpx;
+  @include seller-entry-submit;
 }
 </style>
diff --git a/pages/passport/entry/seller/step2.vue b/pages/passport/entry/seller/step2.vue
index e53c83d..804f3e1 100644
--- a/pages/passport/entry/seller/step2.vue
+++ b/pages/passport/entry/seller/step2.vue
@@ -1,144 +1,135 @@
 <template>
-  <div class="wrapper">
-    <u-form label-width="250" :model="form" ref="uForm">
+  <div class="wrapper" :style="themeStyle">
+    <up-form label-position="top" :model="form" ref="uForm">
       <div class="column">
         <div class="flag-title light-color">基础信息</div>
-        <u-form-item
+        <up-form-item
           required
           :border-bottom="false"
           prop="settlementBankAccountName"
           label="银行开户名"
-          ><u-input
+          ><u-input border="none" class="field-input"
             v-model="form.settlementBankAccountName"
-            :custom-style="defaultInputStyle"
-        /></u-form-item>
+            :custom-style="fieldInputStyle"
+        /></up-form-item>
 
-        <u-form-item
+        <up-form-item
           required
           :border-bottom="false"
           prop="settlementBankAccountNum"
           label="银行账号"
-          ><u-input
-            :custom-style="defaultInputStyle"
+          ><u-input border="none" class="field-input"
+            :custom-style="fieldInputStyle"
             v-model="form.settlementBankAccountNum"
-        /></u-form-item>
-        <u-form-item
+        /></up-form-item>
+        <up-form-item
           required
           :border-bottom="false"
           prop="settlementBankBranchName"
           label="开户银行支行名称"
-          ><u-input
-            :custom-style="defaultInputStyle"
+          ><u-input border="none" class="field-input"
+            :custom-style="fieldInputStyle"
             v-model="form.settlementBankBranchName"
-        /></u-form-item>
+        /></up-form-item>
 
-        <u-form-item
+        <up-form-item
           required
           :border-bottom="false"
           prop="settlementBankJointName"
           label="支行联行号"
-          ><u-input
-            :custom-style="defaultInputStyle"
+          ><u-input border="none" class="field-input"
+            :custom-style="fieldInputStyle"
             v-model="form.settlementBankJointName"
-        /></u-form-item>
+        /></up-form-item>
       </div>
-    </u-form>
-    <div class="submit" @click="validatorStep2Form">提交/下一步</div>
+    </up-form>
+    <view class="submit" @click="validatorStep2Form">提交/下一步</view>
   </div>
 </template>
 
-<script>
-import { applySecond } from "@/api/entry";
+<script setup lang="ts">
+import { ref, reactive, computed, watch } from 'vue'
+import { onReady } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import { applySecond } from '@/api/entry'
+import { getThemeStyle } from '@/utils/theme'
+import { fieldInputStyle } from '@/utils/form-style.js'
 
-export default {
-  data() {
-    return {
-      defaultInputStyle: {
-        background: "#f7f7f7",
-        padding: "0 20rpx",
-        "border-radius": "10rpx",
-      },
-      form: {
-        settlementBankAccountName: "",
-        settlementBankAccountNum: "",
-        settlementBankBranchName: "",
-        settlementBankJointName: "",
-      },
+const props = defineProps<{ companyData?: any }>()
+const emit = defineEmits<{ callback: [] }>()
 
-      rules: {
-        // 验证规则
-        settlementBankAccountName: [
-          { required: true, message: "请填写银行开户名称" },
-        ],
-        settlementBankAccountNum: [
-          { required: true, message: "请填写银行账号" },
-        ],
-        settlementBankBranchName: [
-          { required: true, message: "请填写开户银行支行名称" },
-        ],
-        settlementBankJointName: [
-          { required: true, message: "请填写支行联行号" },
-        ],
-      },
-    };
+const store = useStore()
+
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
+
+const uForm = ref<any>(null)
+
+const form = reactive({
+  settlementBankAccountName: '',
+  settlementBankAccountNum: '',
+  settlementBankBranchName: '',
+  settlementBankJointName: '',
+})
+
+const rules = {
+  settlementBankAccountName: [
+    { required: true, message: '请填写银行开户名称' },
+  ],
+  settlementBankAccountNum: [
+    { required: true, message: '请填写银行账号' },
+  ],
+  settlementBankBranchName: [
+    { required: true, message: '请填写开户银行支行名称' },
+  ],
+  settlementBankJointName: [
+    { required: true, message: '请填写支行联行号' },
+  ],
+}
+
+watch(
+  () => props.companyData,
+  (val) => {
+    if (val) {
+      Object.assign(form, val)
+    }
   },
-  mounted() {
-    this.$refs.uForm.setRules(this.rules);
-  },
-  props: ["companyData"],
-  watch: {
-    companyData: {
-      handler(val) {
-        this["form"] = val;
-        console.log(this.form)
-      },
-      deep: true,
-      immediate:true
-    },
-  },
-  methods: {
-    validatorStep2Form() {
-      this.$refs.uForm.validate(async (valid) => {
-        if (valid) {
-          const params = { ...this.form };
-          const res = await applySecond(params);
-          if (res.data.success) {
-            uni.showToast({
-              title: "提交成功!",
-              icon: "none",
-            });
-            this.$emit("callback");
-          }
-        }
-      });
-    },
-  },
-};
+  { deep: true, immediate: true }
+)
+
+onReady(() => {
+  uForm.value?.setRules(rules)
+})
+
+function validatorStep2Form() {
+  uForm.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      const params = { ...form }
+      const res = await applySecond(params)
+      if (res.data.success) {
+        uni.showToast({
+          title: '提交成功!',
+          icon: 'none',
+        })
+        emit('callback')
+      }
+    }
+  })
+}
 </script>
-<style>
-/* page {
-  background: #fff;
-} */
+<style lang="scss">
+page {
+  background: #f8f8f8;
+}
 </style>
 <style lang="scss" scoped>
-@import url("./entry.scss");
+@import "./entry.scss";
+@import "./entry-form.scss";
+
 .wrapper {
-  // padding: 50rpx 32rpx 16rpx 32rpx;
-}
-.column {
-  padding: 32rpx;
-  margin-bottom: 20rpx;
-  background: #fff;
+  @include seller-entry-form;
 }
+
 .submit {
-  color: #fff;
-  margin-top: 120rpx;
-  background: rgba($light-color, 0.8);
-}
-.tips {
-  color: #999;
-  font-size: 24rpx;
-  line-height: 1.2;
-  margin-top: 10rpx;
+  @include seller-entry-submit;
 }
 </style>
diff --git a/pages/passport/entry/seller/step3.vue b/pages/passport/entry/seller/step3.vue
index 50cb778..489c2dd 100644
--- a/pages/passport/entry/seller/step3.vue
+++ b/pages/passport/entry/seller/step3.vue
@@ -1,16 +1,16 @@
 <template>
-  <div class="wrapper">
-    <u-form label-width="200" :model="form" ref="uForm">
+  <div class="wrapper" :style="themeStyle">
+    <up-form label-position="top" :model="form" ref="uForm">
       <div class="column">
         <div class="flag-title light-color">基础信息</div>
-        <u-form-item
+        <up-form-item
           required
           :border-bottom="false"
           prop="storeName"
           label="店铺名称"
-          ><u-input v-model="form.storeName" :custom-style="defaultInputStyle"
-        /></u-form-item>
-        <u-form-item
+          ><u-input border="none" class="field-input" v-model="form.storeName" :custom-style="fieldInputStyle"
+        /></up-form-item>
+        <up-form-item
           required
           :border-bottom="false"
           prop="storeLogo"
@@ -25,39 +25,45 @@
               :max-count="1"
             ></u-upload>
           </div>
-        </u-form-item>
-        <u-form-item
+        </up-form-item>
+        <up-form-item
           required
           :border-bottom="false"
           prop="goodsManagementCategory"
           label="店铺经营类目"
-          >
-          <div @click="showCategory()"   style="margin-right: 30rpx;">选择</div>
-         
-          <u-input
-            :custom-style="defaultInputStyle"
-            v-model="goodsManagementCategory"
-            disabled
-            @click="showCategory()"
-        /></u-form-item>
+        >
+          <view class="field-row">
+            <u-input
+              border="none"
+              class="field-input"
+              :custom-style="fieldInputStyle"
+              v-model="goodsManagementCategory"
+              disabled
+              @click="showCategory()"
+            />
+            <view class="picker-action" @click="showCategory()">选择</view>
+          </view>
+        </up-form-item>
 
-        <u-form-item
+        <up-form-item
           required
           :border-bottom="false"
           prop="storeAddressPath"
           label="店铺所在地"
         >
-          <div @click="showPicker()"   style="margin-right: 30rpx;">选择</div>
-          <u-input
-            :custom-style="defaultInputStyle"
-            v-model="form.storeAddressPath"
-          
-            disabled
-            
-          />
-        </u-form-item>
+          <view class="field-row">
+            <u-input
+              border="none"
+              class="field-input"
+              :custom-style="fieldInputStyle"
+              v-model="form.storeAddressPath"
+              disabled
+            />
+            <view class="picker-action" @click="showPicker()">选择</view>
+          </view>
+        </up-form-item>
        
-        <!-- <u-form-item
+        <!-- <up-form-item
           required
           :border-bottom="false"
           prop="storeAddressPath"
@@ -65,30 +71,35 @@
         >
           <div class="get-center" @click="clickUniMap()">开始定位</div>
           <div class="tips-success" v-if="form.storeCenter">已成功定位</div>
-        </u-form-item> -->
+        </up-form-item> -->
 
-        <u-form-item
+        <up-form-item
           required
           :border-bottom="false"
           prop="storeAddressDetail"
           label="店铺详细地址"
-          ><u-input
-            :custom-style="defaultInputStyle"
+          ><u-input border="none" class="field-input"
+            :custom-style="fieldInputStyle"
             v-model="form.storeAddressDetail"
-        /></u-form-item>
-        <u-form-item
+        /></up-form-item>
+        <up-form-item
           required
           :border-bottom="false"
           prop="storeDesc"
           label="店铺简介"
-          ><u-input
-            type="textarea"
-            :custom-style="defaultInputStyle"
+        >
+          <u-textarea
+            class="field-textarea"
+            border="none"
+            height="240"
+            maxlength="500"
             v-model="form.storeDesc"
-        /></u-form-item>
+            placeholder="请输入店铺简介"
+          />
+        </up-form-item>
       </div>
-    </u-form>
-    <div class="submit" @click="validatorStep1Form">提交平台审核</div>
+    </up-form>
+    <view class="submit" @click="validatorStep3Form">提交平台审核</view>
     <m-city
       :provinceData="list"
       headTitle="区域选择"
@@ -108,261 +119,256 @@
   </div>
 </template>
 
-<script>
-import { applyThird } from "@/api/entry";
-import { getCategoryList } from "@/api/goods";
-import city from "@/components/m-city/m-city.vue";
-import storage from "@/utils/storage.js";
-import { handleUploadAfterRead } from "@/utils/uploadHelper.js";
-import uniMap from "@/components/uniMap";
-import permision from "@/js_sdk/wa-permission/permission.js";
-export default {
-  components: { "m-city": city, uniMap },
-  data() {
-    return {
-      storage,
-      mapFlag: false,
-      defaultInputStyle: {
-        background: "#f7f7f7",
-        padding: "0 20rpx",
-        "border-radius": "10rpx",
-      },
-      goodsManagementCategory: "",
-      storeLogoFileList: [],
-      categoryList: [],
-      form: {
-        storeName: "",
-        storeLogo: "",
-        goodsManagementCategory: "",
-        storeAddressPath: "",
-        storeAddressDetail: "",
-        storeDesc: "",
-      },
-      list: [
-        {
-          id: "",
-          localName: "请选择",
-          children: [],
-        },
-      ],
-      rules: {
-        // 验证规则
-        goodsManagementCategory: [
-          { required: true, message: "请选择店铺经营类目" },
-        ],
-        storeName: [{ required: true, message: "请填写店铺名称" }],
-        storeLogo: [{ required: true, message: "请上传店铺logo" }],
-        storeDesc: [{ required: true, message: "请填写店铺简介" }],
-        storeCenter: [{ required: true, message: "请选择店铺位置" }],
-        storeAddressIdPath: [{ required: true, message: "请选择店铺位置" }],
-        storeAddressDetail: [{ required: true, message: "请输入店铺详细地址" }],
-      },
-      enableCategory: false,
-    };
+<script setup lang="ts">
+import { ref, reactive, computed, watch, onMounted } from 'vue'
+import { onReady } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import { applyThird } from '@/api/entry'
+import { getCategoryList } from '@/api/goods'
+import MCity from '@/components/m-city/m-city.vue'
+import uniMap from '@/components/uniMap'
+import permision from '@/js_sdk/wa-permission/permission.js'
+import { handleUploadAfterRead } from '@/utils/uploadHelper.js'
+import { getThemeStyle } from '@/utils/theme'
+import { fieldInputStyle } from '@/utils/form-style.js'
+
+const props = defineProps<{ companyData?: any }>()
+const emit = defineEmits<{ callback: [] }>()
+
+const store = useStore()
+
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
+
+const uForm = ref<any>(null)
+const cityPicker = ref<any>(null)
+
+const mapFlag = ref(false)
+const enableCategory = ref(false)
+const goodsManagementCategory = ref('')
+const storeLogoFileList = ref<any[]>([])
+const categoryList = ref<any[]>([])
+
+const form = reactive<Record<string, any>>({
+  storeName: '',
+  storeLogo: '',
+  goodsManagementCategory: '',
+  storeAddressPath: '',
+  storeAddressDetail: '',
+  storeDesc: '',
+})
+
+const list = ref([
+  {
+    id: '',
+    localName: '请选择',
+    children: [],
   },
-  mounted() {
-    this.$refs.uForm.setRules(this.rules);
-    this.fetchCategoryList();
+])
+
+const rules = {
+  goodsManagementCategory: [
+    { required: true, message: '请选择店铺经营类目' },
+  ],
+  storeName: [{ required: true, message: '请填写店铺名称' }],
+  storeLogo: [{ required: true, message: '请上传店铺logo' }],
+  storeDesc: [{ required: true, message: '请填写店铺简介' }],
+  storeCenter: [{ required: true, message: '请选择店铺位置' }],
+  storeAddressIdPath: [{ required: true, message: '请选择店铺位置' }],
+  storeAddressDetail: [{ required: true, message: '请输入店铺详细地址' }],
+}
+
+watch(
+  () => props.companyData,
+  (val) => {
+    if (val) {
+      Object.assign(form, val)
+      const judgeDeepPhoto = ['storeLogo']
+
+      judgeDeepPhoto.forEach((key) => {
+        if (form[key]) {
+          storeLogoFileList.value = []
+          form[key].split(',').forEach((item: string) => {
+            storeLogoFileList.value.push({ url: item })
+          })
+        }
+      })
+    }
   },
-  props: ["companyData"],
-  watch: {
-    companyData: {
-      handler(val) {
-        this["form"] = val;
-        // 给图片赋值
-        const judgeDeepPhoto = ["storeLogo"];
+  { deep: true, immediate: true }
+)
 
-        judgeDeepPhoto.forEach((key) => {
-          if (this.form[key]) {
-            this.form[key].split(",").forEach((item) => {
-              this[`${key}FileList`].push({ url: item });
-            });
-          }
-        });
-      },
-      deep: true,
-      immediate: true,
-    },
-  },
+onReady(() => {
+  uForm.value?.setRules(rules)
+})
 
-  methods: {
-    callBackAddress(val) {
-      console.log(val);
-      this.form.storeAddressDetail = val.address;
-      this.form.storeCenter = `${val.longitude},${val.latitude}`;
-    },
-    // 关闭地图
-    closeMap() {
-      this.mapFlag = false;
-    },
-    // 打开地图并访问权限
-    clickUniMap() {
-      console.log("click");
-      // #ifdef APP-PLUS
-      if (plus.os.name == "iOS") {
-        // ios系统
-        permision.judgeIosPermission("location")
-          ? (this.mapFlag = true)
-          : this.refuseMap();
-      } else {
-        // 安卓
-        this.requestAndroidPermission(
-          "android.permission.ACCESS_FINE_LOCATION"
-        );
-      }
-      // #endif
+onMounted(() => {
+  fetchCategoryList()
+})
 
-      // #ifndef APP-PLUS
-      this.mapFlag = true;
-      // #endif
-    },
+function callBackAddress(val: any) {
+  form.storeAddressDetail = val.address
+  form.storeCenter = `${val.longitude},${val.latitude}`
+}
 
-    // 如果拒绝权限 提示区设置
-    refuseMap() {
-      uni.showModal({
-        title: "温馨提示",
-        content: "您已拒绝定位,请开启",
-        confirmText: "去设置",
-        success(res) {
-          if (res.confirm) {
-            //打开授权设置
-            // #ifndef MP-WEIXIN
-            uni.getSystemInfo({
-              success(res) {
-                if (res.platform == "ios") {
-                  //IOS
-                  plus.runtime.openURL("app-settings://");
-                } else if (res.platform == "android") {
-                  //安卓
-                  let main = plus.android.runtimeMainActivity();
-                  let Intent = plus.android.importClass(
-                    "android.content.Intent"
-                  );
-                  let mIntent = new Intent("android.settings.ACTION_SETTINGS");
-                  main.startActivity(mIntent);
-                }
-              },
-            });
-            // #endif
-          }
-        },
-      });
-    },
-    // 获取安卓是否拥有地址权限
-    async requestAndroidPermission(permisionID) {
-      var result = await permision.requestAndroidPermission(permisionID);
+function closeMap() {
+  mapFlag.value = false
+}
 
-      if (result == 1) {
-        this.mapFlag = true;
-      } else {
-        this.refuseMap();
+function clickUniMap() {
+  // #ifdef APP-PLUS
+  if (plus.os.name == 'iOS') {
+    permision.judgeIosPermission('location')
+      ? (mapFlag.value = true)
+      : refuseMap()
+  } else {
+    requestAndroidPermission('android.permission.ACCESS_FINE_LOCATION')
+  }
+  // #endif
+
+  // #ifndef APP-PLUS
+  mapFlag.value = true
+  // #endif
+}
+
+function refuseMap() {
+  uni.showModal({
+    title: '温馨提示',
+    content: '您已拒绝定位,请开启',
+    confirmText: '去设置',
+    success(res) {
+      if (res.confirm) {
+        // #ifndef MP-WEIXIN
+        uni.getSystemInfo({
+          success(sysRes) {
+            if (sysRes.platform == 'ios') {
+              plus.runtime.openURL('app-settings://')
+            } else if (sysRes.platform == 'android') {
+              const main = plus.android.runtimeMainActivity()
+              const Intent = plus.android.importClass('android.content.Intent')
+              const mIntent = new Intent('android.settings.ACTION_SETTINGS')
+              main.startActivity(mIntent)
+            }
+          },
+        })
+        // #endif
       }
     },
+  })
+}
 
-    confirmCategory(val) {
-      this.form.goodsManagementCategory = val[0].value;
-      this.goodsManagementCategory = val[0].label;
-    },
-    async fetchCategoryList() {
-      const res = await getCategoryList(0);
+async function requestAndroidPermission(permisionID: string) {
+  const result = await permision.requestAndroidPermission(permisionID)
+
+  if (result == 1) {
+    mapFlag.value = true
+  } else {
+    refuseMap()
+  }
+}
+
+function confirmCategory(val: any[]) {
+  form.goodsManagementCategory = val[0].value
+  goodsManagementCategory.value = val[0].label
+}
+
+async function fetchCategoryList() {
+  const res = await getCategoryList(0)
+  if (res.data.success) {
+    if (res.data.result.length) {
+      categoryList.value = res.data.result.map((item: any) => {
+        return { label: item.name, value: item.id }
+      })
+
+      if (form.goodsManagementCategory) {
+        goodsManagementCategory.value = categoryList.value.find(
+          (item) => form.goodsManagementCategory == item.value
+        )?.label || ''
+      }
+    }
+  }
+}
+
+function onUploadAfterRead(
+  event: any,
+  key: string,
+  fileListKey: 'storeLogoFileList'
+) {
+  handleUploadAfterRead(event, storeLogoFileList.value, (urls) => {
+    form[key] = urls
+  })
+}
+
+function getPickerParentValue(e: any[]) {
+  form.storeAddressIdPath = []
+  let name = ''
+  e.forEach((item, index) => {
+    if (item.id) {
+      form.storeAddressIdPath.push(item.id)
+      if (index == e.length - 1) {
+        name += item.localName
+      } else {
+        name += item.localName + ','
+      }
+      form.storeAddressPath = name
+    }
+  })
+
+  form.storeCenter = e[e.length - 1].center
+}
+
+function showPicker() {
+  cityPicker.value?.show()
+}
+
+function showCategory() {
+  enableCategory.value = true
+}
+
+function validatorStep3Form() {
+  uForm.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      const params = { ...form }
+      params.storeLogo = params.storeLogo.toString()
+      params.storeAddressIdPath = params.storeAddressIdPath.toString()
+      const res = await applyThird(params)
       if (res.data.success) {
-        if (res.data.result.length) {
-          this.categoryList = res.data.result.map((item) => {
-            return { label: item.name, value: item.id };
-          });
-
-          if (this.form.goodsManagementCategory) {
-            this.goodsManagementCategory = this.categoryList.find(
-              (item) => this.form.goodsManagementCategory == item.value
-            ).label;
-          }
-        }
+        uni.showToast({
+          title: '提交成功!',
+          icon: 'none',
+        })
+        emit('callback')
       }
-    },
-    onUploadAfterRead(event, key, fileListKey) {
-      handleUploadAfterRead(event, this[fileListKey], (urls) => {
-        this.form[key] = urls;
-      });
-    },
-    getPickerParentValue(e) {
-      this.form.storeAddressIdPath = [];
-      console.log(e)
-      let name = "";
-      e.forEach((item, index) => {
-        if (item.id) {
-          // 遍历数据
-          this.form.storeAddressIdPath.push(item.id);
-          if (index == e.length - 1) {
-            name += item.localName;
-          } else {
-            name += item.localName + ",";
-          }
-          this.form['storeAddressPath'] = name
-        }
-      });
-
-      this.form.storeCenter = e[e.length-1].center
-    },
-    // 显示三级地址联动
-    showPicker() {
-      this.$refs.cityPicker.show();
-    },
-    showCategory() {
-      this.enableCategory = true;
-    },
-    validatorStep1Form() {
-      this.$refs.uForm.validate(async (valid) => {
-        console.log(valid);
-        if (valid) {
-          const params = { ...this.form };
-          params.storeLogo = params.storeLogo.toString();
-          params.storeAddressIdPath = params.storeAddressIdPath.toString();
-          const res = await applyThird(params);
-          if (res.data.success) {
-            uni.showToast({
-              title: "提交成功!",
-              icon: "none",
-            });
-            this.$emit("callback");
-          }
-        }
-      });
-    },
-  },
-};
+    }
+  })
+}
 </script>
-<style>
-/* page {
-  background: #fff;
-} */
+<style lang="scss">
+page {
+  background: #f8f8f8;
+}
 </style>
 <style lang="scss" scoped>
-@import url("./entry.scss");
+@import "./entry.scss";
+@import "./entry-form.scss";
+
+.wrapper {
+  @include seller-entry-form;
+}
+
 .get-center {
   padding: 12rpx 30rpx;
-  background: $light-color;
+  background: var(--theme-light, #ff6b35);
   border-radius: 10rpx;
   font-size: 24rpx;
   color: #fff;
   font-weight: bold;
-  display: inline;
-}
-.column {
-  padding: 32rpx;
-  margin-bottom: 20rpx;
-  background: #fff;
+  display: inline-block;
 }
+
 .submit {
-  color: #fff;
-  margin-top: 120rpx;
-  background: rgba($light-color, 0.8);
-}
-.tips {
-  color: #999;
-  font-size: 24rpx;
-  line-height: 1.2;
-  margin-top: 10rpx;
+  @include seller-entry-submit;
 }
+
 .tips-success {
   color: $weChat-color;
   font-size: 24rpx;
diff --git a/pages/passport/login.vue b/pages/passport/login.vue
index 42a0b20..5f6419a 100644
--- a/pages/passport/login.vue
+++ b/pages/passport/login.vue
@@ -115,7 +115,7 @@
 				</div>
 				</template>
 			</div>
-			<myVerification v-if="codeFlag" @send="verification" class="verification" ref="verification"
+			<myVerification v-if="codeFlag" @send="handleVerification" class="verification" ref="verification"
 				business="LOGIN" />
 		</div>
 		<view v-else>
@@ -124,673 +124,572 @@
 	</div>
 </template>
 
-<script>
-	import {
-		openIdLogin,
-		loginCallback
-	} from "@/api/connect.js";
-	import api from "@/config/api.js";
-	import {
-		sendMobile,
-		smsLogin,
-		userLogin
-	} from "@/api/login";
-	import myVerification from "@/components/verification/verification.vue"; //验证码模块
-	import uuid from "@/utils/uuid.modified.js"; // uuid
-	import verifyCode from "@/components/verify-code/verify-code";
-	import {
-		getUserInfo
-	} from "@/api/members";
-	import {
-		whetherNavigate
-	} from "@/utils/Foundation"; //登录跳转
-	import storage from "@/utils/storage.js"; //缓存
-	import wechatH5Login from "./wechatH5Login.vue";
-	import {
-		webConnect
-	} from "@/api/connect.js";
-	import {
-		md5
-	} from "@/utils/md5.js";
+<script setup lang="ts">
+import { ref, reactive, computed, watch, nextTick, getCurrentInstance, onMounted } from 'vue'
+import { onLoad, onShow } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import { openIdLogin, loginCallback, webConnect } from '@/api/connect.js'
+import api from '@/config/api.js'
+import { sendMobile, smsLogin, userLogin } from '@/api/login'
+import myVerification from '@/components/verification/verification.vue'
+import verifyCode from '@/components/verify-code/verify-code'
+import { getUserInfo } from '@/api/members'
+import { whetherNavigate } from '@/utils/Foundation'
+import storage from '@/utils/storage.js'
+import wechatH5Login from './wechatH5Login.vue'
+import { md5 } from '@/utils/md5.js'
+import { secrecyMobile } from '@/utils/filters.js'
 
-	export default {
-		components: {
-			myVerification,
-			verifyCode,
-			wechatH5Login
-		},
+interface LoginListItem {
+	icon: string
+	color: string
+	title: string
+	code: string
+	appcode?: string
+}
 
-		data() {
-			return {
-				uuid,
-				wechatLogin: false, //是否加载微信公众号登录
-				flage: false, //是否验证码验证
-				codeFlag: true, //验证开关，用于是否展示验证码
-				tips: "",
-				enableUserPwdBox: false, //帐号密码登录
-				current: 0,
-				codeColor: "#999", //按钮验证码颜色
-				lightColor: this.$lightColor,
-				seconds: 60, //默认验证码等待时间
-				loginTitleWay: [{
-						title: "欢迎登录",
-						desc: "登录后更精彩，美好生活即将开始",
-					},
-					{
-						title: "请输入验证码",
-						desc: "已经发送验证码至",
-					},
-				],
-				userData: {
-					username: "",
-					password: "",
-				},
-				showBack: false,
-				enableFetchCode: false,
-				enableUserBtnColor: false,
-				enablePrivacy: false, //隐私政策
-				mobile: "", //手机号
-				code: "", //验证码
-				inputStyle: {
-					height: "104rpx",
-					"border-bottom": "1rpx solid #D8D8D8",
-					"letter-spacing": "1rpx",
-					padding: "0",
-				},
-				placeholderStyle: "font-size: 32rpx;line-height: 32rpx;color: #999999;",
-				loginList: [
-					//第三方登录集合
-					{
-						icon: "weixin-fill",
-						color: "#00a327",
-						title: "微信",
-						code: "WECHAT",
-					},
-					{
-						icon: "qq-fill",
-						color: "#38ace9",
-						title: "QQ",
-						code: "QQ",
-					},
-					{
-						icon: "apple-fill",
-						color: "#000000",
-						title: "Apple",
-						code: "APPLE",
-					},
-				],
-			};
-		},
-		onShow() {
+const store = useStore()
+const { proxy } = getCurrentInstance()!
 
-			// 只要是app登录的全部清除内容
-			// #ifdef APP-PLUS
-			storage.setAccessToken("");
-			storage.setRefreshToken("");
-			storage.setUserInfo({});
-			// #endif
+const lightColor = computed(() => store.getters.lightColor)
+const aiderLightColor = computed(() => store.getters.aiderLightColor)
 
+const wechatLogin = ref(false)
+const flage = ref(false)
+const codeFlag = ref(true)
+const tips = ref('')
+const enableUserPwdBox = ref(false)
+const current = ref(0)
+const codeColor = ref('#999')
+const seconds = ref(60)
+const loginTitleWay = [
+	{ title: '欢迎登录', desc: '登录后更精彩，美好生活即将开始' },
+	{ title: '请输入验证码', desc: '已经发送验证码至' },
+]
+const userData = reactive({ username: '', password: '' })
+const showBack = ref(false)
+const enableFetchCode = ref(false)
+const enableUserBtnColor = ref(false)
+const enablePrivacy = ref(false)
+const mobile = ref('')
+const code = ref('')
+const inputStyle = {
+	height: '104rpx',
+	'border-bottom': '1rpx solid #D8D8D8',
+	'letter-spacing': '1rpx',
+	padding: '0',
+}
+const placeholderStyle = 'font-size: 32rpx;line-height: 32rpx;color: #999999;'
+const loginList = ref<LoginListItem[]>([
+	{ icon: 'weixin-fill', color: '#00a327', title: '微信', code: 'WECHAT' },
+	{ icon: 'qq-fill', color: '#38ace9', title: 'QQ', code: 'QQ' },
+	{ icon: 'apple-fill', color: '#000000', title: 'Apple', code: 'APPLE' },
+])
+const clientType = ref('')
 
-			//#ifdef H5
-			let isWXBrowser = /micromessenger/i.test(navigator.userAgent);
-			if (isWXBrowser) {
-				webConnect("WECHAT").then((res) => {
-					let data = res.data;
-					if (data.success) {
-						window.location = data.result;
-					}
-				});
+const verification = ref<any>(null)
+const uCode = ref<any>(null)
+
+onShow(() => {
+	// 只要是app登录的全部清除内容
+	// #ifdef APP-PLUS
+	storage.setAccessToken('')
+	storage.setRefreshToken('')
+	storage.setUserInfo({})
+	// #endif
+
+	//#ifdef H5
+	const isWXBrowser = /micromessenger/i.test(navigator.userAgent)
+	if (isWXBrowser) {
+		webConnect('WECHAT').then((res) => {
+			const data = res.data
+			if (data.success) {
+				window.location = data.result
 			}
-			//#endif
+		})
+	}
+	//#endif
+})
+
+onMounted(() => {
+	// #ifndef APP-PLUS
+	//判断是否微信浏览器
+	const ua = window.navigator.userAgent.toLowerCase()
+	if (ua.match(/MicroMessenger/i) == 'micromessenger') {
+		wechatLogin.value = true
+		return
+	}
+	// #endif
+	/**
+	 * 条件编译判断当前客户端类型
+	 */
+	//#ifdef H5
+	clientType.value = 'H5'
+	//#endif
+
+	//#ifdef APP-PLUS
+	clientType.value = 'APP'
+	/**如果是app 加载支持的登录方式*/
+	uni.getProvider({
+		service: 'oauth',
+		success: (result) => {
+			loginList.value = result.provider.map((value) => {
+				let title = ''
+				let codeVal = ''
+				let color = '#8b8b8b'
+				let icon = ''
+				switch (value) {
+					case 'weixin':
+						icon = 'weixin-circle-fill'
+						color = '#00a327'
+						title = '微信'
+						codeVal = 'WECHAT'
+						break
+					case 'qq':
+						icon = 'qq-circle-fill'
+						color = '#38ace9'
+						title = 'QQ'
+						codeVal = 'QQ'
+						break
+					case 'apple':
+						icon = 'apple-fill'
+						color = '#000000'
+						title = 'Apple'
+						codeVal = 'APPLE'
+						break
+				}
+				return {
+					title,
+					code: codeVal,
+					color,
+					icon,
+					appcode: value,
+				}
+			})
 		},
-
-		mounted() {
-
-			// #ifndef APP-PLUS
-			//判断是否微信浏览器
-			var ua = window.navigator.userAgent.toLowerCase();
-			if (ua.match(/MicroMessenger/i) == "micromessenger") {
-				this.wechatLogin = true;
-				return;
-			}
-			// #endif
-			/**
-			 * 条件编译判断当前客户端类型
-			 */
-			//#ifdef H5
-			this.clientType = "H5";
-			//#endif
-
-			//#ifdef APP-PLUS
-			this.clientType = "APP";
-			/**如果是app 加载支持的登录方式*/
-			let _this = this;
-			uni.getProvider({
-				service: "oauth",
-				success: (result) => {
-					_this.loginList = result.provider.map((value) => {
-						//展示title
-						let title = "";
-						//系统code
-						let code = "";
-						//颜色
-						let color = "#8b8b8b";
-						//图标
-						let icon = "";
-						//uni 联合登录 code
-						let appcode = "";
-						switch (value) {
-							case "weixin":
-								icon = "weixin-circle-fill";
-								color = "#00a327";
-								title = "微信";
-								code = "WECHAT";
-								break;
-							case "qq":
-								icon = "qq-circle-fill";
-								color = "#38ace9";
-								title = "QQ";
-								code = "QQ";
-								break;
-							case "apple":
-								icon = "apple-fill";
-								color = "#000000";
-								title = "Apple";
-								code = "APPLE";
-								break;
-						}
-						return {
-							title: title,
-							code: code,
-							color: color,
-							icon: icon,
-							appcode: value,
-						};
-					});
-				},
-				fail: (error) => {
-					uni.showToast({
-						title: "获取登录通道失败" + error,
-						duration: 2000,
-						icon: "none",
-					});
-				},
-			});
-			//#endif
-
-			//特殊平台，登录方式需要过滤
-			// #ifdef H5
-			this.methodFilter(["QQ"]);
-			// #endif
-
-			//微信小程序，只支持微信登录
-			// #ifdef MP-WEIXIN
-			this.methodFilter(["WECHAT"]);
-			// #endif
+		fail: (error) => {
+			uni.showToast({
+				title: '获取登录通道失败' + error,
+				duration: 2000,
+				icon: 'none',
+			})
 		},
-		watch: {
-			current(val) {
-				val ? (this.showBack = true) : (this.showBack = false);
-			},
-			userData: {
-				handler(val) {
-					if (this.userData.username && this.userData.password) {
-						this.enableUserBtnColor = true;
-					} else {
-						this.enableUserBtnColor = false;
-					}
-				},
-				deep: true,
+	})
+	//#endif
 
-			},
-			mobile: {
-				handler(val) {
-					if (val.length == 11) {
-						this.enableFetchCode = true;
-					}
-				},
-			},
+	//特殊平台，登录方式需要过滤
+	// #ifdef H5
+	methodFilter(['QQ'])
+	// #endif
 
-			async flage(val) {
-				if (val) {
-					if (this.enableUserPwdBox) {
-						this.submitUserLogin();
-						return;
-					}
+	//微信小程序，只支持微信登录
+	// #ifdef MP-WEIXIN
+	methodFilter(['WECHAT'])
+	// #endif
+})
 
-					// 首次发送时 uCode 尚未挂载；重新获取时才检查倒计时
-					const canSendCode = this.current === 0 || this.$refs.uCode?.canGetCode;
-					if (!canSendCode) {
-						this.$u.toast("请倒计时结束后再发送");
-						return;
-					}
+watch(current, (val) => {
+	showBack.value = val ? true : false
+})
 
-					uni.showLoading({});
-					let res = await sendMobile(this.mobile);
-					if (this.$store.state.isShowToast) {
-						uni.hideLoading();
-					}
-					if (res.data.success) {
-						this.code = '';
-						this.current = 1;
-						this.$nextTick(() => {
-							this.$refs.uCode?.start();
-						});
-					} else {
-						uni.showToast({
-							title: res.data.message,
-							duration: 2000,
-							icon: "none",
-						});
-						this.flage = false;
-						this.$refs.verification?.getCode();
-					}
+watch(
+	userData,
+	() => {
+		enableUserBtnColor.value = !!(userData.username && userData.password)
+	},
+	{ deep: true }
+)
+
+watch(mobile, (val) => {
+	if (val.length == 11) {
+		enableFetchCode.value = true
+	}
+})
+
+watch(flage, async (val) => {
+	if (val) {
+		if (enableUserPwdBox.value) {
+			submitUserLogin()
+			return
+		}
+
+		// 首次发送时 uCode 尚未挂载；重新获取时才检查倒计时
+		const canSendCode = current.value === 0 || uCode.value?.canGetCode
+		if (!canSendCode) {
+			proxy.$u.toast('请倒计时结束后再发送')
+			return
+		}
+
+		uni.showLoading({})
+		const res = await sendMobile(mobile.value)
+		if (store.state.isShowToast) {
+			uni.hideLoading()
+		}
+		if (res.data.success) {
+			code.value = ''
+			current.value = 1
+			nextTick(() => {
+				uCode.value?.start()
+			})
+		} else {
+			uni.showToast({
+				title: res.data.message,
+				duration: 2000,
+				icon: 'none',
+			})
+			flage.value = false
+			verification.value?.getCode()
+		}
+	} else {
+		verification.value?.hide()
+	}
+})
+
+onLoad((options) => {
+	if (options && options.state) {
+		stateLogin(options.state as string)
+	}
+})
+
+function stateLogin(state: string) {
+	loginCallback(state).then((res) => {
+		const data = res.data
+		if (data.success) {
+			storage.setAccessToken(data.result.accessToken)
+			storage.setRefreshToken(data.result.refreshToken)
+			uni.showToast({
+				title: '登录成功!',
+				icon: 'none',
+			})
+			getUserInfo().then((user) => {
+				if (user.data.success) {
+					storage.setUserInfo(user.data.result)
+					storage.setHasLogin(true)
 				} else {
-					this.$refs.verification?.hide();
+					setTimeout(() => {
+						uni.showToast({
+							title: user.data.message,
+							icon: 'none',
+						})
+						storage.setAccessToken('')
+						storage.setRefreshToken('')
+						uni.switchTab({
+							url: '/pages/tabbar/user/my',
+						})
+					}, 500)
 				}
-			},
+			})
+			getCurrentPages().length > 1
+				? uni.navigateBack({
+						delta: getCurrentPages().length - 2,
+					})
+				: uni.switchTab({
+						url: '/pages/tabbar/home/index',
+					})
+		}
+	})
+}
+
+function methodFilter(codes: string[]) {
+	const way: LoginListItem[] = []
+	loginList.value.forEach((item) => {
+		if (codes.length != 0) {
+			codes.forEach((val) => {
+				if (item.code == val) {
+					way.push(item)
+				}
+			})
+		} else {
+			uni.showToast({
+				title: '配置有误请联系管理员',
+				duration: 2000,
+				icon: 'none',
+			})
+		}
+	})
+	loginList.value = way
+}
+
+async function nonH5OpenId(item: LoginListItem) {
+	let loginRes: UniApp.LoginRes | null = null
+	await uni.login({
+		provider: item.appcode,
+		// #ifdef MP-ALIPAY
+		scopes: 'auth_user',
+		// #endif
+		success(res) {
+			loginRes = res
+			uni.setStorageSync('type', item.code)
+			// #ifndef MP-WEIXIN
+			uni.setStorageSync('openid', res.authResult.openid)
+			res.authResult.unionId && uni.setStorageSync('unionId', res.authResult.unionId)
+			// #endif
 		},
-		onLoad(options) {
-			if (options && options.state) {
-				this.stateLogin(options.state);
-			}
+		fail() {
+			uni.showToast({
+				title: '第三方登录暂不可用！',
+				icon: 'none',
+				duration: 3000,
+			})
 		},
-		methods: {
-			//联合信息返回登录
-			stateLogin(state) {
-				loginCallback(state).then((res) => {
-					let data = res.data;
-					if (data.success) {
-						storage.setAccessToken(data.result.accessToken);
-						storage.setRefreshToken(data.result.refreshToken);
-						// 登录成功
-						uni.showToast({
-							title: "登录成功!",
-							icon: "none",
-						});
-						getUserInfo().then((user) => {
-							if(user.data.success){
-								storage.setUserInfo(user.data.result);
-								storage.setHasLogin(true);
-							}else {
-								setTimeout(() => {
-									uni.showToast({
-										title: user.data.message,
-										icon: "none",
-									});
-									storage.setAccessToken('');
-									storage.setRefreshToken('');
-									uni.switchTab({
-										url: "/pages/tabbar/user/my",
-									});
-								}, 500);
-							}
-						});
-						getCurrentPages().length > 1 ?
-							uni.navigateBack({
-								delta: getCurrentPages().length - 2,
-							}) :
-							uni.switchTab({
-								url: "/pages/tabbar/home/index",
-							});
+		complete() {
+			uni.getUserInfo({
+				provider: item.appcode,
+				success(infoRes) {
+					uni.setStorageSync('nickname', infoRes.userInfo.nickName)
+					uni.setStorageSync('avatar', infoRes.userInfo.avatarUrl)
+					uni.setStorageSync('unionId', infoRes.userInfo.unionId || infoRes.userInfo.unionid)
+
+					// #ifdef MP-WEIXIN
+					if (loginRes) {
+						weixinMPOpenID(loginRes).then(() => {
+							goOpenidLogin('WECHAT_MP')
+						})
 					}
-				});
-			},
-			/** 根据参数显示登录模块 */
-			methodFilter(code) {
-				let way = [];
-				this.loginList.forEach((item) => {
-					if (code.length != 0) {
-						code.forEach((val) => {
-							if (item.code == val) {
-								way.push(item);
-							}
-						});
-					} else {
-						uni.showToast({
-							title: "配置有误请联系管理员",
-							duration: 2000,
-							icon: "none",
-						});
-					}
-				});
-				this.loginList = way;
-			},
-			//非h5 获取openid
-			async nonH5OpenId(item) {
-				let _this = this;
-				//获取各个openid
-				await uni.login({
-					provider: item.appcode,
-					// #ifdef MP-ALIPAY
-					scopes: "auth_user", //支付宝小程序需设置授权类型
 					// #endif
-					success: function(res) {
-						uni.setStorageSync("type", item.code);
-						//微信小程序意外的其它方式直接在storage中写入openid
-						// #ifndef MP-WEIXIN
-						uni.setStorageSync("openid", res.authResult.openid);
-						res.authResult.unionId && uni.setStorageSync("unionId", res.authResult.unionId);
-						// #endif
-					},
-					fail(e) {
-						uni.showToast({
-							title: "第三方登录暂不可用！",
-							icon: "none",
-							duration: 3000,
-						});
-					},
-					complete(e) {
-						//获取用户信息
-						uni.getUserInfo({
-							provider: item.appcode,
-							success: function(infoRes) {
-								//写入用户信息
-								uni.setStorageSync("nickname", infoRes.userInfo.nickName);
-								uni.setStorageSync("avatar", infoRes.userInfo.avatarUrl);
-								uni.setStorageSync("unionId", infoRes.userInfo.unionId || infoRes.userInfo.unionid);
 
-								// #ifdef MP-WEIXIN
-								//微信小程序获取openid 需要特殊处理 如需获取openid请参考uni-id: https://uniapp.dcloud.net.cn/uniCloud/uni-id
-								_this.weixinMPOpenID(res).then((res) => {
-									//这里需要先行获得openid，再使用openid登录，小程序登录需要两步，所以这里特殊编译
-									_this.goOpenidLogin("WECHAT_MP");
-								});
-								// #endif
-
-								// #ifndef MP-WEIXIN
-								_this.goOpenidLogin("APP");
-								//#endif
-							},
-						});
-					},
-				});
-			},
-			//openid 登录
-			goOpenidLogin(clientType) {
-				// 获取准备好的参数，进行登录系统
-				let params = {
-					uuid: uni.getStorageSync("openid"), //联合登陆id
-					source: uni.getStorageSync("type"), //联合登陆类型
-					nickname: uni.getStorageSync("nickname"), // 昵称
-					username: uni.getStorageSync("openid"), // 昵称
-					avatar: uni.getStorageSync("avatar"), // 头像
-					uniAccessToken: uni.getStorageSync("uni_access_token"), //第三方token
-					type:this.clientType,
-					token:{unionId:"",openId:uni.getStorageSync("openid")}
-				};
-        		uni.getStorageSync("unionId") ? (params.token.unionId = uni.getStorageSync("unionId")) : delete params.token;
-
-				openIdLogin(params, clientType).then((res) => {
-					if (!res.data.success) {
-						let errormessage = "第三方登录暂不可用";
-						uni.showToast({
-							// title: '未绑定第三方账号',
-							title: errormessage,
-							icon: "none",
-							duration: 3000,
-						});
-						return;
-					} else {
-						storage.setAccessToken(res.data.result.accessToken);
-						storage.setRefreshToken(res.data.result.refreshToken);
-						// 登录成功
-						uni.showToast({
-							title: "第三方登录成功!",
-							icon: "none",
-						});
-						// 执行登录
-						getUserInfo().then((user) => {
-							if (user.data.success) {
-								/**
-								 * 个人信息存储到缓存userInfo中
-								 */
-								storage.setUserInfo(user.data.result);
-								storage.setHasLogin(true);
-								uni.switchTab({
-									url: "/pages/tabbar/home/index",
-								});
-								/**
-								 * 计算出当前router路径
-								 * 1.如果跳转的链接为登录页面或跳转的链接为空页面。则会重新跳转到首页
-								 * 2.都不满足返回跳转页面
-								 */
-								if (user.data.result.mobile) {
-									whetherNavigate();
-								} else {
-									uni.navigateTo({
-										url: "/pages/passport/bindUserPhone",
-									});
-								}
-							} else {
-								setTimeout(() => {
-									uni.showToast({
-										title: user.data.message,
-										icon: "none",
-									});
-									storage.setAccessToken('');
-									storage.setRefreshToken('');
-									uni.switchTab({
-										url: "/pages/tabbar/user/my",
-									});
-								}, 500);
-							}
-						});
-					}
-				});
-			},
-			//微信小程序获取openid
-			async weixinMPOpenID(res) {
-				await miniProgramLogin(res.code).then((res) => {
-					uni.setStorageSync("openid", res.data);
-				});
-			},
-			/**跳转到登录页面 */
-			navigateLogin(connectLogin) {
-				// #ifdef H5
-				let code = connectLogin.code;
-				let buyer = api.buyer;
-				window.open(
-					buyer + `/passport/connect/connect/login/web/` + code,
-					"_self"
-				);
-				// #endif
-				// #ifdef APP-PLUS
-				this.nonH5OpenId(connectLogin);
-				// #endif
-			},
-
-			// 提交
-			submit() {
-				/**
-				 * 清空当前账号信息
-				 */
-				storage.setHasLogin(false);
-				storage.setAccessToken("");
-				storage.setRefreshToken("");
-				storage.setUserInfo({});
-				/**
-				 * 执行登录
-				 */
-				smsLogin({
-					mobile: this.mobile,
-					code: this.code
-				}, this.clientType).then(
-					(res) => {
-						this.getUserInfoMethods(res);
-					}
-				);
-			},
-
-			// 登录成功之后获取用户信息
-			getUserInfoMethods(res) {
-				if (res.data.success) {
-					storage.setAccessToken(res.data.result.accessToken);
-					storage.setRefreshToken(res.data.result.refreshToken);
-
-					/**
-					 * 登录成功后获取个人信息
-					 */
-					getUserInfo().then((user) => {
-						if (user.data.success) {
-							/**
-							 * 个人信息存储到缓存userInfo中
-							 */
-							storage.setUserInfo(user.data.result);
-							storage.setHasLogin(true);
-							storage.setAutoCp(0)
-							// 登录成功
-							uni.showToast({
-								title:"提示",
-								content: "登录成功!",
-								icon: "none",
-							});
-
-
-							whetherNavigate();
-						}else{
-							setTimeout(() => {
-								uni.showToast({
-									title: user.data.message,
-									icon: "none",
-								});
-								storage.setAccessToken('');
-								storage.setRefreshToken('');
-								uni.switchTab({
-									url: "/pages/tabbar/user/my",
-								});
-							}, 500);
-
-						}
-					});
-				}
-			},
-
-			// 验证码验证
-			verification(val) {
-				this.flage = val == this.$store.state.verificationKey ? true : false;
-			},
-			// 跳转
-			navigateToPrivacy(val) {
-				uni.navigateTo({
-					url: "/pages/mine/help/tips?type=" + val,
-				});
-
-			},
-
-			// 点击获取验证码
-			start() {
-				this.codeColor = "#999";
-				this.$u.toast("验证码已发送");
-				this.flage = false;
-				this.codeFlag = false;
-
-				this.$refs.verification.hide();
-			},
-			/**点击验证码*/
-			codeChange(text) {
-				this.tips = text;
-			},
-			/** 结束验证码后执行 */
-			end() {
-				this.codeColor = this.lightColor;
-				this.codeFlag = true;
-				console.log(this.codeColor);
-			},
-
-			passwordLogin() {
-				if (!this.enablePrivacy) {
-					uni.showToast({
-						title: "请同意用户隐私",
-						duration: 2000,
-						icon: "none",
-					});
-					return false;
-				}
-
-				if (!this.userData.username) {
-					uni.showToast({
-						title: "请填写用户名",
-						duration: 2000,
-						icon: "none",
-					});
-					return false;
-				}
-
-				if (!this.userData.password) {
-					uni.showToast({
-						title: "请填写密码",
-						duration: 2000,
-						icon: "none",
-					});
-					return false;
-				}
-
-				if (!this.flage) {
-					this.$refs.verification.error(); //发送
-
-					return false;
-				}
-			},
-
-			// 提交用户登录
-			async submitUserLogin() {
-				const params = JSON.parse(JSON.stringify(this.userData));
-				params.password = md5(params.password);
-				try {
-					let res = await userLogin(params,this.clientType);
-					if (res.data.success) {
-						this.getUserInfoMethods(res);
-					} else {
-						this.$refs.verification.getCode();
-						this.flage = false;
-					}
-				} catch (error) {
-					this.$refs.verification.getCode();
-				}
-			},
-
-			// 发送验证码
-			fetchCode() {
-				if (!this.enablePrivacy) {
-					uni.showToast({
-						title: "请同意用户隐私",
-						duration: 2000,
-						icon: "none",
-					});
-					return false;
-				}
-
-				if (!this.$u.test.mobile(this.mobile)) {
-					uni.showToast({
-						title: "请填写正确手机号",
-						duration: 2000,
-						icon: "none",
-					});
-					return false;
-				}
-				if (this.tips == "重新获取验证码") {
-					uni.showLoading({
-						title: "加载中",
-					});
-					if (!this.codeFlag) {
-						let timer = setInterval(() => {
-							if (this.$refs.verification) {
-								this.$refs.verification.error(); //发送
-							}
-							clearInterval(timer);
-						}, 100);
-					}
-					 if (this.$store.state.isShowToast){ uni.hideLoading() };
-				}
-				if (!this.flage) {
-					this.$refs.verification.error(); //发送
-
-					return false;
-				}
-			},
+					// #ifndef MP-WEIXIN
+					goOpenidLogin('APP')
+					// #endif
+				},
+			})
 		},
-	};
+	})
+}
+
+function goOpenidLogin(loginClientType: string) {
+	const params: Record<string, any> = {
+		uuid: uni.getStorageSync('openid'),
+		source: uni.getStorageSync('type'),
+		nickname: uni.getStorageSync('nickname'),
+		username: uni.getStorageSync('openid'),
+		avatar: uni.getStorageSync('avatar'),
+		uniAccessToken: uni.getStorageSync('uni_access_token'),
+		type: clientType.value,
+		token: { unionId: '', openId: uni.getStorageSync('openid') },
+	}
+	uni.getStorageSync('unionId')
+		? (params.token.unionId = uni.getStorageSync('unionId'))
+		: delete params.token
+
+	openIdLogin(params, loginClientType).then((res) => {
+		if (!res.data.success) {
+			uni.showToast({
+				title: '第三方登录暂不可用',
+				icon: 'none',
+				duration: 3000,
+			})
+			return
+		}
+		storage.setAccessToken(res.data.result.accessToken)
+		storage.setRefreshToken(res.data.result.refreshToken)
+		uni.showToast({
+			title: '第三方登录成功!',
+			icon: 'none',
+		})
+		getUserInfo().then((user) => {
+			if (user.data.success) {
+				storage.setUserInfo(user.data.result)
+				storage.setHasLogin(true)
+				uni.switchTab({
+					url: '/pages/tabbar/home/index',
+				})
+				if (user.data.result.mobile) {
+					whetherNavigate()
+				} else {
+					uni.navigateTo({
+						url: '/pages/passport/bindUserPhone',
+					})
+				}
+			} else {
+				setTimeout(() => {
+					uni.showToast({
+						title: user.data.message,
+						icon: 'none',
+					})
+					storage.setAccessToken('')
+					storage.setRefreshToken('')
+					uni.switchTab({
+						url: '/pages/tabbar/user/my',
+					})
+				}, 500)
+			}
+		})
+	})
+}
+
+async function weixinMPOpenID(res: UniApp.LoginRes) {
+	await miniProgramLogin(res.code).then((loginRes) => {
+		uni.setStorageSync('openid', loginRes.data)
+	})
+}
+
+function navigateLogin(connectLogin: LoginListItem) {
+	// #ifdef H5
+	const codeVal = connectLogin.code
+	const buyer = api.buyer
+	window.open(buyer + `/passport/connect/connect/login/web/` + codeVal, '_self')
+	// #endif
+	// #ifdef APP-PLUS
+	nonH5OpenId(connectLogin)
+	// #endif
+}
+
+function submit() {
+	storage.setHasLogin(false)
+	storage.setAccessToken('')
+	storage.setRefreshToken('')
+	storage.setUserInfo({})
+	smsLogin({ mobile: mobile.value, code: code.value }, clientType.value).then((res) => {
+		getUserInfoMethods(res)
+	})
+}
+
+function getUserInfoMethods(res: any) {
+	if (res.data.success) {
+		storage.setAccessToken(res.data.result.accessToken)
+		storage.setRefreshToken(res.data.result.refreshToken)
+		getUserInfo().then((user) => {
+			if (user.data.success) {
+				storage.setUserInfo(user.data.result)
+				storage.setHasLogin(true)
+				storage.setAutoCp(0)
+				uni.showToast({
+					title: '提示',
+					content: '登录成功!',
+					icon: 'none',
+				})
+				whetherNavigate()
+			} else {
+				setTimeout(() => {
+					uni.showToast({
+						title: user.data.message,
+						icon: 'none',
+					})
+					storage.setAccessToken('')
+					storage.setRefreshToken('')
+					uni.switchTab({
+						url: '/pages/tabbar/user/my',
+					})
+				}, 500)
+			}
+		})
+	}
+}
+
+function handleVerification(val: string) {
+	flage.value = val == store.state.verificationKey ? true : false
+}
+
+function navigateToPrivacy(val: string) {
+	uni.navigateTo({
+		url: '/pages/mine/help/tips?type=' + val,
+	})
+}
+
+function start() {
+	codeColor.value = '#999'
+	proxy.$u.toast('验证码已发送')
+	flage.value = false
+	codeFlag.value = false
+	verification.value?.hide()
+}
+
+function codeChange(text: string) {
+	tips.value = text
+}
+
+function end() {
+	codeColor.value = lightColor.value
+	codeFlag.value = true
+	console.log(codeColor.value)
+}
+
+function passwordLogin() {
+	if (!enablePrivacy.value) {
+		uni.showToast({
+			title: '请同意用户隐私',
+			duration: 2000,
+			icon: 'none',
+		})
+		return false
+	}
+	if (!userData.username) {
+		uni.showToast({
+			title: '请填写用户名',
+			duration: 2000,
+			icon: 'none',
+		})
+		return false
+	}
+	if (!userData.password) {
+		uni.showToast({
+			title: '请填写密码',
+			duration: 2000,
+			icon: 'none',
+		})
+		return false
+	}
+	if (!flage.value) {
+		verification.value?.error()
+		return false
+	}
+}
+
+async function submitUserLogin() {
+	const params = JSON.parse(JSON.stringify(userData))
+	params.password = md5(params.password)
+	try {
+		const res = await userLogin(params, clientType.value)
+		if (res.data.success) {
+			getUserInfoMethods(res)
+		} else {
+			verification.value?.getCode()
+			flage.value = false
+		}
+	} catch {
+		verification.value?.getCode()
+	}
+}
+
+function fetchCode() {
+	if (!enablePrivacy.value) {
+		uni.showToast({
+			title: '请同意用户隐私',
+			duration: 2000,
+			icon: 'none',
+		})
+		return false
+	}
+	if (!proxy.$u.test.mobile(mobile.value)) {
+		uni.showToast({
+			title: '请填写正确手机号',
+			duration: 2000,
+			icon: 'none',
+		})
+		return false
+	}
+	if (tips.value == '重新获取验证码') {
+		uni.showLoading({ title: '加载中' })
+		if (!codeFlag.value) {
+			const timer = setInterval(() => {
+				if (verification.value) {
+					verification.value.error()
+				}
+				clearInterval(timer)
+			}, 100)
+		}
+		if (store.state.isShowToast) {
+			uni.hideLoading()
+		}
+	}
+	if (!flage.value) {
+		verification.value?.error()
+		return false
+	}
+}
+
+declare function miniProgramLogin(code: string | undefined): Promise<{ data: any }>
 </script>
 <style>
 	page {
diff --git a/pages/passport/scannerCodeLoginConfirm.vue b/pages/passport/scannerCodeLoginConfirm.vue
index 04314b7..684fec6 100644
--- a/pages/passport/scannerCodeLoginConfirm.vue
+++ b/pages/passport/scannerCodeLoginConfirm.vue
@@ -31,79 +31,78 @@
   </view>
 </template>
 
-<script>
-import { scannerCodeLogin, scannerCodeLoginConfirm } from "@/api/login";
-export default {
-  data() {
-    return {
-      errorMsg: "",
-      token: "",
-    };
-  },
-  watch: {
-    errorMsg(val) {
-      if (val) {
-        uni.showToast({
-          title: val,
-          icon: "none",
-        });
-        // uni.navigateBack()
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { onLoad, onShow } from '@dcloudio/uni-app'
+import { forceLogin } from '@/utils/filters.js'
+import { scannerCodeLogin, scannerCodeLoginConfirm } from '@/api/login'
+
+const errorMsg = ref('')
+const token = ref('')
+
+watch(errorMsg, (val) => {
+  if (val) {
+    uni.showToast({
+      title: val,
+      icon: 'none',
+    })
+  }
+})
+
+onLoad((params) => {
+  token.value = params.token || ''
+  if (!token.value) {
+    errorMsg.value = '信息异常'
+  }
+})
+
+onShow(() => {
+  forceLogin()
+  scannerCodeLogin({ token: token.value }).then((res) => {
+    if (res.data.code == 200) {
+      const code = res.data.result
+      switch (code) {
+        case 0:
+        case 1:
+          errorMsg.value = ''
+          break
+        case 2:
+        case 3:
+          errorMsg.value = '请勿重复扫码'
+          break
+        case 4:
+          errorMsg.value = '二维码已过期，重新扫码'
+          break
+        default:
+          errorMsg.value = '状态异常'
       }
-    },
-  },
-  onShow() {
-    this.forceLogin();
-    scannerCodeLogin({ token: this.token }).then((res) => {
-      if (res.data.code == 200) {
-        let code = res.data.result;
-        switch (code) {
-          case 0:
-          case 1:
-            this.errorMsg = "";
-            break;
-          case 2:
-          case 3:
-            this.errorMsg = "请勿重复扫码";
-            break;
-          case 4:
-            this.errorMsg = "二维码已过期，重新扫码";
-            break;
-          default:
-            this.errorMsg = "状态异常";
-        }
-      } else {
-        this.errorMsg = res.data.message;
-      }
-    });
-  },
-  onLoad(params) {
-    this.token = params.token;
-    if (this.token == undefined || this.token == "") {
-      this.errorMsg = "信息异常";
+    } else {
+      errorMsg.value = res.data.message
     }
-  },
-  methods: {
-    confirmLogin() {
-      this.config(1);
-    },
-    cancelLogin() {
-      this.config(0);
-    },
-    config(code) {
-      scannerCodeLoginConfirm({ token: this.token, code: code }).then((res) => {
-        let title = res.data.success ? "操作成功" : "操作失败";
-        uni.showToast({
-          title: title,
-          duration: 1500,
-          icon: "none",
-        });
-        setTimeout(function () {
-          uni.navigateBack();
-        }, 1000);
-      });
-    },
-  },
-};
+  })
+})
+
+function confirmLogin() {
+  submitLoginConfirm(1)
+}
+
+function cancelLogin() {
+  submitLoginConfirm(0)
+}
+
+function submitLoginConfirm(code: number) {
+  scannerCodeLoginConfirm({ token: token.value, code }).then((res) => {
+    const title = res.data.success ? '操作成功' : '操作失败'
+    uni.showToast({
+      title,
+      duration: 1500,
+      icon: 'none',
+    })
+    setTimeout(() => {
+      uni.navigateBack()
+    }, 1000)
+  })
+}
 </script>
 <style lang="scss" scoped>
 page {
diff --git a/pages/passport/wechatH5Login.vue b/pages/passport/wechatH5Login.vue
index 5a37824..f68258c 100644
--- a/pages/passport/wechatH5Login.vue
+++ b/pages/passport/wechatH5Login.vue
@@ -19,39 +19,33 @@
   </view>
 </template>
 
-<script>
-import { whetherNavigate } from "@/utils/Foundation"; //登录跳转
-import config from "@/config/config";
-import api from "@/config/api.js";
-export default {
-  data() {
-    return {
-      // 授权信息展示，商城名称
-      projectName: config.name,
-    };
-  },
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { whetherNavigate } from '@/utils/Foundation'
+import config from '@/config/config'
+import api from '@/config/api.js'
 
-  //微信小程序进入页面，先获取code，否则几率出现code和后续交互数据不对应情况
-  mounted() {
-    // 小程序默认分享
-    uni.showShareMenu({ withShareTicket: true });
-  },
-  methods: {
-    back() {
-      whetherNavigate();
-    },
-    getUserProfile() {
-      let code = "WECHAT";
-      let buyer = api.buyer;
-      window.open(buyer + `/passport/connect/connect/login/web/` + code, "_self");
-    },
-    backToHome() {
-      uni.switchTab({
-        url: `/pages/tabbar/home/index`,
-      });
-    },
-  },
-};
+const projectName = ref(config.name)
+
+onMounted(() => {
+  uni.showShareMenu({ withShareTicket: true })
+})
+
+function back() {
+  whetherNavigate()
+}
+
+function getUserProfile() {
+  const code = 'WECHAT'
+  const buyer = api.buyer
+  window.open(buyer + `/passport/connect/connect/login/web/` + code, '_self')
+}
+
+function backToHome() {
+  uni.switchTab({
+    url: '/pages/tabbar/home/index',
+  })
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/passport/wechatMPLogin.vue b/pages/passport/wechatMPLogin.vue
index 97d7198..ba5c0e5 100644
--- a/pages/passport/wechatMPLogin.vue
+++ b/pages/passport/wechatMPLogin.vue
@@ -46,197 +46,127 @@
 	</view>
 </template>
 
-<script>
-	import {
-		mpAutoLogin
-	} from "@/api/connect.js";
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useStore } from '@/store'
+import { mpAutoLogin } from '@/api/connect.js'
+import { whetherNavigate } from '@/utils/Foundation'
+import { getUserInfo } from '@/api/members'
+import storage from '@/utils/storage.js'
+import config from '@/config/config'
 
-	import {
-		whetherNavigate
-	} from "@/utils/Foundation"; //登录跳转
-	import {
-		getUserInfo
-	} from "@/api/members";
-	import storage from "@/utils/storage.js";
-	import config from '@/config/config'
-	export default {
-		data() {
-			return {
-				lightColor:this.$lightColor,
-				checked:false,
-        configs:config,
-				// 是否展示手机号码授权弹窗，默认第一步不展示，要先获取用户基础信息
-				phoneAuthPopup: false,
-				// 授权信息展示，商城名称
-				projectName: config.name,
-				//微信返回信息，用于揭秘信息，获取sessionkey
-				code: "",
-				//微信昵称
-				nickName: "",
-        logingFlag: false,
-				//微信头像
-				image: "",
-			};
-		},
+const store = useStore()
+const lightColor = computed(() => store.getters.lightColor)
 
-		//微信小程序进入页面，先获取code，否则几率出现code和后续交互数据不对应情况
-		mounted() {
-			// 小程序默认分享
-			uni.showShareMenu({
-				withShareTicket: true
-			});
+const checked = ref(false)
+const configs = config
+const phoneAuthPopup = ref(false)
+const projectName = ref(config.name)
+const code = ref('')
+const nickName = ref('')
+const logingFlag = ref(false)
+const image = ref('')
 
+onMounted(() => {
+  uni.showShareMenu({ withShareTicket: true })
+  uni.login({
+    success: (res) => {
+      if (res.errMsg === 'login:ok') {
+        code.value = res.code
+      } else {
+        uni.showToast({
+          title: '系统异常，请联系管理员！',
+        })
+      }
+    },
+  })
+})
 
-      //获取code
-      uni.login({
-        success: (res) => {
-          if(res.errMsg === "login:ok") {
-            this.code = res.code
-          } else {
-            uni.showToast({
-              title: "系统异常，请联系管理员！"
-            })
-          }
-        },
-      });
-			
-		},
-		methods: {
-			/**
-			 * TODO 此方法不一定是最优解，如果有更好的办法请在  https://gitee.com/beijing_hongye_huicheng/lilishop/issues 中提出
-			 * 小程序返回bug
-			 * 1.介于微信登录是在login.vue的基础上作为判断跳转来
-			 * 所以在页面栈中会自动记录回退路径，所以导致每次微信小程序点击回退就会自动返回login页面
-			 * 当然login页面的判断就是 没有登录就会跳转到微信小程序页面 导致了无法回退到之前页面
-			 * 2.解决方法： 尝试在回退的时候判断地址，让回退多一级这样就避免了
-			 */
+function back() {
+  whetherNavigate('wx')
+}
 
-			back() {
-				whetherNavigate("wx");
-			},
-			backToHome() {
-				uni.switchTab({
-					url: `/pages/tabbar/home/index`,
-				});
-			},
+function backToHome() {
+  uni.switchTab({
+    url: '/pages/tabbar/home/index',
+  })
+}
 
+function completeLogin(accessToken: string, refreshToken: string) {
+  storage.setAccessToken(accessToken)
+  storage.setRefreshToken(refreshToken)
+  uni.showToast({
+    title: '登录成功!',
+    icon: 'none',
+  })
+  getUserInfo().then((user) => {
+    storage.setUserInfo(user.data.result)
+    storage.setHasLogin(true)
+    uni.navigateBack({ delta: 1 })
+  })
+}
 
+function getUserProfile() {
+  if (!checked.value) {
+    uni.showToast({
+      title: '请勾选协议',
+      icon: 'none',
+    })
+    return
+  }
+  logingFlag.value = true
 
+  if (!code.value) return
 
-			//获取用户信息
-      getUserProfile(e) {
-				if(!this.checked){
-					uni.showToast({
-						title:"请勾选协议",
-						icon:'none'
-					})
-					return
-				}
-        this.logingFlag = true;
+  uni.getUserProfile({
+    desc: '用于完善会员资料',
+    success: (res) => {
+      nickName.value = res.userInfo.nickName
+      image.value = res.userInfo.avatarUrl
 
-        if (this.code) {
-          // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
-          uni.getUserProfile({
-            desc: "用于完善会员资料", // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
-            success: (res) => {
-              console.log("success", res)
-              this.nickName = res.userInfo.nickName;
-              this.image = res.userInfo.avatarUrl;
+      if (configs.enableFetchMobileLogin) {
+        phoneAuthPopup.value = true
+        return
+      }
 
-              /**
-               * 根据公有的配置设置登录方式
-               */
-              if(this.configs.enableFetchMobileLogin){
-                this.phoneAuthPopup = true;
-                return false
-              }
-              let iv = res.iv;
-              let encryptedData = res.encryptedData;
+      mpAutoLogin({
+        encryptedData: res.encryptedData,
+        iv: res.iv,
+        code: code.value,
+        image: image.value,
+        nickName: nickName.value,
+      }).then((apiRes) => {
+        completeLogin(apiRes.data.result.accessToken, apiRes.data.result.refreshToken)
+      })
+    },
+    fail: (res) => {
+      console.log('fail', res)
+    },
+  })
 
-              let code = this.code;
-              let image = this.image;
-              let nickName = this.nickName;
-              mpAutoLogin({
-                encryptedData,
-                iv,
-                code,
-                image,
-                nickName,
-              }).then((apiRes) => {
-                storage.setAccessToken(apiRes.data.result.accessToken);
-                storage.setRefreshToken(apiRes.data.result.refreshToken);
-                // 登录成功
-                uni.showToast({
-                  title: "登录成功!",
-                  icon: "none",
-                });
-                //获取用户信息
-                getUserInfo().then((user) => {
-                  storage.setUserInfo(user.data.result);
-                  storage.setHasLogin(true);
+  logingFlag.value = false
+}
 
-                  uni.navigateBack({
-                    delta: 1,
-                  });
-                });
-              });
+function getPhoneNumber(e: any) {
+  const { iv, encryptedData } = e.detail
+  if (!encryptedData) {
+    uni.showToast({
+      title: '请授予手机号码权限，手机号码会和会员系统用户绑定！',
+      icon: 'none',
+    })
+    return
+  }
 
-            },
-            fail: (res) => {
-              console.log("fail", res)
-            },
-          });
-
-          this.logingFlag = false;
-        }
-			},
-
-			//获取手机号授权
-			getPhoneNumber(e) {
-			  let iv = e.detail.iv;
-			  let encryptedData = e.detail.encryptedData;
-			  if (!e.detail.encryptedData) {
-			    uni.showToast({
-			      title: "请授予手机号码权限，手机号码会和会员系统用户绑定！",
-			      icon: "none",
-			    });
-			    return;
-			  }
-
-			  let code = this.code;
-			  let image = this.image;
-			  let nickName = this.nickName;
-			  mpAutoLogin({
-			    encryptedData,
-			    iv,
-			    code,
-			    image,
-			    nickName,
-			  }).then((res) => {
-			    storage.setAccessToken(res.data.result.accessToken);
-			    storage.setRefreshToken(res.data.result.refreshToken);
-			    // 登录成功
-			    uni.showToast({
-			      title: "登录成功!",
-			      icon: "none",
-			    });
-			    //获取用户信息
-			    getUserInfo().then((user) => {
-			      storage.setUserInfo(user.data.result);
-			      storage.setHasLogin(true);
-
-			      uni.navigateBack({
-			        delta: 1,
-			      });
-			    });
-			  });
-			},
-
-
-
-
-		},
-	};
+  mpAutoLogin({
+    encryptedData,
+    iv,
+    code: code.value,
+    image: image.value,
+    nickName: nickName.value,
+  }).then((res) => {
+    completeLogin(res.data.result.accessToken, res.data.result.refreshToken)
+  })
+}
 </script>
 <style lang="scss" scoped>
 	/*微信授权*/
diff --git a/pages/product/askList.vue b/pages/product/askList.vue
index b9b0938..cfb6994 100644
--- a/pages/product/askList.vue
+++ b/pages/product/askList.vue
@@ -25,7 +25,7 @@
         <u-col span="12">
           <u-row :gutter="12">
             <u-col :offset="1" span="4">
-              <u-button class="btns" @click="askValue=''">清空</u-button>
+              <u-button class="btns" @click="params.askValue=''">清空</u-button>
             </u-col>
             <u-col :offset="2" span="4">
               <u-button class="btns" @click="getAskMessage()" type="success">提交</u-button>
@@ -36,75 +36,83 @@
     </div>
   </div>
 </template>
-<script>
-import * as API_GOODS from "../../api/goods";
-import * as API_MEM from "../../api/members";
-export default {
-  data() {
-    return {
-      askGoods: "",
-      queryGoodsDetail: "",
-      border: true,
-      params: {
-        askValue: "",
-        anonymous: "YES",
-      },
-    };
-  },
-  onLoad(options) {
-    this.askGoods = options;
-    this.getGoodsData();
-  },
-  methods: {
-    getGoodsData() {
-      if (this.askGoods.goods_id) {
-        API_GOODS.getGoods(this.askGoods.goods_id).then((result) => {
-          this.queryGoodsDetail = result.data;
-        });
-      }
-    },
-    getAskMessage() {
-      uni.showLoading();
-      if (this.params.askValue == "") {
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import * as API_GOODS from '../../api/goods'
+import * as API_MEM from '../../api/members'
+import { useStore } from '@/store'
+
+const store = useStore()
+
+const askGoods = ref<any>('')
+const queryGoodsDetail = ref<any>('')
+const border = ref(true)
+const params = reactive({
+  askValue: '',
+  anonymous: 'YES',
+})
+
+function getGoodsData() {
+  if (askGoods.value.goods_id) {
+    API_GOODS.getGoods(askGoods.value.goods_id).then((result) => {
+      queryGoodsDetail.value = result.data
+    })
+  }
+}
+
+function getAskMessage() {
+  uni.showLoading()
+  if (params.askValue == '') {
+    uni.showToast({
+      title: '请填写内容!',
+      icon: 'none',
+    })
+    if (store.state.isShowToast) {
+      uni.hideLoading()
+    }
+    return false
+  }
+  API_MEM.consultating(
+    askGoods.value.goods_id,
+    params.askValue,
+    params.anonymous
+  )
+    .then((res) => {
+      if (res.statusCode == 200) {
         uni.showToast({
-          title: "请填写内容!",
-          icon: "none",
-        });
-         if (this.$store.state.isShowToast){ uni.hideLoading() };
-        return false;
-      }
-      API_MEM.consultating(
-        this.askGoods.goods_id,
-        this.params.askValue,
-        this.params.anonymous
-      )
-        .then((res) => {
-          if (res.statusCode == 200) {
-            uni.showToast({
-              title: "提交成功!",
-              icon: "none",
-            });
-            this.askValue = "";
-          }
-           if (this.$store.state.isShowToast){ uni.hideLoading() };
+          title: '提交成功!',
+          icon: 'none',
         })
-        .catch((err) => {
-        
-           if (this.$store.state.isShowToast){ uni.hideLoading() };
-        });
-    },
-    radioGroupChange(e) {
-     
-    },
-    radioChange(e) {
-      if (this.anonymous == "YES") {
-        this.anonymous = "NO";
-      } else {
-        this.anonymous = "YES";
+        params.askValue = ''
       }
-    },
-  },
-};
+      if (store.state.isShowToast) {
+        uni.hideLoading()
+      }
+    })
+    .catch(() => {
+      if (store.state.isShowToast) {
+        uni.hideLoading()
+      }
+    })
+}
+
+function radioGroupChange(_e: any) {}
+
+function radioChange(_e: any) {
+  if (params.anonymous == 'YES') {
+    params.anonymous = 'NO'
+  } else {
+    params.anonymous = 'YES'
+  }
+}
+
+function goodsDetail() {}
+
+onLoad((options: any) => {
+  askGoods.value = options
+  getGoodsData()
+})
 </script>
 <style scoped lang="scss">
 .img {
diff --git a/pages/product/comment.vue b/pages/product/comment.vue
index 80f132a..8f7518b 100644
--- a/pages/product/comment.vue
+++ b/pages/product/comment.vue
@@ -82,130 +82,129 @@
   </view>
 </template>
 
-<script>
-import * as membersApi from "@/api/members.js";
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+import { onLoad, onReachBottom } from '@dcloudio/uni-app'
+import * as membersApi from '@/api/members.js'
 import configs from '@/config/config'
-export default {
-  data() {
-    return {
-      configs,
-      status: "loadmore",
-      userImage: configs.defaultUserPhoto,
-      commentDetail: "",
-      selectIndex: "0",
-      params: {
-        pageNumber: 1,
-        pageSize: 10,
-        grade: "",
+import { noPassByName } from '@/utils/filters.js'
+
+const status = ref('loadmore')
+const userImage = configs.defaultUserPhoto
+const commentDetail = ref<any>('')
+const selectIndex = ref(0)
+const params = reactive<any>({
+  pageNumber: 1,
+  pageSize: 10,
+  grade: '',
+})
+const gradeList: Record<string, string> = {
+  GOOD: '好评',
+  MODERATE: '中评',
+  WORSE: '差评',
+  HAVEIMAGE: '有图',
+}
+const commDetail = ref<any[]>([])
+const opid = ref('')
+
+function commentScore(item: any) {
+  return item.descriptionScore || item.deliveryScore || 0
+}
+
+function splitImg(val: any) {
+  if (val && val.split(',')) {
+    return val.split(',')
+  } else if (val) {
+    return val
+  } else {
+    return false
+  }
+}
+
+function getGoodsCommentsFun(id: string) {
+  status.value = 'loading'
+  membersApi.getGoodsComments(id, params).then((res) => {
+    if (
+      res.data.result.records == [] ||
+      res.data.result.records == '' ||
+      res.data.result.records == null
+    ) {
+      status.value = 'noMore'
+      return false
+    }
+    commDetail.value = commDetail.value.concat(res.data.result.records)
+    status.value = 'loadmore'
+  })
+}
+
+function getGoodsCommentsNum(id: string) {
+  membersApi.getGoodsCommentsCount(id).then((res) => {
+    if (res.statusCode === 200) {
+      commentDetail.value = res.data.result
+    }
+  })
+}
+
+function select(index: number) {
+  Object.assign(params, {
+    pageNumber: 1,
+    pageSize: 10,
+  })
+  selectIndex.value = index
+  params.grade = ['', 'GOOD', 'MODERATE', 'WORSE', ''][selectIndex.value]
+  if (selectIndex.value === 4) {
+    params.haveImage = 1
+  }
+  commDetail.value = []
+  if (selectIndex.value === 0) {
+    Object.assign(params, {
+      pageNumber: 1,
+      pageSize: 10,
+      grade: '',
+    })
+  }
+  getGoodsCommentsFun(opid.value)
+}
+
+function preview(urls: string[], index: number) {
+  uni.previewImage({
+    current: index,
+    urls: urls,
+    longPressActions: {
+      itemList: ['保存图片'],
+      success: function () {
+        uni.showToast({
+          title: '保存成功',
+          duration: 2000,
+          icon: 'none',
+        })
       },
-      gradeList: {
-        GOOD: "好评",
-        MODERATE: "中评",
-        WORSE: "差评",
-        HAVEIMAGE: "有图",
+      fail: function () {
+        uni.showToast({
+          title: '保存失败',
+          duration: 2000,
+          icon: 'none',
+        })
       },
-      commDetail: [],
-      dataTotal: 0,
-      opid: "",
-    };
-  },
-  async onLoad(options) {
-    this.getGoodsCommentsFun(options.id);
-    this.getGoodsCommentsNum(options.id);
-    this.opid = options.id;
-  },
-
-  onReachBottom() {
-    this.params.pageNumber++;
-    this.getGoodsCommentsFun(this.opid);
-  },
-
-  methods: {
-    commentScore(item) {
-      return item.descriptionScore || item.deliveryScore || 0;
     },
+  })
+}
 
-    splitImg(val) {
-      if (val && val.split(",")) {
-        return val.split(",");
-      } else if (val) {
-        return val;
-      } else {
-        return false;
-      }
-    },
+function loadmore() {
+  params.pageNumber++
+  getGoodsCommentsFun(opid.value)
+}
 
-    getGoodsCommentsFun(id) {
-      this.status = "loading";
-      membersApi.getGoodsComments(id, this.params).then((res) => {
-        if (
-          res.data.result.records == [] ||
-          res.data.result.records == "" ||
-          res.data.result.records == null
-        ) {
-          this.status = "noMore";
-          return false;
-        }
-        this.commDetail = this.commDetail.concat(res.data.result.records);
-        this.dataTotal = res.data.result.total;
-        this.status = "loadmore";
-      });
-    },
+onLoad((options: any) => {
+  getGoodsCommentsFun(options.id)
+  getGoodsCommentsNum(options.id)
+  opid.value = options.id
+})
 
-    getGoodsCommentsNum(id) {
-      membersApi.getGoodsCommentsCount(id).then((res) => {
-        if (res.statusCode === 200) {
-          this.commentDetail = res.data.result;
-        }
-      });
-    },
-
-    select(index) {
-      this.params = {
-        pageNumber: 1,
-        pageSize: 10,
-      };
-      this.selectIndex = index;
-      this.params.grade = ["", "GOOD", "MODERATE", "WORSE", ""][
-        this.selectIndex
-      ];
-      this.selectIndex === 4 ? (this.params.haveImage = 1) : true;
-      this.commDetail = [];
-      if (this.selectIndex === 0) {
-        this.params = {
-          pageNumber: 1,
-          pageSize: 10,
-          grade: "",
-        };
-      }
-      this.getGoodsCommentsFun(this.opid);
-    },
-
-    preview(urls, index) {
-      uni.previewImage({
-        current: index,
-        urls: urls,
-        longPressActions: {
-          itemList: ["保存图片"],
-          success: function () {
-            uni.showToast({
-              title: "保存成功",
-              duration: 2000,
-              icon: "none",
-            });
-          },
-          fail: function () {
-            uni.showToast({
-              title: "保存失败",
-              duration: 2000,
-              icon: "none",
-            });
-          },
-        },
-      });
-    },
-  },
-};
+onReachBottom(() => {
+  params.pageNumber++
+  getGoodsCommentsFun(opid.value)
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/product/customerservice/index.vue b/pages/product/customerservice/index.vue
index d245785..d942c71 100644
--- a/pages/product/customerservice/index.vue
+++ b/pages/product/customerservice/index.vue
@@ -3,89 +3,81 @@
 		<chat></chat>
 	</view>
 </template>
-<script>
-	export default {
-		data() {
-			return {
-				
-			}
-		},
-		methods: {
-			
-		},
-		onLoad (e) {
-			// 腾讯云智服客服插件需在 manifest.json 的 mp-weixin.plugins 中注册后方可使用，
-			// 未注册时 requirePlugin 会抛出 "has not registered any plugins"，此处做容错处理。
-			let chat
-			try {
-				chat = requirePlugin('myPlugin')
-			} catch (err) {
-				uni.showToast({
-					title: '客服功能暂未配置',
-					icon: 'none',
-					duration: 2000
-				})
-				return
-			}
-			const params = JSON.parse((decodeURIComponent(e.params)))
-			chat.init({
-				sign: params.mpSign,  //必传，公司渠道唯一标识，腾讯云智服后台系统创建「小程序插件」渠道后，在「渠道管理」获取
-				token: params.token, //非必填
-				uid: params.uuid,   //用户唯一标识，如果没有则不填写，默认为空
-				title: params.storageName, //非必填，如果未填写，默认获取配置标题
-				isRMB: '', //商品是否显示人民币￥,默认显示，false不显示
-				data: {    //参数c1,c2,c3,c4,c5用于传递用户信息，参数d1,d2,d3,d4,d5,d6用于传递商品信息，默认为空
-				  c1: '',
-				  c2: '',
-				  c3: '',
-				  c4: '',
-				  c5: '',
-				  d1: params.goodsName, //商品描述
-				  d2: params.price, //价格
-				  d3: '', //原价格
-				  d4: params.goodsImg, //展示商品图片链接
-				  d5: '', //商品跳转链接
-				  d6: params.goodsId, //商品id
-				  data: ''//加密串,非必填
-				},
-				viewUrl(res){  //需要跳转外部链接，则需要配置一个web-view
-				if (res) {
-				  wx.navigateTo({
-					url: '/pages/webview/index?href=' + res
-				  })
-				}
-				},
-				setTitle(res){  //设置标题
-				if (res) {
-				  wx.setNavigationBarTitle({
-					title: res
-				  })
-				}
-				},
-				setBarColor(res) {   //设置导航栏背景色
-				if (res) {
-				  wx.setNavigationBarColor({
-					frontColor: '#ffffff',
-					backgroundColor: res
-				  })
-				}
-				},
-				success(res){  //初始化成功时调用
-				if (res.data == 'success') {
-				  console.log('success');
-				}
-				},
-				fail(res){    //初始化失败时调用
-				if (res.data == 'initError') {
-				  console.log(res.message);
-				}
-				},
-				leave(res){       //离开会话页面
-				if (res) {
-				  console.log(res);
-				}
-				}
-			})
-		}
+<script setup lang="ts">
+import { onLoad } from '@dcloudio/uni-app'
+
+onLoad((e: any) => {
+	// 腾讯云智服客服插件需在 manifest.json 的 mp-weixin.plugins 中注册后方可使用，
+	// 未注册时 requirePlugin 会抛出 "has not registered any plugins"，此处做容错处理。
+	let chat
+	try {
+		chat = requirePlugin('myPlugin')
+	} catch (err) {
+		uni.showToast({
+			title: '客服功能暂未配置',
+			icon: 'none',
+			duration: 2000
+		})
+		return
 	}
-</script>
\ No newline at end of file
+	const params = JSON.parse(decodeURIComponent(e.params))
+	chat.init({
+		sign: params.mpSign,
+		token: params.token,
+		uid: params.uuid,
+		title: params.storageName,
+		isRMB: '',
+		data: {
+		  c1: '',
+		  c2: '',
+		  c3: '',
+		  c4: '',
+		  c5: '',
+		  d1: params.goodsName,
+		  d2: params.price,
+		  d3: '',
+		  d4: params.goodsImg,
+		  d5: '',
+		  d6: params.goodsId,
+		  data: ''
+		},
+		viewUrl(res: string){
+		if (res) {
+		  wx.navigateTo({
+			url: '/pages/webview/index?href=' + res
+		  })
+		}
+		},
+		setTitle(res: string){
+		if (res) {
+		  wx.setNavigationBarTitle({
+			title: res
+		  })
+		}
+		},
+		setBarColor(res: string) {
+		if (res) {
+		  wx.setNavigationBarColor({
+			frontColor: '#ffffff',
+			backgroundColor: res
+		  })
+		}
+		},
+		success(res: any){
+		if (res.data == 'success') {
+		  console.log('success');
+		}
+		},
+		fail(res: any){
+		if (res.data == 'initError') {
+		  console.log(res.message);
+		}
+		},
+		leave(res: any){
+		if (res) {
+		  console.log(res);
+		}
+		}
+	})
+})
+</script>
diff --git a/pages/product/goods.vue b/pages/product/goods.vue
index 805a765..3d93232 100644
--- a/pages/product/goods.vue
+++ b/pages/product/goods.vue
@@ -6,49 +6,85 @@
     <!-- 仅h5有效 打开App -->
 
     <!-- 分享 -->
-    <shares v-if="enableShare && goodsDetail.id" :skuId="this.routerVal.id" :goodsId="this.routerVal.goodsId" :link="
+    <shares v-if="enableShare && goodsDetail.id" :skuId="routerVal.id" :goodsId="routerVal.goodsId" :link="
       '/pages/product/goods?id=' +
-      this.routerVal.id +
+      routerVal.id +
       '&goodsId=' +
-      this.routerVal.goodsId
+      routerVal.goodsId
     " :thumbnail="goodsDetail.thumbnail" :goodsName="goodsDetail.goodsName" type="goods"
       @close="enableShare = false" />
     <popups v-model="popupsSwitch" @tapPopup="handleNavbarList" :popData="navbarListData" :x="navbarListX"
       :y="navbarListY" placement="top-start" />
     <view class="index">
       <!-- topBar -->
-      <u-navbar :bg-color="navbar.background" :auto-back="false" @leftClick="back" :class="headerFlag ? 'header' : 'header bg-none scroll-hide'">
-        <div class="headerRow">
-          <div class="backs">
-            <u-icon @click="back()" name="arrow-left" class="icon-back"></u-icon>
-
-            <u-icon name="list" @click="popupsSwitch = !popupsSwitch" class="icon-list"></u-icon>
-          </div>
-          <div class="headerList" :class="headerFlag ? 'tab-bar' : 'tab-bar scroll-hide'">
-            <div class="headerRow">
-              <div class="nav-item" v-for="header in headerList" :key="header.id"
-                :class="{ cur: scrollId === header.id }" @click="headerTab(header.id)">
+      <u-navbar
+        :fixed="true"
+        :placeholder="false"
+        :safe-area-inset-top="true"
+        :border="false"
+        :bg-color="navbar.background"
+        :auto-back="false"
+        :class="headerFlag ? 'header' : 'header bg-none scroll-hide'"
+      >
+        <template #left>
+          <view class="backs" @tap.stop>
+            <view class="nav-action" @tap.stop="back()">
+              <u-icon name="arrow-left" class="icon-back"></u-icon>
+            </view>
+            <view class="nav-action" @tap.stop="popupsSwitch = !popupsSwitch">
+              <u-icon name="list" class="icon-list"></u-icon>
+            </view>
+          </view>
+        </template>
+        <template #center>
+          <view class="headerList" :class="headerFlag ? 'tab-bar' : 'tab-bar scroll-hide'">
+            <view class="headerRow headerRow--tabs">
+              <view
+                class="nav-item"
+                v-for="header in headerList"
+                :key="header.id"
+                :class="{ cur: scrollId === header.id }"
+                @tap.stop="headerTab(header.id)"
+              >
                 {{ header.text }}
-              </div>
-            </div>
-          </div>
-        </div>
+              </view>
+            </view>
+          </view>
+        </template>
       </u-navbar>
 
-      <u-navbar :border="false" v-show="!headerFlag" class="header-only-back" :bg-color="navbarOnlyBack.background"
-        :auto-back="false" @leftClick="back">
-        <div>
-          <div class="bg-back">
-            <u-icon size="40" @click="back()" name="arrow-left" class="icon-back"></u-icon>
-            <u-icon size="40" @click="popupsSwitch = !popupsSwitch" name="list" class="icon-list"></u-icon>
-          </div>
-        </div>
+      <u-navbar
+        :border="false"
+        v-show="!headerFlag"
+        :fixed="true"
+        :placeholder="false"
+        :safe-area-inset-top="true"
+        class="header-only-back"
+        :bg-color="navbarOnlyBack.background"
+        :auto-back="false"
+      >
+        <template #left>
+          <view class="bg-back" @tap.stop>
+            <view class="nav-action" @tap.stop="back()">
+              <u-icon size="20" name="arrow-left" class="icon-back"></u-icon>
+            </view>
+            <view class="nav-action" @tap.stop="popupsSwitch = !popupsSwitch">
+              <u-icon size="20" name="list" class="icon-list"></u-icon>
+            </view>
+          </view>
+        </template>
       </u-navbar>
     </view>
 
-    <view class="product-container" :style="{ height: productRefHeight }" ref="productRef" id="productRef">
-      <scroll-view scroll-anchoring enableBackToTop="true" scroll-with-animation scroll-y class="scroll-page"
-        :scroll-top="tabScrollTop" @scroll="pageScroll">
+    <view class="product-container" id="productRef">
+      <scroll-view
+        enableBackToTop="true"
+        scroll-with-animation
+        scroll-y
+        class="scroll-page"
+        :scroll-top="tabScrollTop"
+        @scroll="pageScroll"
+      >
         <view class="scroll-inner">
           <!-- 轮播图 -->
          
@@ -231,760 +267,546 @@
         <!-- 拼团结算 -->
         <view class="detail-btn" v-else-if="isGroup">
           <view class="to-store-car pt-buy to-store-btn" @click="shutMask(4, 'buy')">
-            <view>￥{{unitPrice(goodsDetail.price) }}</view>
+            <view>￥{{unitPrice(goodsDetail.price)}}</view>
             <view>单独购买</view>
           </view>
           <view class="to-buy pt-buy to-store-btn" @click="toAssembleBuyNow">
-            <view>￥{{unitPrice(goodsDetail.promotionPrice) }}</view>
+            <view>￥{{unitPrice(goodsDetail.promotionPrice)}}</view>
             <view>拼团价格</view>
           </view>
         </view>
       </view>
-      <!-- 规格-模态层弹窗 -->
-      <view class="spec">
-        <!-- 促销弹窗 -->
-        <u-popup v-model:show="promotionShow" :height="setup.height" :mode="setup.mode" :border-radius="setup.radius"
-          @close="promotionShow = false" :mask-close-able="setup.close" closeable>
-          <view class="header-title">优惠</view>
-          <view class="cuxiao">
-            <scroll-view class="scroll_mask" :scroll-y="true">
-              <view class="con-cuxiao">
-                <view class="cuxiao-title">促销活动</view>
-                <PromotionDetailsLayout :res="PromotionList" />
-              </view>
-              <view class="con-cuxiao coupons">
-                <view class="cuxiao-title">可领优惠券</view>
-                <PromotionCoupon @getCoupon="getCoupon" :res="PromotionList" />
-              </view>
-            </scroll-view>
-          </view>
-        </u-popup>
+    </view>
+    <!-- 规格-模态层弹窗 -->
+    <view class="spec">
+      <!-- 促销弹窗 -->
+      <u-popup v-model:show="promotionShow" :height="setup.height" :mode="setup.mode" :border-radius="setup.radius"
+        @close="promotionShow = false" :mask-close-able="setup.close" closeable>
+        <view class="header-title">优惠</view>
+        <view class="cuxiao">
+          <scroll-view class="scroll_mask" :scroll-y="true">
+            <view class="con-cuxiao">
+              <view class="cuxiao-title">促销活动</view>
+              <PromotionDetailsLayout :res="PromotionList" />
+            </view>
+            <view class="con-cuxiao coupons">
+              <view class="cuxiao-title">可领优惠券</view>
+              <PromotionCoupon @getCoupon="getCoupon" :res="PromotionList" />
+            </view>
+          </scroll-view>
+        </view>
+      </u-popup>
 
-        <!-- 配送地址弹窗 -->
-        <popupAddress @closeAddress="closePopupAddress" @deliveryData="deliveryFun" v-if="goodsDetail.id"
-          :goodsId="goodsDetail.id" :addressFlag="addressFlag" />
+      <!-- 配送地址弹窗 -->
+      <popupAddress @closeAddress="closePopupAddress" @deliveryData="deliveryFun" v-if="goodsDetail.id"
+        :goodsId="goodsDetail.id" :addressFlag="addressFlag" />
 
-        <!-- 商品规格  商品详情，以及默认参与活动的id-->
-        <popupGoods :addr="delivery" ref="popupGoods" @changed="changedGoods" @closeBuy="closePopupBuy"
-          @queryCart="cartCount()" :goodsDetail="goodsDetail" :goodsSpec="goodsSpec" :isGroup="isGroup" :id="productId"
-          v-if="goodsDetail.id" :pointDetail="pointDetail" :wholesaleList="wholesaleList" @handleClickSku="selectSku"
-          :buyMask="buyMask" />
+      <!-- 商品规格  商品详情，以及默认参与活动的id-->
+      <popupGoods :addr="delivery" ref="popupGoodsRef" @changed="changedGoods" @closeBuy="closePopupBuy"
+        @queryCart="cartCount()" :goodsDetail="goodsDetail" :goodsSpec="goodsSpec" :isGroup="isGroup" :id="productId"
+        v-if="goodsDetail.id" :pointDetail="pointDetail" :wholesaleList="wholesaleList" @handleClickSku="selectSku"
+        :buyMask="buyMask" />
 
-
-        <!-- 下架框 -->
-        <takeDownFormSaleGoods ref="takeDownSale" v-if="takeDownFromSale" />
-      </view>
+      <!-- 下架框 -->
+      <takeDownFormSaleGoods ref="takeDownSaleRef" v-if="takeDownFromSale" />
     </view>
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 /************接口API***************/
-import { getGoods, getGoodsList, getMpScene, getGoodsDistribution } from "@/api/goods.js";
-import * as API_trade from "@/api/trade.js";
-import * as API_Members from "@/api/members.js";
-import * as API_store from "@/api/store.js";
-import { getIMDetail } from "@/api/common";
-import { modelNavigateTo } from "@/pages/tabbar/home/template/tpl.js";
+import { ref, reactive, computed, watch, nextTick, getCurrentInstance } from 'vue'
+import { onLoad, onShow } from '@dcloudio/uni-app'
+import { getGoods, getGoodsList, getMpScene, getGoodsDistribution } from '@/api/goods.js'
+import * as API_trade from '@/api/trade.js'
+import * as API_Members from '@/api/members.js'
+import * as API_store from '@/api/store.js'
+import { getIMDetail } from '@/api/common'
+import { modelNavigateTo } from '@/pages/tabbar/home/template/tpl.js'
 /************请求存储***************/
-import storage from "@/utils/storage.js";
+import storage from '@/utils/storage.js'
+/************工具函数***************/
+import { useStore } from '@/store'
+import { unitPrice, goodsFormatPrice, isLogin, parseGoodsImageUrl, clearStrComma, talkIm } from '@/utils/filters.js'
 
 /************组件***************/
-import PromotionLayout from "./product/promotion/-promotion"; //促销组件
-import PromotionDetailsLayout from "./product/promotion/-promotion-details"; //促销活动详情
-import PromotionAssembleLayout from "./product/promotion/-promotion-assemble-promotions"; //促销活动条
-import PromotionAssembleListLayout from "./product/promotion/-promotion-assemble-list"; //拼团用户列表
-import PromotionCoupon from "./product/promotion/-promotion-coupon"; //优惠券组件
-import GoodsIntro from "./product/goods/-goods-intro"; //商品介绍组件
-import GoodsRecommend from "./product/goods/-goods-recommend"; //宝贝推荐
-import storeLayout from "./product/shop/-shop"; //店铺组件
-import Evaluation from "./product/evaluation/-evaluation"; //评价组件
-import GoodsSwiper from "./product/goods/-goods-swiper"; //轮播图组件
-import popupGoods from "@/components/m-buy/goods"; //购物车商品的模块
-import popupAddress from "./product/popup/address"; //地址选择模块
-import shares from "@/components/m-share/index"; //分享
-import popups from "@/components/popups/popups"; //气泡框
-import takeDownFormSaleGoods from "@/components/m-take-down-sale-goods/index"; //下架框
-import setup from "./product/popup/popup";
+import PromotionLayout from './product/promotion/-promotion'
+import PromotionDetailsLayout from './product/promotion/-promotion-details'
+import PromotionAssembleLayout from './product/promotion/-promotion-assemble-promotions'
+import PromotionAssembleListLayout from './product/promotion/-promotion-assemble-list'
+import PromotionCoupon from './product/promotion/-promotion-coupon'
+import GoodsIntro from './product/goods/-goods-intro'
+import GoodsRecommend from './product/goods/-goods-recommend'
+import storeLayout from './product/shop/-shop'
+import Evaluation from './product/evaluation/-evaluation'
+import GoodsSwiper from './product/goods/-goods-swiper'
+import popupGoods from '@/components/m-buy/goods'
+import popupAddress from './product/popup/address'
+import shares from '@/components/m-share/index'
+import popups from '@/components/popups/popups'
+import takeDownFormSaleGoods from '@/components/m-take-down-sale-goods/index'
+import setup from './product/popup/popup'
 
-export default {
-  components: {
-    popups,
-    shares,
-    PromotionLayout,
-    PromotionDetailsLayout,
-    PromotionAssembleLayout,
-    PromotionAssembleListLayout,
-    PromotionCoupon,
-    GoodsIntro,
-    GoodsRecommend,
-    storeLayout,
-    Evaluation,
-    GoodsSwiper,
-    popupGoods,
-    popupAddress,
-    takeDownFormSaleGoods
-  },
-  data () {
-    return {
-      setup,
-      promotionShow: false, //弹窗开关
-      // #ifdef H5
-      navbarListX: 110, //导航栏列表栏x轴
-      navbarListY: 80, //导航栏列表栏y轴
-      // #endif
-      // #ifdef MP-WEIXIN
-      navbarListX: 100, //导航栏列表栏x轴
-      navbarListY: 140, //导航栏列表栏y轴
-      // #endif
-      // #ifdef APP-PLUS
-      navbarListX: 120, //导航栏列表栏x轴
-      navbarListY: 170, //导航栏列表栏y轴
-      // #endif
-      navbarListData: [
-        //导航栏列表栏数据
-        {
-          title: "首页",
-          icon: "home-fill",
-          ___type: "other",
-        },
-        {
-          title: "购物车",
-          icon: "bag-fill",
-          ___type: "other",
-        },
-        {
-          title: "搜索",
-          icon: "search",
-          ___type: "category",
-        },
-        {
-          title: "个人中心",
-          icon: "account-fill",
-          ___type: "other",
-        },
-      ],
-      popupsSwitch: false, //导航栏列表栏开关
-      enableShare: false,
-      selectedGoods: "", //选择的商品规格昵称
-      isGroup: false, // 是否是拼团活动
-      isSeckill: false, // 是否秒杀活动
-      pointDetail: "", // 是否是积分商品
-      assemble: "", //拼团的sku
-      navbarOnlyBack: {
-        background: "transparent",
-      },
-      navbar: {
-        background: "#fff",
-      },
+const store = useStore()
+const instance = getCurrentInstance()
+const popupGoodsRef = ref()
+const takeDownSaleRef = ref()
 
-      productRefHeight: "",
-      header: {
-        top: 0,
-        height: 50,
-      },
-      goodsParams: [], // 商品参数
-      headerFlag: false, //顶部导航显示与否
-      headerList: [
-        //顶部导航文字按照规则来 详情全局搜索
-        {
-          text: "商品",
-          id: "1",
-        },
-        {
-          text: "评价",
-          id: "2",
-        },
-        {
-          text: "详情",
-          id: "3",
-        },
-        {
-          text: "推荐",
-          id: "4",
-        },
-      ],
-      tabScrollTop: null,
-      scrollArr: [],
-      scrollId: "1",
-      scrollFlag: true,
-      current: "1", //当前显示的轮播图页
-      goodsDetail: {}, //商品数据
-      goodsSpec: "", //规格数据
-      imgList: [], //轮播图数据
-      favorite: false, //收藏与否flag
-      recommendList: [], //推荐列表
-      // maskFlag: false, //模态显示与否
-      goodsInfo: false, //商品介绍弹窗
-      addressFlag: false, //配送地址弹窗
-      buyMask: false, //添加购物车直接购买，查看已选 弹窗
-      num: 1, //添加到购物车的数量
-      skuId: "", //
-      storeDetail: "", //店铺基本信息,
-      // 店铺信息
-      storeParams: {
-        pageNumber: 1,
-        pageSize: 10,
-      },
+// 响应式数据
+const promotionShow = ref(false)
+let navbarListX: any
+let navbarListY: any
+// #ifdef H5
+navbarListX = ref(110)
+navbarListY = ref(80)
+// #endif
+// #ifdef MP-WEIXIN || APP-PLUS
+// #ifndef H5
+navbarListX = ref(120)
+navbarListY = ref(170)
+// #endif
+// #endif
+const navbarListData = [
+  { title: "首页", icon: "home-fill", ___type: "other" },
+  { title: "购物车", icon: "bag-fill", ___type: "other" },
+  { title: "搜索", icon: "search", ___type: "category" },
+  { title: "个人中心", icon: "account-fill", ___type: "other" },
+]
+const popupsSwitch = ref(false)
+const enableShare = ref(false)
+const selectedGoods = ref<any>("")
+const isGroup = ref(false)
+const isSeckill = ref(false)
+const pointDetail = ref<any>("")
+const assemble = ref<any>("")
+const navbarOnlyBack = reactive({ background: "transparent" })
+const navbar = reactive({ background: "#fff" })
+const header = reactive({ top: 0, height: 50 })
+const goodsParams = ref<any[]>([])
+const headerFlag = ref(false)
+const headerList = [
+  { text: "商品", id: "1" },
+  { text: "评价", id: "2" },
+  { text: "详情", id: "3" },
+  { text: "推荐", id: "4" },
+]
+const tabScrollTop = ref<any>(null)
+const scrollArr = ref<number[]>([])
+const scrollId = ref("1")
+const scrollFlag = ref(true)
+const current = ref("1")
+const goodsDetail = ref<any>({})
+const goodsSpec = ref<any>("")
+const imgList = ref<any[]>([])
+const favorite = ref(false)
+const recommendList = ref<any[]>([])
+const addressFlag = ref(false)
+const buyMask = ref(false)
+const num = ref(1)
+const skuId = ref<any>("")
+const storeDetail = ref<any>("")
+const storeParams = reactive({
+  pageNumber: 1,
+  pageSize: 10,
+})
+const likeGoodsList = ref<any[]>([])
+const PromotionList = ref<any>("")
+const specList = ref<any[]>([])
+const selectedSpec = ref<any[]>([])
+const nums = ref(0)
+const delivery = ref<any>("")
+const exchange = ref<any>({})
+const productId = ref(0)
+const startTimer = ref(false)
+const routerVal = ref<any>("")
+const IMLink = ref("")
+const wholesaleList = ref<any[]>([])
+const takeDownFromSale = ref(false)
 
-      likeGoodsList: [], //相似商品列表
-      PromotionList: "", //活动,促销，列表
-      specList: [],
-      selectedSpec: [],
-      nums: 0,
-      delivery: "",
+// computed
+const IM = computed(() => {
+  return IMLink.value + storeDetail.value.merchantEuid
+})
 
-      exchange: {},
-      productId: 0,
-
-      startTimer: false, //未开启 是false
-
-      routerVal: "",
-      IMLink: "", // IM地址
-      wholesaleList: [],
-      takeDownFromSale: false, // 下架销售状态
-    };
-  },
-
-  computed: {
-    // udesk IM 
-    IM () {
-      return this.IMLink + this.storeDetail.merchantEuid;
-    },
-  },
-
-  watch: {
-    isGroup (val) {
-      if (val) {
-        let timer = setInterval(() => {
-          this.$refs.popupGoods.buyType = "PINTUAN";
-          clearInterval(timer);
-        }, 100);
-      } else {
-        this.$refs.popupGoods.buyType = "";
+// watch
+watch(isGroup, (val) => {
+  if (val) {
+    let timer = setInterval(() => {
+      if (popupGoodsRef.value) {
+        (popupGoodsRef.value as any).buyType = "PINTUAN"
       }
-    },
-  },
-  mounted () {
-    this.calcProductHeight();
-  },
-  async onLoad (options) {
-    this.routerVal = options;
-    // #ifdef MP-WEIXIN
-    // 小程序默认分享
-    uni.showShareMenu({
-      withShareTicket: true,
-      menus: ["shareAppMessage", "shareTimeline"],
-    });
-    // #endif
-  },
-  async onShow () {
-    this.goodsDetail = {};
-    //如果有参数ids说明事分销短连接，需要获取参数
-    if (this.routerVal.scene) {
-      getMpScene(this.routerVal.scene).then((res) => {
-        if (res.data.success) {
-          let data = res.data.result.split(","); // skuId,goodsId,distributionId
-          this.init(data[0], data[1], data[2]);
-        }
-      });
-    } else {
-      this.init(this.routerVal.id, this.routerVal.goodsId, this.routerVal.distributionId);
+      clearInterval(timer)
+    }, 100)
+  } else {
+    if (popupGoodsRef.value) {
+      (popupGoodsRef.value as any).buyType = ""
     }
-  },
+  }
+})
 
-  methods: {
-    calcProductHeight () {
-      this.$nextTick(() => {
-        const { windowHeight } = uni.getWindowInfo();
-        uni.createSelectorQuery()
-          .in(this)
-          .select('#pageBottom')
-          .boundingClientRect((data) => {
-            const bottomHeight = data && data.height ? data.height : 0;
-            this.productRefHeight = `${windowHeight - bottomHeight}px`;
-          })
-          .exec();
-      });
-    },
-    // 重新打开下架
-    reStartTakeDownSale(){
-      this.$refs.takeDownSale.show = true
-    },
-    share () {
-      return `/pages/product/goods?id=${this.routerVal.id}&goodsId=${this.routerVal.goodsId}`;
-    },
-    /**
-     * 导航栏列表栏
-     */
-    handleNavbarList (val) {
-      modelNavigateTo({ url: val });
-    },
+// 生命周期
+onLoad((options: any) => {
+  routerVal.value = options
+  // #ifdef MP-WEIXIN
+  uni.showShareMenu({
+    withShareTicket: true,
+    menus: ["shareAppMessage", "shareTimeline"],
+  })
+  // #endif
+})
 
-    /**
-     * 循环出当前促销是否为空
-     */
-    emptyPromotion () {
-      if (
-        this.PromotionList == "" ||
-        this.PromotionList == null ||
-        this.PromotionList == []
-      ) {
-        return true;
-      }
-    },
-    selectSku (idObj) {
-      this.init(idObj.skuId, idObj.goodsId);
-    },
-    /**
-     * 初始化信息
-     */
-    async init (id, goodsId, distributionId = "") {
-      this.isGroup = false; //初始化拼团
-      this.productId = id; // skuId
-      // 这里请求获取到页面数据  解析数据
+onShow(async () => {
+  goodsDetail.value = {}
+  if (routerVal.value.scene) {
+    const res = await getMpScene(routerVal.value.scene)
+    if (res.data.success) {
+      let data = res.data.result.split(",")
+      init(data[0], data[1], data[2])
+    }
+  } else {
+    init(routerVal.value.id, routerVal.value.goodsId, routerVal.value.distributionId)
+  }
+})
 
-      let response = await getGoods(id || 'undefined', goodsId);
-      
-      // 判断当前接口返回内容 
-      if (!response.data.success) {
-        // 商品已下架
-        if(response.data.code == 11001){
-          this.takeDownFromSale = true
-        }
-        // setTimeout(() => {
-        //   uni.navigateBack();
-        // }, 500);
-      }
-      // 这里是绑定分销员
-      if ((distributionId || this.$store.state.distributionId) && this.isLogin("auth")) {
-        let disResult = await getGoodsDistribution(distributionId);
-        if (!disResult.data.success || disResult.statusCode == 403) {
-          this.$store.state.distributionId = distributionId;
-        }
-      }
-      /**商品信息以及规格信息存储 */
-      this.goodsDetail = response.data.result.data;
-      // 清洗缩略图，避免损坏地址（如 1?x-oss-process=style/400X400）触发渲染层 500
-      if (this.goodsDetail) {
-        this.goodsDetail.thumbnail = this.parseGoodsImageUrl(this.goodsDetail.thumbnail);
-      }
-      this.wholesaleList = response.data.result.wholesaleList;
-      this.goodsSpec = response.data.result.specs;
-      this.PromotionList = response.data.result.promotionMap;
-      this.goodsParams = response.data.result.goodsParamsDTOList || [];
+// 方法
+function reStartTakeDownSale() {
+  if (takeDownSaleRef.value) {
+    (takeDownSaleRef.value as any).show = true
+  }
+}
 
-      // 判断是否拼团活动或者积分商品 如果有则显示拼团活动信息
-      this.PromotionList &&
-        Object.keys(this.PromotionList).forEach((item) => {
-          // 拼团商品
-          if (item.indexOf("PINTUAN") == 0) {
-            this.isGroup = true;
+function share() {
+  return `/pages/product/goods?id=${routerVal.value.id}&goodsId=${routerVal.value.goodsId}`
+}
+
+function handleNavbarList(val: any) {
+  modelNavigateTo({ url: val })
+}
+
+function emptyPromotion(): boolean {
+  if (PromotionList.value == "" || PromotionList.value == null || PromotionList.value == []) {
+    return true
+  }
+  return false
+}
+
+function selectSku(idObj: any) {
+  init(idObj.skuId, idObj.goodsId)
+}
+
+async function init(id: any, goodsId: any, distributionId = "") {
+  isGroup.value = false
+  productId.value = id
+
+  let response = await getGoods(id || 'undefined', goodsId)
+
+  if (!response?.data?.success) {
+    if (response?.data?.code == 11001) {
+      takeDownFromSale.value = true
+    }
+    uni.showToast({
+      title: response?.data?.message || '商品加载失败',
+      icon: 'none'
+    })
+    return
+  }
+
+  if ((distributionId || store.state.distributionId) && isLogin("auth")) {
+    let disResult = await getGoodsDistribution(distributionId)
+    if (!disResult?.data?.success || disResult.statusCode == 403) {
+      store.state.distributionId = distributionId
+    }
+  }
+
+  const resultData = response.data.result?.data
+  if (!resultData) {
+    uni.showToast({
+      title: '商品数据异常',
+      icon: 'none'
+    })
+    return
+  }
+
+  goodsDetail.value = resultData
+  if (goodsDetail.value) {
+    goodsDetail.value.thumbnail = parseGoodsImageUrl(goodsDetail.value.thumbnail)
+  }
+  wholesaleList.value = response.data.result.wholesaleList || []
+  goodsSpec.value = response.data.result.specs || ""
+  PromotionList.value = response.data.result.promotionMap || ""
+  goodsParams.value = response.data.result.goodsParamsDTOList || []
+
+  PromotionList.value &&
+    Object.keys(PromotionList.value).forEach((item: string) => {
+      if (item.indexOf("PINTUAN") == 0) {
+        isGroup.value = true
+      }
+      if (item.indexOf("SECKILL") == 0) {
+        isSeckill.value = true
+      }
+    })
+
+  const gallery = (goodsDetail.value.goodsGalleryList || [])
+    .map((i: any) => parseGoodsImageUrl(i, ""))
+    .filter(Boolean)
+  imgList.value = [...new Set(gallery)]
+
+  getStoreBaseInfoFun(goodsDetail.value.storeId)
+  cartCount()
+  getStoreRecommend()
+  getOtherLikeGoods()
+
+  if (isLogin("auth")) {
+    getGoodsCollectionFun(goodsDetail.value.id)
+  }
+}
+
+async function getIMDetailMethods() {
+  let res = await getIMDetail()
+  if (res.data.success) {
+    IMLink.value = res.data.result
+  }
+}
+
+function linkMsgDetail() {
+  talkIm(goodsDetail.value.storeId, routerVal.value.goodsId, routerVal.value.id)
+}
+
+function changedGoods(val: any) {
+  selectedGoods.value = val
+}
+
+function deliveryFun(val: any) {
+  delivery.value = val
+}
+
+function closePopupAddress(val: any) {
+  addressFlag.value = val
+}
+
+function closePopupBuy(val: any) {
+  buyMask.value = val
+}
+
+function toAssembleBuyNow(order: any) {
+  shutMask(4, "PINTUAN", order)
+}
+
+function reluchToCart() {
+  let obj = {
+    from: "product",
+    id: productId.value,
+  }
+  storage.setCartBackbtn(obj)
+  uni.switchTab({
+    url: "/pages/tabbar/cart/cartList",
+  })
+}
+
+function cartCount() {
+  if (storage.getHasLogin()) {
+    API_trade.getCartNum().then((res: any) => {
+      nums.value = res.data.result
+    })
+  }
+}
+
+function back() {
+  if (getCurrentPages().length == 1) {
+    uni.switchTab({
+      url: "/pages/tabbar/home/index",
+    })
+  } else {
+    uni.navigateBack()
+  }
+}
+
+function getStoreBaseInfoFun(id: any) {
+  API_store.getStoreBaseInfo(id).then((res: any) => {
+    if (res.data.success) {
+      storeDetail.value = res.data.result
+      if (storeDetail.value) {
+        storeDetail.value.storeLogo = parseGoodsImageUrl(storeDetail.value.storeLogo)
+      }
+    }
+  })
+}
+
+function deleteGoodsCollectionFun(id: any) {
+  API_Members.deleteGoodsCollection(id).then((res: any) => {
+    if (res.statusCode == 200) {
+      uni.showToast({
+        title: "商品已取消收藏!",
+        icon: "none",
+      })
+      favorite.value = !favorite.value
+    }
+  })
+}
+
+function getGoodsCollectionFun(goodsId: any) {
+  if (storage.getHasLogin()) {
+    API_Members.getGoodsIsCollect("GOODS", goodsId).then((res: any) => {
+      favorite.value = res.data.result
+    })
+  }
+}
+
+function getStoreRecommend() {
+  getGoodsList({
+    pageNumber: 1,
+    pageSize: 6,
+    storeId: goodsDetail.value.storeId,
+    recommend: true,
+  }).then((res: any) => {
+    recommendList.value = (res.data.result.records || []).map((item: any) => ({
+      ...item,
+      thumbnail: parseGoodsImageUrl(item.thumbnail),
+    }))
+  })
+}
+
+function getOtherLikeGoods() {
+  getGoodsList({
+    pageNumber: 1,
+    pageSize: 10,
+    currentGoodsId: goodsDetail.value.id,
+    keyword: goodsDetail.value.name
+  }).then((res: any) => {
+    likeGoodsList.value = (res.data.result.records || []).map((item: any) => ({
+      ...item,
+      thumbnail: parseGoodsImageUrl(item.thumbnail),
+    }))
+  })
+}
+
+function receiveCouponsFun(id: any) {
+  API_Members.receiveCoupons(id).then((res: any) => {
+    uni.showToast({
+      title: res.data.message,
+      icon: "none",
+    })
+  })
+}
+
+function navigateToStore(store_id: any) {
+  uni.navigateTo({
+    url: `/pages/product/shopPage?id=` + store_id,
+  })
+}
+
+function getCoupon(item: any) {
+  receiveCouponsFun(item.id)
+}
+
+function shutMask(flag: any, buyFlag?: any, type?: any) {
+  promotionShow.value = false
+  buyMask.value = false
+  addressFlag.value = false
+  if (flag) {
+    switch (flag) {
+      case 1:
+        promotionShow.value = true
+        break
+      case 3:
+        addressFlag.value = true
+        break
+      case 4:
+        buyMask.value = true
+        if (buyFlag == "PINTUAN") {
+          if (type.orderSn && popupGoodsRef.value) {
+            (popupGoodsRef.value as any).parentOrder = type
           }
-
-          // 秒杀
-          if (item.indexOf("SECKILL") == 0) {
-            this.isSeckill = true
-          }
-        });
-      // 轮播图：兼容上传 JSON 与纯 URL，解析后去重
-      const gallery = (this.goodsDetail.goodsGalleryList || [])
-        .map((i) => this.parseGoodsImageUrl(i, ""))
-        .filter(Boolean);
-      this.imgList = [...new Set(gallery)];
-
-
-      // 获取店铺基本信息
-      this.getStoreBaseInfoFun(this.goodsDetail.storeId);
-
-      // 获取购物车
-      this.cartCount();
-
-      // 获取店铺推荐商品
-      this.getStoreRecommend();
-
-      // 获取商品列表
-      this.getOtherLikeGoods();
-      // 获取商品是否已被收藏 如果未登录不获取
-
-      if (this.isLogin("auth")) {
-        this.getGoodsCollectionFun(this.goodsDetail.id);
-      }
-      // 获取IM 需要的话使用
-      // this.getIMDetailMethods();
-    },
-
-    async getIMDetailMethods () {
-      let res = await getIMDetail();
-      if (res.data.success) {
-        this.IMLink = res.data.result;
-      }
-    },
-
-    linkMsgDetail () {
-      // lili 基础客服
-      this.talkIm(this.goodsDetail.storeId, this.routerVal.goodsId, this.routerVal.id)
-      // uni.navigateTo({
-      //   url: `/pages/mine/im/index?userId=${this.goodsDetail.storeId}&goodsid=${this.routerVal.goodsId}&skuid=${this.routerVal.id}`
-      // });
-
-      // udesk 代码  
-      // if (this.storeDetail.merchantEuid) {
-      //   uni.navigateTo({
-      //     url: `/pages/tabbar/home/web-view?src=${this.IM}`,
-      //   });
-      // }
-
-
-      // 客服 云智服代码 
-      // // #ifdef MP-WEIXIN
-      // const params = {
-      //   storeName: this.storeDetail.storeName,
-      //   goodsName: this.goodsDetail.goodsName,
-      //   goodsId: this.goodsDetail.goodsId,
-      //   goodsImg: this.goodsDetail.thumbnail,
-      //   price: this.goodsDetail.promotionPrice || this.goodsDetail.price,
-      //   // originalPrice: this.goodsDetail.original || this.goodsDetail.price,
-      //   uuid: storage.getUuid(),
-      //   token: storage.getAccessToken(),
-      //   sign: this.storeDetail.yzfSign,
-      //   mpSign: this.storeDetail.yzfMpSign,
-      // };
-      // uni.navigateTo({
-      //   url:
-      //     "/pages/product/customerservice/index?params=" +
-      //     encodeURIComponent(JSON.stringify(params)),
-      // });
-      // // #endif
-      // // #ifndef MP-WEIXIN
-      // const sign = this.storeDetail.yzfSign;
-      // uni.navigateTo({
-      //   url:
-      //     "/pages/tabbar/home/web-view?src=https://yzf.qq.com/xv/web/static/chat/index.html?sign=" +
-      //     sign,
-      // });
-      // // #endif
-
-    },
-    /**选择商品 */
-    changedGoods (val) {
-      this.selectedGoods = val;
-    },
-
-    /**  点击子级地址回调参数*/
-    deliveryFun (val) {
-      this.delivery = val;
-    },
-    /**
-     * 地址子级关闭回调
-     */
-    closePopupAddress (val) {
-      this.addressFlag = val;
-      // this.maskFlag = false;
-    },
-    /**
-     * 商品规格子级关闭回调
-     */
-    closePopupBuy (val) {
-      this.buyMask = val;
-      // this.maskFlag = false;
-    },
-
-    /** 参与拼团  创建拼团 */
-    toAssembleBuyNow (order) {
-      this.shutMask(4, "PINTUAN", order);
-    },
-    /**
-     * 查看购物车
-     */
-    reluchToCart () {
-      let obj = {
-        from: "product",
-        id: this.productId,
-      };
-      storage.setCartBackbtn(obj);
-      uni.switchTab({
-        url: "/pages/tabbar/cart/cartList",
-      });
-    },
-
-    /**
-     * 查询购物车总数量
-     */
-    cartCount () {
-      if (storage.getHasLogin()) {
-        API_trade.getCartNum().then((res) => {
-          this.nums = res.data.result;
-        });
-      }
-    },
-
-    /**
-     * 返回
-     */
-    back () {
-      if (getCurrentPages().length == 1) {
-        uni.switchTab({
-          url: "/pages/tabbar/home/index",
-        });
-      } else {
-        uni.navigateBack();
-      }
-    },
-
-    /**
-     * 获取店铺信息
-     */
-    getStoreBaseInfoFun (id) {
-      API_store.getStoreBaseInfo(id).then((res) => {
-        if (res.data.success) {
-          this.storeDetail = res.data.result;
-          if (this.storeDetail) {
-            this.storeDetail.storeLogo = this.parseGoodsImageUrl(this.storeDetail.storeLogo);
+          if (popupGoodsRef.value) {
+            (popupGoodsRef.value as any).buyType = "PINTUAN"
           }
         }
-      });
-    },
-
-    /**
-     * 删除收藏店铺
-     */
-    deleteGoodsCollectionFun (id) {
-      API_Members.deleteGoodsCollection(id).then((res) => {
-        if (res.statusCode == 200) {
-          uni.showToast({
-            title: "商品已取消收藏!",
-            icon: "none",
-          });
-          this.favorite = !this.favorite;
+        if (buyFlag == "buy") {
+          if (popupGoodsRef.value) {
+            (popupGoodsRef.value as any).buyType = ""
+          }
         }
-      });
-    },
+        break
+    }
+  }
+}
 
-    /**
-     * 获取商品是否已被收藏
-     */
-    getGoodsCollectionFun (goodsId) {
-      if (storage.getHasLogin()) {
-        API_Members.getGoodsIsCollect("GOODS", goodsId).then((res) => {
-          this.favorite = res.data.result;
-        });
-      }
-    },
+function clickFavorite(id: any) {
+  if (favorite.value) {
+    deleteGoodsCollectionFun(id)
+    return false
+  }
+  API_Members.collectionGoods("GOODS", id).then((res: any) => {
+    if (res.data.success) {
+      uni.showToast({
+        title: "收藏成功!",
+        icon: "none",
+      })
+    }
+  })
+  favorite.value = !favorite.value
+}
 
-    /**
-     * 获取店铺推荐商品列表
-     */
-    getStoreRecommend () {
-      getGoodsList({
-        pageNumber: 1,
-        pageSize: 6,
-        storeId: this.goodsDetail.storeId,
-        recommend: true,
-      }).then((res) => {
-        this.recommendList = (res.data.result.records || []).map((item) => ({
-          ...item,
-          thumbnail: this.parseGoodsImageUrl(item.thumbnail),
-        }));
-      });
-    },
+function pageScroll(e: any) {
+  if (scrollFlag.value) {
+    calcSize()
+  }
+  if (e.detail.scrollTop > 200) {
+    headerFlag.value = true
+  } else {
+    headerFlag.value = false
+  }
+  if (e.detail.scrollTop < scrollArr.value[0] - 10) {
+    scrollId.value = "1"
+  }
+  if (e.detail.scrollTop > scrollArr.value[1] - 10) {
+    scrollId.value = "2"
+  }
+  if (e.detail.scrollTop > scrollArr.value[2] - 10) {
+    scrollId.value = "3"
+  }
+  if (e.detail.scrollTop > scrollArr.value[3] - 10) {
+    scrollId.value = "4"
+  }
+}
 
-    /**
-     * 获取相似商品列表
-     *
-     */
-    getOtherLikeGoods () {
-      getGoodsList({
-        pageNumber: 1,
-        pageSize: 10,
-        currentGoodsId: this.goodsDetail.id,
-        keyword: this.goodsDetail.name
-      }).then((res) => {
-        this.likeGoodsList = (res.data.result.records || []).map((item) => ({
-          ...item,
-          thumbnail: this.parseGoodsImageUrl(item.thumbnail),
-        }));
-      });
-    },
-
-    /**
-     * 领取优惠券
-     */
-    receiveCouponsFun (id) {
-      API_Members.receiveCoupons(id).then((res) => {
-        uni.showToast({
-          title: res.data.message,
-          icon: "none",
-        });
-      });
-    },
-
-    /**
-     * 跳转到店铺页面
-     */
-    navigateToStore (store_id) {
-      uni.navigateTo({
-        url: `/pages/product/shopPage?id=` + store_id,
-      });
-    },
-
-    /**
-     * 获取优惠券按钮
-     */
-    getCoupon (item) {
-      this.receiveCouponsFun(item.id);
-    },
-
-    /**
-     * 规格弹窗开关
-     */
-    shutMask (flag, buyFlag, type) {
-      this.promotionShow = false;
-      this.buyMask = false;
-      this.addressFlag = false;
-      if (flag) {
-        switch (flag) {
-          case 1: //优惠券弹窗
-            this.promotionShow = true;
-
-            break;
-          case 3:
-            this.addressFlag = true;
-            break;
-          case 4: //添加购物车直接购买，查看已选 弹窗
-            // 判断是否是一个规格
-
-            this.buyMask = true;
-            if (buyFlag == "PINTUAN") {
-              if (type.orderSn) {
-                this.$refs.popupGoods.parentOrder = type;
-              }
-              this.$refs.popupGoods.buyType = "PINTUAN";
-            }
-            if (buyFlag == "buy") {
-              this.$refs.popupGoods.buyType = "";
-            }
-
-            break;
+function calcSize() {
+  scrollArr.value = []
+  let h = 0
+  const arr = [
+    "main1", "main2", "main3", "main4", "main5",
+    "main6", "main7", "main8", "main9", "main10", "main11",
+  ]
+  arr.forEach((item: string) => {
+    uni.createSelectorQuery()
+      .in(instance?.proxy)
+      .select("#" + item)
+      .fields({ size: true }, (data: any) => {
+        if (item === "main1" || item === "main5" || item === "main9" || item === "main11") {
+          scrollArr.value.push(h)
         }
-      }
-    },
-
-    /**
-     * 收藏
-     */
-    clickFavorite (id) {
-      if (this.favorite) {
-        // 取消收藏
-        this.deleteGoodsCollectionFun(id);
-        return false;
-      }
-      API_Members.collectionGoods("GOODS", id).then((res) => {
-        if (res.data.success) {
-          uni.showToast({
-            title: "收藏成功!",
-            icon: "none",
-          });
+        if (data && data.height) {
+          h += data.height
         }
-      });
-      this.favorite = !this.favorite;
-    },
+      })
+      .exec()
+  })
+  scrollFlag.value = false
+}
 
-    /**
-     * 顶部header显示或隐藏
-     */
-    pageScroll (e) {
-      if (this.scrollFlag) {
-        this.calcSize();
-      }
-      if (e.detail.scrollTop > 200) {
-        //当距离大于200时显示回到顶部按钮
-        this.headerFlag = true;
-      } else {
-        //当距离小于200时隐藏回到顶部按钮
-        this.headerFlag = false;
-      }
-      if (e.detail.scrollTop < this.scrollArr[0] - 10) {
-        this.scrollId = "1";
-      }
-      if (e.detail.scrollTop > this.scrollArr[1] - 10) {
-        this.scrollId = "2";
-      }
-      if (e.detail.scrollTop > this.scrollArr[2] - 10) {
-        this.scrollId = "3";
-      }
-      if (e.detail.scrollTop > this.scrollArr[3] - 10) {
-        this.scrollId = "4";
-      }
-    },
+function headerTab(id: string) {
+  if (scrollFlag.value) {
+    calcSize()
+  }
+  scrollId.value = id
+  nextTick(() => {
+    tabScrollTop.value = scrollArr.value[parseInt(id) - 1]
+  })
+}
 
-    /**
-     * 计算每个要跳转到的模块高度信息
-     */
-    calcSize () {
-      let h = 0;
-      let that = this;
-      let arr = [
-        "main1",
-        "main2",
-        "main3",
-        "main4",
-        "main5",
-        "main6",
-        "main7",
-        "main8",
-        "main9",
-        "main10",
-        "main11",
-      ];
-      arr.forEach((item) => {
-        let view = uni.createSelectorQuery().select("#" + item);
-        view
-          .fields(
-            {
-              size: true,
-            },
-            (data) => {
-              if (
-                item === "main1" ||
-                item === "main5" ||
-                item === "main9" ||
-                item === "main11"
-              ) {
-                that.scrollArr.push(h);
-              }
-              if (data && data.height) {
-                h += data.height;
-              }
-            }
-          )
-          .exec();
-      });
-      this.scrollFlag = false;
-    },
-
-    /**
-     * 点击顶部跳转到对应位置
-     */
-    headerTab (id) {
-      if (this.scrollFlag) {
-        this.calcSize();
-      }
-      this.scrollId = id;
-
-      this.$nextTick(() => {
-        this.tabScrollTop = this.scrollArr[id - 1];
-      });
-    },
-
-    /**
-     * 点击分享
-     */
-    async shareChange () {
-      this.enableShare = true;
-    },
-  },
-};
+async function shareChange() {
+  enableShare.value = true
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/product/licencePhoto.vue b/pages/product/licencePhoto.vue
index 72efc3a..abe1b8b 100644
--- a/pages/product/licencePhoto.vue
+++ b/pages/product/licencePhoto.vue
@@ -9,41 +9,35 @@
   </div>
 </template>
 
-<script>
-import { getLicencePhoto } from "@/api/store.js";
-export default {
-  data() {
-    return {
-      storeData: {},
-    };
-  },
-  onLoad(options) {
-    this.getStoreLicencePhoto(options.id);
-  },
-  methods: {
-    async getStoreLicencePhoto(id) {
-      let res = await getLicencePhoto(id);
-      if (res.data.success) {
-        this.storeData = res.data.result;
-      }
-    },
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { getLicencePhoto } from '@/api/store.js'
 
-    /**
-     * 点击图片放大或保存
-     */
-    preview() {
-      uni.previewImage({
-        current: 0,
-        urls: [this.storeData.licencePhoto],
-        longPressActions: {
-          itemList: ["保存图片"],
-          success: function (data) {},
-          fail: function (err) {},
-        },
-      });
+const storeData = ref<any>({})
+
+async function getStoreLicencePhoto(id: string) {
+  const res = await getLicencePhoto(id)
+  if (res.data.success) {
+    storeData.value = res.data.result
+  }
+}
+
+function preview() {
+  uni.previewImage({
+    current: 0,
+    urls: [storeData.value.licencePhoto],
+    longPressActions: {
+      itemList: ['保存图片'],
+      success: function () {},
+      fail: function () {},
     },
-  },
-};
+  })
+}
+
+onLoad((options: any) => {
+  getStoreLicencePhoto(options.id)
+})
 </script>
 
 <style lang="scss" scoped>
@@ -53,4 +47,4 @@ export default {
     margin: 20rpx 0;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/pages/product/product/evaluation/-evaluation.vue b/pages/product/product/evaluation/-evaluation.vue
index 9832c0f..8975e73 100644
--- a/pages/product/product/evaluation/-evaluation.vue
+++ b/pages/product/product/evaluation/-evaluation.vue
@@ -64,88 +64,82 @@
   </view>
 </template>
 
-<script>
-import * as API_Members from "@/api/members.js";
-export default {
-  data() {
-    return {
-      lightColor: this.$lightColor,
-      commDetail: {},
-      readMoreInited: {},
-      grade: "",
-      params: {
-        pageNumber: 1,
-        pageSize: 10,
-        grade: "",
-      },
-    };
-  },
-  props: {
-    goodsDetail: {
-      default: () => ({}),
-      type: Object,
-    },
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from 'vue'
+import * as API_Members from '@/api/members.js'
+import { noPassByName } from '@/utils/filters.js'
+import { useStore } from '@/store'
+
+const props = defineProps<{
+  goodsDetail?: Record<string, any>
+}>()
+
+const store = useStore()
+const lightColor = computed(() => store.getters.lightColor)
+const commDetail = ref<any>({})
+const readMoreInited = ref<Record<number, boolean>>({})
+const grade = ref('')
+const params = {
+  pageNumber: 1,
+  pageSize: 10,
+  grade: '',
+}
+const uReadMore = ref<any>()
+
+watch(
+  () => props.goodsDetail,
+  (val) => {
+    if (val && val.goodsId) {
+      grade.value = val.grade
+      getGoodsCommentsMethods()
+    }
   },
+  { deep: true, immediate: true }
+)
 
-  watch: {
-    goodsDetail: {
-      handler(val) {
-        if (val && val.goodsId) {
-          this.grade = val.grade;
-          this.getGoodsCommentsMethods();
-        }
-      },
-      deep: true,
-      immediate: true,
-    },
-  },
+function commentImages(item: any) {
+  const images = item.images || item.image
+  if (!images) return []
+  return typeof images === 'string' ? images.split(',').filter(Boolean) : images
+}
 
-  methods: {
-    commentImages(item) {
-      const images = item.images || item.image;
-      if (!images) return [];
-      return typeof images === "string" ? images.split(",").filter(Boolean) : images;
-    },
+function initReadMore(index: number) {
+  if (readMoreInited.value[index]) return
+  readMoreInited.value[index] = true
+  nextTick(() => {
+    const refs = uReadMore.value
+    const target = Array.isArray(refs) ? refs[index] : refs
+    target?.init?.()
+  })
+}
 
-    initReadMore(index) {
-      if (this.readMoreInited[index]) return;
-      this.readMoreInited[index] = true;
-      this.$nextTick(() => {
-        const refs = this.$refs.uReadMore;
-        const target = Array.isArray(refs) ? refs[index] : refs;
-        target?.init?.();
-      });
-    },
+function getGoodsCommentsMethods() {
+  if (!props.goodsDetail?.goodsId) return
+  API_Members.getGoodsComments(props.goodsDetail.goodsId, params).then((res) => {
+    readMoreInited.value = {}
+    commDetail.value = res.data.result || {}
+    nextTick(() => {
+      const records = commDetail.value.records || []
+      records.slice(0, 2).forEach((_: any, index: number) => {
+        setTimeout(() => initReadMore(index), 50 * (index + 1))
+      })
+    })
+  })
+}
 
-    getGoodsCommentsMethods() {
-      if (!this.goodsDetail.goodsId) return;
-      API_Members.getGoodsComments(this.goodsDetail.goodsId, this.params).then((res) => {
-        this.readMoreInited = {};
-        this.commDetail = res.data.result || {};
-        this.$nextTick(() => {
-          const records = this.commDetail.records || [];
-          records.slice(0, 2).forEach((_, index) => {
-            setTimeout(() => this.initReadMore(index), 50 * (index + 1));
-          });
-        });
-      });
-    },
+function toComment(id: string | number, gradeVal: string | number) {
+  uni.navigateTo({
+    url: `/pages/product/comment?id=${id}&grade=${gradeVal}`,
+  })
+}
 
-    toComment(id, grade) {
-      uni.navigateTo({
-        url: `/pages/product/comment?id=${id}&grade=${grade}`,
-      });
-    },
-
-    previewImg(urls, index) {
-      uni.previewImage({
-        urls,
-        indicator: "number",
-        current: index,
-      });
-    },
-  },
-};
+function previewImg(urls: string[], index: number) {
+  uni.previewImage({
+    urls,
+    indicator: 'number',
+    current: index,
+  })
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/product/product/goods/-goods-desc.vue b/pages/product/product/goods/-goods-desc.vue
index 69c03cf..3f47c63 100644
--- a/pages/product/product/goods/-goods-desc.vue
+++ b/pages/product/product/goods/-goods-desc.vue
@@ -2,12 +2,9 @@
     
 </template>
 
-<script>
-export default {
-    
-}
+<script setup lang="ts">
 </script>
 
 <style lang="scss" scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/pages/product/product/goods/-goods-intro.vue b/pages/product/product/goods/-goods-intro.vue
index 6c3c9ab..39ce647 100644
--- a/pages/product/product/goods/-goods-intro.vue
+++ b/pages/product/product/goods/-goods-intro.vue
@@ -39,30 +39,32 @@
   </view>
 </template>
 
-<script>
-import { getGoodsMessage } from "@/api/goods";
-export default {
-  data() {
-    return {
-      goodsDetail: "",
-      style: {
-        img:"display:block;width:100%"
-			}
-    };
-  },
-  props: ["res", "goodsId", "goodsParams"],
-  computed: {
-    hasDetailContent() {
-      return !!(this.res?.mobileIntro || (this.goodsParams && this.goodsParams.length));
-    },
-  },
-  async mounted() {
-    let res = await getGoodsMessage(this.goodsId);
-    if (res.data.success) {
-      this.goodsDetail = res.data.result;
-    }
-  },
-};
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { getGoodsMessage } from '@/api/goods'
+
+const props = defineProps<{
+  res?: any
+  goodsId?: string | number
+  goodsParams?: any[]
+}>()
+
+const goodsDetail = ref('')
+const style = {
+  img: 'display:block;width:100%',
+}
+
+const hasDetailContent = computed(() => {
+  return !!(props.res?.mobileIntro || (props.goodsParams && props.goodsParams.length))
+})
+
+onMounted(async () => {
+  if (!props.goodsId) return
+  const res = await getGoodsMessage(props.goodsId)
+  if (res.data.success) {
+    goodsDetail.value = res.data.result
+  }
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/product/product/goods/-goods-recommend.vue b/pages/product/product/goods/-goods-recommend.vue
index b26a9df..364f783 100644
--- a/pages/product/product/goods/-goods-recommend.vue
+++ b/pages/product/product/goods/-goods-recommend.vue
@@ -5,14 +5,12 @@
 	 </view>
 </template>
 
-<script>
+<script setup lang="ts">
 import goodsList from '@/components/m-goods-list/list.vue'
-export default {
-  props: ["res"],
-	components:{goodsList},
-  methods: {
-    }
-};
+
+defineProps<{
+  res?: any[]
+}>()
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/product/product/goods/-goods-swiper.vue b/pages/product/product/goods/-goods-swiper.vue
index e089ae7..2815d20 100644
--- a/pages/product/product/goods/-goods-swiper.vue
+++ b/pages/product/product/goods/-goods-swiper.vue
@@ -27,30 +27,33 @@
     <view class="swiper-dots">{{ current }}/{{ video ? res.length + 1 : res.length }}</view>
   </view>
 </template>
-<script>
-export default {
-  data() {
-    return {
-      current: 1,
-      html: ""
-    };
-  },
-  props: ["res", 'video'],
-  watch: {
-    video(val) {
-      this.html = '<video muted="muted"   ref="videoPlay" style="width:100%; height:100%;" src=' + val + '  page-gesture show-mute-btn   autoplay  webkit-playsinline="" playsinline="" ></video>'
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+const props = defineProps<{
+  res?: string[]
+  video?: string
+}>()
+
+const current = ref(1)
+const html = ref('')
+
+watch(
+  () => props.video,
+  (val) => {
+    if (val) {
+      html.value =
+        '<video muted="muted"   ref="videoPlay" style="width:100%; height:100%;" src=' +
+        val +
+        '  page-gesture show-mute-btn   autoplay  webkit-playsinline="" playsinline="" ></video>'
     }
   },
-  methods: {
-    // 轮播图对应的dot
-    swiperChange(e) {
-      this.current = e.detail.current + 1;
-    },
-  },
-  mounted() {
-    console.log(this.video)
-  }
-};
+  { immediate: true }
+)
+
+function swiperChange(e: any) {
+  current.value = e.detail.current + 1
+}
 </script>
 <style lang="scss" scoped>
 .carousel {
diff --git a/pages/product/product/mp-goods.scss b/pages/product/product/mp-goods.scss
index ec0b9fe..bd8dac4 100644
--- a/pages/product/product/mp-goods.scss
+++ b/pages/product/product/mp-goods.scss
@@ -1,6 +1,13 @@
-
 .showBack {
-    
-    margin-top: calc( var(--status-bar-height) + 20px ) !important;
-   
-}
\ No newline at end of file
+    margin-top: calc(var(--status-bar-height) + 20px) !important;
+}
+
+/* 商品详情底栏改为 flex 布局后，避免全局 mp-iphonex-bottom 把高度撑乱 */
+.page-bottom.mp-iphonex-bottom {
+    height: auto !important;
+    min-height: 100rpx;
+    box-sizing: border-box;
+    padding-top: 10rpx;
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+}
diff --git a/pages/product/product/popup/address.vue b/pages/product/product/popup/address.vue
index 7ae2486..49cf76f 100644
--- a/pages/product/product/popup/address.vue
+++ b/pages/product/product/popup/address.vue
@@ -26,83 +26,81 @@
     <m-city :provinceData="cityList" headTitle="区域选择" ref="cityPicker"  pickerSize="4"></m-city>
   </u-popup>
 </template>
-<script>
-import setup from "@/components/m-buy/popup.js";
-/************请求存储***************/
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import setup from '@/components/m-buy/popup.js'
+import * as API_Address from '@/api/address.js'
+import { clearStrComma, isLogin } from '@/utils/filters.js'
 
-import * as API_Address from "@/api/address.js";
-export default {
-  data() {
-    return {
-      checked: "",
-      setup,
-      addressDetail: "",
-      cityList: [
-        {
-          id: "",
-          localName: "请选择",
-          children: [],
-        },
-      ],
-    };
+const props = defineProps<{
+  goodsId?: string | number
+  addressFlag?: boolean
+}>()
+
+const emit = defineEmits<{
+  closeAddress: [val: boolean]
+  deliveryData: [val: any]
+}>()
+
+const checked = ref<any>('')
+const addressDetail = ref<any>('')
+const cityList = ref([
+  {
+    id: '',
+    localName: '请选择',
+    children: [],
   },
-  props: ["goodsId", "addressFlag"],
+])
 
-  mounted() {
-    if (this.isLogin("auth")) {
-      this.getShippingAddress();
-    } else {
-      uni.navigateTo({
-        url: "/pages/passport/login",
-      });
-    }
-  },
+onMounted(() => {
+  if (isLogin('auth')) {
+    getShippingAddress()
+  } else {
+    uni.navigateTo({
+      url: '/pages/passport/login',
+    })
+  }
+})
 
-  methods: {
-    /**关闭地址 */
-    closeAddress() {
-      this.$emit("closeAddress", false);
-      this.$emit("deliveryData", this.checked);
-    },
+function closeAddress() {
+  emit('closeAddress', false)
+  emit('deliveryData', checked.value)
+}
 
-    getpicker() {
-      uni.navigateTo({
-        url: "/pages/mine/address/add",
-      });
-      this.closeAddress();
-    },
+function getpicker() {
+  uni.navigateTo({
+    url: '/pages/mine/address/add',
+  })
+  closeAddress()
+}
 
-    /**获取地址 */
-    getShippingAddress() {
-      if (this.isLogin("auth")) {
-        API_Address.getAddressList(1, 50).then((res) => {
-          if (res.data.success) {
-            this.addressDetail = res.data.result.records;
-            let addr = res.data.result.records.filter((item) => {
-              return item.isDefault == 1;
-            });
+function getShippingAddress() {
+  if (isLogin('auth')) {
+    API_Address.getAddressList(1, 50).then((res) => {
+      if (res.data.success) {
+        addressDetail.value = res.data.result.records
+        const addr = res.data.result.records.filter((item: any) => {
+          return item.isDefault == 1
+        })
 
-            if (addr[0]) {
-              this.checked = addr[0];
-              this.$emit("deliveryData", this.checked);
-            }
-          }
-        });
+        if (addr[0]) {
+          checked.value = addr[0]
+          emit('deliveryData', checked.value)
+        }
       }
-    },
+    })
+  }
+}
 
-    /**点击地址返回父级商品状态 */
-    clickAddress(val) {
-      this.checked = val;
+function clickAddress(val: any) {
+  checked.value = val
 
-      this.addressDetail.forEach((item) => {
-        item.isDefault = false;
-      });
-      val.isDefault = !val.isDefault;
-      this.$emit("deliveryData", this.checked);
-    },
-  },
-};
+  addressDetail.value.forEach((item: any) => {
+    item.isDefault = false
+  })
+  val.isDefault = !val.isDefault
+  emit('deliveryData', checked.value)
+}
 </script>
 <style lang="scss" scoped>
 .light {
@@ -165,4 +163,4 @@ export default {
   line-height: 90rpx;
   font-size: 34rpx;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/pages/product/product/promotion/-promotion-assemble-list.vue b/pages/product/product/promotion/-promotion-assemble-list.vue
index 38e8a0e..1739525 100644
--- a/pages/product/product/promotion/-promotion-assemble-list.vue
+++ b/pages/product/product/promotion/-promotion-assemble-list.vue
@@ -23,66 +23,57 @@
   </view>
 </template>
 
-<script>
-import * as API_Promotions from "@/api/promotions";
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import * as API_Promotions from '@/api/promotions'
 import configs from '@/config/config'
-export default {
-  data() {
-    return {
-      configs,
-      userImage:configs.defaultUserPhoto,
+import { noPassByName } from '@/utils/filters.js'
+import { useStore } from '@/store'
 
-      joinBtnStyle: {
-        background: this.$lightColor,
-        color: "#fff",
-      },
-      /** 待成团订单 */
-      assembleOrder: "",
+const props = defineProps<{
+  res?: any
+}>()
 
-      /** 查看更多待成团订单 */
-      assembleOrderAll: "",
-    };
-  },
-  props: ["res"],
+const emit = defineEmits<{
+  'to-assemble-buy-now': [order: any]
+}>()
 
-  watch: {
-    res: {
-      handler() {
-        if (this.res && this.res.length != 0) {
-          Object.keys(this.res).forEach((item) => {
-            let key = item.split("-");
-            if (key && key[0] == "PINTUAN") {
-              this.getAssembleInfo(item);
-            }
-          });
+const store = useStore()
+const userImage = configs.defaultUserPhoto
+const assembleOrder = ref<any[]>([])
+
+const joinBtnStyle = computed(() => ({
+  background: store.getters.lightColor,
+  color: '#fff',
+}))
+
+watch(
+  () => props.res,
+  (res) => {
+    if (res && res.length != 0) {
+      Object.keys(res).forEach((item) => {
+        const key = item.split('-')
+        if (key && key[0] == 'PINTUAN') {
+          getAssembleInfo(item)
         }
-      },
-      immediate: true,
-    },
-
-    // assembleOrder(val) {
-    //   this.$emit("assembleOrder", val);
-    // },
+      })
+    }
   },
-  computed: {},
-  mounted() {},
-  methods: {
-    // 获取此商品所有待成团的订单
-    getAssembleInfo(val) {
-      let id = this.res[val].id;
-      API_Promotions.getPromotionGroupMember(id).then((res) => {
-        if (res.data.success) {
-          console.warn(res.data.result);
-          this.assembleOrder = res.data.result;
-        }
-      });
-    },
+  { immediate: true }
+)
 
-    buy(order) {
-      this.$emit("to-assemble-buy-now", order);
-    },
-  },
-};
+function getAssembleInfo(val: string) {
+  const id = props.res[val].id
+  API_Promotions.getPromotionGroupMember(id).then((res) => {
+    if (res.data.success) {
+      assembleOrder.value = res.data.result
+    }
+  })
+}
+
+function buy(order: any) {
+  emit('to-assemble-buy-now', order)
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/product/product/promotion/-promotion-assemble-promotions.vue b/pages/product/product/promotion/-promotion-assemble-promotions.vue
index c4425a6..0a361a3 100644
--- a/pages/product/product/promotion/-promotion-assemble-promotions.vue
+++ b/pages/product/product/promotion/-promotion-assemble-promotions.vue
@@ -106,119 +106,118 @@
   </view>
 </template>
 
-<script>
-export default {
-  data() {
-    return {
-      countdownData: {},
-      countdownTimer: null,
-    };
+<script setup lang="ts">
+import { computed, onUnmounted, ref, watch } from 'vue'
+import { goodsFormatPrice } from '@/utils/filters.js'
+
+const props = defineProps<{
+  res?: any
+  detail?: any
+}>()
+
+const countdownData = ref<Record<number, any>>({})
+let countdownTimer: ReturnType<typeof setInterval> | null = null
+
+const promotionList = computed(() => {
+  if (!props.res || typeof props.res !== 'object') return []
+  return Object.keys(props.res).map((key) => ({
+    ...(props.res[key] || {}),
+    __key: key.split('-')[0],
+  }))
+})
+
+watch(
+  promotionList,
+  (list) => {
+    refreshCountdown(list)
+    startCountdownTimer()
   },
-  props: {
-    res: {
-      type: null,
-      default: {},
-    },
-    detail: {
-      type: null,
-      default: {},
-    },
-  },
-  computed: {
-    promotionList() {
-      if (!this.res || typeof this.res !== "object") return [];
-      return Object.keys(this.res).map((key) => ({
-        ...(this.res[key] || {}),
-        __key: key.split("-")[0],
-      }));
-    },
-  },
-  watch: {
-    promotionList: {
-      handler(list) {
-        this.refreshCountdown(list);
-        this.startCountdownTimer();
-      },
-      immediate: true,
-    },
-  },
-  beforeUnmount() {
-    this.clearCountdownTimer();
-  },
-  methods: {
-    clearCountdownTimer() {
-      if (this.countdownTimer) {
-        clearInterval(this.countdownTimer);
-        this.countdownTimer = null;
-      }
-    },
-    startCountdownTimer() {
-      this.clearCountdownTimer();
-      this.countdownTimer = setInterval(() => {
-        this.refreshCountdown(this.promotionList);
-      }, 1000);
-    },
-    refreshCountdown(list = this.promotionList) {
-      const next = {};
-      list.forEach((promotion, index) => {
-        next[index] = this.msToTimeData(this.getCountDownMs(promotion));
-      });
-      this.countdownData = next;
-    },
-    padTime(val) {
-      return String(val ?? 0).padStart(2, "0");
-    },
-    countdownDisplayHours(index) {
-      const data = this.countdownData[index];
-      if (!data) return 0;
-      return data.days * 24 + data.hours;
-    },
-    msToTimeData(ms) {
-      const DAY = 86400000;
-      const HOUR = 3600000;
-      const MINUTE = 60000;
-      const SECOND = 1000;
-      const time = Math.max(Number(ms) || 0, 0);
-      return {
-        days: Math.floor(time / DAY),
-        hours: Math.floor((time % DAY) / HOUR),
-        minutes: Math.floor((time % HOUR) / MINUTE),
-        seconds: Math.floor((time % MINUTE) / SECOND),
-      };
-    },
-    parsePromotionTime(val) {
-      if (val == null || val === "") return 0;
-      if (typeof val === "number" && !Number.isNaN(val)) {
-        return val < 1e12 ? val * 1000 : val;
-      }
-      const text = String(val).trim();
-      if (/^\d+$/.test(text)) {
-        const num = Number(text);
-        return num < 1e12 ? num * 1000 : num;
-      }
-      const parsed = Date.parse(text.replace(/-/g, "/"));
-      return Number.isNaN(parsed) ? 0 : parsed;
-    },
-    getCountDownMs(promotion) {
-      if (!promotion || !promotion.endTime) return 0;
-      const now = Date.now();
-      const startMs = this.parsePromotionTime(promotion.startTime || promotion.start_time);
-      const endMs = this.parsePromotionTime(promotion.endTime);
-      if (!endMs) return 0;
-      const target = startMs && now < startMs ? startMs : endMs;
-      const remain = target - now;
-      return remain > 0 ? remain : 0;
-    },
-    getIsTimer(val) {
-      const now = Date.now();
-      const startMs = this.parsePromotionTime(val.startTime || val.start_time);
-      if (startMs && now < startMs) {
-        return "距离活动开始";
-      }
-      return "距离活动结束";
-    },
-  },
-};
+  { immediate: true }
+)
+
+onUnmounted(() => {
+  clearCountdownTimer()
+})
+
+function clearCountdownTimer() {
+  if (countdownTimer) {
+    clearInterval(countdownTimer)
+    countdownTimer = null
+  }
+}
+
+function startCountdownTimer() {
+  clearCountdownTimer()
+  countdownTimer = setInterval(() => {
+    refreshCountdown(promotionList.value)
+  }, 1000)
+}
+
+function refreshCountdown(list = promotionList.value) {
+  const next: Record<number, any> = {}
+  list.forEach((promotion, index) => {
+    next[index] = msToTimeData(getCountDownMs(promotion))
+  })
+  countdownData.value = next
+}
+
+function padTime(val: number | undefined) {
+  return String(val ?? 0).padStart(2, '0')
+}
+
+function countdownDisplayHours(index: number) {
+  const data = countdownData.value[index]
+  if (!data) return 0
+  return data.days * 24 + data.hours
+}
+
+function msToTimeData(ms: number) {
+  const DAY = 86400000
+  const HOUR = 3600000
+  const MINUTE = 60000
+  const SECOND = 1000
+  const time = Math.max(Number(ms) || 0, 0)
+  return {
+    days: Math.floor(time / DAY),
+    hours: Math.floor((time % DAY) / HOUR),
+    minutes: Math.floor((time % HOUR) / MINUTE),
+    seconds: Math.floor((time % MINUTE) / SECOND),
+  }
+}
+
+function parsePromotionTime(val: any) {
+  if (val == null || val === '') return 0
+  if (typeof val === 'number' && !Number.isNaN(val)) {
+    return val < 1e12 ? val * 1000 : val
+  }
+  const text = String(val).trim()
+  if (/^\d+$/.test(text)) {
+    const num = Number(text)
+    return num < 1e12 ? num * 1000 : num
+  }
+  const parsed = Date.parse(text.replace(/-/g, '/'))
+  return Number.isNaN(parsed) ? 0 : parsed
+}
+
+function getCountDownMs(promotion: any) {
+  if (!promotion || !promotion.endTime) return 0
+  const now = Date.now()
+  const startMs = parsePromotionTime(promotion.startTime || promotion.start_time)
+  const endMs = parsePromotionTime(promotion.endTime)
+  if (!endMs) return 0
+  const target = startMs && now < startMs ? startMs : endMs
+  const remain = target - now
+  return remain > 0 ? remain : 0
+}
+
+function getIsTimer(val: any) {
+  const now = Date.now()
+  const startMs = parsePromotionTime(val.startTime || val.start_time)
+  if (startMs && now < startMs) {
+    return '距离活动开始'
+  }
+  return '距离活动结束'
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/pages/product/product/promotion/-promotion-coupon.vue b/pages/product/product/promotion/-promotion-coupon.vue
index 4b81106..f53ab06 100644
--- a/pages/product/product/promotion/-promotion-coupon.vue
+++ b/pages/product/product/promotion/-promotion-coupon.vue
@@ -1,79 +1,95 @@
 <template>
 	<view class="wrapper">
-		<div class="coupon-empty" v-if="!res">暂无优惠券</div>
-		<view class="coupon-List" v-for="(item, index) in couponRes" :key="index">
+		<view class="coupon-empty" v-if="!couponRes.length">暂无优惠券</view>
+		<view class="coupon-List" v-for="(item, index) in couponRes" :key="item.id || index">
 			<view class="coupon-item">
 				<view class="top">
-					<div class="price">
-						<span class="price-num" v-if="item.couponType == 'DISCOUNT'">{{ item.couponDiscount }}折</span>
-						<span class="price-num" v-if="item.couponType == 'PRICE'">￥{{unitPrice(item.price) }}</span>
-					</div>
-					<view class="text">
-						<div class="coupon-List-title">
-							<view v-if="item.scopeType">
-								<span v-if="item.scopeType == 'ALL' && item.storeId == '0'">全平台</span>
-								<span v-if="item.scopeType == 'PORTION_GOODS_CATEGORY'">仅限品类</span>
-								<view v-else>{{
-                         item.storeName == "platform" ? "全平台" : item.storeName + "店铺"
-                       }}使用</view>
-							</view>
-						</div>
-						<div>满{{unitPrice(item.consumeThreshold) }}可用</div>
+					<view class="price">
+						<text class="price-num" v-if="item.couponType == 'DISCOUNT'">{{ item.couponDiscount }}折</text>
+						<text class="price-num" v-else-if="item.couponType == 'PRICE'">￥{{ unitPrice(item.price) }}</text>
 					</view>
-					<view class="lingqu-btn" @click="getCoupon(item, index)">
-						<div class="lingqu-text" :class="yhqFlag[index] ? 'cur' : ''">
-							{{ yhqFlag[index] ? "已领取或领完" : "立即领取" }}
-						</div>
+					<view class="text">
+						<view class="coupon-List-title">
+							<text v-if="item.scopeType == 'ALL' && item.storeId == '0'">全平台</text>
+							<text v-else-if="item.scopeType == 'PORTION_GOODS_CATEGORY'">仅限品类</text>
+							<text v-else-if="item.scopeType == 'PORTION_GOODS'">部分商品</text>
+							<text v-else>{{ item.storeName == 'platform' ? '全平台' : item.storeName + '店铺' }}使用</text>
+						</view>
+						<text>满{{ unitPrice(item.consumeThreshold) }}可用</text>
+					</view>
+					<view class="lingqu-btn" @tap="getCoupon(item, index)">
+						<view class="lingqu-text" :class="{ cur: yhqFlag[index] }">
+							{{ yhqFlag[index] ? '已领取或领完' : '立即领取' }}
+						</view>
 					</view>
 				</view>
 				<view class="line"></view>
-				<view class="time">{{ item.startTime /unixToDate(1000) }} - {{ item.endTime /unixToDate(1000) }}</view>
+				<view class="time">{{ formatCouponTime(item.startTime) }} - {{ formatCouponTime(item.endTime) }}</view>
 			</view>
 		</view>
 	</view>
 </template>
 
-<script>
-	export default {
-		data() {
-			return {
-				yhqFlag: [], //获取优惠券判断是否点击
-				couponRes: [],
-			};
-		},
-		props: {
-			res: {
-				type: null,
-				default: "",
-			},
-		},
-		watch: {
-			res: {
-				handler() {
-					if (this.res && this.res.length != 0) {
-						Object.keys(this.res).forEach((item) => {
-							let key = item.split("-")[0];
-							if (key === "COUPON") {
-								this.couponRes.push(this?.res[item]);
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { unitPrice, unixToDate } from '@/utils/filters.js'
 
-							}
-						});
-					}
-				},
-				immediate: true,
-			},
-		},
-		methods: {
-			// 提交优惠券
-			getCoupon(item, index) {
-				this.yhqFlag[index] = true;
-				this.$emit("getCoupon", item);
-			},
-		},
-	};
+const props = defineProps<{
+  res?: any
+}>()
+
+const emit = defineEmits<{
+  getCoupon: [item: any]
+}>()
+
+const yhqFlag = ref<boolean[]>([])
+const couponRes = ref<any[]>([])
+
+function formatCouponTime(val: any) {
+	if (val == null || val === '') return ''
+	const text = String(val).trim()
+	if (!text) return ''
+	if (text.includes('-') || text.includes('/')) {
+		return text.length > 10 ? text.slice(0, 16) : text
+	}
+	const num = Number(text)
+	if (!Number.isFinite(num)) return text
+	const seconds = num < 1e12 ? num : Math.floor(num / 1000)
+	return unixToDate(seconds, 'yyyy-MM-dd')
+}
+
+watch(
+  () => props.res,
+  (res) => {
+    const list: any[] = []
+    if (res && typeof res === 'object') {
+      Object.keys(res).forEach((item) => {
+        if (item.split('-')[0] === 'COUPON') {
+          list.push(res[item])
+        }
+      })
+    }
+    couponRes.value = list
+    yhqFlag.value = list.map(() => false)
+  },
+  { immediate: true, deep: true }
+)
+
+function getCoupon(item: any, index: number) {
+  if (yhqFlag.value[index]) return
+  yhqFlag.value[index] = true
+  yhqFlag.value = [...yhqFlag.value]
+  emit('getCoupon', item)
+}
 </script>
 
 <style lang="scss" scoped>
+	.coupon-empty {
+		color: #999;
+		font-size: 26rpx;
+		padding: 20rpx 0;
+	}
+
 	.coupon-item {
 		width: 100%;
 		height: 100%;
@@ -85,10 +101,12 @@
 	.coupon-List {
 		display: flex;
 		flex-direction: column;
-		height: 230rpx;
+		min-height: 230rpx;
 		background: #e9ebfb;
 		margin: 30rpx 0;
 		padding: 10rpx 30rpx;
+		border-radius: 12rpx;
+		box-sizing: border-box;
 
 		.line {
 			height: 1px;
@@ -119,15 +137,17 @@
 		.time {
 			flex: 1;
 			font-size: 24rpx;
-			align-items: center;
+			color: #666;
 			display: flex;
 			align-items: center;
+			padding: 12rpx 0 8rpx;
 		}
 	}
 
 	.top {
-		height: 140rpx;
+		min-height: 140rpx;
 		display: flex;
+		align-items: center;
 
 		.price {
 			width: 33%;
@@ -135,48 +155,56 @@
 			color: #6772e5;
 			font-size: 40rpx;
 			display: flex;
-
 			height: 100%;
 			align-items: center;
+			flex-shrink: 0;
 
 			.price-num {
 				font-size: 50rpx;
+				line-height: 1.2;
 			}
 		}
 
 		.text {
-			width: 33%;
+			flex: 1;
 			display: flex;
 			flex-direction: column;
 			justify-content: center;
 			font-size: 26rpx;
-			color: 333;
-			margin-left: 40rpx;
+			color: #333;
+			margin-left: 20rpx;
+			min-width: 0;
 
 			.coupon-List-title {
-				font-size: 30rpx;
+				font-size: 28rpx;
 				font-weight: bold;
+				margin-bottom: 8rpx;
+				line-height: 1.4;
 			}
 		}
 
 		.lingqu-btn {
 			display: flex;
 			align-items: center;
-			margin-left: 40rpx;
+			flex-shrink: 0;
+			margin-left: 16rpx;
 
 			.lingqu-text {
-				width: 140rpx;
-				height: 40rpx;
+				min-width: 140rpx;
+				height: 56rpx;
+				padding: 0 16rpx;
 				text-align: center;
-				line-height: 40rpx;
+				line-height: 56rpx;
 				color: #fff;
 				background: #6772e5;
-				border-radius: 5px;
-				font-size: 26rpx;
+				border-radius: 28rpx;
+				font-size: 24rpx;
+				box-sizing: border-box;
 
 				&.cur {
-					background: none;
-					transform: rotate(45deg) translate(10rpx, -46rpx);
+					background: #ccc;
+					color: #fff;
+					transform: none;
 				}
 			}
 		}
diff --git a/pages/product/product/promotion/-promotion-details.vue b/pages/product/product/promotion/-promotion-details.vue
index fe02e62..c7244c7 100644
--- a/pages/product/product/promotion/-promotion-details.vue
+++ b/pages/product/product/promotion/-promotion-details.vue
@@ -1,140 +1,134 @@
 <template>
   <view class="wrapper" v-if="res">
-    <view v-for="(prom, index) in Object.keys(res)" :key="index">
-      <view>
-        <view v-if="prom.split('-')[0] == 'FULL_DISCOUNT'">
-          <div class="res_prom_item" v-if="res[prom].fullMinus">
-            <u-tag text="满减" type="error"></u-tag>
-            <!-- TODO 后续将优化为可点击的商品以及优惠券显示明细 -->
-            <span class="pro-text"
-              >满{{ res[prom].fullMoney }}元 立减现金
-              <span class="price">{{ res[prom].fullMinus }}元</span>
-              <span v-if="res[prom].couponFlag"> 赠送<span>优惠券</span></span>
-              <span v-if="res[prom].pointFlag"> 赠送{{ res[prom].point }}积分</span>
-              <span v-if="res[prom].giftFlag"> 赠送商品</span>
-              <span v-if="res[prom].freeFreightFlag">赠送包邮服务</span>
-            </span>
-          </div>
-          <div class="res_prom_item" v-if="res[prom].fullRate && res[prom].fullRateFlag">
-            <u-tag text="打折" type="error"></u-tag>
-            <span class="pro-text"
-              >满{{ res[prom].fullMoney }}元，立享<span class="price"
-                >{{ res[prom].fullRate }}折</span
-              >优惠</span
-            >
-          </div>
+    <view v-for="prom in promotionKeys" :key="prom">
+      <view v-if="getPromType(prom) == 'FULL_DISCOUNT'">
+        <view class="res_prom_item" v-if="res[prom].fullMinus">
+          <view class="deg_tag">满减</view>
+          <text class="pro-text">
+            满{{ res[prom].fullMoney }}元 立减现金
+            <text class="price">{{ res[prom].fullMinus }}元</text>
+            <text v-if="res[prom].couponFlag"> 赠送优惠券</text>
+            <text v-if="res[prom].pointFlag"> 赠送{{ res[prom].point }}积分</text>
+            <text v-if="res[prom].giftFlag"> 赠送商品</text>
+            <text v-if="res[prom].freeFreightFlag"> 赠送包邮服务</text>
+          </text>
         </view>
-
-        <view v-if="prom.split('-')[0] == 'PINTUAN'">
-          <div class="res_prom_item" v-if="res[prom].requiredNum">
-            <u-tag text="拼团" type="error"></u-tag>
-            <span class="pro-text"
-              >{{ res[prom].requiredNum }}人拼团 限购<span class="price"
-                >{{ res[prom].limitNum }}件</span
-              ></span
-            >
-          </div>
+        <view class="res_prom_item" v-if="res[prom].fullRate && res[prom].fullRateFlag">
+          <view class="deg_tag">打折</view>
+          <text class="pro-text">
+            满{{ res[prom].fullMoney }}元，立享
+            <text class="price">{{ res[prom].fullRate }}折</text>
+            优惠
+          </text>
         </view>
+      </view>
 
-        <view v-if="prom.split('-')[0] == 'SECKILL'">
-          <div class="res_prom_item">
-            <u-tag text="限时抢购" type="error"></u-tag>
-            <span class="pro-text">限时抢购</span>
-          </div>
+      <view v-if="getPromType(prom) == 'PINTUAN'">
+        <view class="res_prom_item" v-if="res[prom].requiredNum">
+          <view class="deg_tag">拼团</view>
+          <text class="pro-text">
+            {{ res[prom].requiredNum }}人拼团 限购
+            <text class="price">{{ res[prom].limitNum }}件</text>
+          </text>
         </view>
+      </view>
 
-        <view v-if="prom.split('-')[0] == 'POINTS_GOODS'">
-          <div class="res_prom_item">
-            <u-tag text="积分活动" type="error"></u-tag>
-            <span class="pro-text">当前商品参与积分活动。<span @click="handClickToJoinPromotion(prom)" class="href">点击此处参与活动</span></span>
-          </div>
+      <view v-if="getPromType(prom) == 'SECKILL'">
+        <view class="res_prom_item">
+          <view class="deg_tag">限时抢购</view>
+          <text class="pro-text">限时抢购</text>
         </view>
+      </view>
 
-         <view v-if="prom.split('-')[0] == 'KANJIA'">
-          <div class="res_prom_item">
-            <u-tag text="砍价活动" type="error"></u-tag>
-            <span class="pro-text">当前商品参与砍价活动。<span @click="handClickToJoinPromotion(prom)" class="href">点击此处参与活动</span></span>
-          </div>
+      <view v-if="getPromType(prom) == 'POINTS_GOODS'">
+        <view class="res_prom_item">
+          <view class="deg_tag">积分活动</view>
+          <text class="pro-text">
+            当前商品参与积分活动。
+            <text @tap="handClickToJoinPromotion(prom)" class="href">点击此处参与活动</text>
+          </text>
+        </view>
+      </view>
+
+      <view v-if="getPromType(prom) == 'KANJIA'">
+        <view class="res_prom_item">
+          <view class="deg_tag">砍价活动</view>
+          <text class="pro-text">
+            当前商品参与砍价活动。
+            <text @tap="handClickToJoinPromotion(prom)" class="href">点击此处参与活动</text>
+          </text>
         </view>
       </view>
     </view>
-    <view v-if="!res">暂无促销活动</view>
+    <view v-if="!promotionKeys.length">暂无促销活动</view>
   </view>
 </template>
-<script>
-export default {
-  data() {
-    return {};
-  },
-  watch: {
-    res: {
-      handler() {
-        if (this.res && this.res.length != 0) {
-          Object.keys(this.res).forEach((item) => {
-            if (item != "COUPON") {
-              let key = item.split("-")[0];
-              this.res[item]._key = key;
-            }
-          });
-        }
-      },
 
-      immediate: true,
-    },
-  },
+<script setup lang="ts">
+import { computed } from 'vue'
 
-  props: {
-    // 父组件传递回来的数据
-    res: {
-      type: null,
-      default: "",
-    },
-  },
-  mounted() {},
-  methods: {
-    // 跳转到参与商品活动的详情列表中
-    handClickToJoinPromotion(val){
-    
-      const promotion = {
-        "POINTS_GOODS": `/pages/promotion/point/detail?id=${this.res[val].id}`,
-        "KANJIA": `/pages/promotion/bargain/detail?id=${this.res[val].id}`,
-      }
+const props = defineProps<{
+  res?: any
+}>()
 
-      uni.navigateTo({
-        url:promotion[val.split('-')[0]]
-      })
+const promotionKeys = computed(() => {
+  if (!props.res || typeof props.res !== 'object') return []
+  return Object.keys(props.res).filter((key) => getPromType(key) !== 'COUPON')
+})
 
-    }
-  },
-};
+function getPromType(key: string) {
+  return key.split('-')[0]
+}
+
+function handClickToJoinPromotion(val: string) {
+  const type = getPromType(val)
+  const promotionMap: Record<string, string> = {
+    POINTS_GOODS: `/pages/promotion/point/detail?id=${props.res[val].id}`,
+    KANJIA: `/pages/promotion/bargain/detail?id=${props.res[val].id}`,
+  }
+  const url = promotionMap[type]
+  if (url) {
+    uni.navigateTo({ url })
+  }
+}
 </script>
+
 <style lang="scss" scoped>
+.deg_tag {
+  flex-shrink: 0;
+  color: $price-color;
+  padding: 4rpx 12rpx;
+  border: 2rpx solid $price-color;
+  border-radius: 6rpx;
+  font-size: 22rpx;
+  line-height: 1.4;
+  white-space: nowrap;
+}
+
 .pro-text {
+  flex: 1;
+  min-width: 0;
   font-size: 26rpx;
-  font-family: PingFang SC, PingFang SC-Regular;
-  font-weight: 400;
-  text-align: left;
+  line-height: 1.6;
   color: #333333;
-  margin-left: 20rpx;
-  word-spacing: 15rpx;
 }
 
 .wrapper {
   display: block;
 }
 
-::v-deep .u-mode-light-error {
-  border: none;
-}
-
 .res_prom_item {
+  display: flex;
+  align-items: flex-start;
+  gap: 16rpx;
   margin: 20rpx 0;
 }
 
-.price_image {
-  display: block;
+.price {
+  color: $price-color;
 }
-.href{
+
+.href {
   color: $main-color;
 }
 </style>
diff --git a/pages/product/product/promotion/-promotion.vue b/pages/product/product/promotion/-promotion.vue
index 82b3f76..8ff9c85 100644
--- a/pages/product/product/promotion/-promotion.vue
+++ b/pages/product/product/promotion/-promotion.vue
@@ -50,51 +50,45 @@
 			</view>
 		</view>
 
-		<view v-if="this.res != null && Object.keys(res).length == 0">暂无促销信息</view>
+		<view v-if="res != null && Object.keys(res).length == 0">暂无促销信息</view>
 	</view>
 </template>
 
-<script>
-import promotion from './promotion_type';
-export default {
-	data() {
-		return {
-			promotion,
-			couponList: ''
-		};
-	},
-	props: {
-		// 父组件传递回来的数据
-		res: {
-			type: null,
-			default: {}
-		}
-	},
-	watch: {
-		res: {
-			handler() {
-				if (this.res && this.res.length != 0 && this.res != null) {
-					Object.keys(this.res).forEach(item => {
-						let key = item.split('-')[0];
-						this.res[item].__key = key;
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import promotion from './promotion_type'
 
-						if (item.split('-')[0] == 'COUPON') {
-							this.couponList = 'COUPON';
-						}
-					});
-				}
-			},
-			immediate: true
-		}
-	},
-	mounted() {},
-	methods: {
-		// 此方法条用父级方法
-		shutMask(val) {
-			this.$emit('shutMasks', val);
-		}
-	}
-};
+const props = defineProps<{
+  res?: any
+}>()
+
+const emit = defineEmits<{
+  shutMasks: [val: number]
+}>()
+
+const couponList = ref('')
+
+watch(
+  () => props.res,
+  (res) => {
+    couponList.value = ''
+    if (res && res.length != 0 && res != null) {
+      Object.keys(res).forEach((item) => {
+        const key = item.split('-')[0]
+        res[item].__key = key
+
+        if (item.split('-')[0] == 'COUPON') {
+          couponList.value = 'COUPON'
+        }
+      })
+    }
+  },
+  { immediate: true }
+)
+
+function shutMask(val: number) {
+  emit('shutMasks', val)
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/product/product/shop/-shop.vue b/pages/product/product/shop/-shop.vue
index 8f3db26..9aefd48 100644
--- a/pages/product/product/shop/-shop.vue
+++ b/pages/product/product/shop/-shop.vue
@@ -39,33 +39,31 @@
   </view>
 </template>
 
-<script>
-export default {
-  data() {
-    return {};
-  },
-  props: ["res", "goodsDetail", "storeDetail"],
-  computed: {
-    recommendGoods() {
-      return (this.res || []).filter((item) => item && item.thumbnail && item.goodsName);
-    },
-  },
-  mounted() {},
-  methods: {
-    // 点击商品
-    clickGoods(val) {
-      uni.navigateTo({
-        url: `/pages/product/goods?id=${val.id}&goodsId=${val.goodsId}`,
-      });
-    },
+<script setup lang="ts">
+import { computed } from 'vue'
+import { goodsFormatPrice } from '@/utils/filters.js'
 
-    tostorePage(val) {
-      uni.navigateTo({
-        url: "../product/shopPage?id=" + val.storeId,
-      });
-    },
-  },
-};
+const props = defineProps<{
+  res?: any[]
+  goodsDetail?: any
+  storeDetail?: any
+}>()
+
+const recommendGoods = computed(() => {
+  return (props.res || []).filter((item) => item && item.thumbnail && item.goodsName)
+})
+
+function clickGoods(val: any) {
+  uni.navigateTo({
+    url: `/pages/product/goods?id=${val.id}&goodsId=${val.goodsId}`,
+  })
+}
+
+function tostorePage(val: any) {
+  uni.navigateTo({
+    url: '../product/shopPage?id=' + val.storeId,
+  })
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/product/product/style.scss b/pages/product/product/style.scss
index 222f988..4bddc5b 100644
--- a/pages/product/product/style.scss
+++ b/pages/product/product/style.scss
@@ -30,7 +30,15 @@ page {
     font-size: 24rpx;
 }
 .cuxiao{
-    padding:16rpx 32rpx;
+    padding:16rpx 32rpx 32rpx;
+}
+
+.con-cuxiao {
+    margin-bottom: 24rpx;
+
+    &.coupons {
+        padding-top: 8rpx;
+    }
 }
 .detail-btn {
     display: flex;
@@ -171,6 +179,7 @@ page {
 .scroll-hide {
     opacity: 0;
     transition: all 0.5s;
+    pointer-events: none;
 }
 .cur {
     color: $main-color;
@@ -188,52 +197,88 @@ page {
 
 .header-only-back {
     background: transparent;
+    z-index: 9;
 }
 .header,
 .header-only-back {
     padding-left: 10rpx;
-    position: fixed;
-    top: var(--status-bar-height);
-    width: 100%;
     z-index: 8;
-    height: 90rpx;
     font-size: 30rpx;
     transition: all 0.5s;
+
+    :deep(.u-navbar__content__left) {
+        width: auto !important;
+        min-width: 150rpx;
+        padding: 0 8rpx 0 0 !important;
+        z-index: 2;
+    }
+
+    :deep(.u-navbar__content) {
+        padding: 0 150rpx;
+        box-sizing: border-box;
+    }
 }
 ::v-deep .u-navbar {
     padding-left: 10rpx;
 }
 .nav-item {
-    flex: 2;
+    flex: 0 0 auto;
     position: relative;
     justify-content: center;
     height: 100%;
     display: flex;
     align-items: center;
+    padding: 0 20rpx;
+    font-size: 28rpx;
+    white-space: nowrap;
 }
 .header {
     color: #666666;
     background-color: #fff;
+
+    :deep(.u-navbar__content) {
+        background-color: #fff !important;
+    }
+
     .tab-bar {
         width: 100%;
         color: #666;
         font-weight: 400;
-        view {
-            padding: 0 3px;
-        }
     }
     &.bg-none {
         background: transparent;
+
+        :deep(.u-navbar__content) {
+            background-color: transparent !important;
+        }
     }
 }
 
+.headerRow--tabs {
+    justify-content: center;
+    gap: 8rpx;
+    width: 100%;
+}
+
+.headerList {
+    width: 100%;
+}
+
+.nav-action {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 56rpx;
+    min-height: 56rpx;
+    padding: 0 6rpx;
+}
+
 .page-bottom {
-    position: fixed;
-    bottom: 0;
-    left: 0;
+    position: relative;
+    flex-shrink: 0;
     z-index: 9;
     background: #fff;
-    height: 100rpx;
+    min-height: 100rpx;
     width: 100%;
     display: flex;
     border-top: 2rpx solid #f2f2f2;
@@ -267,15 +312,24 @@ page {
 }
 
 .main-page {
-    height: calc(100% - var(--status-bar-height));
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
     overflow: hidden;
 }
-.icon-back {
-    padding-right: 10rpx;
+
+.index {
+    position: relative;
+    z-index: 10;
+    flex-shrink: 0;
 }
+.icon-back,
 .icon-list {
+    padding: 0;
+}
+
+.nav-action + .nav-action {
     border-left: 2rpx solid rgb(194, 194, 194);
-    padding-left: 10rpx;
 }
 .backs,
 .bg-back {
@@ -284,8 +338,9 @@ page {
     border-radius: 100px;
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: space-around;
     padding: 8rpx 0;
+    box-sizing: border-box;
 }
 .bg-back {
     background: rgba($color: #fff, $alpha: 0.8);
@@ -324,6 +379,12 @@ page {
 }
 
 .product-container {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+
     .header-line {
         height: 1px;
         background: #f2f2f2;
@@ -340,16 +401,16 @@ page {
     }
 
     .scroll-page {
+        flex: 1;
+        height: 0;
         width: 100%;
-        height: 100%;
         background: #f0f0f0;
     }
 
     .scroll-inner {
-        min-height: 100%;
         box-sizing: border-box;
         background: #f0f0f0;
-        padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+        padding-bottom: 24rpx;
     }
 }
 
diff --git a/pages/product/shopList.vue b/pages/product/shopList.vue
index 4afb352..20088ae 100644
--- a/pages/product/shopList.vue
+++ b/pages/product/shopList.vue
@@ -36,82 +36,62 @@
             </div>
           </div>
         </div>
-        <!-- 
-          #TODO 后续将和后端补充从此处
-          <div class="flex store-goods">
-            <div class="store-goods-item" v-for="i in 3" :key="i">
-              <div>
-                <u-image src="https://picsum.photos/id/341/200/200" border-radius="20" width="215rpx" height="215rpx">
-                </u-image>
-              </div>
-              <div class="price">
-                <span>
-                  ￥
-                  <span class=" goods-price-bigshow">{{ formatPrice(16)[0] }}</span>
-                  .{{ formatPrice(16)[1] }}
-                </span>
-
-              </div>
-              <div class="wes">test</div>
-            </div>
-           </div> 
-        -->
       </div>
     </div>
     <u-empty style="margin-top:20%;" text="暂无店铺信息" v-else></u-empty>
   </div>
 </template>
 
-<script>
-import { getStoreList } from "@/api/store";
-export default {
-  data() {
-    return {
-      keyword: "",
-      params: {
-        pageNumber: 1,
-        pageSize: 10,
-        storeName: "",
-      },
-      storeList: [], // 店铺列表
-    };
-  },
-  onReachBottom() {
-    this.params.pageNumber++;
-    this.init();
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    back() {
-      uni.navigateBack({
-        delta: 1,
-        fail: () => {
-          uni.switchTab({ url: "/pages/tabbar/home/index" });
-        },
-      });
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue'
+import { onReachBottom } from '@dcloudio/uni-app'
+import { getStoreList } from '@/api/store'
+import { unitPrice } from '@/utils/filters.js'
+
+const params = reactive({
+  pageNumber: 1,
+  pageSize: 10,
+  storeName: '',
+})
+const storeList = ref<any[]>([])
+
+function back() {
+  uni.navigateBack({
+    delta: 1,
+    fail: () => {
+      uni.switchTab({ url: '/pages/tabbar/home/index' })
     },
-    handleClickStore(val){
-      uni.navigateTo({
-         url: `/pages/product/shopPage?id=${val.id}`
-      });
-    },
-    search() {
-      this.storeList = [];
-      this.init();
-    },
-   
-    async init() {
-      let res = await getStoreList(this.params);
-      if (res.data.success) {
-        let data = res.data.result;
-        
-        this.storeList.push(...data.records);
-      }
-    },
-  },
-};
+  })
+}
+
+function handleClickStore(val: any) {
+  uni.navigateTo({
+    url: `/pages/product/shopPage?id=${val.id}`,
+  })
+}
+
+function search() {
+  storeList.value = []
+  params.pageNumber = 1
+  init()
+}
+
+async function init() {
+  const res = await getStoreList(params)
+  if (res.data.success) {
+    const data = res.data.result
+    storeList.value.push(...data.records)
+  }
+}
+
+onReachBottom(() => {
+  params.pageNumber++
+  init()
+})
+
+onMounted(() => {
+  init()
+})
 </script>
 
 <style lang="scss" scoped>
@@ -179,4 +159,4 @@ export default {
   padding: 0 20rpx;
   box-sizing: border-box;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/pages/product/shopPage.vue b/pages/product/shopPage.vue
index 33458ba..9fec6e3 100644
--- a/pages/product/shopPage.vue
+++ b/pages/product/shopPage.vue
@@ -20,8 +20,8 @@
             <view v-if="!enablePageData" class="search-wrap" @click.stop>
               <u-search
                 v-model="keyword"
-                @search="search"
-                @click="search"
+                @search="goToSearch"
+                @click="goToSearch"
                 placeholder="请输入搜索"
                 :show-action="false"
               ></u-search>
@@ -134,9 +134,13 @@
       </div>
 
       <!-- 楼层装修模式 -->
-      <div v-if="enablePageData">
+      <view v-if="enablePageData" class="floor-page">
         <!-- uni 中不能使用 vue component 所以用if判断每个组件 -->
-        <div v-for="(item, index) in pageData.list || []" :key="index">
+        <view
+          v-for="(item, index) in pageData.list || []"
+          :key="`${item.type}-${index}`"
+          class="floor-block"
+        >
           <!-- 搜索栏，如果在楼层装修顶部则会自动浮动，否则不浮动 -->
           <u-navbar
             class="navbar shop-navbar"
@@ -183,396 +187,352 @@
           <menuLayout v-if="item.type == 'menu'" :res="item.options" />
           <flexOne v-if="item.type == 'flexOne'" :res="item.options" />
 
-          <goods v-if="item.type == 'goods'" :res="item.options" />
+          <GoodsFloor v-if="item.type == 'goods'" :res="item.options" />
 
           <group v-if="item.type == 'group'" :res="item.options" />
           <!-- <joinGroup v-if="item.type == 'joinGroup'" :res="item.options" /> -->
           <!-- <integral v-if="item.type == 'integral'" :res="item.options" /> -->
           <!-- <spike v-if="item.type == 'spike'" :res="item.options" /> -->
-        </div>
-      </div>
+        </view>
+      </view>
       <u-no-network></u-no-network>
     </div>
   </view>
 </template>
 
-<script>
-// 引用组件
-import tpl_banner from "@/pages/tabbar/home/template/tpl_banner"; //导航栏模块
-import tpl_title from "@/pages/tabbar/home/template/tpl_title"; //标题栏模块
-import tpl_left_one_right_two from "@/pages/tabbar/home/template/tpl_left_one_right_two"; //左一右二模块
-import tpl_left_two_right_one from "@/pages/tabbar/home/template/tpl_left_two_right_one"; //左二右一模块
-import tpl_top_one_bottom_two from "@/pages/tabbar/home/template/tpl_top_one_bottom_two"; //上一下二模块
-import tpl_top_two_bottom_one from "@/pages/tabbar/home/template/tpl_top_two_bottom_one"; //上二下一模块
-import tpl_flex_one from "@/pages/tabbar/home/template/tpl_flex_one"; //单行图片模块
-import tpl_flex_two from "@/pages/tabbar/home/template/tpl_flex_two"; //两张横图模块
-import tpl_flex_three from "@/pages/tabbar/home/template/tpl_flex_three"; //三列单行图片模块
-import tpl_flex_five from "@/pages/tabbar/home/template/tpl_flex_five"; //五列单行图片模块
-import tpl_flex_four from "@/pages/tabbar/home/template/tpl_flex_four"; //四列单行图片模块
-import tpl_text_picture from "@/pages/tabbar/home/template/tpl_text_picture"; //文字图片模板
-import tpl_menu from "@/pages/tabbar/home/template/tpl_menu"; //五列菜单模块
-import tpl_search from "@/pages/tabbar/home/template/tpl_search"; //搜索栏
-import tpl_group from "@/pages/tabbar/home/template/tpl_group"; //
-import tpl_goods from "@/pages/tabbar/home/template/tpl_goods"; //商品分类以及分类中的商品
-import goodsTemplate from '@/components/m-goods-list/list'
-import { getStoreBaseInfo, getStoreCategory } from "@/api/store.js";
+<script setup lang="ts">
+import { ref, reactive, computed, watch, onMounted } from 'vue'
+import {
+  onLoad,
+  onPageScroll,
+  onPullDownRefresh,
+  onReachBottom,
+} from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import carousel from '@/pages/tabbar/home/template/tpl_banner.vue'
+import titleLayout from '@/pages/tabbar/home/template/tpl_title.vue'
+import leftOneRightTwo from '@/pages/tabbar/home/template/tpl_left_one_right_two.vue'
+import leftTwoRightOne from '@/pages/tabbar/home/template/tpl_left_two_right_one.vue'
+import topOneBottomTwo from '@/pages/tabbar/home/template/tpl_top_one_bottom_two.vue'
+import topTwoBottomOne from '@/pages/tabbar/home/template/tpl_top_two_bottom_one.vue'
+import flexOne from '@/pages/tabbar/home/template/tpl_flex_one.vue'
+import flexTwo from '@/pages/tabbar/home/template/tpl_flex_two.vue'
+import flexThree from '@/pages/tabbar/home/template/tpl_flex_three.vue'
+import flexFive from '@/pages/tabbar/home/template/tpl_flex_five.vue'
+import flexFour from '@/pages/tabbar/home/template/tpl_flex_four.vue'
+import textPicture from '@/pages/tabbar/home/template/tpl_text_picture.vue'
+import menuLayout from '@/pages/tabbar/home/template/tpl_menu.vue'
+import search from '@/pages/tabbar/home/template/tpl_search.vue'
+import group from '@/pages/tabbar/home/template/tpl_group.vue'
+import GoodsFloor from '@/pages/tabbar/home/template/tpl_goods.vue'
+import goodsTemplate from '@/components/m-goods-list/list.vue'
+import { getStoreBaseInfo, getStoreCategory } from '@/api/store.js'
 import {
   receiveCoupons,
   deleteStoreCollection,
   collectionStore,
   getStoreIsCollect,
-} from "@/api/members.js";
-import config from "@/config/config";
+} from '@/api/members.js'
+import config from '@/config/config'
+import { getGoodsList } from '@/api/goods.js'
+import { getAllCoupons } from '@/api/promotions.js'
+import { getFloorStoreData } from '@/api/home'
+import {
+  isLogin,
+  navigateToLogin,
+  talkIm,
+  unitPrice,
+} from '@/utils/filters.js'
+import storage from '@/utils/storage.js'
 
-import { getGoodsList } from "@/api/goods.js";
-import { getAllCoupons } from "@/api/promotions.js";
-import { getFloorStoreData } from "@/api/home"; //获取楼层装修接口
-export default {
-  data() {
-    return {
-      config,
-      pageData: { list: [] }, //楼层页面数据
-      enablePageData: false, //是否显示楼层装修内容
-      basePageData: false, //基础店铺信息
-      scrollTop: 0,
-      mainColor: this.$mainColor, //主色调
-      current: 0, //初始tabs的索引
-      tabs: [
-        {
-          name: "全部商品",
-        },
-        {
-          name: "分类查看",
-        },
-      ], // 标签
-      storeId: "",
-      keyword: "",
-      storeInfo: {}, //店铺详情
-      isCollection: false, //是否关注
-      goodsList: [], //推荐货物
-      couponList: [], //优惠券列表
-      categoryList: [],
-      couponParams: {
-        pageNumber: 1,
-        pageSize: 50,
-        storeId: "",
-      },
-      goodsParams: {
-        pageNumber: 1,
-        pageSize: 10,
-        storeId: "",
-      },
-    };
-  },
-  components: {
-    carousel: tpl_banner,
-    titleLayout: tpl_title,
-    leftOneRightTwo: tpl_left_one_right_two,
-    leftTwoRightOne: tpl_left_two_right_one,
-    topOneBottomTwo: tpl_top_one_bottom_two,
-    topTwoBottomOne: tpl_top_two_bottom_one,
-    flexThree: tpl_flex_three,
-    flexFive: tpl_flex_five,
-    flexFour: tpl_flex_four,
-    flexTwo: tpl_flex_two,
-    textPicture: tpl_text_picture,
-    menuLayout: tpl_menu,
-    search: tpl_search,
-    flexOne: tpl_flex_one,
-    goods: tpl_goods,
-    group: tpl_group,
-    goodsTemplate
-    // spike: tpl_spike,
-    // joinGroup: tpl_join_group,
-    // integral: tpl_integral,
-  },
-  watch: {
-    current(val) {
-      val == 0
-        ? () => {
-            this.goodsList = [];
-            this.getGoodsData();
-          }
-        : this.getCategoryData();
-    },
-  },
+const store = useStore()
+const mainColor = computed(() => store.getters.mainColor)
 
-  computed: {
-    floorHasTopSearch() {
-      const list = this.pageData && this.pageData.list;
-      if (!list || !list.length) return false;
-      return list.some((item, index) => item.type === "search" && index !== 1);
-    },
-  },
+const pageData = ref<{ list: any[] }>({ list: [] })
+const enablePageData = ref(false)
+const basePageData = ref(false)
+const scrollTop = ref(0)
+const current = ref(0)
+const tabs = [
+  { name: '全部商品' },
+  { name: '分类查看' },
+]
+const storeId = ref('')
+const keyword = ref('')
+const storeInfo = ref<any>({})
+const isCollection = ref(false)
+const goodsList = ref<any[]>([])
+const couponList = ref<any[]>([])
+const categoryList = ref<any[]>([])
+const couponParams = reactive({
+  pageNumber: 1,
+  pageSize: 50,
+  storeId: '',
+})
+const goodsParams = reactive({
+  pageNumber: 1,
+  pageSize: 10,
+  storeId: '',
+})
 
-  /**
-   * 加载
-   */
-  async onLoad(options) {
-    this.storeId = options.id;
-    console.log(this.storeId,'this.storeId')
+const floorHasTopSearch = computed(() => {
+  const list = pageData.value && pageData.value.list
+  if (!list || !list.length) return false
+  return list.some((item, index) => item.type === 'search' && index !== 1)
+})
 
-    this.goodsParams.storeId = options.id;
-    this.couponParams.storeId = options.id;
-  },
-  onPageScroll(e) {
-    this.scrollTop = e.scrollTop;
-  },
-  onPullDownRefresh() {
-    this.init();
-  },
-  mounted() {
-    // #ifdef MP-WEIXIN
-    // 小程序默认分享
-    uni.showShareMenu({
-      withShareTicket: true,
-    });
-    // #endif
-    this.init();
-  },
+watch(current, (val) => {
+  if (val == 0) {
+    goodsList.value = []
+    getGoodsData()
+  } else {
+    getCategoryData()
+  }
+})
 
-  // 下拉加载
-  onReachBottom() {
-    this.goodsParams.pageNumber++;
-    this.getGoodsData();
-  },
+function talk() {
+  talkIm(storeInfo.value.storeId)
+}
 
-  methods: {
-    talk(){
-      this.talkIm(this.storeInfo.storeId)
-    },
-    back() {
-      const pages = getCurrentPages();
-      if (pages.length > 1) {
-        uni.navigateBack({ delta: 1 });
-      } else {
-        uni.switchTab({ url: "/pages/tabbar/home/index" });
+function back() {
+  const pages = getCurrentPages()
+  if (pages.length > 1) {
+    uni.navigateBack({ delta: 1 })
+  } else {
+    uni.switchTab({ url: '/pages/tabbar/home/index' })
+  }
+}
+
+function isPageDataSuccess(payload: any) {
+  return payload?.success === true || payload?.code === 200
+}
+
+function shouldUseFloorPage(pageShow: unknown) {
+  return pageShow === '1' || pageShow === 1 || pageShow === true
+}
+
+function initPageData() {
+  getFloorStoreData({
+    pageType: 'STORE',
+    num: storeId.value,
+  })
+    .then((res) => {
+      const payload = res?.data ?? res
+      const result = payload?.result
+      const pageDataStr = result?.pageData
+      if (!isPageDataSuccess(payload) || !pageDataStr) {
+        fallbackToBasePage()
+        return
       }
-    },
-    /**
-     * 实例化首页数据楼层
-     */
-    initPageData() {
-      this.pageData = { list: [] };
-      getFloorStoreData({
-        pageType: "STORE",
-        num: this.storeId,
-      })
-        .then((res) => {
-          const result = res.data && res.data.result;
-          const pageDataStr = result && result.pageData;
-          if (res.data.success && pageDataStr) {
-            try {
-              const parsed = JSON.parse(pageDataStr);
-              this.pageData =
-                parsed && Array.isArray(parsed.list)
-                  ? parsed
-                  : { list: [] };
-              this.enablePageData = true;
-            } catch (e) {
-              this.fallbackToBasePage();
-            }
-          } else {
-            this.fallbackToBasePage();
-          }
-        })
-        .catch(() => {
-          this.fallbackToBasePage();
-        });
-    },
-    fallbackToBasePage() {
-      this.enablePageData = false;
-      this.basePageData = true;
-      this.pageData = { list: [] };
-      this.getGoodsData();
-      this.getCategoryData();
-    },
-    getStoreLicencePhoto() {
-      uni.navigateTo({
-        url: `/pages/product/licencePhoto?id=${this.storeId}`,
-      });
-    },
-    /**
-     * 初始化信息
-     */
-    init() {
-      this.goodsList = [];
-      this.categoryList = [];
-      this.couponList = [];
-      this.goodsParams.pageNumber = 1;
-      if (this.isLogin("auth")) {
-        this.enableGoodsIsCollect();
-      }
-      // 店铺信息
-      this.getStoreData();
-    },
-    /**
-     * 联系客服
-     */
-    linkKefuDetail() {
-      // 客服
-      // #ifdef MP-WEIXIN
-
-      const params = {
-        // originalPrice: this.goodsDetail.original || this.goodsDetail.price,
-        uuid: storage.getUuid(),
-        token: storage.getAccessToken(),
-        sign: this.storeInfo.yzfSign,
-        mpSign: this.storeInfo.yzfMpSign,
-      };
-      uni.navigateTo({
-        url:
-          "/pages/mine/im/index"
-      });
-      // uni.navigateTo({
-      //   url:
-      //     "/pages/product/customerservice/index?params=" +
-      //     encodeURIComponent(JSON.stringify(params)),
-      // });
-      // // #endif
-      // // #ifndef MP-WEIXIN
-      // const sign = this.storeInfo.yzfSign;
-      // uni.navigateTo({
-      //   url:
-      //     "/pages/tabbar/home/web-view?src=https://yzf.qq.com/xv/web/static/chat/index.html?sign=" +
-      //     sign,
-      // });
-      // #endif
-    },
-
-    /** 获取店铺分类 */
-    async getCategoryData() {
-      let res = await getStoreCategory(this.storeId);
-      if (res.data.success) {
-        this.categoryList = res.data.result;
-      }
-    },
-    /**是否收藏店铺 */
-    async enableGoodsIsCollect() {
-      let res = await getStoreIsCollect("STORE", this.storeId);
-      if (res.data.success) {
-        this.isCollection = res.data.result;
-      }
-    },
-
-    /**商品分类中商品集合 */
-    getCategoryGoodsList(val) {
-      uni.navigateTo({
-        url: `/pages/product/shopPageGoods?title=${val.labelName}&id=${val.id}&storeId=${this.storeId}`,
-      });
-    },
-
-    /**
-     * 搜索
-     */
-    search() {
-      uni.navigateTo({
-        url: `/pages/navigation/search/searchPage?storeId=${this.storeId}&keyword=${this.keyword}`,
-      });
-    },
-
-    /**
-     * 店铺信息
-     */
-    async getStoreData() {
-      let res = await getStoreBaseInfo(this.storeId);
-      if (res.data.success) {
-        this.storeInfo = res.data.result;
-        // 优惠券信息
-        this.getCouponsData();
-        if(res.data.result.pageShow == '1'){
-          // 开启了楼层装修店铺
-          this.initPageData();
+      try {
+        const parsed = JSON.parse(pageDataStr)
+        pageData.value =
+          parsed && Array.isArray(parsed.list) ? parsed : { list: [] }
+        enablePageData.value = pageData.value.list.length > 0
+        if (!enablePageData.value) {
+          fallbackToBasePage()
         }
-        else{
-          // 商品信息
-          this.getGoodsData();
-          // 店铺分类
-          this.getCategoryData();
-          
-          this.basePageData = true;
-        }
-      } else {
-        uni.reLaunch({
-          url: "/",
-        });
+      } catch (e) {
+        fallbackToBasePage()
       }
-    },
+    })
+    .catch(() => {
+      fallbackToBasePage()
+    })
+}
 
-    /** 加载商品 */
-    async getGoodsData() {
-      let res = await getGoodsList(this.goodsParams);
+function fallbackToBasePage() {
+  enablePageData.value = false
+  basePageData.value = true
+  pageData.value = { list: [] }
+  getGoodsData()
+  getCategoryData()
+}
+
+function getStoreLicencePhoto() {
+  uni.navigateTo({
+    url: `/pages/product/licencePhoto?id=${storeId.value}`,
+  })
+}
+
+function init() {
+  goodsList.value = []
+  categoryList.value = []
+  couponList.value = []
+  goodsParams.pageNumber = 1
+  if (isLogin('auth')) {
+    enableGoodsIsCollect()
+  }
+  getStoreData()
+}
+
+function linkKefuDetail() {
+  // 客服
+  // #ifdef MP-WEIXIN
+
+  const params = {
+    // originalPrice: goodsDetail.original || goodsDetail.price,
+    uuid: storage.getUuid(),
+    token: storage.getAccessToken(),
+    sign: storeInfo.value.yzfSign,
+    mpSign: storeInfo.value.yzfMpSign,
+  }
+  uni.navigateTo({
+    url: '/pages/mine/im/index',
+  })
+  // uni.navigateTo({
+  //   url:
+  //     "/pages/product/customerservice/index?params=" +
+  //     encodeURIComponent(JSON.stringify(params)),
+  // });
+  // // #endif
+  // // #ifndef MP-WEIXIN
+  // const sign = storeInfo.yzfSign;
+  // uni.navigateTo({
+  //   url:
+  //     "/pages/tabbar/home/web-view?src=https://yzf.qq.com/xv/web/static/chat/index.html?sign=" +
+  //     sign,
+  // });
+  // #endif
+}
+
+async function getCategoryData() {
+  const res = await getStoreCategory(storeId.value)
+  if (res.data.success) {
+    categoryList.value = res.data.result
+  }
+}
+
+async function enableGoodsIsCollect() {
+  const res = await getStoreIsCollect('STORE', storeId.value)
+  if (res.data.success) {
+    isCollection.value = res.data.result
+  }
+}
+
+function getCategoryGoodsList(val: any) {
+  uni.navigateTo({
+    url: `/pages/product/shopPageGoods?title=${val.labelName}&id=${val.id}&storeId=${storeId.value}`,
+  })
+}
+
+function goToSearch() {
+  uni.navigateTo({
+    url: `/pages/navigation/search/searchPage?storeId=${storeId.value}&keyword=${keyword.value}`,
+  })
+}
+
+async function getStoreData() {
+  const res = await getStoreBaseInfo(storeId.value)
+  if (res.data.success) {
+    storeInfo.value = res.data.result
+    getCouponsData()
+    if (shouldUseFloorPage(res.data.result.pageShow)) {
+      initPageData()
+    } else {
+      getGoodsData()
+      getCategoryData()
+      basePageData.value = true
+    }
+  } else {
+    uni.reLaunch({
+      url: '/',
+    })
+  }
+}
+
+async function getGoodsData() {
+  const res = await getGoodsList(goodsParams)
+  if (res.data.success) {
+    goodsList.value.push(...res.data.result.records)
+  }
+}
+
+async function getCouponsData() {
+  couponParams.storeId = storeId.value
+  const res = await getAllCoupons(couponParams)
+  if (res.data.success) {
+    couponList.value.push(...res.data.result.records)
+  }
+}
+
+function whetherCollection() {
+  if (isCollection.value) {
+    deleteStoreCollection(storeId.value).then((res) => {
       if (res.data.success) {
-        this.goodsList.push(...res.data.result.records);
-      }
-    },
-
-    /** 加载优惠券 */
-    async getCouponsData() {
-      this.couponParams.storeId = this.storeId;
-      let res = await getAllCoupons(this.couponParams);
-      if (res.data.success) {
-        this.couponList.push(...res.data.result.records);
-      }
-    },
-
-  
-
-    /**
-     *  是否收藏
-     */
-    whetherCollection() {
-      if (this.isCollection) {
-        deleteStoreCollection(this.storeId).then((res) => {
-          if (res.data.success) {
-            this.isCollection = false;
-            uni.showToast({
-              icon: "none",
-              duration: 3000,
-              title: "取消关注成功！",
-            });
-          }
-        });
-      } else {
-        collectionStore(this.storeId).then((res) => {
-          if (res.data.success) {
-            this.isCollection = true;
-            uni.showToast({
-              icon: "none",
-              duration: 3000,
-              title: "关注成功！",
-            });
-          }
-        });
-      }
-    },
-
-    /**
-     * 领取
-     */
-    getCoupon(item) {
-      if (!this.isLogin("auth")) {
+        isCollection.value = false
         uni.showToast({
-          icon: "none",
+          icon: 'none',
           duration: 3000,
-          title: "请先登录！",
-        });
-
-        this.navigateToLogin("redirectTo");
-        return false;
+          title: '取消关注成功！',
+        })
       }
-      receiveCoupons(item.id).then((res) => {
-        if (res.data.success) {
-          uni.showToast({
-            icon: "none",
-            duration: 3000,
-            title: "领取成功！",
-          });
-        }
-      });
-    },
-  },
-};
+    })
+  } else {
+    collectionStore(storeId.value).then((res) => {
+      if (res.data.success) {
+        isCollection.value = true
+        uni.showToast({
+          icon: 'none',
+          duration: 3000,
+          title: '关注成功！',
+        })
+      }
+    })
+  }
+}
+
+function getCoupon(item: any) {
+  if (!isLogin('auth')) {
+    uni.showToast({
+      icon: 'none',
+      duration: 3000,
+      title: '请先登录！',
+    })
+
+    navigateToLogin('redirectTo')
+    return false
+  }
+  receiveCoupons(item.id).then((res) => {
+    if (res.data.success) {
+      uni.showToast({
+        icon: 'none',
+        duration: 3000,
+        title: '领取成功！',
+      })
+    }
+  })
+}
+
+onLoad((options: any) => {
+  storeId.value = options.id
+  console.log(storeId.value, 'this.storeId')
+
+  goodsParams.storeId = options.id
+  couponParams.storeId = options.id
+})
+
+onPageScroll((e) => {
+  scrollTop.value = e.scrollTop
+})
+
+onPullDownRefresh(() => {
+  init()
+})
+
+onReachBottom(() => {
+  goodsParams.pageNumber++
+  getGoodsData()
+})
+
+onMounted(() => {
+  // #ifdef MP-WEIXIN
+  uni.showShareMenu({
+    withShareTicket: true,
+  })
+  // #endif
+  init()
+})
 </script>
 
 <style lang="scss" scoped>
@@ -903,4 +863,14 @@ export default {
   height: 100%;
   flex-shrink: 0;
 }
+
+.floor-page {
+  width: 100%;
+  background: #f9f9f9;
+}
+
+.floor-block {
+  width: 100%;
+  display: block;
+}
 </style>
diff --git a/pages/product/shopPageGoods.vue b/pages/product/shopPageGoods.vue
index 0342680..1ee7e23 100644
--- a/pages/product/shopPageGoods.vue
+++ b/pages/product/shopPageGoods.vue
@@ -16,54 +16,47 @@
 
 </template>
 
-<script>
-	import {
-		getGoodsList
-	} from "@/api/goods.js";
-	import goodsTemplate from '@/components/m-goods-list/list'
-	export default {
-		data() {
-			return {
-				title: "",
-				routerVal: "",
-				goodsList: [],
-				params: {
-					pageNumber: 1,
-					pageSize: 10,
-					keyword: "",
-					storeCatId: "",
-					storeId: "",
-				},
-			};
-		},
-		components: {
-			goodsTemplate
-		},
-		onLoad(options) {
-			this.routerVal = options;
-			this.params.storeId = options.storeId;
-			this.params.storeCatId = options.id;
-			this.title = options.title;
-		},
-		onShow() {
-			this.goodsList = []
-			this.params.pageNumber = 1;
-			this.getGoodsData();
-		},
-		onReachBottom() {
-			this.params.pageNumber++;
-			this.getGoodsData();
-		},
-		methods: {
-			async getGoodsData() {
-				// #TODO
-				let goodsList = await getGoodsList(this.params);
-				if (goodsList.data.success) {
-					this.goodsList.push(...goodsList.data.result.records);
-				}
-			},
-		},
-	};
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+import { onLoad, onReachBottom, onShow } from '@dcloudio/uni-app'
+import { getGoodsList } from '@/api/goods.js'
+import goodsTemplate from '@/components/m-goods-list/list'
+
+const title = ref('')
+const routerVal = ref<any>('')
+const goodsList = ref<any[]>([])
+const params = reactive({
+  pageNumber: 1,
+  pageSize: 10,
+  keyword: '',
+  storeCatId: '',
+  storeId: '',
+})
+
+async function getGoodsData() {
+  const res = await getGoodsList(params)
+  if (res.data.success) {
+    goodsList.value.push(...res.data.result.records)
+  }
+}
+
+onLoad((options: any) => {
+  routerVal.value = options
+  params.storeId = options.storeId
+  params.storeCatId = options.id
+  title.value = options.title
+})
+
+onShow(() => {
+  goodsList.value = []
+  params.pageNumber = 1
+  getGoodsData()
+})
+
+onReachBottom(() => {
+  params.pageNumber++
+  getGoodsData()
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/promotion/bargain/detail.vue b/pages/promotion/bargain/detail.vue
index 05ace08..f9e8cb6 100644
--- a/pages/promotion/bargain/detail.vue
+++ b/pages/promotion/bargain/detail.vue
@@ -17,7 +17,7 @@
               </div>
               <div class="flex price-box">
                 <div class="purchase-price">
-                  当前:<span>￥{{ activityData.surplusPrice == 0 ? this.bargains.purchasePrice :unitPrice(activityData.surplusPrice)}}</span>
+                  当前:<span>￥{{ activityData.surplusPrice == 0 ? bargains.purchasePrice : unitPrice(activityData.surplusPrice)}}</span>
                 </div>
                 <div class="max-price">原价:<span>￥{{unitPrice(bargainDetail.price)}}</span>
 
@@ -47,7 +47,7 @@
             </div>
           </div>
           <!-- 我要开团 -->
-          <div class="start" v-if="activityData.memberId != isLogin().id" @click="startOpenGroup">我要开团
+          <div class="start" v-if="activityData.memberId != loginUser.id" @click="startOpenGroup">我要开团
           </div>
         </div>
       </div>
@@ -84,7 +84,7 @@
       <u-modal title="恭喜您砍掉了" v-model:show="Bargaining" mask-close-able :show-confirm-button="false"
         :title-style="{color: lightColor}">
         <view class="slot-content">
-          <u-count-to :start-val="0" ref="uCountTo" font-size="100" :color="lightColor" :end-val="kanjiaPrice"
+          <u-count-to :start-val="0" ref="uCountToRef" font-size="100" :color="lightColor" :end-val="kanjiaPrice"
             :decimals="2" :autoplay="autoplay"></u-count-to><span class="price">元</span>
         </view>
       </u-modal>
@@ -103,233 +103,226 @@
         :goodsName="bargainDetail.goodsName" v-if="shareFlage " />
 
       <!-- 购买 -->
-      <popupGoods ref="popupGoods" :buyMask="maskFlag" @closeBuy="closePopupBuy" :goodsDetail="bargainDetail"
+      <popupGoods ref="popupGoodsRef" :buyMask="maskFlag" @closeBuy="closePopupBuy" :goodsDetail="bargainDetail"
         :goodsSpec="goodsSpec" v-if="bargainDetail.id " @handleClickSku="getGoodsDetail" />
 
     </div>
   </div>
 </template>
 
-<script>
-import popupGoods from "@/components/m-buy/goods"; //购物车商品的模块
+<script setup lang="ts">
+import { ref, computed, watch, nextTick } from 'vue'
+import { onLoad, onShow } from '@dcloudio/uni-app'
+// #ifdef MP-WEIXIN
+import { onShareAppMessage } from '@dcloudio/uni-app'
+// #endif
+import { useStore } from '@/store'
+import popupGoods from '@/components/m-buy/goods'
 import {
   getBargainDetail,
   getBargainActivity,
   openBargain,
   getBargainLog,
   helpBargain,
-} from "@/api/promotions";
-import shares from "@/components/m-share/index";
-import config from "@/config/config";
-export default {
-  components: {
-    shares,
-    popupGoods,
-  },
-  data() {
-    return {
-      style: {
-        img:"display:block"
-      },
-      background: {
-        backgroundColor: "transparent",
-      },
-      maskFlag: false, //商品弹框
-      shareFlage: false,
-      lightColor: this.$lightColor,
-      bargains: {},
-      bargainDetail: {}, //砍价商品详情
-      Bargaining: false, //砍价弹出框
-      helpBargainFlage: false, //帮砍弹出框
-      autoplay: false, //砍价金额滚动
-      kanjiaPrice: 0, //砍价金额
-      totalPercent: 0, //砍价半分比
-      activityData: "", //砍价活动
-      cutPrice: 0, //已砍金额
-      params: {
-        // id: "", //砍价活动ID
-        // kanjiaActivityGoodsId: "", //砍价商品SkuID
-        // kanjiaActivityId: "", //邀请活动ID，有值说明是被邀请人
-        // status: "", //状态
-      },
+} from '@/api/promotions'
+import shares from '@/components/m-share/index'
+import config from '@/config/config'
+import { unitPrice, noPassByName, isLogin } from '@/utils/filters.js'
 
-      logData: [], // 帮砍记录
-      //获取帮砍记录参数
-      logParams: {
-        pageNumber: 1,
-        pageSize: 20,
-        kanJiaActivityId: "",
-      },
+const store = useStore()
 
-      goodsDetail: {}, //商品详情
-      goodsSpec: {}, //商品规格
-      selectedGoods: "", //选择的商品
-    };
-  },
-  onLoad(options) {
-    this.routerVal = options;
-    if (options.activityId) {
-      this.params.kanjiaActivityId = options.activityId;
+const lightColor = computed(() => store.getters.lightColor)
+
+const style = ref({
+  img: 'display:block',
+})
+
+const background = ref({
+  backgroundColor: 'transparent',
+})
+
+const maskFlag = ref(false)
+const shareFlage = ref(false)
+const bargains = ref<any>({})
+const bargainDetail = ref<any>({})
+const Bargaining = ref(false)
+const helpBargainFlage = ref(false)
+const autoplay = ref(false)
+const kanjiaPrice = ref(0)
+const totalPercent = ref(0)
+const activityData = ref<any>({})
+const cutPrice = ref<number | string>(0)
+
+const params = ref<Record<string, any>>({})
+
+const logData = ref<any[]>([])
+
+const logParams = ref({
+  pageNumber: 1,
+  pageSize: 20,
+  kanJiaActivityId: '',
+})
+
+const goodsSpec = ref<any>({})
+const routerVal = ref<Record<string, string>>({})
+
+const loginUser = computed(() => isLogin() || {})
+
+const popupGoodsRef = ref<any>(null)
+const uCountToRef = ref<any>(null)
+
+onLoad((options) => {
+  routerVal.value = options || {}
+  if (options?.activityId) {
+    params.value.kanjiaActivityId = options.activityId
+  }
+})
+
+// #ifdef MP-WEIXIN
+onShareAppMessage(() => {
+  return {
+    path: share(),
+    title: `请快来帮我砍一刀${bargainDetail.value.goodsName}`,
+    imageUrl: bargainDetail.value.thumbnail || config.logo,
+  }
+})
+// #endif
+
+onShow(() => {
+  init()
+})
+
+watch(Bargaining, (val) => {
+  if (val) {
+    nextTick(() => {
+      uCountToRef.value?.start?.()
+    })
+  }
+})
+
+watch(
+  activityData,
+  (val) => {
+    if (val) {
+      totalPercent.value =
+        100 -
+        Math.floor((val.surplusPrice / bargainDetail.value.price) * 100)
+      cutPrice.value = (
+        bargainDetail.value.price - activityData.value.surplusPrice
+      ).toFixed(2)
+
+      logParams.value.kanJiaActivityId = val.id
+
+      if (params.value.kanjiaActivityId && val.help) {
+        helpBargainFlage.value = true
+      }
+
+      getBargainLogList()
     }
   },
+  { immediate: true }
+)
 
-  // #ifdef MP-WEIXIN
-  onShareAppMessage(res) {
-    return {
-      path: this.share(),
-      title: `请快来帮我砍一刀${this.bargainDetail.goodsName}`,
-      imageUrl: this.bargainDetail.thumbnail || config.logo,
-    };
-  },
-  // #endif
+function share() {
+  return (
+    '/pages/promotion/bargain/detail?id=' +
+    routerVal.value.id +
+    '&activityId=' +
+    activityData.value.id
+  )
+}
 
-  onShow() {
-    this.init();
-  },
-  watch: {
-    // 砍价弹窗
-    Bargaining(val) {
-      if (val) {
-        this.$nextTick(() => {
-          this.$refs.uCountTo.start();
-        });
-      }
-    },
-    // 监听砍价活动金额
-    activityData: {
-      handler(val) {
-        if (val) {
-          // 计算砍价百分比
-          this.totalPercent =
-            100 -
-            Math.floor((val.surplusPrice / this.bargainDetail.price) * 100);
-          this.cutPrice = (
-            this.bargainDetail.price - this.activityData.surplusPrice
-          ).toFixed(2);
-          // 获取砍价日志
-          this.logParams.kanJiaActivityId = val.id;
+function back() {
+  if (getCurrentPages().length > 1) {
+    uni.navigateBack()
+  } else {
+    uni.redirectTo({
+      url: `/pages/promotion/bargain/list`,
+    })
+  }
+}
 
-          // 判断是否是帮砍
-          if (this.params.kanjiaActivityId && val.help) {
-            this.helpBargainFlage = true;
-          }
+function startOpenGroup() {
+  uni.redirectTo({
+    url: `/pages/promotion/bargain/list`,
+  })
+}
 
-          this.getBargainLogList();
-        }
-      },
-      immediate: true,
-    },
-  },
-  methods: {
-    share() {
-      return (
-        "/pages/promotion/bargain/detail?id=" +
-        this.routerVal.id +
-        "&activityId=" +
-        this.activityData.id
-      );
-    },
-    // 返回上一级
-    back() {
-      // 进行路由栈判定如果当前路由栈是空的就返回拼团列表页面
-      if (getCurrentPages().length > 1) {
-        uni.navigateBack();
-      } else {
-        uni.redirectTo({
-          url: `/pages/promotion/bargain/list`,
-        });
-      }
-    },
+function closePopupBuy() {
+  maskFlag.value = false
+}
 
-    // 跳转选择商品页面
-    startOpenGroup() {
-      uni.redirectTo({
-        url: `/pages/promotion/bargain/list`,
-      });
-    },
-    closePopupBuy(val) {
-      this.maskFlag = false;
-    },
-    closeShare() {
-      this.shareFlage = false;
-    },
-    // 邀请砍价
-    shareBargain() {
-      this.shareFlage = true;
-    },
+function closeShare() {
+  shareFlage.value = false
+}
 
-    // 获取商品详情
-    getGoodsDetail() {
-      uni.showLoading({
-        title: "加载中",
-        mask: true,
-      });
-      this.$refs.popupGoods.buy({
-        skuId: this.bargainDetail.id,
-        id: this.routerVal.id,
-        num: 1,
-        cartType: "KANJIA",
-      });
-    },
+function shareBargain() {
+  shareFlage.value = true
+}
 
-    // 初始化商品以及砍价活动
-    async init() {
-      // 获取商品
-      let res = await getBargainDetail(this.routerVal.id);
-      if (res.data.success) {
-        this.bargainDetail = res.data.result.goodsSku;
-        this.bargains = res.data.result;
-        // 被邀请活动id
-        if (this.params.kanjiaActivityId) {
-        } else {
-          this.params.kanjiaActivityGoodsId = this.routerVal.id;
-        }
-        // 获取砍价活动
-        this.activity();
-      }
-    },
-    // 获取砍价活动
-    async activity() {
-      let res = await getBargainActivity(this.params);
-      // 判断当前是否是第一次进入，如果是第一次进入默认砍一刀
-      res.data.success
-        ? res.data.result.launch
-          ? (this.activityData = res.data.result)
-          : this.openActivity()
-        : "";
-    },
-    // 分页获取砍价活动-帮砍记录
-    async getBargainLogList() {
-      let res = await getBargainLog(this.logParams);
-      if (res.data.success) {
-        this.logData = res.data.result.records;
-      }
-    },
-    // 帮忙砍一刀
-    async handleClickHelpBargain() {
-      let res = await helpBargain(this.params.kanjiaActivityId);
-      if (res.data.success) {
-        this.helpBargainFlage = false;
-        this.kanjiaPrice = res.data.result.kanjiaPrice;
-        this.Bargaining = true;
-        // 帮砍完成之后查询帮砍记录
-        this.init();
-      } else {
-        this.helpBargainFlage = false;
-      }
-    },
-    // 发起砍价活动
-    async openActivity(data) {
-      let res = await openBargain({ id: this.routerVal.id });
-      if (res.data.success) {
-        this.kanjiaPrice = res.data.result.kanjiaPrice;
-        this.Bargaining = true;
-        // 查询帮砍记录
-        this.init();
-      }
-    },
-  },
-};
+function getGoodsDetail() {
+  uni.showLoading({
+    title: '加载中',
+    mask: true,
+  })
+  popupGoodsRef.value?.buy({
+    skuId: bargainDetail.value.id,
+    id: routerVal.value.id,
+    num: 1,
+    cartType: 'KANJIA',
+  })
+}
+
+async function init() {
+  const res = await getBargainDetail(routerVal.value.id)
+  if (res.data.success) {
+    bargainDetail.value = res.data.result.goodsSku
+    bargains.value = res.data.result
+    if (!params.value.kanjiaActivityId) {
+      params.value.kanjiaActivityGoodsId = routerVal.value.id
+    }
+    activity()
+  }
+}
+
+async function activity() {
+  const res = await getBargainActivity(params.value)
+  if (res.data.success) {
+    if (res.data.result.launch) {
+      activityData.value = res.data.result
+    } else {
+      openActivity()
+    }
+  }
+}
+
+async function getBargainLogList() {
+  const res = await getBargainLog(logParams.value)
+  if (res.data.success) {
+    logData.value = res.data.result.records
+  }
+}
+
+async function handleClickHelpBargain() {
+  const res = await helpBargain(params.value.kanjiaActivityId)
+  if (res.data.success) {
+    helpBargainFlage.value = false
+    kanjiaPrice.value = res.data.result.kanjiaPrice
+    Bargaining.value = true
+    init()
+  } else {
+    helpBargainFlage.value = false
+  }
+}
+
+async function openActivity() {
+  const res = await openBargain({ id: routerVal.value.id })
+  if (res.data.success) {
+    kanjiaPrice.value = res.data.result.kanjiaPrice
+    Bargaining.value = true
+    init()
+  }
+}
 </script>
 <style lang="scss">
 page {
diff --git a/pages/promotion/bargain/list.vue b/pages/promotion/bargain/list.vue
index 1badec9..3055ff7 100644
--- a/pages/promotion/bargain/list.vue
+++ b/pages/promotion/bargain/list.vue
@@ -15,58 +15,53 @@
   </div>
 </template>
 
-<script>
-import { getBargainList } from "@/api/promotions";
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onShow, onReachBottom } from '@dcloudio/uni-app'
+import { getBargainList } from '@/api/promotions'
 import goodsTemplate from '@/components/m-goods-list/promotion'
-export default {
-  components:{goodsTemplate},
-  data() {
-    return {
-      background: {
-        backgroundColor: "transparent",
-      },
-      params: {
-        promotionStatus: "START", //开始/上架
-        pageNumber: 1,
-        pageSize: 20,
-      },
-      bargainList: [], //砍价活动列表
-    };
-  },
-  onShow() {
-    this.params.pageNumber = 1;
-    this.bargainList = [];
-    this.init();
-  },
-  onReachBottom() {
-    this.params.pageNumber++;
-    this.init();
-  },
-  methods: {
-    // 返回上一级
-    back() {
-      uni.switchTab({
-        url: "/pages/tabbar/home/index",
-      });
-    },
-    /**
-     * 初始化砍价列表
-     */
-    async init() {
-      let res = await getBargainList(this.params); //砍价列表
-      if (res.data.success) {
-        this.bargainList.push(...res.data.result.records);
-      }
-    },
 
-    // 跳转到砍价详情
-    navigateToBargainDetail(val) {
-      uni.navigateTo({
-        url: `/pages/promotion/bargain/detail?id=${val.id}`,
-      });
-    },
-  },
-};
+const background = ref({
+  backgroundColor: 'transparent',
+})
+
+const params = ref({
+  promotionStatus: 'START',
+  pageNumber: 1,
+  pageSize: 20,
+})
+
+const bargainList = ref<any[]>([])
+
+onShow(() => {
+  params.value.pageNumber = 1
+  bargainList.value = []
+  init()
+})
+
+onReachBottom(() => {
+  params.value.pageNumber++
+  init()
+})
+
+function back() {
+  uni.switchTab({
+    url: '/pages/tabbar/home/index',
+  })
+}
+
+async function init() {
+  const res = await getBargainList(params.value)
+  if (res.data.success) {
+    bargainList.value.push(...res.data.result.records)
+  }
+}
+
+function navigateToBargainDetail(val: any) {
+  uni.navigateTo({
+    url: `/pages/promotion/bargain/detail?id=${val.id}`,
+  })
+}
 </script>
 <style lang="scss">
 page {
@@ -129,4 +124,4 @@ page {
 .empty {
   height: 400rpx;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/pages/promotion/bargain/log.vue b/pages/promotion/bargain/log.vue
index 0e19b60..e8892a3 100644
--- a/pages/promotion/bargain/log.vue
+++ b/pages/promotion/bargain/log.vue
@@ -1,80 +1,80 @@
 <template>
-  <div class="box">
-    <div v-if="bargainLog.length != 0">
-      <div v-for="(item,index) in bargainLog" class="flex" :key="index">
-        <div>
-          <u-image border-radius="20" width='230' height="230" :src="item.thumbnail"></u-image>
-        </div>
-        <div class="goods">
-          <div class="wes-2">
+  <view class="box">
+    <view v-if="bargainLog.length != 0">
+      <view v-for="(item,index) in bargainLog" class="flex" :key="index">
+        <view class="goods-img">
+          <u-image radius="20rpx" width="230rpx" height="230rpx" :src="item.thumbnail"></u-image>
+        </view>
+        <view class="goods">
+          <view class="wes-2">
             {{item.goodsName}}
-          </div>
-          <div>
-            还剩<span class="surplusPrice">{{unitPrice(item.surplusPrice)}}元</span>
-          </div>
+          </view>
+          <view class="surplus">
+            还剩<text class="surplusPrice">{{unitPrice(item.surplusPrice)}}元</text>
+          </view>
 
-          <div @click="navigateToBargainDetail(item)" v-if="item.status == 'START'" class="buy">
+          <view @click="navigateToBargainDetail(item)" v-if="item.status == 'START'" class="buy">
             继续免费领
-          </div>
-        </div>
-        <div class="tips-box">
-          <div class="tips" :class="[item.status]">
+          </view>
+        </view>
+        <view class="tips-box">
+          <view class="tips" :class="[item.status]">
             {{statusWay[item.status]}}
-          </div>
-        </div>
-      </div>
-    </div>
-    <div v-else>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view v-else>
       <u-empty style="margin-top:20%;" text="暂无砍价活动"></u-empty>
-    </div>
-  </div>
+    </view>
+  </view>
 </template>
 
-<script>
-import { getMineBargainLog } from "@/api/promotions";
-export default {
-  data() {
-    return {
-      params: {
-        pageNumber: 1,
-        pageSize: 10,
-      },
-      bargainLog: [],
-      statusWay: {
-        START: "砍价开始",
-        FAIL: "砍价失败",
-        SUCCESS: "砍价成功",
-        END: "活动结束",
-      },
-    };
-  },
-  onReachBottom() {
-    this.params.pageNumber++;
-    this.init();
-  },
-  onShow() {
-    this.params.pageNumber = 1;
-    this.bargainLog = [];
-    this.init();
-  },
-  methods: {
-    // 初始化砍价记录
-    async init() {
-      let res = await getMineBargainLog(this.params);
-      if (res.data.success) {
-        this.bargainLog.push(...res.data.result.records);
-      }
-    },
-    // 跳转到砍价详情
-    navigateToBargainDetail(val) {
-      uni.navigateTo({
-        url: `/pages/promotion/bargain/detail?id=${val.kanjiaActivityGoodsId}`,
-      });
-    },
-  },
-};
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onShow, onReachBottom } from '@dcloudio/uni-app'
+import { getMineBargainLog } from '@/api/promotions'
+import { unitPrice } from '@/utils/filters.js'
+
+const params = ref({
+  pageNumber: 1,
+  pageSize: 10,
+})
+
+const bargainLog = ref<any[]>([])
+
+const statusWay: Record<string, string> = {
+  START: '砍价开始',
+  FAIL: '砍价失败',
+  SUCCESS: '砍价成功',
+  END: '活动结束',
+}
+
+onReachBottom(() => {
+  params.value.pageNumber++
+  init()
+})
+
+onShow(() => {
+  params.value.pageNumber = 1
+  bargainLog.value = []
+  init()
+})
+
+async function init() {
+  const res = await getMineBargainLog(params.value)
+  if (res.data.success) {
+    bargainLog.value.push(...res.data.result.records)
+  }
+}
+
+function navigateToBargainDetail(val: any) {
+  uni.navigateTo({
+    url: `/pages/promotion/bargain/detail?id=${val.kanjiaActivityGoodsId}`,
+  })
+}
 </script>
-<style scoped>
+<style>
 page {
   background: #fff;
 }
@@ -84,14 +84,20 @@ page {
   padding: 0 32rpx;
   background: #fff;
 }
+.goods-img {
+  width: 230rpx;
+  height: 230rpx;
+  flex: 0 0 230rpx;
+}
 .buy {
   background: $light-color;
   color: #fff;
-  display: inline;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   padding: 10rpx 0;
   border-radius: 100rpx;
   width: 200rpx;
-  text-align: center;
   font-size: 24rpx;
   margin-top: 20rpx;
 }
@@ -113,6 +119,11 @@ page {
   font-weight: bold;
   color: $light-color;
 }
+.surplus {
+  color: #333;
+  font-size: 26rpx;
+  margin-top: 12rpx;
+}
 .goods {
   margin: 0 20rpx;
   display: flex;
@@ -122,7 +133,8 @@ page {
 }
 .flex {
   border-bottom: 1rpx solid #f7f7f7;
-
+  display: flex;
+  align-items: center;
   padding: 20rpx 0;
   margin: 10rpx 0;
 }
@@ -138,4 +150,4 @@ page {
 .FAIL {
   color: $main-color;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/pages/promotion/joinGroup.vue b/pages/promotion/joinGroup.vue
index 0f628ed..8859e03 100644
--- a/pages/promotion/joinGroup.vue
+++ b/pages/promotion/joinGroup.vue
@@ -39,112 +39,100 @@
 	</view>
 </template>
 
-<script>
-	import * as API_Promotions from "@/api/promotions";
-	import * as API_Goods from "@/api/goods";
-	import goodsTemplate from '@/components/m-goods-list/promotion.vue'
-	export default {
-		components: {
-			goodsTemplate
-		},
-		data() {
-			return {
-				is_empty: false,
-				search: false,
-				title: "拼团活动",
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { onLoad, onReachBottom, onNavigationBarButtonTap } from '@dcloudio/uni-app'
+import * as API_Promotions from '@/api/promotions'
+import goodsTemplate from '@/components/m-goods-list/promotion.vue'
 
-				empty: false,
-				params: {
-					pageNumber: 1,
-					pageSize: 10,
-					categoryPath: "",
-					goodsName: "",
-				},
-				goodsList: [],
-			};
-		},
-		mounted() {},
-		watch: {
-			search(val) {
-				if (!val && !this.title) {
-					this.title = "拼团活动";
-				}
-			},
-		},
-		onReachBottom() {
-			this.loadMore();
-		},
-		// 点击搜索按钮
-		onNavigationBarButtonTap(e) {
-			this.popupFlag = !this.popupFlag;
-		},
-		async onLoad() {
-			this.GET_AssembleGoods();
-		},
+const is_empty = ref(false)
+const search = ref(false)
+const title = ref('拼团活动')
+const popupFlag = ref(false)
 
-		methods: {
-			back() {
-				if (this.search) {
-					this.search = false;
-					this.params.goodsName = "";
-					this.goodsList = [];
-					this.params.pageNumber = 1;
-					this.GET_AssembleGoods();
-					return;
-				}
-				const pages = getCurrentPages();
-				if (pages.length > 1) {
-					uni.navigateBack();
-				} else {
-					uni.switchTab({
-						url: "/pages/tabbar/home/index",
-					});
-				}
-			},
-			loadMore() {
-				this.params.pageNumber++;
-				this.GET_AssembleGoods();
-			},
-			searchFlag() {
-				this.search = !this.search;
-			},
+const params = ref({
+  pageNumber: 1,
+  pageSize: 10,
+  categoryPath: '',
+  goodsName: '',
+})
 
-			toHref(goods) {
-				uni.navigateTo({
-					url: `/pages/product/goods?id=${goods.skuId}&goodsId=${goods.goodsId}`,
-				});
-			},
-			searchFun() {
-				this.goodsList = [];
-				this.GET_AssembleGoods();
-			},
-			// 请求拼团数据
-			GET_AssembleGoods() {
+const goodsList = ref<any[]>([])
 
-				const params = JSON.parse(JSON.stringify(this.params));
-				if (params.category_id === 0) delete params.category_id;
+watch(search, (val) => {
+  if (!val && !title.value) {
+    title.value = '拼团活动'
+  }
+})
 
-				API_Promotions.getAssembleList(params)
-					.then((response) => {
-						const data = response.data.result.records;
+onReachBottom(() => {
+  loadMore()
+})
 
-						if (!data || !data.length) {
-							this.is_empty = true;
+onNavigationBarButtonTap(() => {
+  popupFlag.value = !popupFlag.value
+})
 
-						} else {
-							if (data.length <= this.params.pageSize) {
+onLoad(async () => {
+  GET_AssembleGoods()
+})
 
-							} else {
+function back() {
+  if (search.value) {
+    search.value = false
+    params.value.goodsName = ''
+    goodsList.value = []
+    params.value.pageNumber = 1
+    GET_AssembleGoods()
+    return
+  }
+  const pages = getCurrentPages()
+  if (pages.length > 1) {
+    uni.navigateBack()
+  } else {
+    uni.switchTab({
+      url: '/pages/tabbar/home/index',
+    })
+  }
+}
 
-							}
-							this.is_empty = false;
-							this.goodsList.push(...(data || []));
-						}
-					})
-					.catch(() => {});
-			},
-		},
-	};
+function loadMore() {
+  params.value.pageNumber++
+  GET_AssembleGoods()
+}
+
+function searchFlag() {
+  search.value = !search.value
+}
+
+function toHref(goods: any) {
+  uni.navigateTo({
+    url: `/pages/product/goods?id=${goods.skuId}&goodsId=${goods.goodsId}`,
+  })
+}
+
+function searchFun() {
+  goodsList.value = []
+  GET_AssembleGoods()
+}
+
+function GET_AssembleGoods() {
+  const requestParams = JSON.parse(JSON.stringify(params.value))
+  if (requestParams.category_id === 0) delete requestParams.category_id
+
+  API_Promotions.getAssembleList(requestParams)
+    .then((response) => {
+      const data = response.data.result.records
+
+      if (!data || !data.length) {
+        is_empty.value = true
+      } else {
+        is_empty.value = false
+        goodsList.value.push(...(data || []))
+      }
+    })
+    .catch(() => {})
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/promotion/live/mqtt/mqtt.js b/pages/promotion/live/mqtt/mqtt.js
index 39a624f..0de20e4 100644
--- a/pages/promotion/live/mqtt/mqtt.js
+++ b/pages/promotion/live/mqtt/mqtt.js
@@ -1,3 +1,4 @@
+// #ifndef MP-WEIXIN
 import api from "@/config/api.js";
 import mqtt from "mqtt";
 
@@ -291,3 +292,28 @@ export function createMqttClient(options = {}) {
 }
 
 export { MqttClient };
+// #endif
+
+// #ifdef MP-WEIXIN
+class MqttClient {
+  connect() {
+    return Promise.resolve(this);
+  }
+  disconnect() {}
+  isConnected() {
+    return false;
+  }
+  subscribe() {
+    return this;
+  }
+  on() {
+    return this;
+  }
+}
+
+export function createMqttClient() {
+  return new MqttClient();
+}
+
+export { MqttClient };
+// #endif
diff --git a/pages/promotion/live/room.vue b/pages/promotion/live/room.vue
index eafba60..9d91fc7 100644
--- a/pages/promotion/live/room.vue
+++ b/pages/promotion/live/room.vue
@@ -472,829 +472,893 @@
   </view>
 </template>
 
-<script>
-import config from "@/config/config";
-import { getLiveRoomById, getLivePollingData, registerLiveViewUser, receiveLiveCoupon, sendLiveMessage } from "@/api/live.js";
-import { LiveMqttService } from "./utils/liveMqtt.js";
-import { LiveChatService } from "./utils/liveChat.js";
-import { seedLiveSetting } from "./utils/liveSetting.js";
-import { parseRecommendMessageArray, findRecommendPayload } from "./utils/liveRecommend.js";
+<script setup lang="ts">
+import { onHide, onLoad, onShow, onUnload } from '@dcloudio/uni-app'
+import { computed, getCurrentInstance, nextTick, ref, watch } from 'vue'
+// #ifdef MP-WEIXIN
+import { onShareTimeline } from '@dcloudio/uni-app'
+// #endif
+import {
+  getLivePollingData,
+  getLiveRoomById,
+  receiveLiveCoupon,
+  registerLiveViewUser,
+  sendLiveMessage,
+} from '@/api/live.js'
+import config from '@/config/config'
+import { useStore } from '@/store'
+import { isLogin, navigateToLogin, unitPrice } from '@/utils/filters.js'
+import { LiveChatService } from './utils/liveChat.js'
+import { LiveMqttService } from './utils/liveMqtt.js'
+import { findRecommendPayload, parseRecommendMessageArray } from './utils/liveRecommend.js'
+import { seedLiveSetting } from './utils/liveSetting.js'
 // #ifdef H5
-import Hls from "hls.js";
+import Hls from 'hls.js'
 // #endif
 
-const POLL_INTERVAL = 5000;
+const POLL_INTERVAL = 5000
 
 const LIVE_STATUS = {
-  NEW: "NEW",
-  LIVING: "LIVING",
-  PAUSED: "PAUSED",
-  ENDED: "ENDED",
-};
+  NEW: 'NEW',
+  LIVING: 'LIVING',
+  PAUSED: 'PAUSED',
+  ENDED: 'ENDED',
+} as const
 
-const STATUS_LABEL = {
-  [LIVE_STATUS.NEW]: "新直播",
-  [LIVE_STATUS.LIVING]: "直播中",
-  [LIVE_STATUS.PAUSED]: "已暂停",
-  [LIVE_STATUS.ENDED]: "已结束",
-};
+const STATUS_LABEL: Record<string, string> = {
+  [LIVE_STATUS.NEW]: '新直播',
+  [LIVE_STATUS.LIVING]: '直播中',
+  [LIVE_STATUS.PAUSED]: '已暂停',
+  [LIVE_STATUS.ENDED]: '已结束',
+}
 
-export default {
-  data() {
-    return {
-      liveId: "",
-      loading: true,
-      roomInfo: {},
-      liveUser: null,
-      messageList: [],
-      inputMessage: "",
-      sending: false,
-      scrollToView: "",
-      pollTimer: null,
-      goodsList: [],
-      liveCoupon: [],
-      liveCouponReceives: [],
-      currentTab: 0,
-      showGoodsModal: false,
-      showCouponModal: false,
-      isUIVisible: true,
-      showBottomPopup: false,
-      popupType: "",
-      popupTitle: "",
-      defaultAvatar: config.defaultUserPhoto,
-      claimingCouponId: "",
-      showRecommendCouponModal: false,
-      recommendCouponItem: null,
-      shownRecommendCouponIds: [],
-      liveMqttService: null,
-      liveChatService: null,
-      hlsHttpFallbackUsed: false,
-      lastHlsPullUrl: "",
-    };
-  },
-  computed: {
-    isLiving() {
-      return this.roomInfo.liveStatus === LIVE_STATUS.LIVING;
-    },
-    showCover() {
-      return !this.isLiving || !this.roomInfo.pullStreamUrl;
-    },
-    statusText() {
-      return STATUS_LABEL[this.roomInfo.liveStatus] || "直播间";
-    },
-    statusClass() {
-      const status = this.roomInfo.liveStatus;
-      return {
-        living: status === LIVE_STATUS.LIVING,
-        pending: status === LIVE_STATUS.NEW,
-        paused: status === LIVE_STATUS.PAUSED,
-        ended: status === LIVE_STATUS.ENDED,
-      };
-    },
-    playerLayoutClass() {
-      const mode = String(this.roomInfo.displayMode);
-      if (mode === "2") return "layout-triple";
-      return "layout-horizontal";
-    },
-    objectFit() {
-      return String(this.roomInfo.displayMode) === "1" ? "fillCrop" : "contain";
-    },
-    isVerticalMode() {
-      return String(this.roomInfo.displayMode) === "1";
-    },
-    showChatBar() {
-      return this.roomInfo.liveStatus !== LIVE_STATUS.ENDED;
-    },
-    canSend() {
-      if (!this.showChatBar || this.sending) return false;
-      if (!this.isLogin("auth")) return false;
-      if (this.liveUser?.muteFlag) return false;
-      return true;
-    },
-    chatPlaceholder() {
-      if (this.roomInfo.liveStatus === LIVE_STATUS.ENDED) return "直播已结束";
-      if (!this.isLogin("auth")) return "登录后发言";
-      if (this.liveUser?.muteFlag) return "您已被禁言";
-      return "说点什么...";
-    },
-    visibleGoodsList() {
-      return (this.goodsList || []).filter((item) => !item.hideFlag);
-    },
-    visibleCouponList() {
-      return (this.liveCoupon || []).filter((item) => !item.hideFlag);
-    },
-    recommendGoods() {
-      return this.visibleGoodsList.find((item) => item.recommend === true) || null;
-    },
-    hasClaimableCoupon() {
-      return this.visibleCouponList.some((item) => !this.isCouponReceived(item.couponId));
-    },
-  },
-  created() {
-    // hls.js 播放器实例与视频节点不经过 Vue 响应式代理，避免干扰其内部状态管理
-    this.hlsInstance = null;
-    this.hlsVideoElement = null;
-    this._hlsVideoClickHandler = null;
-  },
-  watch: {
-    "roomInfo.pullStreamUrl"() {
-      this.syncH5Player();
-    },
-    isLiving() {
-      this.syncH5Player();
-    },
-    isVerticalMode() {
-      // 横竖屏模板切换会销毁重建播放器容器 DOM，需重新挂载播放器
-      this.lastHlsPullUrl = "";
-      this.$nextTick(() => this.syncH5Player());
-    },
-  },
-  onLoad(options) {
-    this.liveId = this.parseLiveId(options);
+const store = useStore()
+const { proxy } = getCurrentInstance()!
 
-    if (!this.liveId) {
-      uni.showToast({ title: "无效的直播链接", icon: "none" });
-      setTimeout(() => this.goBackOrHome(), 1500);
-      return;
-    }
-    this.initLiveRoom();
-  },
-  onShow() {
-    if (this.liveId && this.isLogin("auth")) {
-      if (!this.liveUser) {
-        this.registerLiveUser();
-      } else {
-        this.initLiveChat();
-      }
-      this.fetchPollingData(false);
-    }
-    if (this.liveId && !this.pollTimer) {
-      this.startPolling();
-    }
-    if (this.liveId && this.liveMqttService && !this.liveMqttService.isConnected()) {
-      this.initLiveMqtt();
-    }
-    this.syncH5Player();
-  },
-  onHide() {
-    this.stopPolling();
-  },
-  onUnload() {
-    this.stopPolling();
-    this.cleanupLiveMqtt();
-    this.cleanupLiveChat();
-    this.destroyH5HlsPlayer();
-  },
+const hlsContainer = ref<HTMLElement | null>(null)
+
+const liveId = ref('')
+const loading = ref(true)
+const roomInfo = ref<Record<string, any>>({})
+const liveUser = ref<Record<string, any> | null>(null)
+const messageList = ref<any[]>([])
+const inputMessage = ref('')
+const sending = ref(false)
+const scrollToView = ref('')
+const pollTimer = ref<ReturnType<typeof setInterval> | null>(null)
+const goodsList = ref<any[]>([])
+const liveCoupon = ref<any[]>([])
+const liveCouponReceives = ref<any[]>([])
+const currentTab = ref(0)
+const showGoodsModal = ref(false)
+const showCouponModal = ref(false)
+const isUIVisible = ref(true)
+const showBottomPopup = ref(false)
+const popupType = ref('')
+const popupTitle = ref('')
+const defaultAvatar = config.defaultUserPhoto
+const claimingCouponId = ref('')
+const showRecommendCouponModal = ref(false)
+const recommendCouponItem = ref<any>(null)
+const shownRecommendCouponIds = ref<any[]>([])
+const hlsHttpFallbackUsed = ref(false)
+const lastHlsPullUrl = ref('')
+
+// hls.js 播放器实例与视频节点不经过 Vue 响应式代理，避免干扰其内部状态管理
+// #ifdef H5
+let hlsInstance: InstanceType<typeof Hls> | null = null
+// #endif
+// #ifndef H5
+let hlsInstance: any = null
+// #endif
+let hlsVideoElement: HTMLVideoElement | null = null
+let hlsVideoClickHandler: (() => void) | null = null
+let liveMqttService: InstanceType<typeof LiveMqttService> | null = null
+let liveChatService: InstanceType<typeof LiveChatService> | null = null
+
+const isLiving = computed(() => roomInfo.value.liveStatus === LIVE_STATUS.LIVING)
+
+const showCover = computed(() => !isLiving.value || !roomInfo.value.pullStreamUrl)
+
+const statusText = computed(() => STATUS_LABEL[roomInfo.value.liveStatus] || '直播间')
+
+const statusClass = computed(() => {
+  const status = roomInfo.value.liveStatus
+  return {
+    living: status === LIVE_STATUS.LIVING,
+    pending: status === LIVE_STATUS.NEW,
+    paused: status === LIVE_STATUS.PAUSED,
+    ended: status === LIVE_STATUS.ENDED,
+  }
+})
+
+const playerLayoutClass = computed(() => {
+  const mode = String(roomInfo.value.displayMode)
+  if (mode === '2') return 'layout-triple'
+  return 'layout-horizontal'
+})
+
+const objectFit = computed(() => (String(roomInfo.value.displayMode) === '1' ? 'fillCrop' : 'contain'))
+
+const isVerticalMode = computed(() => String(roomInfo.value.displayMode) === '1')
+
+const showChatBar = computed(() => roomInfo.value.liveStatus !== LIVE_STATUS.ENDED)
+
+const canSend = computed(() => {
+  if (!showChatBar.value || sending.value) return false
+  if (!isLogin('auth')) return false
+  if (liveUser.value?.muteFlag) return false
+  return true
+})
+
+const chatPlaceholder = computed(() => {
+  if (roomInfo.value.liveStatus === LIVE_STATUS.ENDED) return '直播已结束'
+  if (!isLogin('auth')) return '登录后发言'
+  if (liveUser.value?.muteFlag) return '您已被禁言'
+  return '说点什么...'
+})
+
+const visibleGoodsList = computed(() => (goodsList.value || []).filter((item) => !item.hideFlag))
+
+const visibleCouponList = computed(() => (liveCoupon.value || []).filter((item) => !item.hideFlag))
+
+const recommendGoods = computed(
+  () => visibleGoodsList.value.find((item) => item.recommend === true) || null
+)
+
+const hasClaimableCoupon = computed(() =>
+  visibleCouponList.value.some((item) => !isCouponReceived(item.couponId))
+)
+
+function parseLiveId(options: Record<string, any>) {
+  let id = options.id || options.roomId || ''
   // #ifdef MP-WEIXIN
-  onShareTimeline() {
-    return {
-      title: this.roomInfo.title || "直播间",
-      query: `id=${this.liveId}`,
-      imageUrl: this.roomInfo.coverImg || "",
-    };
-  },
+  if (!id && options.scene) {
+    const scene = decodeURIComponent(options.scene)
+    const matched = scene.match(/(?:^|&)id=([^&]+)/)
+    id = matched ? matched[1] : scene
+  }
   // #endif
-  methods: {
-    parseLiveId(options) {
-      let id = options.id || options.roomId || "";
-      // #ifdef MP-WEIXIN
-      if (!id && options.scene) {
-        const scene = decodeURIComponent(options.scene);
-        const matched = scene.match(/(?:^|&)id=([^&]+)/);
-        id = matched ? matched[1] : scene;
-      }
-      // #endif
-      return id;
-    },
-    goBackOrHome() {
-      if (getCurrentPages().length > 1) {
-        uni.navigateBack();
-      } else {
-        uni.switchTab({ url: "/pages/tabbar/home/index" });
-      }
-    },
-    /** 跳转登录页，登录成功后 navigateBack 返回直播间 */
-    goLogin() {
-      this.navigateToLogin("navigateTo");
-    },
-    /** 校验登录，未登录则跳转登录页 */
-    requireLogin() {
-      if (this.isLogin("auth")) return true;
-      this.goLogin();
-      return false;
-    },
-    onChatInputTap() {
-      if (!this.isLogin("auth")) {
-        this.goLogin();
-      }
-    },
-    onChatFocus() {
-      if (!this.isLogin("auth")) {
-        uni.hideKeyboard();
-        this.goLogin();
-      }
-    },
-    switchTab(index) {
-      this.currentTab = index;
-    },
-    toggleUI() {
-      if (this.showBottomPopup) return;
-      this.isUIVisible = !this.isUIVisible;
-    },
-    showIntroPopup() {
-      this.popupType = "intro";
-      this.popupTitle = "直播介绍";
-      this.showBottomPopup = true;
-      this.isUIVisible = true;
-    },
-    closeBottomPopup() {
-      this.showBottomPopup = false;
-      this.popupType = "";
-      this.popupTitle = "";
-    },
-    openGoodsModal() {
-      if (this.isVerticalMode) {
-        this.popupType = "goods";
-        this.popupTitle = "商品列表";
-        this.showBottomPopup = true;
-      } else {
-        this.showGoodsModal = true;
-      }
-    },
-    closeGoodsModal() {
-      this.showGoodsModal = false;
-    },
-    isGoodsSoldOut(item) {
-      return item?.sellOutFlag === true || item?.soldOutFlag === true;
-    },
-    openCouponModal() {
-      this.showCouponModal = true;
-    },
-    closeCouponModal() {
-      this.showCouponModal = false;
-    },
-    closeRecommendCouponModal() {
-      this.showRecommendCouponModal = false;
-    },
-    showRecommendCouponFromPayload(coupon) {
-      if (!coupon || this.isCouponReceived(coupon.couponId)) return;
-      const key = coupon.id || coupon.couponId;
-      if (this.shownRecommendCouponIds.includes(key)) return;
-      this.shownRecommendCouponIds.push(key);
-      this.recommendCouponItem = coupon;
-      this.showRecommendCouponModal = true;
-    },
-    updateRecommendCouponPopup() {
-      const found = this.visibleCouponList.find(
-        (item) =>
-          item.recommend === true &&
-          !this.isCouponReceived(item.couponId) &&
-          !this.shownRecommendCouponIds.includes(item.id || item.couponId)
-      );
-      if (!found) return;
-      this.showRecommendCouponFromPayload(found);
-    },
-    onClaimRecommendCoupon() {
-      if (!this.recommendCouponItem) return;
-      this.onClaimCoupon(this.recommendCouponItem);
-    },
-    onClaimCoupon(item) {
-      if (!this.requireLogin()) return;
-      if (this.isCouponReceived(item.couponId)) return;
-      if (this.claimingCouponId) return;
+  return id
+}
 
-      this.claimingCouponId = item.couponId;
-      receiveLiveCoupon(this.liveId, item.couponId)
-        .then(async (res) => {
-          if (res.data.success) {
-            uni.showToast({ title: "领取成功", icon: "none" });
-            await this.fetchPollingData(false);
-            this.closeRecommendCouponModal();
+function goBackOrHome() {
+  if (getCurrentPages().length > 1) {
+    uni.navigateBack()
+  } else {
+    uni.switchTab({ url: '/pages/tabbar/home/index' })
+  }
+}
+
+/** 跳转登录页，登录成功后 navigateBack 返回直播间 */
+function goLogin() {
+  navigateToLogin('navigateTo')
+}
+
+/** 校验登录，未登录则跳转登录页 */
+function requireLogin() {
+  if (isLogin('auth')) return true
+  goLogin()
+  return false
+}
+
+function onChatInputTap() {
+  if (!isLogin('auth')) {
+    goLogin()
+  }
+}
+
+function onChatFocus() {
+  if (!isLogin('auth')) {
+    uni.hideKeyboard()
+    goLogin()
+  }
+}
+
+function switchTab(index: number) {
+  currentTab.value = index
+}
+
+function toggleUI() {
+  if (showBottomPopup.value) return
+  isUIVisible.value = !isUIVisible.value
+}
+
+function showIntroPopup() {
+  popupType.value = 'intro'
+  popupTitle.value = '直播介绍'
+  showBottomPopup.value = true
+  isUIVisible.value = true
+}
+
+function closeBottomPopup() {
+  showBottomPopup.value = false
+  popupType.value = ''
+  popupTitle.value = ''
+}
+
+function openGoodsModal() {
+  if (isVerticalMode.value) {
+    popupType.value = 'goods'
+    popupTitle.value = '商品列表'
+    showBottomPopup.value = true
+  } else {
+    showGoodsModal.value = true
+  }
+}
+
+function closeGoodsModal() {
+  showGoodsModal.value = false
+}
+
+function isGoodsSoldOut(item: any) {
+  return item?.sellOutFlag === true || item?.soldOutFlag === true
+}
+
+function openCouponModal() {
+  showCouponModal.value = true
+}
+
+function closeCouponModal() {
+  showCouponModal.value = false
+}
+
+function closeRecommendCouponModal() {
+  showRecommendCouponModal.value = false
+}
+
+function isCouponReceived(couponId: string) {
+  return (liveCouponReceives.value || []).some((item) => item.couponId === couponId)
+}
+
+function showRecommendCouponFromPayload(coupon: any) {
+  if (!coupon || isCouponReceived(coupon.couponId)) return
+  const key = coupon.id || coupon.couponId
+  if (shownRecommendCouponIds.value.includes(key)) return
+  shownRecommendCouponIds.value.push(key)
+  recommendCouponItem.value = coupon
+  showRecommendCouponModal.value = true
+}
+
+function updateRecommendCouponPopup() {
+  const found = visibleCouponList.value.find(
+    (item) =>
+      item.recommend === true &&
+      !isCouponReceived(item.couponId) &&
+      !shownRecommendCouponIds.value.includes(item.id || item.couponId)
+  )
+  if (!found) return
+  showRecommendCouponFromPayload(found)
+}
+
+function onClaimRecommendCoupon() {
+  if (!recommendCouponItem.value) return
+  onClaimCoupon(recommendCouponItem.value)
+}
+
+function onClaimCoupon(item: any) {
+  if (!requireLogin()) return
+  if (isCouponReceived(item.couponId)) return
+  if (claimingCouponId.value) return
+
+  claimingCouponId.value = item.couponId
+  receiveLiveCoupon(liveId.value, item.couponId)
+    .then(async (res) => {
+      if (res.data.success) {
+        uni.showToast({ title: '领取成功', icon: 'none' })
+        await fetchPollingData(false)
+        closeRecommendCouponModal()
+      } else {
+        uni.showToast({ title: res.data.message || '领取失败', icon: 'none' })
+      }
+    })
+    .catch(() => {
+      uni.showToast({ title: '领取失败', icon: 'none' })
+    })
+    .finally(() => {
+      claimingCouponId.value = ''
+    })
+}
+
+function setupShare() {
+  const shareConfig = {
+    title: roomInfo.value.title || '直播间',
+    path: `/pages/promotion/live/room?id=${liveId.value}`,
+    imageUrl: roomInfo.value.coverImg || '',
+  }
+  // #ifdef MP-WEIXIN
+  if (proxy?.$u) {
+    proxy.$u.mpShare = shareConfig
+  }
+  uni.showShareMenu({
+    withShareTicket: true,
+    menus: ['shareAppMessage', 'shareTimeline'],
+  })
+  // #endif
+}
+
+async function initLiveRoom() {
+  const ok = await fetchRoomDetail(true)
+  if (!ok) return
+  await fetchPollingData(false)
+  setupShare()
+  if (roomInfo.value.title) {
+    uni.setNavigationBarTitle({ title: roomInfo.value.title })
+  }
+  if (isLogin('auth')) {
+    await registerLiveUser()
+  }
+  startPolling()
+  initLiveMqtt()
+  syncH5Player()
+}
+
+async function initLiveChat() {
+  if (!isLogin('auth')) return
+
+  const groupId = roomInfo.value.imGroupId || roomInfo.value.groupId
+  if (!groupId) {
+    console.warn('imGroupId 不存在，跳过 IM 初始化')
+    return
+  }
+
+  if (!liveUser.value?.userSig) {
+    await registerLiveUser()
+  }
+  if (!liveUser.value?.userSig) {
+    console.warn('userSig 不存在，跳过 IM 初始化')
+    return
+  }
+
+  if (!liveChatService) {
+    const userInfo = isLogin() || {}
+    liveChatService = new LiveChatService({
+      liveId: liveId.value,
+      userInfo,
+      defaultAvatar,
+      onMessagesChange: (messages) => {
+        messageList.value = messages
+      },
+      onScrollToBottom: () => {
+        nextTick(() => {
+          if (messageList.value.length) {
+            scrollToView.value = 'msg-' + (messageList.value.length - 1)
+          }
+        })
+      },
+    })
+  }
+
+  liveChatService.userInfo = isLogin() || {}
+  liveChatService.setGroupID(groupId)
+  await liveChatService.initTencentIm(liveUser.value)
+}
+
+function cleanupLiveChat() {
+  if (liveChatService) {
+    liveChatService.cleanup()
+    liveChatService = null
+  }
+}
+
+function getMqttUserId() {
+  const userInfo = isLogin() || {}
+  return userInfo.id || userInfo.userId || liveUser.value?.userId || `guest-${liveId.value}`
+}
+
+function initLiveMqttHandlers() {
+  if (!liveMqttService) return
+  liveMqttService.setMessageHandlers({
+    onLiveMessage: (message) => handleMqttLiveMessage(message),
+    onGoodsMessage: (message) => handleMqttGoodsMessage(message),
+    onCouponMessage: (message) => handleMqttCouponMessage(message),
+    onBlacklistMessage: () => handleMqttBlacklistMessage(),
+    onPushStream: () => handleMqttPushStreamMessage(),
+  })
+}
+
+function initLiveMqtt() {
+  if (!liveId.value) return
+  if (!liveMqttService) {
+    liveMqttService = new LiveMqttService(liveId.value, getMqttUserId())
+  } else {
+    liveMqttService.userId = getMqttUserId()
+  }
+  initLiveMqttHandlers()
+  if (!liveMqttService.isConnected() && !liveMqttService.mqttClient) {
+    liveMqttService.initMqtt()
+  }
+}
+
+function cleanupLiveMqtt() {
+  if (liveMqttService) {
+    liveMqttService.cleanup()
+    liveMqttService = null
+  }
+}
+
+function normalizeMqttLiveStatus(status: string | number) {
+  if (typeof status === 'string') {
+    const upper = status.toUpperCase()
+    const map: Record<string, string> = {
+      NEW: LIVE_STATUS.NEW,
+      NOT_STARTED: LIVE_STATUS.NEW,
+      START: LIVE_STATUS.LIVING,
+      LIVING: LIVE_STATUS.LIVING,
+      END: LIVE_STATUS.ENDED,
+      ENDED: LIVE_STATUS.ENDED,
+      PAUSE: LIVE_STATUS.PAUSED,
+      PAUSED: LIVE_STATUS.PAUSED,
+    }
+    return map[upper] || status
+  }
+  const numMap: Record<number, string> = {
+    0: LIVE_STATUS.NEW,
+    1: LIVE_STATUS.LIVING,
+    2: LIVE_STATUS.ENDED,
+    3: LIVE_STATUS.PAUSED,
+  }
+  return numMap[status as number] ?? roomInfo.value.liveStatus
+}
+
+function handleMqttLiveMessage(message: string) {
+  try {
+    const data = JSON.parse(message)
+    const updates: Record<string, any> = {}
+    if (data.liveStatus !== undefined) {
+      updates.liveStatus = normalizeMqttLiveStatus(data.liveStatus)
+    }
+    if (data.pullStreamUrl) {
+      updates.pullStreamUrl = data.pullStreamUrl
+    }
+    if (Object.keys(updates).length) {
+      roomInfo.value = { ...roomInfo.value, ...updates }
+    }
+    if (updates.liveStatus === LIVE_STATUS.ENDED) {
+      stopPolling()
+    }
+    syncH5Player()
+  } catch (error) {
+    console.error('处理直播 MQTT 消息失败:', error)
+  }
+}
+
+function handleMqttGoodsMessage(message: string) {
+  console.log('收到商品 MQTT 消息:', message)
+  const goodsMessageList = parseRecommendMessageArray(message)
+  if (goodsMessageList.length) {
+    goodsList.value = goodsMessageList
+  }
+  fetchPollingData(false)
+}
+
+function handleMqttCouponMessage(message: string) {
+  console.log('收到优惠券 MQTT 消息:', message)
+  const couponMessageList = parseRecommendMessageArray(message)
+  const recommendCoupon = findRecommendPayload(couponMessageList)
+  if (recommendCoupon) {
+    showRecommendCouponFromPayload(recommendCoupon)
+  } else {
+    closeRecommendCouponModal()
+  }
+  fetchPollingData(false)
+}
+
+function handleMqttBlacklistMessage() {
+  uni.showModal({
+    title: '提示',
+    content: '您已被限制进入直播间',
+    showCancel: false,
+    success: () => goBackOrHome(),
+  })
+}
+
+function handleMqttPushStreamMessage() {
+  if (roomInfo.value.liveStatus !== LIVE_STATUS.LIVING) {
+    roomInfo.value = { ...roomInfo.value, liveStatus: LIVE_STATUS.LIVING }
+  }
+  syncH5Player()
+}
+
+function startPolling() {
+  stopPolling()
+  pollTimer.value = setInterval(() => {
+    fetchPollingData(false)
+  }, POLL_INTERVAL)
+}
+
+function stopPolling() {
+  if (pollTimer.value) {
+    clearInterval(pollTimer.value)
+    pollTimer.value = null
+  }
+}
+
+function applyPollingData(data: any) {
+  if (!data) return
+  if (data.liveDetail) {
+    roomInfo.value = data.liveDetail
+  }
+  if (data.goodsList) {
+    goodsList.value = data.goodsList
+  }
+  if (data.liveCoupon) {
+    liveCoupon.value = data.liveCoupon
+    updateRecommendCouponPopup()
+  }
+  if (data.liveCouponReceives) {
+    liveCouponReceives.value = data.liveCouponReceives
+    if (
+      recommendCouponItem.value &&
+      isCouponReceived(recommendCouponItem.value.couponId)
+    ) {
+      closeRecommendCouponModal()
+    }
+  }
+  if (roomInfo.value.liveStatus === LIVE_STATUS.ENDED) {
+    stopPolling()
+  }
+  syncH5Player()
+}
+
+async function fetchRoomDetail(isInit = false) {
+  if (isInit) loading.value = true
+  try {
+    const res = await getLiveRoomById(liveId.value)
+    if (res.data?.success && res.data?.result) {
+      roomInfo.value = res.data.result
+      seedLiveSetting(liveId.value, res.data.result)
+      syncH5Player()
+      return true
+    }
+    if (isInit) {
+      uni.showToast({ title: res.data?.message || '直播间不存在', icon: 'none' })
+      setTimeout(() => goBackOrHome(), 1500)
+    }
+    return false
+  } catch (e) {
+    if (isInit) {
+      uni.showToast({ title: '加载失败', icon: 'none' })
+    }
+    return false
+  } finally {
+    if (isInit) loading.value = false
+  }
+}
+
+async function fetchPollingData(isInit = false) {
+  if (isInit) loading.value = true
+  try {
+    const res = await getLivePollingData(liveId.value)
+    if (res.data.success && res.data.result) {
+      applyPollingData(res.data.result)
+      return true
+    }
+    return false
+  } catch (e) {
+    return false
+  } finally {
+    if (isInit) loading.value = false
+  }
+}
+
+function goGoods(item: any) {
+  if (isGoodsSoldOut(item)) return
+  if (!item.canBuyFlag) {
+    uni.showToast({ title: '暂不可购买', icon: 'none' })
+    return
+  }
+  uni.navigateTo({
+    url: `/pages/product/goods?id=${item.skuId}&goodsId=${item.goodsId}`,
+  })
+}
+
+async function registerLiveUser() {
+  if (!isLogin('auth')) return
+  try {
+    const res = await registerLiveViewUser(liveId.value)
+    if (res.data.success && res.data.result) {
+      liveUser.value = res.data.result
+      await initLiveChat()
+    }
+  } catch (e) {
+    console.error('register live user failed:', e)
+  }
+}
+
+function formatCount(val: number | string) {
+  const num = Number(val) || 0
+  if (num >= 10000) return `${(num / 10000).toFixed(1)}万`
+  return num
+}
+
+function onPlayerError(e: any) {
+  console.error('live player error:', e.detail)
+  uni.showToast({ title: '直播加载失败', icon: 'none' })
+}
+
+/** 根据当前直播状态与拉流地址，按需（重新）挂载或销毁 H5 播放器 */
+function syncH5Player(retry = 0) {
+  // #ifdef H5
+  const shouldPlay = isLiving.value && !!roomInfo.value.pullStreamUrl
+  if (!shouldPlay) {
+    destroyH5HlsPlayer()
+    lastHlsPullUrl.value = ''
+    return
+  }
+  if (
+    roomInfo.value.pullStreamUrl === lastHlsPullUrl.value &&
+    hlsInstance &&
+    hlsVideoElement &&
+    !hlsVideoElement.paused
+  ) {
+    return
+  }
+  if (roomInfo.value.pullStreamUrl === lastHlsPullUrl.value && hlsInstance) {
+    ensureH5VideoPlaying(hlsVideoElement)
+    return
+  }
+  lastHlsPullUrl.value = roomInfo.value.pullStreamUrl
+  hlsHttpFallbackUsed.value = false
+  nextTick(() => {
+    const container = hlsContainer.value
+    if (!container) {
+      if (retry < 8) {
+        setTimeout(() => syncH5Player(retry + 1), 80)
+      }
+      return
+    }
+    initH5HlsPlayer()
+  })
+  // #endif
+}
+
+/** 尝试自动播放；浏览器策略拦截时先静音播放，点击后再恢复声音 */
+function ensureH5VideoPlaying(video: HTMLVideoElement | null) {
+  // #ifdef H5
+  if (!video) return Promise.resolve()
+  const tryPlay = (muted: boolean) => {
+    video.muted = muted
+    return video.play().catch(() => Promise.reject())
+  }
+  return tryPlay(false)
+    .catch(() => tryPlay(true))
+    .catch(() => {
+      console.warn('[HLS] 自动播放被阻止，请点击画面播放')
+    })
+  // #endif
+}
+
+/** 初始化 H5 HLS 播放器，支持 HTTPS 证书异常时自动降级为 HTTP 重试 */
+function initH5HlsPlayer(useHttpFallback = false) {
+  // #ifdef H5
+  const originalUrl = roomInfo.value.pullStreamUrl
+  const container = hlsContainer.value
+  if (!originalUrl || !container) return
+
+  const httpUrl =
+    useHttpFallback && originalUrl.startsWith('https://')
+      ? originalUrl.replace('https://', 'http://')
+      : originalUrl
+  const url = httpUrl.replace('.flv', '.m3u8')
+
+  destroyH5HlsPlayer()
+
+  const video = document.createElement('video')
+  video.style.cssText = 'width:100%;height:100%;object-fit:cover;background:#000;'
+  video.autoplay = true
+  video.muted = true
+  video.defaultMuted = true
+  video.playsInline = true
+  video.setAttribute('autoplay', '')
+  video.setAttribute('muted', '')
+  video.setAttribute('playsinline', '')
+  video.setAttribute('webkit-playsinline', '')
+  video.setAttribute('x5-playsinline', '')
+  video.setAttribute('x5-video-player-type', 'h5')
+  video.setAttribute('x5-video-player-fullscreen', 'true')
+  video.controls = false
+  const onVideoClick = () => {
+    if (video.muted) {
+      video.muted = false
+    }
+    video.play().catch(() => {})
+  }
+  video.addEventListener('click', onVideoClick)
+  container.appendChild(video)
+  hlsVideoElement = video
+  hlsVideoClickHandler = onVideoClick
+
+  const onReadyPlay = () => {
+    ensureH5VideoPlaying(video)
+  }
+
+  if (Hls.isSupported()) {
+    const hls = new Hls({
+      enableWorker: true,
+      lowLatencyMode: true,
+      liveSyncDurationCount: 3,
+      liveMaxLatencyDurationCount: 6,
+      maxBufferLength: 10,
+      maxMaxBufferLength: 30,
+    })
+    hlsInstance = hls
+    hls.on(Hls.Events.MEDIA_ATTACHED, onReadyPlay)
+    hls.on(Hls.Events.MANIFEST_PARSED, onReadyPlay)
+    hls.attachMedia(video)
+    hls.loadSource(url)
+    hls.on(Hls.Events.ERROR, (_event, data) => {
+      if (!data.fatal) return
+      switch (data.type) {
+        case Hls.ErrorTypes.NETWORK_ERROR:
+          if (!hlsHttpFallbackUsed.value && originalUrl.startsWith('https://')) {
+            console.warn('[HLS] HTTPS 加载失败，尝试 HTTP 降级...')
+            hlsHttpFallbackUsed.value = true
+            destroyH5HlsPlayer()
+            nextTick(() => initH5HlsPlayer(true))
           } else {
-            uni.showToast({ title: res.data.message || "领取失败", icon: "none" });
+            console.error('[HLS] 网络错误，尝试重连...')
+            hls.startLoad()
           }
-        })
-        .catch(() => {
-          uni.showToast({ title: "领取失败", icon: "none" });
-        })
-        .finally(() => {
-          this.claimingCouponId = "";
-        });
-    },
-    isCouponReceived(couponId) {
-      return (this.liveCouponReceives || []).some((item) => item.couponId === couponId);
-    },
-    setupShare() {
-      const shareConfig = {
-        title: this.roomInfo.title || "直播间",
-        path: `/pages/live/room?id=${this.liveId}`,
-        imageUrl: this.roomInfo.coverImg || "",
-      };
-      // #ifdef MP-WEIXIN
-      if (this.$u) {
-        this.$u.mpShare = shareConfig;
+          break
+        case Hls.ErrorTypes.MEDIA_ERROR:
+          console.error('[HLS] 媒体错误，尝试恢复...')
+          hls.recoverMediaError()
+          break
+        default:
+          console.error('[HLS] 致命错误:', data)
+          destroyH5HlsPlayer()
+          break
       }
-      uni.showShareMenu({
-        withShareTicket: true,
-        menus: ["shareAppMessage", "shareTimeline"],
-      });
-      // #endif
-    },
-    async initLiveRoom() {
-      const ok = await this.fetchRoomDetail(true);
-      if (!ok) return;
-      await this.fetchPollingData(false);
-      this.setupShare();
-      if (this.roomInfo.title) {
-        uni.setNavigationBarTitle({ title: this.roomInfo.title });
-      }
-      if (this.isLogin("auth")) {
-        await this.registerLiveUser();
-      }
-      this.startPolling();
-      this.initLiveMqtt();
-      this.syncH5Player();
-    },
-    async initLiveChat() {
-      if (!this.isLogin("auth")) return;
+    })
+  } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+    video.src = url
+    video.addEventListener('loadedmetadata', onReadyPlay)
+    video.addEventListener('canplay', onReadyPlay)
+  } else {
+    console.error('[HLS] 当前浏览器不支持 HLS')
+  }
+  // #endif
+}
 
-      const groupId = this.roomInfo.imGroupId || this.roomInfo.groupId;
-      if (!groupId) {
-        console.warn("imGroupId 不存在，跳过 IM 初始化");
-        return;
-      }
+/** 销毁 H5 HLS 播放器 */
+function destroyH5HlsPlayer() {
+  // #ifdef H5
+  if (hlsInstance) {
+    hlsInstance.destroy()
+    hlsInstance = null
+  }
+  if (hlsVideoElement) {
+    if (hlsVideoClickHandler) {
+      hlsVideoElement.removeEventListener('click', hlsVideoClickHandler)
+      hlsVideoClickHandler = null
+    }
+    hlsVideoElement.remove()
+    hlsVideoElement = null
+  }
+  // #endif
+}
 
-      if (!this.liveUser?.userSig) {
-        await this.registerLiveUser();
-      }
-      if (!this.liveUser?.userSig) {
-        console.warn("userSig 不存在，跳过 IM 初始化");
-        return;
-      }
+function buildMessagePayload(content: string) {
+  const userInfo = isLogin() || {}
+  return {
+    liveRoomId: liveId.value,
+    liveName: roomInfo.value.title,
+    liveUserId: liveUser.value?.id || liveUser.value?.userId || userInfo.id,
+    userId: liveUser.value?.userId || userInfo.id,
+    userName: liveUser.value?.userName || userInfo.nickName || userInfo.username,
+    userFace: liveUser.value?.userFace || userInfo.face,
+    message: content,
+    imGroupId: roomInfo.value.imGroupId,
+  }
+}
 
-      if (!this.liveChatService) {
-        const userInfo = this.isLogin() || {};
-        this.liveChatService = new LiveChatService({
-          liveId: this.liveId,
-          userInfo,
-          defaultAvatar: this.defaultAvatar,
-          onMessagesChange: (messages) => {
-            this.messageList = messages;
-          },
-          onScrollToBottom: () => {
-            this.$nextTick(() => {
-              if (this.messageList.length) {
-                this.scrollToView = "msg-" + (this.messageList.length - 1);
-              }
-            });
-          },
-        });
-      }
+function appendMessage(msg: any) {
+  messageList.value.push(msg)
+  nextTick(() => {
+    scrollToView.value = 'msg-' + (messageList.value.length - 1)
+  })
+}
 
-      this.liveChatService.userInfo = this.isLogin() || {};
-      this.liveChatService.setGroupID(groupId);
-      await this.liveChatService.initTencentIm(this.liveUser);
-    },
-    cleanupLiveChat() {
-      if (this.liveChatService) {
-        this.liveChatService.cleanup();
-        this.liveChatService = null;
-      }
-    },
-    getMqttUserId() {
-      const userInfo = this.isLogin() || {};
-      return userInfo.id || userInfo.userId || this.liveUser?.userId || `guest-${this.liveId}`;
-    },
-    initLiveMqttHandlers() {
-      if (!this.liveMqttService) return;
-      this.liveMqttService.setMessageHandlers({
-        onLiveMessage: (message) => this.handleMqttLiveMessage(message),
-        onGoodsMessage: (message) => this.handleMqttGoodsMessage(message),
-        onCouponMessage: (message) => this.handleMqttCouponMessage(message),
-        onBlacklistMessage: () => this.handleMqttBlacklistMessage(),
-        onPushStream: () => this.handleMqttPushStreamMessage(),
-      });
-    },
-    initLiveMqtt() {
-      if (!this.liveId) return;
-      if (!this.liveMqttService) {
-        this.liveMqttService = new LiveMqttService(this.liveId, this.getMqttUserId());
-      } else {
-        this.liveMqttService.userId = this.getMqttUserId();
-      }
-      this.initLiveMqttHandlers();
-      if (!this.liveMqttService.isConnected() && !this.liveMqttService.mqttClient) {
-        this.liveMqttService.initMqtt();
-      }
-    },
-    cleanupLiveMqtt() {
-      if (this.liveMqttService) {
-        this.liveMqttService.cleanup();
-        this.liveMqttService = null;
-      }
-    },
-    normalizeMqttLiveStatus(status) {
-      if (typeof status === "string") {
-        const upper = status.toUpperCase();
-        const map = {
-          NEW: LIVE_STATUS.NEW,
-          NOT_STARTED: LIVE_STATUS.NEW,
-          START: LIVE_STATUS.LIVING,
-          LIVING: LIVE_STATUS.LIVING,
-          END: LIVE_STATUS.ENDED,
-          ENDED: LIVE_STATUS.ENDED,
-          PAUSE: LIVE_STATUS.PAUSED,
-          PAUSED: LIVE_STATUS.PAUSED,
-        };
-        return map[upper] || status;
-      }
-      const numMap = {
-        0: LIVE_STATUS.NEW,
-        1: LIVE_STATUS.LIVING,
-        2: LIVE_STATUS.ENDED,
-        3: LIVE_STATUS.PAUSED,
-      };
-      return numMap[status] ?? this.roomInfo.liveStatus;
-    },
-    handleMqttLiveMessage(message) {
-      try {
-        const data = JSON.parse(message);
-        const updates = {};
-        if (data.liveStatus !== undefined) {
-          updates.liveStatus = this.normalizeMqttLiveStatus(data.liveStatus);
-        }
-        if (data.pullStreamUrl) {
-          updates.pullStreamUrl = data.pullStreamUrl;
-        }
-        if (Object.keys(updates).length) {
-          this.roomInfo = { ...this.roomInfo, ...updates };
-        }
-        if (updates.liveStatus === LIVE_STATUS.ENDED) {
-          this.stopPolling();
-        }
-        this.syncH5Player();
-      } catch (error) {
-        console.error("处理直播 MQTT 消息失败:", error);
-      }
-    },
-    handleMqttGoodsMessage(message) {
-      console.log("收到商品 MQTT 消息:", message);
-      const goodsMessageList = parseRecommendMessageArray(message);
-      if (goodsMessageList.length) {
-        this.goodsList = goodsMessageList;
-      }
-      this.fetchPollingData(false);
-    },
-    handleMqttCouponMessage(message) {
-      console.log("收到优惠券 MQTT 消息:", message);
-      const couponMessageList = parseRecommendMessageArray(message);
-      const recommendCoupon = findRecommendPayload(couponMessageList);
-      if (recommendCoupon) {
-        this.showRecommendCouponFromPayload(recommendCoupon);
-      } else {
-        this.closeRecommendCouponModal();
-      }
-      this.fetchPollingData(false);
-    },
-    handleMqttBlacklistMessage() {
-      uni.showModal({
-        title: "提示",
-        content: "您已被限制进入直播间",
-        showCancel: false,
-        success: () => this.goBackOrHome(),
-      });
-    },
-    handleMqttPushStreamMessage() {
-      if (this.roomInfo.liveStatus !== LIVE_STATUS.LIVING) {
-        this.roomInfo = { ...this.roomInfo, liveStatus: LIVE_STATUS.LIVING };
-      }
-      this.syncH5Player();
-    },
-    startPolling() {
-      this.stopPolling();
-      this.pollTimer = setInterval(() => {
-        this.fetchPollingData(false);
-      }, POLL_INTERVAL);
-    },
-    stopPolling() {
-      if (this.pollTimer) {
-        clearInterval(this.pollTimer);
-        this.pollTimer = null;
-      }
-    },
-    applyPollingData(data) {
-      if (!data) return;
-      if (data.liveDetail) {
-        this.roomInfo = data.liveDetail;
-      }
-      if (data.goodsList) {
-        this.goodsList = data.goodsList;
-      }
-      if (data.liveCoupon) {
-        this.liveCoupon = data.liveCoupon;
-        this.updateRecommendCouponPopup();
-      }
-      if (data.liveCouponReceives) {
-        this.liveCouponReceives = data.liveCouponReceives;
-        if (
-          this.recommendCouponItem &&
-          this.isCouponReceived(this.recommendCouponItem.couponId)
-        ) {
-          this.closeRecommendCouponModal();
-        }
-      }
-      if (this.roomInfo.liveStatus === LIVE_STATUS.ENDED) {
-        this.stopPolling();
-      }
-      this.syncH5Player();
-    },
-    async fetchRoomDetail(isInit = false) {
-      if (isInit) this.loading = true;
-      try {
-        const res = await getLiveRoomById(this.liveId);
-        if (res.data?.success && res.data?.result) {
-          this.roomInfo = res.data.result;
-          seedLiveSetting(this.liveId, res.data.result);
-          this.syncH5Player();
-          return true;
-        }
-        if (isInit) {
-          uni.showToast({ title: res.data?.message || "直播间不存在", icon: "none" });
-          setTimeout(() => this.goBackOrHome(), 1500);
-        }
-        return false;
-      } catch (e) {
-        if (isInit) {
-          uni.showToast({ title: "加载失败", icon: "none" });
-        }
-        return false;
-      } finally {
-        if (isInit) this.loading = false;
-      }
-    },
-    async fetchPollingData(isInit = false) {
-      if (isInit) this.loading = true;
-      try {
-        const res = await getLivePollingData(this.liveId);
-        if (res.data.success && res.data.result) {
-          this.applyPollingData(res.data.result);
-          return true;
-        }
-        return false;
-      } catch (e) {
-        return false;
-      } finally {
-        if (isInit) this.loading = false;
-      }
-    },
-    goGoods(item) {
-      if (this.isGoodsSoldOut(item)) return;
-      if (!item.canBuyFlag) {
-        uni.showToast({ title: "暂不可购买", icon: "none" });
-        return;
-      }
-      uni.navigateTo({
-        url: `/pages/product/goods?id=${item.skuId}&goodsId=${item.goodsId}`,
-      });
-    },
-    async registerLiveUser() {
-      if (!this.isLogin("auth")) return;
-      try {
-        const res = await registerLiveViewUser(this.liveId);
-        if (res.data.success && res.data.result) {
-          this.liveUser = res.data.result;
-          await this.initLiveChat();
-        }
-      } catch (e) {
-        console.error("register live user failed:", e);
-      }
-    },
-    formatCount(val) {
-      const num = Number(val) || 0;
-      if (num >= 10000) return `${(num / 10000).toFixed(1)}万`;
-      return num;
-    },
-    onPlayerError(e) {
-      console.error("live player error:", e.detail);
-      uni.showToast({ title: "直播加载失败", icon: "none" });
-    },
-    /** 根据当前直播状态与拉流地址，按需（重新）挂载或销毁 H5 播放器 */
-    syncH5Player(retry = 0) {
-      // #ifdef H5
-      const shouldPlay = this.isLiving && !!this.roomInfo.pullStreamUrl;
-      if (!shouldPlay) {
-        this.destroyH5HlsPlayer();
-        this.lastHlsPullUrl = "";
-        return;
-      }
-      if (
-        this.roomInfo.pullStreamUrl === this.lastHlsPullUrl &&
-        this.hlsInstance &&
-        this.hlsVideoElement &&
-        !this.hlsVideoElement.paused
-      ) {
-        return;
-      }
-      if (this.roomInfo.pullStreamUrl === this.lastHlsPullUrl && this.hlsInstance) {
-        this.ensureH5VideoPlaying(this.hlsVideoElement);
-        return;
-      }
-      this.lastHlsPullUrl = this.roomInfo.pullStreamUrl;
-      this.hlsHttpFallbackUsed = false;
-      this.$nextTick(() => {
-        const container = this.$refs.hlsContainer;
-        if (!container) {
-          if (retry < 8) {
-            setTimeout(() => this.syncH5Player(retry + 1), 80);
-          }
-          return;
-        }
-        this.initH5HlsPlayer();
-      });
-      // #endif
-    },
-    /** 尝试自动播放；浏览器策略拦截时先静音播放，点击后再恢复声音 */
-    ensureH5VideoPlaying(video) {
-      // #ifdef H5
-      if (!video) return Promise.resolve();
-      const tryPlay = (muted) => {
-        video.muted = muted;
-        return video.play().catch(() => Promise.reject());
-      };
-      return tryPlay(false)
-        .catch(() => tryPlay(true))
-        .catch(() => {
-          console.warn("[HLS] 自动播放被阻止，请点击画面播放");
-        });
-      // #endif
-    },
-    /** 初始化 H5 HLS 播放器，支持 HTTPS 证书异常时自动降级为 HTTP 重试 */
-    initH5HlsPlayer(useHttpFallback = false) {
-      // #ifdef H5
-      const originalUrl = this.roomInfo.pullStreamUrl;
-      const container = this.$refs.hlsContainer;
-      if (!originalUrl || !container) return;
+async function sendMessage() {
+  const content = inputMessage.value.trim()
+  if (!content) {
+    if (!isLogin('auth')) {
+      goLogin()
+    }
+    return
+  }
 
-      const httpUrl =
-        useHttpFallback && originalUrl.startsWith("https://")
-          ? originalUrl.replace("https://", "http://")
-          : originalUrl;
-      const url = httpUrl.replace(".flv", ".m3u8");
+  if (!requireLogin()) return
 
-      this.destroyH5HlsPlayer();
+  if (!liveUser.value) {
+    await registerLiveUser()
+    if (!liveUser.value) {
+      uni.showToast({ title: '进入直播间失败，请重试', icon: 'none' })
+      return
+    }
+  }
+  if (liveUser.value.muteFlag) {
+    uni.showToast({ title: '您已被禁言', icon: 'none' })
+    return
+  }
+  if (sending.value) return
 
-      const video = document.createElement("video");
-      video.style.cssText = "width:100%;height:100%;object-fit:cover;background:#000;";
-      video.autoplay = true;
-      video.muted = true;
-      video.defaultMuted = true;
-      video.playsInline = true;
-      video.setAttribute("autoplay", "");
-      video.setAttribute("muted", "");
-      video.setAttribute("playsinline", "");
-      video.setAttribute("webkit-playsinline", "");
-      video.setAttribute("x5-playsinline", "");
-      video.setAttribute("x5-video-player-type", "h5");
-      video.setAttribute("x5-video-player-fullscreen", "true");
-      video.controls = false;
-      const onVideoClick = () => {
-        if (video.muted) {
-          video.muted = false;
-        }
-        video.play().catch(() => {});
-      };
-      video.addEventListener("click", onVideoClick);
-      container.appendChild(video);
-      this.hlsVideoElement = video;
-      this._hlsVideoClickHandler = onVideoClick;
+  sending.value = true
+  try {
+    const res = await sendLiveMessage(buildMessagePayload(content))
+    if (res.data.success) {
+      inputMessage.value = ''
+    } else {
+      uni.showToast({ title: res.data.message || '发送失败', icon: 'none' })
+    }
+  } catch (e) {
+    uni.showToast({ title: '发送失败', icon: 'none' })
+  } finally {
+    sending.value = false
+  }
+}
 
-      const onReadyPlay = () => {
-        this.ensureH5VideoPlaying(video);
-      };
+watch(
+  () => roomInfo.value.pullStreamUrl,
+  () => syncH5Player()
+)
 
-      if (Hls.isSupported()) {
-        const hls = new Hls({
-          enableWorker: true,
-          lowLatencyMode: true,
-          liveSyncDurationCount: 3,
-          liveMaxLatencyDurationCount: 6,
-          maxBufferLength: 10,
-          maxMaxBufferLength: 30,
-        });
-        this.hlsInstance = hls;
-        hls.on(Hls.Events.MEDIA_ATTACHED, onReadyPlay);
-        hls.on(Hls.Events.MANIFEST_PARSED, onReadyPlay);
-        hls.attachMedia(video);
-        hls.loadSource(url);
-        hls.on(Hls.Events.ERROR, (_event, data) => {
-          if (!data.fatal) return;
-          switch (data.type) {
-            case Hls.ErrorTypes.NETWORK_ERROR:
-              if (!this.hlsHttpFallbackUsed && originalUrl.startsWith("https://")) {
-                console.warn("[HLS] HTTPS 加载失败，尝试 HTTP 降级...");
-                this.hlsHttpFallbackUsed = true;
-                this.destroyH5HlsPlayer();
-                this.$nextTick(() => this.initH5HlsPlayer(true));
-              } else {
-                console.error("[HLS] 网络错误，尝试重连...");
-                hls.startLoad();
-              }
-              break;
-            case Hls.ErrorTypes.MEDIA_ERROR:
-              console.error("[HLS] 媒体错误，尝试恢复...");
-              hls.recoverMediaError();
-              break;
-            default:
-              console.error("[HLS] 致命错误:", data);
-              this.destroyH5HlsPlayer();
-              break;
-          }
-        });
-      } else if (video.canPlayType("application/vnd.apple.mpegurl")) {
-        video.src = url;
-        video.addEventListener("loadedmetadata", onReadyPlay);
-        video.addEventListener("canplay", onReadyPlay);
-      } else {
-        console.error("[HLS] 当前浏览器不支持 HLS");
-      }
-      // #endif
-    },
-    /** 销毁 H5 HLS 播放器 */
-    destroyH5HlsPlayer() {
-      // #ifdef H5
-      if (this.hlsInstance) {
-        this.hlsInstance.destroy();
-        this.hlsInstance = null;
-      }
-      if (this.hlsVideoElement) {
-        if (this._hlsVideoClickHandler) {
-          this.hlsVideoElement.removeEventListener("click", this._hlsVideoClickHandler);
-          this._hlsVideoClickHandler = null;
-        }
-        this.hlsVideoElement.remove();
-        this.hlsVideoElement = null;
-      }
-      // #endif
-    },
-    buildMessagePayload(content) {
-      const userInfo = this.isLogin() || {};
-      return {
-        liveRoomId: this.liveId,
-        liveName: this.roomInfo.title,
-        liveUserId: this.liveUser?.id || this.liveUser?.userId || userInfo.id,
-        userId: this.liveUser?.userId || userInfo.id,
-        userName: this.liveUser?.userName || userInfo.nickName || userInfo.username,
-        userFace: this.liveUser?.userFace || userInfo.face,
-        message: content,
-        imGroupId: this.roomInfo.imGroupId,
-      };
-    },
-    appendMessage(msg) {
-      this.messageList.push(msg);
-      this.$nextTick(() => {
-        this.scrollToView = "msg-" + (this.messageList.length - 1);
-      });
-    },
-    async sendMessage() {
-      const content = this.inputMessage.trim();
-      if (!content) {
-        if (!this.isLogin("auth")) {
-          this.goLogin();
-        }
-        return;
-      }
+watch(isLiving, () => syncH5Player())
 
-      if (!this.requireLogin()) return;
+watch(isVerticalMode, () => {
+  // 横竖屏模板切换会销毁重建播放器容器 DOM，需重新挂载播放器
+  lastHlsPullUrl.value = ''
+  nextTick(() => syncH5Player())
+})
 
-      if (!this.liveUser) {
-        await this.registerLiveUser();
-        if (!this.liveUser) {
-          uni.showToast({ title: "进入直播间失败，请重试", icon: "none" });
-          return;
-        }
-      }
-      if (this.liveUser.muteFlag) {
-        uni.showToast({ title: "您已被禁言", icon: "none" });
-        return;
-      }
-      if (this.sending) return;
+onLoad((options) => {
+  liveId.value = parseLiveId(options || {})
 
-      this.sending = true;
-      try {
-        const res = await sendLiveMessage(this.buildMessagePayload(content));
-        if (res.data.success) {
-          this.inputMessage = "";
-        } else {
-          uni.showToast({ title: res.data.message || "发送失败", icon: "none" });
-        }
-      } catch (e) {
-        uni.showToast({ title: "发送失败", icon: "none" });
-      } finally {
-        this.sending = false;
-      }
-    },
-  },
-};
+  if (!liveId.value) {
+    uni.showToast({ title: '无效的直播链接', icon: 'none' })
+    setTimeout(() => goBackOrHome(), 1500)
+    return
+  }
+  initLiveRoom()
+})
+
+onShow(() => {
+  if (liveId.value && isLogin('auth')) {
+    if (!liveUser.value) {
+      registerLiveUser()
+    } else {
+      initLiveChat()
+    }
+    fetchPollingData(false)
+  }
+  if (liveId.value && !pollTimer.value) {
+    startPolling()
+  }
+  if (liveId.value && liveMqttService && !liveMqttService.isConnected()) {
+    initLiveMqtt()
+  }
+  syncH5Player()
+})
+
+onHide(() => {
+  stopPolling()
+})
+
+onUnload(() => {
+  stopPolling()
+  cleanupLiveMqtt()
+  cleanupLiveChat()
+  destroyH5HlsPlayer()
+})
+
+// #ifdef MP-WEIXIN
+onShareTimeline(() => ({
+  title: roomInfo.value.title || '直播间',
+  query: `id=${liveId.value}`,
+  imageUrl: roomInfo.value.coverImg || '',
+}))
+// #endif
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/promotion/live/utils/liveChat.js b/pages/promotion/live/utils/liveChat.js
index a0962de..7237f8d 100644
--- a/pages/promotion/live/utils/liveChat.js
+++ b/pages/promotion/live/utils/liveChat.js
@@ -1,6 +1,7 @@
 /**
  * 直播腾讯云 IM（由 saas-uni-v3 useChat 迁移）
  */
+// #ifndef MP-WEIXIN
 import TencentCloudChat from "@tencentcloud/chat";
 import { fetchLiveSetting } from "./liveSetting.js";
 
@@ -321,3 +322,13 @@ export class LiveChatService {
     this.savedViewLiveResult = null;
   }
 }
+// #endif
+
+// #ifdef MP-WEIXIN
+export class LiveChatService {
+  constructor() {}
+  setGroupID() {}
+  async initTencentIm() {}
+  cleanup() {}
+}
+// #endif
diff --git a/pages/promotion/live/utils/liveMqtt.js b/pages/promotion/live/utils/liveMqtt.js
index 63b6c64..68fb353 100644
--- a/pages/promotion/live/utils/liveMqtt.js
+++ b/pages/promotion/live/utils/liveMqtt.js
@@ -1,6 +1,7 @@
 /**
  * 直播 MQTT 连接管理（由 saas-uni-v3 useMqtt 迁移）
  */
+// #ifndef MP-WEIXIN
 import { createMqttClient } from "../mqtt/mqtt.js";
 
 export class LiveMqttService {
@@ -220,3 +221,20 @@ export class LiveMqttService {
     this.disconnectMqtt();
   }
 }
+// #endif
+
+// #ifdef MP-WEIXIN
+export class LiveMqttService {
+  constructor() {}
+  set messageHandlers() {}
+  setMessageHandlers() {}
+  initMqtt() {}
+  isConnected() {
+    return false;
+  }
+  get mqttClient() {
+    return null;
+  }
+  cleanup() {}
+}
+// #endif
diff --git a/pages/promotion/lives.vue b/pages/promotion/lives.vue
index cd35854..a3327ab 100644
--- a/pages/promotion/lives.vue
+++ b/pages/promotion/lives.vue
@@ -82,204 +82,169 @@
   </view>
 </template>
 
-<script>
-import { getLiveList } from "@/api/promotions.js";
-import config from "@/config/config";
-export default {
-  data() {
-    return {
-      config,
-      status: "loadmore",
-      activeColor: this.$lightColor,
-      current: 0, // 当前tabs索引
-      keyword: "", //搜索直播间
-      // 标签栏
-      tabs: [
-        {
-          name: "直播中",
-        },
-        {
-          name: "全部",
-        },
-      ],
-      // 导航栏的配置
-      background: {
-        background: "#ff9f28",
-      },
-      // 直播间params
-      params: [
-        {
-          pageNumber: 1,
-          pageSize: 10,
-          status: "START",
-        },
-        {
-          pageNumber: 1,
-          pageSize: 4,
-        },
-      ],
-      // 推荐直播间Params
-      recommendParams: {
-        pageNumber: 1,
-        pageSize: 3,
-        recommend: 0,
-      },
-      // 直播间列表
-      liveList: [],
-      // 推荐直播间列表
-      recommendLiveList: [],
+<script setup lang="ts">
+import { getLiveList } from '@/api/promotions.js'
+import config from '@/config/config'
+import { useStore } from '@/store'
+import { onReachBottom, onShow } from '@dcloudio/uni-app'
+import { computed, ref } from 'vue'
 
-      //轮播图滚动的图片
-      swiperImg: [
-        {
-          image:
-            "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/48d789cb9c864b7b87c1c0f70996c3e8.jpeg",
-        },
-      ],
-    };
+const store = useStore()
+
+const activeColor = computed(() => store.getters.lightColor)
+
+const status = ref('loadmore')
+const current = ref(0)
+const keyword = ref('')
+
+const tabs = ref([
+  { name: '直播中' },
+  { name: '全部' },
+])
+
+const background = ref({
+  background: '#ff9f28',
+})
+
+const params = ref([
+  {
+    pageNumber: 1,
+    pageSize: 10,
+    status: 'START',
   },
-  onShow() {
-    this.params[this.current].pageNumber = 1;
-    this.liveList = [];
-    this.getLives();
-    this.getRecommendLives();
+  {
+    pageNumber: 1,
+    pageSize: 4,
   },
-  onReachBottom() {
-    this.params[this.current].pageNumber++;
-    this.getLives();
+])
+
+const recommendParams = ref({
+  pageNumber: 1,
+  pageSize: 3,
+  recommend: 0,
+})
+
+const liveList = ref<any[]>([])
+const recommendLiveList = ref<any[]>([])
+
+const swiperImg = ref<any[]>([
+  {
+    image:
+      'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/48d789cb9c864b7b87c1c0f70996c3e8.jpeg',
   },
-  methods: {
-    back() {
-      uni.navigateBack({
-        delta: 1,
-        fail: () => {
-          uni.switchTab({ url: "/pages/tabbar/home/index" });
-        },
-      });
-    },
-    /**
-     * 点击标签栏切换
-     */
-    changeTabs() {
-      this.params[this.current].pageNumber = 1;
-      this.init();
-    },
+])
 
-    /**
-     * 初始化直播间
-     */
-    init() {
-      this.liveList = [];
-      this.status = "loadmore";
-      this.getLives();
-    },
+onShow(() => {
+  params.value[current.value].pageNumber = 1
+  liveList.value = []
+  getLives()
+  getRecommendLives()
+})
 
-    /**
-     * 清除搜索内容
-     */
-    clear() {
-      delete this.params[this.current].name;
-      this.init();
-    },
-    /**
-     * 点击顶部推荐直播间
-     */
-    clickSwiper(val) {
-      console.log(this.swiperImg[val]);
-      this.handleLivePlayer(this.swiperImg[val]);
-    },
+onReachBottom(() => {
+  params.value[current.value].pageNumber++
+  getLives()
+})
 
-    /**
-     * 搜索直播间
-     */
-    searchLive(val) {
-      this.params[this.current].pageNumber = 1;
-      this.params[this.current].name = val;
-      this.init();
+function back() {
+  uni.navigateBack({
+    delta: 1,
+    fail: () => {
+      uni.switchTab({ url: '/pages/tabbar/home/index' })
     },
-    /**
-     * 获取推荐直播间
-     */
-    async getRecommendLives() {
-      this.status = "loading";
-      let recommendLives = await getLiveList(this.recommendParams);
-      if (recommendLives.data.success) {
-        // 推荐直播间
-        if (recommendLives.data.result.records.length) {
-          this.status = "loadmore";
-          this.recommendLiveList = recommendLives.data.result.records;
-        } else {
-          this.status = "noMore";
-        }
+  })
+}
 
-        /**
-         * 如果推荐直播间没有的情况下
-         * 1.获取直播间第一个图片
-         * 2.如果没有直播间设置一个默认图片
-         */
+function changeTabs() {
+  params.value[current.value].pageNumber = 1
+  init()
+}
 
-        if (!this.recommendLiveList.length) {
-          if (this.liveList[0] && this.liveList[0].shareImg) {
-            this.swiperImg = [
-              {
-                image: this.liveList[0].shareImg,
-                roomId: this.liveList[0].roomId,
-              },
-            ];
-          }
-        } else {
-          this.recommendLiveList.forEach((item) => {
-            this.swiperImg = [{ image: item.shareImg, roomId: item.roomId }];
-          });
+function init() {
+  liveList.value = []
+  status.value = 'loadmore'
+  getLives()
+}
+
+function clear() {
+  delete params.value[current.value].name
+  init()
+}
+
+function clickSwiper(val: number) {
+  console.log(swiperImg.value[val])
+  handleLivePlayer(swiperImg.value[val])
+}
+
+function searchLive(val: string) {
+  params.value[current.value].pageNumber = 1
+  params.value[current.value].name = val
+  init()
+}
+
+async function getRecommendLives() {
+  status.value = 'loading'
+  const recommendLives = await getLiveList(recommendParams.value)
+  if (recommendLives.data.success) {
+    if (recommendLives.data.result.records.length) {
+      status.value = 'loadmore'
+      recommendLiveList.value = recommendLives.data.result.records
+    } else {
+      status.value = 'noMore'
+    }
+
+    if (!recommendLiveList.value.length) {
+      if (liveList.value[0] && liveList.value[0].shareImg) {
+        swiperImg.value = [
+          {
+            image: liveList.value[0].shareImg,
+            roomId: liveList.value[0].roomId,
+          },
+        ]
+      }
+    } else {
+      recommendLiveList.value.forEach((item) => {
+        swiperImg.value = [{ image: item.shareImg, roomId: item.roomId }]
+      })
+    }
+  }
+}
+
+async function getLives() {
+  status.value = 'loading'
+  const res = await getLiveList(params.value[current.value])
+  if (res.data.success) {
+    if (res.data.result.records.length) {
+      status.value = 'loadmore'
+      liveList.value.push(...res.data.result.records)
+    } else {
+      status.value = 'noMore'
+    }
+    res.data.result.total >
+    params.value[current.value].pageNumber *
+      params.value[current.value].pageSize
+      ? (status.value = 'loadmore')
+      : (status.value = 'noMore')
+
+    liveList.value.forEach((item) => {
+      if (item.roomGoodsList && typeof item.roomGoodsList === 'string') {
+        try {
+          item.roomGoodsList = JSON.parse(item.roomGoodsList)
+        } catch (e) {
+          item.roomGoodsList = []
         }
       }
-    },
+    })
+  }
+}
 
-    /**
-     * 获取直播间
-     */
-    async getLives() {
-      this.status = "loading";
-      let res = await getLiveList(this.params[this.current]);
-      // 直播间
-      if (res.data.success) {
-        if (res.data.result.records.length ) {
-          this.status = "loadmore";
-          this.liveList.push(...res.data.result.records);
-        } else {
-          this.status = "noMore";
-        }
-        res.data.result.total >
-        this.params[this.current].pageNumber *
-          this.params[this.current].pageSize
-          ? (this.status = "loadmore")
-          : (this.status = "noMore");
-
-      
-        this.liveList.forEach((item) => {
-          if (item.roomGoodsList && typeof item.roomGoodsList === "string") {
-            try {
-              item.roomGoodsList = JSON.parse(item.roomGoodsList);
-            } catch (e) {
-              item.roomGoodsList = [];
-            }
-          }
-        });
-      }
-    },
-
-    /**
-     * 进入直播间
-     */
-    handleLivePlayer(val) {
-      const id = val.id || val.roomId;
-      if (!id) return;
-      uni.navigateTo({
-        url: `/pages/live/room?id=${id}`,
-      });
-    },
-  },
-};
+function handleLivePlayer(val: any) {
+  const id = val.id || val.roomId
+  if (!id) return
+  uni.navigateTo({
+    url: `/pages/promotion/live/room?id=${id}`,
+  })
+}
 </script>
 
 <style lang="scss" scoped>
@@ -431,4 +396,4 @@ page {
   font-size: 28rpx;
   color: #999;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/pages/promotion/point/detail.vue b/pages/promotion/point/detail.vue
index abad0f8..cd19ed0 100644
--- a/pages/promotion/point/detail.vue
+++ b/pages/promotion/point/detail.vue
@@ -49,70 +49,63 @@
       </div>
 
       <!-- 购买 -->
-      <popupGoods ref="popupGoods" :goodsSpec="goodsSpec" :buyMask="maskFlag" @closeBuy="closePopupBuy" :goodsDetail="goodsData" v-if="goodsData.id " @handleClickSku="getGoodsDetail" />
+      <popupGoods ref="popupGoodsRef" :goodsSpec="goodsSpec" :buyMask="maskFlag" @closeBuy="closePopupBuy" :goodsDetail="goodsData" v-if="goodsData.id " @handleClickSku="getGoodsDetail" />
 
       <div class="box4"></div>
     </div>
   </div>
 </template>
 
-<script>
-import popupGoods from "@/components/m-buy/goods"; //购物车商品的模块
-import { getPointsGoodsDetail } from "@/api/promotions";
-export default {
-  components: {
-    popupGoods,
-  },
-  data() {
-    return {
-      style: {
-        img:"display:block"
-      },
-      maskFlag: false, //商品弹框
-      lightColor: this.$lightColor,
-      goodsData: {}, //积分商品中商品详情
-      pointDetail: {}, //积分商品详情
-      goodsDetail: {}, //商品详情
-      goodsSpec: {}, //商品规格
-      selectedGoods: {},
-    };
-  },
-  onLoad(options) {
-    this.routerVal = options;
-  },
-  onShow() {
-    this.init();
-  },
-  watch: {},
-  methods: {
-    // 购买积分商品
-    getGoodsDetail() {
-      uni.showLoading({
-        title: "加载中",
-        mask: true,
-      });
-      this.$refs.popupGoods.buy({
-        skuId: this.goodsData.id,
-        num: 1,
-        cartType: "POINTS",
-      });
-    },
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onLoad, onShow } from '@dcloudio/uni-app'
+import popupGoods from '@/components/m-buy/goods'
+import { getPointsGoodsDetail } from '@/api/promotions'
+import { unitPrice } from '@/utils/filters.js'
 
-    // 初始化商品
-    async init() {
-      // 获取商品
-      let res = await getPointsGoodsDetail(this.routerVal.id);
-      if (res.data.success) {
-        this.goodsData = res.data.result.goodsSku;
-        this.pointDetail = res.data.result;
-      }
-    },
+const style = ref({
+  img: 'display:block',
+})
 
-    closePopupBuy(val) {
-      this.maskFlag = val;
-    },
-  },
-};
+const maskFlag = ref(false)
+const goodsData = ref<any>({})
+const pointDetail = ref<any>({})
+const goodsSpec = ref<any>({})
+const routerVal = ref<Record<string, string>>({})
+
+const popupGoodsRef = ref<any>(null)
+
+onLoad((options) => {
+  routerVal.value = options || {}
+})
+
+onShow(() => {
+  init()
+})
+
+function getGoodsDetail() {
+  uni.showLoading({
+    title: '加载中',
+    mask: true,
+  })
+  popupGoodsRef.value?.buy({
+    skuId: goodsData.value.id,
+    num: 1,
+    cartType: 'POINTS',
+  })
+}
+
+async function init() {
+  const res = await getPointsGoodsDetail(routerVal.value.id)
+  if (res.data.success) {
+    goodsData.value = res.data.result.goodsSku
+    pointDetail.value = res.data.result
+  }
+}
+
+function closePopupBuy(val: boolean) {
+  maskFlag.value = val
+}
 </script>
 <style lang="scss">
 </style>
diff --git a/pages/promotion/point/pointList.vue b/pages/promotion/point/pointList.vue
index 3c88aab..63ec3f6 100644
--- a/pages/promotion/point/pointList.vue
+++ b/pages/promotion/point/pointList.vue
@@ -99,172 +99,168 @@
   </view>
 </template>
 
-<script>
-import { getPointsCategory, getPointsGoods } from "@/api/promotions.js";
-import userPoint from "./user";
-export default {
-  components: {
-    "user-point": userPoint,
-  },
-  data() {
-    return {
-      headOffSetTop: "0",
-      tabIndex: 0,
-      categoryIndexData: [
-        {
-          categoryId: 0,
-          name: "全部",
-          loadStatus: "more",
-          goods: [],
-          params: {
-            pageNumber: 1,
-            pageSize: 10,
-            pointsGoodsCategoryId: "",
-          },
-        },
-      ],
-      currentLeft: 0,
-      pageParams: {
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import {
+  onLoad,
+  onShow,
+  onPullDownRefresh,
+  onReachBottom,
+  onPageScroll,
+} from '@dcloudio/uni-app'
+import { getPointsCategory, getPointsGoods } from '@/api/promotions.js'
+import userPoint from './user.vue'
+import { unitPrice } from '@/utils/filters.js'
+
+interface CategoryTab {
+  categoryId: number | string
+  name: string
+  loadStatus: string
+  goods: any[]
+  params: {
+    pageNumber: number
+    pageSize: number
+    pointsGoodsCategoryId: number | string
+  }
+}
+
+function createDefaultCategory(): CategoryTab[] {
+  return [
+    {
+      categoryId: 0,
+      name: '全部',
+      loadStatus: 'more',
+      goods: [],
+      params: {
         pageNumber: 1,
         pageSize: 10,
-        pointsGoodsCategoryId: 0,
+        pointsGoodsCategoryId: '',
       },
-      flag: true,
-    };
-  },
-  onLoad() {},
-  async onPullDownRefresh() {
-    // #ifndef H5
-    this.categoryIndexData[this.tabIndex].goods = [];
-    this.categoryIndexData[this.tabIndex].params.pageNumber = 1;
-    this.categoryIndexData[this.tabIndex].loadStatus = "more";
-    this.loadGoods();
-    // #endif
-  },
-  // #ifndef H5
-  onPageScroll(e) {
-    if (e.scrollTop < -40 && this.flag) {
-      this.flag = false;
-      this.categoryIndexData[this.tabIndex].goods = [];
-      this.categoryIndexData[this.tabIndex].params.pageNumber = 1;
-      this.categoryIndexData[this.tabIndex].loadStatus = "more";
-      uni.startPullDownRefresh();
-      this.loadGoods();
-    }
-  },
-  // #endif
-  watch: {
-    tabIndex(val) {
-      if (
-        this.categoryIndexData[this.tabIndex].goods.length == 0 &&
-        this.categoryIndexData[this.tabIndex].params.pageNumber == 1
-      ) {
-        this.loadGoods();
-      }
     },
-  },
-  async onShow() {
-    //获取顶级分类
-    this.categoryIndexData = [
-      {
-        categoryId: 0,
-        name: "全部",
-        loadStatus: "more",
+  ]
+}
+
+const tabIndex = ref(0)
+const categoryIndexData = ref<CategoryTab[]>(createDefaultCategory())
+const currentLeft = ref(0)
+const flag = ref(true)
+
+onLoad(() => {})
+
+async function onPullDownRefreshHandler() {
+  // #ifndef H5
+  categoryIndexData.value[tabIndex.value].goods = []
+  categoryIndexData.value[tabIndex.value].params.pageNumber = 1
+  categoryIndexData.value[tabIndex.value].loadStatus = 'more'
+  loadGoods()
+  // #endif
+}
+
+onPullDownRefresh(onPullDownRefreshHandler)
+
+// #ifndef H5
+onPageScroll((e) => {
+  if (e.scrollTop < -40 && flag.value) {
+    flag.value = false
+    categoryIndexData.value[tabIndex.value].goods = []
+    categoryIndexData.value[tabIndex.value].params.pageNumber = 1
+    categoryIndexData.value[tabIndex.value].loadStatus = 'more'
+    uni.startPullDownRefresh()
+    loadGoods()
+  }
+})
+// #endif
+
+watch(tabIndex, () => {
+  if (
+    categoryIndexData.value[tabIndex.value].goods.length == 0 &&
+    categoryIndexData.value[tabIndex.value].params.pageNumber == 1
+  ) {
+    loadGoods()
+  }
+})
+
+onShow(async () => {
+  categoryIndexData.value = createDefaultCategory()
+
+  const response = await getPointsCategory()
+
+  if (response.data.success) {
+    const navData = response.data.result.records
+    navData.forEach((item: any) => {
+      categoryIndexData.value.push({
+        categoryId: item.id,
         goods: [],
+        loadStatus: 'more',
+        name: item.name,
         params: {
           pageNumber: 1,
           pageSize: 10,
-          pointsGoodsCategoryId: "",
+          pointsGoodsCategoryId: item.id,
         },
-      },
-    ];
+      })
+    })
+  }
 
-    let response = await getPointsCategory();
+  loadGoods()
+})
 
-    if (response.data.success) {
-      let navData = response.data.result.records;
-      navData.forEach((item) => {
-        this.categoryIndexData.push({
-          categoryId: item.id,
-          goods: [],
-          loadStatus: "more",
-          name: item.name,
-          params: {
-            pageNumber: 1,
-            pageSize: 10,
-            pointsGoodsCategoryId: item.id,
-          },
-        });
-      });
+function toGoods(item: any) {
+  uni.navigateTo({
+    url: `/pages/promotion/point/detail?id=${item.id}`,
+  })
+}
+
+async function loadGoods() {
+  const index = tabIndex.value
+
+  const response = await getPointsGoods(categoryIndexData.value[index].params)
+  if (response.data.success) {
+    categoryIndexData.value[index].goods.push(
+      ...response.data.result.records
+    )
+    if (response.data.result.records.length < 10) {
+      categoryIndexData.value[index].loadStatus = 'noMore'
     }
+    setTimeout(() => {
+      flag.value = true
+    }, 3000)
+  }
 
-    this.loadGoods();
-  },
-  methods: {
-    // 跳转
-    navigateTo(url) {
-      uni.navigateTo({
-        url,
-      });
-    },
-
-    toGoods(item) {
-      //跳转详情
-      uni.navigateTo({
-        url: `/pages/promotion/point/detail?id=${item.id}`,
-      });
-    },
-
-    async loadGoods() {
-      let index = this.tabIndex;
-
-      //获取商品数据
-      let response = await getPointsGoods(this.categoryIndexData[index].params);
-      if (response.data.success) {
-        this.categoryIndexData[index].goods.push(
-          ...response.data.result.records
-        );
-        if (response.data.result.records.length < 10) {
-          this.categoryIndexData[index].loadStatus = "noMore";
-        }
-        let _this = this;
-        setTimeout(function () {
-          _this.flag = true;
-        }, 3000);
-      }
-
-      // #ifndef H5
-      uni.stopPullDownRefresh();
-      // #endif
-    },
-    setCat(type) {
-      this.tabIndex = type;
-    },
-    ontabchange(e) {
-      this.tabIndex = e.detail.current;
-      if (e.detail.current > 3) {
-        this.currentLeft = (e.detail.current - 3) * 70;
-      } else {
-        this.currentLeft = 0;
-      }
-    },
-    loadMore() {
-      if (this.categoryIndexData[this.tabIndex].loadStatus !== "more") {
-        return;
-      }
-      this.categoryIndexData[this.tabIndex].params.pageNumber++;
-      this.loadGoods();
-    },
-  },
-  // #ifdef H5
-  onReachBottom() {
-    if (this.categoryIndexData[this.tabIndex].loadStatus !== 'more') {
-      return;
-    }
-    this.loadMore();
-  },
+  // #ifndef H5
+  uni.stopPullDownRefresh()
   // #endif
-};
+}
+
+function setCat(type: number) {
+  tabIndex.value = type
+}
+
+function ontabchange(e: any) {
+  tabIndex.value = e.detail.current
+  if (e.detail.current > 3) {
+    currentLeft.value = (e.detail.current - 3) * 70
+  } else {
+    currentLeft.value = 0
+  }
+}
+
+function loadMore() {
+  if (categoryIndexData.value[tabIndex.value].loadStatus !== 'more') {
+    return
+  }
+  categoryIndexData.value[tabIndex.value].params.pageNumber++
+  loadGoods()
+}
+
+// #ifdef H5
+onReachBottom(() => {
+  if (categoryIndexData.value[tabIndex.value].loadStatus !== 'more') {
+    return
+  }
+  loadMore()
+})
+// #endif
 </script>
 <style lang="scss" scoped>
 page {
diff --git a/pages/promotion/point/user.vue b/pages/promotion/point/user.vue
index 20040ff..fc3278e 100644
--- a/pages/promotion/point/user.vue
+++ b/pages/promotion/point/user.vue
@@ -10,26 +10,22 @@
     </div>
   </div>
 </template>
-<script>
-import { getUserInfo } from "@/api/members";
-export default {
-  data() {
-    return {
-      userInfo: {},
-    };
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    async init() {
-      let res = await getUserInfo();
-      if (res.data.success) {
-        this.userInfo = res.data.result;
-      }
-    },
-  },
-};
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { getUserInfo } from '@/api/members'
+
+const userInfo = ref<any>({})
+
+onMounted(() => {
+  init()
+})
+
+async function init() {
+  const res = await getUserInfo()
+  if (res.data.success) {
+    userInfo.value = res.data.result
+  }
+}
 </script>
 <style lang="scss" scoped>
 .user-point {
@@ -65,4 +61,4 @@ export default {
   font-weight: bold;
   text-align: center;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/pages/promotion/seckill.vue b/pages/promotion/seckill.vue
index 6fc3668..f42b5e5 100644
--- a/pages/promotion/seckill.vue
+++ b/pages/promotion/seckill.vue
@@ -38,128 +38,115 @@
 	</view>
 </template>
 
-<script>
-	import {
-		getSeckillTimeLine,
-		getSeckillTimeGoods
-	} from "@/api/promotions.js";
-	import Foundation from "@/utils/Foundation.js";
-	import goodsTemplate from '@/components/m-goods-list/promotion.vue'
-	export default {
-		components: {
-			goodsTemplate
-		},
-		data() {
-			return {
-				nav: 0, //默认选择第一个时间
-				timeLine: "", //获取几个点活动
-				resTime: 0, //当前时间
-				time: 0, //距离下一个活动的时间值
-				times: {}, //时间集合
-				onlyOne: "", //是否最后一个商品
-				goodsList: [], //商品集合
-				params: {
-					pageNumber: 1,
-					pageSize: 10,
-				},
-			};
-		},
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onShow, onUnload } from '@dcloudio/uni-app'
+import { getSeckillTimeLine, getSeckillTimeGoods } from '@/api/promotions.js'
+import Foundation from '@/utils/Foundation.js'
+import goodsTemplate from '@/components/m-goods-list/promotion.vue'
 
-		/**
-		 * 显示时间活动
-		 */
-		async onShow() {
-			await this.getTimeLine();
-			if (!this.timeLine) {
-				await uni.showToast({
-					icon: "none",
-					duration: 2000,
-					title: "今天没有活动，明天再来吧",
-				});
-			}
-			this._setTimeInterval = setInterval(() => {
-				if (this.time <= 0) {
-					clearInterval(this._setTimeInterval);
-					this.getGoodsList();
-					this.getTimeLine();
-				} else {
-					this.times = Foundation.countTimeDown(this.time);
-					this.time--;
-				}
-			}, 1000);
-		},
+const nav = ref(0)
+const timeLine = ref<any[]>([])
+const resTime = ref(0)
+const time = ref(0)
+const times = ref<any>({})
+const onlyOne = ref(false)
+const goodsList = ref<any[]>([])
+const diffTime = ref(0)
 
-		onUnload() {
-			this._setTimeInterval && clearInterval(this._setTimeInterval);
-		},
-		methods: {
-			back() {
-				uni.navigateBack({
-					delta: 1,
-					fail: () => {
-						uni.switchTab({
-							url: "/pages/tabbar/home/index",
-						});
-					},
-				});
-			},
-			/**
-			 * 获取时间线商品
-			 */
-			async getTimeLine() {
-				let res = await getSeckillTimeLine();
-				if (res.data.success && res.data.result.length > 0) {
-					let timeLine = res.data.result.sort(
-						(x, y) => Number(x.timeLine) - Number(y.timeLine)
-					);
-					this.timeLine = timeLine.slice(0, 5);
-					this.resTime = parseInt(new Date().getTime() / 1000);
-					this.onlyOne = res.data.result.length === 1;
-					this.diffTime = parseInt(new Date().getTime() / 1000) - this.resTime;
+const params = ref<{
+  pageNumber: number
+  pageSize: number
+  timeLine?: string | number
+}>({
+  pageNumber: 1,
+  pageSize: 10,
+})
 
-					this.time =
-						this.timeLine[this.nav].distanceStartTime ||
-						(this.timeLine[this.nav + 1] &&
-							this.timeLine[this.nav + 1].distanceStartTime) ||
-						Foundation.theNextDayTime() - this.diffTime;
-					this.times = Foundation.countTimeDown(this.time);
+let setTimeInterval: ReturnType<typeof setInterval> | null = null
 
-					this.getGoodsList();
-				}
-			},
+onShow(async () => {
+  await getTimeLine()
+  if (!timeLine.value.length) {
+    await uni.showToast({
+      icon: 'none',
+      duration: 2000,
+      title: '今天没有活动，明天再来吧',
+    })
+  }
+  setTimeInterval = setInterval(() => {
+    if (time.value <= 0) {
+      if (setTimeInterval) clearInterval(setTimeInterval)
+      getGoodsList()
+      getTimeLine()
+    } else {
+      times.value = Foundation.countTimeDown(time.value)
+      time.value--
+    }
+  }, 1000)
+})
 
-			/**
-			 * 获取商品集合
-			 */
-			async getGoodsList() {
-				this.params.timeLine = this.timeLine[this.nav].timeLine;
-				let res = await getSeckillTimeGoods(this.params.timeLine);
-				if (res.data.success && res.data.result.length != 0) {
-					this.goodsList = res.data.result;
-				} else {
-					this.goodsList = [];
-				}
-			},
+onUnload(() => {
+  if (setTimeInterval) clearInterval(setTimeInterval)
+})
 
+function back() {
+  uni.navigateBack({
+    delta: 1,
+    fail: () => {
+      uni.switchTab({
+        url: '/pages/tabbar/home/index',
+      })
+    },
+  })
+}
 
-			/**
-			 * 单击导航时间
-			 */
-			clickNavigateTime(type) {
-				this.nav = type;
-				this.goodsList = [];
-				this.diffTime = parseInt(new Date().getTime() / 1000) - this.resTime;
-				this.time =
-					this.timeLine[this.nav].distanceStartTime ||
-					(this.timeLine[this.nav + 1] &&
-						this.timeLine[this.nav + 1].distanceStartTime) ||
-					Foundation.theNextDayTime() - this.diffTime;
+async function getTimeLine() {
+  const res = await getSeckillTimeLine()
+  if (res.data.success && res.data.result.length > 0) {
+    const sorted = res.data.result.sort(
+      (x: any, y: any) => Number(x.timeLine) - Number(y.timeLine)
+    )
+    timeLine.value = sorted.slice(0, 5)
+    resTime.value = parseInt(String(new Date().getTime() / 1000))
+    onlyOne.value = res.data.result.length === 1
+    diffTime.value = parseInt(String(new Date().getTime() / 1000)) - resTime.value
 
-				this.times = Foundation.countTimeDown(this.time);
-				this.getGoodsList();
-			},
-		},
-	};
+    time.value =
+      timeLine.value[nav.value].distanceStartTime ||
+      (timeLine.value[nav.value + 1] &&
+        timeLine.value[nav.value + 1].distanceStartTime) ||
+      Foundation.theNextDayTime() - diffTime.value
+    times.value = Foundation.countTimeDown(time.value)
+
+    getGoodsList()
+  }
+}
+
+async function getGoodsList() {
+  if (!timeLine.value.length) return
+  params.value.timeLine = timeLine.value[nav.value].timeLine
+  const res = await getSeckillTimeGoods(params.value.timeLine)
+  if (res.data.success && res.data.result.length != 0) {
+    goodsList.value = res.data.result
+  } else {
+    goodsList.value = []
+  }
+}
+
+function clickNavigateTime(type: number) {
+  nav.value = type
+  goodsList.value = []
+  diffTime.value = parseInt(String(new Date().getTime() / 1000)) - resTime.value
+  time.value =
+    timeLine.value[nav.value].distanceStartTime ||
+    (timeLine.value[nav.value + 1] &&
+      timeLine.value[nav.value + 1].distanceStartTime) ||
+    Foundation.theNextDayTime() - diffTime.value
+
+  times.value = Foundation.countTimeDown(time.value)
+  getGoodsList()
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/tabbar/cart/cartList.vue b/pages/tabbar/cart/cartList.vue
index 89b084d..a4b56b8 100644
--- a/pages/tabbar/cart/cartList.vue
+++ b/pages/tabbar/cart/cartList.vue
@@ -30,9 +30,7 @@
               <u-checkbox usedAlone shape="circle" :active-color="lightColor" v-model:checked="item.checked"
                 :label-size="14" @change="(checked) => onStoreCheckChange(item, checked)"></u-checkbox>
             </view>
-            <text class="store-name wes" @click.stop="navigateToStore(item)">{{
-              item.storeName
-            }}</text>
+            <text class="store-name wes" @click.stop="navigateToStore(item)">{{ item.storeName }}</text>
           </view>
           <view class="right-col" v-if="item.canReceiveCoupon" @click="navigateToCoupon(item)">
             <div class="right-line"></div>
@@ -73,7 +71,6 @@
               <p class="sp-type" v-if="skuItem.goodsSku.salesModel == 'WHOLESALE'">批发商品</p>
               <p class="sp-number">
                 <view class="sp-price">
-                  <!-- <div class="default-color" :class="{'main-color':Object.keys(skuItem.promotionMap).length ==0  }"> -->
                   <div class="main-color">
                     ￥<span>{{ goodsFormatPrice(skuItem.goodsSku.price)[0] }}</span>
                     <span>.{{ goodsFormatPrice(skuItem.goodsSku.price)[1] }}</span>
@@ -83,7 +80,6 @@
                   <uni-number-box class="uNumber" :min="1" :max="999"  @change="numChange(skuItem)"	 v-model="skuItem.num"></uni-number-box>
                 </view>
                 <!-- 如果当有促销并且促销是 限时抢购 -->
-                <!-- promotions -->
                 <div class="promotions-list" v-if="Object.keys(skuItem.promotionMap).length != 0"
                 >
                   <div class="promotions-item-seckill" v-if="getPromotion(skuItem).includes('SECKILL')">
@@ -93,13 +89,6 @@
                   </div>
                 </div>
 
-                <!-- 此处先隐藏 对于预估到手价来说 前端无法真正的计算出来，光靠促销模式进行展示可能有些不妥。所以暂且隐藏 -->
-                <!-- 如果有活动 并且是选中的状态,显示预估到手价格 -->
-                <!-- <div class="priceDetail-flowPrice" :class="{'main-color':skuItem.priceDetailDTO}"
-                  v-if="skuItem.priceDetailDTO && skuItem.invalid == 0  && Object.keys(skuItem.promotionMap).length != 0 && skuItem.checked && skuItem.checked">
-                  预估到手价 ￥<span>{{ goodsFormatPrice(skuItem.priceDetailDTO.flowPrice)[0]}}</span>
-                  <span>.{{ goodsFormatPrice(skuItem.priceDetailDTO.flowPrice)[1] }} </span>
-                </div> -->
                 <div style='margin-left: 20rpx;' v-if="!skuItem.checked && skuItem.errorMessage">
                   {{skuItem.errorMessage}}
                 </div>
@@ -171,401 +160,390 @@
     <u-toast ref="uToast" />
   </div>
 </template>
-<script>
-import * as API_Trade from "@/api/trade";
-import { debounce } from "@/utils/tools.js";
+<script setup lang="ts">
+import { ref, reactive, computed, onMounted } from 'vue'
+import { onShow, onPullDownRefresh } from '@dcloudio/uni-app'
+import * as API_Trade from '@/api/trade'
+import { debounce } from '@/utils/tools.js'
 import uniNumberBox from '@/components/uni-number-box'
-import config from "@/config/config";
-export default {
-  components:{uniNumberBox}, // 数量加减组件
-  data() {
-    return {
-      loading:false,
-      lightColor: this.$lightColor,
-      discountDetailsFlag: false, //优惠明细开关
-      // 商品栏右侧滑动按钮
-      options: [
-        {
-          text: "删除",
-          style: {
-            backgroundColor: this.$lightColor, //高亮颜色
-          },
-        },
-      ],
-      isInvalid(val) {
-        //是否无效商品/没库存商品
-        if (val.invalid == 1 || (!val.checked && val.errorMessage)) {
-          return true;
-        } else {
-          return false;
-        }
-      },
-      deleteShow: false, //右滑删除
-      deleteContent: "删除该商品？", //删除显示的信息
-      cartDetail: "", //购物车详情
-      goodsVal: "", //单个商品详情
-      isEdit: false, // 是否是编辑
-      checkout: false, //全选按钮
-      WEIXIN_num: "", //购物车兼容微信步进器
-      defaultGoodsImage: config.logo,
-      capsuleInsetRight: 0,
-    };
-  },
+import config from '@/config/config'
+import { useStore } from '@/store'
+import { unitPrice, goodsFormatPrice, isLogin, forceLogin } from '@/utils/filters.js'
 
-  computed: {
-    cartNavbarStyle() {
-      if (!this.capsuleInsetRight) {
-        return {};
-      }
-      return {
-        "--cart-capsule-inset": `${this.capsuleInsetRight}px`,
-      };
+const store = useStore()
+const uToast = ref()
+const swiperAction = ref()
+
+const lightColor = computed(() => store.getters.lightColor)
+const loading = ref(false)
+const discountDetailsFlag = ref(false)
+// 商品栏右侧滑动按钮
+const options = [
+  {
+    text: "删除",
+    style: {
+      backgroundColor: store.getters.lightColor,
     },
   },
+]
+const isInvalid = (val: any): boolean => {
+  if (!val) return false
+  if (val.invalid == 1 || (!val.checked && val.errorMessage)) {
+    return true
+  } else {
+    return false
+  }
+}
+const deleteShow = ref(false)
+const deleteContent = "删除该商品？"
+const cartDetail = ref<any>("")
+const goodsVal = ref<any>("")
+const isEdit = ref(false)
+const checkout = ref(false)
+const WEIXIN_num = ref("")
+const defaultGoodsImage = config.logo
+const capsuleInsetRight = ref(0)
 
-  mounted() {
-    this.setCapsuleInset();
-    // #ifdef MP-WEIXIN
-    // 小程序默认分享
-    uni.showShareMenu({ withShareTicket: true });
-    // #endif
-  },
-  onPullDownRefresh(){
-    this.getCardData();
-  },
-  /**
-   * 初始化信息
-   */
-  onShow() {
-    this.deleteShow ? (this.deleteShow = false) : true;
-    if (this.$refs.swiperAction) {
-      this.$refs.swiperAction.forEach((item, index) => {
-        item.show = false;
-      });
+const cartNavbarStyle = computed(() => {
+  if (!capsuleInsetRight.value) {
+    return {}
+  }
+  return {
+    "--cart-capsule-inset": `${capsuleInsetRight.value}px`,
+  }
+})
 
-      this.getCardData();
-    } else {
-      this.getCardData();
+onMounted(() => {
+  setCapsuleInset()
+  // #ifdef MP-WEIXIN
+  uni.showShareMenu({ withShareTicket: true })
+  // #endif
+})
+
+onPullDownRefresh(() => {
+  getCardData()
+})
+
+onShow(() => {
+  deleteShow.value ? (deleteShow.value = false) : true
+  if (swiperAction.value) {
+    (swiperAction.value as any[]).forEach((item: any) => {
+      item.show = false
+    })
+    getCardData()
+  } else {
+    getCardData()
+  }
+})
+
+function setCapsuleInset() {
+  // #ifdef MP-WEIXIN
+  try {
+    const menuButton = uni.getMenuButtonBoundingClientRect()
+    const { windowWidth } = uni.getWindowInfo()
+    capsuleInsetRight.value = windowWidth - menuButton.left + uni.upx2px(8)
+  } catch (e) {
+    capsuleInsetRight.value = 90
+  }
+  // #endif
+}
+
+function toggleEdit() {
+  isEdit.value = !isEdit.value
+}
+
+function getSkuThumbnail(url: any) {
+  if (url && /^(https?:)?\/\//.test(String(url))) {
+    return url
+  }
+  return defaultGoodsImage
+}
+
+/**
+ * 倒数计时
+ */
+function getCountDownTime(val: any) {
+  if (val.promotionMap) {
+    let key = Object.keys(val.promotionMap).find((child: string) => {
+      return child.split("-")[0] == 'SECKILL'
+    })
+    return val.promotionMap[key].endTime / 1000 - (new Date().getTime() / 1000)
+  }
+}
+
+/**
+ * 优惠明细开关
+ */
+function discountDetails() {
+  discountDetailsFlag.value = true
+}
+/**
+ * 左滑打开删除
+ */
+function openAction(skuItem: any) {
+  cartDetail.value.cartList.forEach((cartItem: any) => {
+    if (cartItem.skuList) {
+      cartItem.skuList.forEach((sku: any) => {
+        sku["selected"] = false
+      })
     }
-  },
-  methods: {
-    setCapsuleInset() {
-      // #ifdef MP-WEIXIN
-      try {
-        const menuButton = uni.getMenuButtonBoundingClientRect();
-        const { windowWidth } = uni.getWindowInfo();
-        this.capsuleInsetRight = windowWidth - menuButton.left + uni.upx2px(8);
-      } catch (e) {
-        this.capsuleInsetRight = 90;
-      }
-      // #endif
-    },
+  })
+  skuItem["selected"] = true
+}
 
-    toggleEdit() {
-      this.isEdit = !this.isEdit;
-    },
+/**
+ * 滑动删除
+ */
+function changeActionTab(val: any) {
+  deleteShow.value = true
+  goodsVal.value = val
+}
 
-    getSkuThumbnail(url) {
-      if (url && /^(https?:)?\/\//.test(String(url))) {
-        return url;
-      }
-      return this.defaultGoodsImage;
-    },
+/**
+ * 点击删除
+ */
+function deleteConfirm() {
+  API_Trade.deleteSkuItem(goodsVal.value.goodsSku.id).then((res: any) => {
+    if (res.statusCode == 200) {
+      uni.showToast({
+        title: "此商品删除成功",
+        duration: 2000,
+      })
+      deleteShow.value = false
+      getCardData()
+    }
+  })
+}
 
-    /**
-			 * 倒数计时
-			 */
-    getCountDownTime(val) {
-      if (val.promotionMap) {
-        let key = Object.keys(val.promotionMap).find((child, index) => {
-          return child.split("-")[0] == 'SECKILL'
-        });
-        return val.promotionMap[key].endTime / 1000 - (new Date().getTime() / 1000)
-      }
-    },
-
-    /**
-     * 优惠明细开关
-     */
-    discountDetails() {
-      this.discountDetailsFlag = true;
-    },
-    /**
-     * 左滑打开删除
-     */
-    openAction(skuItem) {
-      /**循环父级有多少个店铺 */
-      this.cartDetail.cartList.forEach((cartItem) => {
-        if (cartItem.skuList) {
-          cartItem.skuList.forEach((sku) => {
-            sku["selected"] = false;
-          });
+/**
+ * 删除商品
+ */
+function deleteGoods() {
+  if (whetherChecked()) {
+    var delGoodsData: any[] = []
+    cartDetail.value.cartList.forEach((item: any) => {
+      item.skuList.forEach((goodsItem: any) => {
+        if (goodsItem.checked) {
+          delGoodsData.push(goodsItem.goodsSku.id)
         }
-      });
-      skuItem["selected"] = true;
-    },
-
-    /**
-     * 滑动删除
-     */
-    changeActionTab(val) {
-      this.deleteShow = true;
-      this.goodsVal = val;
-    },
-
-    /**
-     * 点击删除
-     */
-    deleteConfirm() {
-      API_Trade.deleteSkuItem(this.goodsVal.goodsSku.id).then((res) => {
-        if (res.statusCode == 200) {
+      })
+    })
+    if (delGoodsData && delGoodsData.length > 0) {
+      API_Trade.deleteSkuItem(delGoodsData).then((res: any) => {
+        if (res.data.success) {
           uni.showToast({
-            title: "此商品删除成功",
-            duration: 2000,
-          });
-          this.deleteShow = false;
-          this.getCardData();
-        }
-      });
-    },
-
-    /**
-     * 删除商品
-     */
-    deleteGoods() {
-      if (this.whetherChecked()) {
-        var delGoodsData = [];
-        this.cartDetail.cartList.forEach((item) => {
-          item.skuList.forEach((goodsItem) => {
-            if (goodsItem.checked) {
-              delGoodsData.push(goodsItem.goodsSku.id);
-            }
-          });
-        });
-        if (delGoodsData && delGoodsData.length > 0) {
-          // 执行删除
-          API_Trade.deleteSkuItem(delGoodsData).then((res) => {
-            if (res.data.success) {
-              uni.showToast({
-                title: "删除成功!",
-                icon: "none",
-              });
-              this.getCardData();
-            }
-          });
-        } else {
-          uni.showToast({
-            title: "请选择删除商品，如果商品失效，请左滑无效商品删除",
+            title: "删除成功!",
             icon: "none",
-          });
-        }
-      }
-    },
-
-    /**
-     * 跳转到店铺
-     */
-    navigateToStore(val) {
-      uni.navigateTo({
-        url: "/pages/product/shopPage?id=" + val.storeId,
-      });
-    },
-
-    /**
-     * 跳转到优惠券
-     */
-    navigateToCoupon(val) {
-      uni.navigateTo({
-        url: "/pages/cart/coupon/couponCenter?storeId=" + val.storeId,
-      });
-    },
-
-    /**
-     * 跳转到商品
-     */
-    navigateToGoods(val) {
-      uni.navigateTo({
-        url:
-          "/pages/product/goods?id=" +
-          val.goodsSku.id +
-          "&goodsId=" +
-          val.goodsSku.goodsId,
-      });
-    },
-
-    /**
-     * 点击步进器回调
-     */
-     numChange: debounce(function (val) {
-      this.updateSkuNumFun(val.goodsSku.id, val.num);
-    }, 1000),
-    /**
-     * 去结算
-     */
-    submitOrder() {
-      if (this.whetherChecked()) {
-        this.navigateTo("/pages/order/fillorder?way=CART");
-      }
-    },
-
-    /**
-     * 验证是否选中商品
-     */
-    whetherChecked() {
-    this.forceLogin()
-
-      let canBuy = false;
-      this.cartDetail.cartList.forEach((item) => {
-        if (item.checked) {
-          canBuy = true;
-        } else {
-          item.skuList.forEach((skuItem) => {
-            if (skuItem.checked) {
-              canBuy = true;
-            }
-          });
-        }
-      });
-      if (!canBuy) {
-        uni.showToast({
-          title: "您还没有选择商品",
-          duration: 2000,
-          icon: "none",
-        });
-        return false;
-      } else {
-        return true;
-      }
-    },
-
-    /**
-     * 跳转
-     */
-    navigateTo(url) {
-      uni.navigateTo({
-        url,
-      });
-    },
-
-    /**
-     * 全选
-     */
-    checkOut(checked) {
-      const selected = typeof checked === "boolean" ? checked : this.checkout;
-      API_Trade.checkAll(selected).then((result) => {
-        if (result.data.success) {
-          this.getCardData();
-        }
-      });
-    },
-
-    /**
-     * 获取店铺选中信息
-     */
-    checkStoreFun(skuId, num) {
-      API_Trade.checkStore(skuId, num).then((result) => {
-        if (result.data.success) {
-          this.getCardData();
-        }
-      });
-    },
-
-    onStoreCheckChange(storeItem, checked) {
-      this.checkStoreFun(storeItem.storeId, checked);
-    },
-
-    onSkuCheckChange(skuItem, checked) {
-      this.updateSkuCheckedFun(skuItem.goodsSku.id, checked);
-    },
-
-    /**
-     * 获取购物车选中信息
-     */
-    updateSkuCheckedFun(skuId, num) {
-      API_Trade.updateSkuChecked(skuId, num).then((result) => {
-        if (result.data.success) {
-          this.getCardData();
-        }
-      });
-    },
-
-    /**
-     * 更新商品购物车数量
-     */
-    updateSkuNumFun(skuId, num) {
-      API_Trade.updateSkuNum(skuId, num).then((result) => {
-        if (result.statusCode == 200) {
-          this.getCardData();
-        } else {
-          let _this = this;
-          setTimeout(() => {
-            _this.getCardData();
-          }, 1000);
-        }
-      });
-    },
-
-    // 数据去重一下
-    getPromotion(item) {
-        return Object.keys(item.promotionMap).map((child) => {
-          return child.split("-")[0]
-        });
-    },
-
-    /**
-     * 获取购物车数据
-     */
-    getCardData() {
-      if (this.isLogin("auth")) {
-        uni.showLoading({
-          title: "加载中",
-        });
-        API_Trade.getCarts()
-          .then((result) => {
-            this.loading = false;
-            uni.stopPullDownRefresh();
-            if (result.data.success) {
-              this.cartDetail = result.data.result;
-              let checkOuted = true;
-              for (let i = 0; i < this.cartDetail.cartList.length; i++) {
-                let item = this.cartDetail.cartList[i];
-                item.checked = item.checked == 1;
-                // 循环出当前商品是否全选
-                if (!item.checked) {
-                  checkOuted = false;
-                }
-                // 如果有拼团活动顺便删除
-                item.skuList &&
-                  item.skuList.forEach((sku) => {
-                    sku.checked = sku.checked == 1;
-                    if (!sku.checked) {
-                      checkOuted = false;
-                    }
-                    if(Object.keys(sku.promotionMap).length != 0)
-                    {
-                      Object.keys(sku.promotionMap).forEach((pro, proIndex) => {
-                        pro = pro.split('-')[0]
-                        if (pro == "PINTUAN" ) {
-                           Object.keys(sku.promotionMap).splice(proIndex, 1);
-                        }
-                      });
-                    }
-
-                  });
-              }
-              this.checkout = checkOuted;
-              uni.stopPullDownRefresh();
-            }
           })
-          .catch((err) => {this.loading = false;});
-         if (this.$store.state.isShowToast){ uni.hideLoading() };
-      } else {
-         if (this.$store.state.isShowToast){ uni.hideLoading() };
-      }
-    },
+          getCardData()
+        }
+      })
+    } else {
+      uni.showToast({
+        title: "请选择删除商品，如果商品失效，请左滑无效商品删除",
+        icon: "none",
+      })
+    }
+  }
+}
 
-  },
-};
+/**
+ * 跳转到店铺
+ */
+function navigateToStore(val: any) {
+  uni.navigateTo({
+    url: "/pages/product/shopPage?id=" + val.storeId,
+  })
+}
+
+/**
+ * 跳转到优惠券
+ */
+function navigateToCoupon(val: any) {
+  uni.navigateTo({
+    url: "/pages/cart/coupon/couponCenter?storeId=" + val.storeId,
+  })
+}
+
+/**
+ * 跳转到商品
+ */
+function navigateToGoods(val: any) {
+  uni.navigateTo({
+    url:
+      "/pages/product/goods?id=" +
+      val.goodsSku.id +
+      "&goodsId=" +
+      val.goodsSku.goodsId,
+  })
+}
+
+/**
+ * 点击步进器回调
+ */
+const numChange = debounce(function (val: any) {
+  updateSkuNumFun(val.goodsSku.id, val.num)
+}, 1000)
+/**
+ * 去结算
+ */
+function submitOrder() {
+  if (whetherChecked()) {
+    navigateTo("/pages/order/fillorder?way=CART")
+  }
+}
+
+/**
+ * 验证是否选中商品
+ */
+function whetherChecked(): boolean {
+  forceLogin()
+
+  let canBuy = false
+  cartDetail.value.cartList.forEach((item: any) => {
+    if (item.checked) {
+      canBuy = true
+    } else {
+      item.skuList.forEach((skuItem: any) => {
+        if (skuItem.checked) {
+          canBuy = true
+        }
+      })
+    }
+  })
+  if (!canBuy) {
+    uni.showToast({
+      title: "您还没有选择商品",
+      duration: 2000,
+      icon: "none",
+    })
+    return false
+  } else {
+    return true
+  }
+}
+
+/**
+ * 跳转
+ */
+function navigateTo(url: string) {
+  uni.navigateTo({
+    url,
+  })
+}
+
+/**
+ * 全选
+ */
+function checkOut(checked?: boolean) {
+  const selected = typeof checked === "boolean" ? checked : checkout.value
+  API_Trade.checkAll(selected).then((result: any) => {
+    if (result.data.success) {
+      getCardData()
+    }
+  })
+}
+
+/**
+ * 获取店铺选中信息
+ */
+function checkStoreFun(skuId: any, num: any) {
+  API_Trade.checkStore(skuId, num).then((result: any) => {
+    if (result.data.success) {
+      getCardData()
+    }
+  })
+}
+
+function onStoreCheckChange(storeItem: any, checked: any) {
+  checkStoreFun(storeItem.storeId, checked)
+}
+
+function onSkuCheckChange(skuItem: any, checked: any) {
+  updateSkuCheckedFun(skuItem.goodsSku.id, checked)
+}
+
+/**
+ * 获取购物车选中信息
+ */
+function updateSkuCheckedFun(skuId: any, num: any) {
+  API_Trade.updateSkuChecked(skuId, num).then((result: any) => {
+    if (result.data.success) {
+      getCardData()
+    }
+  })
+}
+
+/**
+ * 更新商品购物车数量
+ */
+function updateSkuNumFun(skuId: any, num: any) {
+  API_Trade.updateSkuNum(skuId, num).then((result: any) => {
+    if (result.statusCode == 200) {
+      getCardData()
+    } else {
+      setTimeout(() => {
+        getCardData()
+      }, 1000)
+    }
+  })
+}
+
+// 数据去重一下
+function getPromotion(item: any) {
+  return Object.keys(item.promotionMap).map((child: string) => {
+    return child.split("-")[0]
+  })
+}
+
+/**
+ * 获取购物车数据
+ */
+function getCardData() {
+  if (isLogin("auth")) {
+    uni.showLoading({
+      title: "加载中",
+    })
+    API_Trade.getCarts()
+      .then((result: any) => {
+        loading.value = false
+        uni.stopPullDownRefresh()
+        if (result.data.success) {
+          cartDetail.value = result.data.result
+          let checkOuted = true
+          for (let i = 0; i < cartDetail.value.cartList.length; i++) {
+            let item = cartDetail.value.cartList[i]
+            item.checked = item.checked == 1
+            if (!item.checked) {
+              checkOuted = false
+            }
+            item.skuList &&
+              item.skuList.forEach((sku: any) => {
+                sku.checked = sku.checked == 1
+                if (!sku.checked) {
+                  checkOuted = false
+                }
+                if(Object.keys(sku.promotionMap).length != 0)
+                {
+                  Object.keys(sku.promotionMap).forEach((pro: string, proIndex: number) => {
+                    pro = pro.split('-')[0]
+                    if (pro == "PINTUAN" ) {
+                       Object.keys(sku.promotionMap).splice(proIndex, 1);
+                    }
+                  })
+                }
+              })
+          }
+          checkout.value = checkOuted
+          uni.stopPullDownRefresh()
+        }
+      })
+      .catch(() => { loading.value = false })
+     if (store.state.isShowToast){ uni.hideLoading() }
+  } else {
+     if (store.state.isShowToast){ uni.hideLoading() }
+  }
+}
 </script>
 
 <style lang="scss">
diff --git a/pages/tabbar/category/category.vue b/pages/tabbar/category/category.vue
index d745930..c4b251d 100644
--- a/pages/tabbar/category/category.vue
+++ b/pages/tabbar/category/category.vue
@@ -56,106 +56,111 @@
   </view>
 </template>
 
-<script>
-import { getCategoryList } from "@/api/goods.js";
-export default {
-  data() {
-    return {
-      currentId: 0,
-      tabList: [], //左侧标题列表
-      categoryList: [], //右侧分类数据列表
-      topImg: "", //顶部图片
-      searchBarWidth: 0, //导航栏搜索框宽度（避让微信胶囊）
-    };
-  },
-  computed: {
-    searchBarStyle() {
-      if (this.searchBarWidth) {
-        return { width: `${this.searchBarWidth}px` };
-      }
-      return { width: "460rpx" };
-    },
-  },
-  onLoad() {
-    this.loadData();
-    // #ifdef MP-WEIXIN
-    // 小程序默认分享
-    uni.showShareMenu({ withShareTicket: true });
-    // #endif
-  },
-  onReady() {
-    this.setSearchBarWidth();
-  },
-  methods: {
-    /**
-     * 根据微信胶囊位置计算搜索框宽度，避免被胶囊遮挡
-     */
-    setSearchBarWidth() {
-      // #ifdef MP-WEIXIN
-      try {
-        const menuButton = uni.getMenuButtonBoundingClientRect();
-        const { windowWidth } = uni.getWindowInfo();
-        const capsuleInsetRight = windowWidth - menuButton.left;
-        const titleWidth = uni.upx2px(160); // “商品分类” 标题宽度
-        const leftPadding = uni.upx2px(60); // 左侧内边距
-        const gap = uni.upx2px(20); // 搜索框与胶囊间距
-        this.searchBarWidth =
-          windowWidth - capsuleInsetRight - titleWidth - leftPadding - gap;
-      } catch (e) {
-        this.searchBarWidth = 180;
-      }
-      // #endif
-    },
-    /**
-     * 查询
-     */
-    search() {
-      uni.navigateTo({
-        url: "/pages/navigation/search/searchPage",
-      });
-    },
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { onLoad, onReady } from '@dcloudio/uni-app'
+import { getCategoryList } from '@/api/goods.js'
+import { getThemeStyle } from '@/utils/theme'
+import { useStore } from '@/store'
 
-    /**
-     * 加载图片
-     */
-    async loadData() {
-      let list = await getCategoryList(0);
-      this.tabList = list.data.result;
-      this.currentId = list.data.result[0].id;
-      this.loadListContent(0);
-    },
+const store = useStore()
 
-    /**
-     * 加载列表内容
-     */
-    loadListContent(index) {
-      this.topImg = this.tabList[index];
-      this.categoryList = this.tabList[index].children;
-    },
-    /**
-     * 一级分类点击
-     */
-    tabtap(item, i) {
-      if (item.id != this.currentId) {
-        this.currentId = item.id;
-        this.loadListContent(i);
-      }
-    },
+const currentId = ref(0)
+const tabList = ref<any[]>([]) // 左侧标题列表
+const categoryList = ref<any[]>([]) // 右侧分类数据列表
+const topImg = ref<any>("") // 顶部图片
+const searchBarWidth = ref(0) // 导航栏搜索框宽度（避让微信胶囊）
 
-    navigateToList(sid, tid) {
-      uni.navigateTo({
-        url: `/pages/navigation/search/searchPage?category=${tid}`,
-      });
-    },
-  },
-};
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
+
+const searchBarStyle = computed(() => {
+  if (searchBarWidth.value) {
+    return { width: `${searchBarWidth.value}px` }
+  }
+  return { width: "460rpx" }
+})
+
+onLoad(() => {
+  loadData()
+  // #ifdef MP-WEIXIN
+  uni.showShareMenu({ withShareTicket: true })
+  // #endif
+})
+
+onReady(() => {
+  setSearchBarWidth()
+})
+
+/**
+ * 根据微信胶囊位置计算搜索框宽度，避免被胶囊遮挡
+ */
+function setSearchBarWidth() {
+  // #ifdef MP-WEIXIN
+  try {
+    const menuButton = uni.getMenuButtonBoundingClientRect()
+    const { windowWidth } = uni.getWindowInfo()
+    const capsuleInsetRight = windowWidth - menuButton.left
+    const titleWidth = uni.upx2px(160) // "商品分类" 标题宽度
+    const leftPadding = uni.upx2px(60) // 左侧内边距
+    const gap = uni.upx2px(20) // 搜索框与胶囊间距
+    searchBarWidth.value =
+      windowWidth - capsuleInsetRight - titleWidth - leftPadding - gap
+  } catch (e) {
+    searchBarWidth.value = 180
+  }
+  // #endif
+}
+/**
+ * 查询
+ */
+function search() {
+  uni.navigateTo({
+    url: "/pages/navigation/search/searchPage",
+  })
+}
+
+/**
+ * 加载图片
+ */
+async function loadData() {
+  let list = await getCategoryList(0)
+  tabList.value = list.data.result
+  currentId.value = list.data.result[0].id
+  loadListContent(0)
+}
+
+/**
+ * 加载列表内容
+ */
+function loadListContent(index: number) {
+  topImg.value = tabList.value[index]
+  categoryList.value = tabList.value[index].children
+}
+/**
+ * 一级分类点击
+ */
+function tabtap(item: any, i: number) {
+  if (item.id != currentId.value) {
+    currentId.value = item.id
+    loadListContent(i)
+  }
+}
+
+function navigateToList(sid: any, tid: any) {
+  uni.navigateTo({
+    url: `/pages/navigation/search/searchPage?category=${tid}`,
+  })
+}
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 page {
   height: 100%;
   background-color: #fdfaff;
 }
+</style>
+
+<style lang="scss" scoped>
 /* 解决小程序和app滚动条的问题 */
 /* #ifdef MP-WEIXIN || APP-PLUS */
 ::-webkit-scrollbar {
@@ -190,22 +195,27 @@ uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
   white-space: nowrap;
 }
 .category-wrap {
-  height: 100%;
+  height: 100vh;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
+  box-sizing: border-box;
   .content {
     flex: 1;
     min-height: 0;
+    height: 0;
     display: flex;
     color: #333;
     font-size: 28rpx;
     background: #fff;
+    overflow: hidden;
   }
   .left-aside {
     flex-shrink: 0;
     width: 200rpx;
     height: 100%;
     background-color: #f7f7f7;
+    box-sizing: border-box;
   }
   .f-item {
     display: flex;
@@ -222,8 +232,11 @@ uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
   }
   .right-aside {
     flex: 1;
+    height: 100%;
+    min-height: 0;
     overflow: hidden;
     padding: 40rpx 0 0 30rpx;
+    box-sizing: border-box;
   }
 
   .top-img {
diff --git a/pages/tabbar/home/index.vue b/pages/tabbar/home/index.vue
index f97b612..dac7ae3 100644
--- a/pages/tabbar/home/index.vue
+++ b/pages/tabbar/home/index.vue
@@ -1,43 +1,208 @@
 <template>
-  <div class="wrapper" :style="themeStyle">
-    <!-- 楼层装修组件 -->
-    <tpl ref="tpl" />
-  </div>
+  <view class="home-page" :style="themeStyle">
+    <view
+      v-for="(item, index) in pageData.list"
+      :key="`${item.type}-${index}`"
+      class="floor-block"
+    >
+      <u-navbar
+        class="navbar"
+        v-if="item.type == 'search'"
+        :auto-back="false"
+        :fixed="index === 1 ? false : true"
+        :placeholder="index === 1 ? false : true"
+        left-icon=""
+        title=""
+        bg-color="#ffffff"
+      >
+        <template #left>
+          <view class="navbar-search-wrap" :style="searchBarStyle" @click.stop>
+            <search :res="item.options" />
+          </view>
+        </template>
+      </u-navbar>
+      <carousel v-if="item.type == 'carousel'" :res="item.options" />
+      <titleLayout v-if="item.type == 'title'" :res="item.options" />
+      <leftOneRightTwo v-if="item.type == 'leftOneRightTwo'" :res="item.options" />
+      <leftTwoRightOne v-if="item.type == 'leftTwoRightOne'" :res="item.options" />
+      <topOneBottomTwo v-if="item.type == 'topOneBottomTwo'" :res="item.options" />
+      <topTwoBottomOne v-if="item.type == 'topTwoBottomOne'" :res="item.options" />
+      <flexThree v-if="item.type == 'flexThree'" :res="item.options" />
+      <flexFive v-if="item.type == 'flexFive'" :res="item.options" />
+      <flexFour v-if="item.type == 'flexFour'" :res="item.options" />
+      <flexTwo v-if="item.type == 'flexTwo'" :res="item.options" />
+      <textPicture v-if="item.type == 'textPicture'" :res="item.options" />
+      <menuLayout v-if="item.type == 'menu'" :res="item.options" />
+      <flexOne v-if="item.type == 'flexOne'" :res="item.options" />
+      <goods
+        v-if="item.type == 'goods'"
+        :enableBottomLoad="enableLoad"
+        :res="item.options"
+      />
+      <group v-if="item.type == 'group'" :res="item.options" />
+      <notice v-if="item.type == 'notice'" :res="item.options" />
+      <promotions v-if="item.type == 'promotionDetail'" :res="item.options" />
+      <videoLayout v-if="item.type == 'video'" :res="item.options" />
+    </view>
+    <fetchCoupon ref="couponRef" />
+  </view>
 </template>
-<script>
-import tpl from "@/pages/tabbar/home/views.vue";
 
-export default {
-  data() {
-    return {
-      background: {
-        backgroundColor: "#fff",
-      },
-    };
-  },
-  onShow(){
-    setTimeout(()=>{
-      this.$refs.tpl.fetchCoupon();
-    },1000)
-  },
-  methods: {
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import {
+  onShow,
+  onReady,
+  onReachBottom,
+  onPullDownRefresh,
+} from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import { getThemeStyle } from '@/utils/theme'
+import carousel from '@/pages/tabbar/home/template/tpl_banner.vue'
+import titleLayout from '@/pages/tabbar/home/template/tpl_title.vue'
+import leftOneRightTwo from '@/pages/tabbar/home/template/tpl_left_one_right_two.vue'
+import leftTwoRightOne from '@/pages/tabbar/home/template/tpl_left_two_right_one.vue'
+import topOneBottomTwo from '@/pages/tabbar/home/template/tpl_top_one_bottom_two.vue'
+import topTwoBottomOne from '@/pages/tabbar/home/template/tpl_top_two_bottom_one.vue'
+import flexOne from '@/pages/tabbar/home/template/tpl_flex_one.vue'
+import flexTwo from '@/pages/tabbar/home/template/tpl_flex_two.vue'
+import flexThree from '@/pages/tabbar/home/template/tpl_flex_three.vue'
+import flexFive from '@/pages/tabbar/home/template/tpl_flex_five.vue'
+import flexFour from '@/pages/tabbar/home/template/tpl_flex_four.vue'
+import textPicture from '@/pages/tabbar/home/template/tpl_text_picture.vue'
+import menuLayout from '@/pages/tabbar/home/template/tpl_menu.vue'
+import search from '@/pages/tabbar/home/template/tpl_search.vue'
+import group from '@/pages/tabbar/home/template/tpl_group.vue'
+import videoLayout from '@/pages/tabbar/home/template/tpl_video.vue'
+import goods from '@/pages/tabbar/home/template/tpl_goods.vue'
+import notice from '@/pages/tabbar/home/template/tpl_notice.vue'
+import promotions from '@/pages/tabbar/home/template/tpl_promotions_detail.vue'
+import fetchCoupon from '@/pages/tabbar/home/template/fetch_coupon.vue'
+import { getFloorData } from '@/api/home'
 
-  },
-  onReachBottom(){
-    // 给子级监听触底加载
-    uni.$emit('onReachBottom',true)
-  },
-  
-  onPullDownRefresh() {
-    this.$refs.tpl.init();
+const HOME_LAYOUT_PADDING_RPX = 16
 
-    uni.stopPullDownRefresh();
-  },
-  components: {
-    tpl,
-  },
-};
+const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
+
+const couponRef = ref<InstanceType<typeof fetchCoupon>>()
+const pageData = ref<{ list: any[] }>({ list: [] })
+const enableLoad = ref(false)
+const loading = ref(false)
+const searchBarWidth = ref(0)
+
+const searchBarStyle = computed(() => {
+  if (searchBarWidth.value) {
+    return { width: `${searchBarWidth.value}px` }
+  }
+  return { width: '100%' }
+})
+
+function setCapsuleInset() {
+  try {
+    const { windowWidth } = uni.getWindowInfo()
+    const leftPadding = uni.upx2px(HOME_LAYOUT_PADDING_RPX)
+    const rightPadding = uni.upx2px(HOME_LAYOUT_PADDING_RPX)
+    // #ifdef MP-WEIXIN
+    const menuButton = uni.getMenuButtonBoundingClientRect()
+    searchBarWidth.value = windowWidth - (windowWidth - menuButton.left) - leftPadding
+    // #endif
+    // #ifndef MP-WEIXIN
+    searchBarWidth.value = windowWidth - leftPadding - rightPadding
+    // #endif
+  } catch (e) {
+    searchBarWidth.value = 0
+  }
+}
+
+function fetchCouponFn() {
+  couponRef.value?.firstGetAuto()
+}
+
+function init() {
+  if (loading.value) return
+  loading.value = true
+  getFloorData()
+    .then((res) => {
+      const payload = res?.data ?? res
+      const pageDataStr = payload?.result?.pageData
+      const isSuccess = payload?.success === true || payload?.code === 200
+      if (!isSuccess || !pageDataStr) return
+
+      try {
+        const result = JSON.parse(pageDataStr)
+        pageData.value = Array.isArray(result?.list) ? result : { list: [] }
+        const lastItem = pageData.value.list[pageData.value.list.length - 1]
+        enableLoad.value =
+          lastItem?.type === 'goods' || lastItem?.model === 'goods'
+      } catch (parseError) {
+        console.error('parse pageData failed', parseError)
+      }
+    })
+    .catch((err) => {
+      console.error('getFloorData failed', err)
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+
+onReady(() => {
+  setCapsuleInset()
+  init()
+  // #ifdef MP-WEIXIN
+  uni.showShareMenu({ withShareTicket: true })
+  // #endif
+})
+
+onShow(() => {
+  setTimeout(() => {
+    fetchCouponFn()
+  }, 1000)
+})
+
+onReachBottom(() => {
+  uni.$emit('onReachBottom', true)
+})
+
+onPullDownRefresh(() => {
+  init()
+  uni.stopPullDownRefresh()
+})
 </script>
 
-<style lang="scss" scoped>
+<style scoped lang="scss">
+@import '@/pages/tabbar/home/template/tpl.scss';
+
+.home-page {
+  width: 100%;
+  min-height: 100%;
+  background: #f9f9f9;
+}
+
+.floor-block {
+  width: 100%;
+  display: block;
+}
+
+.navbar {
+  width: 100%;
+
+  :deep(.u-navbar__content) {
+    width: 100%;
+  }
+
+  :deep(.u-navbar__content__left) {
+    flex: 1;
+    width: auto !important;
+    max-width: 100%;
+    padding: 0 0 0 $home-layout-padding !important;
+  }
+}
+
+.navbar-search-wrap {
+  box-sizing: border-box;
+  flex: 1;
+  min-width: 0;
+}
 </style>
diff --git a/pages/tabbar/home/template/fetch_coupon.vue b/pages/tabbar/home/template/fetch_coupon.vue
index 7354e2d..2bcc0f6 100644
--- a/pages/tabbar/home/template/fetch_coupon.vue
+++ b/pages/tabbar/home/template/fetch_coupon.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <view>
     <u-popup v-model:show="enableShowCoupon" mode="center" width="550rpx" height="400px">
       <view style="height: 130rpx">
         <view
@@ -80,72 +80,70 @@
         </view>
       </scroll-view>
     </u-popup>
-  </div>
+  </view>
 </template>
 
-<script>
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
 import { getAutoCoup } from "@/api/login";
 import storage from "@/utils/storage.js";
-export default {
-  data() {
-    return {
-      storage,
-      enableShowCoupon: false,
-      coupList:[]
-    };
-  },
-  mounted() {
-    this.firstGetAuto();
-  },
-  methods: {
-    firstGetAuto() {
-      if(!this.isLogin('auth')) return false
-      let data = new Date();
-      let now = data.getDate();
-      let hours = data.getHours();
-      let flagCoup = storage.getAutoCp();
-      if (
-        storage.getAutoCp() &&
-        storage.getAutoCp() != "" &&
-        storage.getAutoCp() != undefined &&
-        storage.getAutoCp() != null
-      ) {
-        if (Number(now) > Number(flagCoup)) {
-          if (Number(hours) >= 6) {
-            storage.setAutoCp(now);
-            this.getAutoCp();
-          }
-        }
-      } else {
-        this.getAutoCp();
+import { isLogin, unitPrice } from "@/utils/filters.js";
+
+const enableShowCoupon = ref(false);
+const coupList = ref<any[]>([]);
+
+onMounted(() => {
+  firstGetAuto();
+});
+
+function firstGetAuto() {
+  if (!isLogin("auth")) return false;
+  const data = new Date();
+  const now = data.getDate();
+  const hours = data.getHours();
+  const flagCoup = storage.getAutoCp();
+  if (
+    storage.getAutoCp() &&
+    storage.getAutoCp() != "" &&
+    storage.getAutoCp() != undefined &&
+    storage.getAutoCp() != null
+  ) {
+    if (Number(now) > Number(flagCoup)) {
+      if (Number(hours) >= 6) {
+        storage.setAutoCp(now);
+        getAutoCp();
       }
-    },
-    getAutoCp() {
-      let data = new Date();
-      let now = data.getDate();
-      getAutoCoup().then((res) => {
-        console.log(res);
-        if (res.data.success) {
-          this.coupList.push(...res.data.result);
-          if (this.coupList != "") {
-            this.enableShowCoupon = true;
-          } else {
-            this.enableShowCoupon = false;
-          }
-          storage.setAutoCp(now);
-          let objs = {};
-          this.coupList = this.coupList.reduce((cur, next) => {
-            //对象去重
-            if (next.id != undefined) {
-              objs[next.id] ? "" : (objs[next.id] = true && cur.push(next));
-            }
-            return cur;
-          }, []);
+    }
+  } else {
+    getAutoCp();
+  }
+}
+
+function getAutoCp() {
+  const data = new Date();
+  const now = data.getDate();
+  getAutoCoup().then((res) => {
+    console.log(res);
+    if (res.data.success) {
+      coupList.value.push(...res.data.result);
+      if (coupList.value != "") {
+        enableShowCoupon.value = true;
+      } else {
+        enableShowCoupon.value = false;
+      }
+      storage.setAutoCp(now);
+      const objs: Record<string, boolean> = {};
+      coupList.value = coupList.value.reduce((cur, next) => {
+        if (next.id != undefined) {
+          objs[next.id] ? "" : (objs[next.id] = true && cur.push(next));
         }
-      });
-    },
-  },
-};
+        return cur;
+      }, [] as any[]);
+    }
+  });
+}
+
+defineExpose({ firstGetAuto });
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/tabbar/home/template/tpl.js b/pages/tabbar/home/template/tpl.js
index 69081e7..190f9e1 100644
--- a/pages/tabbar/home/template/tpl.js
+++ b/pages/tabbar/home/template/tpl.js
@@ -118,9 +118,17 @@ export function modelNavigateTo(item) {
 					});
 					break;
 				case "小程序直播":
+					// #ifndef MP-WEIXIN
 					uni.navigateTo({
 						url: `/pages/promotion/lives`,
 					});
+					// #endif
+					// #ifdef MP-WEIXIN
+					uni.showToast({
+						title: "小程序暂不支持直播",
+						icon: "none",
+					});
+					// #endif
 					break;
 				case "砍价":
 					uni.navigateTo({
diff --git a/pages/tabbar/home/template/tpl.scss b/pages/tabbar/home/template/tpl.scss
index e0938fd..4083f84 100644
--- a/pages/tabbar/home/template/tpl.scss
+++ b/pages/tabbar/home/template/tpl.scss
@@ -1,6 +1,6 @@
 .image-mode {
    width: 100%;
-   height: 100%;
+   height: auto;
     display: block;
     padding: 2rpx;
 }
@@ -21,10 +21,10 @@ $home-layout-padding: 16rpx;
     width: 100%;
 }
 .view-height-75 {
-    // height: 150rpx;
+    min-height: 150rpx;
 }
 .view-height-150 {
-    // height: 300rpx;
+    min-height: 300rpx;
     flex: 1;
 }
 
diff --git a/pages/tabbar/home/template/tpl_banner.vue b/pages/tabbar/home/template/tpl_banner.vue
index beeaf69..93b3f51 100644
--- a/pages/tabbar/home/template/tpl_banner.vue
+++ b/pages/tabbar/home/template/tpl_banner.vue
@@ -14,35 +14,20 @@
         indicator
         @click="clickSwiper"
       >
-        <template #loading><u-loading></u-loading></template>
+        <template #loading><u-loading-icon></u-loading-icon></template>
       </u-swiper>
     </view>
   </view>
 </template>
 
-<script>
+<script setup lang="ts">
 import { modelNavigateTo } from "./tpl";
-export default {
-  title: "导航栏",
-  props: ["res"],
-  watch: {
-    res: {
-      handler(newValue, oldValue) {
-        this["res"] = newValue;
-      },
-      deep: true,
-    },
-  },
 
-  mounted() {
-   
-  },
-  methods: {
-    clickSwiper(index) {
-      modelNavigateTo(this.res.list[index]);
-    },
-  },
-};
+const props = defineProps<{ res: any }>();
+
+function clickSwiper(index: number) {
+  modelNavigateTo(props.res.list[index]);
+}
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/pages/tabbar/home/template/tpl_flex_five.vue b/pages/tabbar/home/template/tpl_flex_five.vue
index 10e320f..fb0db24 100644
--- a/pages/tabbar/home/template/tpl_flex_five.vue
+++ b/pages/tabbar/home/template/tpl_flex_five.vue
@@ -2,23 +2,15 @@
 <template>
   <div class="layout">
     <u-image width="140rpx" mode="aspectFit" height="140rpx" @click="modelNavigateTo(item)" class="image-mode" v-for="(item,index) in res.list" :key="index" :src="item.img" alt="">
-      <template #loading><u-loading></u-loading></template>
+      <template #loading><u-loading-icon></u-loading-icon></template>
     </u-image>
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import { modelNavigateTo } from "./tpl";
-export default {
-  title: "五列单行图片模块",
-  props: ["res"],
-  data() {
-    return {
-      modelNavigateTo,
-    };
-  },
-  mounted() {},
-};
+
+defineProps<{ res: any }>();
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/pages/tabbar/home/template/tpl_flex_four.vue b/pages/tabbar/home/template/tpl_flex_four.vue
index 77e8653..b166f78 100644
--- a/pages/tabbar/home/template/tpl_flex_four.vue
+++ b/pages/tabbar/home/template/tpl_flex_four.vue
@@ -2,23 +2,15 @@
 <template>
   <div class="layout">
     <u-image height="175rpx" mode="aspectFit" width="175rpx" @click="modelNavigateTo(item)" class="image-mode" :src="item.img" v-for="(item,index) in res.list" :key="index">
-      <template #loading><u-loading></u-loading></template>
+      <template #loading><u-loading-icon></u-loading-icon></template>
     </u-image>
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import { modelNavigateTo } from "./tpl";
-export default {
-  title: "四列单行图片模块",
-  props: ["res"],
-  data() {
-    return {
-      modelNavigateTo,
-    };
-  },
-  mounted() {},
-};
+
+defineProps<{ res: any }>();
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/pages/tabbar/home/template/tpl_flex_one.vue b/pages/tabbar/home/template/tpl_flex_one.vue
index 690a371..992371e 100644
--- a/pages/tabbar/home/template/tpl_flex_one.vue
+++ b/pages/tabbar/home/template/tpl_flex_one.vue
@@ -1,27 +1,30 @@
 <template>
-  <div class="layout">
-    <div class="flex-one">
-      <u-image v-if="res.list[0].zoneInfo == ''" @click="modelNavigateTo(res.list[0])" width="100%" mode="aspectFit" height="280rpx" :src="res.list[0].img" alt=""></u-image>
+  <view class="layout">
+    <view class="flex-one">
+      <u-image
+        v-if="!hasHotZone"
+        @click="modelNavigateTo(res.list[0])"
+        width="100%"
+        mode="aspectFit"
+        height="280rpx"
+        :src="res.list[0].img"
+        alt=""
+      ></u-image>
       <hotzone v-else :res="res"></hotzone>
-    </div>
-  </div>
+    </view>
+  </view>
 </template>
-<script>
+<script setup lang="ts">
+import { computed } from "vue";
 import { modelNavigateTo } from "./tpl";
-import hotzone from "@/pages/tabbar/home/template/tpl_hot_zone.vue";
+import hotzone from "./tpl_hot_zone.vue";
 
-export default {
-  title: "单行图片模块",
-  components: {
-    hotzone,
-  },
-  data() {
-    return {
-      modelNavigateTo
-    };
-  },
-  props: ["res"],
-};
+const props = defineProps<{ res: any }>();
+
+const hasHotZone = computed(() => {
+  const zoneInfo = props.res?.list?.[0]?.zoneInfo;
+  return Array.isArray(zoneInfo) ? zoneInfo.length > 0 : !!zoneInfo;
+});
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/pages/tabbar/home/template/tpl_flex_three.vue b/pages/tabbar/home/template/tpl_flex_three.vue
index 172fb7e..c1df06a 100644
--- a/pages/tabbar/home/template/tpl_flex_three.vue
+++ b/pages/tabbar/home/template/tpl_flex_three.vue
@@ -2,26 +2,15 @@
 <template>
   <div class="layout">
     <u-image @click="modelNavigateTo(item)" height="240rpx" width="240rpx" class="image-mode" :src="item.img" v-for="(item, index) in res.list" :key="index">
-      <template #loading><u-loading></u-loading></template>
+      <template #loading><u-loading-icon></u-loading-icon></template>
     </u-image>
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import { modelNavigateTo } from "./tpl";
 
-export default {
-  title: "三列单行图片模块",
-  props: ["res"],
-  mounted() {
-   
-  },
-  data() {
-    return {
-      modelNavigateTo,
-    };
-  },
-};
+defineProps<{ res: any }>();
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/pages/tabbar/home/template/tpl_flex_two.vue b/pages/tabbar/home/template/tpl_flex_two.vue
index 6f1db11..0508f12 100644
--- a/pages/tabbar/home/template/tpl_flex_two.vue
+++ b/pages/tabbar/home/template/tpl_flex_two.vue
@@ -1,33 +1,23 @@
 <template>
-  <div class="layout">
-    <div class="flex-two">
-      <div class="flex-item" @click="modelNavigateTo(res.list[0])">
+  <view class="layout">
+    <view class="flex-two">
+      <view class="flex-item" @click="modelNavigateTo(res.list[0])">
         <u-image height="250rpx" width="100%" mode="scaleToFill" :src="res.list[0].img" alt>
-          <template #loading><u-loading></u-loading></template>
+          <template #loading><u-loading-icon></u-loading-icon></template>
         </u-image>
-      </div>
-      <div class="flex-item" @click="modelNavigateTo(res.list[1])">
+      </view>
+      <view class="flex-item" @click="modelNavigateTo(res.list[1])">
         <u-image height="250rpx" width="100%" mode="scaleToFill" :src="res.list[1].img" alt>
-          <template #loading><u-loading></u-loading></template>
+          <template #loading><u-loading-icon></u-loading-icon></template>
         </u-image>
-      </div>
-    </div>
-  </div>
+      </view>
+    </view>
+  </view>
 </template>
-<script>
+<script setup lang="ts">
 import { modelNavigateTo } from "./tpl";
-export default {
-    title: "两张横图",
-  props: ["res"],
-  mounted() {
-   
-  },
-  data() {
-    return {
-      modelNavigateTo,
-    };
-  },
-};
+
+defineProps<{ res: any }>();
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/pages/tabbar/home/template/tpl_goods.vue b/pages/tabbar/home/template/tpl_goods.vue
index 6c224af..ab13649 100644
--- a/pages/tabbar/home/template/tpl_goods.vue
+++ b/pages/tabbar/home/template/tpl_goods.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="layout">
+  <view class="layout">
     <u-sticky>
-      <div class="goods-cell-title">
-        <div
+      <view class="goods-cell-title">
+        <view
           class="goods-item-title"
           :class="{ 'selected-title': selected.index == index }"
           @click="handleClickTitle(title, index)"
@@ -10,13 +10,13 @@
           :key="index"
         >
           <h4 class="h4">{{ title.title }}</h4>
-          <div class="title-desc">{{ title.desc }}</div>
-        </div>
-      </div>
+          <view class="title-desc">{{ title.desc }}</view>
+        </view>
+      </view>
     </u-sticky>
-    <div class="goods-list">
+    <view class="goods-list">
       <template v-for="(item, item_index) in res.list[0].listWay" :key="item_index">
-        <div
+        <view
           v-if="
             item.___index != undefined
               ? selected.index == item.___index
@@ -25,144 +25,149 @@
           @click="handleClick(item)"
           class="goods-item"
         >
-          <div class="goods-img">
+          <view class="goods-img">
             <u-image
               :src="item.img"
               height="350rpx"
               mode="aspectFit"
               width="100%"
             >
-              <template #loading><u-loading></u-loading></template>
+              <template #loading><u-loading-icon></u-loading-icon></template>
             </u-image>
-          </div>
-          <div class="goods-desc">
-            <div class="goods-title">
+          </view>
+          <view class="goods-desc">
+            <view class="goods-title">
               {{ item.title }}
-            </div>
-            <div class="goods-bottom">
-              <div class="goods-price">
+            </view>
+            <view class="goods-bottom">
+              <view class="goods-price">
                 ¥<span class="price-int"
                   >{{ goodsFormatPrice(item.price)[0] }} </span
                 >.{{ goodsFormatPrice(item.price)[1] }}
-              </div>
-            </div>
-          </div>
-        </div>
+              </view>
+            </view>
+          </view>
+        </view>
       </template>
 
       <template
-        v-if="res.list[0].titleWay[selected.index].bindCategory && goodsData.length"
+        v-if="currentTitleWay?.bindCategory && goodsData.length"
       >
-        <div
+        <view
           v-for="(item, index) in goodsData"
           :key="index"
           class="goods-item"
           @click="handleClick(item)"
         >
-          <div class="goods-img">
+          <view class="goods-img">
             <u-image
               :src="item.thumbnail"
               height="350rpx"
               mode="aspectFit"
               width="100%"
             >
-              <template #loading><u-loading></u-loading></template>
+              <template #loading><u-loading-icon></u-loading-icon></template>
             </u-image>
-          </div>
-          <div class="goods-desc">
-            <div class="goods-title">
+          </view>
+          <view class="goods-desc">
+            <view class="goods-title">
               {{ item.goodsName }}
-            </div>
-            <div class="goods-bottom">
-              <div class="goods-price">
+            </view>
+            <view class="goods-bottom">
+              <view class="goods-price">
                 ¥<span class="price-int"
                   >{{ goodsFormatPrice(item.price)[0] }} </span
                 >.{{ goodsFormatPrice(item.price)[1] }}
-              </div>
-            </div>
-          </div>
-        </div>
+              </view>
+            </view>
+          </view>
+        </view>
       </template>
-    </div>
-  </div>
+    </view>
+  </view>
 </template>
-<script>
+<script setup lang="ts">
+import { ref, reactive, watch, onMounted, onUnmounted, computed } from "vue";
 import { getGoodsList } from "@/api/goods.js";
-export default {
-  title: "商品分类以及商品",
-  data() {
-    return {
-      selected: {
-        index: 0,
-        val: "",
-      },
-      params: {
-        pageNumber: 1,
-        pageSize: 100,
-        categoryId: "",
-      },
-      goodsData: [], //商品循环内容
-      goodsResult:"", //es总返回内容
-    };
+import { goodsFormatPrice } from "@/utils/filters.js";
+
+const props = defineProps<{ res: any; enableBottomLoad?: boolean }>();
+
+const selected = reactive({
+  index: 0,
+  val: "",
+});
+
+const currentTitleWay = computed(() => {
+  return props.res?.list?.[0]?.titleWay?.[selected.index]
+})
+const params = reactive({
+  pageNumber: 1,
+  pageSize: 100,
+  categoryId: "",
+});
+const goodsData = ref<any[]>([]);
+const goodsResult = ref<any>("");
+
+watch(
+  () => props.res,
+  (val) => {
+    if (!val?.list?.[0]) return
+    const firstListWay = val.list[0].listWay?.[0]
+    selected.val = firstListWay?.type || ''
+    const firstTitleWay = val.list[0].titleWay?.[0]
+    if (firstTitleWay?.bindCategory) {
+      initGoods(firstTitleWay)
+    }
   },
-  props: ["res","enableBottomLoad"],
-  watch: {
-    res: {
-      handler(val) {
-        // 监听父级的值 如果有值将值赋给selected
-        if (val) {
-          // 如果第一个标签页绑定为商品
-          this.selected.val = this.res.list[0].listWay[0] ? this.res.list[0].listWay[0].type: '';
-          // 如果第一个标签为绑定为分类
-          this.res.list[0].titleWay[0].bindCategory ? this.initGoods(this.res.list[0].titleWay[0]) : ''
-        }
-      },
-      immediate: true,
-    },
-  },
-  mounted() {
-    uni.$on('onReachBottom',()=>{
-      if(this.enableBottomLoad && this.goodsResult.totalElements >= this.params.pageNumber * this.params.pageSize){
-        this.params.pageNumber++
-        this.initGoods(this.res.list[0].titleWay[this.selected.index])
-      }
-      
-    })
-  },
-  destroyed(){
-    uni.$off('onReachBottom')
-  },
-  methods: {
-    handleClick(item) {
-      uni.navigateTo({
-        url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`,
-      });
-    },
-    closeGoods(val, index) {
-      this.res.list[0].listWay.splice(index, 1);
-    },
-    async initGoods(val) {
-      if(this.enableBottomLoad) this.params.pageSize = 20
-      val ? this.params.categoryId = val.bindCategory.id : '';
-      const res = await getGoodsList(this.params);
-      if (res.data.success) {
-        this.goodsResult = res.data.result
-        const result = res.data.result.records
-        this.goodsData.push(...result);
-        console.log(this.goodsData)
-      }
-    },
-    handleClickTitle(val, index) {
-      this.selected.index = index;
-      this.selected.val = val.title;
-      if (val.bindCategory) {
-        this.params.pageNumber = 1
-        this.goodsData = []
-        this.initGoods(val);
-      }
-    },
-  },
-};
+  { immediate: true }
+)
+
+onMounted(() => {
+  uni.$on("onReachBottom", () => {
+    if (
+      props.enableBottomLoad &&
+      goodsResult.value.totalElements >=
+        params.pageNumber * params.pageSize
+    ) {
+      params.pageNumber++;
+      initGoods(props.res.list[0].titleWay[selected.index]);
+    }
+  });
+});
+
+onUnmounted(() => {
+  uni.$off("onReachBottom");
+});
+
+function handleClick(item: any) {
+  if (!item?.id || !item?.goodsId) return
+  uni.navigateTo({
+    url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`,
+  })
+}
+
+async function initGoods(val: any) {
+  if (props.enableBottomLoad) params.pageSize = 20;
+  val ? (params.categoryId = val.bindCategory.id) : "";
+  const res = await getGoodsList(params);
+  if (res.data.success) {
+    goodsResult.value = res.data.result;
+    const result = res.data.result.records;
+    goodsData.value.push(...result);
+    console.log(goodsData.value);
+  }
+}
+
+function handleClickTitle(val: any, index: number) {
+  selected.index = index;
+  selected.val = val.title;
+  if (val.bindCategory) {
+    params.pageNumber = 1;
+    goodsData.value = [];
+    initGoods(val);
+  }
+}
 </script>
 <style lang="scss" scoped>
 $w_94: 94%;
diff --git a/pages/tabbar/home/template/tpl_group.vue b/pages/tabbar/home/template/tpl_group.vue
index 81e1973..8778d80 100644
--- a/pages/tabbar/home/template/tpl_group.vue
+++ b/pages/tabbar/home/template/tpl_group.vue
@@ -31,38 +31,38 @@
     </div>
   </div>
 </template>
-<script>
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
 import * as API_Promotions from "@/api/promotions";
-export default {
-  props: ["res"],
-  title: "拼团",
-  data() {
-    return {
-      goodsList: [],
-    };
-  },
-  mounted() {
-    API_Promotions.getAssembleList({
-      pageNumber: 1,
-      pageSize: this.res.list[0].count || 3,
-      promotionStatus: "START",
-    }).then((res) => {
-      if (res.data.success && res.data.result && res.data.result.records) {
-        this.goodsList = res.data.result.records.slice(0, this.res.list[0].count || 3);
-      }
-    });
-  },
-  methods: {
-    goMore() {
-      uni.navigateTo({ url: "/pages/promotion/joinGroup" });
-    },
-    goDetail(item) {
-      uni.navigateTo({
-        url: `/pages/product/goods?id=${item.skuId}&goodsId=${item.goodsId}`,
-      });
-    },
-  },
-};
+
+const props = defineProps<{ res: any }>();
+
+const goodsList = ref<any[]>([]);
+
+onMounted(() => {
+  API_Promotions.getAssembleList({
+    pageNumber: 1,
+    pageSize: props.res.list[0].count || 3,
+    promotionStatus: "START",
+  }).then((res) => {
+    if (res.data.success && res.data.result && res.data.result.records) {
+      goodsList.value = res.data.result.records.slice(
+        0,
+        props.res.list[0].count || 3
+      );
+    }
+  });
+});
+
+function goMore() {
+  uni.navigateTo({ url: "/pages/promotion/joinGroup" });
+}
+
+function goDetail(item: any) {
+  uni.navigateTo({
+    url: `/pages/product/goods?id=${item.skuId}&goodsId=${item.goodsId}`,
+  });
+}
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/pages/tabbar/home/template/tpl_hot_zone.vue b/pages/tabbar/home/template/tpl_hot_zone.vue
index 8699cb6..28ae669 100644
--- a/pages/tabbar/home/template/tpl_hot_zone.vue
+++ b/pages/tabbar/home/template/tpl_hot_zone.vue
@@ -21,18 +21,10 @@
     </div>
   </div>
 </template>
-<script>
+<script setup lang="ts">
 import { modelNavigateTo } from "./tpl";
 
-export default {
-  title: "热区模块",
-  data() {
-    return {
-      modelNavigateTo,
-    };
-  },
-  props: ["res"],
-};
+defineProps<{ res: any }>();
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/pages/tabbar/home/template/tpl_integral.vue b/pages/tabbar/home/template/tpl_integral.vue
index ace6324..e386a0c 100644
--- a/pages/tabbar/home/template/tpl_integral.vue
+++ b/pages/tabbar/home/template/tpl_integral.vue
@@ -31,35 +31,35 @@
     </div>
   </div>
 </template>
-<script>
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
 import * as API_Promotions from "@/api/promotions";
-export default {
-  props: ["res"],
-  title: "积分商品",
-  data() {
-    return {
-      goodsList: [],
-    };
-  },
-  mounted() {
-    API_Promotions.getPointsGoods({
-      pageNumber: 1,
-      pageSize: this.res.list[0].count || 3,
-    }).then((res) => {
-      if (res.data.success && res.data.result && res.data.result.records) {
-        this.goodsList = res.data.result.records.slice(0, this.res.list[0].count || 3);
-      }
-    });
-  },
-  methods: {
-    goMore() {
-      uni.navigateTo({ url: "/pages/promotion/point/pointList" });
-    },
-    goDetail(item) {
-      uni.navigateTo({ url: `/pages/promotion/point/detail?id=${item.id}` });
-    },
-  },
-};
+
+const props = defineProps<{ res: any }>();
+
+const goodsList = ref<any[]>([]);
+
+onMounted(() => {
+  API_Promotions.getPointsGoods({
+    pageNumber: 1,
+    pageSize: props.res.list[0].count || 3,
+  }).then((res) => {
+    if (res.data.success && res.data.result && res.data.result.records) {
+      goodsList.value = res.data.result.records.slice(
+        0,
+        props.res.list[0].count || 3
+      );
+    }
+  });
+});
+
+function goMore() {
+  uni.navigateTo({ url: "/pages/promotion/point/pointList" });
+}
+
+function goDetail(item: any) {
+  uni.navigateTo({ url: `/pages/promotion/point/detail?id=${item.id}` });
+}
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/pages/tabbar/home/template/tpl_left_one_right_two.vue b/pages/tabbar/home/template/tpl_left_one_right_two.vue
index 024339d..508491a 100644
--- a/pages/tabbar/home/template/tpl_left_one_right_two.vue
+++ b/pages/tabbar/home/template/tpl_left_one_right_two.vue
@@ -1,38 +1,30 @@
 
 <template>
-  <div class="layout">
-    <div class="view-height-150" @click="modelNavigateTo(res.list[0])">
-      <u-image width="100%" height="340rpx" class="image-mode" :src="res.list[0].img">
-        <template #loading><u-loading></u-loading></template>
-      </u-image>
-    </div>
-    <div class="view-height-150">
-      <div class="view-height-75" @click="modelNavigateTo(res.list[1])">
-        <u-image width="100%" height="170rpx" class="image-mode" :src="res.list[1].img" alt>
-          <template #loading><u-loading></u-loading></template>
-        </u-image>
-      </div>
-      <div class="view-height-75" @click="modelNavigateTo(res.list[2])">
-        <u-image width="100%" height="170rpx" class="image-mode" :src="res.list[2].img" alt>
-          <template #loading><u-loading></u-loading></template>
-        </u-image>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
 
+<view class="layout">
+    <view class="view-height-150" @click="modelNavigateTo(res.list[0])">
+      <u-image width="100%" height="340rpx" class="image-mode" :src="res.list[0].img">
+        <template #loading><u-loading-icon></u-loading-icon></template>
+      </u-image>
+    </view>
+    <view class="view-height-150">
+      <view class="view-height-75" @click="modelNavigateTo(res.list[1])">
+        <u-image width="100%" height="170rpx" class="image-mode" :src="res.list[1].img" alt>
+          <template #loading><u-loading-icon></u-loading-icon></template>
+        </u-image>
+      </view>
+      <view class="view-height-75" @click="modelNavigateTo(res.list[2])">
+        <u-image width="100%" height="170rpx" class="image-mode" :src="res.list[2].img" alt>
+          <template #loading><u-loading-icon></u-loading-icon></template>
+        </u-image>
+      </view>
+    </view>
+  </view>
+</template>
+<script setup lang="ts">
 import { modelNavigateTo } from "./tpl";
-export default {
-  title: "左一右二",
-  props: ["res"],
-  data() {
-    return {
-      modelNavigateTo,
-    };
-  },
-  mounted() {},
-};
+
+defineProps<{ res: any }>();
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/pages/tabbar/home/template/tpl_left_two_right_one.vue b/pages/tabbar/home/template/tpl_left_two_right_one.vue
index a683c63..39a37a0 100644
--- a/pages/tabbar/home/template/tpl_left_two_right_one.vue
+++ b/pages/tabbar/home/template/tpl_left_two_right_one.vue
@@ -15,20 +15,10 @@
   </div>
 </template>
 
-<script>
-import {modelNavigateTo} from './tpl'
-export default {
-  title: "左二右一",
-  props: ["res"],
-   data () {
-    return {
-      modelNavigateTo,
-    }
-  },
-  mounted() {
-   
-  }
-};
+<script setup lang="ts">
+import { modelNavigateTo } from "./tpl";
+
+defineProps<{ res: any }>();
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/pages/tabbar/home/template/tpl_menu.vue b/pages/tabbar/home/template/tpl_menu.vue
index 1f14ed4..0dc9222 100644
--- a/pages/tabbar/home/template/tpl_menu.vue
+++ b/pages/tabbar/home/template/tpl_menu.vue
@@ -14,7 +14,7 @@
             class="menu-img"
             :src="item.img"
           >
-            <template #loading><u-loading></u-loading></template>
+            <template #loading><u-loading-icon></u-loading-icon></template>
           </u-image>
         </view>
         <view class="menu-title">{{ item.title }}</view>
@@ -22,17 +22,10 @@
     </view>
   </view>
 </template>
-<script>
+<script setup lang="ts">
 import { modelNavigateTo } from "./tpl";
-export default {
-  title: "五列菜单",
-  props: ["res"],
-  data() {
-    return {
-      modelNavigateTo,
-    };
-  },
-};
+
+defineProps<{ res: any }>();
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/pages/tabbar/home/template/tpl_notice.vue b/pages/tabbar/home/template/tpl_notice.vue
index c0e36b2..10570a4 100644
--- a/pages/tabbar/home/template/tpl_notice.vue
+++ b/pages/tabbar/home/template/tpl_notice.vue
@@ -6,19 +6,14 @@
   </div>
 </template>
 
-<script>
-  export default {
-    title: "公告",
-    props: ["res"],
-    data() {
-      return {
-        list: []
-      }
-    },
-    mounted() {
-      this.list = this.res.list[0].title.map(i => i.context);
-    },
-  };
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = defineProps<{ res: any }>();
+
+const list = computed(() =>
+  props.res.list[0].title.map((i: { context: string }) => i.context)
+);
 </script>
 <style lang="scss" scoped>
   @import "./tpl.scss";
diff --git a/pages/tabbar/home/template/tpl_promotions_detail.vue b/pages/tabbar/home/template/tpl_promotions_detail.vue
index 266af29..1fcb4c8 100644
--- a/pages/tabbar/home/template/tpl_promotions_detail.vue
+++ b/pages/tabbar/home/template/tpl_promotions_detail.vue
@@ -2,7 +2,7 @@
   <div class="layout">
     <div class="join-list">
       <div
-        v-for="(item, index) in res.list"
+        v-for="(item, index) in displayList"
         :key="index"
         class="join-list-item"
         @click="goToDetail(item.type)"
@@ -63,113 +63,132 @@
     </div>
   </div>
 </template>
-<script>
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, computed } from "vue";
 import * as API_Promotions from "@/api/promotions";
 import Foundation from "@/utils/Foundation.js";
-export default {
-  props: ["res"],
-  data() {
-    return {
-      timeLine: "", //获取几个点活动
-      resTime: 0, //当前时间
-      time: 0, //距离下一个活动的时间值
-      times: {}, //时间集合
-      onlyOne: "", //是否最后一个商品
-    };
-  },
-  mounted() {
-    let params = {
-      pageNumber: 1,
-      pageSize: 2,
-      status: "START",
-      promotionStatus: "START",
-    };
-    this._setTimeInterval = setInterval(() => {
-      if (this.time <= 0) {
-        clearInterval(this._setTimeInterval);
-      } else {
-        this.times = Foundation.countTimeDown(this.time);
-        this.time--;
-      }
-    }, 1000);
-    this.res.list.forEach((ele) => {
-      switch (ele.type) {
-        case "PINTUAN":
-          API_Promotions.getAssembleList(params).then((response) => {
-            const data = response.data.result.records;
-            if (data) {
-              ele.data = data;
-            }
-          });
-          break;
-        case "SECKILL":
-          API_Promotions.getSeckillTimeLine().then((response) => {
-            if (response.data.success && response.data.result) {
-              ele.data = response.data.result[0].seckillGoodsList.slice(0, 2);
-              let timeLine = response.data.result.sort(
-                (x, y) => Number(x.timeLine) - Number(y.timeLine)
-              );
-              this.timeLine = timeLine.slice(0, 5);
-              this.resTime = parseInt(new Date().getTime() / 1000);
-              this.onlyOne = response.data.result.length === 1;
-              this.diffTime = parseInt(new Date().getTime() / 1000) - this.resTime;
 
-              this.time =
-                this.timeLine[0].distanceStartTime ||
-                (this.timeLine[1] && this.timeLine[1].distanceStartTime) ||
-                Foundation.theNextDayTime() - this.diffTime;
-              this.times = Foundation.countTimeDown(this.time);
-              console.log(this.timeLine);
-            }
-          });
-          break;
-        case "LIVE":
-          API_Promotions.getLiveList(params).then((response) => {
-            if (response.success && response.result.records) {
-              ele.data = response.result.records[0].commodityList.slice(0, 2);
-            }
-          });
-          break;
-        case "KANJIA":
-          API_Promotions.getBargainList(params).then((response) => {
-            if (response.success && response.result) {
-              ele.data = response.result.records(0, 2);
-            }
-          });
-          break;
-        default:
-          break;
-      }
-    });
-  },
-  methods: {
-    //跳转详情
-    goToDetail(type) {
-      switch(type) {
-        case "SECKILL":
-          uni.navigateTo({
-            url: `/pages/promotion/seckill`,
-          });
-          break;
-        case "PINTUAN":
-          uni.navigateTo({
-            url: `/pages/promotion/joinGroup`,
-          });
-          break;
-        case "LIVE":
-          uni.navigateTo({
-            url: `/pages/promotion/lives`,
-          });
-          break;
-        case "KANJIA":
-          uni.navigateTo({
-            url: `/pages/promotion/bargain/list`,
-          });
-          break;
-      };
+const props = defineProps<{ res: any }>();
+
+const displayList = computed(() => {
+  const list = props.res?.list || [];
+  // #ifdef MP-WEIXIN
+  return list.filter((item: any) => item.type !== "LIVE");
+  // #endif
+  // #ifndef MP-WEIXIN
+  return list;
+  // #endif
+});
+const timeLine = ref<any>("");
+const resTime = ref(0);
+const time = ref(0);
+const times = ref<any>({});
+const onlyOne = ref("");
+let setTimeInterval: ReturnType<typeof setInterval> | null = null;
+let diffTime = 0;
+
+onMounted(() => {
+  const params = {
+    pageNumber: 1,
+    pageSize: 2,
+    status: "START",
+    promotionStatus: "START",
+  };
+  setTimeInterval = setInterval(() => {
+    if (time.value <= 0) {
+      if (setTimeInterval) clearInterval(setTimeInterval);
+    } else {
+      times.value = Foundation.countTimeDown(time.value);
+      time.value--;
     }
-  },
-};
+  }, 1000);
+  props.res.list.forEach((ele: any) => {
+    // #ifdef MP-WEIXIN
+    if (ele.type === "LIVE") return;
+    // #endif
+    switch (ele.type) {
+      case "PINTUAN":
+        API_Promotions.getAssembleList(params).then((response) => {
+          const data = response.data.result.records;
+          if (data) {
+            ele.data = data;
+          }
+        });
+        break;
+      case "SECKILL":
+        API_Promotions.getSeckillTimeLine().then((response) => {
+          if (response.data.success && response.data.result) {
+            ele.data = response.data.result[0].seckillGoodsList.slice(0, 2);
+            const timeline = response.data.result.sort(
+              (x: any, y: any) => Number(x.timeLine) - Number(y.timeLine)
+            );
+            timeLine.value = timeline.slice(0, 5);
+            resTime.value = parseInt(String(new Date().getTime() / 1000));
+            onlyOne.value = response.data.result.length === 1;
+            diffTime =
+              parseInt(String(new Date().getTime() / 1000)) - resTime.value;
+
+            time.value =
+              timeLine.value[0].distanceStartTime ||
+              (timeLine.value[1] && timeLine.value[1].distanceStartTime) ||
+              Foundation.theNextDayTime() - diffTime;
+            times.value = Foundation.countTimeDown(time.value);
+            console.log(timeLine.value);
+          }
+        });
+        break;
+      // #ifndef MP-WEIXIN
+      case "LIVE":
+        API_Promotions.getLiveList(params).then((response) => {
+          if (response.success && response.result.records) {
+            ele.data = response.result.records[0].commodityList.slice(0, 2);
+          }
+        });
+        break;
+      // #endif
+      case "KANJIA":
+        API_Promotions.getBargainList(params).then((response) => {
+          if (response.success && response.result) {
+            ele.data = response.result.records(0, 2);
+          }
+        });
+        break;
+      default:
+        break;
+    }
+  });
+});
+
+onUnmounted(() => {
+  if (setTimeInterval) clearInterval(setTimeInterval);
+});
+
+function goToDetail(type: string) {
+  switch (type) {
+    case "SECKILL":
+      uni.navigateTo({
+        url: `/pages/promotion/seckill`,
+      });
+      break;
+    case "PINTUAN":
+      uni.navigateTo({
+        url: `/pages/promotion/joinGroup`,
+      });
+      break;
+    // #ifndef MP-WEIXIN
+    case "LIVE":
+      uni.navigateTo({
+        url: `/pages/promotion/lives`,
+      });
+      break;
+    // #endif
+    case "KANJIA":
+      uni.navigateTo({
+        url: `/pages/promotion/bargain/list`,
+      });
+      break;
+  }
+}
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/pages/tabbar/home/template/tpl_search.vue b/pages/tabbar/home/template/tpl_search.vue
index 7297a1f..d27197c 100644
--- a/pages/tabbar/home/template/tpl_search.vue
+++ b/pages/tabbar/home/template/tpl_search.vue
@@ -6,25 +6,20 @@
     </view>
   </view>
 </template>
-<script>
-export default {
-  title:"搜索栏",
-  props: ["res","storeId"],
-  methods: {
-    handleSearch() {
-      if(this.storeId){
-        uni.navigateTo({
-        url: `/pages/navigation/search/searchPage?storeId=${this.storeId}`,
-      });
-      }else{
-         uni.navigateTo({
-        url: `/pages/navigation/search/searchPage`,
-      });
-      }
-      
-    },
-  },
-};
+<script setup lang="ts">
+const props = defineProps<{ res: any; storeId?: string }>();
+
+function handleSearch() {
+  if (props.storeId) {
+    uni.navigateTo({
+      url: `/pages/navigation/search/searchPage?storeId=${props.storeId}`,
+    });
+  } else {
+    uni.navigateTo({
+      url: `/pages/navigation/search/searchPage`,
+    });
+  }
+}
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/pages/tabbar/home/template/tpl_spike.vue b/pages/tabbar/home/template/tpl_spike.vue
index 11419b8..c8a6555 100644
--- a/pages/tabbar/home/template/tpl_spike.vue
+++ b/pages/tabbar/home/template/tpl_spike.vue
@@ -31,41 +31,38 @@
     </div>
   </div>
 </template>
-<script>
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
 import * as API_Promotions from "@/api/promotions";
-export default {
-  props: ["res"],
-  title: "秒杀",
-  data() {
-    return {
-      goodsList: [],
-    };
-  },
-  mounted() {
-    API_Promotions.getSeckillTimeLine().then((res) => {
-      if (res.data.success && res.data.result && res.data.result.length) {
-        const sorted = res.data.result.sort(
-          (x, y) => Number(x.timeLine) - Number(y.timeLine)
-        );
-        const first = sorted[0] || {};
-        this.goodsList = (first.seckillGoodsList || []).slice(
-          0,
-          this.res.list[0].count || 3
-        );
-      }
-    });
-  },
-  methods: {
-    goMore() {
-      uni.navigateTo({ url: "/pages/promotion/seckill" });
-    },
-    goDetail(item) {
-      uni.navigateTo({
-        url: `/pages/product/goods?id=${item.skuId}&goodsId=${item.goodsId}`,
-      });
-    },
-  },
-};
+
+const props = defineProps<{ res: any }>();
+
+const goodsList = ref<any[]>([]);
+
+onMounted(() => {
+  API_Promotions.getSeckillTimeLine().then((res) => {
+    if (res.data.success && res.data.result && res.data.result.length) {
+      const sorted = res.data.result.sort(
+        (x: any, y: any) => Number(x.timeLine) - Number(y.timeLine)
+      );
+      const first = sorted[0] || {};
+      goodsList.value = (first.seckillGoodsList || []).slice(
+        0,
+        props.res.list[0].count || 3
+      );
+    }
+  });
+});
+
+function goMore() {
+  uni.navigateTo({ url: "/pages/promotion/seckill" });
+}
+
+function goDetail(item: any) {
+  uni.navigateTo({
+    url: `/pages/product/goods?id=${item.skuId}&goodsId=${item.goodsId}`,
+  });
+}
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/pages/tabbar/home/template/tpl_text_picture.vue b/pages/tabbar/home/template/tpl_text_picture.vue
index ab37eab..2f2cf65 100644
--- a/pages/tabbar/home/template/tpl_text_picture.vue
+++ b/pages/tabbar/home/template/tpl_text_picture.vue
@@ -32,21 +32,10 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
+import { modelNavigateTo } from "./tpl";
 
-import {modelNavigateTo} from './tpl'
-export default {
-  title: "文字图片模板",
-  props: ["res"],
-   data () {
-    return {
-      modelNavigateTo,
-    }
-  },
-  mounted() {
-
-  }
-};
+defineProps<{ res: any }>();
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/pages/tabbar/home/template/tpl_title.vue b/pages/tabbar/home/template/tpl_title.vue
index ac4f57c..b74aef3 100644
--- a/pages/tabbar/home/template/tpl_title.vue
+++ b/pages/tabbar/home/template/tpl_title.vue
@@ -12,18 +12,10 @@
 </template>
 
 
-<script>
+<script setup lang="ts">
 import { modelNavigateTo } from "./tpl";
-export default {
-  title: "标题栏",
-  props: ["res"],
-  data() {
-    return {
-      modelNavigateTo,
-    };
-  },
-  mounted() {},
-};
+
+defineProps<{ res: any }>();
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/pages/tabbar/home/template/tpl_top_one_bottom_two.vue b/pages/tabbar/home/template/tpl_top_one_bottom_two.vue
index 9700a6a..da2af68 100644
--- a/pages/tabbar/home/template/tpl_top_one_bottom_two.vue
+++ b/pages/tabbar/home/template/tpl_top_one_bottom_two.vue
@@ -3,36 +3,28 @@
   <div class="layout">
     <div class="view-width-100" @click="modelNavigateTo(res.list[0])">
       <u-image class="image-mode" width="100%" height="200rpx" :src="res.list[0].img">
-        <template #loading><u-loading></u-loading></template>
+        <template #loading><u-loading-icon></u-loading-icon></template>
       </u-image>
     </div>
     <div class="view-width-100" @click="modelNavigateTo(res.list[1])">
       <div class="view-height-85">
         <u-image class="image-mode" width="100%" height="170rpx" :src="res.list[1].img">
-          <template #loading><u-loading></u-loading></template>
+          <template #loading><u-loading-icon></u-loading-icon></template>
         </u-image>
       </div>
       <div class="view-height-85" @click="modelNavigateTo(res.list[2])">
         <u-image class="image-mode" width="100%" height="170rpx" :src="res.list[2].img">
-          <template #loading><u-loading></u-loading></template>
+          <template #loading><u-loading-icon></u-loading-icon></template>
         </u-image>
       </div>
     </div>
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import { modelNavigateTo } from "./tpl";
-export default {
-  title: "上一下二",
-  props: ["res"],
-  data() {
-    return {
-      modelNavigateTo,
-    };
-  },
-  mounted() {},
-};
+
+defineProps<{ res: any }>();
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/pages/tabbar/home/template/tpl_top_two_bottom_one.vue b/pages/tabbar/home/template/tpl_top_two_bottom_one.vue
index 563f86b..caccb87 100644
--- a/pages/tabbar/home/template/tpl_top_two_bottom_one.vue
+++ b/pages/tabbar/home/template/tpl_top_two_bottom_one.vue
@@ -9,7 +9,7 @@
           :src="res.list[0].img"
           alt
         >
-          <template #loading><u-loading></u-loading></template>
+          <template #loading><u-loading-icon></u-loading-icon></template>
         </u-image>
       </div>
       <div class="view-height-85" @click="modelNavigateTo(res.list[1])">
@@ -20,7 +20,7 @@
           :src="res.list[1].img"
           alt
         >
-          <template #loading><u-loading></u-loading></template>
+          <template #loading><u-loading-icon></u-loading-icon></template>
         </u-image>
       </div>
     </div>
@@ -31,26 +31,16 @@
         width="100%"
         :src="res.list[2].img"
       >
-        <template #loading><u-loading></u-loading></template>
+        <template #loading><u-loading-icon></u-loading-icon></template>
       </u-image>
     </div>
   </div>
 </template>
 
-<script>
-import {modelNavigateTo} from './tpl'
-export default {
-  title: "上二下一",
-  props: ["res"],
-   data () {
-    return {
-      modelNavigateTo,
-    }
-  },
-  mounted() {
- 
-  },
-};
+<script setup lang="ts">
+import { modelNavigateTo } from "./tpl";
+
+defineProps<{ res: any }>();
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/pages/tabbar/home/template/tpl_video.vue b/pages/tabbar/home/template/tpl_video.vue
index b145a71..6c3ff5f 100644
--- a/pages/tabbar/home/template/tpl_video.vue
+++ b/pages/tabbar/home/template/tpl_video.vue
@@ -26,7 +26,11 @@
     </div>
   </div>
 </template>
-<script>
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = defineProps<{ res: any }>();
+
 const DEFAULT_VIDEO_STYLE = {
   bgType: "color",
   bgColorStart: "#F5F5F5",
@@ -49,13 +53,13 @@ const DEFAULT_VIDEO_STYLE = {
   shadowSpread: 0,
 };
 
-const ASPECT_RATIO_MAP = {
+const ASPECT_RATIO_MAP: Record<string, number> = {
   "16:9": 56.25,
   "4:3": 75,
   "1:1": 100,
 };
 
-function ensureVideoItem(item) {
+function ensureVideoItem(item: any) {
   if (!item.aspectRatio) item.aspectRatio = "16:9";
   if (!item.style) {
     item.style = { ...DEFAULT_VIDEO_STYLE };
@@ -63,16 +67,16 @@ function ensureVideoItem(item) {
   }
   Object.keys(DEFAULT_VIDEO_STYLE).forEach((key) => {
     if (item.style[key] === undefined) {
-      item.style[key] = DEFAULT_VIDEO_STYLE[key];
+      item.style[key] = DEFAULT_VIDEO_STYLE[key as keyof typeof DEFAULT_VIDEO_STYLE];
     }
   });
 }
 
-function getVideoGradient(style) {
+function getVideoGradient(style: any) {
   const start = style.bgColorStart || "#F5F5F5";
   const end = style.bgColorEnd || start;
   const colors = `${start}, ${end}`;
-  const dirMap = {
+  const dirMap: Record<string, string> = {
     horizontal: `linear-gradient(to right, ${colors})`,
     vertical: `linear-gradient(to bottom, ${colors})`,
     skewLeft: `linear-gradient(135deg, ${colors})`,
@@ -81,60 +85,57 @@ function getVideoGradient(style) {
   return dirMap[style.bgGradientDir] || dirMap.horizontal;
 }
 
-export default {
-  props: ["res"],
-  title: "视频",
-  computed: {
-    item() {
-      const data = this.res.list[0] || {};
-      ensureVideoItem(data);
-      return data;
-    },
-    wrapperStyle() {
-      const style = this.item.style;
-      return {
-        margin: `${style.margin || 0}px`,
-        padding: `${style.padding || 0}px`,
-        background: style.bottomBgColor || "#F5F5F5",
-        boxSizing: "border-box",
-      };
-    },
-    boxStyle() {
-      const style = this.item.style;
-      const box = {
-        borderRadius: `${style.bgRadius || 0}px`,
-        overflow: "hidden",
-        position: "relative",
-        width: "100%",
-      };
+const item = computed(() => {
+  const data = props.res.list[0] || {};
+  ensureVideoItem(data);
+  return data;
+});
 
-      if (style.bgType === "image" && style.bgImage) {
-        box.backgroundImage = `url(${style.bgImage})`;
-        box.backgroundSize = "cover";
-        box.backgroundPosition = "center";
-      } else {
-        box.background = getVideoGradient(style);
-      }
+const wrapperStyle = computed(() => {
+  const style = item.value.style;
+  return {
+    margin: `${style.margin || 0}px`,
+    padding: `${style.padding || 0}px`,
+    background: style.bottomBgColor || "#F5F5F5",
+    boxSizing: "border-box",
+  };
+});
 
-      if (style.borderShow) {
-        box.border = `${style.borderWidth || 1}px ${style.borderStyle || "solid"} ${
-          style.borderColor || "#e5e5e5"
-        }`;
-      }
+const boxStyle = computed(() => {
+  const style = item.value.style;
+  const box: Record<string, string> = {
+    borderRadius: `${style.bgRadius || 0}px`,
+    overflow: "hidden",
+    position: "relative",
+    width: "100%",
+  };
 
-      if (style.shadowShow) {
-        box.boxShadow = `${style.shadowX || 0}px ${style.shadowY || 0}px ${
-          style.shadowBlur || 10
-        }px ${style.shadowSpread || 0}px ${style.shadowColor || "rgba(0,0,0,0.1)"}`;
-      }
+  if (style.bgType === "image" && style.bgImage) {
+    box.backgroundImage = `url(${style.bgImage})`;
+    box.backgroundSize = "cover";
+    box.backgroundPosition = "center";
+  } else {
+    box.background = getVideoGradient(style);
+  }
 
-      return box;
-    },
-    aspectPadding() {
-      return ASPECT_RATIO_MAP[this.item.aspectRatio] || ASPECT_RATIO_MAP["16:9"];
-    },
-  },
-};
+  if (style.borderShow) {
+    box.border = `${style.borderWidth || 1}px ${style.borderStyle || "solid"} ${
+      style.borderColor || "#e5e5e5"
+    }`;
+  }
+
+  if (style.shadowShow) {
+    box.boxShadow = `${style.shadowX || 0}px ${style.shadowY || 0}px ${
+      style.shadowBlur || 10
+    }px ${style.shadowSpread || 0}px ${style.shadowColor || "rgba(0,0,0,0.1)"}`;
+  }
+
+  return box;
+});
+
+const aspectPadding = computed(
+  () => ASPECT_RATIO_MAP[item.value.aspectRatio] || ASPECT_RATIO_MAP["16:9"]
+);
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/pages/tabbar/home/title.vue b/pages/tabbar/home/title.vue
index 5a1562b..bdfcdd5 100644
--- a/pages/tabbar/home/title.vue
+++ b/pages/tabbar/home/title.vue
@@ -8,7 +8,7 @@
 				@change="change"
 			></u-tabs>
 			<view v-if="showLoading" style="width:500rpx;margin:0 auto;text-align: center;height:800rpx;line-height: 800rpx;">
-				<u-loading mode="flower" ></u-loading>
+				<u-loading-icon mode="flower" ></u-loading-icon>
 				<text>正在加载中</text>
 			</view>
 			<u-cell-group v-if="current == 0">
@@ -64,130 +64,124 @@
 	</view>
 </template>
 
-<script>
-	import {
-		messages,
-		editMessages
-	} from "@/api/message.js"
-	export default {
-		data() {
-			return {
-				showLoading:true,
-				params: {
-					pageSize: 20,
-					pageNumber: 1,
-					memberId: "",
-					messageId: "",
-					status:"UN_READY"
-				},
-				loadText: {
-					loadmore: '轻轻上拉',
-					loading: '努力加载中',
-					nomore: '实在没有了'
-				},
-				list: [{
-					name: "未读"
-				}, {
-					name: "已读"
-				}],
-				current: 0,
-				lists: [],
-				status: "loadmore"
-			}
-		},
-		onShow() {
-			this.getMessage()
-		},
-		onReachBottom() {
-			this.params.pageNumber++;
-			this.statuss = "loading";
-			this.getMessage()
-		},
-		methods: {
-			linkMsgDetail(v) {
+<script setup lang="ts">
+import { ref, reactive, computed } from 'vue'
+import { onShow, onReachBottom } from '@dcloudio/uni-app'
+import { messages, editMessages } from '@/api/message.js'
+import { useStore } from '@/store'
+import { isLogin } from '@/utils/filters.js'
 
-				if (v.status == 'UN_READY') {
-					let params = {}
-					params.messageId = v.memberId
-					editMessages(v.id, params).then(res => {
-						if (res.data.success) {
-                            console.log( this.lists)
-                            this.lists.forEach((item,index)=>{
-                                console.log(item)
-                                if(item.id == v.id){
-                                    this.lists.splice(index, 1)
-                                }
-                            })
-						}
-					})
-				}
-				
-				// uni.navigateTo({
-				// 	url:`/pages/tabbar/home/messageDetail?data=${encodeURIComponent(JSON.stringify(v))}`
-				// })
-				
+const store = useStore()
+const lightColor = computed(() => store.getters.lightColor)
+const mainColor = computed(() => store.getters.mainColor)
+const aiderLightColor = computed(() => store.getters.aiderLightColor)
 
-			},
-			/**
-			 * 返回
-			 */
-			back() {
-				if (getCurrentPages().length == 1) {
-					uni.switchTab({
-						url: "/pages/tabbar/home/index",
-					});
-				} else {
-					uni.navigateBack();
-				}
-			},
-			change(e) {
-				const index = typeof e === 'object' && e != null ? e.index : e;
-				this.showLoading = true;
-				this.current = index;
-				if (index == 0) {
-					this.params.status = "UN_READY"
-					this.params.pageNumber = 1;
-				} else if (index == 1) {
-					this.params.status = "ALREADY_READY"
-					this.params.pageNumber = 1;
-				}
-				this.lists = []
-				this.getMessage()
-			},
-			getMessage() {
-				this.params.memberId = this.isLogin().id;
-				
-				messages(this.params).then(res => {
-					console.log(res)
-					if (res.data.success) {
-						this.showLoading = false
-						if (res.data.result.records == '') {
-							console.log(11111)
-							this.status = "nomore"
-						}
-						res.data.result.records.forEach(item => {
-							this.lists.push(item)
-							let obj = {};
-							this.lists = this.lists.reduce(
-								(cur, next) => {
-									//对象去重
-									if (next.id != undefined) {
-										obj[next.id] ?
-											"" :
-											(obj[next.id] = true && cur.push(next));
-									}
-									console.log(cur);
-									return cur;
-								},
-								[]
-							)
-						})
+const showLoading = ref(true)
+const params = reactive({
+	pageSize: 20,
+	pageNumber: 1,
+	memberId: '',
+	messageId: '',
+	status: 'UN_READY'
+})
+const loadText = {
+	loadmore: '轻轻上拉',
+	loading: '努力加载中',
+	nomore: '实在没有了'
+}
+const list = [
+	{ name: '未读' },
+	{ name: '已读' }
+]
+const current = ref(0)
+const lists = ref<any[]>([])
+const status = ref('loadmore')
 
+onShow(() => {
+	getMessage()
+})
+
+onReachBottom(() => {
+	params.pageNumber++
+	status.value = 'loading'
+	getMessage()
+})
+
+function linkMsgDetail(v: any) {
+	if (v.status == 'UN_READY') {
+		const editParams: any = {}
+		editParams.messageId = v.memberId
+		editMessages(v.id, editParams).then((res: any) => {
+			if (res.data.success) {
+				console.log(lists.value)
+				lists.value.forEach((item: any, index: number) => {
+					console.log(item)
+					if (item.id == v.id) {
+						lists.value.splice(index, 1)
 					}
 				})
 			}
-		},
+		})
 	}
+}
+
+/**
+ * 返回
+ */
+function back() {
+	if (getCurrentPages().length == 1) {
+		uni.switchTab({
+			url: '/pages/tabbar/home/index'
+		})
+	} else {
+		uni.navigateBack()
+	}
+}
+
+function change(e: any) {
+	const index = typeof e === 'object' && e != null ? e.index : e
+	showLoading.value = true
+	current.value = index
+	if (index == 0) {
+		params.status = 'UN_READY'
+		params.pageNumber = 1
+	} else if (index == 1) {
+		params.status = 'ALREADY_READY'
+		params.pageNumber = 1
+	}
+	lists.value = []
+	getMessage()
+}
+
+function getMessage() {
+	params.memberId = isLogin().id
+
+	messages(params).then((res: any) => {
+		console.log(res)
+		if (res.data.success) {
+			showLoading.value = false
+			if (res.data.result.records == '') {
+				console.log(11111)
+				status.value = 'nomore'
+			}
+			res.data.result.records.forEach((item: any) => {
+				lists.value.push(item)
+				let obj: Record<string, any> = {}
+				lists.value = lists.value.reduce(
+					(cur: any[], next: any) => {
+						// 对象去重
+						if (next.id != undefined) {
+							!obj[next.id] && (obj[next.id] = true) && cur.push(next)
+						}
+						console.log(cur)
+						return cur
+					},
+					[]
+				)
+			})
+		}
+	})
+}
 </script>
 <style>
 	.foot {
diff --git a/pages/tabbar/home/views.vue b/pages/tabbar/home/views.vue
index c418d95..e820bc5 100644
--- a/pages/tabbar/home/views.vue
+++ b/pages/tabbar/home/views.vue
@@ -1,312 +1,4 @@
+<!-- 首页已合并至 index.vue，请勿再引用本文件 -->
 <template>
-  <div class="wrapper" :style="themeStyle">
-    <!-- uni 中不能使用 vue component 所以用if判断每个组件 -->
-    <div v-for="(item, index) in pageData.list" :key="index">
-      <!-- 搜索栏，如果在楼层装修顶部则会自动浮动，否则不浮动 -->
-      <u-navbar
-        class="navbar"
-        v-if="item.type == 'search'"
-        :auto-back="false"
-        :fixed="index === 1 ? false : true"
-        :placeholder="index === 1 ? false : true"
-        left-icon=""
-        title=""
-        bg-color="#ffffff"
-      >
-        <template #left>
-          <view class="navbar-search-wrap" :style="searchBarStyle" @click.stop>
-            <search :res="item.options" />
-          </view>
-        </template>
-      </u-navbar>
-      <carousel v-if="item.type == 'carousel'" :res="item.options" />
-      <titleLayout v-if="item.type == 'title'" :res="item.options" />
-      <leftOneRightTwo v-if="item.type == 'leftOneRightTwo'" :res="item.options" />
-      <leftTwoRightOne v-if="item.type == 'leftTwoRightOne'" :res="item.options" />
-      <topOneBottomTwo v-if="item.type == 'topOneBottomTwo'" :res="item.options" />
-      <topTwoBottomOne v-if="item.type == 'topTwoBottomOne'" :res="item.options" />
-      <flexThree v-if="item.type == 'flexThree'" :res="item.options" />
-      <flexFive v-if="item.type == 'flexFive'" :res="item.options" />
-      <flexFour v-if="item.type == 'flexFour'" :res="item.options" />
-      <flexTwo v-if="item.type == 'flexTwo'" :res="item.options" />
-      <textPicture v-if="item.type == 'textPicture'" :res="item.options" />
-      <menuLayout v-if="item.type == 'menu'" :res="item.options" />
-      <flexOne v-if="item.type == 'flexOne'" :res="item.options" />
-      <goods :enableBottomLoad="enableLoad" v-if="item.type == 'goods'" :res="item.options" />
-      <group v-if="item.type == 'group'" :res="item.options" />
-      <notice v-if="item.type == 'notice'" :res="item.options" />
-      <promotions v-if="item.type == 'promotionDetail'" :res="item.options" />
-      <!-- <integral v-if="item.type == 'integral'" :res="item.options" /> -->
-      <!-- <spike v-if="item.type == 'spike'" :res="item.options" /> -->
-      <videoLayout v-if="item.type == 'video'" :res="item.options" />
-    </div>
-    <fetchCoupon ref='coupon' />
-    <u-no-network @retry="init" @isConnected="isConnected"></u-no-network>
-  </div>
+  <view />
 </template>
-
-<script>
-// 引用组件
-import tpl_banner from "@/pages/tabbar/home/template/tpl_banner"; //导航栏模块
-import tpl_title from "@/pages/tabbar/home/template/tpl_title"; //标题栏模块
-import tpl_left_one_right_two from "@/pages/tabbar/home/template/tpl_left_one_right_two"; //左一右二模块
-import tpl_left_two_right_one from "@/pages/tabbar/home/template/tpl_left_two_right_one"; //左二右一模块
-import tpl_top_one_bottom_two from "@/pages/tabbar/home/template/tpl_top_one_bottom_two"; //上一下二模块
-import tpl_top_two_bottom_one from "@/pages/tabbar/home/template/tpl_top_two_bottom_one"; //上二下一模块
-import tpl_flex_one from "@/pages/tabbar/home/template/tpl_flex_one"; //单行图片模块
-import tpl_flex_two from "@/pages/tabbar/home/template/tpl_flex_two"; //两张横图模块
-import tpl_flex_three from "@/pages/tabbar/home/template/tpl_flex_three"; //三列单行图片模块
-import tpl_flex_five from "@/pages/tabbar/home/template/tpl_flex_five"; //五列单行图片模块
-import tpl_flex_four from "@/pages/tabbar/home/template/tpl_flex_four"; //四列单行图片模块
-import tpl_text_picture from "@/pages/tabbar/home/template/tpl_text_picture"; //文字图片模板
-import tpl_menu from "@/pages/tabbar/home/template/tpl_menu"; //五列菜单模块
-import tpl_search from "@/pages/tabbar/home/template/tpl_search"; //搜索栏
-import tpl_group from "@/pages/tabbar/home/template/tpl_group"; //
-import tpl_video from "@/pages/tabbar/home/template/tpl_video"; //视频模块
-import tpl_goods from "@/pages/tabbar/home/template/tpl_goods"; //商品分类以及分类中的商品
-// 结束引用组件
-import { getFloorData } from "@/api/home"; //获取楼层装修接口
-import permission from "@/js_sdk/wa-permission/permission.js"; //权限工具类
-import config from "@/config/config";
-
-import tpl_notice from "@/pages/tabbar/home/template/tpl_notice"; //标题栏模块
-import tpl_promotions from "@/pages/tabbar/home/template/tpl_promotions_detail"; //标题栏模块
-import storage from "@/utils/storage.js";
-import fetchCoupon from '@/pages/tabbar/home/template/fetch_coupon'
-// 与 tpl.scss $home-layout-padding 保持一致
-const HOME_LAYOUT_PADDING_RPX = 16;
-// import {receiveCoupons} from "@/api/members"
-
-export default {
-  data () {
-    return {
-      config,
-      storage,
-      showCp:true,
-      pageData: "", //楼层页面数据
-      isIos: "",
-      enableLoad: false, //触底加载 针对于商品模块
-      capsuleInsetRight: 0,
-      searchBarWidth: 0,
-    };
-  },
-  computed: {
-    searchBarStyle() {
-      if (this.searchBarWidth) {
-        return {
-          width: `${this.searchBarWidth}px`,
-        };
-      }
-      return {
-        width: "100%",
-      };
-    },
-  },
-  components: {
-    carousel: tpl_banner,
-    titleLayout: tpl_title,
-    leftOneRightTwo: tpl_left_one_right_two,
-    leftTwoRightOne: tpl_left_two_right_one,
-    topOneBottomTwo: tpl_top_one_bottom_two,
-    topTwoBottomOne: tpl_top_two_bottom_one,
-    flexThree: tpl_flex_three,
-    flexFive: tpl_flex_five,
-    flexFour: tpl_flex_four,
-    flexTwo: tpl_flex_two,
-    textPicture: tpl_text_picture,
-    menuLayout: tpl_menu,
-    search: tpl_search,
-    flexOne: tpl_flex_one,
-    goods: tpl_goods,
-    group: tpl_group,
-    notice: tpl_notice,
-    promotions: tpl_promotions,
-    videoLayout: tpl_video,
-    fetchCoupon
-  },
-
-  mounted () {
-    this.setCapsuleInset();
-    this.init();
-    // #ifdef MP-WEIXIN
-    // 小程序默认分享
-    uni.showShareMenu({ withShareTicket: true });
-    // #endif
-   
-  },
-  methods: {
-    setCapsuleInset() {
-      try {
-        const { windowWidth } = uni.getWindowInfo();
-        const leftPadding = uni.upx2px(HOME_LAYOUT_PADDING_RPX);
-        const rightPadding = uni.upx2px(HOME_LAYOUT_PADDING_RPX);
-        // #ifdef MP-WEIXIN
-        const menuButton = uni.getMenuButtonBoundingClientRect();
-        this.capsuleInsetRight = windowWidth - menuButton.left;
-        this.searchBarWidth =
-          windowWidth - this.capsuleInsetRight - leftPadding;
-        // #endif
-        // #ifndef MP-WEIXIN
-        this.searchBarWidth = windowWidth - leftPadding - rightPadding;
-        // #endif
-      } catch (e) {
-        this.capsuleInsetRight = 0;
-        this.searchBarWidth = 0;
-      }
-    },
-    fetchCoupon(){
-       this.$refs.coupon.firstGetAuto();
-    },
-    /**
-     * 实例化首页数据楼层
-     */
-    init () {
-      this.pageData = "";
-      getFloorData().then((res) => {
-        if (res.data.success) {
-          const result = JSON.parse(res.data.result.pageData)
-          this.pageData = result;
-          if (result.list.length) {
-            // 如果最后一个装修模块是商品模块的话 默认启用自动加载
-            result.list[result.list.length - 1] ? result.list[result.list.length - 1].model == 'goods' ? this.enableLoad = true : '' : ''
-          }
-        }
-      });
-    },
-    // 是否有网络链接
-    isConnected (val) {
-      val ? this.init() : ''
-    },
-
-    /**
-     * TODO 扫码功能后续还会后续增加
-     * 应该实现的功能目前计划有：
-     * 扫描商品跳转商品页面
-     * 扫描活动跳转活动页面
-     * 扫描二维码登录
-     * 扫描其他站信息 弹出提示，返回首页。
-     */
-    scanCode () {
-      uni.scanCode({
-        success: function (res) {
-          let path = encodeURIComponent(res.result);
-
-
-
-          if (path != undefined && path.indexOf("QR_CODE_LOGIN_SESSION") == 0) {
-            console.log(path)
-            //app扫码登录
-            uni.navigateTo({
-              url: "/pages/passport/scannerCodeLoginConfirm?token=" + path
-            });
-            return;
-          }
-
-
-          // WX_CODE 为小程序码
-          if (res.scanType == "WX_CODE") {
-            console.log(res);
-            uni.navigateTo({
-              url: `/${res.path}`,
-            });
-          } else {
-            config.scanAuthNavigation.forEach((src) => {
-              if (res.result.indexOf(src) != -1) {
-                uni.navigateTo({
-                  url: `/${res.result.substring(src.length)}`,
-                });
-              } else {
-                setTimeout(() => {
-                  uni.navigateTo({
-                    url: "/pages/tabbar/home/web-view?src=" + path,
-                  });
-                }, 100);
-              }
-            });
-          }
-        },
-      });
-    },
-
-    /**
-     * 提示获取权限
-     */
-    tipsGetSettings () {
-      uni.showModal({
-        title: "提示",
-        content: "您已经关闭相机权限,去设置",
-        success: function (res) {
-          if (res.confirm) {
-            if (this.isIos) {
-              plus.runtime.openURL("app-settings:");
-            } else {
-              permission.gotoAppPermissionSetting();
-            }
-          }
-        },
-      });
-    },
-
-    /**
-     * 唤醒客户端扫码
-     * 没权限去申请权限，有权限获取扫码功能
-     */
-    async scan () {
-      // #ifdef APP-PLUS
-      this.isIos = plus.os.name == "iOS";
-      // 判断是否是Ios
-      if (this.isIos) {
-        const iosFirstCamera = uni.getStorageSync("iosFirstCamera"); //是不是第一次开启相机
-        if (iosFirstCamera !== "false") {
-          uni.setStorageSync("iosFirstCamera", "false"); //设为false就代表不是第一次开启相机
-          this.scanCode();
-        } else {
-          if (permission.judgeIosPermission("camera")) {
-            this.scanCode();
-          } else {
-            // 没有权限提醒是否去申请权限
-            this.tipsGetSettings();
-          }
-        }
-      } else {
-        /**
-         * TODO 安卓 权限已经授权了，调用api总是显示用户已永久拒绝申请。人傻了
-         * TODO 如果xdm有更好的办法请在 https://gitee.com/beijing_hongye_huicheng/lilishop/issues 提下谢谢
-         */
-        this.scanCode();
-      }
-
-      // #endif
-
-      // #ifdef MP-WEIXIN
-      this.scanCode();
-      // #endif
-    },
-  },
-};
-</script>
-
-<style scoped lang="scss">
-@import "@/pages/tabbar/home/template/tpl.scss";
-
-.navbar {
-  width: 100%;
-
-  :deep(.u-navbar__content) {
-    width: 100%;
-  }
-
-  :deep(.u-navbar__content__left) {
-    flex: 1;
-    width: auto !important;
-    max-width: 100%;
-    padding: 0 0 0 $home-layout-padding !important;
-  }
-}
-
-.navbar-search-wrap {
-  box-sizing: border-box;
-  flex: 1;
-  min-width: 0;
-}
-</style>
diff --git a/pages/tabbar/home/web-view.vue b/pages/tabbar/home/web-view.vue
index 5d7f776..dad7045 100644
--- a/pages/tabbar/home/web-view.vue
+++ b/pages/tabbar/home/web-view.vue
@@ -4,43 +4,38 @@
   </view>
 </template>
 
-<script>
-import configs from "@/config/config";
-import storage from "@/utils/storage";
-export default {
-  data() {
-    return {
-      configs,
-      storage,
-      webviewStyles: {
-        progress: {
-          color: this.$lightColor,
-        },
-      },
-      src: "",
-    };
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import configs from '@/config/config'
+import storage from '@/utils/storage'
+import { useStore } from '@/store'
+
+const store = useStore()
+const lightColor = computed(() => store.getters.lightColor)
+const mainColor = computed(() => store.getters.mainColor)
+const aiderLightColor = computed(() => store.getters.aiderLightColor)
+
+const webviewStyles = computed(() => ({
+  progress: {
+    color: lightColor.value,
   },
-  onLoad(params) {
-    // params.IM ? (this.src = `${configs.imWebSrc}?token=${storage.getAccessToken()}&id=${params.IM}`): (this.src = decodeURIComponent(params.src));
-	if(params.IM)
-	{
-		if(params.IM==0)
-		{
-			this.src = `${configs.imWebSrc}?token=${storage.getAccessToken()}`;
-		}
-		else
-		{
-			this.src = `${configs.imWebSrc}?token=${storage.getAccessToken()}&id=${params.IM}`;
-		}
-	}
-	else
-	{
-		this.src = decodeURIComponent(params.src);
-		console.log(this.src);
-	}
-    
-  },
-};
+}))
+
+const src = ref('')
+
+onLoad((params) => {
+  if (params.IM) {
+    if (params.IM == 0) {
+      src.value = `${configs.imWebSrc}?token=${storage.getAccessToken()}`
+    } else {
+      src.value = `${configs.imWebSrc}?token=${storage.getAccessToken()}&id=${params.IM}`
+    }
+  } else {
+    src.value = decodeURIComponent(params.src)
+    console.log(src.value)
+  }
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/tabbar/screen/fullScreen.vue b/pages/tabbar/screen/fullScreen.vue
index fb9370b..845fc68 100644
--- a/pages/tabbar/screen/fullScreen.vue
+++ b/pages/tabbar/screen/fullScreen.vue
@@ -12,76 +12,41 @@
   </u-modal>
 </template>
 
-<script>
-import storage from "@/utils/storage";
-export default {
-  created() {
-    //先进入 created
-    // if (storage.getShow()) {
-    //   //展示的话进入  true
-    //   console.log(this.show); //如果上面没读缓存  此时 this.show 为true
-    //   if (!this.show) {
-    //     //如果等于 false 了 就跳到主页
-    //     this.show = storage.getShow(); //这里就为false
-    //     setTimeout(() => {
-    //       //然后这里就跳转到  首页
-    //       uni.reLaunch({
-    //         //跳转到 首页
-    //         url: "/pages/tabbar/home/index",
-    //       });
-    //     }, 500);
-    //   }
-    // }
-  },
-  data() {
-    return {
-      show: true, //展示
-      btnShow:true,
-      a: "",
-    };
-  },
-  //   onReady() {
-  //     this.show = true;
-  //   },
-  methods: {
-    gotoLink() {
-      uni.navigateTo({
-        //点击跳转到浏览器
-        url:
-          "/pages/tabbar/home/web-view?src=https://pc-b2b2c.pickmall.cn/article/detail?id=1371992704333905920",
-      });
-    },
-    gotoB() {
-      uni.navigateTo({
-        url:
-          "/pages/tabbar/home/web-view?src=https://pc-b2b2c.pickmall.cn/article/detail?id=1371779927900160000",
-      });
-    },
-     //取消
-    cancel(){
-      // #ifdef APP-PLUS
-        //  const threadClass = plus.ios.importClass("NSThread");
-        //  const mainThread = plus.ios.invoke(threadClass, "mainThread");
-        //  plus.ios.invoke(mainThread, "exit")
-       plus.ios.import("UIApplication").sharedApplication().performSelector("exit")
-		 // #endif
-    },
-    confirm() {
-      //点击
-      this.show = false; // 让这个框为false
-      storage.setShow(this.show); //存入缓存
-      if (!this.show) {
-        // 他如果 不展示  就跳转到主页
-        setTimeout(() => {
-          uni.reLaunch({
-            //跳转到 首页
-            url: "/pages/tabbar/home/index",
-          });
-        }, 500);
-      }
-    },
-  },
-};
+<script setup lang="ts">
+import { ref } from 'vue'
+import storage from '@/utils/storage'
+
+const show = ref(true)
+
+function gotoLink() {
+  uni.navigateTo({
+    url: '/pages/tabbar/home/web-view?src=https://pc-b2b2c.pickmall.cn/article/detail?id=1371992704333905920',
+  })
+}
+
+function gotoB() {
+  uni.navigateTo({
+    url: '/pages/tabbar/home/web-view?src=https://pc-b2b2c.pickmall.cn/article/detail?id=1371779927900160000',
+  })
+}
+
+function cancel() {
+  // #ifdef APP-PLUS
+  plus.ios.import('UIApplication').sharedApplication().performSelector('exit')
+  // #endif
+}
+
+function confirm() {
+  show.value = false
+  storage.setShow(show.value)
+  if (!show.value) {
+    setTimeout(() => {
+      uni.reLaunch({
+        url: '/pages/tabbar/home/index',
+      })
+    }, 500)
+  }
+}
 </script>
 
 <style scoped>
diff --git a/pages/tabbar/special/special.vue b/pages/tabbar/special/special.vue
index 4c58b38..96c19f9 100644
--- a/pages/tabbar/special/special.vue
+++ b/pages/tabbar/special/special.vue
@@ -49,192 +49,136 @@
   </div>
 </template>
 
-<script>
-// 引用组件
-import tpl_banner from "@/pages/tabbar/home/template/tpl_banner"; //导航栏模块
-import tpl_title from "@/pages/tabbar/home/template/tpl_title"; //标题栏模块
-import tpl_left_one_right_two from "@/pages/tabbar/home/template/tpl_left_one_right_two"; //左一右二模块
-import tpl_left_two_right_one from "@/pages/tabbar/home/template/tpl_left_two_right_one"; //左二右一模块
-import tpl_top_one_bottom_two from "@/pages/tabbar/home/template/tpl_top_one_bottom_two"; //上一下二模块
-import tpl_top_two_bottom_one from "@/pages/tabbar/home/template/tpl_top_two_bottom_one"; //上二下一模块
-import tpl_flex_one from "@/pages/tabbar/home/template/tpl_flex_one"; //单行图片模块
-import tpl_flex_two from "@/pages/tabbar/home/template/tpl_flex_two"; //两张横图模块
-import tpl_flex_three from "@/pages/tabbar/home/template/tpl_flex_three"; //三列单行图片模块
-import tpl_flex_five from "@/pages/tabbar/home/template/tpl_flex_five"; //五列单行图片模块
-import tpl_flex_four from "@/pages/tabbar/home/template/tpl_flex_four"; //四列单行图片模块
-import tpl_text_picture from "@/pages/tabbar/home/template/tpl_text_picture"; //文字图片模板
-import tpl_menu from "@/pages/tabbar/home/template/tpl_menu"; //五列菜单模块
-import tpl_search from "@/pages/tabbar/home/template/tpl_search"; //搜索栏
-import tpl_group from "@/pages/tabbar/home/template/tpl_group"; //
-import tpl_video from "@/pages/tabbar/home/template/tpl_video"; //视频模块
-import tpl_goods from "@/pages/tabbar/home/template/tpl_goods"; //商品分类以及分类中的商品
-// 结束引用组件
-import { toSpecial, getSpecial } from "@/api/home"; //获取楼层装修接口
-import permision from "@/js_sdk/wa-permission/permission.js"; //权限工具类
-import config from "@/config/config";
-import tpl_notice from "@/pages/tabbar/home/template/tpl_notice"; //标题栏模块
-import tpl_promotions from "@/pages/tabbar/home/template/tpl_promotions_detail"; //标题栏模块
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import carousel from '@/pages/tabbar/home/template/tpl_banner'
+import titleLayout from '@/pages/tabbar/home/template/tpl_title'
+import leftOneRightTwo from '@/pages/tabbar/home/template/tpl_left_one_right_two'
+import leftTwoRightOne from '@/pages/tabbar/home/template/tpl_left_two_right_one'
+import topOneBottomTwo from '@/pages/tabbar/home/template/tpl_top_one_bottom_two'
+import topTwoBottomOne from '@/pages/tabbar/home/template/tpl_top_two_bottom_one'
+import flexOne from '@/pages/tabbar/home/template/tpl_flex_one'
+import flexTwo from '@/pages/tabbar/home/template/tpl_flex_two'
+import flexThree from '@/pages/tabbar/home/template/tpl_flex_three'
+import flexFive from '@/pages/tabbar/home/template/tpl_flex_five'
+import flexFour from '@/pages/tabbar/home/template/tpl_flex_four'
+import textPicture from '@/pages/tabbar/home/template/tpl_text_picture'
+import menuLayout from '@/pages/tabbar/home/template/tpl_menu'
+import search from '@/pages/tabbar/home/template/tpl_search'
+import group from '@/pages/tabbar/home/template/tpl_group'
+import videoLayout from '@/pages/tabbar/home/template/tpl_video'
+import goods from '@/pages/tabbar/home/template/tpl_goods'
+import notice from '@/pages/tabbar/home/template/tpl_notice'
+import promotions from '@/pages/tabbar/home/template/tpl_promotions_detail'
+import { toSpecial, getSpecial } from '@/api/home'
+import permision from '@/js_sdk/wa-permission/permission.js'
+import config from '@/config/config'
 
-export default {
-  data() {
-    return {
-      id: "",
-      config,
-      pageData: "", //楼层页面数据
-      bodyParam: "",
-      isIos: ""
-    };
-  },
-  components: {
-    carousel: tpl_banner,
-    titleLayout: tpl_title,
-    leftOneRightTwo: tpl_left_one_right_two,
-    leftTwoRightOne: tpl_left_two_right_one,
-    topOneBottomTwo: tpl_top_one_bottom_two,
-    topTwoBottomOne: tpl_top_two_bottom_one,
-    flexThree: tpl_flex_three,
-    flexFive: tpl_flex_five,
-    flexFour: tpl_flex_four,
-    flexTwo: tpl_flex_two,
-    textPicture: tpl_text_picture,
-    menuLayout: tpl_menu,
-    search: tpl_search,
-    flexOne: tpl_flex_one,
-    goods: tpl_goods,
-    group: tpl_group,
-    notice: tpl_notice,
-    promotions: tpl_promotions,
-    videoLayout: tpl_video
-  },
+const id = ref('')
+const pageData = ref<any>('')
+const bodyParam = ref('')
+const isIos = ref('')
 
-  mounted() {
-    this.init();
-    // #ifdef MP-WEIXIN
-    // 小程序默认分享
-    uni.showShareMenu({ withShareTicket: true });
-    // #endif
-  },
-  onLoad(val) {
-    this.id = val.id;
-    this.bodyParam = val.body;
-  },
+onMounted(() => {
+  init()
+  // #ifdef MP-WEIXIN
+  uni.showShareMenu({ withShareTicket: true })
+  // #endif
+})
 
-  methods: {
-    /**
-     * 实例化首页数据楼层
-     */
-    init() {
-      this.pageData = "";
-	  console.log(this.bodyParam);
-      if (this.bodyParam) {
-        toSpecial({body: this.bodyParam}).then(res => {
-          if (res.data.success) {
-            this.pageData = JSON.parse(res.data.result.pageData);
-          }
-        });
-      } else {
-        getSpecial(this.id).then(res => {
-        if (res.data.success) {
-          this.pageData = JSON.parse(res.data.result.pageData);
-        }
-      });
+onLoad((val) => {
+  id.value = val.id
+  bodyParam.value = val.body
+})
+
+function init() {
+  pageData.value = ''
+  console.log(bodyParam.value)
+  if (bodyParam.value) {
+    toSpecial({ body: bodyParam.value }).then((res) => {
+      if (res.data.success) {
+        pageData.value = JSON.parse(res.data.result.pageData)
       }
-    },
-
-    /**
-     * TODO 扫码功能后续还会后续增加
-     * 应该实现的功能目前计划有：
-     * 扫描商品跳转商品页面
-     * 扫描活动跳转活动页面
-     * 扫描二维码登录
-     * 扫描其他站信息 弹出提示，返回首页。
-     */
-    seacnCode() {
-      uni.scanCode({
-        success: function(res) {
-          let path = encodeURIComponent(res.result);
-
-          // WX_CODE 为小程序码
-          if (res.scanType == "WX_CODE") {
-            console.log(res);
-            uni.navigateTo({
-              url: `/${res.path}`
-            });
-          } else {
-            config.scanAuthNavigation.forEach(src => {
-              if (res.result.indexOf(src) != -1) {
-                uni.navigateTo({
-                  url: `/${res.result.substring(src.length)}`
-                });
-              } else {
-                setTimeout(() => {
-                  uni.navigateTo({
-                    url: "/pages/tabbar/home/web-view?src=" + path
-                  });
-                }, 100);
-              }
-            });
-          }
-        }
-      });
-    },
-
-    /**
-     * 提示获取权限
-     */
-    tipsGetSettings() {
-      uni.showModal({
-        title: "提示",
-        content: "您已经关闭相机权限,去设置",
-        success: function(res) {
-          if (res.confirm) {
-            if (this.isIos) {
-              plus.runtime.openURL("app-settings:");
-            } else {
-              permision.gotoAppPermissionSetting();
-            }
-          }
-        }
-      });
-    },
-
-    /**
-     * 唤醒客户端扫码
-     * 没权限去申请权限，有权限获取扫码功能
-     */
-    async scan() {
-      // #ifdef APP-PLUS
-      this.isIos = plus.os.name == "iOS";
-      // 判断是否是Ios
-      if (this.isIos) {
-        const iosFirstCamera = uni.getStorageSync("iosFirstCamera"); //是不是第一次开启相机
-        if (iosFirstCamera !== "false") {
-          uni.setStorageSync("iosFirstCamera", "false"); //设为false就代表不是第一次开启相机
-          this.seacnCode();
-        } else {
-          if (permision.judgeIosPermission("camera")) {
-            this.seacnCode();
-          } else {
-            // 没有权限提醒是否去申请权限
-            this.tipsGetSettings();
-          }
-        }
-      } else {
-        /**
-         * TODO 安卓 权限已经授权了，调用api总是显示用户已永久拒绝申请。人傻了
-         * TODO 如果xdm有更好的办法请在 https://gitee.com/beijing_hongye_huicheng/lilishop/issues 提下谢谢
-         */
-        this.seacnCode();
+    })
+  } else {
+    getSpecial(id.value).then((res) => {
+      if (res.data.success) {
+        pageData.value = JSON.parse(res.data.result.pageData)
       }
-
-      // #endif
-
-      // #ifdef MP-WEIXIN
-      this.seacnCode();
-      // #endif
-    }
+    })
   }
-};
+}
+
+function seacnCode() {
+  uni.scanCode({
+    success: function (res) {
+      const path = encodeURIComponent(res.result)
+
+      if (res.scanType == 'WX_CODE') {
+        console.log(res)
+        uni.navigateTo({
+          url: `/${res.path}`,
+        })
+      } else {
+        config.scanAuthNavigation.forEach((src) => {
+          if (res.result.indexOf(src) != -1) {
+            uni.navigateTo({
+              url: `/${res.result.substring(src.length)}`,
+            })
+          } else {
+            setTimeout(() => {
+              uni.navigateTo({
+                url: '/pages/tabbar/home/web-view?src=' + path,
+              })
+            }, 100)
+          }
+        })
+      }
+    },
+  })
+}
+
+function tipsGetSettings() {
+  uni.showModal({
+    title: '提示',
+    content: '您已经关闭相机权限,去设置',
+    success: function (res) {
+      if (res.confirm) {
+        if (isIos.value) {
+          plus.runtime.openURL('app-settings:')
+        } else {
+          permision.gotoAppPermissionSetting()
+        }
+      }
+    },
+  })
+}
+
+async function scan() {
+  // #ifdef APP-PLUS
+  isIos.value = plus.os.name == 'iOS'
+  if (isIos.value) {
+    const iosFirstCamera = uni.getStorageSync('iosFirstCamera')
+    if (iosFirstCamera !== 'false') {
+      uni.setStorageSync('iosFirstCamera', 'false')
+      seacnCode()
+    } else {
+      if (permision.judgeIosPermission('camera')) {
+        seacnCode()
+      } else {
+        tipsGetSettings()
+      }
+    }
+  } else {
+    seacnCode()
+  }
+  // #endif
+
+  // #ifdef MP-WEIXIN
+  seacnCode()
+  // #endif
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/pages/tabbar/user/my.vue b/pages/tabbar/user/my.vue
index ead3a37..29b44a6 100644
--- a/pages/tabbar/user/my.vue
+++ b/pages/tabbar/user/my.vue
@@ -72,83 +72,83 @@
 
   </view>
 </template>
-<script>
-import tool from "@/pages/tabbar/user/utils/tool.vue";
-import { getCouponsNum, getFootprintNum } from "@/api/members.js";
-import { getUserWallet } from "@/api/members";
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import {
+  onLoad,
+  onShow,
+  onPullDownRefresh,
+  onNavigationBarButtonTap,
+} from '@dcloudio/uni-app'
+import tool from '@/pages/tabbar/user/utils/tool.vue'
+import { getCouponsNum, getFootprintNum } from '@/api/members.js'
+import { getUserWallet } from '@/api/members'
 import configs from '@/config/config'
-export default {
-  components: {
-    tool,
-  },
-  data() {
-    return {
-      configs,
-      userImage:configs.defaultUserPhoto,
-      coverTransform: "translateY(0px)",
-      coverTransition: "0s",
-      moving: false,
-      userInfo: {},
-      couponNum: "",
-      footNum: "",
-      walletNum: "",
-    };
-  },
-  onLoad() { },
-  onShow() {
-    this.userInfo = this.isLogin() || {};
-    if (this.isLogin("auth")) {
-      this.getUserOrderNum();
-    } else {
-      this.walletNum = 0;
-      this.couponNum = 0;
-      this.footNum = 0;
-    }
-  },
-  onPullDownRefresh() {
-    this.getUserOrderNum();
-    this.userInfo = this.isLogin();
-  },
-  // #ifndef MP
-  onNavigationBarButtonTap(e) {
-    const index = e.index;
-    if (index === 0) {
-      this.navigateTo("/pages/mine/set/setUp");
-    }
-  },
-  // #endif
+import { useStore } from '@/store'
+import { getThemeStyle } from '@/utils/theme'
+import { isLogin, navigateToLogin, unitPrice } from '@/utils/filters.js'
 
-  mounted() { },
-  methods: {
-    /**
-     * 统一跳转接口,拦截未登录路由
-     * navigator标签现在默认没有转场动画，所以用view
-     */
-    navigateTo(url) {
-      uni.navigateTo({
-        url,
-      });
-    },
-    userDetail() {
-      this.userInfo.id
-        ? this.navigateTo("/pages/mine/set/personMsg")
-        : this.navigateToLogin();;
-    },
-    async getUserOrderNum() {
-      uni.stopPullDownRefresh();
+const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
+const lightColor = computed(() => store.getters.lightColor)
+const mainColor = computed(() => store.getters.mainColor)
+const aiderLightColor = computed(() => store.getters.aiderLightColor)
 
-      Promise.all([
-        getCouponsNum(), //优惠券
-        getFootprintNum(), //浏览数量
-        getUserWallet(), //预存款
-      ]).then((res) => {
-        this.couponNum = res[0].data.result;
-        this.footNum = res[1].data.result;
-        this.walletNum = res[2].data.result.memberWallet;
-      });
-    },
-  },
-};
+const userImage = configs.defaultUserPhoto
+const userInfo = ref<any>({})
+const couponNum = ref<string | number>('')
+const footNum = ref<string | number>('')
+const walletNum = ref<string | number>('')
+
+onLoad(() => {})
+
+onShow(() => {
+  userInfo.value = isLogin() || {}
+  if (isLogin('auth')) {
+    getUserOrderNum()
+  } else {
+    walletNum.value = 0
+    couponNum.value = 0
+    footNum.value = 0
+  }
+})
+
+onPullDownRefresh(() => {
+  getUserOrderNum()
+  userInfo.value = isLogin()
+})
+
+// #ifndef MP
+onNavigationBarButtonTap((e) => {
+  if (e.index === 0) {
+    navigateTo('/pages/mine/set/setUp')
+  }
+})
+// #endif
+
+function navigateTo(url: string) {
+  uni.navigateTo({ url })
+}
+
+function userDetail() {
+  userInfo.value.id
+    ? navigateTo('/pages/mine/set/personMsg')
+    : navigateToLogin()
+}
+
+async function getUserOrderNum() {
+  uni.stopPullDownRefresh()
+
+  Promise.all([
+    getCouponsNum(),
+    getFootprintNum(),
+    getUserWallet(),
+  ]).then((res: any[]) => {
+    couponNum.value = res[0].data.result
+    footNum.value = res[1].data.result
+    walletNum.value = res[2].data.result.memberWallet
+  })
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/tabbar/user/similarGoods.vue b/pages/tabbar/user/similarGoods.vue
index ea44829..53a7f56 100644
--- a/pages/tabbar/user/similarGoods.vue
+++ b/pages/tabbar/user/similarGoods.vue
@@ -31,68 +31,68 @@
 	</view>
 </template>
 
-<script>
-	import {
-		getGoodsList
-	} from '@/api/goods.js';
-	export default {
-		data() {
-			return {
-				loadStatus: 'more',
-				params: {
-					pageNumber: 1,
-					pageSize: 10,
-					keyword: ''
-				},
-				goods: {},
-				goodsList: [],
-				nomsg: false,
-			};
-		},
-		methods: {
-			getList() {
-				uni.showLoading({
-					title: "加载中"
-				})
-				this.params.keyword = this.goods.goodsName;
-				getGoodsList(this.params).then(res => {
-					 if (this.$store.state.isShowToast){ uni.hideLoading() }
-					if (res.statusCode == 200) {
-						let data = res.data;
-						if (data.data_total == 0) {
-							// this.nomsg = true;
-							this.loadStatus = 'noMore';
-						} else if (data.data_total < 10) {
-							this.loadStatus = 'noMore'
-							this.goodsList.push(...data.data)
-						} else {
-							this.goodsList.push(...data.data);
-							if (data.data.length < 10) this.loadStatus = 'noMore'
-						}
-					}
-				})
-			},
-			goDetail(item) {
-				uni.navigateTo({
-					url: '/pages/product/goods?id=' + item.id + "&goodsId=" +item.goodsId
-				})
-			},
-			loadData() {
-				if(this.loadStatus!='noMore'){
-					this.params.pageNumber++;
-					this.getList()
-				}
-			},
-		},
-		onLoad(option) {
-			this.goods = JSON.parse(decodeURIComponent(option.goods))
-			
-			this.getList()
-		},
-		onReachBottom() { //触底事件，页面整个滚动使用
-			this.loadData()
-		}
-	}
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { onLoad, onReachBottom } from '@dcloudio/uni-app'
+import { getGoodsList } from '@/api/goods.js'
+import { useStore } from '@/store'
+import { unitPrice } from '@/utils/filters.js'
+
+const store = useStore()
+
+const loadStatus = ref('more')
+const params = reactive({
+  pageNumber: 1,
+  pageSize: 10,
+  keyword: '',
+})
+const goods = ref<any>({})
+const goodsList = ref<any[]>([])
+const nomsg = ref(false)
+
+function getList() {
+  uni.showLoading({ title: '加载中' })
+  params.keyword = goods.value.goodsName
+  getGoodsList(params).then((res) => {
+    if (store.state.isShowToast) {
+      uni.hideLoading()
+    }
+    if (res.statusCode == 200) {
+      const data = res.data
+      if (data.data_total == 0) {
+        loadStatus.value = 'noMore'
+      } else if (data.data_total < 10) {
+        loadStatus.value = 'noMore'
+        goodsList.value.push(...data.data)
+      } else {
+        goodsList.value.push(...data.data)
+        if (data.data.length < 10) loadStatus.value = 'noMore'
+      }
+    }
+  })
+}
+
+function goDetail(item: any) {
+  uni.navigateTo({
+    url: '/pages/product/goods?id=' + item.id + '&goodsId=' + item.goodsId,
+  })
+}
+
+function loadData() {
+  if (loadStatus.value != 'noMore') {
+    params.pageNumber++
+    getList()
+  }
+}
+
+onLoad((option) => {
+  goods.value = JSON.parse(decodeURIComponent(option.goods))
+  getList()
+})
+
+onReachBottom(() => {
+  loadData()
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/tabbar/user/utils/tool.vue b/pages/tabbar/user/utils/tool.vue
index 1581c8b..b075949 100644
--- a/pages/tabbar/user/utils/tool.vue
+++ b/pages/tabbar/user/utils/tool.vue
@@ -130,105 +130,98 @@
   </view>
 </template>
 
-<script>
-import { distribution } from "@/api/goods";
-import configs from "@/config/config";
-import storage from "@/utils/storage";
+<script setup lang="ts">
+import { ref } from 'vue'
+import { distribution as fetchDistribution } from '@/api/goods'
+import configs from '@/config/config'
+import storage from '@/utils/storage'
+import { tipsToLogin, setClipboard } from '@/utils/filters.js'
 
-export default {
-  data() {
-	return {
-			configs,
-			storage,
-			repayingShow: false, //分销清退弹框
-			sharingShow: false,
-			sharingLink: ""
-	  }
-  },
-	
-  methods: {
-  	handleNavigate(url) {
-			uni.navigateTo({
-				url,
-			});
-		},
-		inviter() {
-			if (storage.getUserInfo().id) {
-				this.sharingLink = this.configs.shareLink + "?inviter=" + this.storage.getUserInfo().id
-				this.sharingShow = true
-			} else {
-				uni.showToast({
-					title: "请先登录",
-					duration: 2000,
-					icon: "none",
-				});
-			}
-		},
-    navigateTo(url) {
-      const ignores = [
-				'/pages/mine/set/setUp',
-				'/pages/mine/set/editionIntro',
-				'/pages/mine/set/feedBack'
-			]
-			if (!ignores.includes(url)) {
-				if (this.tipsToLogin('normal')) {
-					this.handleNavigate(url)
-				}
-			}
-			else {
-				this.handleNavigate(url)
-			}
-    },
-	
-	linkMsgDetail(){
-		if (this.tipsToLogin('normal')) {
-			uni.navigateTo({
-				url: '/pages/tabbar/home/title',
-			});
-		}
-	},
-	
-    distribution() {
-      distribution().then((res) => {
-        if (res.data.result) {
-          let type = res.data.result.distributionStatus;
-          if (type == "PASS") {
-            uni.navigateTo({
-              url: "/pages/mine/distribution/home",
-            });
-          } else if (type == "REFUSE") {
-            uni.navigateTo({
-              url: "/pages/mine/distribution/auth",
-            });
-          } else if (type == "RETREAT") {
-            uni.showToast({
-              title: "您的分销资格已被清退。请联系管理员！",
-              duration: 2000,
-              icon: "none",
-            });
-          } else {
-            uni.showToast({
-              title: "您的信息正在审核",
-              duration: 2000,
-              icon: "none",
-            });
-          }
-        } else if (!res.data.success && res.data.code == 22000) {
-          uni.showToast({
-            title: "分销功能暂未开启",
-            duration: 2000,
-            icon: "none",
-          });
-        } else {
-          // 没有资格申请 先去实名认证
-          uni.navigateTo({
-            url: "/pages/mine/distribution/auth",
-          });
-        }
-      });
-    },
-  },
-};
+const sharingShow = ref(false)
+const sharingLink = ref('')
+
+function handleNavigate(url: string) {
+  uni.navigateTo({ url })
+}
+
+function inviter() {
+  if (storage.getUserInfo().id) {
+    sharingLink.value = configs.shareLink + '?inviter=' + storage.getUserInfo().id
+    sharingShow.value = true
+  } else {
+    uni.showToast({
+      title: '请先登录',
+      duration: 2000,
+      icon: 'none',
+    })
+  }
+}
+
+function getDetail(link: string) {
+  setClipboard(link)
+}
+
+function navigateTo(url: string) {
+  const ignores = [
+    '/pages/mine/set/setUp',
+    '/pages/mine/set/editionIntro',
+    '/pages/mine/set/feedBack',
+  ]
+  if (!ignores.includes(url)) {
+    if (tipsToLogin('normal')) {
+      handleNavigate(url)
+    }
+  } else {
+    handleNavigate(url)
+  }
+}
+
+function linkMsgDetail() {
+  if (tipsToLogin('normal')) {
+    uni.navigateTo({
+      url: '/pages/tabbar/home/title',
+    })
+  }
+}
+
+function distribution() {
+  fetchDistribution().then((res) => {
+    if (res.data.result) {
+      const type = res.data.result.distributionStatus
+      if (type == 'PASS') {
+        uni.navigateTo({
+          url: '/pages/mine/distribution/home',
+        })
+      } else if (type == 'REFUSE') {
+        uni.navigateTo({
+          url: '/pages/mine/distribution/auth',
+        })
+      } else if (type == 'RETREAT') {
+        uni.showToast({
+          title: '您的分销资格已被清退。请联系管理员！',
+          duration: 2000,
+          icon: 'none',
+        })
+      } else {
+        uni.showToast({
+          title: '您的信息正在审核',
+          duration: 2000,
+          icon: 'none',
+        })
+      }
+    } else if (!res.data.success && res.data.code == 22000) {
+      uni.showToast({
+        title: '分销功能暂未开启',
+        duration: 2000,
+        icon: 'none',
+      })
+    } else {
+      uni.navigateTo({
+        url: '/pages/mine/distribution/auth',
+      })
+    }
+  })
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/patches/uview-plus+3.8.42.patch b/patches/uview-plus+3.8.42.patch
index 18c69f4..2ec07a1 100644
--- a/patches/uview-plus+3.8.42.patch
+++ b/patches/uview-plus+3.8.42.patch
@@ -1,5 +1,5 @@
 diff --git a/node_modules/uview-plus/components/u-image/u-image.vue b/node_modules/uview-plus/components/u-image/u-image.vue
-index 24e3b10..1360704 100644
+index 24e3b10..b59b657 100644
 --- a/node_modules/uview-plus/components/u-image/u-image.vue
 +++ b/node_modules/uview-plus/components/u-image/u-image.vue
 @@ -26,7 +26,7 @@
@@ -20,7 +20,20 @@ index 24e3b10..1360704 100644
  				class="u-image__error"
  				:style="{
  					borderRadius: shape == 'circle' ? '50%' : addUnit(radius),
-@@ -126,6 +126,12 @@
+@@ -108,7 +108,12 @@
+ 				// 图片加载完成时，去掉背景颜色，因为如果是png图片，就会显示灰色的背景
+ 				backgroundStyle: {},
+ 				// 用于fade模式的控制组件显示与否
++				// #ifdef MP-WEIXIN
++				show: true
++				// #endif
++				// #ifndef MP-WEIXIN
+ 				show: false
++				// #endif
+ 			};
+ 		},
+ 		watch: {
+@@ -126,6 +131,12 @@
  			}
  		},
  		computed: {
diff --git a/store/index.js b/store/index.js
index e7fbb30..12f76ff 100644
--- a/store/index.js
+++ b/store/index.js
@@ -48,4 +48,8 @@ const store = createStore({
   actions: {}
 })
 
+export function useStore() {
+  return store
+}
+
 export default store
diff --git a/styles/uview-form-fix.scss b/styles/uview-form-fix.scss
new file mode 100644
index 0000000..407c3f2
--- /dev/null
+++ b/styles/uview-form-fix.scss
@@ -0,0 +1,40 @@
+/**
+ * uView 2 → uview-plus 3 表单布局兼容
+ * 修复 label 逐字换行、左右错位等问题
+ */
+.u-form-item__body {
+  align-items: center;
+}
+
+.u-form-item__body__left {
+  flex-shrink: 0;
+}
+
+.u-form-item__body__left__content__label {
+  display: block !important;
+  white-space: nowrap;
+  word-break: keep-all;
+  line-height: 1.5;
+}
+
+.u-form-item__body__right {
+  flex: 1;
+  min-width: 0;
+}
+
+.u-form-item__body__right__content,
+.u-form-item__body__right__content__slot {
+  flex: 1;
+  min-width: 0;
+}
+
+.u-form-item__body__right__content__slot {
+  display: flex;
+  align-items: center;
+}
+
+.u-form-item__body__right__content__slot > .u-input,
+.u-form-item__body__right__content__slot > .up-input {
+  flex: 1;
+  min-width: 0;
+}
diff --git a/uni.scss b/uni.scss
index 1e623f1..fc0a9f2 100644
--- a/uni.scss
+++ b/uni.scss
@@ -144,6 +144,8 @@ $font-weight: 400;
 	justify-content: center;
 	flex-direction: column;
 }
+@import "styles/uview-form-fix.scss";
+
 .flex-a-c{
 	align-items: center;
 }
diff --git a/utils/form-style.js b/utils/form-style.js
new file mode 100644
index 0000000..0c86053
--- /dev/null
+++ b/utils/form-style.js
@@ -0,0 +1,13 @@
+// 与 pages/mine/set/feedBack.vue 手机号输入框保持一致
+export const fieldInputStyle = {
+  background: '#fafafa',
+  borderRadius: '12rpx',
+  padding: '0 24rpx',
+  height: '80rpx',
+}
+
+export const fieldTextareaStyle = {
+  background: '#fafafa',
+  borderRadius: '12rpx',
+  padding: '20rpx',
+}
diff --git a/utils/request.js b/utils/request.js
index c3bd806..d303a30 100644
--- a/utils/request.js
+++ b/utils/request.js
@@ -82,7 +82,7 @@ http.interceptors.request.use(
 	(config) => {
 		/* 请求之前拦截器。可以使用async await 做异步操作 */
 		let accessToken = storage.getAccessToken();
-		if(storage.getInviter()){
+		if (storage.getInviter()) {
 			config.header.inviter = storage.getInviter();
 		}
 		if (accessToken) {
@@ -96,7 +96,7 @@ http.interceptors.request.use(
 				accessToken = ""
 				storage.setAccessToken('')
 			}
-			
+
 
 			const nonce = Foundation.randomString(6);
 			const timestamp = parseInt(new Date().getTime() / 1000);
diff --git a/utils/theme.js b/utils/theme.js
index d6cfc14..7967ec9 100644
--- a/utils/theme.js
+++ b/utils/theme.js
@@ -63,15 +63,19 @@ function hexToRgba(hex, alpha) {
   return `rgba(${r}, ${g}, ${b}, ${alpha})`;
 }
 
-export function getThemeStyle(theme) {
-  const primary = theme.mainColor || DEFAULT_THEME.mainColor;
+export function getThemeStyle(theme = DEFAULT_THEME) {
+  const safeTheme = theme || DEFAULT_THEME;
+  const primary = safeTheme.mainColor || DEFAULT_THEME.mainColor;
+  const light = safeTheme.lightColor || DEFAULT_THEME.lightColor;
   return {
     "--theme-primary": primary,
-    "--theme-light": theme.lightColor || DEFAULT_THEME.lightColor,
-    "--theme-aider": theme.aiderLightColor || DEFAULT_THEME.aiderLightColor,
+    "--theme-light": light,
+    "--theme-aider": safeTheme.aiderLightColor || DEFAULT_THEME.aiderLightColor,
     "--theme-primary-10": hexToRgba(primary, 0.1),
     "--theme-primary-20": hexToRgba(primary, 0.2),
     "--theme-primary-30": hexToRgba(primary, 0.3),
     "--theme-primary-70": hexToRgba(primary, 0.7),
+    "--theme-light-10": hexToRgba(light, 0.1),
+    "--theme-light-80": hexToRgba(light, 0.8),
   };
 }