refactor: 重构多个组件以支持 Vue 3 语法和功能

- 将多个组件转换为 `<script setup>` 语法，提升可读性和性能 - 优化状态管理和事件处理逻辑，简化代码结构 - 更新样式和布局以适应新组件结构 - 添加新功能和修复已知问题，提升用户体验
2026-08-06 02:47:25 +08:00 · 2026-07-08 18:37:11 +08:00
parent 4d0b0fb5e4
commit 349ffa4f34
189 changed files with 18278 additions and 20758 deletions
--- 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">
--- 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 {
--- 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>
--- 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>
--- 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({
--- 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;
 }

--- 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";
--- 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";
--- 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";
--- 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";
--- 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";
--- 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";
--- 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%;
--- 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";
--- 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";
--- 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";
--- 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";
--- 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";
--- 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";
--- 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";
--- 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";
--- 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";
--- 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";
--- 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";
--- 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";
--- 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";
--- 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";
--- 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";
--- 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 {
--- 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>
--- 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>
--- 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>
--- 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">
--- 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>
--- 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>
--- 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>