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";
-</style>
+.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;
@@ -82,4 +109,4 @@ export default {
     color: #999;
   }
 }
-</style>
+</style>

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';
-
-</style>
+@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>