feat: 添加视频模块并优化多个组件

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";
+.join-box {
+  display: flex;
+}
+.item-price {
+  .price-text {
+    font-size: 15px;
+    font-weight: 500;
+    color: #e1212b;
+  }
+}
+.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>

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>
@@ -42,6 +75,7 @@ export default {
 }
 .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;

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>

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';
-
+@import "./advertising.scss";
+.join-box {
+  display: flex;
+}
+.item-price {
+  .price-text {
+    font-size: 15px;
+    font-weight: 500;
+    color: #e1212b;
+  }
+}
+.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>

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>

pages/tabbar/home/views.vue

@@ -18,11 +18,6 @@
             <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" />
@@ -41,10 +36,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>
     <fetchCoupon ref='coupon' />
     <u-no-network @retry="init" @isConnected="isConnected"></u-no-network>
@@ -68,6 +62,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 { getFloorData } from "@/api/home"; //获取楼层装修接口
@@ -96,14 +91,6 @@ export default {
     };
   },
   computed: {
-    messageIconStyle() {
-      if (!this.capsuleInsetRight) {
-        return {};
-      }
-      return {
-        marginRight: `${this.capsuleInsetRight}px`,
-      };
-    },
     searchBarStyle() {
       if (this.searchBarWidth) {
         return {
@@ -111,7 +98,7 @@ export default {
         };
       }
       return {
-        width: '560rpx',
+        width: "100%",
       };
     },
   },
@@ -134,6 +121,7 @@ export default {
     group: tpl_group,
     notice: tpl_notice,
     promotions: tpl_promotions,
+    videoLayout: tpl_video,
     fetchCoupon
   },
 
@@ -148,26 +136,23 @@ export default {
   },
   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);
+        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 - messageWidth - leftPadding - gap;
+          windowWidth - this.capsuleInsetRight - leftPadding;
+        // #endif
+        // #ifndef MP-WEIXIN
+        this.searchBarWidth = windowWidth - leftPadding - rightPadding;
+        // #endif
       } catch (e) {
-        this.capsuleInsetRight = 90;
-        this.searchBarWidth = 260;
+        this.capsuleInsetRight = 0;
+        this.searchBarWidth = 0;
       }
-      // #endif
-    },
-    linkMsgDetail() {
-      uni.navigateTo({
-        url: "/pages/tabbar/home/title",
-      });
     },
     fetchCoupon(){
        this.$refs.coupon.firstGetAuto();
@@ -307,26 +292,21 @@ export default {
 .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-shrink: 0;
-}
-
-.navbar-message {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.message-icon {
-  width: 53rpx;
-  height: 53rpx;
-  display: block;
+  flex: 1;
+  min-width: 0;
 }
 </style>

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() {

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() {