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

mini-program/pages/coupon/coupon-activity-goods/index.js

@@ -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: '点击加入购物车',
+    });
+  },
+});

mini-program/pages/coupon/coupon-activity-goods/index.json

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

mini-program/pages/coupon/coupon-activity-goods/index.wxml

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

mini-program/pages/coupon/coupon-activity-goods/index.wxss

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