coder-xiaomo/epp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity GitHub Gitee

通过微信开发者工具 商城模板 创建新小程序

Browse Source
This commit is contained in:
小墨
2023-03-06 23:52:24 +08:00
parent ada464a8cc
commit c21ff901d5
393 changed files with 52952 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
mini-program/pages/promotion-detail/index.js Normal file
View File

@@ -0,0 +1,57 @@
import Toast from 'tdesign-miniprogram/toast/index';
import { fetchPromotion } from '../../services/promotion/detail';
Page({
data: {
list: [],
banner: '',
time: 0,
showBannerDesc: false,
statusTag: '',
},
onLoad(query) {
const promotionID = parseInt(query.promotion_id);
this.getGoodsList(promotionID);
},
getGoodsList(promotionID) {
fetchPromotion(promotionID).then(
({ list, banner, time, showBannerDesc, statusTag }) => {
const goods = list.map((item) => ({
...item,
tags: item.tags.map((v) => v.title),
}));
this.setData({
list: goods,
banner,
time,
showBannerDesc,
statusTag,
});
},
);
},
goodClickHandle(e) {
const { index } = e.detail;
const { spuId } = this.data.list[index];
wx.navigateTo({ url: `/pages/goods/details/index?spuId=${spuId}` });
},
cardClickHandle() {
Toast({
context: this,
selector: '#t-toast',
message: '点击加购',
});
},
bannerClickHandle() {
Toast({
context: this,
selector: '#t-toast',
message: '点击规则详情',
});
},
});

10
mini-program/pages/promotion-detail/index.json Normal file
View File

@@ -0,0 +1,10 @@
{
"navigationBarTitleText": "营销详情",
"usingComponents": {
"t-toast": "tdesign-miniprogram/toast/toast",
"t-image": "/components/webp-image/index",
"t-icon": "tdesign-miniprogram/icon/icon",
"count-down": "tdesign-miniprogram/count-down/count-down",
"goods-list": "/components/goods-list/index"
}
}

76
mini-program/pages/promotion-detail/index.wxml Normal file
View File

@@ -0,0 +1,76 @@
<view id="js-page-wrap" class="promotion-detail-container">
<view wx:if="{{banner}}" class="wrap" id="{{independentID}}">
<view class="banner-wrap">
<t-image
src="{{banner}}"
mode="aspectFill"
webp="{{true}}"
t-class="t-class-promotion-head"
/>
<view wx:if="{{!showBannerDesc && (time >= 0 || statusTag === 'finish')}}" class="count-down-wrap in-banner-count-down-wrap">
<block wx:if="{{statusTag === 'finish'}}">
<view class="status-tag {{statusTag}}">已结束</view>
<text class="count-down-label">活动已结束</text>
</block>
<block wx:else>
<view wx:if="{{statusTag === 'before'}}" class="status-tag {{statusTag}}">
未开始
</view>
<text class="count-down-label">距结束仅剩</text>
<count-down
wx:if="{{time > 0}}"
t-class="wr-cd-class"
time="{{time}}"
format="DD天 HH:mm:ss"
bind:finish="countDownFinishHandle"
/>
</block>
<view class="detail-entry" bind:tap="bannerClickHandle">
<text class="detail-entry-label">规则详情</text>
<t-icon name="chevron-right" size="34rpx" style="color: #999" />
</view>
</view>
<view wx:if="{{showBannerDesc && (useBannerDescSlot || time >= 0 || statusTag === 'finish')}}" class="banner-desc-wrap">
<block wx:if="{{useBannerDescSlot}}">
<slot name="banner-desc" />
</block>
<block wx:else>
<view class="count-down-wrap after-banner-count-down-wrap">
<block wx:if="{{statusTag === 'finish'}}">
<view class="status-tag {{statusTag}}">已结束</view>
<text class="count-down-label">活动已结束</text>
</block>
<block wx:else>
<view wx:if="{{statusTag === 'before'}}" class="status-tag {{statusTag}}">
未开始
</view>
<text class="count-down-label">距结束仅剩</text>
<count-down
class="{{cdClass}}"
wr-class="wr-cd-class"
wx:if="{{time > 0}}"
time="{{time}}"
format="DD天 HH:mm:ss"
bind:finish="countDownFinishHandle"
/>
</block>
<view class="detail-entry" bind:tap="bannerClickHandle">
<text class="detail-entry-label">规则详情</text>
<t-icon name="chevron-right" size="34rpx" style="color: #999" />
</view>
</view>
</block>
</view>
</view>
</view>
<view wx:if="{{list && list.length>0}}" class="promotion-goods-list">
<goods-list
wr-class="goods-list-container"
goodsList="{{list}}"
bind:click="goodClickHandle"
bind:addcart="cardClickHandle"
/>
</view>
<t-toast id="t-toast" />
</view>

111
mini-program/pages/promotion-detail/index.wxss Normal file
View File

@@ -0,0 +1,111 @@
.promotion-detail-container .wrap {
display: block;
padding: 0 24rpx;
background: linear-gradient(#fff, #f5f5f5);
}
.promotion-detail-container .t-class-promotion-head {
width: 702rpx;
height: 160rpx;
border-radius: 8rpx;
}
.promotion-detail-container .wrap .count-down-wrap {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: baseline;
line-height: 34rpx;
}
.promotion-detail-container .wrap .count-down-wrap.in-banner-count-down-wrap {
position: absolute;
bottom: 32rpx;
left: 32rpx;
right: 32rpx;
}
.promotion-detail-container .wrap .count-down-wrap .status-tag {
height: 32rpx;
line-height: 32rpx;
font-size: 20rpx;
margin-right: 12rpx;
border-radius: 16rpx;
padding: 0 12rpx;
}
.promotion-detail-container .wrap .count-down-wrap .status-tag.before {
color: #fff;
background-color: #ff9853;
}
.promotion-detail-container .wrap .count-down-wrap .status-tag.finish {
color: #fff;
background-color: #ccc;
}
.promotion-detail-container .wrap .count-down-wrap .count-down-label {
color: #666;
font-size: 24rpx;
margin-right: 0.5em;
}
.promotion-detail-container .wrap .count-down-wrap .detail-entry {
margin-left: auto;
height: 40rpx;
}
.promotion-detail-container .wrap .count-down-wrap .detail-entry-label {
color: #fff;
font-size: 24rpx;
margin-right: 12rpx;
}
.promotion-detail-container
.wrap
.count-down-wrap.after-banner-count-down-wrap {
padding: 10rpx;
}
.promotion-detail-container
.wrap
.count-down-wrap.after-banner-count-down-wrap
.detail-entry {
display: flex;
align-items: center;
}
.promotion-detail-container
.wrap
.count-down-wrap.after-banner-count-down-wrap
.detail-entry-label {
color: #999;
margin-right: 0;
}
.promotion-detail-container .wrap .gl-empty-wrap {
margin-top: 180rpx;
}
.promotion-detail-container .wrap .gl-empty-img {
width: 240rpx;
height: 240rpx;
display: block;
margin: 0 auto;
}
.promotion-detail-container .wrap .gl-empty-label {
font-size: 28rpx;
color: #999;
margin-top: 40rpx;
text-align: center;
}
.promotion-detail-container .goods-list-container {
background: #f5f5f5 !important;
}
.promotion-detail-container .promotion-goods-list {
padding: 20rpx 24rpx;
background-color: #f5f5f5;
}