Merge branch 'uniapp-vue3' of https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp into uniapp-vue3

2026-08-06 02:47:25 +08:00 · 2026-07-07 17:10:45 +08:00
parent fc3cad18e6 23e3825366
commit 4d0b0fb5e4
24 changed files with 894 additions and 498 deletions
--- a/App.vue
+++ b/App.vue
@@ -8,6 +8,13 @@ import {
 } from "@/js_sdk/h5-copy/h5-copy.js";
 import APPUpdate from "@/plugins/APPUpdate";
 import storage from "@/utils/storage";
+import { getThemeSetting } from "@/api/common.js";
+import {
+	applyTabBarStyle,
+	cacheTheme,
+	loadCachedTheme,
+	normalizeTheme,
+} from "@/utils/theme";
 import {
 	mapMutations
 } from "vuex";
@@ -36,6 +43,7 @@ import {
 		 * 监听返回（页面级 onBackPress 在 App.vue 不生效，保留空实现避免误导）
 		 */
 		onLaunch: function(val) {
+			this.initTheme();
 			if(val.query.inviter){
 				storage.setInviter(val.query.inviter)
 			}
@@ -69,7 +77,29 @@ import {
 			// #endif
 		},
 		methods: {
-			...mapMutations(["login"]),
+			...mapMutations(["login", "SET_THEME"]),
+			initTheme() {
+				const cached = loadCachedTheme();
+				if (cached) {
+					this.SET_THEME(cached);
+					applyTabBarStyle(cached.mainColor);
+				}
+				getThemeSetting()
+					.then((res) => {
+						if (res.data && res.data.success && res.data.result && res.data.result.settingValue) {
+							try {
+								const raw = JSON.parse(res.data.result.settingValue);
+								const theme = normalizeTheme(raw);
+								this.SET_THEME(theme);
+								cacheTheme(theme);
+								applyTabBarStyle(theme.mainColor);
+							} catch (e) {
+								// 主题配置解析失败时使用缓存
+							}
+						}
+					})
+					.catch(() => {});
+			},
 			/**
 			 * 微信小程序版本提交更新版本 解决缓存问题
 			 */
--- a/api/common.js
+++ b/api/common.js
@@ -30,3 +30,14 @@ export function getIMDetail() {
 * @type {string}
 */
 export const upload = api.common + "/common/upload/file";
+
+/**
+ * 获取主题色配置
+ */
+export function getThemeSetting() {
+  return http.request({
+    url: `${api.common}/common/common/site/theme`,
+    method: Method.GET,
+    message: false,
+  });
+}
--- a/main.js
+++ b/main.js
@@ -1,4 +1,4 @@
-import { createSSRApp } from 'vue'
+import { createSSRApp, computed } from 'vue'
 import App from './App'
 import uviewPlus, { setConfig } from 'uview-plus'
 import store from './store'
@@ -6,6 +6,7 @@ import config from '@/config/config'
 import airBtn from '@/components/m-airbtn/index.vue'
 import mpShare from '@/utils/mpShare.js'
 import * as filterUtils from './utils/filters.js'
+import { getThemeStyle } from '@/utils/theme'

 export function createApp() {
  const app = createSSRApp(App)
@@ -40,9 +41,11 @@ export function createApp() {
  })

  app.config.globalProperties.$store = store
-  app.config.globalProperties.$mainColor = config.mainColor
-  app.config.globalProperties.$lightColor = config.lightColor
-  app.config.globalProperties.$aiderLightColor = config.aiderLightColor
+  app.config.globalProperties.$mainColor = computed(() => store.getters.mainColor)
+  app.config.globalProperties.$lightColor = computed(() => store.getters.lightColor)
+  app.config.globalProperties.$aiderLightColor = computed(
+    () => store.getters.aiderLightColor
+  )

  const filterMethods = {}
  Object.keys(filterUtils).forEach((key) => {
@@ -50,7 +53,15 @@ export function createApp() {
      filterMethods[key] = filterUtils[key]
    }
  })
-  app.mixin({ methods: filterMethods })
+
+  app.mixin({
+    methods: filterMethods,
+    computed: {
+      themeStyle() {
+        return getThemeStyle(this.$store.state.theme)
+      },
+    },
+  })
  app.mixin(mpShare)

  // #ifdef H5
--- a/pages.json
+++ b/pages.json
@@ -856,7 +856,7 @@
 	},
 	"tabBar": {
 		"color": "#666",
-		"selectedColor": "#ff573e",
+		"selectedColor": "#ff3c2a",
 		"borderStyle": "black",
 		"backgroundColor": "#ffffff",
 		"list": [{
--- a/pages/cart/payment/shareOrderGoods.vue
+++ b/pages/cart/payment/shareOrderGoods.vue
@@ -321,7 +321,7 @@ page {
  background: $main-color;
 }
 .disabled {
-  background: rgba($main-color, $alpha: 0.2);
+  background: var(--theme-primary-20, rgba(255, 60, 42, 0.2));
 }
 .home {
  color: $main-color;
--- a/pages/mine/im/index-app.scss
+++ b/pages/mine/im/index-app.scss
@@ -5087,7 +5087,7 @@ scroll-view.cu-steps .cu-item {
 }

 .bg-user-orang {
-  background-color:rgba($main-color,0.1);
+  background-color: var(--theme-primary-10, rgba(255, 60, 42, 0.1));
  color: black;
 }

--- a/pages/tabbar/cart/cartList.vue
+++ b/pages/tabbar/cart/cartList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="wrapper">
+  <div class="wrapper" :style="themeStyle">
    <u-navbar
      class="cart-navbar"
      :style="cartNavbarStyle"
--- a/pages/tabbar/category/category.vue
+++ b/pages/tabbar/category/category.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="category-wrap">
+  <view class="category-wrap" :style="themeStyle">
    <u-navbar
      class="navbar"
      :auto-back="false"
--- a/pages/tabbar/home/index.vue
+++ b/pages/tabbar/home/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="wrapper">
+  <div class="wrapper" :style="themeStyle">
    <!-- 楼层装修组件 -->
    <tpl ref="tpl" />
  </div>
--- a/pages/tabbar/home/template/advertising.scss
+++ b/pages/tabbar/home/template/advertising.scss
@@ -10,7 +10,7 @@
    .price-text {
      font-size: 15px;
      font-weight: 500;
-      color: #e1212b;
+      color: $main-color;
    }
  }
  .join-item {
--- a/pages/tabbar/home/template/tpl_group.vue
+++ b/pages/tabbar/home/template/tpl_group.vue
@@ -1,20 +1,30 @@
 <template>
-  <div class="layout">
+  <div class="layout" v-if="goodsList.length">
    <div class="join-list">
-      <div class="join-title">
+      <div class="join-title" @click="goMore">
        <div class="join-title-name">{{ res.list[0].title }}</div>
        <div class="join-title-more">更多</div>
      </div>
      <div class="join-box">
-        <div class="join-item" @click="modelNavigateTo(item)" v-for="item in 4" :key="item">
+        <div
+          class="join-item"
+          @click="goDetail(item)"
+          v-for="(item, index) in goodsList"
+          :key="index"
+        >
          <div class="item-img-box">
-            <img class="item-img" src="https://picsum.photos/id/268/200/200" alt />
+            <u-image
+              class="item-img"
+              width="150rpx"
+              height="150rpx"
+              :src="item.goodsImage || item.thumbnail"
+            />
          </div>
          <div class="item-price">
-            <span class="price-text">￥120.00</span>
+            <span class="price-text">￥{{ item.price }}</span>
          </div>
          <div class="item-line-through">
-            <span class="price-text">￥190.00</span>
+            <span class="price-text">￥{{ item.originalPrice }}</span>
          </div>
        </div>
      </div>
@@ -22,19 +32,84 @@
  </div>
 </template>
 <script>
-// TODO 后续版本开发此功能 尽情期待
-import { modelNavigateTo } from "./tpl";
+import * as API_Promotions from "@/api/promotions";
 export default {
  props: ["res"],
  title: "拼团",
  data() {
    return {
-      modelNavigateTo,
+      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}`,
+      });
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>
@import "./tpl.scss";
-@import "./advertising.scss";
-</style>
+.join-box {
+  display: flex;
+}
+.item-price {
+  .price-text {
+    font-size: 15px;
+    font-weight: 500;
+    color: $main-color;
+  }
+}
+.join-item {
+  flex: 1;
+  text-align: center;
+}
+.item-img {
+  width: 75px;
+  height: 75px;
+  margin: 0 auto;
+  display: block;
+}
+.item-img-box {
+  position: relative;
+}
+.item-line-through {
+  .price-text {
+    font-size: 10px;
+    font-weight: 400;
+    text-decoration: line-through;
+    color: #999;
+  }
+}
+.join-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #fff;
+  height: 50px;
+  .join-title-name {
+    font-size: 16px;
+    font-weight: bold;
+  }
+  .join-title-more {
+    font-size: 12px;
+    color: #999;
+  }
+}
+</style>
--- a/pages/tabbar/home/template/tpl_integral.vue
+++ b/pages/tabbar/home/template/tpl_integral.vue
@@ -1,20 +1,30 @@
 <template>
-  <div class="layout">
+  <div class="layout" v-if="goodsList.length">
    <div class="join-list">
-      <div class="join-title">
+      <div class="join-title" @click="goMore">
        <div class="join-title-name">{{ res.list[0].title }}</div>
        <div class="join-title-more">更多</div>
      </div>
      <div class="join-box">
-        <div class="join-item" v-for="item in 4" :key="item">
+        <div
+          class="join-item"
+          @click="goDetail(item)"
+          v-for="(item, index) in goodsList"
+          :key="index"
+        >
          <div class="item-img-box">
-            <img class="item-img" src="https://picsum.photos/id/268/200/200" alt />
+            <u-image
+              class="item-img"
+              width="150rpx"
+              height="150rpx"
+              :src="item.goodsImage || item.thumbnail"
+            />
          </div>
          <div class="item-price">
-            <span class="price-text">20积分</span>
+            <span class="price-text">{{ item.points != null ? item.points : 0 }}积分</span>
          </div>
-          <div class="item-line-through">
-            <span class="price-text">30积分</span>
+          <div class="item-line-through" v-if="item.originalPrice">
+            <span class="price-text">￥{{ item.originalPrice }}</span>
          </div>
        </div>
      </div>
@@ -22,10 +32,33 @@
  </div>
 </template>
 <script>
-// TODO 后续版本开发此功能 尽情期待
+import * as API_Promotions from "@/api/promotions";
 export default {
-  title:"积分商品",
  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}` });
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>
@@ -37,11 +70,12 @@ export default {
  .price-text {
    font-size: 15px;
    font-weight: 500;
-    color: #e1212b;
+    color: $main-color;
  }
 }
 .join-item {
  flex: 1;
+  text-align: center;
 }
 .item-img {
  width: 75px;
@@ -60,13 +94,6 @@ export default {
    color: #999;
  }
 }
-.item-position-tips {
-  position: absolute;
-  right: 0;
-  color: #fff;
-  font-size: 12px;
-  bottom: 0;
-}
 .join-title {
  display: flex;
  justify-content: space-between;
@@ -82,4 +109,4 @@ export default {
    color: #999;
  }
 }
-</style>
+</style>
--- a/pages/tabbar/home/template/tpl_join_group.vue
+++ b/pages/tabbar/home/template/tpl_join_group.vue
@@ -1,90 +0,0 @@
-<template>
-  <div class="layout">
-    <div class="join-list">
-      <div class="join-title">
-        <div class="join-title-name">{{ res.list[0].title }}</div>
-        <div class="join-title-more">更多</div>
-      </div>
-      <div class="join-box">
-        <div class="join-item" v-for="item in 4" :key="item">
-          <div class="item-img-box">
-            <img
-              class="item-img"
-              src="https://picsum.photos/id/268/200/200"
-              alt
-            />
-            <div class="item-position-tips">2人团</div>
-          </div>
-          <div class="item-price">
-            <span class="price-text">￥120.00</span>
-          </div>
-          <div class="item-line-through">
-            <span class="price-text">￥120.00</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-// TODO 后续版本开发此功能 尽情期待
-export default {
-  props: ["res"],
-  title:"团购"
-};
-</script>
-<style lang="scss" scoped>
-@import "./tpl.scss";
-.join-box {
-  display: flex;
-}
-.item-price {
-  .price-text {
-    font-size: 15px;
-    font-weight: 500;
-    color: #e1212b;
-  }
-}
-.join-item {
-  flex: 1;
-}
-.item-img {
-  width: 75px;
-  height: 75px;
-  margin: 0 auto;
-  display: block;
-}
-.item-img-box {
-  position: relative;
-}
-.item-line-through {
-  .price-text {
-    font-size: 10px;
-    font-weight: 400;
-    text-decoration: line-through;
-    color: #999;
-  }
-}
-.item-position-tips {
-  position: absolute;
-  right: 0;
-  color: #fff;
-  font-size: 12px;
-  bottom: 0;
-}
-.join-title {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background: #fff;
-  height: 50px;
-  .join-title-name {
-    font-size: 16px;
-    font-weight: bold;
-  }
-  .join-title-more {
-    font-size: 12px;
-    color: #999;
-  }
-}
-</style>
--- a/pages/tabbar/home/template/tpl_promotions_detail.vue
+++ b/pages/tabbar/home/template/tpl_promotions_detail.vue
@@ -198,7 +198,7 @@ export default {
  .price-text {
    font-size: 28rpx;
    font-weight: 500;
-    color: #e1212b;
+    color: $main-color;
  }
 }
 .join-item {
@@ -248,7 +248,7 @@ export default {
    margin-left: 20rpx;
  }
  .sub {
-    background-color: #e1212b;
+    background-color: $main-color;
    margin-right: 80rpx;
  }
  .sub-seckill {
@@ -256,9 +256,9 @@ export default {
    padding: 0 !important;
  }
  .sub-seckill-block {
-    background: rgba($main-color, 0.3);
+    background: var(--theme-primary-30, rgba(255, 60, 42, 0.3));
    border-radius: 100px !important;
-    color: rgba($main-color, 0.7);
+    color: var(--theme-primary-70, rgba(255, 60, 42, 0.7));
    overflow: hidden;
    padding-right: 8rpx;
  }
--- a/pages/tabbar/home/template/tpl_spike.vue
+++ b/pages/tabbar/home/template/tpl_spike.vue
@@ -1,24 +1,30 @@
 <template>
-  <div class="layout">
+  <div class="layout" v-if="goodsList.length">
    <div class="join-list">
-      <div class="join-title">
+      <div class="join-title" @click="goMore">
        <div class="join-title-name">{{ res.list[0].title }}</div>
        <div class="join-title-more">更多</div>
      </div>
      <div class="join-box">
-        <div class="join-item" v-for="item in 4" :key="item">
+        <div
+          class="join-item"
+          @click="goDetail(item)"
+          v-for="(item, index) in goodsList"
+          :key="index"
+        >
          <div class="item-img-box">
-            <img
+            <u-image
              class="item-img"
-              src="https://picsum.photos/id/268/200/200"
-              alt
+              width="150rpx"
+              height="150rpx"
+              :src="item.goodsImage || item.thumbnail"
            />
          </div>
          <div class="item-price">
-            <span class="price-text">￥120.00</span>
+            <span class="price-text">￥{{ item.price }}</span>
          </div>
          <div class="item-line-through">
-            <span class="price-text">￥190.00</span>
+            <span class="price-text">￥{{ item.originalPrice }}</span>
          </div>
        </div>
      </div>
@@ -26,13 +32,88 @@
  </div>
 </template>
 <script>
-// TODO 后续版本开发此功能 尽情期待
+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}`,
+      });
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>
@import "./tpl.scss";
-@import './advertising.scss';
-
-</style>
+@import "./advertising.scss";
+.join-box {
+  display: flex;
+}
+.item-price {
+  .price-text {
+    font-size: 15px;
+    font-weight: 500;
+    color: $main-color;
+  }
+}
+.join-item {
+  flex: 1;
+  text-align: center;
+}
+.item-img {
+  width: 75px;
+  height: 75px;
+  margin: 0 auto;
+  display: block;
+}
+.item-img-box {
+  position: relative;
+}
+.item-line-through {
+  .price-text {
+    font-size: 10px;
+    font-weight: 400;
+    text-decoration: line-through;
+    color: #999;
+  }
+}
+.join-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #fff;
+  height: 50px;
+  .join-title-name {
+    font-size: 16px;
+    font-weight: bold;
+  }
+  .join-title-more {
+    font-size: 12px;
+    color: #999;
+  }
+}
+</style>
--- a/pages/tabbar/home/template/tpl_video.vue
+++ b/pages/tabbar/home/template/tpl_video.vue
@@ -0,0 +1,168 @@
+<template>
+  <div class="layout" :style="wrapperStyle">
+    <div class="video-shell" :style="boxStyle">
+      <div
+        class="video-ratio"
+        :style="{ paddingBottom: aspectPadding + '%' }"
+      >
+        <div class="video-ratio-inner">
+          <video
+            v-if="item.videoUrl"
+            class="video-media"
+            :src="item.videoUrl"
+            :poster="item.poster"
+            :autoplay="!!item.autoplay"
+            :controls="true"
+            object-fit="cover"
+          />
+          <image
+            v-else-if="item.poster"
+            class="video-media"
+            :src="item.poster"
+            mode="aspectFill"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const DEFAULT_VIDEO_STYLE = {
+  bgType: "color",
+  bgColorStart: "#F5F5F5",
+  bgColorEnd: "#F5F5F5",
+  bgGradientDir: "horizontal",
+  bgRadius: 0,
+  bottomBgColor: "#F5F5F5",
+  bgImage: "",
+  margin: 0,
+  padding: 0,
+  borderShow: false,
+  borderStyle: "solid",
+  borderWidth: 1,
+  borderColor: "#e5e5e5",
+  shadowShow: false,
+  shadowColor: "rgba(0,0,0,0.1)",
+  shadowX: 0,
+  shadowY: 0,
+  shadowBlur: 10,
+  shadowSpread: 0,
+};
+
+const ASPECT_RATIO_MAP = {
+  "16:9": 56.25,
+  "4:3": 75,
+  "1:1": 100,
+};
+
+function ensureVideoItem(item) {
+  if (!item.aspectRatio) item.aspectRatio = "16:9";
+  if (!item.style) {
+    item.style = { ...DEFAULT_VIDEO_STYLE };
+    return;
+  }
+  Object.keys(DEFAULT_VIDEO_STYLE).forEach((key) => {
+    if (item.style[key] === undefined) {
+      item.style[key] = DEFAULT_VIDEO_STYLE[key];
+    }
+  });
+}
+
+function getVideoGradient(style) {
+  const start = style.bgColorStart || "#F5F5F5";
+  const end = style.bgColorEnd || start;
+  const colors = `${start}, ${end}`;
+  const dirMap = {
+    horizontal: `linear-gradient(to right, ${colors})`,
+    vertical: `linear-gradient(to bottom, ${colors})`,
+    skewLeft: `linear-gradient(135deg, ${colors})`,
+    skewRight: `linear-gradient(45deg, ${colors})`,
+  };
+  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%",
+      };
+
+      if (style.bgType === "image" && style.bgImage) {
+        box.backgroundImage = `url(${style.bgImage})`;
+        box.backgroundSize = "cover";
+        box.backgroundPosition = "center";
+      } else {
+        box.background = getVideoGradient(style);
+      }
+
+      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;
+    },
+    aspectPadding() {
+      return ASPECT_RATIO_MAP[this.item.aspectRatio] || ASPECT_RATIO_MAP["16:9"];
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "./tpl.scss";
+
+.layout {
+  padding: 0;
+  margin: 0;
+  background: transparent;
+}
+
+.video-shell {
+  width: 100%;
+}
+
+.video-ratio {
+  width: 100%;
+  height: 0;
+  position: relative;
+}
+
+.video-ratio-inner {
+  position: absolute;
+  inset: 0;
+}
+
+.video-media {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+</style>
--- a/pages/tabbar/home/views.vue
+++ b/pages/tabbar/home/views.vue
@@ -1,332 +1,312 @@
-<template>
-  <div class="wrapper">
-    <!-- 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>
-        <template #right>
-          <view class="navbar-message" :style="messageIconStyle" @click="linkMsgDetail">
-            <image class="message-icon" src="/static/img/title.png" mode="aspectFit"></image>
-          </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" />
-      <!-- <joinGroup v-if="item.type == 'joinGroup'" :res="item.options" /> -->
-      <!-- <integral v-if="item.type == 'integral'" :res="item.options" /> -->
-      <!-- <spike v-if="item.type == 'spike'" :res="item.options" /> -->
-    
-    </div>
-    <fetchCoupon ref='coupon' />
-    <u-no-network @retry="init" @isConnected="isConnected"></u-no-network>
-  </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_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: {
-    messageIconStyle() {
-      if (!this.capsuleInsetRight) {
-        return {};
-      }
-      return {
-        marginRight: `${this.capsuleInsetRight}px`,
-      };
-    },
-    searchBarStyle() {
-      if (this.searchBarWidth) {
-        return {
-          width: `${this.searchBarWidth}px`,
-        };
-      }
-      return {
-        width: '560rpx',
-      };
-    },
-  },
-  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,
-    fetchCoupon
-  },
-
-  mounted () {
-    this.setCapsuleInset();
-    this.init();
-    // #ifdef MP-WEIXIN
-    // 小程序默认分享
-    uni.showShareMenu({ withShareTicket: true });
-    // #endif
-   
-  },
-  methods: {
-    setCapsuleInset() {
-      // #ifdef MP-WEIXIN
-      try {
-        const menuButton = uni.getMenuButtonBoundingClientRect();
-        const { windowWidth } = uni.getWindowInfo();
-        this.capsuleInsetRight = windowWidth - menuButton.left;
-        const messageWidth = uni.upx2px(20);
-        const leftPadding = uni.upx2px(HOME_LAYOUT_PADDING_RPX);
-        const gap = uni.upx2px(0);
-        this.searchBarWidth =
-          windowWidth - this.capsuleInsetRight - messageWidth - leftPadding - gap;
-      } catch (e) {
-        this.capsuleInsetRight = 90;
-        this.searchBarWidth = 260;
-      }
-      // #endif
-    },
-    linkMsgDetail() {
-      uni.navigateTo({
-        url: "/pages/tabbar/home/title",
-      });
-    },
-    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__left) {
-    width: auto !important;
-    padding: 0 0 0 $home-layout-padding !important;
-  }
-}
-
-.navbar-search-wrap {
-  box-sizing: border-box;
-  flex-shrink: 0;
-}
-
-.navbar-message {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.message-icon {
-  width: 53rpx;
-  height: 53rpx;
-  display: block;
-}
-</style>
+<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>
+</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/special/special.vue
+++ b/pages/tabbar/special/special.vue
@@ -41,9 +41,9 @@
      <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" />
-      <!-- <joinGroup v-if="item.type == 'joinGroup'" :res="item.options" /> -->
      <!-- <integral v-if="item.type == 'integral'" :res="item.options" /> -->
      <!-- <spike v-if="item.type == 'spike'" :res="item.options" /> -->
+      <videoLayout v-if="item.type == 'video'" :res="item.options" />
    </div>
    <u-no-network></u-no-network>
  </div>
@@ -66,6 +66,7 @@ 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"; //获取楼层装修接口
@@ -102,7 +103,8 @@ export default {
    goods: tpl_goods,
    group: tpl_group,
    notice: tpl_notice,
-    promotions: tpl_promotions
+    promotions: tpl_promotions,
+    videoLayout: tpl_video
  },

  mounted() {
--- a/pages/tabbar/user/my.vue
+++ b/pages/tabbar/user/my.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="user">
+  <view class="user" :style="themeStyle">
    <!-- 个人信息 -->
    <view class="status_bar">
      <!-- 这里是状态栏 -->
--- a/pages/tabbar/user/utils/tool.vue
+++ b/pages/tabbar/user/utils/tool.vue
@@ -19,10 +19,10 @@
 			  <image class="interact-item-icon" src="/static/mine/feedback.png" mode=""></image>
 			  <view>我的评价</view>
 			</view>
-			<!-- <view class="interact-item" @click="linkMsgDetail()">
+			<view class="interact-item" @click="linkMsgDetail()">
 			  <image class="interact-item-icon" src="/static/mine/mycommit.png" mode=""></image>
 			  <view>我的消息</view>
-			</view> -->
+			</view>
 		
 		
 			<view class="interact-item" @click="navigateTo('/pages/mine/myCollect')">
@@ -181,9 +181,11 @@ export default {
    },
 	
 	linkMsgDetail(){
-		uni.navigateTo({
-				url: `/pages/mine/im/list`,
-		});
+		if (this.tipsToLogin('normal')) {
+			uni.navigateTo({
+				url: '/pages/tabbar/home/title',
+			});
+		}
 	},
 	
    distribution() {
--- a/store/index.js
+++ b/store/index.js
@@ -1,5 +1,9 @@
 import { createStore } from 'vuex'
 import storage from '@/utils/storage'
+import config from '@/config/config'
+import { DEFAULT_THEME, loadCachedTheme } from '@/utils/theme'
+
+const cachedTheme = loadCachedTheme()

 const store = createStore({
  state: {
@@ -11,7 +15,13 @@ const store = createStore({
    hasLogin: storage.getHasLogin(),
    userInfo: storage.getUserInfo(),
    uuid: storage.getUuid(),
-    token: ''
+    token: '',
+    theme: cachedTheme || { ...DEFAULT_THEME },
+  },
+  getters: {
+    mainColor: (state) => state.theme.mainColor,
+    lightColor: (state) => state.theme.lightColor,
+    aiderLightColor: (state) => state.theme.aiderLightColor,
  },
  mutations: {
    login(state, userInfo) {
@@ -26,7 +36,14 @@ const store = createStore({
    },
    setRemark(state, remark) {
      state.remark = remark
-    }
+    },
+    SET_THEME(state, theme) {
+      state.theme = {
+        mainColor: theme.mainColor || DEFAULT_THEME.mainColor,
+        lightColor: theme.lightColor || DEFAULT_THEME.lightColor,
+        aiderLightColor: theme.aiderLightColor || DEFAULT_THEME.aiderLightColor,
+      }
+    },
  },
  actions: {}
 })
--- a/uni.scss
+++ b/uni.scss
@@ -29,13 +29,13 @@ $uni-color-error: #dd524d;
 /**微信登录按钮颜色 */
 $weChat-color:#00a327;
 /**主颜色*/
-$main-color: #ff3c2a;
+$main-color: var(--theme-primary, #ff3c2a);
 /*用于金钱等颜色 */
-$price-color: #ff3c2a;
+$price-color: var(--theme-primary, #ff3c2a);
 /*主题高亮颜色*/
-$light-color: #ff6b35;
+$light-color: var(--theme-light, #ff6b35);
 /*辅助高亮颜色*/
-$aider-light-color: #ff9f28;
+$aider-light-color: var(--theme-aider, #ff9f28);

 /*主题高亮背景颜色*/
 $main-light-color: #edfcf7;
@@ -72,7 +72,7 @@ $font-weight: 400;

 // 渐变主题颜色
 .bg-linear-gradient {
-	background-image: linear-gradient(25deg, #fa123b, #ff6b35, #ff9f28, #ffcc03);
+	background-image: linear-gradient(25deg, var(--theme-primary, #fa123b), var(--theme-light, #ff6b35), var(--theme-aider, #ff9f28), #ffcc03);
 }
 .uni-tabbar .uni-tabbar__icon {
 	width: 20px;
--- a/utils/filters.js
+++ b/utils/filters.js
@@ -3,6 +3,11 @@ import { getUserInfo } from "@/api/members";
 import storage from "@/utils/storage.js";
 import config from "@/config/config";
 import Foundation from "./Foundation.js";
+import store from "@/store";
+
+function getMainColor() {
+  return store.getters.mainColor || config.mainColor;
+}

 /**
 * 解析商品图片地址，兼容上传 JSON 与纯 URL，非法时返回占位图
@@ -356,7 +361,7 @@ export function quiteLoginOut () {
  uni.showModal({
    title: "提示",
    content: "是否退出登录？",
-    confirmColor: config.mainColor,
+    confirmColor: getMainColor(),
    async success (res) {
      if (res.confirm) {
        storage.setAccessToken("");
@@ -378,7 +383,7 @@ export function logoff () {
  uni.showModal({
    title: "提示",
    content: "确认注销用户么？注销用户将无法再次登录并失去当前数据。",
-    confirmColor: config.mainColor,
+    confirmColor: getMainColor(),
    async success (res) {
      if (res.confirm) {
        await logoffConfirm();
@@ -415,7 +420,7 @@ export function tipsToLogin (type) {
      content: "当前用户未登录是否登录？",
      confirmText: "确定",
      cancelText: "取消",
-      confirmColor: config.mainColor,
+      confirmColor: getMainColor(),
      success: (res) => {
        if (res.confirm) {
          navigateToLogin();
--- a/utils/theme.js
+++ b/utils/theme.js
@@ -0,0 +1,77 @@
+import config from "@/config/config";
+
+export const DEFAULT_THEME = {
+  mainColor: config.mainColor,
+  lightColor: config.lightColor,
+  aiderLightColor: config.aiderLightColor,
+};
+
+const STORAGE_KEY = "theme_setting";
+const EXPIRATION_KEY = "theme_setting_expiration_time";
+
+export function normalizeTheme(data = {}) {
+  return {
+    mainColor: data.themeColor || DEFAULT_THEME.mainColor,
+    lightColor: data.lightColor || DEFAULT_THEME.lightColor,
+    aiderLightColor: data.aiderLightColor || DEFAULT_THEME.aiderLightColor,
+  };
+}
+
+export function cacheTheme(theme) {
+  const expirationTime = new Date().setHours(new Date().getHours() + 1);
+  uni.setStorageSync(EXPIRATION_KEY, expirationTime);
+  uni.setStorageSync(STORAGE_KEY, theme);
+}
+
+export function loadCachedTheme() {
+  const expirationTime = uni.getStorageSync(EXPIRATION_KEY);
+  const cacheValid =
+    expirationTime && new Date() <= new Date(Number(expirationTime));
+  if (!cacheValid) return null;
+  try {
+    return uni.getStorageSync(STORAGE_KEY) || null;
+  } catch {
+    return null;
+  }
+}
+
+export function applyTabBarStyle(mainColor) {
+  if (!mainColor) return;
+  try {
+    uni.setTabBarStyle({
+      selectedColor: mainColor,
+    });
+  } catch (e) {
+    // 非 tabBar 页面可能报错，忽略
+  }
+}
+
+function hexToRgba(hex, alpha) {
+  if (!hex) return `rgba(255, 60, 42, ${alpha})`;
+  const normalized = String(hex).replace("#", "");
+  const full =
+    normalized.length === 3
+      ? normalized
+          .split("")
+          .map((c) => c + c)
+          .join("")
+      : normalized;
+  if (full.length !== 6) return `rgba(255, 60, 42, ${alpha})`;
+  const r = parseInt(full.slice(0, 2), 16);
+  const g = parseInt(full.slice(2, 4), 16);
+  const b = parseInt(full.slice(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
+export function getThemeStyle(theme) {
+  const primary = theme.mainColor || DEFAULT_THEME.mainColor;
+  return {
+    "--theme-primary": primary,
+    "--theme-light": theme.lightColor || DEFAULT_THEME.lightColor,
+    "--theme-aider": theme.aiderLightColor || DEFAULT_THEME.aiderLightColor,
+    "--theme-primary-10": hexToRgba(primary, 0.1),
+    "--theme-primary-20": hexToRgba(primary, 0.2),
+    "--theme-primary-30": hexToRgba(primary, 0.3),
+    "--theme-primary-70": hexToRgba(primary, 0.7),
+  };
+}