feat 首页公告

pages/home/home.js

@@ -10,12 +10,21 @@ import {
 import {
   getHomeCategoryListApi
 } from '~/services/home/getHomeCategoryListApi';
+import {
+  getNoticeList
+} from '~/services/home/getNoticeList';
 import Toast from 'tdesign-miniprogram/toast/index';
 
 Page({
   data: {
     imgSrcs: [],
     tabList: [],
+    noticeList: [],
+    marquee: {
+      speed: 40,
+      loop: -1,
+      delay: 0,
+    },
     goodsList: [],
     goodsListLoadStatus: 0,
     pageLoading: false,
@@ -95,6 +104,20 @@ Page({
       });
       this.loadGoodsList(true);
     });
+        // 获取公告列表
+        getNoticeList().then((res) => {
+          if (res.code == 200) {
+            const _noticeData = res.data.map((v) => {
+              return {
+                ...v,
+                visible: true
+              };
+            });
+            this.setData({
+              noticeList: _noticeData,
+            });
+          }
+        });
   },
 
   tabChangeHandle(e) {

pages/home/home.json

@@ -14,6 +14,7 @@
     "t-tabs": "tdesign-miniprogram/tabs/tabs",
     "t-tab-panel": "tdesign-miniprogram/tab-panel/tab-panel",
     "goods-list": "/components/goods-list/index",
-    "load-more": "/components/load-more/index"
+    "load-more": "/components/load-more/index",
+    "t-notice-bar": "tdesign-miniprogram/notice-bar/notice-bar"
   }
 }

pages/home/home.wxml

@@ -3,56 +3,28 @@
 </view>
 <view class="home-page-header">
   <view class="search" bind:tap="navToSearchPage">
-    <t-search
-      t-class-input="t-search__input"
-      t-class-input-container="t-search__input-container"
-      placeholder="iphone 13 火热发售中"
-      leftIcon=""
-      disabled
-    >
+    <t-search t-class-input="t-search__input" t-class-input-container="t-search__input-container" placeholder="iphone 13 火热发售中" leftIcon="" disabled>
       <t-icon slot="left-icon" prefix="wr" name="search" size="40rpx" color="#bbb" />
     </t-search>
   </view>
   <view class="swiper-wrap">
-    <t-swiper
-      wx:if="{{imgSrcs.length > 0}}"
-      current="{{current}}"
-      autoplay="{{autoplay}}"
-      duration="{{duration}}"
-      interval="{{interval}}"
-      navigation="{{navigation}}"
-      imageProps="{{swiperImageProps}}"
-      list="{{imgSrcs}}"
-      bind:click="navToActivityDetail"
-    />
+    <t-swiper wx:if="{{imgSrcs.length > 0}}" current="{{current}}" autoplay="{{autoplay}}" duration="{{duration}}" interval="{{interval}}" navigation="{{navigation}}" imageProps="{{swiperImageProps}}" list="{{imgSrcs}}" bind:click="navToActivityDetail" />
   </view>
 </view>
 <view class="home-page-container">
   <view class="home-page-tabs">
-    <t-tabs
-      t-class="t-tabs"
-      t-class-active="tabs-external__active"
-      t-class-item="tabs-external__item"
-      defaultValue="{{0}}"
-      space-evenly="{{false}}"
-      bind:change="tabChangeHandle"
-    >
-      <t-tab-panel
-        wx:for="{{tabList}}"
-        wx:for-index="index"
-        wx:key="index"
-        label="{{item.text}}"
-        value="{{item.key}}"
-      />
+    <t-tabs t-class="t-tabs" t-class-active="tabs-external__active" t-class-item="tabs-external__item" defaultValue="{{0}}" space-evenly="{{false}}" bind:change="tabChangeHandle">
+      <t-tab-panel wx:for="{{tabList}}" wx:for-index="index" wx:key="index" label="{{item.text}}" value="{{item.key}}" />
     </t-tabs>
   </view>
-
-  <goods-list
-    wr-class="goods-list-container"
-    goodsList="{{goodsList}}"
-    bind:click="goodListClickHandle"
-    bind:addcart="goodListAddCartHandle"
-  />
+  <view class="notice-container ">
+    <view wx:for="{{noticeList}}">
+      <t-notice-bar class="notice-bar" visible="{{item.visible}}" prefixIcon="null" marquee="{{marquee}}" content="{{item.noticeContent}}" suffixIcon="close" bind:click="closeNotice">
+        <view slot="prefix-icon" class="notice-title">{{item.noticeTitle}}</view>
+      </t-notice-bar>
+    </view>
+  </view>
+  <goods-list wr-class="goods-list-container" goodsList="{{goodsList}}" bind:click="goodListClickHandle" bind:addcart="goodListAddCartHandle" />
   <load-more list-is-empty="{{!goodsList.length}}" status="{{goodsListLoadStatus}}" bind:retry="onReTry" />
   <t-toast id="t-toast" />
 </view>

pages/home/home.wxss

@@ -60,6 +60,7 @@ page {
 .home-page-container .tab.order-nav .order-nav-item.scroll-width {
   min-width: 165rpx;
 }
+
 .home-page-container .tab .order-nav-item.active {
   color: #fa550f !important;
 }
@@ -105,3 +106,13 @@ page {
   --td-tab-item-color: #666;
   --td-tab-track-color: red;
 }
+
+.notice-bar {}
+
+.notice-bar .t-notice-bar__content {
+  color: #666 !important;
+}
+
+.notice-title {
+  font-size: 28rpx;
+}

services/home/getNoticeList.js

@@ -0,0 +1,19 @@
+import {
+  request
+} from '../_utils/request';
+
+/** 获取公告列表 */
+export function getNoticeList() {
+  return new Promise((resolve, reject) => {
+    request({
+      url: `NoticeApi/getNoticeList`,
+      method: 'GET',
+      success: function (res) {
+        resolve(res);
+      },
+      fail: function (error) {
+        reject(error);
+      }
+    });
+  });
+}