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

mini-program/pages/order/order-confirm/components/address-card/index.js

@@ -0,0 +1,25 @@
+/*
+ * @Author: rileycai
+ * @Date: 2022-03-05 16:47:16
+ * @LastEditTime: 2022-03-05 16:48:32
+ * @LastEditors: rileycai
+ * @Description:
+ * @FilePath: /tdesign-miniprogram-starter/pages/order/order-confirm/components/address-card/index.js
+ */
+Component({
+  externalClasses: ['wr-class'],
+  properties: {
+    addressData: {
+      type: Object,
+      value: {},
+    },
+  },
+  methods: {
+    onAddressTap() {
+      this.triggerEvent('addressclick');
+    },
+    onAddTap() {
+      this.triggerEvent('addclick');
+    },
+  },
+});

mini-program/pages/order/order-confirm/components/address-card/index.json

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

mini-program/pages/order/order-confirm/components/address-card/index.wxml

@@ -0,0 +1,46 @@
+<wxs module="utils">
+	var hidePhoneNum = function(array) {
+	if (!array) return;
+	var mphone = array.substring(0, 3) + '****' + array.substring(7);
+	return mphone;
+	}
+	module.exports = {
+	hidePhoneNum:hidePhoneNum
+	}
+</wxs>
+
+<view class="address-card wr-class">
+	<t-cell wx:if="{{addressData && addressData.detailAddress}}" bindtap="onAddressTap" hover>
+		<view class="order-address" slot="title">
+			<t-icon name="location" color="#333333" size="40rpx" />
+			<view class="address-content">
+				<view class="title">
+					<view class="address-tag" wx:if="{{addressData.addressTag}}">
+						{{addressData.addressTag}}
+					</view>
+					{{addressData.provinceName}} {{addressData.cityName}} {{addressData.districtName}}
+				</view>
+				<view class="detail">{{addressData.detailAddress}}</view>
+				<view class="info">
+					{{addressData.name}} {{utils.hidePhoneNum(addressData.phone)}}
+				</view>
+			</view>
+			<t-icon
+			 class="address__right"
+			 name="chevron-right"
+			 color="#BBBBBB"
+			 size="40rpx"
+			/>
+		</view>
+	</t-cell>
+	<t-cell
+	 wx:else
+	 bindtap="onAddTap"
+	 title="添加收货地址"
+	 hover
+	>
+		<t-icon name="add-circle" slot="left-icon" size="40rpx" />
+	</t-cell>
+	<view class="top-line" />
+</view>
+

mini-program/pages/order/order-confirm/components/address-card/index.wxss

@@ -0,0 +1,66 @@
+.address-card {
+  background: #fff;
+  margin: 0rpx 0rpx 24rpx;
+}
+.address-card .wr-cell__title {
+  color: #999;
+  margin-left: 6rpx;
+}
+.address-card .order-address {
+  display: flex;
+  width: 100%;
+}
+.address-card .order-address .address-content {
+  flex: 1;
+}
+.order-address .address__right {
+  align-self: center;
+}
+.address-card .order-address .title {
+  display: flex;
+  align-items: center;
+  height: 40rpx;
+  font-size: 28rpx;
+  font-weight: normal;
+  color: #999999;
+  line-height: 40rpx;
+}
+.address-card .order-address .title .address-tag {
+  width: 52rpx;
+  height: 29rpx;
+  border: 1rpx solid #0091ff;
+  background-color: rgba(122, 167, 251, 0.1);
+  text-align: center;
+  line-height: 29rpx;
+  border-radius: 8rpx;
+  color: #0091ff;
+  font-size: 20rpx;
+  margin-right: 12rpx;
+}
+.address-card .order-address .detail {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #333333;
+  line-height: 48rpx;
+  margin: 8rpx 0;
+}
+.address-card .order-address .info {
+  height: 40rpx;
+  font-size: 28rpx;
+  font-weight: normal;
+  color: #333333;
+  line-height: 40rpx;
+}
+.address-card .top-line {
+  width: 100%;
+  height: 6rpx;
+  background-color: #fff;
+  background-image: url(https://cdn-we-retail.ym.tencent.com/miniapp/order/stripe.png);
+  background-repeat: repeat-x;
+  display: block;
+}

mini-program/pages/order/order-confirm/getNotes.wxs

@@ -0,0 +1,11 @@
+var getNotes = function (storeInfoList, storeIndex) {
+  if (!storeInfoList) {
+    return '';
+  }
+  var storeInfo = storeInfoList[storeIndex];
+  if (!storeInfo) {
+    return '';
+  }
+  return storeInfoList[storeIndex].remark;
+};
+module.exports = getNotes;

mini-program/pages/order/order-confirm/handleInvoice.wxs

@@ -0,0 +1,11 @@
+var handleInvoice = function (invoiceData) {
+  if (!invoiceData || invoiceData.invoiceType == 0) {
+    return '暂不开发票';
+  }
+  var title = invoiceData.titleType == 2 ? '公司' : '个人';
+  var content = invoiceData.contentType == 2 ? '商品类别' : '商品明细';
+  return invoiceData.email
+    ? '电子普通发票 (' + content + ' - ' + title + ')'
+    : '暂不开发票';
+};
+module.exports = handleInvoice;

mini-program/pages/order/order-confirm/index.js

@@ -0,0 +1,571 @@
+import Toast from 'tdesign-miniprogram/toast/index';
+import { fetchSettleDetail } from '../../../services/order/orderConfirm';
+import { commitPay, wechatPayOrder } from './pay';
+import { getAddressPromise } from '../../usercenter/address/list/util';
+
+const stripeImg = `https://cdn-we-retail.ym.tencent.com/miniapp/order/stripe.png`;
+
+Page({
+  data: {
+    placeholder: '备注信息',
+    stripeImg,
+    loading: false,
+    settleDetailData: {
+      storeGoodsList: [], //正常下单商品列表
+      outOfStockGoodsList: [], //库存不足商品
+      abnormalDeliveryGoodsList: [], // 不能正常配送商品
+      inValidGoodsList: [], // 失效或者库存不足
+      limitGoodsList: [], //限购商品
+      couponList: [], //门店优惠券信息
+    }, // 获取结算页详情 data
+    orderCardList: [], // 仅用于商品卡片展示
+    couponsShow: false, // 显示优惠券的弹框
+    invoiceData: {
+      email: '', // 发票发送邮箱
+      buyerTaxNo: '', // 税号
+      invoiceType: null, // 开票类型  1：增值税专用发票； 2：增值税普通发票； 3：增值税电子发票；4：增值税卷式发票；5：区块链电子发票。
+      buyerPhone: '', //手机号
+      buyerName: '', //个人或公司名称
+      titleType: '', // 发票抬头 1-公司 2-个人
+      contentType: '', //发票内容 1-明细 2-类别
+    },
+    goodsRequestList: [],
+    userAddressReq: null,
+    popupShow: false, // 不在配送范围 失效 库存不足 商品展示弹框
+    notesPosition: 'center',
+    storeInfoList: [],
+    storeNoteIndex: 0, //当前填写备注门店index
+    promotionGoodsList: [], //当前门店商品列表(优惠券)
+    couponList: [], //当前门店所选优惠券
+    submitCouponList: [], //所有门店所选优惠券
+    currentStoreId: null, //当前优惠券storeId
+    userAddress: null,
+  },
+
+  payLock: false,
+  noteInfo: [],
+  tempNoteInfo: [],
+  onLoad(options) {
+    this.setData({
+      loading: true,
+    });
+    this.handleOptionsParams(options);
+  },
+  onShow() {
+    const invoiceData = wx.getStorageSync('invoiceData');
+    if (invoiceData) {
+      //处理发票
+      this.invoiceData = invoiceData;
+      this.setData({
+        invoiceData,
+      });
+      wx.removeStorageSync('invoiceData');
+    }
+  },
+
+  init() {
+    this.setData({
+      loading: true,
+    });
+    const { goodsRequestList } = this;
+    this.handleOptionsParams({ goodsRequestList });
+  },
+  // 处理不同情况下跳转到结算页时需要的参数
+  handleOptionsParams(options, couponList) {
+    let { goodsRequestList } = this; // 商品列表
+    let { userAddressReq } = this; // 收货地址
+
+    const storeInfoList = []; // 门店列表
+    // 如果是从地址选择页面返回，则使用地址显选择页面新选择的地址去获取结算数据
+    if (options.userAddressReq) {
+      userAddressReq = options.userAddressReq;
+    }
+    if (options.type === 'cart') {
+      // 从购物车跳转过来时，获取传入的商品列表数据
+      const goodsRequestListJson = wx.getStorageSync('order.goodsRequestList');
+      goodsRequestList = JSON.parse(goodsRequestListJson);
+    } else if (typeof options.goodsRequestList === 'string') {
+      goodsRequestList = JSON.parse(options.goodsRequestList);
+    }
+    //获取结算页请求数据列表
+    const storeMap = {};
+    goodsRequestList.forEach((goods) => {
+      if (!storeMap[goods.storeId]) {
+        storeInfoList.push({
+          storeId: goods.storeId,
+          storeName: goods.storeName,
+        });
+        storeMap[goods.storeId] = true;
+      }
+    });
+    this.goodsRequestList = goodsRequestList;
+    this.storeInfoList = storeInfoList;
+    const params = {
+      goodsRequestList,
+      storeInfoList,
+      userAddressReq,
+      couponList,
+    };
+    fetchSettleDetail(params).then(
+      (res) => {
+        this.setData({
+          loading: false,
+        });
+        this.initData(res.data);
+      },
+      () => {
+        //接口异常处理
+        this.handleError();
+      },
+    );
+  },
+  initData(resData) {
+    // 转换商品卡片显示数据
+    const data = this.handleResToGoodsCard(resData);
+    this.userAddressReq = resData.userAddress;
+
+    if (resData.userAddress) {
+      this.setData({ userAddress: resData.userAddress });
+    }
+    this.setData({ settleDetailData: data });
+    this.isInvalidOrder(data);
+  },
+
+  isInvalidOrder(data) {
+    // 失效 不在配送范围 限购的商品 提示弹窗
+    if (
+      (data.limitGoodsList && data.limitGoodsList.length > 0) ||
+      (data.abnormalDeliveryGoodsList &&
+        data.abnormalDeliveryGoodsList.length > 0) ||
+      (data.inValidGoodsList && data.inValidGoodsList.length > 0)
+    ) {
+      this.setData({ popupShow: true });
+      return true;
+    }
+    this.setData({ popupShow: false });
+    if (data.settleType === 0) {
+      return true;
+    }
+    return false;
+  },
+
+  handleError() {
+    Toast({
+      context: this,
+      selector: '#t-toast',
+      message: '结算异常, 请稍后重试',
+      duration: 2000,
+      icon: '',
+    });
+
+    setTimeout(() => {
+      wx.navigateBack();
+    }, 1500);
+    this.setData({
+      loading: false,
+    });
+  },
+  getRequestGoodsList(storeGoodsList) {
+    const filterStoreGoodsList = [];
+    storeGoodsList &&
+      storeGoodsList.forEach((store) => {
+        const { storeName } = store;
+        store.skuDetailVos &&
+          store.skuDetailVos.forEach((goods) => {
+            const data = goods;
+            data.storeName = storeName;
+            filterStoreGoodsList.push(data);
+          });
+      });
+    return filterStoreGoodsList;
+  },
+  handleGoodsRequest(goods, isOutStock = false) {
+    const {
+      reminderStock,
+      quantity,
+      storeId,
+      uid,
+      saasId,
+      spuId,
+      goodsName,
+      skuId,
+      storeName,
+      roomId,
+    } = goods;
+    const resQuantity = isOutStock ? reminderStock : quantity;
+    return {
+      quantity: resQuantity,
+      storeId,
+      uid,
+      saasId,
+      spuId,
+      goodsName,
+      skuId,
+      storeName,
+      roomId,
+    };
+  },
+  handleResToGoodsCard(data) {
+    // 转换数据 符合 goods-card展示
+    const orderCardList = []; // 订单卡片列表
+    const storeInfoList = [];
+    const submitCouponList = []; //使用优惠券列表;
+
+    data.storeGoodsList &&
+      data.storeGoodsList.forEach((ele) => {
+        const orderCard = {
+          id: ele.storeId,
+          storeName: ele.storeName,
+          status: 0,
+          statusDesc: '',
+          amount: ele.storeTotalPayAmount,
+          goodsList: [],
+        }; // 订单卡片
+        ele.skuDetailVos.forEach((item, index) => {
+          orderCard.goodsList.push({
+            id: index,
+            thumb: item.image,
+            title: item.goodsName,
+            specs: item.skuSpecLst.map((s) => s.specValue), // 规格列表 string[]
+            price: item.tagPrice || item.settlePrice || '0', // 优先取限时活动价
+            settlePrice: item.settlePrice,
+            titlePrefixTags: item.tagText ? [{ text: item.tagText }] : [],
+            num: item.quantity,
+            skuId: item.skuId,
+            spuId: item.spuId,
+            storeId: item.storeId,
+          });
+        });
+
+        storeInfoList.push({
+          storeId: ele.storeId,
+          storeName: ele.storeName,
+          remark: '',
+        });
+        submitCouponList.push({
+          storeId: ele.storeId,
+          couponList: ele.couponList || [],
+        });
+        this.noteInfo.push('');
+        this.tempNoteInfo.push('');
+        orderCardList.push(orderCard);
+      });
+
+    this.setData({ orderCardList, storeInfoList, submitCouponList });
+    return data;
+  },
+  onGotoAddress() {
+    /** 获取一个Promise */
+    getAddressPromise()
+      .then((address) => {
+        this.handleOptionsParams({
+          userAddressReq: { ...address, checked: true },
+        });
+      })
+      .catch(() => {});
+
+    const { userAddressReq } = this; // 收货地址
+
+    let id = '';
+
+    if (userAddressReq?.id) {
+      id = `&id=${userAddressReq.id}`;
+    }
+
+    wx.navigateTo({
+      url: `/pages/usercenter/address/list/index?selectMode=1&isOrderSure=1${id}`,
+    });
+  },
+  onNotes(e) {
+    const { storenoteindex: storeNoteIndex } = e.currentTarget.dataset;
+    // 添加备注信息
+    this.setData({
+      dialogShow: true,
+      storeNoteIndex,
+    });
+  },
+  onInput(e) {
+    const { storeNoteIndex } = this.data;
+    this.noteInfo[storeNoteIndex] = e.detail.value;
+  },
+  onBlur() {
+    this.setData({
+      notesPosition: 'center',
+    });
+  },
+  onFocus() {
+    this.setData({
+      notesPosition: 'self',
+    });
+  },
+  onTap() {
+    this.setData({
+      placeholder: '',
+    });
+  },
+  onNoteConfirm() {
+    // 备注信息 确认按钮
+    const { storeInfoList, storeNoteIndex } = this.data;
+    this.tempNoteInfo[storeNoteIndex] = this.noteInfo[storeNoteIndex];
+    storeInfoList[storeNoteIndex].remark = this.noteInfo[storeNoteIndex];
+
+    this.setData({
+      dialogShow: false,
+      storeInfoList,
+    });
+  },
+  onNoteCancel() {
+    // 备注信息 取消按钮
+    const { storeNoteIndex } = this.data;
+    this.noteInfo[storeNoteIndex] = this.tempNoteInfo[storeNoteIndex];
+    this.setData({
+      dialogShow: false,
+    });
+  },
+
+  onSureCommit() {
+    // 商品库存不足继续结算
+    const { settleDetailData } = this.data;
+    const { outOfStockGoodsList, storeGoodsList, inValidGoodsList } =
+      settleDetailData;
+    if (
+      (outOfStockGoodsList && outOfStockGoodsList.length > 0) ||
+      (inValidGoodsList && storeGoodsList)
+    ) {
+      // 合并正常商品 和 库存 不足商品继续支付
+      // 过滤不必要的参数
+      const filterOutGoodsList = [];
+      outOfStockGoodsList &&
+        outOfStockGoodsList.forEach((outOfStockGoods) => {
+          const { storeName } = outOfStockGoods;
+          outOfStockGoods.unSettlementGoods.forEach((ele) => {
+            const data = ele;
+            data.quantity = ele.reminderStock;
+            data.storeName = storeName;
+            filterOutGoodsList.push(data);
+          });
+        });
+      const filterStoreGoodsList = this.getRequestGoodsList(storeGoodsList);
+      const goodsRequestList = filterOutGoodsList.concat(filterStoreGoodsList);
+      this.handleOptionsParams({ goodsRequestList });
+    }
+  },
+  // 提交订单
+  submitOrder() {
+    const {
+      settleDetailData,
+      userAddressReq,
+      invoiceData,
+      storeInfoList,
+      submitCouponList,
+    } = this.data;
+    const { goodsRequestList } = this;
+
+    if (!userAddressReq && !settleDetailData.userAddress) {
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message: '请添加收货地址',
+        duration: 2000,
+        icon: 'help-circle',
+      });
+
+      return;
+    }
+    if (
+      this.payLock ||
+      !settleDetailData.settleType ||
+      !settleDetailData.totalAmount
+    ) {
+      return;
+    }
+    this.payLock = true;
+    const resSubmitCouponList = this.handleCouponList(submitCouponList);
+    const params = {
+      userAddressReq: settleDetailData.userAddress || userAddressReq,
+      goodsRequestList: goodsRequestList,
+      userName: settleDetailData.userAddress.name || userAddressReq.name,
+      totalAmount: settleDetailData.totalPayAmount, //取优惠后的结算金额
+      invoiceRequest: null,
+      storeInfoList,
+      couponList: resSubmitCouponList,
+    };
+    if (invoiceData && invoiceData.email) {
+      params.invoiceRequest = invoiceData;
+    }
+    commitPay(params).then(
+      (res) => {
+        this.payLock = false;
+        const { data } = res;
+        // 提交出现 失效 不在配送范围 限购的商品 提示弹窗
+        if (this.isInvalidOrder(data)) {
+          return;
+        }
+        if (res.code === 'Success') {
+          this.handlePay(data, settleDetailData);
+        } else {
+          Toast({
+            context: this,
+            selector: '#t-toast',
+            message: res.msg || '提交订单超时，请稍后重试',
+            duration: 2000,
+            icon: '',
+          });
+          setTimeout(() => {
+            // 提交支付失败   返回购物车
+            wx.navigateBack();
+          }, 2000);
+        }
+      },
+      (err) => {
+        this.payLock = false;
+        if (
+          err.code === 'CONTAINS_INSUFFICIENT_GOODS' ||
+          err.code === 'TOTAL_AMOUNT_DIFFERENT'
+        ) {
+          Toast({
+            context: this,
+            selector: '#t-toast',
+            message: err.msg || '支付异常',
+            duration: 2000,
+            icon: '',
+          });
+          this.init();
+        } else if (err.code === 'ORDER_PAY_FAIL') {
+          Toast({
+            context: this,
+            selector: '#t-toast',
+            message: '支付失败',
+            duration: 2000,
+            icon: 'close-circle',
+          });
+          setTimeout(() => {
+            wx.redirectTo({ url: '/order/list' });
+          });
+        } else if (err.code === 'ILLEGAL_CONFIG_PARAM') {
+          Toast({
+            context: this,
+            selector: '#t-toast',
+            message:
+              '支付失败，微信支付商户号设置有误，请商家重新检查支付设置。',
+            duration: 2000,
+            icon: 'close-circle',
+          });
+          setTimeout(() => {
+            wx.redirectTo({ url: '/order/list' });
+          });
+        } else {
+          Toast({
+            context: this,
+            selector: '#t-toast',
+            message: err.msg || '提交支付超时，请稍后重试',
+            duration: 2000,
+            icon: '',
+          });
+          setTimeout(() => {
+            // 提交支付失败  返回购物车
+            wx.navigateBack();
+          }, 2000);
+        }
+      },
+    );
+  },
+
+  // 处理支付
+  handlePay(data, settleDetailData) {
+    const { channel, payInfo, tradeNo, interactId, transactionId } = data;
+    const { totalAmount, totalPayAmount } = settleDetailData;
+    const payOrderInfo = {
+      payInfo: payInfo,
+      orderId: tradeNo,
+      orderAmt: totalAmount,
+      payAmt: totalPayAmount,
+      interactId: interactId,
+      tradeNo: tradeNo,
+      transactionId: transactionId,
+    };
+
+    if (channel === 'wechat') {
+      wechatPayOrder(payOrderInfo);
+    }
+  },
+
+  hide() {
+    // 隐藏 popup
+    this.setData({
+      'settleDetailData.abnormalDeliveryGoodsList': [],
+    });
+  },
+  onReceipt() {
+    // 跳转 开发票
+    const invoiceData = this.invoiceData || {};
+    wx.navigateTo({
+      url: `/pages/order/receipt/index?invoiceData=${JSON.stringify(
+        invoiceData,
+      )}`,
+    });
+  },
+
+  onCoupons(e) {
+    const { submitCouponList, currentStoreId } = this.data;
+    const { goodsRequestList } = this;
+    const { selectedList } = e.detail;
+    const tempSubmitCouponList = submitCouponList.map((storeCoupon) => {
+      return {
+        couponList:
+          storeCoupon.storeId === currentStoreId
+            ? selectedList
+            : storeCoupon.couponList,
+      };
+    });
+    const resSubmitCouponList = this.handleCouponList(tempSubmitCouponList);
+    //确定选择优惠券
+    this.handleOptionsParams({ goodsRequestList }, resSubmitCouponList);
+    this.setData({ couponsShow: false });
+  },
+  onOpenCoupons(e) {
+    const { storeid } = e.currentTarget.dataset;
+    this.setData({
+      couponsShow: true,
+      currentStoreId: storeid,
+    });
+  },
+
+  handleCouponList(storeCouponList) {
+    //处理门店优惠券   转换成接口需要
+    if (!storeCouponList) return [];
+    const resSubmitCouponList = [];
+    storeCouponList.forEach((ele) => {
+      resSubmitCouponList.push(...ele.couponList);
+    });
+    return resSubmitCouponList;
+  },
+
+  onGoodsNumChange(e) {
+    const {
+      detail: { value },
+      currentTarget: {
+        dataset: { goods },
+      },
+    } = e;
+    const index = this.goodsRequestList.findIndex(
+      ({ storeId, spuId, skuId }) =>
+        goods.storeId === storeId &&
+        goods.spuId === spuId &&
+        goods.skuId === skuId,
+    );
+    if (index >= 0) {
+      // eslint-disable-next-line no-confusing-arrow
+      const goodsRequestList = this.goodsRequestList.map((item, i) =>
+        i === index ? { ...item, quantity: value } : item,
+      );
+      this.handleOptionsParams({ goodsRequestList });
+    }
+  },
+
+  onPopupChange() {
+    this.setData({
+      popupShow: !this.data.popupShow,
+    });
+  },
+});

mini-program/pages/order/order-confirm/index.json

@@ -0,0 +1,16 @@
+{
+  "navigationBarTitleText": "订单确认",
+  "usingComponents": {
+    "t-popup": "tdesign-miniprogram/popup/popup",
+    "t-toast": "tdesign-miniprogram/toast/toast",
+    "t-icon": "tdesign-miniprogram/icon/icon",
+    "t-cell": "tdesign-miniprogram/cell/cell",
+    "t-dialog": "tdesign-miniprogram/dialog/dialog",
+    "t-textarea": "tdesign-miniprogram/textarea/textarea",
+    "price": "/components/price/index",
+    "select-coupons": "../components/selectCoupons/selectCoupons",
+    "no-goods": "../components/noGoods/noGoods",
+    "t-image": "/components/webp-image/index",
+    "address-card": "./components/address-card/index"
+  }
+}

mini-program/pages/order/order-confirm/index.wxml

@@ -0,0 +1,151 @@
+<wxs module="order" src="./order.wxs" />
+
+<wxs module="handleInvoice" src="./handleInvoice.wxs" />
+<wxs module="getNotes" src="./getNotes.wxs" />
+<view class="order-sure" wx:if="{{!loading}}">
+  <address-card addressData="{{userAddress}}" bind:addclick="onGotoAddress" bind:addressclick="onGotoAddress" />
+  <view
+    class="order-wrapper"
+    wx:for="{{settleDetailData.storeGoodsList}}"
+    wx:for-item="stores"
+    wx:for-index="storeIndex"
+    wx:key="storeIndex"
+  >
+    <view class="store-wrapper">
+      <t-icon prefix="wr" size="40rpx" color="#333333" name="store" class="store-logo" />
+      {{stores.storeName}}
+    </view>
+    <view
+      wx:if="{{orderCardList[storeIndex].goodsList.length > 0}}"
+      wx:for="{{orderCardList[storeIndex].goodsList}}"
+      wx:for-item="goods"
+      wx:for-index="gIndex"
+      wx:key="id"
+      class="goods-wrapper"
+    >
+      <t-image src="{{goods.thumb}}" t-class="goods-image" mode="aspectFill" />
+      <view class="goods-content">
+        <view class="goods-title">{{goods.title}}</view>
+        <view>{{goods.specs}}</view>
+      </view>
+      <view class="goods-right">
+        <price wr-class="goods-price" price="{{goods.price}}" fill="{{true}}" decimalSmaller />
+        <view class="goods-num">x{{goods.num}}</view>
+      </view>
+    </view>
+  </view>
+  <view class="pay-detail">
+    <view class="pay-item">
+      <text>商品总额</text>
+      <price
+        fill
+        decimalSmaller
+        wr-class="pay-item__right font-bold"
+        price="{{settleDetailData.totalSalePrice || '0'}}"
+      />
+    </view>
+    <view class="pay-item">
+      <text>运费</text>
+      <view class="pay-item__right font-bold">
+        <block wx:if="{{settleDetailData.totalDeliveryFee && settleDetailData.totalDeliveryFee != 0}}">
+          +
+          <price fill decimalSmaller price="{{settleDetailData.totalDeliveryFee}}" />
+        </block>
+        <text wx:else>免运费</text>
+      </view>
+    </view>
+    <view class="pay-item">
+      <text>活动优惠</text>
+      <view class="pay-item__right primary font-bold">
+        -
+        <price fill price="{{settleDetailData.totalPromotionAmount || 0}}" />
+      </view>
+    </view>
+    <view class="pay-item">
+      <text>优惠券</text>
+      <view
+        class="pay-item__right"
+        data-storeid="{{settleDetailData.storeGoodsList[0].storeId}}"
+        catchtap="onOpenCoupons"
+      >
+        <block wx:if="{{submitCouponList.length}}">
+          <block wx:if="{{settleDetailData.totalCouponAmount && settleDetailData.totalCouponAmount !== '0'}}">
+            -<price fill decimalSmaller price="{{settleDetailData.totalCouponAmount}}" />
+          </block>
+          <block wx:else>选择优惠券</block>
+        </block>
+        <text wx:else>无可用</text>
+        <t-icon name="chevron-right" size="32rpx" color="#BBBBBB" />
+      </view>
+    </view>
+    <view class="pay-item" wx:if="{{settleDetailData.invoiceSupport}}">
+      <text>发票</text>
+      <view class="pay-item__right" catchtap="onReceipt">
+        <text>{{handleInvoice(invoiceData)}}</text>
+        <t-icon name="chevron-right" size="32rpx" color="#BBBBBB" />
+      </view>
+    </view>
+    <view class="pay-item">
+      <text>订单备注</text>
+      <view class="pay-item__right" data-storenoteindex="{{0}}" catchtap="onNotes">
+        <text class="pay-remark"
+          >{{getNotes(storeInfoList, 0) ? getNotes(storeInfoList, 0) :'选填，建议先和商家沟通确认'}}</text
+        >
+        <t-icon name="chevron-right" size="32rpx" color="#BBBBBB" />
+      </view>
+    </view>
+  </view>
+  <view class="amount-wrapper">
+    <view class="pay-amount">
+      <text class="order-num">共{{settleDetailData.totalGoodsCount}}件</text>
+      <text>小计</text>
+      <price class="total-price" price="{{settleDetailData.totalPayAmount}}" fill="{{false}}" decimalSmaller />
+    </view>
+  </view>
+  <view class="wx-pay-cover">
+    <view class="wx-pay">
+      <price decimalSmaller fill class="price" price="{{settleDetailData.totalPayAmount || '0'}}" />
+      <view class="submit-btn {{ settleDetailData.settleType === 1 ? '':'btn-gray'}}" bindtap="submitOrder">
+        提交订单
+      </view>
+    </view>
+  </view>
+  <t-dialog
+    t-class="add-notes"
+    title="填写备注信息"
+    visible="{{dialogShow}}"
+    confirm-btn="确认"
+    cancel-btn="取消"
+    t-class-content="add-notes__content"
+    t-class-confirm="dialog__button-confirm"
+    t-class-cancel="dialog__button-cancel"
+    bindconfirm="onNoteConfirm"
+    bindcancel="onNoteCancel"
+  >
+    <t-textarea
+      slot="content"
+      focus="{{dialogShow}}"
+      class="notes"
+      t-class="add-notes__textarea"
+      value="{{storeInfoList[storeNoteIndex] && storeInfoList[storeNoteIndex].remark}}"
+      placeholder="备注信息"
+      t-class-textarea="add-notes__textarea__font"
+      bindfocus="onFocus"
+      bindblur="onBlur"
+      bindchange="onInput"
+      maxlength="{{50}}"
+    />
+  </t-dialog>
+  <t-popup visible="{{popupShow}}" placement="bottom" bind:visible-change="onPopupChange">
+    <no-goods slot="content" bind:change="onSureCommit" settleDetailData="{{settleDetailData}}" />
+  </t-popup>
+  <select-coupons
+    bind:sure="onCoupons"
+    storeId="{{currentStoreId}}"
+    orderSureCouponList="{{couponList}}"
+    promotionGoodsList="{{promotionGoodsList}}"
+    couponsShow="{{couponsShow}}"
+  />
+</view>
+<t-toast id="t-toast" />
+<t-dialog id="t-dialog" />

mini-program/pages/order/order-confirm/index.wxss

@@ -0,0 +1,221 @@
+.order-sure {
+  box-sizing: border-box;
+  background: #f6f6f6;
+  padding: 24rpx 0 calc(env(safe-area-inset-bottom) + 136rpx);
+  min-height: 100vh;
+}
+
+.order-sure .wx-pay-cover {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 10;
+  background: #fff;
+  height: 112rpx;
+  padding-bottom: env(safe-area-inset-bottom);
+}
+.order-sure .wx-pay-cover .wx-pay {
+  width: 100%;
+  height: 100rpx;
+  box-sizing: border-box;
+  padding: 0rpx 32rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.order-sure .wx-pay-cover .wx-pay .price {
+  color: #fa4126;
+  font-weight: bold;
+  font-size: 63rpx;
+  line-height: 88rpx;
+}
+
+.order-sure .wx-pay-cover .wx-pay .submit-btn {
+  height: 80rpx;
+  width: 240rpx;
+  border-radius: 40rpx;
+  background-color: #fa4126;
+  color: #ffffff;
+  line-height: 80rpx;
+  font-weight: bold;
+  font-size: 28rpx;
+  text-align: center;
+}
+.order-sure .wx-pay-cover .wx-pay .btn-gray {
+  background: #cccccc;
+}
+
+.order-wrapper .store-wrapper {
+  width: 100%;
+  height: 96rpx;
+  box-sizing: border-box;
+  padding: 0 32rpx;
+  display: flex;
+  align-items: center;
+  font-size: 28rpx;
+  line-height: 40rpx;
+  color: #333333;
+  background-color: #ffffff;
+}
+.order-wrapper .store-wrapper .store-logo {
+  margin-right: 16rpx;
+}
+.order-wrapper .goods-wrapper {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 16rpx 32rpx;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  font-size: 24rpx;
+  line-height: 32rpx;
+  color: #999999;
+  background-color: #ffffff;
+}
+.goods-wrapper .goods-image {
+  width: 176rpx;
+  height: 176rpx;
+  border-radius: 8rpx;
+  overflow: hidden;
+  margin-right: 16rpx;
+}
+.goods-wrapper .goods-content {
+  flex: 1;
+}
+
+.goods-wrapper .goods-content .goods-title {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 28rpx;
+  line-height: 40rpx;
+  margin-bottom: 12rpx;
+  color: #333333;
+  margin-right: 16rpx;
+}
+
+.goods-wrapper .goods-right {
+  min-width: 128rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.goods-right .goods-price {
+  color: #333333;
+  font-size: 32rpx;
+  line-height: 48rpx;
+  font-weight: bold;
+  margin-bottom: 16rpx;
+}
+
+.goods-right .goods-num {
+  text-align: right;
+}
+
+.order-sure .pay-detail {
+  background-color: #ffffff;
+  padding: 16rpx 32rpx;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.order-sure .pay-detail .pay-item {
+  width: 100%;
+  height: 72rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 26rpx;
+  line-height: 36rpx;
+  color: #666666;
+}
+.order-sure .pay-detail .pay-item .pay-item__right {
+  color: #333333;
+  font-size: 24rpx;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  max-width: 400rpx;
+}
+.order-sure .pay-detail .pay-item .pay-item__right .pay-remark {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  max-width: 400rpx;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.order-sure .pay-detail .pay-item .font-bold {
+  font-weight: bold;
+}
+.order-sure .pay-detail .pay-item .primary {
+  color: #fa4126;
+}
+
+.add-notes .add-notes__content {
+  --td-textarea-background-color: #f5f5f5;
+}
+
+.add-notes .t-textarea__placeholder {
+  color: #aeb3b7;
+}
+
+.add-notes .add-notes__textarea__font {
+  font-size: 26rpx;
+}
+.add-notes .add-notes__textarea {
+  margin-top: 32rpx;
+}
+
+.order-sure .add-notes .dialog__message {
+  border-radius: 8rpx;
+}
+
+.order-sure .add-notes .dialog__button-cancel::after {
+  border-right: 0;
+}
+
+.order-sure .amount-wrapper {
+  width: 100%;
+  box-sizing: border-box;
+  background-color: #ffffff;
+  padding: 0rpx 32rpx;
+  height: 96rpx;
+}
+
+.order-sure .pay-amount {
+  width: 100%;
+  height: 96rpx;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  font-size: 28rpx;
+  color: #333333;
+  position: relative;
+}
+.order-sure .pay-amount::after {
+  position: absolute;
+  content: ' ';
+  top: 0;
+  left: 0;
+  width: 200%;
+  height: 200%;
+  transform: scale(0.5);
+  transform-origin: 0 0;
+  border-top: 2rpx solid #f5f5f5;
+}
+.order-sure .pay-amount .order-num {
+  color: #999999;
+  padding-right: 8rpx;
+}
+
+.order-sure .pay-amount .total-price {
+  font-size: 36rpx;
+  color: #fa4126;
+  font-weight: bold;
+  padding-left: 8rpx;
+}

mini-program/pages/order/order-confirm/order.wxs

@@ -0,0 +1,8 @@
+var toHide = function (array) {
+  if (!array) return;
+  var mphone = array.substring(0, 3) + '****' + array.substring(7);
+  return mphone;
+};
+module.exports = {
+  toHide: toHide,
+};

mini-program/pages/order/order-confirm/pay.js

@@ -0,0 +1,115 @@
+import Dialog from 'tdesign-miniprogram/dialog/index';
+import Toast from 'tdesign-miniprogram/toast/index';
+
+import { dispatchCommitPay } from '../../../services/order/orderConfirm';
+
+// 真实的提交支付
+export const commitPay = (params) => {
+  return dispatchCommitPay({
+    goodsRequestList: params.goodsRequestList, // 待结算的商品集合
+    invoiceRequest: params.invoiceRequest, // 发票信息
+    // isIgnore: params.isIgnore || false, // 删掉 是否忽视库存不足和商品失效,继续结算,true=继续结算 购物车请赋值false
+    userAddressReq: params.userAddressReq, // 地址信息(用户在购物选择更换地址)
+    currency: params.currency || 'CNY', // 支付货币: 人民币=CNY，美元=USD
+    logisticsType: params.logisticsType || 1, // 配送方式 0=无需配送 1=快递 2=商家 3=同城 4=自提
+    // orderMark: params.orderMark, // 下单备注
+    orderType: params.orderType || 0, // 订单类型 0=普通订单 1=虚拟订单
+    payType: params.payType || 1, // 支付类型(0=线上、1=线下)
+    totalAmount: params.totalAmount, // 新增字段"totalAmount"总的支付金额
+    userName: params.userName, // 用户名
+    payWay: 1,
+    authorizationCode: '', //loginCode, // 登录凭证
+    storeInfoList: params.storeInfoList, //备注信息列表
+    couponList: params.couponList,
+    groupInfo: params.groupInfo,
+  });
+};
+
+export const paySuccess = (payOrderInfo) => {
+  const { payAmt, tradeNo, groupId, promotionId } = payOrderInfo;
+  // 支付成功
+  Toast({
+    context: this,
+    selector: '#t-toast',
+    message: '支付成功',
+    duration: 2000,
+    icon: 'check-circle',
+  });
+
+  const params = {
+    totalPaid: payAmt,
+    orderNo: tradeNo,
+  };
+  if (groupId) {
+    params.groupId = groupId;
+  }
+  if (promotionId) {
+    params.promotionId = promotionId;
+  }
+  const paramsStr = Object.keys(params)
+    .map((k) => `${k}=${params[k]}`)
+    .join('&');
+  // 跳转支付结果页面
+  wx.redirectTo({ url: `/pages/order/pay-result/index?${paramsStr}` });
+};
+
+export const payFail = (payOrderInfo, resultMsg) => {
+  if (resultMsg === 'requestPayment:fail cancel') {
+    if (payOrderInfo.dialogOnCancel) {
+      //结算页，取消付款，dialog提示
+      Dialog.confirm({
+        title: '是否放弃付款',
+        content: '商品可能很快就会被抢空哦，是否放弃付款？',
+        confirmBtn: '放弃',
+        cancelBtn: '继续付款',
+      }).then(() => {
+        wx.redirectTo({ url: '/pages/order/order-list/index' });
+      });
+    } else {
+      //订单列表页，订单详情页，取消付款，toast提示
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message: '支付取消',
+        duration: 2000,
+        icon: 'close-circle',
+      });
+    }
+  } else {
+    Toast({
+      context: this,
+      selector: '#t-toast',
+      message: `支付失败：${resultMsg}`,
+      duration: 2000,
+      icon: 'close-circle',
+    });
+    setTimeout(() => {
+      wx.redirectTo({ url: '/pages/order/order-list/index' });
+    }, 2000);
+  }
+};
+
+// 微信支付方式
+export const wechatPayOrder = (payOrderInfo) => {
+  // const payInfo = JSON.parse(payOrderInfo.payInfo);
+  // const { timeStamp, nonceStr, signType, paySign } = payInfo;
+  return new Promise((resolve) => {
+    // demo 中直接走支付成功
+    paySuccess(payOrderInfo);
+    resolve();
+    /* wx.requestPayment({
+      timeStamp,
+      nonceStr,
+      package: payInfo.package,
+      signType,
+      paySign,
+      success: function () {
+        paySuccess(payOrderInfo);
+        resolve();
+      },
+      fail: function (err) {
+        payFail(payOrderInfo, err.errMsg);
+      },
+    }); */
+  });
+};