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

2023-03-06 23:52:24 +08:00
parent ada464a8cc
commit c21ff901d5
393 changed files with 52952 additions and 0 deletions
--- a/mini-program/pages/order/components/selectCoupons/mock.js
+++ b/mini-program/pages/order/components/selectCoupons/mock.js
@@ -0,0 +1,22 @@
+export const couponsData = {
+  couponResultList: [
+    {
+      couponVO: {
+        condition: '满200元可用',
+        couponId: 11,
+        endTime: 1584530282686,
+        name: '折扣券',
+        profit: '5.5折',
+        promotionCode: 90,
+        promotionSubCode: 1,
+        scopeText: '部分商品可用',
+        startTime: 1584530282686,
+        storeId: 90,
+        value: 550,
+        type: 2,
+      },
+      status: 0, // 0:未勾选。1:勾选。-1:置灰
+    },
+  ],
+  reduce: 1000,
+};
--- a/mini-program/pages/order/components/selectCoupons/selectCoupon.wxs
+++ b/mini-program/pages/order/components/selectCoupons/selectCoupon.wxs
@@ -0,0 +1,16 @@
+function formatDays(value) {
+  if (value < 10) {
+    return '0' + value;
+  }
+  return value;
+}
+var dateFormat = function (d) {
+  var date = getDate(+d);
+  return (
+    date.getFullYear() +
+    '-' +
+    formatDays(date.getMonth() + 1) +
+    formatDays(date.getDate())
+  );
+};
+module.exports.dateFormat = dateFormat;
--- a/mini-program/pages/order/components/selectCoupons/selectCoupons.js
+++ b/mini-program/pages/order/components/selectCoupons/selectCoupons.js
@@ -0,0 +1,160 @@
+import dayjs from 'dayjs';
+import { couponsData } from './mock';
+
+const emptyCouponImg = `https://cdn-we-retail.ym.tencent.com/miniapp/coupon/ordersure-coupon-newempty.png`;
+
+Component({
+  properties: {
+    storeId: String,
+    promotionGoodsList: {
+      type: Array,
+      value: [],
+    },
+    orderSureCouponList: {
+      type: Array,
+      value: [],
+    },
+    couponsShow: {
+      type: Boolean,
+      value: false,
+      observer(couponsShow) {
+        if (couponsShow) {
+          const { promotionGoodsList, orderSureCouponList, storeId } =
+            this.data;
+          const products =
+            promotionGoodsList &&
+            promotionGoodsList.map((goods) => {
+              this.storeId = goods.storeId;
+              return {
+                skuId: goods.skuId,
+                spuId: goods.spuId,
+                storeId: goods.storeId,
+                selected: true,
+                quantity: goods.num,
+                prices: {
+                  sale: goods.settlePrice,
+                },
+              };
+            });
+          const selectedCoupons =
+            orderSureCouponList &&
+            orderSureCouponList.map((ele) => {
+              return {
+                promotionId: ele.promotionId,
+                storeId: ele.storeId,
+                couponId: ele.couponId,
+              };
+            });
+          this.setData({
+            products,
+          });
+          this.coupons({
+            products,
+            selectedCoupons,
+            storeId,
+          }).then((res) => {
+            this.initData(res);
+          });
+        }
+      },
+    },
+  },
+  data: {
+    emptyCouponImg,
+    goodsList: [],
+    selectedList: [],
+    couponsList: [],
+    orderSureCouponList: [],
+    promotionGoodsList: [],
+  },
+  methods: {
+    initData(data = {}) {
+      const { couponResultList = [], reduce = 0 } = data;
+      const selectedList = [];
+      let selectedNum = 0;
+      const couponsList =
+        couponResultList &&
+        couponResultList.map((coupon) => {
+          const { status, couponVO } = coupon;
+          const {
+            couponId,
+            condition = '',
+            endTime = 0,
+            name = '',
+            startTime = 0,
+            value,
+            type,
+          } = couponVO;
+          if (status === 1) {
+            selectedNum++;
+            selectedList.push({
+              couponId,
+              promotionId: ruleId,
+              storeId: this.storeId,
+            });
+          }
+          const val = type === 2 ? value / 100 : value / 10;
+          return {
+            key: couponId,
+            title: name,
+            isSelected: false,
+            timeLimit: `${dayjs(+startTime).format('YYYY-MM-DD')}-${dayjs(
+              +endTime,
+            ).format('YYYY-MM-DD')}`,
+            value: val,
+            status: status === -1 ? 'useless' : 'default',
+            desc: condition,
+            type,
+            tag: '',
+          };
+        });
+      this.setData({
+        selectedList,
+        couponsList,
+        reduce,
+        selectedNum,
+      });
+    },
+    selectCoupon(e) {
+      const { key } = e.currentTarget.dataset;
+      const { couponsList, selectedList } = this.data;
+      couponsList.forEach((coupon) => {
+        if (coupon.key === key) {
+          coupon.isSelected = !coupon.isSelected;
+        }
+      });
+
+      const couponSelected = couponsList.filter(
+        (coupon) => coupon.isSelected === true,
+      );
+
+      this.setData({
+        selectedList: [...selectedList, ...couponSelected],
+        couponsList: [...couponsList],
+      });
+
+      this.triggerEvent('sure', {
+        selectedList: [...selectedList, ...couponSelected],
+      });
+    },
+    hide() {
+      this.setData({
+        couponsShow: false,
+      });
+    },
+    coupons(coupon = {}) {
+      return new Promise((resolve, reject) => {
+        if (coupon?.selectedCoupons) {
+          resolve({
+            couponResultList: couponsData.couponResultList,
+            reduce: couponsData.reduce,
+          });
+        }
+        return reject({
+          couponResultList: [],
+          reduce: undefined,
+        });
+      });
+    },
+  },
+});
--- a/mini-program/pages/order/components/selectCoupons/selectCoupons.json
+++ b/mini-program/pages/order/components/selectCoupons/selectCoupons.json
@@ -0,0 +1,10 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-popup": "tdesign-miniprogram/popup/popup",
+    "t-icon": "tdesign-miniprogram/icon/icon",
+    "t-image": "/components/webp-image/index",
+    "wr-price": "/components/price/index",
+    "coupon-card": "/pages/coupon/components/ui-coupon-card/index"
+  }
+}
--- a/mini-program/pages/order/components/selectCoupons/selectCoupons.wxml
+++ b/mini-program/pages/order/components/selectCoupons/selectCoupons.wxml
@@ -0,0 +1,43 @@
+<wxs src="./selectCoupon.wxs" module="m1" />
+
+
+<t-popup visible="{{couponsShow}}" placement="bottom" bind:visible-change="hide">
+	<view class="select-coupons">
+		<view class="title">选择优惠券</view>
+		<block wx:if="{{couponsList && couponsList.length > 0}}">
+			<view class="info">
+				<block wx:if="{{!selectedNum}}">你有{{couponsList.length}}张可用优惠券</block>
+				<block wx:else>
+					已选中{{selectedNum}}张推荐优惠券, 共抵扣
+					<wr-price fill="{{false}}" price="{{reduce || 0}}" />
+				</block>
+			</view>
+			<scroll-view class="coupons-list" scroll-y="true">
+				<view class="coupons-wrap">
+					<block wx:for="{{couponsList}}" wx:key="index" wx:for-item="coupon">
+						<coupon-card
+						 title="{{coupon.title}}"
+						 type="{{coupon.type}}"
+						 status="{{coupon.status}}"
+						 desc="{{coupon.desc}}"
+						 value="{{coupon.value}}"
+						 tag="{{coupon.tag}}"
+						 timeLimit="{{coupon.timeLimit}}"
+						>
+							<view class="slot-radio" slot="operator">
+                <t-icon bindtap="selectCoupon" data-key="{{coupon.key}}" name="{{coupon.isSelected ? 'check-circle-filled' : 'circle'}}" color="#fa4126" size="40rpx"/>
+							</view>
+						</coupon-card>
+						<view class="disable" wx:if="{{coupon.status == 'useless'}}">此优惠券不能和已勾选的优惠券叠加使用</view>
+					</block>
+				</view>
+			</scroll-view>
+		</block>
+		<view wx:else class="couponp-empty-wrap">
+			<t-image t-class="couponp-empty-img" src="{{emptyCouponImg}}" />
+			<view class="couponp-empty-title">暂无优惠券</view>
+		</view>
+		<view class="coupons-cover" />
+	</view>
+</t-popup>
+
--- a/mini-program/pages/order/components/selectCoupons/selectCoupons.wxss
+++ b/mini-program/pages/order/components/selectCoupons/selectCoupons.wxss
@@ -0,0 +1,104 @@
+.select-coupons {
+  background: #fff;
+  width: 100%;
+  position: relative;
+  border-radius: 20rpx 20rpx 0 0;
+  padding-top: 28rpx;
+  padding-bottom: env(safe-area-inset-bottom);
+}
+.select-coupons .title {
+  width: 100%;
+  text-align: center;
+  font-size: 32rpx;
+  color: #333;
+  font-weight: 600;
+  line-height: 44rpx;
+}
+.select-coupons .info {
+  width: 100%;
+  height: 34rpx;
+  font-size: 24rpx;
+  color: #999;
+  line-height: 34rpx;
+  margin: 20rpx 0;
+  padding: 0 20rpx;
+}
+.select-coupons .info .price {
+  color: #fa4126;
+}
+.select-coupons .coupons-list {
+  max-height: 500rpx;
+}
+.select-coupons .coupons-list .coupons-wrap {
+  padding: 0rpx 20rpx;
+}
+.select-coupons .coupons-list .disable {
+  font-size: 24rpx;
+  color: #ff2525;
+  padding-top: 20rpx;
+}
+.select-coupons .coupons-list .slot-radio {
+  position: absolute;
+  right: 22rpx;
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-block;
+}
+.select-coupons .coupons-list .slot-radio .wr-check-filled {
+  font-size: 36rpx;
+}
+.select-coupons .coupons-list .slot-radio .check {
+  width: 36rpx;
+}
+.select-coupons .coupons-list .slot-radio .text-primary {
+  color: #fa4126;
+}
+.select-coupons .coupons-list .slot-radio .wr-check {
+  font-size: 36rpx;
+}
+.select-coupons .coupons-list .slot-radio .wr-uncheck {
+  font-size: 36rpx;
+  color: #999;
+}
+.select-coupons .couponp-empty-wrap {
+  padding: 40rpx;
+}
+.select-coupons .couponp-empty-wrap .couponp-empty-img {
+  display: block;
+  width: 240rpx;
+  height: 240rpx;
+  margin: 0 auto;
+}
+.select-coupons .couponp-empty-wrap .couponp-empty-title {
+  font-size: 28rpx;
+  color: #999;
+  text-align: center;
+  line-height: 40rpx;
+  margin-top: 40rpx;
+}
+.select-coupons .coupons-cover {
+  height: 112rpx;
+  width: 100%;
+  box-sizing: border-box;
+  margin-top: 30rpx;
+  padding: 12rpx 32rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.select-coupons .coupons-cover .btn {
+  width: 332rpx;
+  height: 88rpx;
+  text-align: center;
+  line-height: 88rpx;
+  font-size: 32rpx;
+  border-radius: 44rpx;
+  box-sizing: border-box;
+  border: 2rpx solid #dddddd;
+  color: #333333;
+}
+.select-coupons .coupons-cover .red {
+  border-color: #fa4126;
+  background-color: #fa4126;
+  color: #ffffff;
+}