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/coupon/components/coupon-card/index.js Normal file
View File

@@ -0,0 +1,57 @@
const statusMap = {
default: { text: '去使用', theme: 'primary' },
useless: { text: '已使用', theme: 'default' },
disabled: { text: '已过期', theme: 'default' },
};
Component({
options: {
addGlobalClass: true,
multipleSlots: true, // 在组件定义时的选项中启用多slot支持
},
externalClasses: ['coupon-class'],
properties: {
couponDTO: {
type: Object,
value: {}, // 优惠券数据
},
},
data: {
btnText: '',
btnTheme: '',
},
observers: {
couponDTO: function (couponDTO) {
if (!couponDTO) {
return;
}
const statusInfo = statusMap[couponDTO.status];
this.setData({
btnText: statusInfo.text,
btnTheme: statusInfo.theme,
});
},
},
attached() {},
methods: {
// 跳转到详情页
gotoDetail() {
wx.navigateTo({
url: `/pages/coupon/coupon-detail/index?id=${this.data.couponDTO.key}`,
});
},
// 跳转到商品列表
gotoGoodsList() {
wx.navigateTo({
url: `/pages/coupon/coupon-activity-goods/index?id=${this.data.couponDTO.key}`,
});
},
},
});

7
mini-program/pages/coupon/components/coupon-card/index.json Normal file
View File

@@ -0,0 +1,7 @@
{
"component": true,
"usingComponents": {
"ui-coupon-card": "../ui-coupon-card/index",
"t-button": "tdesign-miniprogram/button/button"
}
}

23
mini-program/pages/coupon/components/coupon-card/index.wxml Normal file
View File

@@ -0,0 +1,23 @@
<ui-coupon-card
title="{{couponDTO.title || ''}}"
type="{{couponDTO.type || ''}}"
value="{{couponDTO.value || '0'}}"
tag="{{couponDTO.tag || ''}}"
desc="{{couponDTO.desc || ''}}"
currency="{{couponDTO.currency || ''}}"
timeLimit="{{couponDTO.timeLimit || ''}}"
status="{{couponDTO.status || ''}}"
bind:tap="gotoDetail"
>
<view slot="operator" class="coupon-btn-slot">
<t-button
t-class="coupon-btn-{{btnTheme}}"
theme="{{btnTheme}}"
variant="outline"
shape="round"
size="extra-small"
bind:tap="gotoGoodsList"
>{{btnText}}
</t-button>
</view>
</ui-coupon-card>

9
mini-program/pages/coupon/components/coupon-card/index.wxss Normal file
View File

@@ -0,0 +1,9 @@
.coupon-btn-default {
display: none;
}
.coupon-btn-primary {
--td-button-extra-small-padding-horizontal: 26rpx;
--td-button-primary-outline-color: #fa4126;
--td-button-primary-outline-border-color: #fa4126;
}

17
mini-program/pages/coupon/components/floating-button/index.js Normal file
View File

@@ -0,0 +1,17 @@
Component({
data: { icon: 'cart' },
properties: {
count: {
type: Number,
},
},
methods: {
goToCart() {
wx.switchTab({
url: '/pages/cart/index',
});
},
},
});

6
mini-program/pages/coupon/components/floating-button/index.json Normal file
View File

@@ -0,0 +1,6 @@
{
"component": true,
"usingComponents": {
"t-icon": "tdesign-miniprogram/icon/icon"
}
}

14
mini-program/pages/coupon/components/floating-button/index.wxml Normal file
View File

@@ -0,0 +1,14 @@
<view class="floating-button" bind:tap="goToCart">
<view class="floating-inner-container">
<t-icon
prefix="wr"
name="{{icon}}"
size="42rpx"
color="#FFFFFF"
/>
</view>
<view class="floating-right-top">
{{count}}
</view>
</view>

30
mini-program/pages/coupon/components/floating-button/index.wxss Normal file
View File

@@ -0,0 +1,30 @@
.floating-button {
position: fixed;
right: 20rpx;
bottom: 108rpx;
}
.floating-button .floating-inner-container {
display: flex;
align-items: center;
justify-content: center;
height: 96rpx;
width: 96rpx;
background-color: rgba(0, 0, 0, 0.8);
opacity: 0.7;
border-radius: 48rpx;
}
.floating-button .floating-right-top {
position: absolute;
right: 0rpx;
top: 0rpx;
height: 28rpx;
background: #fa4126;
border-radius: 64rpx;
font-weight: bold;
font-size: 22rpx;
line-height: 28rpx;
color: #fff;
padding: 0 8rpx;
}

87
mini-program/pages/coupon/components/ui-coupon-card/index.js Normal file
View File

@@ -0,0 +1,87 @@
Component({
options: {
addGlobalClass: true,
multipleSlots: true,
},
externalClasses: ['coupon-class'],
properties: {
mask: {
type: Boolean,
value: false, // 是否添加遮罩
},
superposable: {
type: Boolean,
value: false, // 是否可叠加
},
type: {
type: String,
value: '', // 优惠券类型：CouponType
},
value: {
type: String,
value: '', // 优惠金额
},
tag: {
type: String,
value: '', // 优惠标签，优惠券名字标签，img
},
desc: {
type: String,
value: '', // 优惠金额描述，金额下方
},
title: {
type: String, // 优惠券名称
value: '',
},
timeLimit: {
type: String, // 优惠券时限
value: '',
},
ruleDesc: {
type: String, // 优惠券适用规则描述
value: '',
},
currency: {
type: String,
value: '¥', // 优惠货币
},
status: {
type: String,
value: 'default',
},
image: {
type: String,
value: '',
},
},
data: {
CouponType: {
MJ_COUPON: 1,
ZK_COUPON: 2,
MJF_COUPON: 3,
GIFT_COUPON: 4,
},
theme: 'primary',
},
observers: {
status: function (value) {
let theme = 'primary';
// 已过期或已使用的券 颜色置灰
if (value === 'useless' || value === 'disabled') {
theme = 'weak';
}
this.setData({ theme });
},
},
attached() {
this.setData({
color: `color${this.properties.colorStyle}`,
});
},
});

7
mini-program/pages/coupon/components/ui-coupon-card/index.json Normal file
View File

@@ -0,0 +1,7 @@
{
"component": true,
"usingComponents": {
"t-icon": "tdesign-miniprogram/icon/icon",
"t-image": "/components/webp-image/index"
}
}

54
mini-program/pages/coupon/components/ui-coupon-card/index.wxml Normal file
View File

@@ -0,0 +1,54 @@
<wxs module="tools">
function isBigValue(value) {
var values = (value + '').split('.');
if (values[1] && values[0].length >= 3) return true;
else return false
}
function getBigValues(value) {
return value.split('.');
}
module.exports = { isBigValue: isBigValue, getBigValues: getBigValues };
</wxs>
<view class="wr-coupon coupon-class theme-{{theme}}">
<view class="wr-coupon__left">
<view wx:if="{{type == CouponType.ZK_COUPON || type === CouponType.MERCHANT_ZK_COUPON}}">
<text class="wr-coupon__left--value">{{value}}</text>
<text class="wr-coupon__left--unit">折</text>
<view class="wr-coupon__left--desc">{{desc}}</view>
</view>
<view wx:if="{{type == CouponType.MJ_COUPON || type === CouponType.MERCHANT_MJ_COUPON}}">
<text class="wr-coupon__left--value" wx:if="{{tools.isBigValue(value)}}">
<text class="wr-coupon__left--value-int">{{tools.getBigValues(value)[0]}}</text>
<text class="wr-coupon__left--value-decimal">.{{tools.getBigValues(value)[1]}}</text>
</text>
<text class="wr-coupon__left--value" wx:else>{{value / 100}}</text>
<text class="wr-coupon__left--unit">元</text>
<view class="wr-coupon__left--desc">{{desc}}</view>
</view>
<view wx:if="{{type === CouponType.MJF_COUPON || type === CouponType.MYF_COUPON}}">
<text class="wr-coupon__left--value" style="font-family: PingFang SC;font-size: 44rpx">免邮</text>
<view class="wr-coupon__left--desc">{{desc}}</view>
</view>
<view wx:if="{{type == CouponType.GIFT_COUPON}}">
<t-image t-class="wr-coupon__left--image" src="{{image}}" mode="aspectFill" />
</view>
</view>
<view class="wr-coupon__right">
<view class="wr-coupon__right--title">
<text class="coupon-title">{{title}}</text>
<view class="coupon-time">{{timeLimit}}</view>
<view class="coupon-desc">
<view wx:if="{{ruleDesc}}">{{ruleDesc}}</view>
</view>
</view>
<view class="wr-coupon__right--oper">
<slot name="operator" />
</view>
</view>
<view wx:if="{{status === 'useless' || status === 'disabled'}}" class="wr-coupon__seal seal-{{status}}}" />
<view wx:if="{{mask}}" class="wr-coupon__mask" />
<view wx:if="{{superposable}}" class="wr-coupon__tag">可叠加</view>
</view>

147
mini-program/pages/coupon/components/ui-coupon-card/index.wxss Normal file
View File

@@ -0,0 +1,147 @@
.wr-coupon {
display: flex;
background-image: url('https://cdn-we-retail.ym.tencent.com/miniapp/coupon/coupon-bg-nocorners.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
margin-bottom: 24rpx;
overflow: hidden;
}
.theme-weak.wr-coupon {
background-image: url('https://cdn-we-retail.ym.tencent.com/miniapp/coupon/coupon-bg-grey2.png');
}
.wr-coupon__left {
width: 200rpx;
height: 180rpx;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
color: #fa4126;
overflow: hidden;
position: relative;
}
.theme-weak .wr-coupon__left {
color: #333;
}
.wr-coupon__left--value {
font-size: 64rpx;
line-height: 88rpx;
font-weight: bold;
font-family: 'DIN Alternate', cursive;
}
.wr-coupon__left--value-int {
font-size: 48rpx;
line-height: 88rpx;
}
.wr-coupon__left--value-decimal {
font-size: 36rpx;
line-height: 48rpx;
}
.wr-coupon__left--image {
width: 128rpx;
height: 128rpx;
border-radius: 8px;
margin-top: 30rpx;
}
.wr-coupon__left--unit {
font-size: 24rpx;
line-height: 32rpx;
}
.wr-coupon__left--desc {
font-size: 24rpx;
line-height: 32rpx;
color: #fa4126;
}
.theme-weak .wr-coupon__left--desc {
color: #333;
}
.wr-coupon__right {
flex-grow: 1;
padding: 0 20rpx;
height: 180rpx;
box-sizing: border-box;
overflow: hidden;
display: flex;
align-items: center;
}
.wr-coupon__right--title {
display: flex;
-webkit-display: flex;
flex-direction: column;
align-items: flex-start;
color: #999999;
font-size: 24rpx;
flex: 1;
}
.wr-coupon__right--title .coupon-title {
max-width: 320rpx;
color: #333333;
font-size: 28rpx;
line-height: 40rpx;
font-weight: bold;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
white-space: normal;
}
.wr-coupon__right--title .coupon-time {
margin-top: 16rpx;
/* // letter-spacing: -0.05em; */
}
.wr-coupon__right--title .coupon-desc {
margin-top: 8rpx;
}
.wr-coupon__right--title .coupon-arrow {
font-size: 22rpx;
}
.wr-coupon__right--oper {
display: flex;
justify-content: center;
align-items: center;
}
.wr-coupon__mask {
width: 702rpx;
height: 182rpx;
position: absolute;
top: 0;
left: 0;
background-color: #ffffff;
opacity: 0.5;
}
.wr-coupon__tag {
position: absolute;
top: 8px;
right: -24rpx;
text-align: center;
width: 106rpx;
height: 28rpx;
opacity: 0.9;
font-size: 20rpx;
line-height: 28rpx;
color: #fa4126;
border: 0.5px solid #fa4126;
box-sizing: border-box;
transform: rotate(45deg);
}
.wr-coupon__seal {
width: 128rpx;
height: 128rpx;
position: absolute;
top: 0;
right: 0;
background-size: 100% 100%;
}
.wr-coupon__seal.seal-useless {
background-image: url('https://cdn-we-retail.ym.tencent.com/miniapp/coupon/seal-used.png');
}
.wr-coupon__seal.seal-disabled {
background-image: url('https://cdn-we-retail.ym.tencent.com/miniapp/coupon/coupon-expired.png');
}

78
mini-program/pages/coupon/coupon-activity-goods/index.js Normal file
View File

@@ -0,0 +1,78 @@
import { fetchCouponDetail } from '../../../services/coupon/index';
import { fetchGoodsList } from '../../../services/good/fetchGoods';
import Toast from 'tdesign-miniprogram/toast/index';
Page({
data: {
goods: [],
detail: {},
couponTypeDesc: '',
showStoreInfoList: false,
cartNum: 2,
},
id: '',
onLoad(query) {
const id = parseInt(query.id);
this.id = id;
this.getCouponDetail(id);
this.getGoodsList(id);
},
getCouponDetail(id) {
fetchCouponDetail(id).then(({ detail }) => {
this.setData({ detail });
if (detail.type === 2) {
if (detail.base > 0) {
this.setData({
couponTypeDesc: `满${detail.base / 100}元${detail.value}折`,
});
} else {
this.setData({ couponTypeDesc: `${detail.value}折` });
}
} else if (detail.type === 1) {
if (detail.base > 0) {
this.setData({
couponTypeDesc: `满${detail.base / 100}元减${detail.value / 100}元`,
});
} else {
this.setData({ couponTypeDesc: `减${detail.value / 100}元` });
}
}
});
},
getGoodsList(id) {
fetchGoodsList(id).then((goods) => {
this.setData({ goods });
});
},
openStoreList() {
this.setData({
showStoreInfoList: true,
});
},
closeStoreList() {
this.setData({
showStoreInfoList: false,
});
},
goodClickHandle(e) {
const { index } = e.detail;
const { spuId } = this.data.goods[index];
wx.navigateTo({ url: `/pages/goods/details/index?spuId=${spuId}` });
},
cartClickHandle() {
Toast({
context: this,
selector: '#t-toast',
message: '点击加入购物车',
});
},
});

10
mini-program/pages/coupon/coupon-activity-goods/index.json Normal file
View File

@@ -0,0 +1,10 @@
{
"navigationBarTitleText": "活动商品",
"usingComponents": {
"t-icon": "tdesign-miniprogram/icon/icon",
"t-popup": "tdesign-miniprogram/popup/popup",
"t-toast": "tdesign-miniprogram/toast/toast",
"goods-list": "/components/goods-list/index",
"floating-button": "../components/floating-button/index"
}
}

40
mini-program/pages/coupon/coupon-activity-goods/index.wxml Normal file
View File

@@ -0,0 +1,40 @@
<view class="coupon-page-container">
<view class="notice-bar-content">
<view class="notice-bar-text">
以下商品可使用
<text class="height-light">{{couponTypeDesc}}</text>
优惠券
</view>
<t-icon name="help-circle" size="32rpx" color="#AAAAAA" bind:tap="openStoreList" />
</view>
<view class="goods-list-container">
<goods-list
wr-class="goods-list-wrap"
goodsList="{{goods}}"
bind:click="goodClickHandle"
bind:addcart="cartClickHandle"
/>
</view>
<floating-button count="{{cartNum}}" />
<t-popup visible="{{showStoreInfoList}}" placement="bottom" bind:visible-change="closeStoreList">
<t-icon slot="closeBtn" name="close" size="40rpx" bind:tap="closeStoreList" />
<view class="popup-content-wrap">
<view class="popup-content-title"> 规则详情 </view>
<view class="desc-group-wrap">
<view wx:if="{{detail && detail.timeLimit}}" class="item-wrap">
<view class="item-title">优惠券有效时间</view>
<view class="item-label">{{detail.timeLimit}}</view>
</view>
<view wx:if="{{detail && detail.desc}}" class="item-wrap">
<view class="item-title">优惠券说明</view>
<view class="item-label">{{detail.desc}}</view>
</view>
<view wx:if="{{detail && detail.useNotes}}" class="item-wrap">
<view class="item-title">使用须知</view>
<view class="item-label">{{detail.useNotes}}</view>
</view>
</view>
</view>
</t-popup>
</view>
<t-toast id="t-toast" />

69
mini-program/pages/coupon/coupon-activity-goods/index.wxss Normal file
View File

@@ -0,0 +1,69 @@
page {
background-color: #f5f5f5;
}
.coupon-page-container .notice-bar-content {
display: flex;
flex-direction: row;
align-items: center;
padding: 8rpx 0;
}
.coupon-page-container .notice-bar-text {
font-size: 26rpx;
line-height: 36rpx;
font-weight: 400;
color: #666666;
margin-left: 24rpx;
margin-right: 12rpx;
}
.coupon-page-container .notice-bar-text .height-light {
color: #fa550f;
}
.coupon-page-container .popup-content-wrap {
background-color: #fff;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
}
.coupon-page-container .popup-content-title {
font-size: 32rpx;
color: #333;
text-align: center;
height: 104rpx;
line-height: 104rpx;
position: relative;
}
.coupon-page-container .desc-group-wrap {
padding-bottom: env(safe-area-inset-bottom);
}
.coupon-page-container .desc-group-wrap .item-wrap {
margin: 0 30rpx 30rpx;
}
.coupon-page-container .desc-group-wrap .item-title {
font-size: 26rpx;
color: #333;
font-weight: 500;
}
.coupon-page-container .desc-group-wrap .item-label {
font-size: 24rpx;
color: #666;
margin-top: 12rpx;
white-space: pre-line;
word-break: break-all;
line-height: 34rpx;
}
.coupon-page-container .goods-list-container {
margin: 0 24rpx 24rpx;
}
.coupon-page-container .goods-list-wrap {
background: #f5f5f5 !important;
}

32
mini-program/pages/coupon/coupon-detail/index.js Normal file
View File

@@ -0,0 +1,32 @@
import { fetchCouponDetail } from '../../../services/coupon/index';
Page({
data: {
detail: null,
storeInfoList: [],
storeInfoStr: '',
showStoreInfoList: false,
},
id: '',
onLoad(query) {
const id = parseInt(query.id);
this.id = id;
this.getGoodsList(id);
},
getGoodsList(id) {
fetchCouponDetail(id).then(({ detail }) => {
this.setData({
detail,
});
});
},
navGoodListHandle() {
wx.navigateTo({
url: `/pages/coupon/coupon-activity-goods/index?id=${this.id}`,
});
},
});

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

@@ -0,0 +1,10 @@
{
"navigationBarTitleText": "优惠券详情",
"usingComponents": {
"coupon-card": "../components/coupon-card/index",
"t-cell": "tdesign-miniprogram/cell/cell",
"t-cell-group": "tdesign-miniprogram/cell-group/cell-group",
"t-button": "tdesign-miniprogram/button/button",
"t-icon": "tdesign-miniprogram/icon/icon"
}
}

45
mini-program/pages/coupon/coupon-detail/index.wxml Normal file
View File

@@ -0,0 +1,45 @@
<!-- 优惠券 -->
<view class="coupon-card-wrap">
<coupon-card couponDTO="{{detail}}" />
</view>
<!-- 说明 -->
<view class="desc-wrap">
<t-cell-group t-class="desc-group-wrap">
<t-cell
wx:if="{{detail && detail.desc}}"
t-class="t-class-cell"
t-class-title="t-class-title"
t-class-note="t-class-note"
title="规则说明"
note="{{detail && detail.desc}}"
/>
<t-cell
wx:if="{{detail && detail.timeLimit}}"
t-class="t-class-cell"
t-class-title="t-class-title"
t-class-note="t-class-note"
title="有效时间"
note="{{detail && detail.timeLimit}}"
/>
<t-cell
wx:if="{{detail && detail.storeAdapt}}"
t-class="t-class-cell"
t-class-title="t-class-title"
t-class-note="t-class-note"
title="适用范围"
note="{{detail && detail.storeAdapt}}"
/>
<t-cell
wx:if="{{detail && detail.useNotes}}"
t-class="t-class-cell"
t-class-title="t-class-title"
t-class-note="t-class-note"
title="使用须知"
note="{{detail && detail.useNotes}}"
/>
</t-cell-group>
<!-- 查看可用商品 -->
<view class="button-wrap">
<t-button shape="round" block bindtap="navGoodListHandle"> 查看可用商品 </t-button>
</view>
</view>

91
mini-program/pages/coupon/coupon-detail/index.wxss Normal file
View File

@@ -0,0 +1,91 @@
page {
background-color: #f5f5f5;
}
.coupon-card-wrap {
background-color: #fff;
padding: 32rpx 32rpx 1rpx;
}
.desc-wrap {
margin-top: 24rpx;
}
.desc-wrap .button-wrap {
margin: 50rpx 32rpx 0;
}
.desc-group-wrap .t-class-cell {
align-items: flex-start;
}
.desc-group-wrap .t-class-title {
font-size: 26rpx;
width: 140rpx;
flex: none;
color: #888;
}
.desc-group-wrap .t-class-note {
font-size: 26rpx;
word-break: break-all;
white-space: pre-line;
justify-content: flex-start;
color: #333;
}
.desc-group-wrap {
border-radius: 8rpx;
overflow: hidden;
--cell-label-font-size: 26rpx;
--cell-label-line-height: 36rpx;
--cell-label-color: #999;
}
.desc-group-wrap.in-popup {
border-radius: 0;
overflow: auto;
max-height: 828rpx;
}
.desc-group-wrap .wr-cell__title {
color: #333;
font-size: 28rpx;
}
/* .desc-group-wrap .max-width-cell {
overflow: hidden;
} */
/* .desc-group-wrap .signal-line-label {
word-break: keep-all;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.desc-group-wrap .multi-line-label {
word-break: break-all;
white-space: pre-line;
} */
.popup-content-wrap {
background-color: #fff;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
}
.popup-content-title {
font-size: 32rpx;
color: #333;
text-align: center;
height: 104rpx;
line-height: 104rpx;
position: relative;
}
.popup-content-title .close-icon {
position: absolute;
top: 24rpx;
right: 24rpx;
}

77
mini-program/pages/coupon/coupon-list/index.js Normal file
View File

@@ -0,0 +1,77 @@
import { fetchCouponList } from '../../../services/coupon/index';
Page({
data: {
status: 0,
list: [
{
text: '可使用',
key: 0,
},
{
text: '已使用',
key: 1,
},
{
text: '已失效',
key: 2,
},
],
couponList: [],
},
onLoad() {
this.init();
},
init() {
this.fetchList();
},
fetchList(status = this.data.status) {
let statusInFetch = '';
switch (Number(status)) {
case 0: {
statusInFetch = 'default';
break;
}
case 1: {
statusInFetch = 'useless';
break;
}
case 2: {
statusInFetch = 'disabled';
break;
}
default: {
throw new Error(`unknown fetchStatus: ${statusInFetch}`);
}
}
fetchCouponList(statusInFetch).then((couponList) => {
this.setData({ couponList });
});
},
tabChange(e) {
const { value } = e.detail;
this.setData({ status: value });
this.fetchList(value);
},
goCouponCenterHandle() {
wx.showToast({ title: '去领券中心', icon: 'none' });
},
onPullDownRefresh_() {
this.setData(
{
couponList: [],
},
() => {
this.fetchList();
},
);
},
});

10
mini-program/pages/coupon/coupon-list/index.json Normal file
View File

@@ -0,0 +1,10 @@
{
"navigationBarTitleText": "优惠券",
"usingComponents": {
"t-pull-down-refresh": "tdesign-miniprogram/pull-down-refresh/pull-down-refresh",
"t-tabs": "tdesign-miniprogram/tabs/tabs",
"t-tab-panel": "tdesign-miniprogram/tab-panel/tab-panel",
"t-icon": "tdesign-miniprogram/icon/icon",
"coupon-card": "../components/coupon-card/index"
}
}

42
mini-program/pages/coupon/coupon-list/index.wxml Normal file
View File

@@ -0,0 +1,42 @@
<t-tabs
defaultValue="{{status}}"
bind:change="tabChange"
tabList="{{list}}"
t-class="tabs-external__inner"
t-class-item="tabs-external__item"
t-class-active="tabs-external__active"
t-class-track="tabs-external__track"
>
<t-tab-panel
wx:for="{{list}}"
wx:for-index="index"
wx:for-item="tab"
wx:key="key"
label="{{tab.text}}"
value="{{tab.key}}"
/>
</t-tabs>
<view class="coupon-list-wrap">
<t-pull-down-refresh
t-class-indicator="t-class-indicator"
id="t-pull-down-refresh"
bind:refresh="onPullDownRefresh_"
background="#fff"
>
<view class="coupon-list-item" wx:for="{{couponList}}" wx:key="key">
<coupon-card couponDTO="{{item}}" />
</view>
</t-pull-down-refresh>
<view class="center-entry">
<view class="center-entry-btn" bind:tap="goCouponCenterHandle">
<view>领券中心</view>
<t-icon
name="chevron-right"
color="#fa4126"
size="40rpx"
style="line-height: 28rpx;"
/>
</view>
</view>
</view>

78
mini-program/pages/coupon/coupon-list/index.wxss Normal file
View File

@@ -0,0 +1,78 @@
page {
height: 100%;
}
.tabs-external__inner {
height: 88rpx;
width: 100%;
line-height: 88rpx;
z-index: 100;
}
.tabs-external__inner {
font-size: 26rpx;
color: #333333;
position: fixed;
width: 100vw;
top: 0;
left: 0;
}
.tabs-external__inner .tabs-external__track {
background: #fa4126 !important;
}
.tabs-external__inner .tabs-external__item {
color: #666;
}
.tabs-external__inner .tabs-external__active {
font-size: 28rpx;
color: #fa4126 !important;
}
.tabs-external__inner.order-nav .order-nav-item .bottom-line {
bottom: 12rpx;
}
.coupon-list-wrap {
margin-top: 32rpx;
margin-left: 32rpx;
margin-right: 32rpx;
overflow-y: auto;
padding-bottom: 100rpx;
padding-bottom: calc(constant(safe-area-inset-top) + 100rpx);
padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
-webkit-overflow-scrolling: touch;
}
.center-entry {
box-sizing: content-box;
border-top: 1rpx solid #dce0e4;
background-color: #fff;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 100rpx;
padding-bottom: 0;
padding-bottom: constant(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
}
.center-entry-btn {
color: #fa4126;
font-size: 28rpx;
text-align: center;
line-height: 100rpx;
display: flex;
align-items: center;
justify-content: center;
height: 100rpx;
}
.coupon-list-wrap .t-pull-down-refresh__bar {
background: #fff !important;
}
.t-class-indicator {
color: #b9b9b9 !important;
}