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

mini-program/pages/coupon/coupon-list/index.js

@@ -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();
+      },
+    );
+  },
+});

mini-program/pages/coupon/coupon-list/index.json

@@ -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"
+  }
+}

mini-program/pages/coupon/coupon-list/index.wxml

@@ -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>
+

mini-program/pages/coupon/coupon-list/index.wxss

@@ -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;
+}