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

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

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

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

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

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

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

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

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