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

mini-program/pages/coupon/components/coupon-card/index.js

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

mini-program/pages/coupon/components/coupon-card/index.json

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

mini-program/pages/coupon/components/coupon-card/index.wxml

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

mini-program/pages/coupon/components/coupon-card/index.wxss

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

mini-program/pages/coupon/components/floating-button/index.js

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

mini-program/pages/coupon/components/floating-button/index.json

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

mini-program/pages/coupon/components/floating-button/index.wxml

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

mini-program/pages/coupon/components/floating-button/index.wxss

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

mini-program/pages/coupon/components/ui-coupon-card/index.js

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

mini-program/pages/coupon/components/ui-coupon-card/index.json

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

mini-program/pages/coupon/components/ui-coupon-card/index.wxml

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

mini-program/pages/coupon/components/ui-coupon-card/index.wxss

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