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

mini-program/pages/order/after-service-detail/api.js

@@ -0,0 +1,34 @@
+import { resp } from '../after-service-list/api';
+import dayjs from 'dayjs';
+import { mockIp, mockReqId } from '../../../utils/mock';
+
+export const formatTime = (date, template) => dayjs(date).format(template);
+
+export function getRightsDetail({ rightsNo }) {
+  const _resq = {
+    data: {},
+    code: 'Success',
+    msg: null,
+    requestId: mockReqId(),
+    clientIp: mockIp(),
+    rt: 79,
+    success: true,
+  };
+  _resq.data =
+    resp.data.dataList.filter((item) => item.rights.rightsNo === rightsNo) ||
+    {};
+  return Promise.resolve(_resq);
+}
+
+export function cancelRights() {
+  const _resq = {
+    data: {},
+    code: 'Success',
+    msg: null,
+    requestId: mockReqId(),
+    clientIp: mockIp(),
+    rt: 79,
+    success: true,
+  };
+  return Promise.resolve(_resq);
+}

mini-program/pages/order/after-service-detail/index.js

@@ -0,0 +1,205 @@
+import Toast from 'tdesign-miniprogram/toast/index';
+import { ServiceType, ServiceTypeDesc, ServiceStatus } from '../config';
+import { formatTime, getRightsDetail } from './api';
+
+const TitleConfig = {
+  [ServiceType.ORDER_CANCEL]: '退款详情',
+  [ServiceType.ONLY_REFUND]: '退款详情',
+  [ServiceType.RETURN_GOODS]: '退货退款详情',
+};
+
+Page({
+  data: {
+    pageLoading: true,
+    serviceRaw: {},
+    service: {},
+    deliveryButton: {},
+    gallery: {
+      current: 0,
+      show: false,
+      proofs: [],
+    },
+    showProofs: false,
+    backRefresh: false,
+  },
+
+  onLoad(query) {
+    this.rightsNo = query.rightsNo;
+    this.inputDialog = this.selectComponent('#input-dialog');
+    this.init();
+  },
+
+  onShow() {
+    // 当从其他页面返回，并且 backRefresh 被置为 true 时，刷新数据
+    if (!this.data.backRefresh) return;
+    this.init();
+    this.setData({ backRefresh: false });
+  },
+
+  // 页面刷新，展示下拉刷新
+  onPullDownRefresh_(e) {
+    const { callback } = e.detail;
+    return this.getService().then(() => callback && callback());
+  },
+
+  init() {
+    this.setData({ pageLoading: true });
+    this.getService().then(() => {
+      this.setData({ pageLoading: false });
+    });
+  },
+
+  getService() {
+    const params = { rightsNo: this.rightsNo };
+    return getRightsDetail(params).then((res) => {
+      const serviceRaw = res.data[0];
+      // 滤掉填写运单号、修改运单号按钮，这两个按钮特殊处理，不在底部按钮栏展示
+      if (!serviceRaw.buttonVOs) serviceRaw.buttonVOs = [];
+      const deliveryButton = {};
+      const service = {
+        id: serviceRaw.rights.rightsNo,
+        serviceNo: serviceRaw.rights.rightsNo,
+        storeName: serviceRaw.rights.storeName,
+        type: serviceRaw.rights.rightsType,
+        typeDesc: ServiceTypeDesc[serviceRaw.rights.rightsType],
+        status: serviceRaw.rights.rightsStatus,
+        statusIcon: this.genStatusIcon(serviceRaw.rights),
+        statusName: serviceRaw.rights.userRightsStatusName,
+        statusDesc: serviceRaw.rights.userRightsStatusDesc,
+        amount: serviceRaw.rights.refundRequestAmount,
+        goodsList: (serviceRaw.rightsItem || []).map((item, i) => ({
+          id: i,
+          thumb: item.goodsPictureUrl,
+          title: item.goodsName,
+          specs: (item.specInfo || []).map((s) => s.specValues || ''),
+          itemRefundAmount: item.itemRefundAmount,
+          rightsQuantity: item.rightsQuantity,
+        })),
+        orderNo: serviceRaw.rights.orderNo, // 订单编号
+        rightsNo: serviceRaw.rights.rightsNo, // 售后服务单号
+        rightsReasonDesc: serviceRaw.rights.rightsReasonDesc, // 申请售后原因
+        isRefunded: serviceRaw.rights.userRightsStatus === ServiceStatus.REFUNDED, // 是否已退款
+        refundMethodList: (serviceRaw.refundMethodList || []).map((m) => ({
+          name: m.refundMethodName,
+          amount: m.refundMethodAmount,
+        })), // 退款明细
+        refundRequestAmount: serviceRaw.rights.refundRequestAmount, // 申请退款金额
+        payTraceNo: serviceRaw.rightsRefund.traceNo, // 交易流水号
+        createTime: formatTime(parseFloat(`${serviceRaw.rights.createTime}`), 'YYYY-MM-DD HH:mm'), // 申请时间
+        logisticsNo: serviceRaw.logisticsVO.logisticsNo, // 退货物流单号
+        logisticsCompanyName: serviceRaw.logisticsVO.logisticsCompanyName, // 退货物流公司
+        logisticsCompanyCode: serviceRaw.logisticsVO.logisticsCompanyCode, // 退货物流公司
+        remark: serviceRaw.logisticsVO.remark, // 退货备注
+        receiverName: serviceRaw.logisticsVO.receiverName, // 收货人
+        receiverPhone: serviceRaw.logisticsVO.receiverPhone, // 收货人电话
+        receiverAddress: this.composeAddress(serviceRaw), // 收货人地址
+        applyRemark: serviceRaw.rightsRefund.refundDesc, // 申请退款时的填写的说明
+        buttons: serviceRaw.buttonVOs || [],
+        logistics: serviceRaw.logisticsVO,
+      };
+      const proofs = serviceRaw.rights.rightsImageUrls || [];
+      this.setData({
+        serviceRaw,
+        service,
+        deliveryButton,
+        'gallery.proofs': proofs,
+        showProofs:
+          serviceRaw.rights.userRightsStatus === ServiceStatus.PENDING_VERIFY &&
+          (service.applyRemark || proofs.length > 0),
+      });
+      wx.setNavigationBarTitle({
+        title: TitleConfig[service.type],
+      });
+    });
+  },
+
+  composeAddress(service) {
+    return [
+      service.logisticsVO.receiverProvince,
+      service.logisticsVO.receiverCity,
+      service.logisticsVO.receiverCountry,
+      service.logisticsVO.receiverArea,
+      service.logisticsVO.receiverAddress,
+    ]
+      .filter((item) => !!item)
+      .join(' ');
+  },
+
+  onRefresh() {
+    this.init();
+  },
+
+  editLogistices() {
+    this.setData({
+      inputDialogVisible: true,
+    });
+    this.inputDialog.setData({
+      cancelBtn: '取消',
+      confirmBtn: '确定',
+    });
+    this.inputDialog._onConfirm = () => {
+      Toast({
+        message: '确定填写物流单号',
+      });
+    };
+  },
+
+  onProofTap(e) {
+    if (this.data.gallery.show) {
+      this.setData({
+        'gallery.show': false,
+      });
+      return;
+    }
+    const { index } = e.currentTarget.dataset;
+    this.setData({
+      'gallery.show': true,
+      'gallery.current': index,
+    });
+  },
+
+  onGoodsCardTap(e) {
+    const { index } = e.currentTarget.dataset;
+    const goods = this.data.serviceRaw.rightsItem[index];
+    wx.navigateTo({ url: `/pages/goods/details/index?skuId=${goods.skuId}` });
+  },
+
+  onServiceNoCopy() {
+    wx.setClipboardData({
+      data: this.data.service.serviceNo,
+    });
+  },
+
+  onAddressCopy() {
+    wx.setClipboardData({
+      data: `${this.data.service.receiverName}  ${this.data.service.receiverPhone}\n${this.data.service.receiverAddress}`,
+    });
+  },
+
+  /** 获取状态ICON */
+  genStatusIcon(item) {
+    const { userRightsStatus, afterSaleRequireType } = item;
+    switch (userRightsStatus) {
+      // 退款成功
+      case ServiceStatus.REFUNDED: {
+        return 'succeed';
+      }
+      // 已取消、已关闭
+      case ServiceStatus.CLOSED: {
+        return 'indent_close';
+      }
+      default: {
+        switch (afterSaleRequireType) {
+          case 'REFUND_MONEY': {
+            return 'goods_refund';
+          }
+          case 'REFUND_GOODS_MONEY':
+            return 'goods_return';
+          default: {
+            return 'goods_return';
+          }
+        }
+      }
+    }
+  },
+});

mini-program/pages/order/after-service-detail/index.json

@@ -0,0 +1,21 @@
+{
+  "navigationBarTitleText": "",
+  "usingComponents": {
+    "wr-loading-content": "/components/loading-content/index",
+    "wr-price": "/components/price/index",
+    "wr-service-goods-card": "../components/order-goods-card/index",
+    "t-cell": "tdesign-miniprogram/cell/cell",
+    "t-icon": "tdesign-miniprogram/icon/icon",
+    "t-cell-group": "tdesign-miniprogram/cell-group/cell-group",
+    "t-pull-down-refresh": "tdesign-miniprogram/pull-down-refresh/pull-down-refresh",
+    "t-grid": "tdesign-miniprogram/grid/grid",
+    "t-grid-item": "tdesign-miniprogram/grid-item/grid-item",
+    "t-toast": "tdesign-miniprogram/toast/toast",
+    "t-dialog": "tdesign-miniprogram/dialog/dialog",
+    "t-input": "tdesign-miniprogram/input/input",
+    "t-swiper": "tdesign-miniprogram/swiper/swiper",
+    "t-swiper-nav": "tdesign-miniprogram/swiper-nav/swiper-nav",
+    "wr-after-service-button-bar": "../components/after-service-button-bar/index",
+    "t-image": "/components/webp-image/index"
+  }
+}

mini-program/pages/order/after-service-detail/index.wxml

@@ -0,0 +1,197 @@
+<wr-loading-content position="fixed" type="spinner" wx:if="{{pageLoading}}" />
+<view class="page-container">
+  <t-pull-down-refresh id="t-pull-down-refresh" bind:refresh="onPullDownRefresh_" t-class-indicator="t-class-indicator">
+    <!-- 页面内容 -->
+    <view class="service-detail safe-bottom">
+      <!-- 状态及描述 -->
+      <view class="service-detail__header">
+        <view class="title">
+          <t-icon prefix="wr" name="{{service.statusIcon}}" size="30px" />
+          {{service.statusName}}
+        </view>
+        <view class="desc"> {{service.statusDesc}} </view>
+      </view>
+      <!-- 退款金额 -->
+      <view class="service-section__pay pay-result" wx:if="{{service.isRefunded}}">
+        <t-cell
+          t-class-title="title"
+          t-class-note="right"
+          t-class="t-class-wrapper-first-child"
+          title="{{service.isRefunded ? '退款金额' : '预计退款金额'}}"
+          bordered="{{false}}"
+        >
+          <wr-price slot="note" price="{{service.refundRequestAmount}}" fill />
+        </t-cell>
+        <t-cell
+          wx:for="{{service.refundMethodList}}"
+          wx:key="name"
+          wx:for-index="index"
+          wx:for-item="item"
+          t-class-title="t-cell-title"
+          t-class-note="t-cell-title"
+          t-class="t-class-wrapper"
+          title="{{item.name}}"
+          bordered="{{service.refundMethodList.length - 1 === index ? true : false}}"
+        >
+          <wr-price slot="note" price="{{item.amount}}" fill />
+        </t-cell>
+        <block wx:if="{{service.isRefunded}}">
+          <t-cell
+            title=""
+            t-class="t-class-wrapper-first-child"
+            t-class-description="label"
+            description="说明：微信退款后，可以在微信支付账单查询，实际退款到时间可能受到银行处理时间的影响有一定延时，可以稍后查看"
+          />
+        </block>
+      </view>
+      <!-- 物流 -->
+      <view class="service-section logistics" wx:if="{{service.logisticsNo}}">
+        <view class="service-section__title">
+          <t-cell
+            align="top"
+            title="{{service.logisticsCompanyName + ' ' + service.logisticsNo}}"
+            bordered="{{false}}"
+            description="买家已寄出"
+            arrow
+          >
+            <t-icon prefix="wr" color="#333333" name="deliver" size="40rpx" slot="left-icon" />
+          </t-cell>
+          <view style="padding: 0 32rpx">
+            <wr-after-service-button-bar service="{{service}}" />
+          </view>
+        </view>
+      </view>
+      <!-- 收货地址 -->
+      <view class="service-section goods-refund-address" wx:if="{{service.receiverName}}">
+        <t-cell-group>
+          <t-cell align="top" title="退货地址" bordered="{{false}}">
+            <t-icon prefix="wr" color="#333333" name="location" size="40rpx" slot="left-icon" />
+            <view
+              slot="note"
+              class="right text-btn goods-refund-address-copy-btn"
+              hover-class="text-btn--active"
+              bindtap="onAddressCopy"
+              >复制
+            </view>
+            <view slot="description">
+              <view> {{service.receiverAddress}} </view>
+              <view>收货人：{{service.receiverName}}</view>
+              <view>收货人手机：{{service.receiverName}}</view>
+            </view>
+          </t-cell>
+        </t-cell-group>
+      </view>
+      <!-- 商品卡片 -->
+      <view
+        class="service-section service-goods-card-wrap"
+        wx:if="{{service.goodsList && service.goodsList.length > 0}}"
+      >
+        <wr-service-goods-card
+          wx:for="{{service.goodsList}}"
+          wx:key="id"
+          wx:for-item="goods"
+          goods="{{goods}}"
+          no-top-line
+          bindtap="onGoodsCardTap"
+          data-index="{{index}}"
+        >
+          <view slot="footer" class="order-goods-card-footer">
+            <wr-price
+              price="{{goods.itemRefundAmount}}"
+              fill
+              wr-class="order-goods-card-footer-price-class"
+              symbol-class="order-goods-card-footer-price-symbol"
+              decimal-class="order-goods-card-footer-price-decimal"
+            />
+            <view class="order-goods-card-footer-num">x {{goods.rightsQuantity}}</view>
+          </view>
+        </wr-service-goods-card>
+      </view>
+      <!-- 退款信息 -->
+      <view class="service-section__pay">
+        <t-cell bordered="{{false}}" title="退款信息" t-class="t-refund-wrapper" t-class-title="t-refund-title" />
+        <t-cell
+          bordered="{{false}}"
+          t-class="t-refund-wrapper"
+          t-class-title="t-refund-info"
+          t-class-note="t-refund-note"
+          title="订单编号"
+          note="{{service.orderNo}}"
+        />
+        <t-cell
+          bordered="{{false}}"
+          t-class="t-refund-wrapper"
+          t-class-title="t-refund-info"
+          t-class-note="t-refund-note"
+          title="服务单号"
+          note="{{service.rightsNo}}"
+        >
+          <view slot="right-icon" class="text-btn" hover-class="text-btn--active" bindtap="onServiceNoCopy">复制 </view>
+        </t-cell>
+        <t-cell
+          bordered="{{false}}"
+          t-class="t-refund-wrapper"
+          t-class-title="t-refund-info"
+          t-class-note="t-refund-note"
+          title="退款原因"
+          note="{{service.rightsReasonDesc}}"
+        />
+        <t-cell
+          bordered="{{false}}"
+          t-class="t-refund-wrapper"
+          t-class-title="t-refund-info"
+          t-class-note="t-refund-note"
+          title="退款金额"
+        >
+          <wr-price slot="note" price="{{service.refundRequestAmount}}" fill />
+        </t-cell>
+        <t-cell
+          bordered="{{false}}"
+          t-class="t-refund-wrapper"
+          t-class-title="t-refund-info"
+          t-class-note="t-refund-note"
+          title="申请时间"
+          note="{{service.createTime}}"
+        />
+      </view>
+      <!-- 凭证/说明 -->
+      <view class="service-section__pay" wx:if="{{showProofs}}">
+        <t-cell
+          bordered="{{false}}"
+          title="凭证/说明"
+          t-class="t-refund-wrapper"
+          t-class-title="t-refund-info"
+          description="{{service.applyRemark}}"
+        />
+        <t-grid border="{{false}}" column="{{3}}">
+          <t-grid-item
+            t-class-image="t-refund-grid-image"
+            wx:for="{{gallery.proofs}}"
+            wx:key="index"
+            image="{{item}}"
+            bindclick="onProofTap"
+            data-index="{{index}}"
+          />
+        </t-grid>
+      </view>
+      <t-swiper
+        wx:if="{{gallery.show}}"
+        current="{{gallery.current}}"
+        img-srcs="{{gallery.proofs}}"
+        full-screen
+        circular="{{false}}"
+        bindtap="onProofTap"
+      />
+    </view>
+  </t-pull-down-refresh>
+</view>
+<t-toast id="t-toast" />
+<!-- 退款说明填写 -->
+<t-dialog id="input-dialog" visible="{{inputDialogVisible}}">
+  <view class="input-dialog__content" slot="content">
+    <view style="color: #333333; padding-left: 32rpx">物流单号</view>
+    <t-input class="input" placeholder="请输入物流单号" />
+    <view class="tips">{{amountTip}}</view>
+  </view>
+</t-dialog>
+<t-dialog id="t-dialog" />

mini-program/pages/order/after-service-detail/index.wxss

@@ -0,0 +1,435 @@
+:host {
+  background-color: #f5f5f5;
+}
+
+.service-detail {
+  position: relative;
+}
+
+.service-detail wr-service-goods-card .wr-goods-card__body {
+  margin-left: 50rpx;
+}
+
+.order-goods-card-footer {
+  display: flex;
+  width: calc(100% - 190rpx);
+  justify-content: space-between;
+  position: absolute;
+  bottom: 20rpx;
+  left: 190rpx;
+}
+
+.order-goods-card-footer-num {
+  color: #999;
+  line-height: 40rpx;
+}
+
+.service-detail .order-goods-card-footer .order-goods-card-footer-price-class {
+  font-size: 36rpx;
+  color: #333;
+  font-family: DIN Alternate;
+}
+
+.service-detail .order-goods-card-footer .order-goods-card-footer-price-decimal {
+  font-size: 28rpx;
+  color: #333;
+  font-family: DIN Alternate;
+}
+
+.service-detail .order-goods-card-footer .order-goods-card-footer-price-symbol {
+  color: #333;
+  font-size: 24rpx;
+  font-family: DIN Alternate;
+}
+
+.service-detail .service-detail__header {
+  padding: 60rpx 0 48rpx 40rpx;
+  box-sizing: border-box;
+  height: 220rpx;
+  background-color: #fff;
+}
+.service-detail .service-detail__header .title,
+.service-detail .service-detail__header .desc {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+
+.service-detail .service-detail__header .title {
+  -webkit-line-clamp: 1;
+  font-size: 48rpx;
+  font-weight: bold;
+  color: #333;
+  display: flex;
+}
+
+.service-detail .service-detail__header .desc {
+  -webkit-line-clamp: 2;
+  margin-top: 10rpx;
+  font-size: 28rpx;
+  color: #999;
+}
+
+.service-detail .service-detail__header .desc .count-down {
+  color: #fff185;
+  display: inline;
+}
+
+.service-detail .service-section {
+  margin: 20rpx 0 20rpx 0;
+  /* padding: 30rpx 32rpx; */
+  width: auto;
+  border-radius: 8rpx;
+  background-color: white;
+  overflow: hidden;
+}
+.service-section__pay {
+  margin: 0 0 20rpx 0;
+  width: auto;
+  border-radius: 8rpx;
+  background-color: white;
+  overflow: hidden;
+}
+.service-detail .service-section__title {
+  color: #333333;
+  margin-bottom: 10rpx;
+  padding-bottom: 18rpx;
+  height: 224rpx;
+  position: relative;
+}
+.service-detail .service-section__title .icon {
+  margin-right: 16rpx;
+  font-size: 40rpx !important;
+}
+.service-detail .service-section__title .right {
+  flex: none;
+  font-weight: normal;
+  font-size: 26rpx;
+}
+.service-detail .section-content {
+  margin: 16rpx 0 0 52rpx;
+}
+
+.service-detail .main {
+  font-size: 28rpx;
+  color: #222427;
+  font-weight: bold;
+}
+
+.service-detail .main .phone-num {
+  margin-left: 16rpx;
+  display: inline;
+}
+.service-detail .label {
+  color: #999999;
+  font-size: 26rpx;
+}
+
+.service-detail .custom-remark {
+  font-size: 26rpx;
+  line-height: 36rpx;
+  color: #333333;
+  word-wrap: break-word;
+}
+.service-detail .proofs {
+  margin-top: 20rpx;
+}
+
+.service-detail .proofs .proof {
+  width: 100%;
+  height: 100%;
+  background-color: #f9f9f9;
+}
+
+.service-detail .pay-result .t-cell-title,
+.service-detail .pay-result .t-cell-value {
+  color: #666666;
+  font-size: 28rpx;
+}
+
+.t-class-wrapper {
+  padding: 10rpx 24rpx !important;
+}
+
+.t-class-wrapper-first-child {
+  padding: 24rpx !important;
+}
+
+.service-detail .pay-result .wr-cell__value {
+  font-weight: bold;
+}
+.service-detail .right {
+  font-size: 36rpx;
+  color: #fa550f;
+  font-weight: bold;
+}
+
+.service-detail .title {
+  font-weight: bold;
+}
+
+.service-detail .pay-result .service-section__title .right.integer {
+  font-size: 48rpx;
+}
+.service-detail .pay-result .split-line {
+  position: relative;
+}
+
+.service-detail .pay-result .split-line::after {
+  position: absolute;
+  display: block;
+  content: ' ';
+  height: 1px;
+  left: -50%;
+  right: -50%;
+  transform: scale(0.5);
+  background-color: #e6e6e6;
+}
+
+.service-detail .pay-result .section-content {
+  margin-left: 0;
+}
+
+.service-detail .pay-result .section-content .label {
+  color: #999999;
+  font-size: 24rpx;
+}
+
+.service-detail .pay-result .wr-cell::after {
+  left: 0;
+}
+
+.service-detail .footer-bar-wrapper {
+  height: 100rpx;
+}
+
+.service-detail .footer-bar-wrapper .footer-bar {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  height: 100rpx;
+  width: 100vw;
+  box-sizing: border-box;
+  padding: 0 20rpx;
+  background-color: white;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.service-detail .text-btn {
+  display: inline;
+  box-sizing: border-box;
+  color: #333;
+  border: 2rpx solid #ddd;
+  border-radius: 32rpx;
+  margin-left: 10rpx;
+  padding: 0 16rpx;
+  font-weight: normal;
+  font-size: 24rpx;
+  line-height: 32rpx;
+}
+.service-detail .text-btn--active {
+  opacity: 0.5;
+}
+
+.service-detail .specs-popup .bottom-btn {
+  color: #fa550f;
+}
+.service-detail .specs-popup .bottom-btn::after {
+  color: #fa550f;
+}
+
+.dialog .dialog__button-confirm {
+  color: #fa550f;
+}
+
+.page-container .order-goods-card > wr-goods-card .wr-goods-card__bottom .price {
+  top: 100rpx;
+  left: 10rpx;
+  position: absolute;
+  color: #333;
+}
+
+.page-container .order-goods-card > wr-goods-card .wr-goods-card__num {
+  top: 100rpx;
+  right: 0;
+  position: absolute;
+}
+
+.page-container .order-goods-card > wr-goods-card .wr-goods-card__bottom .price::before {
+  display: inline;
+  content: '退款金额:';
+  margin-right: 1em;
+  font-size: 24rpx;
+  color: #333333;
+  font-weight: normal;
+}
+
+.page-container .wr-goods-card__specs {
+  margin: 14rpx 20rpx 0 0;
+}
+
+.page-container .order-goods-card > wr-goods-card .wr-goods-card__title {
+  margin-right: 0;
+  -webkit-line-clamp: 1;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  width: 80%;
+}
+
+.page-container .order-card .header .store-name {
+  -webkit-line-clamp: 1;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  width: 80%;
+}
+
+.page-container .status-desc {
+  box-sizing: border-box;
+  padding: 22rpx 20rpx;
+  font-size: 26rpx;
+  line-height: 1.3;
+  text-align: left;
+  color: #333333;
+  background-color: #f5f5f5;
+  border-radius: 8rpx;
+  word-wrap: break-word;
+  margin-top: 40rpx;
+  margin-bottom: 20rpx;
+}
+
+.page-container .header__right {
+  font-size: 24rpx;
+  color: #333333;
+  display: flex;
+  align-items: center;
+}
+
+.page-container .header__right__icon {
+  color: #d05b27;
+  font-size: 16px !important;
+  margin-right: 10rpx;
+}
+
+.page-container .wr-goods-card__thumb {
+  width: 140rpx;
+}
+.page-container .page-background {
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  color: #fff;
+  overflow: hidden;
+}
+.page-container .page-background-img {
+  width: 100%;
+  height: 320rpx !important;
+}
+.page-container .navbar-bg .nav-back,
+.page-container .navbar-bg .page-background {
+  background: linear-gradient(to right, rgba(250, 85, 15, 1) 0%, rgba(250, 85, 15, 0.6) 100%) !important;
+}
+
+.page-container .navigation-bar__btn {
+  font-size: 40rpx !important;
+  font-weight: bold !important;
+  color: #333;
+}
+
+.t-class-title {
+  color: #000;
+}
+
+.refresh-bar {
+  background: linear-gradient(90deg, #ff6b44 0%, #ed3427 100%) !important;
+}
+
+.page-container .navigation-bar__inner .navigation-bar__left {
+  padding-left: 16rpx;
+}
+
+.t-refund-info {
+  font-size: 26rpx;
+  color: #666;
+}
+
+.t-refund-grid-image {
+  width: 212rpx !important;
+  height: 212rpx !important;
+}
+
+.t-refund-info-img {
+  width: 100%;
+  height: 100%;
+}
+
+.t-refund-wrapper {
+  padding-top: 18rpx !important;
+  padding-bottom: 18rpx !important;
+}
+
+.t-refund-title {
+  font-size: 28rpx;
+  color: #333;
+  font-weight: bold;
+}
+
+.t-refund-note {
+  font-size: 26rpx;
+  color: #333 !important;
+}
+
+.service-detail .logistics {
+  padding-top: 0;
+  padding-bottom: 0;
+  padding-right: 0;
+}
+
+.service-section__title__header {
+  display: flex;
+  align-items: center;
+  color: #333;
+  font-weight: normal;
+  font-size: 32rpx;
+}
+
+.safe-bottom {
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.service-section-logistics {
+  display: flex;
+  justify-content: center;
+  color: #fa4126;
+  align-items: center;
+  margin-top: 24rpx;
+}
+
+.t-class-indicator {
+  color: #b9b9b9 !important;
+}
+
+.service-detail .goods-refund-address {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.service-detail .goods-refund-address .goods-refund-address-copy-btn {
+  position: absolute;
+  top: 22rpx;
+  right: 32rpx;
+}
+
+.service-detail .service-goods-card-wrap {
+  padding: 0 32rpx;
+}
+
+.t-button {
+  --td-button-default-color: #000;
+  --td-button-primary-text-color: #fa4126;
+}

mini-program/pages/order/after-service-list/index.js

@@ -0,0 +1,220 @@
+import { getRightsList } from './api';
+import { AfterServiceStatus, ServiceType, ServiceTypeDesc } from '../config';
+
+Page({
+  page: {
+    size: 10,
+    num: 1,
+  },
+
+  data: {
+    tabs: [
+      {
+        key: -1,
+        text: '全部',
+      },
+      {
+        key: AfterServiceStatus.TO_AUDIT,
+        text: '待审核',
+      },
+      {
+        key: AfterServiceStatus.THE_APPROVED,
+        text: '已审核',
+      },
+      {
+        key: AfterServiceStatus.COMPLETE,
+        text: '已完成',
+      },
+      {
+        key: AfterServiceStatus.CLOSED,
+        text: '已关闭',
+      },
+    ],
+    curTab: -1,
+    dataList: [],
+    listLoading: 0, // 0-未加载，1-加载中，2-已全部加载
+    pullDownRefreshing: false, // 下拉刷新时不显示load-more
+    emptyImg:
+      'https://cdn-we-retail.ym.tencent.com/miniapp/order/empty-order-list.png',
+    backRefresh: false,
+  },
+
+  onLoad(query) {
+    let status = parseInt(query.status);
+    status = this.data.tabs.map((t) => t.key).includes(status) ? status : -1;
+    this.init(status);
+    this.pullDownRefresh = this.selectComponent('#wr-pull-down-refresh');
+  },
+
+  onShow() {
+    // 当从其他页面返回，并且 backRefresh 被置为 true 时，刷新数据
+    if (!this.data.backRefresh) return;
+    this.onRefresh();
+    this.setData({
+      backRefresh: false,
+    });
+  },
+
+  onReachBottom() {
+    if (this.data.listLoading === 0) {
+      this.getAfterServiceList(this.data.curTab);
+    }
+  },
+
+  onPageScroll(e) {
+    this.pullDownRefresh && this.pullDownRefresh.onPageScroll(e);
+  },
+
+  onPullDownRefresh_(e) {
+    const { callback } = e.detail;
+    this.setData({
+      pullDownRefreshing: true,
+    }); // 下拉刷新时不显示load-more
+    this.refreshList(this.data.curTab)
+      .then(() => {
+        this.setData({
+          pullDownRefreshing: false,
+        });
+        callback && callback();
+      })
+      .catch((err) => {
+        this.setData({
+          pullDownRefreshing: false,
+        });
+        Promise.reject(err);
+      });
+  },
+
+  init(status) {
+    status = status !== undefined ? status : this.data.curTab;
+    this.refreshList(status);
+  },
+
+  getAfterServiceList(statusCode = -1, reset = false) {
+    const params = {
+      parameter: {
+        pageSize: this.page.size,
+        pageNum: this.page.num,
+      },
+    };
+    if (statusCode !== -1) params.parameter.afterServiceStatus = statusCode;
+    this.setData({
+      listLoading: 1,
+    });
+    return getRightsList(params)
+      .then((res) => {
+        this.page.num++;
+        let dataList = [];
+        let { tabs } = this.data;
+        if (res && res.data && res.data.states) {
+          tabs = this.data.tabs.map((item) => {
+            switch (item.key) {
+              case AfterServiceStatus.TO_AUDIT:
+                item.info = res.data.states.audit;
+                break;
+              case AfterServiceStatus.THE_APPROVED:
+                item.info = res.data.states.approved;
+                break;
+              case AfterServiceStatus.COMPLETE:
+                item.info = res.data.states.complete;
+                break;
+              case AfterServiceStatus.CLOSED:
+                item.info = res.data.states.closed;
+                break;
+            }
+            return item;
+          });
+        }
+        if (res && res.data && res.data.dataList) {
+          dataList = (res.data.dataList || []).map((_data) => {
+            return {
+              id: _data.rights.rightsNo,
+              serviceNo: _data.rights.rightsNo,
+              storeName: _data.rights.storeName,
+              type: _data.rights.rightsType,
+              typeDesc: ServiceTypeDesc[_data.rights.rightsType],
+              typeDescIcon:
+                _data.rightsType === ServiceType.ONLY_REFUND
+                  ? 'money-circle'
+                  : 'return-goods-1',
+              status: _data.rights.rightsStatus,
+              statusName: _data.rights.userRightsStatusName,
+              statusDesc: _data.rights.userRightsStatusDesc,
+              amount: _data.rights.refundAmount,
+              goodsList: _data.rightsItem.map((item, i) => ({
+                id: i,
+                thumb: item.goodsPictureUrl,
+                title: item.goodsName,
+                specs: (item.specInfo || []).map((s) => s.specValues || ''),
+                itemRefundAmount: item.itemRefundAmount,
+                rightsQuantity: item.itemRefundAmount,
+              })),
+              storeId: _data.storeId,
+              buttons: _data.buttonVOs || [],
+              logisticsNo: _data.logisticsVO.logisticsNo, // 退货物流单号
+              logisticsCompanyName: _data.logisticsVO.logisticsCompanyName, // 退货物流公司
+              logisticsCompanyCode: _data.logisticsVO.logisticsCompanyCode, // 退货物流公司
+              remark: _data.logisticsVO.remark, // 退货备注
+              logisticsVO: _data.logisticsVO,
+            };
+          });
+        }
+        return new Promise((resolve) => {
+          if (reset) {
+            this.setData(
+              {
+                dataList: [],
+              },
+              () => resolve(),
+            );
+          } else resolve();
+        }).then(() => {
+          this.setData({
+            tabs,
+            dataList: this.data.dataList.concat(dataList),
+            listLoading: dataList.length > 0 ? 0 : 2,
+          });
+        });
+      })
+      .catch((err) => {
+        this.setData({
+          listLoading: 3,
+        });
+        return Promise.reject(err);
+      });
+  },
+
+  onReTryLoad() {
+    this.getAfterServiceList(this.data.curTab);
+  },
+
+  onTabChange(e) {
+    const { value } = e.detail;
+    const tab = this.data.tabs.find((v) => v.key === value);
+    if (!tab) return;
+    this.refreshList(value);
+  },
+
+  refreshList(status = -1) {
+    this.page = {
+      size: 10,
+      num: 1,
+    };
+    this.setData({
+      curTab: status,
+      dataList: [],
+    });
+    return this.getAfterServiceList(status, true);
+  },
+
+  onRefresh() {
+    this.refreshList(this.data.curTab);
+  },
+
+  // 点击订单卡片
+  onAfterServiceCardTap(e) {
+    wx.navigateTo({
+      url: `/pages/order/after-service-detail/index?rightsNo=${e.currentTarget.dataset.order.id}`,
+    });
+  },
+});

mini-program/pages/order/after-service-list/index.json

@@ -0,0 +1,15 @@
+{
+  "navigationBarTitleText": "退款/售后",
+  "usingComponents": {
+    "wr-load-more": "/components/load-more/index",
+    "wr-after-service-button-bar": "../components/after-service-button-bar/index",
+    "wr-price": "/components/price/index",
+    "wr-order-card": "../components/order-card/index",
+    "wr-goods-card": "../components/goods-card/index",
+    "t-icon": "tdesign-miniprogram/icon/icon",
+    "t-toast": "tdesign-miniprogram/toast/toast",
+    "t-dialog": "tdesign-miniprogram/dialog/dialog",
+    "t-empty": "tdesign-miniprogram/empty/empty",
+    "t-pull-down-refresh": "tdesign-miniprogram/pull-down-refresh/pull-down-refresh"
+  }
+}

mini-program/pages/order/after-service-list/index.wxml

@@ -0,0 +1,61 @@
+<view class="page-container">
+  <t-pull-down-refresh id="t-pull-down-refresh" bindrefresh="onPullDownRefresh_" t-class-indicator="t-class-indicator">
+    <wr-order-card
+      wx:for="{{dataList}}"
+      wx:key="id"
+      wx:for-item="order"
+      wx:for-index="oIndex"
+      order="{{order}}"
+      data-order="{{order}}"
+      bindcardtap="onAfterServiceCardTap"
+      useTopRightSlot
+      header-class="header-class"
+    >
+      <view class="text-btn" slot="top-right">
+        <view class="header__right">
+          <t-icon prefix="wr" color="#FA4126" name="goods_refund" size="20px" slot="left-icon" />
+          {{order.typeDesc}}
+        </view>
+      </view>
+      <wr-goods-card
+        wx:for="{{order.goodsList}}"
+        wx:key="id"
+        wx:for-item="goods"
+        wx:for-index="gIndex"
+        data="{{goods}}"
+        no-top-line="{{gIndex === 0}}"
+      >
+        <view slot="footer" class="order-goods-card-footer">
+          <wr-price
+            price="{{goods.itemRefundAmount}}"
+            fill
+            wr-class="order-goods-card-footer-price-class"
+            symbol-class="order-goods-card-footer-price-symbol"
+            decimal-class="order-goods-card-footer-price-decimal"
+          />
+          <view class="order-goods-card-footer-num">x {{goods.rightsQuantity}}</view>
+        </view>
+      </wr-goods-card>
+      <view slot="more">
+        <view class="status-desc">{{order.statusDesc}}</view>
+        <wr-after-service-button-bar service="{{order}}" bindrefresh="onRefresh" />
+      </view>
+    </wr-order-card>
+    <!-- 列表加载中/已全部加载 -->
+    <wr-load-more
+      wx:if="{{!pullDownRefreshing}}"
+      list-is-empty="{{!dataList.length}}"
+      status="{{listLoading}}"
+      bindretry="onReTryLoad"
+    >
+      <!-- 空态 -->
+      <view slot="empty" class="empty-wrapper">
+        <t-empty size="240rpx" textColor="#999999" textSize="28rpx" src="{{emptyImg}}">
+          暂无退款或售后申请记录
+        </t-empty>
+      </view>
+    </wr-load-more>
+  </t-pull-down-refresh>
+</view>
+<t-toast id="t-toast" />
+<t-dialog id="t-dialog" />

mini-program/pages/order/after-service-list/index.wxss

@@ -0,0 +1,104 @@
+:host {
+  background-color: #f5f5f5;
+}
+
+.list-loading {
+  height: 100rpx;
+}
+
+.empty-wrapper {
+  height: calc(100vh - 88rpx);
+}
+
+.page-container .order-goods-card-footer {
+  display: flex;
+  width: calc(100% - 190rpx);
+  justify-content: space-between;
+  position: absolute;
+  bottom: 20rpx;
+  left: 190rpx;
+}
+
+.page-container .order-goods-card-footer .order-goods-card-footer-num {
+  color: #999;
+  line-height: 40rpx;
+}
+
+.page-container .order-goods-card-footer .order-goods-card-footer-price-class {
+  font-size: 36rpx;
+  color: #333;
+  font-family: DIN Alternate;
+}
+
+.page-container .order-goods-card-footer .order-goods-card-footer-price-decimal {
+  font-size: 28rpx;
+  color: #333;
+  font-family: DIN Alternate;
+}
+
+.page-container .order-goods-card-footer .order-goods-card-footer-price-symbol {
+  color: #333;
+  font-size: 24rpx;
+  font-family: DIN Alternate;
+}
+
+.page-container .wr-goods-card__specs {
+  margin: 14rpx 20rpx 0 0;
+}
+
+.page-container .order-goods-card > wr-goods-card .wr-goods-card__title {
+  margin-right: 0;
+  -webkit-line-clamp: 1;
+}
+
+.page-container .order-card .header .store-name {
+  width: 80%;
+  -webkit-line-clamp: 1;
+}
+
+.page-container .order-card .header .store-name > view {
+  overflow: hidden;
+  width: 100%;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.page-container .status-desc {
+  box-sizing: border-box;
+  padding: 22rpx 20rpx;
+  font-size: 26rpx;
+  line-height: 1.3;
+  text-align: left;
+  color: #333333;
+  background-color: #f5f5f5;
+  border-radius: 8rpx;
+  word-wrap: break-word;
+  margin-top: 24rpx;
+  margin-bottom: 20rpx;
+}
+
+.page-container .header__right {
+  font-size: 24rpx;
+  color: #fa4126;
+  display: flex;
+  align-items: center;
+}
+
+.page-container .header__right__icon {
+  color: #d05b27;
+  font-size: 16px !important;
+  margin-right: 10rpx;
+}
+
+.t-class-indicator {
+  color: #b9b9b9 !important;
+}
+
+.page-container .header-class {
+  margin-bottom: 5rpx !important;
+}
+
+.t-button {
+  --td-button-default-color: #000;
+  --td-button-primary-text-color: #fa4126;
+}

mini-program/pages/order/apply-service/index.js

@@ -0,0 +1,441 @@
+import Dialog from 'tdesign-miniprogram/dialog/index';
+import Toast from 'tdesign-miniprogram/toast/index';
+import { priceFormat } from '../../../utils/util';
+import { OrderStatus, ServiceType, ServiceReceiptStatus } from '../config';
+import reasonSheet from '../components/reason-sheet/reasonSheet';
+import {
+  fetchRightsPreview,
+  dispatchConfirmReceived,
+  fetchApplyReasonList,
+  dispatchApplyService,
+} from '../../../services/order/applyService';
+
+Page({
+  query: {},
+  data: {
+    uploading: false, // 凭证上传状态
+    canApplyReturn: true, // 是否可退货
+    goodsInfo: {},
+    receiptStatusList: [
+      { desc: '未收到货', status: ServiceReceiptStatus.NOT_RECEIPTED },
+      { desc: '已收到货', status: ServiceReceiptStatus.RECEIPTED },
+    ],
+    applyReasons: [],
+    serviceType: null, // 20-仅退款，10-退货退款
+    serviceFrom: {
+      returnNum: 1,
+      receiptStatus: { desc: '请选择', status: null },
+      applyReason: { desc: '请选择', type: null },
+      // max-填写上限(单位分)，current-当前值(单位分)，temp输入框中的值(单位元)
+      amount: { max: 0, current: 0, temp: 0, focus: false },
+      remark: '',
+      rightsImageUrls: [],
+    },
+    maxApplyNum: 2, // 最大可申请售后的商品数
+    amountTip: '',
+    showReceiptStatusDialog: false,
+    validateRes: {
+      valid: false,
+      msg: '',
+    },
+    submitting: false,
+    inputDialogVisible: false,
+    uploadGridConfig: {
+      column: 3,
+      width: 212,
+      height: 212,
+    },
+    serviceRequireType: '',
+  },
+
+  setWatcher(key, callback) {
+    let lastData = this.data;
+    const keys = key.split('.');
+    keys.slice(0, -1).forEach((k) => {
+      lastData = lastData[k];
+    });
+    const lastKey = keys[keys.length - 1];
+    this.observe(lastData, lastKey, callback);
+  },
+
+  observe(data, k, callback) {
+    let val = data[k];
+    Object.defineProperty(data, k, {
+      configurable: true,
+      enumerable: true,
+      set: (value) => {
+        val = value;
+        callback();
+      },
+      get: () => {
+        return val;
+      },
+    });
+  },
+
+  validate() {
+    let valid = true;
+    let msg = '';
+    // 检查必填项
+    if (!this.data.serviceFrom.applyReason.type) {
+      valid = false;
+      msg = '请填写退款原因';
+    } else if (!this.data.serviceFrom.amount.current) {
+      valid = false;
+      msg = '请填写退款金额';
+    }
+    if (this.data.serviceFrom.amount.current <= 0) {
+      valid = false;
+      msg = '退款金额必须大于0';
+    }
+    this.setData({ validateRes: { valid, msg } });
+  },
+
+  onLoad(query) {
+    this.query = query;
+    if (!this.checkQuery()) return;
+    this.setData({
+      canApplyReturn: query.canApplyReturn === 'true',
+    });
+    this.init();
+    this.inputDialog = this.selectComponent('#input-dialog');
+    this.setWatcher('serviceFrom.returnNum', this.validate.bind(this));
+    this.setWatcher('serviceFrom.applyReason', this.validate.bind(this));
+    this.setWatcher('serviceFrom.amount', this.validate.bind(this));
+    this.setWatcher('serviceFrom.rightsImageUrls', this.validate.bind(this));
+  },
+
+  async init() {
+    try {
+      await this.refresh();
+    } catch (e) {}
+  },
+
+  checkQuery() {
+    const { orderNo, skuId } = this.query;
+    if (!orderNo) {
+      Dialog.alert({
+        content: '请先选择订单',
+      }).then(() => {
+        wx.redirectTo({ url: 'pages/order/order-list/index' });
+      });
+      return false;
+    }
+    if (!skuId) {
+      Dialog.alert({
+        content: '请先选择商品',
+      }).then(() => {
+        wx.redirectTo(`pages/order/order-detail/index?orderNo=${orderNo}`);
+      });
+      return false;
+    }
+    return true;
+  },
+
+  async refresh() {
+    wx.showLoading({ title: 'loading' });
+    try {
+      const res = await this.getRightsPreview();
+      wx.hideLoading();
+      const goodsInfo = {
+        id: res.data.skuId,
+        thumb: res.data.goodsInfo && res.data.goodsInfo.skuImage,
+        title: res.data.goodsInfo && res.data.goodsInfo.goodsName,
+        spuId: res.data.spuId,
+        skuId: res.data.skuId,
+        specs: ((res.data.goodsInfo && res.data.goodsInfo.specInfo) || []).map((s) => s.specValue),
+        paidAmountEach: res.data.paidAmountEach,
+        boughtQuantity: res.data.boughtQuantity,
+      };
+      this.setData({
+        goodsInfo,
+        'serviceFrom.amount': {
+          max: res.data.refundableAmount,
+          current: res.data.refundableAmount,
+        },
+        'serviceFrom.returnNum': res.data.numOfSku,
+        amountTip: `最多可申请退款¥ ${priceFormat(res.data.refundableAmount, 2)}，含发货运费¥ ${priceFormat(
+          res.data.shippingFeeIncluded,
+          2,
+        )}`,
+        maxApplyNum: res.data.numOfSkuAvailable,
+      });
+    } catch (err) {
+      wx.hideLoading();
+      throw err;
+    }
+  },
+
+  async getRightsPreview() {
+    const { orderNo, skuId, spuId } = this.query;
+    const params = {
+      orderNo,
+      skuId,
+      spuId,
+      numOfSku: this.data.serviceFrom.returnNum,
+    };
+    const res = await fetchRightsPreview(params);
+    return res;
+  },
+
+  onApplyOnlyRefund() {
+    wx.setNavigationBarTitle({ title: '申请退款' });
+    this.setData({ serviceRequireType: 'REFUND_MONEY' });
+    this.switchReceiptStatus(0);
+  },
+
+  onApplyReturnGoods() {
+    wx.setNavigationBarTitle({ title: '申请退货退款' });
+    this.setData({ serviceRequireType: 'REFUND_GOODS' });
+    const orderStatus = parseInt(this.query.orderStatus);
+    Promise.resolve()
+      .then(() => {
+        if (orderStatus === OrderStatus.PENDING_RECEIPT) {
+          return Dialog.confirm({
+            title: '订单商品是否已经收到货',
+            content: '',
+            confirmBtn: '确认收货，并申请退货',
+            cancelBtn: '未收到货',
+          }).then(() => {
+            return dispatchConfirmReceived({
+              parameter: {
+                logisticsNo: this.query.logisticsNo,
+                orderNo: this.query.orderNo,
+              },
+            });
+          });
+        }
+        return;
+      })
+      .then(() => {
+        this.setData({ serviceType: ServiceType.RETURN_GOODS });
+        this.switchReceiptStatus(1);
+      });
+  },
+
+  onApplyReturnGoodsStatus() {
+    reasonSheet({
+      show: true,
+      title: '选择退款原因',
+      options: this.data.applyReasons.map((r) => ({
+        title: r.desc,
+      })),
+      showConfirmButton: true,
+      showCancelButton: true,
+      emptyTip: '请选择退款原因',
+    }).then((indexes) => {
+      this.setData({
+        'serviceFrom.applyReason': this.data.applyReasons[indexes[0]],
+      });
+    });
+  },
+
+  onChangeReturnNum(e) {
+    const { value } = e.detail;
+    this.setData({
+      'serviceFrom.returnNum': value,
+    });
+  },
+
+  onApplyGoodsStatus() {
+    reasonSheet({
+      show: true,
+      title: '请选择收货状态',
+      options: this.data.receiptStatusList.map((r) => ({
+        title: r.desc,
+      })),
+      showConfirmButton: true,
+      emptyTip: '请选择收货状态',
+    }).then((indexes) => {
+      this.setData({
+        'serviceFrom.receiptStatus': this.data.receiptStatusList[indexes[0]],
+      });
+    });
+  },
+
+  switchReceiptStatus(index) {
+    const statusItem = this.data.receiptStatusList[index];
+    // 没有找到对应的状态，则清空/初始化
+    if (!statusItem) {
+      this.setData({
+        showReceiptStatusDialog: false,
+        'serviceFrom.receiptStatus': { desc: '请选择', status: null },
+        'serviceFrom.applyReason': { desc: '请选择', type: null }, // 收货状态改变时，初始化申请原因
+        applyReasons: [],
+      });
+      return;
+    }
+    // 仅选中项与当前项不一致时，才切换申请原因列表applyReasons
+    if (!statusItem || statusItem.status === this.data.serviceFrom.receiptStatus.status) {
+      this.setData({ showReceiptStatusDialog: false });
+      return;
+    }
+    this.getApplyReasons(statusItem.status).then((reasons) => {
+      this.setData({
+        showReceiptStatusDialog: false,
+        'serviceFrom.receiptStatus': statusItem,
+        'serviceFrom.applyReason': { desc: '请选择', type: null }, // 收货状态改变时，重置申请原因
+        applyReasons: reasons,
+      });
+    });
+  },
+
+  getApplyReasons(receiptStatus) {
+    const params = { rightsReasonType: receiptStatus };
+    return fetchApplyReasonList(params)
+      .then((res) => {
+        return res.data.rightsReasonList.map((reason) => ({
+          type: reason.id,
+          desc: reason.desc,
+        }));
+      })
+      .catch(() => {
+        return [];
+      });
+  },
+
+  onReceiptStatusDialogConfirm(e) {
+    const { index } = e.currentTarget.dataset;
+    this.switchReceiptStatus(index);
+  },
+
+  onAmountTap() {
+    this.setData({
+      'serviceFrom.amount.temp': priceFormat(this.data.serviceFrom.amount.current),
+      'serviceFrom.amount.focus': true,
+      inputDialogVisible: true,
+    });
+    this.inputDialog.setData({
+      cancelBtn: '取消',
+      confirmBtn: '确定',
+    });
+    this.inputDialog._onConfirm = () => {
+      this.setData({
+        'serviceFrom.amount.current': this.data.serviceFrom.amount.temp * 100,
+      });
+    };
+    this.inputDialog._onCancel = () => {};
+  },
+
+  // 对输入的值进行过滤
+  onAmountInput(e) {
+    let { value } = e.detail;
+    const regRes = value.match(/\d+(\.?\d*)?/); // 输入中，允许末尾为小数点
+    value = regRes ? regRes[0] : '';
+    this.setData({ 'serviceFrom.amount.temp': value });
+  },
+
+  // 失去焦点时，更严格的过滤并转化为float
+  onAmountBlur(e) {
+    let { value } = e.detail;
+    const regRes = value.match(/\d+(\.?\d+)?/); // 失去焦点时，不允许末尾为小数点
+    value = regRes ? regRes[0] : '0';
+    value = parseFloat(value) * 100;
+    if (value > this.data.serviceFrom.amount.max) {
+      value = this.data.serviceFrom.amount.max;
+    }
+    this.setData({
+      'serviceFrom.amount.temp': priceFormat(value),
+      'serviceFrom.amount.focus': false,
+    });
+  },
+
+  onAmountFocus() {
+    this.setData({ 'serviceFrom.amount.focus': true });
+  },
+
+  onRemarkChange(e) {
+    const { value } = e.detail;
+    this.setData({
+      'serviceFrom.remark': value,
+    });
+  },
+
+  // 发起申请售后请求
+  onSubmit() {
+    this.submitCheck().then(() => {
+      const params = {
+        rights: {
+          orderNo: this.query.orderNo,
+          refundRequestAmount: this.data.serviceFrom.amount.current,
+          rightsImageUrls: this.data.serviceFrom.rightsImageUrls,
+          rightsReasonDesc: this.data.serviceFrom.applyReason.desc,
+          rightsReasonType: this.data.serviceFrom.receiptStatus.status,
+          rightsType: this.data.serviceType,
+        },
+        rightsItem: [
+          {
+            itemTotalAmount: this.data.goodsInfo.price * this.data.serviceFrom.returnNum,
+            rightsQuantity: this.data.serviceFrom.returnNum,
+            skuId: this.query.skuId,
+            spuId: this.query.spuId,
+          },
+        ],
+        refundMemo: this.data.serviceFrom.remark.current,
+      };
+      this.setData({ submitting: true });
+      // 发起申请售后请求
+      dispatchApplyService(params)
+        .then((res) => {
+          Toast({
+            context: this,
+            selector: '#t-toast',
+            message: '申请成功',
+            icon: '',
+          });
+
+          wx.redirectTo({
+            url: `/pages/order/after-service-detail/index?rightsNo=${res.data.rightsNo}`,
+          });
+        })
+        .then(() => this.setData({ submitting: false }))
+        .catch(() => this.setData({ submitting: false }));
+    });
+  },
+
+  submitCheck() {
+    return new Promise((resolve) => {
+      const { msg, valid } = this.data.validateRes;
+      if (!valid) {
+        Toast({
+          context: this,
+          selector: '#t-toast',
+          message: msg,
+          icon: '',
+        });
+        return;
+      }
+      resolve();
+    });
+  },
+
+  handleSuccess(e) {
+    const { files } = e.detail;
+    this.setData({
+      'sessionFrom.rightsImageUrls': files,
+    });
+  },
+
+  handleRemove(e) {
+    const { index } = e.detail;
+    const {
+      sessionFrom: { rightsImageUrls },
+    } = this.data;
+    rightsImageUrls.splice(index, 1);
+    this.setData({
+      'sessionFrom.rightsImageUrls': rightsImageUrls,
+    });
+  },
+
+  handleComplete() {
+    this.setData({
+      uploading: false,
+    });
+  },
+
+  handleSelectChange() {
+    this.setData({
+      uploading: true,
+    });
+  },
+});

mini-program/pages/order/apply-service/index.json

@@ -0,0 +1,19 @@
+{
+  "navigationBarTitleText": "选择售后类型",
+  "usingComponents": {
+    "wr-price": "/components/price/index",
+    "wr-order-goods-card": "../components/order-goods-card/index",
+    "wr-reason-sheet": "../components/reason-sheet/index",
+    "t-cell": "tdesign-miniprogram/cell/cell",
+    "t-icon": "tdesign-miniprogram/icon/icon",
+    "t-toast": "tdesign-miniprogram/toast/toast",
+    "t-dialog": "tdesign-miniprogram/dialog/dialog",
+    "t-button": "tdesign-miniprogram/button/button",
+    "t-cell-group": "tdesign-miniprogram/cell-group/cell-group",
+    "t-stepper": "tdesign-miniprogram/stepper/stepper",
+    "t-popup": "tdesign-miniprogram/popup/popup",
+    "t-textarea": "tdesign-miniprogram/textarea/textarea",
+    "t-input": "tdesign-miniprogram/input/input",
+    "t-upload": "tdesign-miniprogram/upload/upload"
+  }
+}

mini-program/pages/order/apply-service/index.wxml

@@ -0,0 +1,198 @@
+<view class="select-service">
+  <view class="order-goods-card">
+    <wr-order-goods-card goods="{{goodsInfo}}" no-top-line thumb-class="order-goods-card-title-class">
+      <view slot="footer" class="order-goods-card-footer">
+        <wr-price
+          price="{{goodsInfo.paidAmountEach}}"
+          fill
+          wr-class="order-goods-card-footer-price-class"
+          symbol-class="order-goods-card-footer-price-symbol"
+          decimal-class="order-goods-card-footer-price-decimal"
+        />
+        <view class="order-goods-card-footer-num">x {{goodsInfo.boughtQuantity}}</view>
+      </view>
+    </wr-order-goods-card>
+  </view>
+  <view wx:if="{{!serviceRequireType}}" class="service-choice">
+    <t-cell-group>
+      <t-cell
+        title="申请退款（无需退货）"
+        arrow
+        description="没收到货，或与商家协商同意不用退货只退款"
+        bindtap="onApplyOnlyRefund"
+      >
+        <t-icon
+          slot="left-icon"
+          prefix="wr"
+          class="t-cell__left__icon"
+          name="goods_refund"
+          size="48rpx"
+          color="#fa4126"
+        />
+      </t-cell>
+      <t-cell
+        wx:if="{{canApplyReturn}}"
+        title="退货退款"
+        description="已收到货，需要退还收到的商品"
+        arrow
+        bindtap="onApplyReturnGoods"
+      >
+        <t-icon
+          slot="left-icon"
+          prefix="wr"
+          class="t-cell__left__icon"
+          name="goods_return"
+          size="48rpx"
+          color="#fa4126"
+        />
+      </t-cell>
+      <t-cell wx:else class="non-returnable" title="退货退款" description="该商品不支持退货">
+        <t-icon
+          slot="left-icon"
+          prefix="wr"
+          class="t-cell__left__icon"
+          name="goods_return"
+          size="48rpx"
+          color="#fa4126"
+        />
+      </t-cell>
+    </t-cell-group>
+  </view>
+  <!-- 售后表单 -->
+  <view wx:else class="service-form">
+    <view class="service-from-group">
+      <t-cell-group>
+        <t-cell title="商品收货状态" arrow note="{{serviceFrom.receiptStatus.desc}}" bind:tap="onApplyGoodsStatus" />
+        <t-cell
+          bordered="{{false}}"
+          title="退款原因"
+          wx:if="{{canApplyReturn}}"
+          note="{{serviceFrom.applyReason.desc}}"
+          arrow
+          bindtap="onApplyReturnGoodsStatus"
+        />
+      </t-cell-group>
+    </view>
+    <view class="service-from-group">
+      <t-cell-group>
+        <t-cell title="退款商品数量">
+          <t-stepper
+            slot="note"
+            theme="filled"
+            min="1"
+            max="{{maxApplyNum}}"
+            value="{{serviceFrom.returnNum}}"
+            bindchange="onChangeReturnNum"
+          />
+        </t-cell>
+        <t-cell
+          title="退款金额"
+          t-class-description="refund-money__description"
+          description="{{amountTip}}"
+          bind:tap="onAmountTap"
+        >
+          <view class="service-from-group__wrapper" slot="note">
+            <wr-price
+              price="{{serviceFrom.amount.current}}"
+              fill
+              wr-class="refund-money-price-class"
+              symbol-class="refund-money-price-symbol"
+              decimal-class="refund-money-price-decimal"
+            />
+            <view class="service-from-group__price">
+              修改
+              <t-icon color="#bbb" name="chevron-right" size="30rpx" slot="left-icon" />
+            </view>
+          </view>
+        </t-cell>
+      </t-cell-group>
+    </view>
+    <view class="service-from-group__textarea">
+      <text class="textarea--label">退款说明</text>
+      <t-textarea
+        style="height: 220rpx"
+        value="{{serviceFrom.remark}}"
+        t-class="textarea--content"
+        maxlength="200"
+        indicator
+        placeholder="退款说明（选填）"
+        bind:change="onRemarkChange"
+      />
+    </view>
+    <view class="service-from-group__grid">
+      <t-upload
+        media-type="{{['image','video']}}"
+        files="{{sessionFrom.rightsImageUrls}}"
+        bind:remove="handleRemove"
+        bind:success="handleSuccess"
+        bind:complete="handleComplete"
+        bind:select-change="handleSelectChange"
+        gridConfig="{{uploadGridConfig}}"
+        max="3"
+      >
+        <view slot="add-content" class="upload-addcontent-slot">
+          <t-icon name="add" size="60rpx" />
+          <view class="upload-desc">
+            <text>上传凭证</text>
+            <text>（最多3张）</text>
+          </view>
+        </view>
+      </t-upload>
+    </view>
+    <view class="bottom-bar">
+      <t-button
+        t-class="bottom-bar__btn {{validateRes.valid && !uploading ? '' : 'disabled'}}"
+        bindtap="onSubmit"
+        loading="{{submitting}}"
+      >
+        提交
+      </t-button>
+    </view>
+  </view>
+</view>
+<!-- 收货状态选择 -->
+<t-popup visible="{{showReceiptStatusDialog}}" placement="bottom" bindclose="onReceiptStatusDialogConfirm">
+  <view class="dialog--service-status" slot="content">
+    <view class="options">
+      <view
+        wx:for="{{receiptStatusList}}"
+        wx:key="status"
+        class="option"
+        hover-class="option--active"
+        bindtap="onReceiptStatusDialogConfirm"
+        data-index="{{index}}"
+      >
+        {{item.desc}}
+      </view>
+    </view>
+    <view class="cancel" hover-class="cancel--active" bindtap="onReceiptStatusDialogConfirm">取消</view>
+  </view>
+</t-popup>
+<!-- 理由选择 -->
+<wr-reason-sheet id="wr-reason-sheet" />
+<!-- 金额填写 -->
+<t-dialog
+  id="input-dialog"
+  visible="{{inputDialogVisible}}"
+  class="{{serviceFrom.amount.focus ? 'amount-dialog--focus' : ''}}"
+>
+  <view class="input-dialog__title" slot="title">退款金额</view>
+  <view class="input-dialog__content" slot="content">
+    <t-input
+      t-class="input"
+      t-class-input="input-dialog__input"
+      t-class-label="input-dialog__label"
+      placeholder=""
+      value="{{serviceFrom.amount.temp}}"
+      type="digit"
+      focus="{{serviceFrom.amount.focus}}"
+      bindinput="onAmountInput"
+      bindfocus="onAmountFocus"
+      bindblur="onAmountBlur"
+      label="¥"
+    ></t-input>
+    <view class="tips">{{amountTip}}</view>
+  </view>
+</t-dialog>
+<t-dialog id="t-dialog" />
+<t-toast id="t-toast" />

mini-program/pages/order/apply-service/index.wxss

@@ -0,0 +1,308 @@
+:host {
+  background-color: #f5f5f5;
+}
+.select-service .service-form .service-from-group {
+  margin-top: 20rpx;
+}
+.select-service .service-form {
+  padding-bottom: calc(env(safe-area-inset-bottom) + 80rpx);
+}
+
+.order-goods-card-footer {
+  display: flex;
+  width: calc(100% - 190rpx);
+  justify-content: space-between;
+  position: absolute;
+  bottom: 0;
+  left: 190rpx;
+}
+
+.order-goods-card-footer-num {
+  color: #999;
+}
+
+.select-service .order-goods-card-footer .order-goods-card-footer-price-class {
+  font-size: 36rpx;
+  color: #333;
+  font-family: DIN Alternate;
+}
+.select-service .order-goods-card-footer .order-goods-card-footer-price-decimal {
+  font-size: 28rpx;
+  color: #333;
+  font-family: DIN Alternate;
+}
+.select-service .order-goods-card-footer .order-goods-card-footer-price-symbol {
+  color: #333;
+  font-size: 24rpx;
+  font-family: DIN Alternate;
+}
+
+.select-service .remark {
+  min-height: 110rpx;
+  border-radius: 10rpx;
+  margin-top: 20rpx;
+  background-color: #f5f5f5;
+}
+.select-service .remark::after {
+  border: none;
+}
+
+.select-service .special-cell .special-cell-note {
+  display: flex;
+  flex-direction: column;
+}
+
+.select-service .special-cell .wr-cell__title {
+  margin-right: 100rpx;
+}
+
+.select-service .special-cell .special-cell-note-price-class {
+  font-size: 36rpx;
+  color: #fa4126;
+  font-family: DIN Alternate;
+}
+.select-service .special-cell .special-cell-note-price-decimal {
+  font-size: 28rpx;
+  color: #fa4126;
+  font-family: DIN Alternate;
+}
+.select-service .special-cell .special-cell-note-price-symbol {
+  color: #fa4126;
+  font-size: 24rpx;
+  font-family: DIN Alternate;
+}
+
+.select-service .bottom-bar__btn {
+  width: 686rpx;
+  background-color: #fa4126;
+  color: white;
+  font-size: 32rpx;
+  border-radius: 48rpx;
+  position: absolute;
+  left: 50%;
+  top: 20rpx;
+  transform: translateX(-50%);
+}
+.select-service .bottom-bar__btn::after {
+  border: none;
+}
+.select-service .bottom-bar__btn.disabled {
+  background-color: #c6c6c6;
+  --td-button-default-active-bg-color: #c6c6c6;
+  --td-button-default-border-bg-color: #c6c6c6;
+}
+.select-service .bottom-bar__btn.disabled::after {
+  border: none;
+}
+.select-service .order-goods-card .wr-goods-card {
+  padding: 0 30rpx;
+}
+
+.order-goods-card-footer {
+  display: flex;
+  width: calc(100% - 190rpx);
+  justify-content: space-between;
+  position: absolute;
+  bottom: 20rpx;
+  left: 190rpx;
+}
+
+.order-goods-card-footer-num {
+  color: #999;
+  line-height: 40rpx;
+}
+
+.order-goods-card-title-class {
+  width: 10rpx !important;
+}
+
+.input-dialog__content .input-dialog__input {
+  font-size: 72rpx !important;
+  height: 64rpx;
+}
+
+.t-input__label {
+  margin-right: 0 !important;
+}
+
+.input-dialog__label {
+  font-size: 48rpx;
+  color: #333;
+}
+
+.input-dialog__content .input-dialog__input,
+.input-dialog__label {
+  height: 64rpx;
+  line-height: 64rpx !important;
+}
+
+.input-dialog__content .input {
+  font-size: 48rpx;
+  padding-left: 0;
+  padding-right: 0;
+  --td-input-border-left-space: 0;
+}
+
+.input-dialog__content .tips {
+  margin-top: 24rpx;
+  font-size: 24rpx;
+  color: #999999;
+}
+
+.t-input__name {
+  width: 10rpx !important;
+}
+
+.input-dialog__title {
+  color: #333;
+  font-size: 32rpx;
+  font-weight: normal;
+}
+
+.dialog--service-status {
+  background-color: #f3f4f5;
+  overflow: hidden;
+}
+.dialog--service-status .options .option {
+  color: #333333;
+  font-size: 30rpx;
+  text-align: center;
+  height: 100rpx;
+  line-height: 100rpx;
+  background-color: white;
+}
+.dialog--service-status .options .option:not(:last-child) {
+  border-bottom: 1rpx solid #e6e6e6;
+}
+.dialog--service-status .options .option--active {
+  opacity: 0.5;
+}
+.dialog--service-status .options .option.main {
+  color: #fa4126;
+}
+.dialog--service-status .cancel {
+  color: #333333;
+  font-size: 30rpx;
+  text-align: center;
+  height: 100rpx;
+  line-height: 100rpx;
+  background-color: white;
+  margin-top: 20rpx;
+}
+.dialog--service-status .cancel--active {
+  opacity: 0.5;
+}
+.amount-dialog--focus .popup__content--center,
+.remark-dialog--focus .popup__content--center {
+  top: 100rpx;
+  transform: translate(-50%, 0);
+}
+.dialog .dialog__button-confirm {
+  color: #fa4126;
+  color: var(--color-primary, #fa4126);
+}
+.select-service .bottom-bar {
+  background-color: #fff;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 158rpx;
+  z-index: 3;
+}
+.order-goods-card {
+  background: #fff;
+  margin-bottom: 24rpx;
+}
+
+.service-from-group__wrapper {
+  display: flex;
+  flex-direction: column;
+  font-family: DIN Alternate;
+  font-weight: bold;
+  font-size: 36rpx;
+  text-align: right;
+  color: #fa4126;
+}
+.service-from-group__price {
+  display: flex;
+  align-items: center;
+  color: #bbb;
+  font-size: 24rpx;
+  position: relative;
+  left: 30rpx;
+}
+.textarea--label {
+}
+.service-from-group__textarea {
+  margin-top: 20rpx;
+  background-color: #fff;
+  padding: 32rpx 32rpx 24rpx;
+}
+
+.textarea--content {
+  margin-top: 32rpx;
+  background: #f5f5f5 !important;
+  border-radius: 16rpx;
+}
+.service-from-group__textarea .t-textarea__wrapper .t-textarea__wrapper-textarea {
+  height: 136rpx;
+  box-sizing: border-box;
+}
+.service-from-group__grid {
+  padding: 0 32rpx 48rpx;
+  background: #fff;
+  margin-bottom: 148rpx;
+}
+
+.upload-addcontent-slot {
+  background-color: #f5f5f5;
+  height: inherit;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.refund-money__description {
+  font-size: 24rpx !important;
+}
+
+.upload-desc {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  font-size: 24rpx;
+  color: #999;
+}
+
+.t-cell__left__icon {
+  position: relative;
+  top: -24rpx;
+  margin-right: 18rpx;
+}
+
+.service-choice .t-cell__title-text {
+  color: #333;
+  font-weight: bold;
+}
+
+.service-form .service-from-group .service-from-group__wrapper .refund-money-price-class {
+  font-size: 36rpx;
+  font-family: DIN Alternate;
+}
+
+.service-form .service-from-group .service-from-group__wrapper .refund-money-price-decimal {
+  font-size: 28rpx;
+  font-family: DIN Alternate;
+}
+
+.service-form .service-from-group .service-from-group__wrapper .refund-money-price-symbol {
+  font-size: 24rpx;
+  font-family: DIN Alternate;
+}
+
+.t-button {
+  --td-button-default-color: #000;
+  --td-button-primary-text-color: #fa4126;
+}

mini-program/pages/order/components/after-service-button-bar/index.js

@@ -0,0 +1,95 @@
+import Dialog from 'tdesign-miniprogram/dialog/index';
+import Toast from 'tdesign-miniprogram/toast/index';
+
+import { cancelRights } from '../../after-service-detail/api';
+import { ServiceButtonTypes } from '../../config';
+
+Component({
+  properties: {
+    service: {
+      type: Object,
+      observer(service) {
+        const buttonsRight = service.buttons || service.buttonVOs || [];
+        this.setData({
+          buttons: {
+            left: [],
+            right: buttonsRight,
+          },
+        });
+      },
+    },
+  },
+
+  data: {
+    service: {},
+    buttons: {
+      left: [],
+      right: [],
+    },
+  },
+
+  methods: {
+    // 点击【订单操作】按钮，根据按钮类型分发
+    onServiceBtnTap(e) {
+      const { type } = e.currentTarget.dataset;
+      switch (type) {
+        case ServiceButtonTypes.REVOKE:
+          this.onConfirm(this.data.service);
+          break;
+        case ServiceButtonTypes.FILL_TRACKING_NO:
+          this.onFillTrackingNo(this.data.service);
+          break;
+        case ServiceButtonTypes.CHANGE_TRACKING_NO:
+          this.onChangeTrackingNo(this.data.service);
+          break;
+        case ServiceButtonTypes.VIEW_DELIVERY:
+          this.viewDelivery(this.data.service);
+          break;
+      }
+    },
+
+    onFillTrackingNo(service) {
+      wx.navigateTo({
+        url: `/pages/order/fill-tracking-no/index?rightsNo=${service.id}`,
+      });
+    },
+
+    viewDelivery(service) {
+      wx.navigateTo({
+        url: `/pages/order/delivery-detail/index?data=${JSON.stringify(
+          service.logistics || service.logisticsVO,
+        )}&source=2`,
+      });
+    },
+
+    onChangeTrackingNo(service) {
+      wx.navigateTo({
+        url: `/pages/order/fill-tracking-no/index?rightsNo=${
+          service.id
+        }&logisticsNo=${service.logisticsNo}&logisticsCompanyName=${
+          service.logisticsCompanyName
+        }&logisticsCompanyCode=${service.logisticsCompanyCode}&remark=${
+          service.remark || ''
+        }`,
+      });
+    },
+
+    onConfirm() {
+      Dialog.confirm({
+        title: '是否撤销退货申请？',
+        content: '',
+        confirmBtn: '撤销申请',
+        cancelBtn: '不撤销',
+      }).then(() => {
+        const params = { rightsNo: this.data.service.id };
+        return cancelRights(params).then(() => {
+          Toast({
+            context: this,
+            selector: '#t-toast',
+            message: '你确认撤销申请',
+          });
+        });
+      });
+    },
+  },
+});

mini-program/pages/order/components/after-service-button-bar/index.json

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

mini-program/pages/order/components/after-service-button-bar/index.wxml

@@ -0,0 +1,33 @@
+<view class="btn-bar">
+  <view class="left">
+    <t-button
+      wx:for="{{buttons.left}}"
+      wx:key="type"
+      wx:for-item="leftBtn"
+      size="extra-small"
+      shape="round"
+      t-class="order-btn delete-btn"
+      catchtap="onServiceBtnTap"
+      data-type="{{leftBtn.type}}"
+    >
+      {{leftBtn.name}}
+    </t-button>
+  </view>
+  <view class="right">
+    <t-button
+      wx:for="{{buttons.right}}"
+      wx:key="type"
+      wx:for-item="rightBtn"
+      size="extra-small"
+      variant="{{ rightBtn.primary ? 'base' : 'outline'}}"
+      shape="round"
+      t-class="order-btn {{rightBtn.primary ? 'primary' : 'normal'}}"
+      catchtap="onServiceBtnTap"
+      data-type="{{rightBtn.type}}"
+      open-type="{{ rightBtn.openType }}"
+      data-share="{{ rightBtn.dataShare }}"
+    >
+      {{rightBtn.name}}
+    </t-button>
+  </view>
+</view>

mini-program/pages/order/components/after-service-button-bar/index.wxss

@@ -0,0 +1,43 @@
+:host {
+  width: 100%;
+}
+.btn-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  line-height: 1;
+}
+.btn-bar .order-btn {
+  background-color: inherit;
+  font-size: 26rpx;
+  padding: 16rpx 28rpx;
+  line-height: 1;
+  border-radius: unset;
+  min-width: 160rpx;
+  border-radius: 32rpx;
+  height: 60rpx;
+  margin-right: 10rpx;
+}
+
+.btn-bar .left .order-btn:not(:first-child),
+.btn-bar .right .order-btn:not(:first-child) {
+  margin-left: 20rpx;
+}
+.btn-bar .left .delete-btn {
+  font-size: 22rpx;
+}
+.btn-bar .left .delete-btn::after {
+  display: none;
+}
+
+.btn-bar .right .normal {
+  --td-button-default-color: #333333;
+  --td-button-default-border-color: #dddddd;
+}
+
+.btn-bar .right .primary {
+  --td-button-default-color: #fff;
+  --td-button-default-bg-color: #fa4126;
+  --td-button-default-border-color: #fa4126;
+  --td-button-default-active-bg-color: #fa42269c;
+}

mini-program/pages/order/components/customer-service/index.js

@@ -0,0 +1,38 @@
+Component({
+  externalClasses: ['wr-class'],
+
+  properties: {
+    phoneNumber: String,
+    desc: String,
+  },
+
+  data: {
+    show: false,
+  },
+
+  methods: {
+    onBtnTap() {
+      this.setData({
+        show: true,
+      });
+    },
+
+    onDialogClose() {
+      this.setData({
+        show: false,
+      });
+    },
+
+    onCall() {
+      const { phoneNumber } = this.properties;
+      wx.makePhoneCall({
+        phoneNumber,
+      });
+    },
+    onCallOnlineService() {
+      wx.showToast({
+        title: '你点击了在线客服',
+      });
+    },
+  },
+});

mini-program/pages/order/components/customer-service/index.json

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

mini-program/pages/order/components/customer-service/index.wxml

@@ -0,0 +1,23 @@
+<!-- 联系客服按钮 -->
+<view class="wr-class customer-service text-btn" hover-class="text-btn--active" bindtap="onBtnTap">联系客服</view>
+<!-- 联系客服弹框 -->
+<t-popup visible="{{show}}" placement="bottom" bind:visible-change="onDialogClose">
+	<view class="dialog--customer-service">
+		<view class="content" wx:if="{{desc}}">
+			<view class="title">服务时间:</view>
+			<text class="subtitle">{{desc}}</text>
+		</view>
+		<view class="options">
+			<view
+			  class="option main"
+			  hover-class="text-btn--active"
+			  wx:if="{{phoneNumber}}"
+			  bindtap="onCall"
+			>呼叫 {{phoneNumber}}
+			</view>
+			<view class="option main online" hover-class="text-btn--active" bindtap="onCallOnlineService">在线客服</view>
+			<view class="option" hover-class="text-btn--active" bindtap="onDialogClose">取消</view>
+		</view>
+	</view>
+</t-popup>
+

mini-program/pages/order/components/customer-service/index.wxss

@@ -0,0 +1,48 @@
+.text-btn {
+  display: inline;
+  color: #333;
+  font-size: 24rpx;
+}
+.text-btn--active {
+  opacity: 0.5;
+}
+.dialog--customer-service {
+  background-color: #f3f4f5;
+  overflow: hidden;
+}
+.dialog--customer-service .content {
+  font-size: 26rpx;
+  margin: 32rpx 30rpx;
+  text-align: center;
+}
+.dialog--customer-service .content .title {
+  display: inline;
+  color: #999999;
+  font-weight: bold;
+}
+.dialog--customer-service .content .subtitle {
+  display: inline;
+  color: #999999;
+}
+.dialog--customer-service .options .option {
+  color: #333333;
+  font-size: 30rpx;
+  text-align: center;
+  height: 100rpx;
+  line-height: 100rpx;
+  background-color: white;
+}
+.dialog--customer-service .options .option:not(:last-child) {
+  margin-bottom: 20rpx;
+}
+.dialog--customer-service .options .option--active {
+  opacity: 0.5;
+}
+.dialog--customer-service .options .option.main {
+  color: #333;
+}
+.dialog--customer-service .options .option.online {
+  position: relative;
+  top: -17rpx;
+  margin-bottom: 2rpx;
+}

mini-program/pages/order/components/goods-card/index.js

@@ -0,0 +1,264 @@
+Component({
+  options: {
+    multipleSlots: true, // 在组件定义时的选项中启用多slot支持
+    addGlobalClass: true,
+  },
+  intersectionObserverContext: null,
+
+  externalClasses: [
+    'card-class',
+    'title-class',
+    'desc-class',
+    'num-class',
+    'thumb-class',
+    'specs-class',
+    'price-class',
+    'origin-price-class',
+    'price-prefix-class',
+  ],
+
+  relations: {
+    '../order-card/index': {
+      type: 'ancestor',
+      linked(target) {
+        this.parent = target;
+      },
+    },
+  },
+
+  properties: {
+    hidden: {
+      // 设置为null代表不做类型转换
+      type: null,
+      value: false,
+      observer(hidden) {
+        // null就是代表没有设置，没有设置的话不setData，防止祖先组件触发的setHidden操作被覆盖
+        if (hidden !== null) {
+          this.setHidden(!!hidden);
+        }
+      },
+    },
+    id: {
+      type: String,
+      // `goods-card-88888888`
+      // 不能在这里写生成逻辑，如果在这里写，那么假设有多个goods-list时，他们将共享这个值
+      value: '',
+      observer: (id) => {
+        this.genIndependentID(id);
+        if (this.properties.thresholds?.length) {
+          this.createIntersectionObserverHandle();
+        }
+      },
+    },
+    data: {
+      type: Object,
+      observer(goods) {
+        // 有ID的商品才渲染
+        if (!goods) {
+          return;
+        }
+
+        /** 划线价是否有效 */
+        let isValidityLinePrice = true;
+        // 判断一次划线价格是否合理
+        if (
+          goods.originPrice &&
+          goods.price &&
+          goods.originPrice < goods.price
+        ) {
+          isValidityLinePrice = false;
+        }
+
+        // 敲定换行数量默认值
+        if (goods.lineClamp === undefined || goods.lineClamp <= 0) {
+          // tag数组长度 大于0 且 可见
+          // 指定换行为1行
+          if ((goods.tags?.length || 0) > 0 && !goods.hideKey?.tags) {
+            goods.lineClamp = 1;
+          } else {
+            goods.lineClamp = 2;
+          }
+        }
+
+        this.setData({ goods, isValidityLinePrice });
+      },
+    },
+    layout: {
+      type: String,
+      value: 'horizontal',
+    },
+    thumbMode: {
+      type: String,
+      value: 'aspectFill',
+    },
+    thumbWidth: Number,
+    thumbHeight: Number,
+    priceFill: {
+      type: Boolean,
+      value: true,
+    },
+    currency: {
+      type: String,
+      value: '¥',
+    },
+    lazyLoad: {
+      type: Boolean,
+      value: false,
+    },
+    centered: {
+      type: Boolean,
+      value: false,
+    },
+    showCart: {
+      type: Boolean,
+      value: false,
+    },
+    pricePrefix: {
+      type: String,
+      value: '',
+    },
+    cartSize: {
+      type: Number,
+      value: 48,
+    },
+    cartColor: {
+      type: String,
+      value: '#FA550F',
+    },
+    /** 元素可见监控阈值, 数组长度大于0就创建 */
+    thresholds: {
+      type: Array,
+      value: [],
+      observer(current) {
+        if (current && current.length) {
+          this.createIntersectionObserverHandle();
+        } else {
+          this.clearIntersectionObserverHandle();
+        }
+      },
+    },
+    specsIconClassPrefix: {
+      type: String,
+      value: 'wr',
+    },
+    specsIcon: {
+      type: String,
+      value: 'expand_more',
+    },
+    addCartIconClassPrefix: {
+      type: String,
+      value: 'wr',
+    },
+    addCartIcon: {
+      type: String,
+      value: 'cart',
+    },
+  },
+
+  data: {
+    hiddenInData: false,
+    independentID: '',
+    goods: { id: '' },
+    /** 保证划线价格不小于原价，否则不渲染划线价 */
+    isValidityLinePrice: false,
+  },
+
+  lifetimes: {
+    ready() {
+      this.init();
+    },
+    detached() {
+      this.clear();
+    },
+  },
+
+  methods: {
+    clickHandle() {
+      this.triggerEvent('click', { goods: this.data.goods });
+    },
+    clickThumbHandle() {
+      this.triggerEvent('thumb', { goods: this.data.goods });
+    },
+    clickTagHandle(evt) {
+      const { index } = evt.currentTarget.dataset;
+      this.triggerEvent('tag', { goods: this.data.goods, index });
+    },
+    // 加入购物车
+    addCartHandle(e) {
+      const { id } = e.currentTarget;
+      const { id: cardID } = e.currentTarget.dataset;
+      this.triggerEvent('add-cart', {
+        ...e.detail,
+        id,
+        cardID,
+        goods: this.data.goods,
+      });
+    },
+    genIndependentID(id, cb) {
+      let independentID;
+      if (id) {
+        independentID = id;
+      } else {
+        // `goods-card-88888888`
+        independentID = `goods-card-${~~(Math.random() * 10 ** 8)}`;
+      }
+      this.setData({ independentID }, cb);
+    },
+
+    init() {
+      const { thresholds, id, hidden } = this.properties;
+      if (hidden !== null) {
+        this.setHidden(!!hidden);
+      }
+
+      this.genIndependentID(id || '', () => {
+        if (thresholds && thresholds.length) {
+          this.createIntersectionObserverHandle();
+        }
+      });
+    },
+
+    clear() {
+      this.clearIntersectionObserverHandle();
+    },
+
+    setHidden(hidden) {
+      this.setData({ hiddenInData: !!hidden });
+    },
+
+    createIntersectionObserverHandle() {
+      if (this.intersectionObserverContext || !this.data.independentID) {
+        return;
+      }
+
+      this.intersectionObserverContext = wx
+        .createIntersectionObserver(this, {
+          thresholds: this.properties.thresholds,
+        })
+        .relativeToViewport();
+
+      this.intersectionObserverContext.observe(
+        `#${this.data.independentID}`,
+        (res) => {
+          this.intersectionObserverCB(res);
+        },
+      );
+    },
+    intersectionObserverCB(ob) {
+      this.triggerEvent('ob', {
+        goods: this.data.goods,
+        context: this.intersectionObserverContext,
+        ob,
+      });
+    },
+    clearIntersectionObserverHandle() {
+      if (this.intersectionObserverContext) {
+        try {
+          this.intersectionObserverContext.disconnect();
+        } catch (e) {}
+
+        this.intersectionObserverContext = null;
+      }
+    },
+  },
+});

mini-program/pages/order/components/goods-card/index.json

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

mini-program/pages/order/components/goods-card/index.wxml

@@ -0,0 +1,77 @@
+<view
+ id="{{independentID}}"
+ class="wr-goods-card card-class {{ layout }} {{ centered ? 'center' : ''}}"
+ bind:tap="clickHandle"
+ data-goods="{{ goods }}"
+ hidden="{{hiddenInData}}"
+>
+	<view class="wr-goods-card__main">
+		<view class="wr-goods-card__thumb thumb-class" bind:tap="clickThumbHandle">
+			<!-- data-src 是方便加购动画读取图片用的 -->
+			<t-image
+			 t-class="wr-goods-card__thumb-com"
+			 wx:if="{{ !!goods.thumb && !goods.hideKey.thumb }}"
+			 src="{{ goods.thumb }}"
+			 mode="{{ thumbMode }}"
+			 lazy-load="{{ lazyLoad }}"
+			/>
+			<slot name="thumb-cover" />
+		</view>
+
+		<view class="wr-goods-card__body">
+			<view class="wr-goods-card__long_content">
+				<view wx:if="{{ goods.title && !goods.hideKey.title }}" class="wr-goods-card__title title-class" style="-webkit-line-clamp: {{ goods.lineClamp }};">
+					<slot name="before-title" />
+					{{ goods.title }}
+				</view>
+				<slot name="after-title" />
+				<view wx:if="{{ goods.desc && !goods.hideKey.desc }}" class="wr-goods-card__desc desc-class">{{ goods.desc }}</view>
+				<slot name="after-desc" />
+				<view wx:if="{{ goods.specs && goods.specs.length > 0 && !goods.hideKey.specs }}" class="wr-goods-card__specs__desc specs-class" bind:tap="clickSpecsHandle">
+					<view class="wr-goods-card__specs__desc-text">{{ goods.specs }}</view>
+				</view>
+				<view class="goods_tips" wx:if="{{goods.stockQuantity !== 0 && goods.quantity >= goods.stockQuantity}}">库存不足</view>
+			</view>
+
+			<view class="wr-goods-card__short_content">
+				<block wx:if="{{goods.stockQuantity !== 0}}">
+					<view wx:if="{{ pricePrefix }}" class="wr-goods-card__price__prefix price-prefix-class">{{ pricePrefix }}</view>
+					<slot name="price-prefix" />
+					<view wx:if="{{ goods.price && !goods.hideKey.price }}" class="wr-goods-card__price">
+						<price
+						 wr-class="price-class"
+						 symbol="{{currency}}"
+						 price="{{goods.price}}"
+						 fill="{{priceFill}}"
+						 decimalSmaller
+						/>
+					</view>
+					<view wx:if="{{ goods.originPrice && !goods.hideKey.originPrice && isValidityLinePrice }}" class="wr-goods-card__origin-price">
+						<price
+						 wr-class="origin-price-class"
+						 symbol="{{currency}}"
+						 price="{{goods.originPrice}}"
+						 fill="{{priceFill}}"
+						/>
+					</view>
+					<slot name="origin-price" />
+					<view wx:if="{{goods.num && !goods.hideKey.num}}" class="wr-goods-card__num num-class">
+						<text class="wr-goods-card__num__prefix">x </text>
+						{{ goods.num }}
+					</view>
+				</block>
+				<block wx:else>
+					<view class="no_storage">
+						<view>请重新选择商品规格</view>
+						<view class="no_storage__right">重选</view>
+					</view>
+				</block>
+
+			</view>
+			<slot name="append-body" />
+		</view>
+		<slot name="footer" />
+	</view>
+	<slot name="append-card" />
+</view>
+

mini-program/pages/order/components/goods-card/index.wxss

@@ -0,0 +1,254 @@
+.wr-goods-card {
+  box-sizing: border-box;
+  font-size: 24rpx;
+}
+.wr-goods-card__main {
+  position: relative;
+  display: flex;
+  line-height: 1;
+  flex-direction: row;
+  background: transparent;
+  padding: 16rpx 0rpx;
+}
+.wr-goods-card.center .wr-goods-card__main {
+  align-items: center;
+  justify-content: center;
+}
+.wr-goods-card__thumb {
+  flex-shrink: 0;
+  position: relative;
+  width: 176rpx;
+  height: 176rpx;
+}
+.wr-goods-card__thumb-com {
+  width: 176rpx;
+  height: 176rpx;
+  border-radius: 8rpx;
+  overflow: hidden;
+}
+.wr-goods-card__thumb:empty {
+  display: none;
+  margin: 0;
+}
+
+.wr-goods-card__body {
+  display: flex;
+  margin: 0 0 0 16rpx;
+  flex-direction: row;
+  flex: 1 1 auto;
+  min-height: 176rpx;
+}
+.wr-goods-card__long_content {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  flex: 1 1 auto;
+}
+.wr-goods-card__long_content .goods_tips {
+  width: 100%;
+  margin-top: 16rpx;
+  text-align: right;
+  color: #fa4126;
+  font-size: 24rpx;
+  line-height: 32rpx;
+  font-weight: bold;
+}
+.wr-goods-card__title {
+  flex-shrink: 0;
+  font-size: 28rpx;
+  color: #333;
+  line-height: 40rpx;
+  font-weight: 400;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  word-break: break-word;
+}
+.wr-goods-card__title__prefix-tags {
+  display: inline-flex;
+}
+.wr-goods-card__title__prefix-tags .prefix-tag {
+  margin: 0 8rpx 0 0;
+}
+.wr-goods-card__desc {
+  font-size: 24rpx;
+  color: #f5f5f5;
+  line-height: 40rpx;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+.wr-goods-card__specs__desc,
+.wr-goods-card__specs__text {
+  font-size: 24rpx;
+  height: 32rpx;
+  line-height: 32rpx;
+  color: #999999;
+  margin: 8rpx 0;
+}
+.wr-goods-card__specs__desc {
+  display: flex;
+  align-self: flex-start;
+  flex-direction: row;
+}
+.wr-goods-card__specs__desc-text {
+  height: 100%;
+  max-width: 380rpx;
+  word-break: break-all;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+.wr-goods-card__specs__desc-icon {
+  line-height: inherit;
+  margin-left: 8rpx;
+  font-size: 24rpx;
+  color: #bbb;
+}
+.wr-goods-card__specs__text {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+}
+.wr-goods-card__tags {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin: 16rpx 0 0 0;
+}
+.wr-goods-card__tag {
+  color: #fa550f;
+  background: transparent;
+  font-size: 20rpx;
+  border: 1rpx solid #fa550f;
+  padding: 0 8rpx;
+  height: 30rpx;
+  line-height: 30rpx;
+  margin: 0 8rpx 8rpx 0;
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  word-break: keep-all;
+  text-overflow: ellipsis;
+}
+.wr-goods-card__short_content {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-end;
+  margin: 0 0 0 46rpx;
+}
+.wr-goods-card__price__prefix {
+  order: 0;
+  color: #666;
+  margin: 0;
+}
+.wr-goods-card__price {
+  white-space: nowrap;
+  font-weight: bold;
+  order: 1;
+  color: #fa4126;
+  font-size: 36rpx;
+  margin: 0;
+  line-height: 48rpx;
+}
+.wr-goods-card__origin-price {
+  white-space: nowrap;
+  font-weight: normal;
+  order: 2;
+  color: #aaaaaa;
+  font-size: 24rpx;
+  margin: 0;
+}
+.wr-goods-card__num {
+  white-space: nowrap;
+  order: 4;
+  font-size: 24rpx;
+  color: #999;
+  margin: 20rpx 0 0 auto;
+}
+.wr-goods-card__num__prefix {
+  color: inherit;
+}
+.wr-goods-card__add-cart {
+  order: 3;
+  margin: auto 0 0 auto;
+}
+.wr-goods-card.horizontal-wrap .wr-goods-card__thumb {
+  width: 192rpx;
+  height: 192rpx;
+  border-radius: 8rpx;
+  overflow: hidden;
+}
+.wr-goods-card.horizontal-wrap .wr-goods-card__body {
+  flex-direction: column;
+}
+.wr-goods-card.horizontal-wrap .wr-goods-card__short_content {
+  flex-direction: row;
+  align-items: center;
+  margin: 16rpx 0 0 0;
+}
+
+.wr-goods-card.horizontal-wrap .wr-goods-card__num {
+  margin: 0 0 0 auto;
+}
+.wr-goods-card.vertical .wr-goods-card__main {
+  padding: 0 0 22rpx 0;
+  flex-direction: column;
+}
+.wr-goods-card.vertical .wr-goods-card__thumb {
+  width: 340rpx;
+  height: 340rpx;
+}
+.wr-goods-card.vertical .wr-goods-card__body {
+  margin: 20rpx 20rpx 0 20rpx;
+  flex-direction: column;
+}
+.wr-goods-card.vertical .wr-goods-card__long_content {
+  overflow: hidden;
+}
+.wr-goods-card.vertical .wr-goods-card__title {
+  line-height: 36rpx;
+}
+.wr-goods-card.vertical .wr-goods-card__short_content {
+  margin: 20rpx 0 0 0;
+}
+.wr-goods-card.vertical .wr-goods-card__price {
+  order: 2;
+  color: #fa4126;
+  margin: 20rpx 0 0 0;
+}
+.wr-goods-card.vertical .wr-goods-card__origin-price {
+  order: 1;
+}
+.wr-goods-card.vertical .wr-goods-card__add-cart {
+  position: absolute;
+  bottom: 20rpx;
+  right: 20rpx;
+}
+
+.wr-goods-card__short_content .no_storage {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 40rpx;
+  color: #333;
+  font-size: 24rpx;
+  line-height: 32rpx;
+  width: 100%;
+}
+
+.no_storage .no_storage__right {
+  width: 80rpx;
+  height: 40rpx;
+  border-radius: 20rpx;
+  border: 2rpx solid #fa4126;
+  line-height: 40rpx;
+  text-align: center;
+  color: #fa4126;
+}

mini-program/pages/order/components/noGoods/noGood.wxs

@@ -0,0 +1,17 @@
+var isOnlyBack = function (data) {
+  return data.limitGoodsList || (data.inValidGoodsList && !data.storeGoodsList);
+};
+
+var isShowChangeAddress = function (data) {
+  return data.abnormalDeliveryGoodsList;
+};
+
+var isShowKeepPay = function (data) {
+  return data.outOfStockGoodsList || (data.storeGoodsList && data.inValidGoodsList);
+};
+
+module.exports = {
+  isOnlyBack: isOnlyBack,
+  isShowChangeAddress: isShowChangeAddress,
+  isShowKeepPay: isShowKeepPay,
+};

mini-program/pages/order/components/noGoods/noGoods.js

@@ -0,0 +1,57 @@
+Component({
+  properties: {
+    settleDetailData: {
+      type: Object,
+      value: {},
+      observer(settleDetailData) {
+        const {
+          outOfStockGoodsList,
+          abnormalDeliveryGoodsList,
+          inValidGoodsList,
+          limitGoodsList,
+        } = settleDetailData;
+        // 弹窗逻辑   限购  超出配送范围   失效    库存不足;
+        const tempList =
+          limitGoodsList ||
+          abnormalDeliveryGoodsList ||
+          inValidGoodsList ||
+          outOfStockGoodsList ||
+          [];
+
+        tempList.forEach((goods, index) => {
+          goods.id = index;
+          goods.unSettlementGoods &&
+            goods.unSettlementGoods.forEach((ele) => {
+              ele.name = ele.goodsName;
+              ele.price = ele.payPrice;
+              ele.imgUrl = ele.image;
+            });
+        });
+        this.setData({
+          // settleDetailData,
+          goodsList: tempList,
+        });
+      },
+    },
+  },
+
+  data: {
+    goodList: [],
+  },
+  methods: {
+    onCard(e) {
+      const { item } = e.currentTarget.dataset;
+      if (item === 'cart') {
+        // 购物车
+        Navigator.gotoPage('/cart');
+      } else if (item === 'orderSure') {
+        // 结算页
+        this.triggerEvent('change', undefined);
+      }
+    },
+    onDelive() {
+      // 修改配送地址
+      Navigator.gotoPage('/address', { type: 'orderSure' });
+    },
+  },
+});

mini-program/pages/order/components/noGoods/noGoods.json

@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "usingComponents": {
+    "wr-order-card": "/pages/order/components/order-card/index",
+    "wr-goods-card": "/components/goods-card/index",
+    "wr-order-goods-card": "/pages/order/components/order-goods-card/index"
+  }
+}

mini-program/pages/order/components/noGoods/noGoods.wxml

@@ -0,0 +1,53 @@
+<wxs src="./noGood.wxs" module="order" />
+
+<view class="goods-fail">
+  <block wx:if="{{settleDetailData.limitGoodsList && settleDetailData.limitGoodsList.length >0}}">
+    <view class="title">限购商品信息</view>
+    <view class="info">以下商品限购数量，建议您修改商品数量</view>
+  </block>
+  <block
+    wx:elif="{{settleDetailData.abnormalDeliveryGoodsList && settleDetailData.abnormalDeliveryGoodsList.length >0}}"
+  >
+    <view class="title">不支持配送</view>
+    <view class="info">以下店铺的商品不支持配送，请更改地址或去掉对应店铺商品再进行结算</view>
+  </block>
+  <block wx:elif="{{order.isShowKeepPay(settleDetailData)}}">
+    <view class="title">部分商品库存不足或失效</view>
+    <view class="info">请返回购物车重新选择商品，如果继续结算将自动忽略库存不足或失效的商品。</view>
+  </block>
+  <block wx:elif="{{settleDetailData.inValidGoodsList && settleDetailData.inValidGoodsList.length > 0}}">
+    <view class="title">全部商品库存不足或失效</view>
+    <view class="info">请返回购物车重新选择商品</view>
+  </block>
+  <scroll-view
+    scroll-y="true"
+    style="max-height: 500rpx"
+    bindscrolltoupper="upper"
+    bindscrolltolower="lower"
+    bindscroll="scroll"
+  >
+    <view class="goods-list" wx:for="{{goodsList}}" wx:for-item="goods" wx:key="index">
+      <wr-order-card wx:if="{{goods}}" order="{{goods}}">
+        <wr-order-goods-card
+          wx:for="{{goods.unSettlementGoods}}"
+          wx:key="id"
+          wx:for-item="goods"
+          wx:for-index="gIndex"
+          goods="{{goods}}"
+          no-top-line="{{gIndex === 0}}"
+        />
+      </wr-order-card>
+    </view>
+  </scroll-view>
+  <view class="goods-fail-btn">
+    <view bindtap="onCard" data-item="cart" class="btn {{order.isOnlyBack(settleDetailData) ? 'limit' : ''}}">
+      返回购物车
+    </view>
+    <view wx:if="{{order.isShowChangeAddress(settleDetailData)}}" bindtap="onDelive" class="btn origin">
+      修改配送地址
+    </view>
+    <view wx:elif="{{order.isShowKeepPay(settleDetailData)}}" bindtap="onCard" data-item="orderSure" class="btn origin">
+      继续结算
+    </view>
+  </view>
+</view>

mini-program/pages/order/components/noGoods/noGoods.wxss

@@ -0,0 +1,68 @@
+/* 层级定义
+@z-index-0: 1;
+@z-index-1: 100;
+@z-index-2: 200;
+@z-index-5: 500;
+@z-index-component: 1000; // 通用组件级别
+@z-index-dropdown: @z-index-component;
+@z-index-sticky: @z-index-component + 20;
+@z-index-fixed: @z-index-component + 30;
+@z-index-modal-backdrop:@z-index-component + 40;
+@z-index-modal:@z-index-component + 50;
+@z-index-popover:@z-index-component + 60;
+@z-index-tooltip:@z-index-component + 70;
+*/
+/* var() css变量适配*/
+.goods-fail {
+  display: block;
+  background: #fff;
+  font-size: 30rpx;
+  border-radius: 20rpx 20rpx 0 0;
+}
+.goods-fail .title {
+  display: inline-block;
+  width: 100%;
+  text-align: center;
+  margin-top: 30rpx;
+  line-height: 42rpx;
+  font-weight: bold;
+  font-size: 32rpx;
+}
+.goods-fail .info {
+  display: block;
+  font-size: 26rpx;
+  font-weight: 400;
+  line-height: 36rpx;
+  margin: 20rpx auto 10rpx;
+  text-align: center;
+  width: 560rpx;
+  color: #999;
+}
+.goods-fail .goods-fail-btn {
+  display: flex;
+  padding: 30rpx;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 30rpx;
+}
+.goods-fail .goods-fail-btn .btn {
+  width: 330rpx;
+  height: 80rpx;
+  line-height: 80rpx;
+  border-radius: 8rpx;
+  text-align: center;
+  border: 1rpx solid #999;
+  background: #fff;
+  font-size: 32rpx;
+  color: #666;
+}
+.goods-fail .goods-fail-btn .btn.origin,
+.goods-fail .goods-fail-btn .btn.limit {
+  color: #fa550f;
+  color: var(--color-primary, #fa550f);
+  border: 1rpx solid #fa550f;
+  border: 1rpx solid var(--color-primary, #fa550f);
+}
+.goods-fail .goods-fail-btn .btn.limit {
+  flex-grow: 1;
+}

mini-program/pages/order/components/order-button-bar/index.js

@@ -0,0 +1,210 @@
+import Toast from 'tdesign-miniprogram/toast/index';
+import Dialog from 'tdesign-miniprogram/dialog/index';
+import { OrderButtonTypes } from '../../config';
+
+Component({
+  options: {
+    addGlobalClass: true,
+  },
+  properties: {
+    order: {
+      type: Object,
+      observer(order) {
+        // 判定有传goodsIndex ，则认为是商品button bar, 仅显示申请售后按钮
+        if (this.properties?.goodsIndex !== null) {
+          const goods = order.goodsList[Number(this.properties.goodsIndex)];
+          this.setData({
+            buttons: {
+              left: [],
+              right: (goods.buttons || []).filter((b) => b.type == OrderButtonTypes.APPLY_REFUND),
+            },
+          });
+          return;
+        }
+        // 订单的button bar 不显示申请售后按钮
+        const buttonsRight = (order.buttons || [])
+          // .filter((b) => b.type !== OrderButtonTypes.APPLY_REFUND)
+          .map((button) => {
+            //邀请好友拼团按钮
+            if (button.type === OrderButtonTypes.INVITE_GROUPON && order.groupInfoVo) {
+              const {
+                groupInfoVo: { groupId, promotionId, remainMember, groupPrice },
+                goodsList,
+              } = order;
+              const goodsImg = goodsList[0] && goodsList[0].imgUrl;
+              const goodsName = goodsList[0] && goodsList[0].name;
+              return {
+                ...button,
+                openType: 'share',
+                dataShare: {
+                  goodsImg,
+                  goodsName,
+                  groupId,
+                  promotionId,
+                  remainMember,
+                  groupPrice,
+                  storeId: order.storeId,
+                },
+              };
+            }
+            return button;
+          });
+        // 删除订单按钮单独挪到左侧
+        const deleteBtnIndex = buttonsRight.findIndex((b) => b.type === OrderButtonTypes.DELETE);
+        let buttonsLeft = [];
+        if (deleteBtnIndex > -1) {
+          buttonsLeft = buttonsRight.splice(deleteBtnIndex, 1);
+        }
+        this.setData({
+          buttons: {
+            left: buttonsLeft,
+            right: buttonsRight,
+          },
+        });
+      },
+    },
+    goodsIndex: {
+      type: Number,
+      value: null,
+    },
+    isBtnMax: {
+      type: Boolean,
+      value: false,
+    },
+  },
+
+  data: {
+    order: {},
+    buttons: {
+      left: [],
+      right: [],
+    },
+  },
+
+  methods: {
+    // 点击【订单操作】按钮，根据按钮类型分发
+    onOrderBtnTap(e) {
+      const { type } = e.currentTarget.dataset;
+      switch (type) {
+        case OrderButtonTypes.DELETE:
+          this.onDelete(this.data.order);
+          break;
+        case OrderButtonTypes.CANCEL:
+          this.onCancel(this.data.order);
+          break;
+        case OrderButtonTypes.CONFIRM:
+          this.onConfirm(this.data.order);
+          break;
+        case OrderButtonTypes.PAY:
+          this.onPay(this.data.order);
+          break;
+        case OrderButtonTypes.APPLY_REFUND:
+          this.onApplyRefund(this.data.order);
+          break;
+        case OrderButtonTypes.VIEW_REFUND:
+          this.onViewRefund(this.data.order);
+          break;
+        case OrderButtonTypes.COMMENT:
+          this.onAddComment(this.data.order);
+          break;
+        case OrderButtonTypes.INVITE_GROUPON:
+          //分享邀请好友拼团
+          break;
+        case OrderButtonTypes.REBUY:
+          this.onBuyAgain(this.data.order);
+      }
+    },
+
+    onCancel() {
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message: '你点击了取消订单',
+        icon: 'check-circle',
+      });
+    },
+
+    onConfirm() {
+      Dialog.confirm({
+        title: '确认是否已经收到货？',
+        content: '',
+        confirmBtn: '确认收货',
+        cancelBtn: '取消',
+      })
+        .then(() => {
+          Toast({
+            context: this,
+            selector: '#t-toast',
+            message: '你确认了确认收货',
+            icon: 'check-circle',
+          });
+        })
+        .catch(() => {
+          Toast({
+            context: this,
+            selector: '#t-toast',
+            message: '你取消了确认收货',
+            icon: 'check-circle',
+          });
+        });
+    },
+
+    onPay() {
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message: '你点击了去支付',
+        icon: 'check-circle',
+      });
+    },
+
+    onBuyAgain() {
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message: '你点击了再次购买',
+        icon: 'check-circle',
+      });
+    },
+
+    onApplyRefund(order) {
+      const goods = order.goodsList[this.properties.goodsIndex];
+      const params = {
+        orderNo: order.orderNo,
+        skuId: goods?.skuId ?? '19384938948343',
+        spuId: goods?.spuId ?? '28373847384343',
+        orderStatus: order.status,
+        logisticsNo: order.logisticsNo,
+        price: goods?.price ?? 89,
+        num: goods?.num ?? 89,
+        createTime: order.createTime,
+        orderAmt: order.totalAmount,
+        payAmt: order.amount,
+        canApplyReturn: true,
+      };
+      const paramsStr = Object.keys(params)
+        .map((k) => `${k}=${params[k]}`)
+        .join('&');
+      wx.navigateTo({ url: `/pages/order/apply-service/index?${paramsStr}` });
+    },
+
+    onViewRefund() {
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message: '你点击了查看退款',
+        icon: '',
+      });
+    },
+
+    /** 添加订单评论 */
+    onAddComment(order) {
+      const imgUrl = order?.goodsList?.[0]?.thumb;
+      const title = order?.goodsList?.[0]?.title;
+      const specs = order?.goodsList?.[0]?.specs;
+      wx.navigateTo({
+        url: `/pages/goods/comments/create/index?specs=${specs}&title=${title}&orderNo=${order?.orderNo}&imgUrl=${imgUrl}`,
+      });
+    },
+  },
+});

mini-program/pages/order/components/order-button-bar/index.json

@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-button": "tdesign-miniprogram/button/button",
+    "t-toast": "tdesign-miniprogram/toast/toast",
+    "t-dialog": "tdesign-miniprogram/dialog/dialog"
+  }
+}

mini-program/pages/order/components/order-button-bar/index.wxml

@@ -0,0 +1,37 @@
+<view class="btn-bar">
+  <view class="left">
+    <t-button
+      wx:for="{{buttons.left}}"
+      wx:key="type"
+      wx:for-item="leftBtn"
+      size="extra-small"
+      shape="round"
+      t-class="{{isBtnMax ? 't-button--max':'t-button'}}  order-btn delete-btn"
+      hover-class="order-btn--active"
+      catchtap="onOrderBtnTap"
+      data-type="{{leftBtn.type}}"
+    >
+      {{leftBtn.name}}
+    </t-button>
+  </view>
+  <view class="right">
+    <t-button
+      wx:for="{{buttons.right}}"
+      wx:key="type"
+      wx:for-item="rightBtn"
+      size="extra-small"
+      variant="{{ rightBtn.primary ? 'base' : 'outline'}}"
+      shape="round"
+      t-class="{{isBtnMax ? 't-button--max':'t-button'}} order-btn {{rightBtn.primary ? 'primary' : 'normal'}}"
+      hover-class="order-btn--active"
+      catchtap="onOrderBtnTap"
+      data-type="{{rightBtn.type}}"
+      open-type="{{ rightBtn.openType }}"
+      data-share="{{ rightBtn.dataShare }}"
+    >
+      {{rightBtn.name}}
+    </t-button>
+  </view>
+</view>
+<t-toast id="t-toast" />
+<t-dialog id="t-dialog" />

mini-program/pages/order/components/order-button-bar/index.wxss

@@ -0,0 +1,54 @@
+:host {
+  width: 100%;
+}
+.btn-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  line-height: 1;
+}
+.btn-bar .order-btn {
+  line-height: 1;
+  /* border-radius: unset; */
+  /* min-width: 160rpx; */
+}
+
+.btn-bar .right {
+  display: flex;
+  align-items: center;
+}
+.btn-bar .t-button {
+  width: 160rpx;
+  font-weight: 400;
+  margin-left: 24rpx;
+}
+.btn-bar .t-button--max {
+  width: 176rpx;
+  margin-left: 24rpx;
+
+  --td-button-extra-small-height: 72rpx;
+}
+
+.btn-bar .left .delete-btn {
+  font-size: 22rpx;
+}
+.btn-bar .left .delete-btn::after {
+  display: none;
+}
+
+.btn-bar .right .normal {
+  --td-button-default-color: #333333;
+  --td-button-default-border-color: #dddddd;
+}
+
+.btn-bar .right .primary {
+  --td-button-default-color: #fff;
+  --td-button-default-bg-color: #fa4126;
+  --td-button-default-border-color: #fa4126;
+  --td-button-default-active-bg-color: #fa42269c;
+}
+
+.t-button {
+  --td-button-default-color: #000;
+  --td-button-primary-text-color: #fa4126;
+}

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

@@ -0,0 +1,90 @@
+Component({
+  externalClasses: ['wr-class', 'header-class', 'title-class'],
+
+  options: {
+    multipleSlots: true,
+  },
+
+  relations: {
+    '../order-goods-card/index': {
+      type: 'descendant',
+      linked(target) {
+        this.children.push(target);
+        this.setHidden();
+      },
+      unlinked(target) {
+        this.children = this.children.filter((item) => item !== target);
+      },
+    },
+    '../goods-card/index': {
+      type: 'descendant',
+      linked(target) {
+        this.children.push(target);
+        this.setHidden();
+      },
+      unlinked(target) {
+        this.children = this.children.filter((item) => item !== target);
+      },
+    },
+    '../specs-goods-card/index': {
+      type: 'descendant',
+      linked(target) {
+        this.children.push(target);
+        this.setHidden();
+      },
+      unlinked(target) {
+        this.children = this.children.filter((item) => item !== target);
+      },
+    },
+  },
+
+  created() {
+    this.children = [];
+  },
+
+  properties: {
+    order: {
+      type: Object,
+      observer(order) {
+        if (!order?.goodsList) return;
+        const goodsCount = order.goodsList.length;
+        this.setData({
+          goodsCount,
+        });
+      },
+    },
+    useTopRightSlot: Boolean,
+    //  初始显示的商品数量，超出部分会隐藏。
+    defaultShowNum: {
+      type: null,
+      value: 10,
+    },
+    useLogoSlot: {
+      type: Boolean,
+      value: false,
+    },
+  },
+
+  data: {
+    showAll: true, // 是否展示所有商品，设置为false，可以使用展开更多功能
+    goodsCount: 0,
+  },
+
+  methods: {
+    setHidden() {
+      const isHidden = !this.data.showAll;
+      this.children.forEach(
+        (c, i) => i >= this.properties.defaultShowNum && c.setHidden(isHidden),
+      );
+    },
+
+    onOrderCardTap() {
+      this.triggerEvent('cardtap');
+    },
+
+    onShowMoreTap() {
+      this.setData({ showAll: true }, () => this.setHidden());
+      this.triggerEvent('showall');
+    },
+  },
+});

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

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

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

@@ -0,0 +1,30 @@
+<view class="order-card wr-class" bind:tap="onOrderCardTap">
+	<view class="header header-class">
+		<view class="store-name title-class">
+			<block wx:if="{{!useLogoSlot}}">
+				<t-image wx:if="{{order.storeLogo}}" t-class="store-name__logo" src="{{order.storeLogo}}" />
+				<t-icon
+				 wx:else
+				 prefix="wr"
+				 class="store-name__logo"
+				 name="store"
+				 size="inherit"
+				 color="inherit"
+				/>
+				<view class="store-name__label">{{order.storeName}}</view>
+			</block>
+			<slot wx:else name="top-left" />
+		</view>
+		<view wx:if="{{!useTopRightSlot}}" class="order-status">{{order.statusDesc}}</view>
+		<slot wx:else name="top-right" />
+	</view>
+	<view class="slot-wrapper">
+		<slot/>
+	</view>
+	<view wx:if="{{goodsCount > defaultShowNum && !showAll}}" class="more-mask" catchtap="onShowMoreTap">
+		展开商品信息（共 {{goodsCount}} 个）
+		<t-icon name="chevron-down" size="32rpx" />
+	</view>
+	<slot name="more" />
+</view>
+

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

@@ -0,0 +1,45 @@
+.order-card {
+  margin: 24rpx 0;
+  padding: 24rpx 32rpx 24rpx;
+  background-color: white;
+  border-radius: 8rpx;
+}
+.order-card .header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24rpx;
+}
+.order-card .header .store-name {
+  font-size: 28rpx;
+  font-weight: normal;
+  color: #333333;
+  display: flex;
+  align-items: center;
+  line-height: 40rpx;
+}
+.order-card .header .store-name__logo {
+  margin-right: 16rpx;
+  font-size: 40rpx;
+  width: 48rpx;
+  height: 48rpx;
+}
+.order-card .header .store-name__label {
+  max-width: 500rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  white-space: nowrap;
+}
+.order-card .header .order-status {
+  font-size: 26rpx;
+  line-height: 40rpx;
+  color: #fa4126;
+}
+.order-card .more-mask {
+  padding: 20rpx 0;
+  text-align: center;
+  background-color: white;
+  color: #fa4126;
+  font-size: 24rpx;
+}

mini-program/pages/order/components/order-goods-card/index.js

@@ -0,0 +1,43 @@
+Component({
+  options: {
+    addGlobalClass: true,
+    multipleSlots: true, // 在组件定义时的选项中启用多slot支持
+  },
+
+  relations: {
+    '../order-card/index': {
+      type: 'ancestor',
+      linked(target) {
+        this.parent = target;
+      },
+    },
+  },
+
+  properties: {
+    goods: Object,
+    thumbWidth: Number,
+    thumbHeight: Number,
+    thumbWidthInPopup: Number,
+    thumbHeightInPopup: Number,
+    noTopLine: Boolean,
+    step: Boolean,
+    stepDisabled: Boolean,
+  },
+
+  data: {
+    goods: {},
+    hidden: false,
+  },
+
+  methods: {
+    setHidden(hidden) {
+      if (this.data.hidden === hidden) return;
+      this.setData({ hidden });
+    },
+
+    onNumChange(e) {
+      const { value } = e.detail;
+      this.triggerEvent('num-change', { value });
+    },
+  },
+});

mini-program/pages/order/components/order-goods-card/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-stepper": "tdesign-miniprogram/stepper/stepper",
+    "goods-card": "../specs-goods-card/index"
+  }
+}

mini-program/pages/order/components/order-goods-card/index.wxml

@@ -0,0 +1,29 @@
+<goods-card
+  class="order-goods-card {{ step ? 'order-goods-card--step' : '' }}"
+  wx:if="{{!hidden}}"
+  data="{{goods}}"
+  thumb-width="{{thumbWidth}}"
+  thumb-height="{{thumbHeight}}"
+  thumb-width-in-popup="{{thumbWidthInPopup}}"
+  thumb-height-in-popup="{{thumbHeightInPopup}}"
+>
+  <t-stepper
+    wx:if="{{ step }}"
+    slot="append-body"
+    disabled="{{ step ? stepDisabled : ''}}"
+    value="{{goods.quantity}}"
+    min="{{ 1 }}"
+    theme="filled"
+    bindminus="onNumChange"
+    bindplus="onNumChange"
+    bindblur="onNumChange"
+  />
+  <!-- 透传good-card组件的slot -->
+  <slot name="thumb-cover" slot="thumb-cover" />
+  <slot name="after-title" slot="after-title" />
+  <slot name="after-desc" slot="after-desc" />
+  <slot name="price-prefix" slot="price-prefix" />
+  <slot name="append-body" slot="append-body" />
+  <slot name="footer" slot="footer" />
+  <slot name="append-card" slot="append-card" />
+</goods-card>

mini-program/pages/order/components/reason-sheet/index.js

@@ -0,0 +1,114 @@
+Component({
+  properties: {
+    show: Boolean,
+    title: String,
+    options: {
+      type: Object,
+      observer() {
+        this.init();
+      },
+    },
+    multiple: {
+      type: Boolean,
+      observer() {
+        this.init();
+      },
+    },
+    showConfirmButton: Boolean,
+    showCloseButton: Boolean,
+    confirmButtonText: {
+      type: String,
+      value: '确定',
+    },
+    cancelButtonText: {
+      type: String,
+      value: '取消',
+    },
+    emptyTip: {
+      type: String,
+      value: '请选择',
+    },
+  },
+
+  data: {
+    _options: [],
+    checkedIndexes: [],
+  },
+
+  methods: {
+    attached() {
+      this.toast = this.selectComponent('#t-toast');
+    },
+
+    init() {
+      const checkedIndexes = [];
+      const _options = this.properties.options.map((opt, i) => {
+        const checked = !!opt.checked;
+        if (checked) {
+          if (this.properties.multiple) checkedIndexes[0] = i;
+          else checkedIndexes.push(i);
+        }
+        return {
+          title: opt.title,
+          checked,
+        };
+      });
+      this.setData({ checkedIndexes, _options });
+    },
+
+    onOptionTap(e) {
+      const { index } = e.currentTarget.dataset;
+      const { checkedIndexes } = this.data;
+      let data = {};
+      if (this.properties.multiple) {
+        if (checkedIndexes.includes(index)) {
+          checkedIndexes.splice(index, 1);
+          data = { checkedIndexes, [`_options[${index}].checked`]: false };
+        } else {
+          checkedIndexes.push(index);
+          data = { checkedIndexes, [`_options[${index}].checked`]: true };
+        }
+      } else {
+        if (checkedIndexes[0] === index) {
+          // 单选不可取消选择
+          return;
+        }
+        data = {
+          [`_options[${index}].checked`]: true,
+          checkedIndexes: [index],
+        };
+        if (checkedIndexes[0] !== undefined) {
+          data[`_options[${checkedIndexes[0]}].checked`] = false;
+        }
+      }
+      this.setData(data);
+      this.triggerEvent('select', { index });
+      this._onOptionTap && this._onOptionTap(index);
+      if (!this.properties.showConfirmButton && !this.properties.multiple) {
+        // 没有确认按钮且是单选的情况下，选择选项则自动确定
+        this._onConfirm && this._onConfirm([index]);
+        this.setData({ show: false });
+      }
+    },
+
+    onCancel() {
+      this.triggerEvent('cancel');
+      this._onCancel && this._onCancel();
+      this.setData({ show: false });
+    },
+
+    onConfirm() {
+      if (this.data.checkedIndexes.length === 0) {
+        this.toast.show({
+          icon: '',
+          text: this.properties.emptyTip,
+        });
+        return;
+      }
+      const indexed = this.data.checkedIndexes;
+      this.triggerEvent('confirm', { indexed });
+      this._onConfirm && this._onConfirm(indexed);
+      this.setData({ show: false });
+    },
+  },
+});

mini-program/pages/order/components/reason-sheet/index.json

@@ -0,0 +1,10 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-icon": "tdesign-miniprogram/icon/icon",
+    "t-popup": "tdesign-miniprogram/popup/popup",
+    "t-cell": "tdesign-miniprogram/cell/cell",
+    "t-toast": "tdesign-miniprogram/toast/toast",
+    "t-button": "tdesign-miniprogram/button/button"
+  }
+}

mini-program/pages/order/components/reason-sheet/index.wxml

@@ -0,0 +1,50 @@
+<t-popup
+ visible="{{show}}"
+ placement="bottom"
+ bind:visible-change="onCancel"
+ close-btn="{{showCloseButton}}"
+>
+	<view class="popup-content">
+		<view class="header">
+			{{title}}
+		</view>
+		<view class="options">
+			<t-cell
+			 wx:for="{{_options}}"
+			 wx:key="title"
+			 t-class="cell"
+			 title="{{item.title}}"
+			 bindclick="onOptionTap"
+			 data-index="{{index}}"
+			 border="{{false}}"
+			>
+				<view slot="right-icon">
+					<t-icon
+					 name="check-circle-filled"
+					 size="36rpx"
+					 color="#fa4126"
+					 wx:if="{{item.checked}}"
+					/>
+					<t-icon
+					 name="circle"
+					 size="36rpx"
+					 color="#C7C7C7"
+					 wx:else
+					/>
+				</view>
+			</t-cell>
+		</view>
+		<view class="button-bar" wx:if="{{showConfirmButton}}">
+			<t-button
+			 class="btnWrapper"
+			 wx:if="{{showConfirmButton}}"
+			 t-class="btn"
+			 bindtap="onConfirm"
+			>
+				{{confirmButtonText}}
+			</t-button>
+		</view>
+	</view>
+</t-popup>
+<t-toast id="t-toast" />
+

mini-program/pages/order/components/reason-sheet/index.wxss

@@ -0,0 +1,47 @@
+page view {
+  box-sizing: border-box;
+}
+.popup-content {
+  background-color: white;
+  color: #222427;
+  border-radius: 20rpx 20rpx 0 0;
+  overflow: hidden;
+}
+.popup-content .header {
+  height: 100rpx;
+  line-height: 100rpx;
+  text-align: center;
+  vertical-align: middle;
+  font-size: 32rpx;
+  font-weight: bold;
+  position: relative;
+}
+.popup-content .options {
+  max-height: 60vh;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+}
+.popup-content .options .cell {
+  height: 100rpx;
+  align-items: center;
+  font-size: 30rpx;
+  color: #333333;
+}
+.popup-content .button-bar {
+  width: 100%;
+  padding: 20rpx 30rpx;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+}
+.popup-content .button-bar .btn {
+  width: 100%;
+  background: #fa4126;
+  color: #fff;
+  border-radius: 48rpx;
+}
+.button-bar .btnWrapper {
+  width: 100%;
+}

mini-program/pages/order/components/reason-sheet/reasonSheet.js

@@ -0,0 +1,25 @@
+function getInstance(context, selector = '#wr-reason-sheet') {
+  if (!context) {
+    const pages = getCurrentPages();
+    const page = pages[pages.length - 1];
+    context = page;
+  }
+  const instance = context && context.selectComponent(selector);
+  if (!instance) {
+    console.warn(`未找到reason-sheet组件,请检查selector是否正确`);
+    return null;
+  }
+  return instance;
+}
+
+export default function (options) {
+  const { context, selector, ..._options } = options;
+  return new Promise((resolve, reject) => {
+    const instance = getInstance(context, selector);
+    if (instance) {
+      instance.setData(Object.assign({}, _options));
+      instance._onCancel = () => reject();
+      instance._onConfirm = (indexes) => resolve(indexes);
+    }
+  });
+}

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

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;

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

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

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

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

mini-program/pages/order/components/specs-goods-card/index.js

@@ -0,0 +1,132 @@
+Component({
+  options: {
+    addGlobalClass: true,
+    multipleSlots: true, // 在组件定义时的选项中启用多slot支持
+  },
+
+  externalClasses: [
+    'title-class',
+    'desc-class',
+    'num-class',
+    'thumb-class',
+    'specs-class',
+    'price-class',
+    'origin-price-class',
+    'price-prefix-class',
+  ],
+
+  relations: {
+    '../order-card/index': {
+      type: 'ancestor',
+      linked(target) {
+        this.parent = target;
+      },
+    },
+  },
+
+  properties: {
+    id: String,
+    hidden: {
+      // 设置为null代表不做类型转换
+      type: null,
+      observer(hidden) {
+        // null就是代表没有设置，没有设置的话不setData，防止祖先组件触发的setHidden操作被覆盖
+        if (hidden !== null) {
+          this.setHidden(!!hidden);
+        }
+      },
+    },
+    data: Object,
+    layout: {
+      type: String,
+      value: 'horizontal',
+    },
+    thumbMode: {
+      type: String,
+      value: 'aspectFill',
+    },
+    thumbWidth: Number,
+    thumbHeight: Number,
+    thumbWidthInPopup: Number,
+    thumbHeightInPopup: Number,
+    priceFill: {
+      type: Boolean,
+      value: true,
+    },
+    currency: {
+      type: String,
+      value: '¥',
+    },
+    lazyLoad: Boolean,
+    centered: Boolean,
+    showCart: Boolean,
+    pricePrefix: String,
+    cartSize: {
+      type: Number,
+      value: 48,
+    },
+    cartColor: {
+      type: String,
+      value: '#FA550F',
+    },
+    disablePopup: Boolean,
+  },
+
+  data: {
+    hiddenInData: false,
+    specsPopup: {
+      insert: false,
+      show: false,
+    },
+  },
+
+  currentInTapSpecs: false,
+
+  lifetimes: {
+    ready() {
+      const { hidden } = this.properties;
+      if (hidden !== null) {
+        this.setHidden(!!hidden);
+      }
+    },
+  },
+
+  methods: {
+    closeSpecsPopup() {
+      this.setData({
+        'specsPopup.show': false,
+      });
+      this.triggerEvent('specsclose', { good: this.properties.data });
+    },
+
+    removeSpecsPopup() {
+      this.setData({
+        'specsPopup.insert': false,
+      });
+    },
+
+    onClick(e) {
+      if (this.currentInTapSpecs) {
+        this.currentInTapSpecs = false;
+        return;
+      }
+      this.triggerEvent('click', e.detail);
+    },
+
+    onClickThumb(e) {
+      this.triggerEvent('thumb', e.detail);
+    },
+
+    onClickTag(e) {
+      this.triggerEvent('tag', e.detail);
+    },
+
+    onClickCart(e) {
+      this.triggerEvent('add-cart', e.detail);
+    },
+
+    setHidden(hidden) {
+      this.setData({ hiddenInData: !!hidden });
+    },
+  },
+});

mini-program/pages/order/components/specs-goods-card/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "goods-card": "../goods-card/index"
+  }
+}

mini-program/pages/order/components/specs-goods-card/index.wxml

@@ -0,0 +1,40 @@
+<goods-card
+ class="wr-specs-goods-card"
+ id="{{id}}"
+ layout="{{layout}}"
+ data="{{data}}"
+ currency="{{currency}}"
+ price-fill="{{priceFill}}"
+ lazy-load="{{lazyLoad}}"
+ centered="{{centered}}"
+ thumb-mode="{{thumbMode}}"
+ thumb-width="{{thumbWidth}}"
+ thumb-height="{{thumbHeight}}"
+ show-cart="{{showCart}}"
+ cart-size="{{cartSize}}"
+ cart-color="{{cartColor}}"
+ card-class="{{index === goodsList.length - 1 ? 'wr-goods-card__no-border' : 'wr-goods-card'}}"
+ title-class="title-class"
+ desc-class="desc-class"
+ num-class="num-class"
+ thumb-class="thumb-class"
+ specs-class="specs-class"
+ price-class="price-class"
+ origin-price-class="origin-price-class"
+ price-prefix-class="price-prefix-class"
+ bind:thumb="onClickThumb"
+ bind:tag="onClickTag"
+ bind:add-cart="onClickCart"
+ bind:click="onClick"
+ hidden="{{hiddenInData}}"
+>
+	<!-- 透传good-card组件的slot -->
+	<slot name="thumb-cover" slot="thumb-cover" />
+	<slot name="after-title" slot="after-title" />
+	<slot name="after-desc" slot="after-desc" />
+	<slot name="price-prefix" slot="price-prefix" />
+	<slot name="append-body" slot="append-body" />
+	<slot name="footer" slot="footer" />
+	<slot name="append-card" slot="append-card" />
+</goods-card>
+

mini-program/pages/order/config.js

@@ -0,0 +1,94 @@
+export const OrderStatus = {
+  PENDING_PAYMENT: 5, // 待支付
+  PENDING_DELIVERY: 10, // 待发货
+  PENDING_RECEIPT: 40, // 待收货
+  COMPLETE: 50, // 已完成/待评价
+  PAYMENT_TIMEOUT: 80, // 已取消，支付超时
+  CANCELED_NOT_PAYMENT: 80, // 已取消，未支付主动取消
+  CANCELED_PAYMENT: 80, // 已取消，已支付主动取消
+  CANCELED_REJECTION: 80, // 已取消，拒收
+};
+
+// 售后状态 10:待审核,20:已审核,30:已收货,40:收货异常,50:已完成,60:已关闭;
+export const AfterServiceStatus = {
+  TO_AUDIT: 10, // 待审核
+  THE_APPROVED: 20, // 已审核
+  HAVE_THE_GOODS: 30, // 已收货
+  ABNORMAL_RECEIVING: 40, // 收货异常
+  COMPLETE: 50, // 已完成
+  CLOSED: 60, // 已关闭
+};
+
+// 售后类型
+export const ServiceType = {
+  RETURN_GOODS: 10, // 退货退款
+  ONLY_REFUND: 20, // 仅退款
+  ORDER_CANCEL: 30, // 支付后取消
+};
+
+export const ServiceTypeDesc = {
+  [ServiceType.RETURN_GOODS]: '退货',
+  [ServiceType.ONLY_REFUND]: '退款',
+  [ServiceType.ORDER_CANCEL]: '支付后取消',
+};
+
+// 订单按钮类型
+export const OrderButtonTypes = {
+  PAY: 1, // 付款
+  CANCEL: 2, // 取消订单
+  CONFIRM: 3, // 确认收货
+  APPLY_REFUND: 4, // 申请售后
+  VIEW_REFUND: 5, // 查看退款
+  COMMENT: 6, // 评价
+  DELETE: 7, // 删除订单
+  DELIVERY: 8, // 查看物流
+  REBUY: 9, // 再次购买
+  INVITE_GROUPON: 11, //邀请好友拼团
+};
+
+// 售后服务按钮类型
+export const ServiceButtonTypes = {
+  REVOKE: 2, // 撤销
+  FILL_TRACKING_NO: 3, // 填写运单号
+  CHANGE_TRACKING_NO: 4, // 修改运单号
+  VIEW_DELIVERY: 5, // 查看物流
+};
+
+// 售后状态
+export const ServiceStatus = {
+  PENDING_VERIFY: 100, //待审核
+  VERIFIED: 110, // 已审核待寄回商品
+  PENDING_DELIVERY: 120, // 等待买家寄回商品
+  PENDING_RECEIPT: 130, // 已寄回商品，待收货
+  RECEIVED: 140, // 已收货
+  EXCEPTION: 150, // 收货异常
+  REFUNDED: 160, // 已退款
+  CLOSED: 170, // 已关闭
+};
+
+// 售后收货状态
+export const ServiceReceiptStatus = {
+  RECEIPTED: 1, // 已收到货
+  NOT_RECEIPTED: 2, // 未收到货
+};
+
+// 物流节点
+export const LogisticsNodeTypes = {
+  SUBMITTED: 200001, // 已提交订单
+  PAYMENTED: 200002, // 已付款/已下单
+  SHIPPED: 200003, // 已发货
+  CANCELED: 200004, // 已取消
+  RECEIVED: 200005, // 已签收
+  ADDRESS_CHANGED: 200006, // 已修改地址
+  IN_TRANSIT: 200007, // 运输中
+};
+
+export const LogisticsIconMap = {
+  [LogisticsNodeTypes.SUBMITTED]: '',
+  [LogisticsNodeTypes.PAYMENTED]: 'credit_card',
+  [LogisticsNodeTypes.SHIPPED]: 'deliver',
+  [LogisticsNodeTypes.CANCELED]: '',
+  [LogisticsNodeTypes.RECEIVED]: 'check',
+  [LogisticsNodeTypes.ADDRESS_CHANGED]: '',
+  [LogisticsNodeTypes.IN_TRANSIT]: 'yunshuzhong',
+};

mini-program/pages/order/delivery-detail/index.js

@@ -0,0 +1,43 @@
+Page({
+  data: {
+    logisticsData: {
+      logisticsNo: '',
+      nodes: [],
+      company: '',
+      phoneNumber: '',
+    },
+    active: 0,
+  },
+
+  onLoad(query) {
+    let data;
+    try {
+      data = JSON.parse(decodeURIComponent(query.data || '{}'));
+    } catch (e) {
+      console.warn('物流节点数据解析失败', e);
+    }
+    if (Number(query.source) === 2) {
+      const service = {
+        company: data.logisticsCompanyName,
+        logisticsNo: data.logisticsNo,
+        nodes: data.nodes,
+      };
+      this.setData({
+        logisticsData: service,
+      });
+    } else if (data) {
+      this.setData({ logisticsData: data });
+    }
+  },
+
+  onLogisticsNoCopy() {
+    wx.setClipboardData({ data: this.data.logisticsData.logisticsNo });
+  },
+
+  onCall() {
+    const { phoneNumber } = this.data.logisticsData;
+    wx.makePhoneCall({
+      phoneNumber,
+    });
+  },
+});

mini-program/pages/order/delivery-detail/index.json

@@ -0,0 +1,11 @@
+{
+  "navigationBarTitleText": "物流信息",
+  "usingComponents": {
+    "t-cell": "tdesign-miniprogram/cell/cell",
+    "t-cell-group": "tdesign-miniprogram/cell-group/cell-group",
+    "t-image": "/components/webp-image/index",
+    "t-icon": "tdesign-miniprogram/icon/icon",
+    "t-steps": "tdesign-miniprogram/steps/steps",
+    "t-step": "tdesign-miniprogram/step-item/step-item"
+  }
+}

mini-program/pages/order/delivery-detail/index.wxml

@@ -0,0 +1,91 @@
+<wxs module="isUrl">
+	var isUrl = function(item) {
+	return item.indexOf('http') > -1;
+	}
+	module.exports = {
+	isUrl: isUrl,
+	}
+</wxs>
+
+<view class="page-section cells" wx:if="{{logisticsData.logisticsNo || logisticsData.company}}">
+	<t-cell-group>
+		<t-cell
+		  title="快递单号"
+		  t-class-title="wr-cell__title"
+		  t-class-note="wr-cell__value"
+		  t-class-left="order-group__left"
+		  wx:if="{{logisticsData.logisticsNo}}"
+		  bordered="{{false}}"
+		>
+			<text slot="note" class="logistics-no">{{logisticsData.logisticsNo}}</text>
+			<view
+			  slot="right-icon"
+			  class="text-btn"
+			  hover-class="text-btn--active"
+			  bindtap="onLogisticsNoCopy"
+			>复制
+			</view>
+		</t-cell>
+		<t-cell
+		  title="物流公司"
+		  t-class-title="wr-cell__title"
+		  t-class-note="wr-cell__value"
+		  t-class-left="order-group__left"
+		  bordered="{{false}}"
+		  wx:if="{{logisticsData.company}}"
+		  note="{{logisticsData.company + (logisticsData.phoneNumber ? '-' + logisticsData.phoneNumber : '')}}"
+		>
+			<view
+			  slot="right-icon"
+			  class="text-btn"
+			  hover-class="text-btn--active"
+			  bindtap="onCall"
+			  wx:if="{{logisticsData.phoneNumber}}"
+			>
+				拨打
+			</view>
+		</t-cell>
+	</t-cell-group>
+</view>
+<view class="page-section cell-steps">
+	<t-steps
+	  class="page-section__steps"
+	  t-class="steps"
+	  layout="vertical"
+	  current="{{active}}"
+	>
+		<t-step
+		  class="steps"
+		  t-class-title="step-title"
+		  wx:for="{{logisticsData.nodes}}"
+		  wx:for-item="item"
+		  wx:for-index="index"
+		  wx:key="index"
+		  title="{{item.title}}"
+		  icon="slot"
+		>
+			<block wx:if="{{isUrl.isUrl(item.icon)}}">
+				<t-image
+				  class="cell-steps__imgWrapper"
+				  slot="icon"
+				  t-class="cell-steps__img"
+				  src="{{item.icon}}"
+				/>
+			</block>
+			<block wx:else>
+				<t-icon
+				  slot="icon"
+				  size="32rpx"
+				  prefix="wr"
+				  color="{{index === 0 ? '#ef5433' : '#bbb'}}"
+				  name="{{item.icon}}"
+				/>
+			</block>
+			<view slot="content">
+				<view class="step-desc">{{item.desc}}</view>
+				<view class="step-date">{{item.date}}</view>
+			</view>
+		</t-step>
+	</t-steps>
+</view>
+

mini-program/pages/order/delivery-detail/index.wxss

@@ -0,0 +1,99 @@
+page {
+  background-color: #f5f5f5;
+}
+.page-section {
+  margin-top: 24rpx;
+  background-color: white;
+}
+.page-section .order-group__left {
+  margin-right: 0 !important;
+}
+.cell-steps {
+  padding: 8rpx;
+}
+.wr-cell__title {
+  flex: none;
+  font-size: 28rpx;
+  color: #666;
+}
+.wr-cell__value {
+  flex: auto;
+  margin-left: 30rpx;
+  font-size: 28rpx;
+  color: #333 !important;
+}
+.logistics-no {
+  display: inline-block;
+  text-align: left;
+  word-break: break-all;
+  color: #333;
+}
+.text-btn {
+  margin-left: 20rpx;
+  display: inline;
+  font-size: 24rpx;
+  padding: 0 15rpx;
+  border: 1rpx solid #ddd;
+  border-radius: 28rpx;
+  color: #333;
+}
+.text-btn--active {
+  opacity: 0.5;
+}
+.steps .step-title {
+  font-weight: bold;
+  color: #333 !important;
+  font-size: 30rpx;
+}
+.steps .step-desc {
+  color: #333333;
+  font-size: 28rpx;
+}
+.steps .step-date {
+  color: #999999;
+  font-size: 24rpx;
+}
+
+.cell-steps__img,
+.cell-steps__imgWrapper {
+  width: 48rpx;
+  height: 48rpx;
+}
+
+.steps
+  .t-step--vertical.t-step--default-anchor
+  .t-steps-item--process
+  .t-steps-item__icon-number {
+  background: #ffece9 !important;
+  color: white !important;
+  border: none;
+}
+
+.steps
+  .t-step--vertical.t-step--default-anchor
+  .t-steps-item--default
+  .t-steps-item__icon-number {
+  color: white !important;
+  background: #f5f5f5 !important;
+  border: none;
+}
+
+.steps
+  .t-step--vertical.t-step--default-anchor.t-step--not-last-child
+  .t-steps-item__inner::after {
+  top: 48rpx;
+  height: calc(100% - 44rpx - 4rpx);
+}
+
+.steps
+  .t-step--vertical.t-step--default-anchor.t-step--not-last-child
+  .t-steps-item__inner::after,
+.steps
+  .t-step--vertical.t-step--default-anchor.t-step--not-last-child
+  .t-steps-item--default
+  .t-steps-item__inner:after {
+  background: #f5f5f5 !important;
+}
+.page-section__steps {
+  padding: 24rpx;
+}

mini-program/pages/order/fill-tracking-no/api.js

@@ -0,0 +1,71 @@
+import { mockIp, mockReqId } from '../../../utils/mock';
+
+export function create() {
+  const _resq = {
+    data: null,
+    code: 'Success',
+    msg: null,
+    requestId: mockReqId(),
+    clientIp: mockIp(),
+    rt: 79,
+    success: true,
+  };
+  return Promise.resolve(_resq);
+}
+
+export function update() {
+  const _resq = {
+    data: null,
+    code: 'Success',
+    msg: null,
+    requestId: mockReqId(),
+    clientIp: mockIp(),
+    rt: 79,
+    success: true,
+  };
+  return Promise.resolve(_resq);
+}
+
+export function getDeliverCompanyList() {
+  const _resq = {
+    data: [
+      {
+        name: '中通快递',
+        code: '0001',
+      },
+      {
+        name: '申通快递',
+        code: '0002',
+      },
+      {
+        name: '圆通快递',
+        code: '0003',
+      },
+      {
+        name: '顺丰快递',
+        code: '0004',
+      },
+      {
+        name: '百世快递',
+        code: '0005',
+      },
+      {
+        name: '韵达快递',
+        code: '0006',
+      },
+      {
+        name: '邮政快递',
+        code: '0007',
+      },
+      {
+        name: '丰网快递',
+        code: '0008',
+      },
+      {
+        name: '顺丰直邮',
+        code: '0009',
+      },
+    ],
+  };
+  return Promise.resolve(_resq);
+}

mini-program/pages/order/fill-tracking-no/index.js

@@ -0,0 +1,190 @@
+import Dialog from 'tdesign-miniprogram/dialog/index';
+import Toast from 'tdesign-miniprogram/toast/index';
+import reasonSheet from '../components/reason-sheet/reasonSheet';
+import { getDeliverCompanyList, create, update } from './api';
+
+Page({
+  deliveryCompanyList: [],
+
+  data: {
+    trackingNo: '',
+    remark: '',
+    deliveryCompany: null,
+    submitActived: false,
+    submitting: false,
+  },
+  onLoad(query) {
+    const {
+      rightsNo = '',
+      logisticsNo = '',
+      logisticsCompanyName = '',
+      logisticsCompanyCode = '',
+      remark = '',
+    } = query;
+
+    if (!rightsNo) {
+      Dialog.confirm({
+        title: '请选择售后单？',
+        content: '',
+        confirmBtn: '确认',
+      }).then(() => {
+        wx.navigateBack({ backRefresh: true });
+      });
+    }
+    this.rightsNo = rightsNo;
+    if (logisticsNo) {
+      wx.setNavigationBarTitle({
+        title: '修改运单号',
+        fail() {},
+      });
+      this.isChange = true;
+      this.setData({
+        deliveryCompany: {
+          name: logisticsCompanyName,
+          code: logisticsCompanyCode,
+        },
+        trackingNo: logisticsNo,
+        remark,
+        submitActived: true,
+      });
+    }
+    this.setWatcher('trackingNo', this.checkParams.bind(this));
+    this.setWatcher('deliveryCompany', this.checkParams.bind(this));
+  },
+
+  setWatcher(key, callback) {
+    let lastData = this.data;
+    const keys = key.split('.');
+    keys.slice(0, -1).forEach((k) => {
+      lastData = lastData[k];
+    });
+    const lastKey = keys[keys.length - 1];
+    this.observe(lastData, lastKey, callback);
+  },
+
+  observe(data, k, callback) {
+    let val = data[k];
+    Object.defineProperty(data, k, {
+      configurable: true,
+      enumerable: true,
+      set: (value) => {
+        val = value;
+        callback();
+      },
+      get: () => {
+        return val;
+      },
+    });
+  },
+
+  getDeliveryCompanyList() {
+    if (this.deliveryCompanyList.length > 0) {
+      return Promise.resolve(this.deliveryCompanyList);
+    }
+    return getDeliverCompanyList().then((res) => {
+      this.deliveryCompanyList = res.data || [];
+      return this.deliveryCompanyList;
+    });
+  },
+
+  onInput(e) {
+    const { key } = e.currentTarget.dataset;
+    const { value } = e.detail;
+    this.setData({ [key]: value });
+  },
+
+  onCompanyTap() {
+    this.getDeliveryCompanyList().then((deliveryCompanyList) => {
+      reasonSheet({
+        show: true,
+        title: '选择物流公司',
+        options: deliveryCompanyList.map((company) => ({
+          title: company.name,
+          checked: this.data.deliveryCompany
+            ? company.code === this.data.deliveryCompany.code
+            : false,
+        })),
+        showConfirmButton: true,
+        showCancelButton: true,
+        emptyTip: '请选择物流公司',
+      }).then((indexes) => {
+        this.setData({
+          deliveryCompany: deliveryCompanyList[indexes[0]],
+        });
+      });
+    });
+  },
+
+  checkParams() {
+    const res = { errMsg: '', require: false };
+
+    if (!this.data.trackingNo) {
+      res.errMsg = '请填写运单号';
+      res.require = true;
+    } else if (!this.data.deliveryCompany) {
+      res.errMsg = '请选择物流公司';
+      res.require = true;
+    }
+    this.setData({ submitActived: !res.require });
+    return res;
+  },
+
+  onSubmit() {
+    const checkRes = this.checkParams();
+    if (checkRes.errMsg) {
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message: checkRes.errMsg,
+        icon: '',
+      });
+      return;
+    }
+
+    const {
+      trackingNo,
+      remark,
+      deliveryCompany: { code, name },
+    } = this.data;
+
+    const params = {
+      rightsNo: this.rightsNo,
+      logisticsCompanyCode: code,
+      logisticsCompanyName: name,
+      logisticsNo: trackingNo,
+      remark,
+    };
+    const api = this.isChange ? create : update;
+    this.setData({ submitting: true });
+    api(params)
+      .then(() => {
+        this.setData({ submitting: false });
+        Toast({
+          context: this,
+          selector: '#t-toast',
+          message: '保存成功',
+          icon: '',
+        });
+        setTimeout(() => wx.navigateBack({ backRefresh: true }), 1000);
+      })
+      .catch(() => {
+        this.setData({ submitting: false });
+      });
+  },
+
+  onScanTap() {
+    wx.scanCode({
+      scanType: ['barCode'],
+      success: (res) => {
+        Toast({
+          context: this,
+          selector: '#t-toast',
+          message: '扫码成功',
+          icon: '',
+        });
+        this.setData({ trackingNo: res.result });
+      },
+      fail: () => {},
+    });
+  },
+});

mini-program/pages/order/fill-tracking-no/index.json

@@ -0,0 +1,14 @@
+{
+  "navigationBarTitleText": "填写运单号",
+  "usingComponents": {
+    "t-icon": "tdesign-miniprogram/icon/icon",
+    "t-cell": "tdesign-miniprogram/cell/cell",
+    "t-cell-group": "tdesign-miniprogram/cell-group/cell-group",
+    "t-textarea": "tdesign-miniprogram/textarea/textarea",
+    "t-input": "tdesign-miniprogram/input/input",
+    "t-toast": "tdesign-miniprogram/toast/toast",
+    "t-dialog": "tdesign-miniprogram/dialog/dialog",
+    "t-button": "tdesign-miniprogram/button/button",
+    "ui-reason-sheet": "../components/reason-sheet/index"
+  }
+}

mini-program/pages/order/fill-tracking-no/index.wxml

@@ -0,0 +1,51 @@
+<view class="fill-tracking-no">
+  <view class="notice-bar">请填写正确的退货包裹运单信息，以免影响退款进度</view>
+  <view class="fill-tracking-no__form">
+    <t-cell-group>
+      <t-cell title="运单号" t-class-title="t-cell-title-width">
+        <t-input
+          slot="note"
+          borderless
+          t-class="t-cell__value"
+          type="text"
+          value="{{trackingNo}}"
+          maxlength="30"
+          placeholder="请输入物流单号"
+          bind:change="onInput"
+          data-key="trackingNo"
+        />
+
+        <t-icon slot="right-icon" name="scan" t-class="icon-scan" bindtap="onScanTap" />
+      </t-cell>
+      <t-cell
+        t-class-title="t-cell-title-width"
+        t-class-note="{{deliveryCompany && deliveryCompany.name ? 't-cell__value' : 't-cell__placeholder'}}"
+        title="物流公司"
+        note="{{deliveryCompany && deliveryCompany.name || '请选择物流公司'}}"
+        arrow
+        bindtap="onCompanyTap"
+      />
+    </t-cell-group>
+    <view class="textarea-wrapper">
+      <text>备注信息</text>
+    </view>
+    <t-textarea
+      t-class="t-textarea-wrapper"
+      type="text"
+      value="{{remark}}"
+      maxlength="140"
+      autosize
+      placeholder="选填项，如有多个包裹寄回，请注明其运单信息"
+      bind:change="onInput"
+      data-key="remark"
+    />
+  </view>
+  <view class="fill-tracking-no__button-bar">
+    <t-button t-class="btn {{ submitActived ? 'confirmBtn' : 'disabled' }}" loading="{{submitting}}" bindtap="onSubmit">
+      保存
+    </t-button>
+  </view>
+</view>
+<ui-reason-sheet id="wr-reason-sheet" />
+<t-toast id="t-toast" />
+<t-dialog id="t-dialog" />

mini-program/pages/order/fill-tracking-no/index.wxss

@@ -0,0 +1,103 @@
+@import '../../../style/theme.wxss';
+
+:host {
+  background-color: #f5f5f5;
+}
+
+.notice-bar {
+  padding: 24rpx 30rpx;
+  text-align: center;
+  font-size: 26rpx;
+  color: #e17349;
+  background: #fefcef;
+}
+
+.fill-tracking-no__form {
+  margin-top: 20rpx;
+}
+
+.fill-tracking-no__form .t-cell__note {
+  justify-content: flex-start;
+}
+
+.fill-tracking-no__form .t-cell__value {
+  color: #333 !important;
+  font-size: 30rpx;
+  text-align: left;
+  padding: 0;
+}
+
+.fill-tracking-no__form .t-cell__value::after {
+  border: none !important;
+}
+
+.fill-tracking-no__form .t-cell__value .t-textarea__wrapper {
+  padding: 0;
+}
+
+.fill-tracking-no__form .t-input__control,
+.fill-tracking-no__form .t-textarea__placeholder,
+.fill-tracking-no__form .t-cell__placeholder {
+  font-size: 30rpx !important;
+}
+
+.fill-tracking-no__form .t-textarea__placeholder,
+.fill-tracking-no__form .t-cell__placeholder {
+  color: #bbbbbb !important;
+}
+
+.t-textarea__note {
+  width: 100%;
+}
+
+.fill-tracking-no__button-bar {
+  margin: 38rpx 30rpx 0;
+}
+
+.fill-tracking-no__button-bar .btn {
+  background-color: transparent;
+  font-size: 32rpx;
+  width: 100%;
+  border-radius: 48rpx;
+}
+
+.fill-tracking-no__button-bar .btn:first-child {
+  margin-bottom: 20rpx;
+}
+
+.fill-tracking-no__button-bar .btn.confirmBtn {
+  background: #fa4126;
+  color: #fff;
+}
+
+.fill-tracking-no__button-bar .btn.disabled {
+  background-color: #c6c6c6;
+  color: #fff;
+}
+
+.t-cell-title-width {
+  width: 160rpx;
+  flex: none !important;
+}
+.textarea-wrapper {
+  background: #fff;
+  display: flex;
+  align-items: flex-start;
+  padding: 24rpx 32rpx 0 32rpx;
+}
+.t-textarea-wrapper {
+  box-sizing: border-box;
+}
+
+.fill-tracking-no__form .t-input__wrapper {
+  margin: 0 !important;
+}
+
+.fill-tracking-no__form {
+  --td-input-vertical-padding: 0;
+}
+
+.t-button {
+  --td-button-default-color: #aeb3b7;
+  --td-button-primary-text-color: #fa4126;
+}

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

@@ -0,0 +1,38 @@
+import { fetchOrderDetail } from '../../../services/order/orderDetail';
+
+Page({
+  data: {
+    invoice: {},
+  },
+  onLoad({ orderNo }) {
+    this.orderNo = orderNo;
+    this.init();
+  },
+  init() {
+    this.getDetail();
+  },
+  getDetail() {
+    const params = {
+      parameter: this.orderNo,
+    };
+    return fetchOrderDetail(params).then((res) => {
+      const order = res.data;
+
+      const invoice = {
+        buyerName: order?.invoiceVO?.buyerName, //个人或公司名称
+        buyerTaxNo: order?.invoiceVO?.buyerTaxNo, //税号
+        buyerPhone: order?.invoiceVO?.buyerPhone, //手机
+        email: order?.invoiceVO?.email, //邮箱
+        titleType: order?.invoiceVO?.titleType === 1 ? '个人' : '公司', //发票抬头 1-个人 2-公司
+        ontentType: order?.invoiceVO?.ontentType === 1 ? '商品明细' : '2类别', //发票内容 1-明细 2类别
+        invoiceType:
+          order?.invoiceVO?.invoiceType === 5 ? '电子普通发票' : '不开发票', //是否开票 0-不开 5-电子发票
+        isInvoice: order?.invoiceVO?.buyerName ? '已开票' : '未开票',
+        money: order?.invoiceVO?.money,
+      };
+      this.setData({
+        invoice,
+      });
+    });
+  },
+});

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

@@ -0,0 +1,8 @@
+{
+  "navigationBarTitleText": "发票详情",
+  "usingComponents": {
+    "t-cell": "tdesign-miniprogram/cell/cell",
+    "t-button": "tdesign-miniprogram/button/button",
+    "t-cell-group": "tdesign-miniprogram/cell-group/cell-group"
+  }
+}

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

@@ -0,0 +1,40 @@
+<view class="invoice-detail">
+  <view class="invoice-detail-box">
+    <view class="invoice-detail-title">发票详情</view>
+    <view class="invoice-detail-box-row">
+      <view class="invoice-detail-box-title">发票类型</view>
+      <view class="invoice-detail-box-value">{{invoice.invoiceType}}</view>
+    </view>
+    <view class="invoice-detail-box-row">
+      <view class="invoice-detail-box-title">发票抬头</view>
+      <view class="invoice-detail-box-value">{{invoice.buyerName}}</view>
+    </view>
+    <view class="invoice-detail-box-row">
+      <view class="invoice-detail-box-title">纳税人识别号</view>
+      <view class="invoice-detail-box-value">{{invoice.buyerTaxNo}}</view>
+    </view>
+    <view class="invoice-detail-box-row">
+      <view class="invoice-detail-box-title">发票内容</view>
+      <view class="invoice-detail-box-value">{{invoice.ontentType}}</view>
+    </view>
+     <view class="invoice-detail-box-row">
+      <view class="invoice-detail-box-title">发票金额</view>
+      <view class="invoice-detail-box-value">{{invoice.money}}</view>
+    </view>
+  </view>
+  <view class="invoice-detail-box">
+    <view class="invoice-detail-title">收票人信息</view>
+    <view class="invoice-detail-box-row">
+      <view class="invoice-detail-box-title">邮箱</view>
+      <view class="invoice-detail-box-value">{{invoice.email}}</view>
+    </view>
+    <view class="invoice-detail-box-row">
+      <view class="invoice-detail-box-title">手机号</view>
+      <view class="invoice-detail-box-value">{{invoice.buyerPhone}}</view>
+    </view>
+    <view class="invoice-detail-box-row">
+      <view class="invoice-detail-box-title">开票状态</view>
+      <view class="invoice-detail-box-value">{{invoice.isInvoice}}</view>
+    </view>
+  </view>
+</view>

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

@@ -0,0 +1,31 @@
+:host {
+  background-color: #f5f5f5;
+}
+
+.invoice-detail .invoice-detail-box {
+  background-color: #fff;
+  padding: 24rpx 32rpx;
+  margin-top: 24rpx;
+}
+
+.invoice-detail-title {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.invoice-detail-box-row {
+  display: flex;
+  margin-top: 44rpx;
+}
+
+.invoice-detail-box-title {
+  font-size: 13px;
+  color: #666666;
+  width: 156rpx;
+  margin-right: 32rpx;
+}
+
+.invoice-detail-box-value {
+  font-size: 13px;
+  color: #333333;
+}

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);
+      },
+    }); */
+  });
+};

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

@@ -0,0 +1,288 @@
+import { formatTime } from '../../../utils/util';
+import { OrderStatus, LogisticsIconMap } from '../config';
+import {
+  fetchBusinessTime,
+  fetchOrderDetail,
+} from '../../../services/order/orderDetail';
+import Toast from 'tdesign-miniprogram/toast/index';
+import { getAddressPromise } from '../../usercenter/address/list/util';
+
+Page({
+  data: {
+    pageLoading: true,
+    order: {}, // 后台返回的原始数据
+    _order: {}, // 内部使用和提供给 order-card 的数据
+    storeDetail: {},
+    countDownTime: null,
+    addressEditable: false,
+    backRefresh: false, // 用于接收其他页面back时的状态
+    formatCreateTime: '', //格式化订单创建时间
+    logisticsNodes: [],
+    /** 订单评论状态 */
+    orderHasCommented: true,
+  },
+
+  onLoad(query) {
+    this.orderNo = query.orderNo;
+    this.init();
+    this.navbar = this.selectComponent('#navbar');
+    this.pullDownRefresh = this.selectComponent('#wr-pull-down-refresh');
+  },
+
+  onShow() {
+    // 当从其他页面返回，并且 backRefresh 被置为 true 时，刷新数据
+    if (!this.data.backRefresh) return;
+    this.onRefresh();
+    this.setData({ backRefresh: false });
+  },
+
+  onPageScroll(e) {
+    this.pullDownRefresh && this.pullDownRefresh.onPageScroll(e);
+  },
+
+  onImgError(e) {
+    if (e.detail) {
+      console.error('img 加载失败');
+    }
+  },
+
+  // 页面初始化，会展示pageLoading
+  init() {
+    this.setData({ pageLoading: true });
+    this.getStoreDetail();
+    this.getDetail()
+      .then(() => {
+        this.setData({ pageLoading: false });
+      })
+      .catch((e) => {
+        console.error(e);
+      });
+  },
+
+  // 页面刷新，展示下拉刷新
+  onRefresh() {
+    this.init();
+    // 如果上一页为订单列表，通知其刷新数据
+    const pages = getCurrentPages();
+    const lastPage = pages[pages.length - 2];
+    if (lastPage) {
+      lastPage.data.backRefresh = true;
+    }
+  },
+
+  // 页面刷新，展示下拉刷新
+  onPullDownRefresh_(e) {
+    const { callback } = e.detail;
+    return this.getDetail().then(() => callback && callback());
+  },
+
+  getDetail() {
+    const params = {
+      parameter: this.orderNo,
+    };
+    return fetchOrderDetail(params).then((res) => {
+      const order = res.data;
+      const _order = {
+        id: order.orderId,
+        orderNo: order.orderNo,
+        parentOrderNo: order.parentOrderNo,
+        storeId: order.storeId,
+        storeName: order.storeName,
+        status: order.orderStatus,
+        statusDesc: order.orderStatusName,
+        amount: order.paymentAmount,
+        totalAmount: order.goodsAmountApp,
+        logisticsNo: order.logisticsVO.logisticsNo,
+        goodsList: (order.orderItemVOs || []).map((goods) =>
+          Object.assign({}, goods, {
+            id: goods.id,
+            thumb: goods.goodsPictureUrl,
+            title: goods.goodsName,
+            skuId: goods.skuId,
+            spuId: goods.spuId,
+            specs: (goods.specifications || []).map((s) => s.specValue),
+            price: goods.tagPrice ? goods.tagPrice : goods.actualPrice, // 商品销售单价, 优先取限时活动价
+            num: goods.buyQuantity,
+            titlePrefixTags: goods.tagText ? [{ text: goods.tagText }] : [],
+            buttons: goods.buttonVOs || [],
+          }),
+        ),
+        buttons: order.buttonVOs || [],
+        createTime: order.createTime,
+        receiverAddress: this.composeAddress(order),
+        groupInfoVo: order.groupInfoVo,
+      };
+      this.setData({
+        order,
+        _order,
+        formatCreateTime: formatTime(
+          parseFloat(`${order.createTime}`),
+          'YYYY-MM-DD HH:mm',
+        ), // 格式化订单创建时间
+        countDownTime: this.computeCountDownTime(order),
+        addressEditable:
+          [OrderStatus.PENDING_PAYMENT, OrderStatus.PENDING_DELIVERY].includes(
+            order.orderStatus,
+          ) && order.orderSubStatus !== -1, // 订单正在取消审核时不允许修改地址（但是返回的状态码与待发货一致）
+        isPaid: !!order.paymentVO.paySuccessTime,
+        invoiceStatus: this.datermineInvoiceStatus(order),
+        invoiceDesc: order.invoiceDesc,
+        invoiceType:
+          order.invoiceVO?.invoiceType === 5 ? '电子普通发票' : '不开发票', //是否开票 0-不开 5-电子发票
+        logisticsNodes: this.flattenNodes(order.trajectoryVos || []),
+      });
+    });
+  },
+
+  // 展开物流节点
+  flattenNodes(nodes) {
+    return (nodes || []).reduce((res, node) => {
+      return (node.nodes || []).reduce((res1, subNode, index) => {
+        res1.push({
+          title: index === 0 ? node.title : '', // 子节点中仅第一个显示title
+          desc: subNode.status,
+          date: formatTime(+subNode.timestamp, 'YYYY-MM-DD HH:mm:ss'),
+          icon: index === 0 ? LogisticsIconMap[node.code] || '' : '', // 子节点中仅第一个显示icon
+        });
+        return res1;
+      }, res);
+    }, []);
+  },
+
+  datermineInvoiceStatus(order) {
+    // 1-已开票
+    // 2-未开票（可补开）
+    // 3-未开票
+    // 4-门店不支持开票
+    return order.invoiceStatus;
+  },
+
+  // 拼接省市区
+  composeAddress(order) {
+    return [
+      //order.logisticsVO.receiverProvince,
+      order.logisticsVO.receiverCity,
+      order.logisticsVO.receiverCountry,
+      order.logisticsVO.receiverArea,
+      order.logisticsVO.receiverAddress,
+    ]
+      .filter((s) => !!s)
+      .join(' ');
+  },
+
+  getStoreDetail() {
+    fetchBusinessTime().then((res) => {
+      const storeDetail = {
+        storeTel: res.data.telphone,
+        storeBusiness: res.data.businessTime.join('\n'),
+      };
+      this.setData({ storeDetail });
+    });
+  },
+
+  // 仅对待支付状态计算付款倒计时
+  // 返回时间若是大于2020.01.01，说明返回的是关闭时间，否则说明返回的直接就是剩余时间
+  computeCountDownTime(order) {
+    if (order.orderStatus !== OrderStatus.PENDING_PAYMENT) return null;
+    return order.autoCancelTime > 1577808000000
+      ? order.autoCancelTime - Date.now()
+      : order.autoCancelTime;
+  },
+
+  onCountDownFinish() {
+    //this.setData({ countDownTime: -1 });
+    const { countDownTime, order } = this.data;
+    if (
+      countDownTime > 0 ||
+      (order && order.groupInfoVo && order.groupInfoVo.residueTime > 0)
+    ) {
+      this.onRefresh();
+    }
+  },
+
+  onGoodsCardTap(e) {
+    const { index } = e.currentTarget.dataset;
+    const goods = this.data.order.orderItemVOs[index];
+    wx.navigateTo({ url: `/pages/goods/details/index?spuId=${goods.spuId}` });
+  },
+
+  onEditAddressTap() {
+    getAddressPromise()
+      .then((address) => {
+        this.setData({
+          'order.logisticsVO.receiverName': address.name,
+          'order.logisticsVO.receiverPhone': address.phone,
+          '_order.receiverAddress': address.address,
+        });
+      })
+      .catch(() => {});
+
+    wx.navigateTo({
+      url: `/pages/usercenter/address/list/index?selectMode=1`,
+    });
+  },
+
+  onOrderNumCopy() {
+    wx.setClipboardData({
+      data: this.data.order.orderNo,
+    });
+  },
+
+  onDeliveryNumCopy() {
+    wx.setClipboardData({
+      data: this.data.order.logisticsVO.logisticsNo,
+    });
+  },
+
+  onToInvoice() {
+    wx.navigateTo({
+      url: `/pages/order/invoice/index?orderNo=${this.data._order.orderNo}`,
+    });
+  },
+
+  onSuppleMentInvoice() {
+    wx.navigateTo({
+      url: `/pages/order/receipt/index?orderNo=${this.data._order.orderNo}`,
+    });
+  },
+
+  onDeliveryClick() {
+    const logisticsData = {
+      nodes: this.data.logisticsNodes,
+      company: this.data.order.logisticsVO.logisticsCompanyName,
+      logisticsNo: this.data.order.logisticsVO.logisticsNo,
+      phoneNumber: this.data.order.logisticsVO.logisticsCompanyTel,
+    };
+    wx.navigateTo({
+      url: `/pages/order/delivery-detail/index?data=${encodeURIComponent(
+        JSON.stringify(logisticsData),
+      )}`,
+    });
+  },
+
+  /** 跳转订单评价 */
+  navToCommentCreate() {
+    wx.navigateTo({
+      url: `/pages/order/createComment/index?orderNo=${this.orderNo}`,
+    });
+  },
+
+  /** 跳转拼团详情/分享页*/
+  toGrouponDetail() {
+    wx.showToast({ title: '点击了拼团' });
+  },
+
+  clickService() {
+    Toast({
+      context: this,
+      selector: '#t-toast',
+      message: '您点击了联系客服',
+    });
+  },
+
+  onOrderInvoiceView() {
+    wx.navigateTo({
+      url: `/pages/order/invoice/index?orderNo=${this.orderNo}`,
+    });
+  },
+});

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

@@ -0,0 +1,17 @@
+{
+  "navigationBarTitleText": "订单详情",
+  "usingComponents": {
+    "t-pull-down-refresh": "tdesign-miniprogram/pull-down-refresh/pull-down-refresh",
+    "t-button": "tdesign-miniprogram/button/button",
+    "t-cell": "tdesign-miniprogram/cell/cell",
+    "t-icon": "tdesign-miniprogram/icon/icon",
+    "t-image": "/components/webp-image/index",
+    "t-count-down": "tdesign-miniprogram/count-down/count-down",
+    "t-toast": "tdesign-miniprogram/toast/toast",
+    "t-dialog": "tdesign-miniprogram/dialog/dialog",
+    "price": "/components/price/index",
+    "order-card": "../components/order-card/index",
+    "order-goods-card": "../components/order-goods-card/index",
+    "order-button-bar": "../components/order-button-bar/index"
+  }
+}

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

@@ -0,0 +1,159 @@
+<t-pull-down-refresh id="t-pull-down-refresh" bindrefresh="onPullDownRefresh_" t-class-indicator="t-class-indicator">
+  <!-- 页面内容 -->
+  <view class="order-detail">
+    <view class="header">
+      <view class="order-detail__header">
+        <view class="title">{{_order.statusDesc}}</view>
+        <view class="desc">
+          <block wx:if="{{ order.holdStatus === 1 }}">
+            <block wx:if="{{ order.groupInfoVo.residueTime > 0 }}">
+              拼团剩余
+              <t-count-down
+                time="{{order.groupInfoVo.residueTime}}"
+                format="HH小时mm分ss秒"
+                t-class="count-down"
+                bindfinish="onCountDownFinish"
+              />
+              <view>过时自动取消</view>
+            </block>
+          </block>
+          <block wx:elif="{{countDownTime === null}}">{{order.orderSatusRemark || ''}}</block>
+          <block wx:elif="{{countDownTime > 0}}">
+            剩
+            <t-count-down
+              time="{{countDownTime}}"
+              format="HH小时mm分ss秒"
+              t-class="count-down"
+              bindfinish="onCountDownFinish"
+            />
+            支付，过时订单将会取消
+          </block>
+          <block wx:else>超时未支付</block>
+        </view>
+      </view>
+
+      <!-- 物流 -->
+      <view class="order-logistics" wx:if="{{logisticsNodes[0]}}" bindtap="onDeliveryClick">
+        <t-icon name="deliver" size="40rpx" class="logistics-icon" prefix="wr" />
+        <view class="logistics-content">
+          <view>{{logisticsNodes[0].desc}}</view>
+          <view class="logistics-time">{{logisticsNodes[0].date}}</view>
+        </view>
+        <t-icon class="logistics-back" name="arrow_forward" size="36rpx" prefix="wr" />
+      </view>
+      <view class="border-bottom" wx:if="{{logisticsNodes[0]}}" />
+      <!-- 收货地址 -->
+      <view class="order-logistics">
+        <t-icon name="location" size="40rpx" class="logistics-icon" prefix="wr" />
+        <view class="logistics-content">
+          <view>{{order.logisticsVO.receiverName + ' '}}{{order.logisticsVO.receiverPhone}}</view>
+          <view class="logistics-time">{{_order.receiverAddress}}</view>
+        </view>
+        <view wx:if="{{addressEditable}}" class="edit-text" bindtap="onEditAddressTap"> 修改 </view>
+      </view>
+    </view>
+    <!-- 店铺及商品 -->
+    <order-card order="{{_order}}" use-top-right-slot>
+      <order-goods-card
+        wx:for="{{_order.goodsList}}"
+        wx:key="id"
+        wx:for-item="goods"
+        wx:for-index="gIndex"
+        goods="{{goods}}"
+        no-top-line="{{gIndex === 0}}"
+        bindtap="onGoodsCardTap"
+        data-index="{{gIndex}}"
+      >
+        <order-button-bar
+          slot="append-card"
+          class="goods-button-bar"
+          order="{{_order}}"
+          bindrefresh="onRefresh"
+          goodsIndex="{{gIndex}}"
+        />
+      </order-goods-card>
+      <view class="pay-detail">
+        <view class="pay-item">
+          <text>商品总额</text>
+          <price fill decimalSmaller wr-class="pay-item__right font-bold" price="{{order.totalAmount || '0'}}" />
+        </view>
+        <view class="pay-item">
+          <text>运费</text>
+          <view class="pay-item__right font-bold">
+            <block wx:if="{{order.freightFee}}">
+              +
+              <price fill decimalSmaller price="{{order.freightFee}}" />
+            </block>
+            <text wx:else>免运费</text>
+          </view>
+        </view>
+        <view class="pay-item">
+          <text>活动优惠</text>
+          <view class="pay-item__right primary font-bold">
+            -
+            <price fill price="{{order.discountAmount || 0}}" />
+          </view>
+        </view>
+        <view class="pay-item">
+          <text>优惠券</text>
+          <view class="pay-item__right" catchtap="onOpenCoupons">
+            <block wx:if="{{order.couponAmount}}">
+              -
+              <price fill decimalSmaller price="{{order.couponAmount}}" />
+            </block>
+            <text wx:else>无可用</text>
+            <!-- <t-icon name="chevron-right" size="32rpx" color="#BBBBBB" /> -->
+          </view>
+        </view>
+        <view class="pay-item">
+          <text>{{isPaid ? '实付' : '应付'}}</text>
+          <price
+            fill
+            decimalSmaller
+            wr-class="pay-item__right font-bold primary max-size"
+            price="{{order.paymentAmount || '0'}}"
+          />
+        </view>
+      </view>
+    </order-card>
+    <view class="pay-detail padding-inline">
+      <view class="pay-item">
+        <text>订单编号</text>
+        <view class="pay-item__right" bindtap="onOrderNumCopy">
+          <text class="order-no">{{order.orderNo}}</text>
+          <view class="pay-item__right__copy">复制</view>
+        </view>
+      </view>
+      <view class="pay-item">
+        <text>下单时间</text>
+        <view class="pay-item__right">
+          <text class="order-no normal-color">{{formatCreateTime}}</text>
+        </view>
+      </view>
+      <view class="border-bottom border-bottom-margin" />
+      <view class="pay-item">
+        <text>发票</text>
+        <view class="pay-item__right" bindtap="onOrderInvoiceView">
+          <text class="order-no normal-color">{{invoiceType}}</text>
+          <view class="pay-item__right__copy">查看</view>
+        </view>
+      </view>
+      <view class="pay-item">
+        <text>备注</text>
+        <view class="pay-item__right">
+          <text class="order-no normal-color">{{order.remark || '-'}}</text>
+        </view>
+      </view>
+      <view class="border-bottom border-bottom-margin" />
+      <view class="pay-service" wx:if="{{storeDetail && storeDetail.storeTel}}" catch:tap="clickService">
+        <t-icon name="service" size="40rpx" />
+        <text decode="{{true}}">&nbsp;联系客服</text>
+      </view>
+    </view>
+  </view>
+  <view wx:if="{{_order.buttons.length > 0}}" class="bottom-bar">
+    <order-button-bar order="{{_order}}" bindrefresh="onRefresh" isBtnMax />
+  </view>
+</t-pull-down-refresh>
+<t-toast id="t-toast" />
+<t-dialog id="t-dialog" />

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

@@ -0,0 +1,245 @@
+:host {
+  background-color: #f8f8f8;
+}
+
+.order-detail {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0rpx 0rpx calc(env(safe-area-inset-bottom) + 144rpx);
+}
+
+.order-detail .count-down {
+  color: #ffffff;
+}
+.order-detail .header {
+  width: 100%;
+  background-color: #ffffff;
+}
+.order-detail .order-detail__header {
+  width: 700rpx;
+  height: 200rpx;
+  border-radius: 24rpx;
+  margin: 0 auto;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-image: url('https://cdn-we-retail.ym.tencent.com/miniapp/template/order-bg.png');
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+.order-detail .order-detail__header .title,
+.order-detail .order-detail__header .desc {
+  color: #ffffff;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+.order-detail .order-detail__header .title {
+  -webkit-line-clamp: 1;
+  font-size: 44rpx;
+  line-height: 64rpx;
+  margin-bottom: 8rpx;
+  font-weight: bold;
+}
+.order-detail .order-detail__header .desc {
+  -webkit-line-clamp: 2;
+  font-size: 24rpx;
+  line-height: 32rpx;
+}
+.order-detail .order-detail__header .desc .count-down {
+  display: inline;
+}
+.order-detail .order-logistics {
+  box-sizing: border-box;
+  padding: 32rpx;
+  width: 100%;
+  background-color: #ffffff;
+  overflow: hidden;
+  color: #333333;
+  font-size: 32rpx;
+  line-height: 48rpx;
+  display: flex;
+  position: relative;
+}
+
+.order-logistics .logistics-icon {
+  width: 40rpx;
+  height: 40rpx;
+  margin-right: 16rpx;
+  margin-top: 4rpx;
+}
+
+.order-logistics .logistics-content {
+  flex: 1;
+}
+
+.order-logistics .logistics-content .logistics-time {
+  font-size: 28rpx;
+  line-height: 40rpx;
+  color: #999999;
+  margin-top: 12rpx;
+}
+
+.order-logistics .logistics-back {
+  color: #999999;
+  align-self: center;
+}
+
+.order-logistics .edit-text {
+  color: #fa4126;
+  font-size: 26rpx;
+  line-height: 36rpx;
+}
+
+.order-detail .border-bottom {
+  margin: 0 auto;
+  width: 686rpx;
+  scale: 1 0.5;
+  height: 2rpx;
+  background-color: #e5e5e5;
+}
+
+.order-detail .border-bottom-margin {
+  margin: 16rpx auto;
+}
+
+.order-detail .pay-detail {
+  background-color: #ffffff;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.order-detail .padding-inline {
+  padding: 16rpx 32rpx;
+}
+
+.order-detail .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;
+  background-color: #ffffff;
+}
+.order-detail .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-detail .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-detail .pay-detail .pay-item .font-bold {
+  font-weight: bold;
+}
+.order-detail .pay-detail .pay-item .primary {
+  color: #fa4126;
+}
+.order-detail .pay-detail .pay-item .max-size {
+  font-size: 36rpx;
+  line-height: 48rpx;
+}
+
+.pay-item .pay-item__right .pay-item__right__copy {
+  width: 80rpx;
+  height: 40rpx;
+  text-align: center;
+  font-size: 24rpx;
+  line-height: 40rpx;
+  color: #333333;
+  position: relative;
+}
+
+.pay-item .pay-item__right .pay-item__right__copy::before {
+  position: absolute;
+  content: '';
+  width: 200%;
+  height: 200%;
+  border-radius: 40rpx;
+  border: 2rpx solid #dddddd;
+  transform: scale(0.5);
+  left: 0;
+  top: 0;
+  transform-origin: left top;
+}
+
+.pay-item .pay-item__right .order-no {
+  color: #333333;
+  font-size: 26rpx;
+  line-height: 40rpx;
+  padding-right: 16rpx;
+}
+
+.pay-item .pay-item__right .normal-color {
+  color: #333333;
+}
+
+.order-detail .pay-detail .pay-service {
+  width: 100%;
+  height: 72rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32rpx;
+  line-height: 36rpx;
+  color: #333333;
+  background-color: #ffffff;
+}
+
+.bottom-bar {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 10;
+  background: #fff;
+  height: 112rpx;
+  width: 686rpx;
+  padding: 0rpx 32rpx env(safe-area-inset-bottom);
+  display: flex;
+  align-items: center;
+}
+
+.bottom-bar::before {
+  position: absolute;
+  content: '';
+  width: 200%;
+  height: 200%;
+  border-top: 2rpx solid #dddddd;
+  transform: scale(0.5);
+  left: 0;
+  top: 0;
+  transform-origin: left top;
+}
+
+.goods-button-bar {
+  height: 112rpx;
+  width: 686rpx;
+  margin-bottom: 16rpx;
+}
+
+.t-class-indicator {
+  color: #b9b9b9 !important;
+}
+
+.add-notes__confirm {
+  color: #fa4126 !important;
+}
+
+.t-button {
+  --td-button-default-color: #000;
+  --td-button-primary-text-color: #fa4126;
+}

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

@@ -0,0 +1,189 @@
+import { OrderStatus } from '../config';
+import {
+  fetchOrders,
+  fetchOrdersCount,
+} from '../../../services/order/orderList';
+import { cosThumb } from '../../../utils/util';
+
+Page({
+  page: {
+    size: 5,
+    num: 1,
+  },
+
+  data: {
+    tabs: [
+      { key: -1, text: '全部' },
+      { key: OrderStatus.PENDING_PAYMENT, text: '待付款', info: '' },
+      { key: OrderStatus.PENDING_DELIVERY, text: '待发货', info: '' },
+      { key: OrderStatus.PENDING_RECEIPT, text: '待收货', info: '' },
+      { key: OrderStatus.COMPLETE, text: '已完成', info: '' },
+    ],
+    curTab: -1,
+    orderList: [],
+    listLoading: 0,
+    pullDownRefreshing: false,
+    emptyImg:
+      'https://cdn-we-retail.ym.tencent.com/miniapp/order/empty-order-list.png',
+    backRefresh: false,
+    status: -1,
+  },
+
+  onLoad(query) {
+    let status = parseInt(query.status);
+    status = this.data.tabs.map((t) => t.key).includes(status) ? status : -1;
+    this.init(status);
+    this.pullDownRefresh = this.selectComponent('#wr-pull-down-refresh');
+  },
+
+  onShow() {
+    if (!this.data.backRefresh) return;
+    this.onRefresh();
+    this.setData({ backRefresh: false });
+  },
+
+  onReachBottom() {
+    if (this.data.listLoading === 0) {
+      this.getOrderList(this.data.curTab);
+    }
+  },
+
+  onPageScroll(e) {
+    this.pullDownRefresh && this.pullDownRefresh.onPageScroll(e);
+  },
+
+  onPullDownRefresh_(e) {
+    const { callback } = e.detail;
+    this.setData({ pullDownRefreshing: true });
+    this.refreshList(this.data.curTab)
+      .then(() => {
+        this.setData({ pullDownRefreshing: false });
+        callback && callback();
+      })
+      .catch((err) => {
+        this.setData({ pullDownRefreshing: false });
+        Promise.reject(err);
+      });
+  },
+
+  init(status) {
+    status = status !== undefined ? status : this.data.curTab;
+    this.setData({
+      status,
+    });
+    this.refreshList(status);
+  },
+
+  getOrderList(statusCode = -1, reset = false) {
+    const params = {
+      parameter: {
+        pageSize: this.page.size,
+        pageNum: this.page.num,
+      },
+    };
+    if (statusCode !== -1) params.parameter.orderStatus = statusCode;
+    this.setData({ listLoading: 1 });
+    return fetchOrders(params)
+      .then((res) => {
+        this.page.num++;
+        let orderList = [];
+        if (res && res.data && res.data.orders) {
+          orderList = (res.data.orders || []).map((order) => {
+            return {
+              id: order.orderId,
+              orderNo: order.orderNo,
+              parentOrderNo: order.parentOrderNo,
+              storeId: order.storeId,
+              storeName: order.storeName,
+              status: order.orderStatus,
+              statusDesc: order.orderStatusName,
+              amount: order.paymentAmount,
+              totalAmount: order.totalAmount,
+              logisticsNo: order.logisticsVO.logisticsNo,
+              createTime: order.createTime,
+              goodsList: (order.orderItemVOs || []).map((goods) => ({
+                id: goods.id,
+                thumb: cosThumb(goods.goodsPictureUrl, 70),
+                title: goods.goodsName,
+                skuId: goods.skuId,
+                spuId: goods.spuId,
+                specs: (goods.specifications || []).map(
+                  (spec) => spec.specValue,
+                ),
+                price: goods.tagPrice ? goods.tagPrice : goods.actualPrice,
+                num: goods.buyQuantity,
+                titlePrefixTags: goods.tagText ? [{ text: goods.tagText }] : [],
+              })),
+              buttons: order.buttonVOs || [],
+              groupInfoVo: order.groupInfoVo,
+              freightFee: order.freightFee,
+            };
+          });
+        }
+        return new Promise((resolve) => {
+          if (reset) {
+            this.setData({ orderList: [] }, () => resolve());
+          } else resolve();
+        }).then(() => {
+          this.setData({
+            orderList: this.data.orderList.concat(orderList),
+            listLoading: orderList.length > 0 ? 0 : 2,
+          });
+        });
+      })
+      .catch((err) => {
+        this.setData({ listLoading: 3 });
+        return Promise.reject(err);
+      });
+  },
+
+  onReTryLoad() {
+    this.getOrderList(this.data.curTab);
+  },
+
+  onTabChange(e) {
+    const { value } = e.detail;
+    this.setData({
+      status: value,
+    });
+    this.refreshList(value);
+  },
+
+  getOrdersCount() {
+    return fetchOrdersCount().then((res) => {
+      const tabsCount = res.data || [];
+      const { tabs } = this.data;
+      tabs.forEach((tab) => {
+        const tabCount = tabsCount.find((c) => c.tabType === tab.key);
+        if (tabCount) {
+          tab.info = tabCount.orderNum;
+        }
+      });
+      this.setData({ tabs });
+    });
+  },
+
+  refreshList(status = -1) {
+    this.page = {
+      size: this.page.size,
+      num: 1,
+    };
+    this.setData({ curTab: status, orderList: [] });
+
+    return Promise.all([
+      this.getOrderList(status, true),
+      this.getOrdersCount(),
+    ]);
+  },
+
+  onRefresh() {
+    this.refreshList(this.data.curTab);
+  },
+
+  onOrderCardTap(e) {
+    const { order } = e.currentTarget.dataset;
+    wx.navigateTo({
+      url: `/pages/order/order-detail/index?orderNo=${order.orderNo}`,
+    });
+  },
+});

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

@@ -0,0 +1,16 @@
+{
+  "navigationBarTitleText": "我的订单",
+  "usingComponents": {
+    "t-tabs": "tdesign-miniprogram/tabs/tabs",
+    "t-tab-panel": "tdesign-miniprogram/tab-panel/tab-panel",
+    "t-empty": "tdesign-miniprogram/empty/empty",
+    "t-toast": "tdesign-miniprogram/toast/toast",
+    "t-dialog": "tdesign-miniprogram/dialog/dialog",
+    "t-pull-down-refresh": "tdesign-miniprogram/pull-down-refresh/pull-down-refresh",
+    "load-more": "/components/load-more/index",
+    "order-button-bar": "../components/order-button-bar/index",
+    "price": "/components/price/index",
+    "order-card": "../components/order-card/index",
+    "specs-goods-card": "../components/specs-goods-card/index"
+  }
+}

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

@@ -0,0 +1,85 @@
+<view class="page-container">
+  <view class="tab-bar">
+    <view class="tab-bar__placeholder" />
+    <t-tabs
+      t-class="tab-bar__inner"
+      t-class-active="tab-bar__active"
+      t-class-track="t-tabs-track"
+      bind:change="onTabChange"
+      value="{{status}}"
+      style="position: fixed; top: 0; left: 0; z-index: 100"
+    >
+      <t-tab-panel
+        wx:for="{{tabs}}"
+        wx:for-index="index"
+        wx:for-item="item"
+        wx:key="index"
+        label="{{item.text}}"
+        value="{{item.key}}"
+      />
+    </t-tabs>
+  </view>
+  <t-pull-down-refresh
+    id="pull-down-refresh"
+    normal-bar-height="{{200}}"
+    max-bar-height="{{272}}"
+    refreshTimeout="{{3000}}"
+    background="#f5f5f5"
+    use-loading-slot
+    loading-size="60rpx"
+    bindrefresh="onPullDownRefresh_"
+    t-class-indicator="t-class-indicator"
+  >
+    <order-card
+      wx:for="{{orderList}}"
+      wx:key="id"
+      wx:for-item="order"
+      wx:for-index="oIndex"
+      order="{{order}}"
+      defaultShowNum="{{3}}"
+      data-order="{{order}}"
+      bindcardtap="onOrderCardTap"
+      useLogoSlot
+    >
+      <view slot="top-left" class="order-number">
+        <text decode>订单号&nbsp;</text>
+        {{order.orderNo}}
+      </view>
+      <specs-goods-card
+        wx:for="{{order.goodsList}}"
+        wx:key="id"
+        wx:for-item="goods"
+        wx:for-index="gIndex"
+        data="{{goods}}"
+        no-top-line="{{gIndex === 0}}"
+      />
+      <view slot="more">
+        <view class="price-total">
+          <text>总价</text>
+          <price fill price="{{order.totalAmount + ''}}" />
+          <text>，运费</text>
+          <price fill price="{{order.freightFee + ''}}" />
+          <text decode>&nbsp;</text>
+          <text class="bold-price" decode="{{true}}">实付&nbsp;</text>
+          <price fill class="real-pay" price="{{order.amount + ''}}" decimalSmaller />
+        </view>
+        <!-- 订单按钮栏 -->
+        <order-button-bar order="{{order}}" bindrefresh="onRefresh" data-order="{{order}}" />
+      </view>
+    </order-card>
+    <!-- 列表加载中/已全部加载 -->
+    <load-more
+      wx:if="{{!pullDownRefreshing}}"
+      list-is-empty="{{!orderList.length}}"
+      status="{{listLoading}}"
+      bindretry="onReTryLoad"
+    >
+      <!-- 空态 -->
+      <view slot="empty" class="empty-wrapper">
+        <t-empty t-class="t-empty-text" src="{{emptyImg}}">暂无相关订单</t-empty>
+      </view>
+    </load-more>
+  </t-pull-down-refresh>
+</view>
+<t-toast id="t-toast" />
+<t-dialog id="t-dialog" />

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

@@ -0,0 +1,109 @@
+:host {
+  background-color: #f5f5f5;
+}
+.page-container .tab-bar__placeholder,
+.page-container .tab-bar__inner {
+  height: 88rpx;
+  line-height: 88rpx;
+  background: #fff;
+}
+.page-container .tab-bar__inner {
+  font-size: 26rpx;
+  color: #333333;
+  position: fixed;
+  width: 100vw;
+  top: 0;
+  left: 0;
+}
+.page-container .tab-bar__inner.order-nav .order-nav-item .bottom-line {
+  bottom: 12rpx;
+}
+.tab-bar__inner .t-tabs-is-active {
+  color: #fa4126 !important;
+}
+
+.tab-bar__inner .t-tabs-track {
+  background: #fa4126 !important;
+}
+
+.page-container .tab-bar__active {
+  font-size: 28rpx;
+}
+.page-container .specs-popup .bottom-btn {
+  color: #fa4126;
+  color: var(--color-primary, #fa4126);
+}
+.page-container .specs-popup .bottom-btn::after {
+  border-color: #fa4126;
+  border-color: var(--color-primary, #fa4126);
+}
+.dialog .dialog__button-confirm {
+  color: #fa4126;
+  color: var(--color-primary, #fa4126);
+}
+.list-loading {
+  height: 100rpx;
+}
+.empty-wrapper {
+  height: calc(100vh - 88rpx);
+}
+.btn-bar {
+  margin-top: 20rpx;
+}
+.load-more {
+  margin: 0 24rpx;
+}
+wr-order-goods-card:not(:first-child) .wr-goods-card {
+  margin-top: 40rpx;
+}
+
+.price-total {
+  font-size: 24rpx;
+  line-height: 32rpx;
+  color: #999999;
+  padding-top: 10rpx;
+  width: 100%;
+  display: flex;
+  align-items: baseline;
+  justify-content: flex-end;
+}
+.price-total .bold-price {
+  color: #333333;
+  font-size: 28rpx;
+  line-height: 40rpx;
+  color: #333333;
+}
+.price-total .real-pay {
+  font-size: 36rpx;
+  line-height: 48rpx;
+  color: #fa4126;
+  font-weight: bold;
+}
+
+.t-tabs.t-tabs--top .t-tabs-scroll {
+  border: none !important;
+}
+.t-empty-text {
+  font-size: 28rpx;
+  color: #999;
+}
+
+.page-container .order-number {
+  color: #666666;
+  font-size: 28rpx;
+}
+.t-class-indicator {
+  color: #b9b9b9 !important;
+}
+.tab-bar .tab-bar__active {
+  color: #333333 !important;
+}
+
+.tab-bar .t-tabs-track {
+  background: #333333 !important;
+}
+
+.t-button {
+  --td-button-default-color: #000;
+  --td-button-primary-text-color: #fa4126;
+}

mini-program/pages/order/pay-result/index.js

@@ -0,0 +1,47 @@
+/*
+ * @Author: rileycai
+ * @Date: 2022-03-14 21:18:07
+ * @LastEditTime: 2022-03-22 21:17:16
+ * @LastEditors: rileycai
+ * @Description:
+ * @FilePath: /tdesign-miniprogram-starter/pages/order/pay-result/index.js
+ */
+Page({
+  data: {
+    totalPaid: 0,
+    orderNo: '',
+    groupId: '',
+    groupon: null,
+    spu: null,
+    adUrl: '',
+  },
+
+  onLoad(options) {
+    const { totalPaid = 0, orderNo = '', groupId = '' } = options;
+    this.setData({
+      totalPaid,
+      orderNo,
+      groupId,
+    });
+  },
+
+  onTapReturn(e) {
+    const target = e.currentTarget.dataset.type;
+    const { orderNo } = this.data;
+    if (target === 'home') {
+      wx.switchTab({ url: '/pages/home/home' });
+    } else if (target === 'orderList') {
+      wx.navigateTo({
+        url: `/pages/order/order-list/index?orderNo=${orderNo}`,
+      });
+    } else if (target === 'order') {
+      wx.navigateTo({
+        url: `/pages/order/order-detail/index?orderNo=${orderNo}`,
+      });
+    }
+  },
+
+  navBackHandle() {
+    wx.navigateBack();
+  },
+});

mini-program/pages/order/pay-result/index.json

@@ -0,0 +1,9 @@
+{
+  "navigationBarTitleText": "支付结果",
+  "navigationStyle": "custom",
+  "usingComponents": {
+    "t-navbar": "tdesign-miniprogram/navbar/navbar",
+    "t-icon": "tdesign-miniprogram/icon/icon",
+    "price": "/components/price/index"
+  }
+}

mini-program/pages/order/pay-result/index.wxml

@@ -0,0 +1,22 @@
+<t-navbar background="#ffffff" left-icon="slot" />
+<view class="pay-result">
+	<view class="pay-status">
+		<t-icon name="check-circle-filled" size="60rpx" color="#47D368" />
+		<text>支付成功</text>
+	</view>
+	<view class="pay-money">
+		微信支付：
+		<price
+		 wx:if="{{totalPaid}}"
+		 price="{{totalPaid}}"
+		 wr-class="pay-money__price"
+		 decimalSmaller
+		 fill
+		/>
+	</view>
+	<view class="btn-wrapper">
+		<view class="status-btn" data-type="orderList" bindtap="onTapReturn">查看订单</view>
+		<view class="status-btn" data-type="home" bindtap="onTapReturn">返回首页</view>
+	</view>
+</view>
+

mini-program/pages/order/pay-result/index.wxss

@@ -0,0 +1,54 @@
+.pay-result {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+
+.pay-result .pay-status {
+  margin-top: 100rpx;
+  font-size: 48rpx;
+  line-height: 72rpx;
+  font-weight: bold;
+  color: #333333;
+  display: flex;
+  align-items: center;
+}
+.pay-result .pay-status text {
+  padding-left: 12rpx;
+}
+.pay-result .pay-money {
+  color: #666666;
+  font-size: 28rpx;
+  line-height: 48rpx;
+  margin-top: 28rpx;
+  display: flex;
+  align-items: baseline;
+}
+
+.pay-result .pay-money .pay-money__price {
+  font-size: 36rpx;
+  line-height: 48rpx;
+  color: #fa4126;
+}
+.pay-result .btn-wrapper {
+  margin-top: 48rpx;
+  padding: 12rpx 32rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.pay-result .btn-wrapper .status-btn {
+  height: 88rpx;
+  width: 334rpx;
+  border-radius: 44rpx;
+  border: 2rpx solid #fa4126;
+  color: #fa4126;
+  font-size: 28rpx;
+  font-weight: bold;
+  line-height: 88rpx;
+  text-align: center;
+}

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

@@ -0,0 +1,182 @@
+/* eslint-disable no-nested-ternary */
+import Dialog from 'tdesign-miniprogram/dialog/index';
+import Toast from 'tdesign-miniprogram/toast/index';
+import { dispatchSupplementInvoice } from '../../../services/order/orderConfirm';
+
+const invoiceJson = {
+  info: [
+    '1.根据当地税务局的要求，开具有效的企业发票需填写税务局登记证号。开具个人发票不需要填写纳税人识别码。 ',
+    '2.电子普通发票： 电子普通发票是税局认可的有效首付款凭证，其法律效力、基本用途及使用规定同纸质发票，如需纸质发票可自行下载打印。 ',
+    '3.增值税专用发票： 增值税发票暂时不可开，可查看《开局增值税发票》或致电400-633-6868。',
+  ],
+  codeTitle: [
+    '1.什么是纳税人识别号/统一社会信用代码？ 纳税人识别号，一律由15位、17位、18或者20位码（字符型）组成，其中：企业、事业单位等组织机构纳税人，以国家质量监督检验检疫总局编制的9位码（其中区分主码位与校检位之间的“—”符省略不打印）并在其“纳税人识别号”。国家税务总局下达的纳税人代码为15位，其中：1—2位为省、市代码，3—6位为地区代码，7—8位为经济性质代码，9—10位行业代码，11—15位为各地区自设的顺序码。',
+    '2.入户获取/知晓纳税人识别号/统一社会信用代码？ 纳税人识别号是税务登记证上的号码，通常简称为“税号”，每个企业的纳税人识别号都是唯一的。这个属于每个人自己且终身不变的数字代码很可能成为我们的第二张“身份证”。  ',
+  ],
+};
+
+Page({
+  orderNo: '',
+  data: {
+    receiptIndex: 0,
+    addressTagsIndex: 0,
+    goodsClassesIndex: 0,
+    dialogShow: false,
+    codeShow: false,
+    receipts: [
+      { title: '不开发票', id: 0, name: 'receipt' },
+      { title: '电子发票', id: 1, name: 'receipt' },
+    ],
+    addressTags: [
+      { title: '个人', id: 0, name: 'addressTags', type: 1 },
+      { title: '公司', id: 1, name: 'addressTags', type: 2 },
+    ],
+    goodsClasses: [
+      { title: '商品明细', id: 0, name: 'goodsClasses' },
+      { title: '商品类别', id: 1, name: 'goodsClasses' },
+    ],
+    name: '',
+    componentName: '',
+    code: '',
+    phone: '',
+    email: '',
+    invoiceInfo: invoiceJson,
+  },
+  onLoad(query) {
+    const { orderNo, invoiceData } = query;
+    const tempData = JSON.parse(invoiceData || '{}');
+    const invoice = {
+      receiptIndex: tempData.invoiceType === 5 ? 1 : 0,
+      name: tempData.buyerName || '',
+      email: tempData.email || '',
+      phone: tempData.buyerPhone || '',
+      addressTagsIndex: tempData.titleType === 2 ? 1 : 0,
+      goodsClassesIndex: tempData.contentType === 2 ? 1 : 0,
+      code: tempData.buyerTaxNo || '',
+      componentName: tempData.titleType === 2 ? tempData.buyerName : '',
+    };
+    this.orderNo = orderNo;
+    this.setData({ ...invoice });
+  },
+  onLabels(e) {
+    const { item } = e.currentTarget.dataset;
+    const nameIndex = `${item.name}Index`;
+    this.setData({ [nameIndex]: item.id });
+  },
+  onInput(e) {
+    const { addressTagsIndex } = this.data;
+    const { item } = e.currentTarget.dataset;
+    const { value } = e.detail;
+    const key =
+      item === 'name'
+        ? addressTagsIndex === 0
+          ? 'name'
+          : 'componentName'
+        : item === 'code'
+        ? addressTagsIndex === 0
+          ? 'phone'
+          : 'code'
+        : 'email';
+    this.setData({ [key]: value });
+  },
+  onSure() {
+    const result = this.checkSure();
+    if (!result) {
+      Dialog.alert({
+        title: '请填写发票信息',
+        content: '',
+        confirmBtn: '确认',
+      });
+      return;
+    }
+    const {
+      receiptIndex,
+      addressTagsIndex,
+      receipts,
+      addressTags,
+      name,
+      componentName,
+      code,
+      phone,
+      email,
+      goodsClassesIndex,
+    } = this.data;
+
+    const data = {
+      buyerName: addressTagsIndex === 0 ? name : componentName,
+      buyerTaxNo: code,
+      buyerPhone: phone,
+      email,
+      titleType: addressTags[addressTagsIndex].type,
+      contentType: goodsClassesIndex === 0 ? 1 : 2,
+      invoiceType: receiptIndex === 1 ? 5 : 0,
+    };
+    if (this.orderNo) {
+      if (this.submitting) return;
+      const params = {
+        parameter: {
+          orderNo: this.orderNo,
+          invoiceVO: data,
+        },
+      };
+      this.submitting = true;
+      dispatchSupplementInvoice(params)
+        .then(() => {
+          Toast({
+            context: this,
+            selector: '#t-toast',
+            message: '保存成功',
+            duration: 2000,
+            icon: '',
+          });
+          setTimeout(() => {
+            this.submitting = false;
+            wx.navigateBack({ delta: 1 });
+          }, 1000);
+        })
+        .catch((err) => {
+          this.submitting = false;
+          console.error(err);
+        });
+    } else {
+      Object.assign(data, {
+        receipts: receipts[receiptIndex],
+        addressTags: addressTags[addressTagsIndex],
+      });
+      wx.setStorageSync('invoiceData', data);
+      wx.navigateBack({ delta: 1 });
+    }
+  },
+  checkSure() {
+    const { name, componentName, code, phone, email, addressTagsIndex, receiptIndex } = this.data;
+    if (receiptIndex === 0) {
+      return true;
+    }
+    if (addressTagsIndex === 0) {
+      if (!name.length || !phone.length) {
+        return false;
+      }
+    } else if (addressTagsIndex === 1) {
+      if (!componentName.length || !code.length) {
+        return false;
+      }
+    }
+    if (!email.length) {
+      return false;
+    }
+    return true;
+  },
+  onDialogTap() {
+    const { dialogShow } = this.data;
+    this.setData({
+      dialogShow: !dialogShow,
+      codeShow: false,
+    });
+  },
+  onKnoeCode() {
+    this.setData({
+      dialogShow: !this.data.dialogShow,
+      codeShow: true,
+    });
+  },
+});

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

@@ -0,0 +1,11 @@
+{
+  "navigationBarTitleText": "发票",
+  "usingComponents": {
+    "t-cell": "tdesign-miniprogram/cell/cell",
+    "t-dialog": "tdesign-miniprogram/dialog/dialog",
+    "t-toast": "tdesign-miniprogram/toast/toast",
+    "t-icon": "tdesign-miniprogram/icon/icon",
+    "t-input": "tdesign-miniprogram/input/input",
+    "t-button": "tdesign-miniprogram/button/button"
+  }
+}

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

@@ -0,0 +1,135 @@
+<view class="receipt">
+  <view class="title">
+    <t-cell class="receipt-cell" title="发票" bordered="{{false}}" t-class-left="cell-left">
+      <view slot="right-icon" class="btn-wrap">
+        <view
+          bindtap="onLabels"
+          data-item="{{item}}"
+          class="btn {{receiptIndex === index ? 'active-btn' : ''}}"
+          wx:for="{{receipts}}"
+          wx:for-item="item"
+          wx:key="index"
+        >
+          {{item.title}}
+        </view>
+      </view>
+    </t-cell>
+  </view>
+  <block wx:if="{{receiptIndex === 1}}">
+    <t-cell class="receipt-cell" title="发票抬头" t-class-left="cell-left">
+      <view class="btn-wrap" slot="right-icon">
+        <view
+          class="btn {{addressTagsIndex === index ? 'active-btn':'' }}"
+          bindtap="onLabels"
+          data-item="{{tag}}"
+          wx:for="{{addressTags}}"
+          wx:for-item="tag"
+          wx:key="index"
+        >
+          {{tag.title}}
+        </view>
+      </view>
+    </t-cell>
+    <t-cell
+      class="receipt-cell"
+      title="{{addressTagsIndex === 0 ? '姓名':'公司名称'}}"
+      t-class-left="cell-left"
+      t-class-right="cell-right"
+    >
+      <t-input
+        slot="right-icon"
+        borderless
+        t-class="input-com"
+        value="{{addressTagsIndex === 0 ? name:componentName}}"
+        bindchange="onInput"
+        data-item="name"
+        type=""
+        placeholder="{{addressTagsIndex === 0 ? '请输入您的姓名':'请输入公司名称'}}"
+      />
+    </t-cell>
+    <t-cell
+      class="receipt-cell"
+      title="{{addressTagsIndex === 0 ? '手机号':'识别号'}}"
+      t-class-left="cell-left"
+      t-class-right="cell-right"
+    >
+      <view class="addressTagsIndex-cell" slot="right-icon">
+        <t-input
+          t-class="input-com"
+          borderless
+          value="{{addressTagsIndex === 0 ? phone:code}}"
+          bindchange="onInput"
+          data-item="code"
+          type=""
+          placeholder="{{addressTagsIndex === 0 ? '请输入您的手机号':'请输入纳税人识别号'}}"
+        />
+        <t-icon wx:if="{{addressTagsIndex === 1}}" name="help-circle" size="30rpx" bindtap="onKnoeCode" />
+      </view>
+    </t-cell>
+    <t-cell
+      class="receipt-cell"
+      title="电子邮箱"
+      bordered="{{false}}"
+      t-class-left="cell-left"
+      t-class-right="cell-right"
+    >
+      <t-input
+        slot="right-icon"
+        t-class="input-com"
+        borderless
+        value="{{email}}"
+        bindchange="onInput"
+        data-item="email"
+        type=""
+        placeholder="请输入邮箱用于接收电子发票"
+      />
+    </t-cell>
+    <view class="receipt-info">
+      <t-cell class="receipt-cell" title="发票内容" bordered="{{false}}" t-class-left="cell-left">
+        <view class="btn-wrap" slot="right-icon">
+          <view
+            class="btn {{goodsClassesIndex ===index ? 'active-btn':''}}"
+            bindtap="onLabels"
+            data-item="{{good}}"
+            wx:for="{{goodsClasses}}"
+            wx:for-item="good"
+            wx:key="index"
+          >
+            {{good.title}}
+          </view>
+        </view>
+      </t-cell>
+      <view class="title">发票内容将显示详细商品名称与价格信息，发票金额为实际支付金额，不包含优惠等扣减金额</view>
+    </view>
+    <view class="receipt-know" bindtap="onDialogTap">
+      发票须知
+      <t-icon name="help-circle" size="30rpx" />
+    </view>
+    <t-dialog
+      title="{{codeShow ? '纳税人识别号说明':'发票须知'}}"
+      bindconfirm="onDialogTap"
+      class="dialog-receipt"
+      visible="{{dialogShow}}"
+      confirm-btn="我知道了"
+    >
+      <view class="srcoll-view-wrap" slot="content">
+        <scroll-view class="dialog-info" scroll-x="{{false}}" scroll-y="{{true}}">
+          <view class="info-wrap">
+            <view class="info" wx:if="{{!codeShow}}">
+              <view class="title" wx:for="{{invoiceInfo.info}}" wx:key="index" wx:for-item="item"> {{item}} </view>
+            </view>
+            <view class="info" wx:else>
+              <view class="title" wx:for="{{invoiceInfo.codeTitle}}" wx:key="index" wx:for-item="item"> {{item}} </view>
+            </view>
+          </view>
+        </scroll-view>
+      </view>
+    </t-dialog>
+  </block>
+  <view wx:else></view>
+  <view class="safe-area-bottom receipt-btn">
+    <t-button t-class="receipt-btn-con" bindtap="onSure">确定</t-button>
+  </view>
+</view>
+<t-toast id="t-toast" />
+<t-dialog id="t-dialog" />

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

@@ -0,0 +1,220 @@
+@import '../../../style/theme.wxss';
+
+.receipt {
+  height: 100vh;
+  background: #f5f5f5;
+  position: relative;
+  padding-top: 20rpx;
+
+  --td-input-vertical-padding: 0;
+}
+
+.receipt-cell .t-cell__title {
+  width: 144rpx;
+  padding-right: 32rpx;
+  flex: none !important;
+}
+
+.receipt .t-input__wrapper {
+  margin: 0 !important;
+}
+.srcoll-view-wrap {
+  margin-top: 20rpx;
+}
+.receipt .flex {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.receipt .head-title {
+  color: #333;
+  font-size: 30rpx;
+  font-weight: bold;
+}
+.receipt .btn-wrap {
+  display: flex;
+}
+.receipt .btn-wrap .btn {
+  width: 128rpx;
+  background: #f5f5f5;
+  font-size: 24rpx;
+  color: #333;
+  margin-right: 22rpx;
+  text-align: center;
+  border-radius: 8rpx;
+  position: relative;
+  border: 2rpx solid #f5f5f5;
+}
+.receipt .btn-wrap .active-btn {
+  background-color: transparent;
+  border-color: #fa4126;
+  color: #fa4126;
+}
+.receipt .title {
+  width: 100%;
+  background-color: #fff;
+  margin-bottom: 20rpx;
+}
+
+.receipt .receipt-label {
+  display: flex;
+}
+.receipt .receipt-label .btn {
+  width: 128rpx;
+  background: #f5f5f5;
+  font-size: 24rpx;
+  color: #333;
+  margin-left: 22rpx;
+  text-align: center;
+  border-radius: 8rpx;
+  border: 2rpx solid #f5f5f5;
+}
+.receipt .receipt-label .active-btn {
+  background-color: transparent;
+  border-color: #fa4126;
+  color: #fa4126;
+}
+.receipt .receipt-label .wr-cell__title {
+  font-size: 30rpx;
+  color: #333;
+  font-weight: bold;
+}
+.receipt .receipt-content {
+  background: #fff;
+  margin-top: 20rpx;
+}
+.receipt .receipt-content .addressTags {
+  padding: 0 30rpx;
+  height: 100rpx;
+}
+.receipt .receipt-content .addressTags .btn-wrap {
+  display: flex;
+}
+.receipt .receipt-content .line {
+  width: 720rpx;
+  margin-left: 30rpx;
+  background-color: #e6e6e6;
+  height: 1rpx;
+}
+.receipt .receipt-content .receipt-input {
+  display: flex;
+  padding: 0 30rpx;
+  align-items: center;
+  height: 100rpx;
+  color: #666;
+}
+.receipt .receipt-content .receipt-input .title {
+  color: #333;
+  display: inline-block;
+  width: 140rpx;
+  margin-right: 30rpx;
+  font-size: 30rpx;
+  font-weight: bold;
+}
+.input-com {
+  display: inline-block;
+  flex: 1;
+  font-size: 30rpx;
+  font-weight: 400;
+  line-height: 30rpx;
+  padding: 0 !important;
+  color: #666;
+}
+.input-com::after {
+  border: none !important;
+}
+
+.receipt .receipt-content .receipt-input .wr-icon {
+  font-size: 28rpx !important;
+  margin-left: 20rpx;
+}
+.receipt .receipt-info {
+  background: #fff;
+  margin-top: 20rpx;
+}
+.receipt .receipt-info .info-con {
+  padding: 0 30rpx;
+  height: 100rpx;
+}
+.receipt .receipt-info .title {
+  font-size: 24rpx;
+  color: #999999;
+  line-height: 36rpx;
+  padding: 0 30rpx 20rpx;
+  box-sizing: border-box;
+}
+.receipt .receipt-know {
+  display: flex;
+  align-items: center;
+  font-size: 26rpx;
+  font-weight: 400;
+  color: #999999;
+  padding: 20rpx 30rpx;
+  line-height: 26rpx;
+}
+.receipt .receipt-know .icon {
+  margin-left: 16rpx;
+  font-size: 26rpx;
+}
+.receipt .dialog-receipt .dialog__message {
+  padding: 0;
+}
+.receipt .dialog-receipt .dialog-info {
+  max-height: 622rpx;
+}
+.receipt .dialog-receipt .info-wrap {
+  padding: 0 18rpx;
+}
+.receipt .dialog-receipt .info .title {
+  display: inline-block;
+  font-size: 28rpx;
+  font-weight: 400;
+  color: #999;
+  line-height: 40rpx;
+  margin-bottom: 40rpx;
+  text-align: left;
+}
+.receipt .receipt-btn {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  background: #fff;
+  width: 100%;
+  padding: 0 20rpx;
+  box-sizing: border-box;
+  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+}
+.receipt .receipt-btn .receipt-btn-con {
+  margin-top: 20rpx;
+  display: inline-block;
+  width: 100%;
+  line-height: 80rpx;
+  background: #fa4126;
+  text-align: center;
+  color: #fff;
+  border-radius: 48rpx;
+}
+
+.cell-left {
+  margin-right: 0 !important;
+}
+
+.cell-right {
+  display: flex;
+  justify-content: flex-start;
+  width: 480rpx;
+}
+
+.addressTagsIndex-cell {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.t-button {
+  --td-button-default-color: #000;
+  --td-button-primary-text-color: #fa4126;
+}