优化楼层装修

pages/tabbar/home/template/tpl_notice.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="layout">
+    <div class="background">
+      <u-notice-bar mode="vertical" :bg-color="res.list[0].bk_color" :color="res.list[0].color" :list="list"></u-notice-bar>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    title: "公告",
+    props: ["res"],
+    data() {
+      return {
+        list: []
+      }
+    },
+    mounted() {
+      this.list = this.res.list[0].title.map(i => i.context);
+    },
+  };
+</script>
+<style lang="scss" scoped>
+  @import "./tpl.scss";
+  .background {
+    position: absolute;
+    z-index: 2;
+    width: 100%;
+    height: 84rpx;
+    text-align: left;
+    font-size: 20rpx;
+    background-size: cover;
+  }
+  .layout {
+    text-align: center;
+    position: relative;
+    height: 84rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    background: #ffffff;
+  }
+  .title {
+    line-height: 84rpx;
+    font-size: 20px;
+    font-weight: bold;
+  }
+</style>

pages/tabbar/home/template/tpl_promotions_detail.vue

@@ -0,0 +1,271 @@
+<template>
+  <div class="layout">
+    <div class="join-list">
+      <div
+        v-for="(item, index) in res.list"
+        :key="index"
+        class="join-list-item"
+        @click="goToDetail(item.type)"
+      >
+        <div>
+          <div class="join-title">
+            <div>{{ item.title }}</div>
+            <div
+              class="sub"
+              v-if="item.type !== 'SECKILL'"
+              :style="{
+                backgroundColor: item.bk_color,
+                color: item.color1,
+                borderColor: item.bk_color,
+              }"
+            >
+              {{ item.title1 }}
+            </div>
+            <div class="sub-seckill" v-else>
+              <div class="sub-seckill-block flex">
+                <div class="sub-seckill-block-text">
+                  {{ timeLine[0] ? timeLine[0].timeLine : "x" }}点场
+                </div>
+                {{ times.hours == "00" ? "0" : times.hours }}:{{
+                  times.minutes
+                }}:{{ times.seconds }}
+              </div>
+            </div>
+          </div>
+          <div class="join-box">
+            <div
+              class="join-item"
+              v-for="(i, _index) in item.data"
+              :key="_index"
+            >
+              <div class="item-img-box">
+                <img
+                  class="item-img"
+                  :src="i.thumbnail ? i.thumbnail : i.goodsImage"
+                  alt
+                />
+              </div>
+              <div
+                class="ellipsis"
+                :class="{ 'max-width': res.list.length <= 1 }"
+              >
+                {{ i.goodsName ? i.goodsName : i.name }}
+              </div>
+              <div class="item-price">
+                <span>￥{{ i.price ? i.price : i.originalPrice }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+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;
+      };
+    }
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "./tpl.scss";
+.join-box {
+  display: flex;
+}
+.join-list {
+  width: 100%;
+  display: flex;
+  overflow: hidden;
+}
+.join-list-item {
+  flex: 1;
+}
+.ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 108rpx; // 大于1个活动
+  font-size: 22rpx;
+}
+.max-width {
+  width: 316rpx !important;
+}
+.item-price {
+  > span {
+    font-size: 28rpx;
+    font-weight: 500;
+    color: #e1212b;
+  }
+}
+.join-item {
+  flex: 1;
+}
+.item-img {
+  width: 150rpx;
+  height: 150rpx;
+  margin: 0 auto;
+  display: block;
+}
+.item-img-box {
+  position: relative;
+}
+.item-line-through {
+  > span {
+    font-size: 20rpx;
+    font-weight: 400;
+    text-decoration: line-through;
+    color: #999;
+  }
+}
+.item-position-tips {
+  position: absolute;
+  right: 0;
+  color: #fff;
+  font-size: 24rpx;
+  bottom: 0;
+}
+.join-title {
+  display: flex;
+
+  align-items: center;
+  background: #fff;
+  height: 100rpx;
+  > div:nth-of-type(1) {
+    font-size: 30rpx;
+    font-weight: bold;
+  }
+  > div:nth-of-type(2) {
+    font-size: 20rpx;
+    line-height: 1.75;
+    border-radius: 16rpx;
+    text-align: center;
+    padding: 0 16rpx;
+    margin-left: 20rpx;
+  }
+  .sub {
+    background-color: #e1212b;
+    margin-right: 80rpx;
+  }
+  .sub-seckill {
+    white-space: nowrap;
+    padding: 0 !important;
+  }
+  .sub-seckill-block {
+    background: rgba($main-color, 0.3);
+    border-radius: 100px !important;
+    color: rgba($main-color, 0.7);
+    overflow: hidden;
+    padding-right: 8rpx;
+  }
+  .sub-seckill-block-text {
+    background-color: $main-color;
+    color: #fff;
+    border-top-right-radius: 100px;
+    border-bottom-right-radius: 100px;
+    padding: 0 12rpx !important;
+    margin-right: 12rpx;
+  }
+}
+</style>

pages/tabbar/home/template/tpl_title.vue

@@ -1,13 +1,17 @@
 <template>
-  <div class="layout">
+  <div class="layout" :style="{textAlign: res.list[0].textAlign}">
-    <div class="background">
+    <div class="background" :style="{ backgroundColor: res.list[0].bk_color}">
       <div class="title" :style="{ color: res.list[0].color }">
         {{ res.list[0].title }}
       </div>
+      <div style="position: absolute;right: 10px;top:2px;color: #fff;line-height: 42px;font-size: 10px">
+        <a  :href="res.list[0].url"  :style="{ color: res.list[0].color1 }" style="text-decoration: none">{{ res.list[0].title1 }}</a>
+      </div>
     </div>
   </div>
 </template>
 
+
 <script>
 export default {
   title: "标题栏",
@@ -18,7 +22,7 @@ export default {
 <style lang="scss" scoped>
 @import "./tpl.scss";
 .background {
-  background: url("/static/title.png") no-repeat;
+  // background: url("/static/title.png") no-repeat;
   position: absolute;
   z-index: 2;
   width: 100%;
@@ -43,5 +47,6 @@ export default {
   line-height: 84rpx;
   font-size: 30rpx;
   font-weight: bold;
+  margin-left: 8rpx;
 }
 </style>

pages/tabbar/home/views.vue

@@ -1,10 +1,15 @@
 <template>
   <div class="wrapper">
     <!-- uni 中不能使用 vue component 所以用if判断每个组件 -->
-    <div v-for="(item,index) in pageData.list" :key="index">
+    <div v-for="(item, index) in pageData.list" :key="index">
       <!-- 搜索栏，如果在楼层装修顶部则会自动浮动，否则不浮动 -->
-      <u-navbar class="navbar" v-if="item.type == 'search'" :is-back="false" :is-fixed="index ===1 ? false : true">
+      <u-navbar
-        <search style="width:100%" :res="item.options" />
+        class="navbar"
+        v-if="item.type == 'search'"
+        :is-back="false"
+        :is-fixed="index === 1 ? false : true"
+      >
+        <search style="width: 100%" :res="item.options" />
         <!-- #ifndef H5 -->
         <!-- 扫码功能 不兼容h5 详情文档: https://uniapp.dcloud.io/api/system/barcode?id=scancode -->
         <div slot="right" class="navbar-right">
@@ -14,10 +19,22 @@
       </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" />
+      <leftOneRightTwo
-      <leftTwoRightOne v-if="item.type == 'leftTwoRightOne'" :res="item.options" />
+        v-if="item.type == 'leftOneRightTwo'"
-      <topOneBottomTwo v-if="item.type == 'topOneBottomTwo'" :res="item.options" />
+        :res="item.options"
-      <topTwoBottomOne v-if="item.type == 'topTwoBottomOne'" :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" />
@@ -25,14 +42,13 @@
       <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'" :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>
     <u-no-network></u-no-network>
   </div>
@@ -60,10 +76,8 @@ import tpl_goods from "@/pages/tabbar/home/template/tpl_goods"; //商品分类
 import { getFloorData } from "@/api/home"; //获取楼层装修接口
 import permision from "@/js_sdk/wa-permission/permission.js"; //权限工具类
 import config from "@/config/config";
-// TODO 后续开发
+import tpl_notice from "@/pages/tabbar/home/template/tpl_notice"; //标题栏模块
-// import tpl_join_group from "@/pages/tabbar/home/template/tpl_join_group";
+import tpl_promotions from "@/pages/tabbar/home/template/tpl_promotions_detail"; //标题栏模块
-// import tpl_integral from "@/pages/tabbar/home/template/tpl_integral";
-// import tpl_spike from "@/pages/tabbar/home/template/tpl_spike";
 
 export default {
   data() {
@@ -90,9 +104,8 @@ export default {
     flexOne: tpl_flex_one,
     goods: tpl_goods,
     group: tpl_group,
-    // spike: tpl_spike,
+    notice: tpl_notice,
-    // joinGroup: tpl_join_group,
+    promotions: tpl_promotions,
-    // integral: tpl_integral,
   },
 
   mounted() {
@@ -131,7 +144,7 @@ export default {
 
           // WX_CODE 为小程序码
           if (res.scanType == "WX_CODE") {
-            console.log(res)
+            console.log(res);
             uni.navigateTo({
               url: `/${res.path}`,
             });