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

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