|
@@ -1,19 +1,91 @@
|
|
|
<!--
|
|
<!--
|
|
|
店铺首页-公告条
|
|
店铺首页-公告条
|
|
|
- 纯静态样式展示,暂无后台配置开关;文案先写死,后续如需可再接配置
|
|
|
|
|
|
|
+ 拉取 hdApp「店铺公告」中展示位置为「商城首页」(position=1) 的上架公告;
|
|
|
|
|
+ 同位置多条时每 6 秒纵向轮播,点击当前条跳转公告详情。
|
|
|
-->
|
|
-->
|
|
|
<template>
|
|
<template>
|
|
|
- <view class="home-notice-bar">
|
|
|
|
|
|
|
+ <view
|
|
|
|
|
+ class="home-notice-bar"
|
|
|
|
|
+ v-if="noticeList.length"
|
|
|
|
|
+ @tap.stop="openNoticeDetail"
|
|
|
|
|
+ >
|
|
|
<image class="notice-icon" src="/static/images/home/icon-notice-horn.svg" mode="aspectFit" />
|
|
<image class="notice-icon" src="/static/images/home/icon-notice-horn.svg" mode="aspectFit" />
|
|
|
<text class="notice-tag">公告</text>
|
|
<text class="notice-tag">公告</text>
|
|
|
- <text class="notice-text">每月11号会员日,会员全场8.8折</text>
|
|
|
|
|
|
|
+ <swiper
|
|
|
|
|
+ class="notice-swiper"
|
|
|
|
|
+ :key="'home-notice-' + noticeList.length"
|
|
|
|
|
+ vertical
|
|
|
|
|
+ :autoplay="noticeList.length > 1"
|
|
|
|
|
+ :circular="noticeList.length > 1"
|
|
|
|
|
+ :interval="6000"
|
|
|
|
|
+ :duration="400"
|
|
|
|
|
+ :skip-hidden-item-layout="true"
|
|
|
|
|
+ @change="onNoticeChange"
|
|
|
|
|
+ >
|
|
|
|
|
+ <swiper-item v-for="item in noticeList" :key="item.id">
|
|
|
|
|
+ <text class="notice-text">{{ item.summary }}</text>
|
|
|
|
|
+ </swiper-item>
|
|
|
|
|
+ </swiper>
|
|
|
<text class="notice-arrow">›</text>
|
|
<text class="notice-arrow">›</text>
|
|
|
</view>
|
|
</view>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
|
|
+import { shopNoticeShowList } from '@/api/shop-notice'
|
|
|
|
|
+
|
|
|
|
|
+/** 公告展示位置:商城首页(与 hdApp shopNotice/add positionOptions 一致) */
|
|
|
|
|
+const NOTICE_POSITION_HOME = 1
|
|
|
|
|
+
|
|
|
export default {
|
|
export default {
|
|
|
- name: 'homeNoticeBar'
|
|
|
|
|
|
|
+ name: 'homeNoticeBar',
|
|
|
|
|
+ props: {
|
|
|
|
|
+ /** 店铺 account,跳转详情时带入,保证详情页请求落到正确门店 */
|
|
|
|
|
+ account: {
|
|
|
|
|
+ type: [String, Number],
|
|
|
|
|
+ default: ''
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ noticeList: [],
|
|
|
|
|
+ currentNoticeIndex: 0
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ created() {
|
|
|
|
|
+ this.loadNoticeList()
|
|
|
|
|
+ },
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 拉取商城首页公告列表
|
|
|
|
|
+ * 无数据时组件自隐藏,避免空条占位
|
|
|
|
|
+ */
|
|
|
|
|
+ loadNoticeList() {
|
|
|
|
|
+ return shopNoticeShowList({ position: NOTICE_POSITION_HOME }).then((res) => {
|
|
|
|
|
+ const data = res.data || {}
|
|
|
|
|
+ this.noticeList = data.list || []
|
|
|
|
|
+ this.currentNoticeIndex = 0
|
|
|
|
|
+ }).catch(() => {
|
|
|
|
|
+ this.noticeList = []
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ /** 记录当前轮播下标,点击时打开对应公告详情 */
|
|
|
|
|
+ onNoticeChange(e) {
|
|
|
|
|
+ this.currentNoticeIndex = e.detail.current || 0
|
|
|
|
|
+ },
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 跳转公告详情页
|
|
|
|
|
+ * 与分类页 notice-bar 一致,走 shop-notice-detail
|
|
|
|
|
+ */
|
|
|
|
|
+ openNoticeDetail() {
|
|
|
|
|
+ const item = this.noticeList[this.currentNoticeIndex]
|
|
|
|
|
+ if (!item || !item.id) return
|
|
|
|
|
+ const account = this.account || uni.getStorageSync('account') || ''
|
|
|
|
|
+ this.$util.pageTo({
|
|
|
|
|
+ url: '/pages/home/shop-notice-detail',
|
|
|
|
|
+ query: { id: item.id, account }
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
@@ -27,6 +99,7 @@ export default {
|
|
|
border-radius: 32upx;
|
|
border-radius: 32upx;
|
|
|
background: #FFF0F3;
|
|
background: #FFF0F3;
|
|
|
box-shadow: 0 2upx 12upx rgba(255, 77, 125, 0.1);
|
|
box-shadow: 0 2upx 12upx rgba(255, 77, 125, 0.1);
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
}
|
|
|
.notice-icon {
|
|
.notice-icon {
|
|
|
flex-shrink: 0;
|
|
flex-shrink: 0;
|
|
@@ -46,11 +119,17 @@ export default {
|
|
|
border-radius: 6upx;
|
|
border-radius: 6upx;
|
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
|
}
|
|
}
|
|
|
-.notice-text {
|
|
|
|
|
|
|
+.notice-swiper {
|
|
|
flex: 1;
|
|
flex: 1;
|
|
|
|
|
+ width: 0;
|
|
|
|
|
+ height: 40upx;
|
|
|
min-width: 0;
|
|
min-width: 0;
|
|
|
|
|
+}
|
|
|
|
|
+.notice-text {
|
|
|
|
|
+ display: block;
|
|
|
font-size: 24upx;
|
|
font-size: 24upx;
|
|
|
color: #FF4D7D;
|
|
color: #FF4D7D;
|
|
|
|
|
+ line-height: 40upx;
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
text-overflow: ellipsis;
|
|
|
white-space: nowrap;
|
|
white-space: nowrap;
|