feat(page):支付成功页面，消息模板通知

app.json

@@ -1,6 +1,5 @@
 {
   "pages": [
-    
     "pages/scan/scan",
     "pages/quantify/quantify",
     "pages/moreOrder/moreOrder",
@@ -13,7 +12,8 @@
     "components/orderItem/orderItem",
     "components/orderInfo/orderInfo",
     "components/orderItemInfo/orderItemInfo",
-    "components/pay/pay"
+    "components/pay/pay",
+    "pages/payResult/payResult"
   ],
   "window": {
     "navigationBarTextStyle": "black",

js/api.js

@@ -211,6 +211,10 @@ function request_GetNozzleInfo(data) {
   return request('api/Nozzle/GetFuelNozzleInfoById', 'GET', data)
 }
 
+//发送消息模板
+function request_sendMessage(data) {
+  return request('api/Transactions/SendMessage','POST',data)
+}
 export default {
   request_GetSiteInfo,
   request_wechatPay,
@@ -223,5 +227,6 @@ export default {
   request_AddMiniprogramUser,
   request_RefundTrx,
   request_GetNozzleInfo,
-  request_WXFindOrders
+  request_WXFindOrders,
+  request_sendMessage
 }

pages/TransactionPage/TransactionPage.js

@@ -133,17 +133,59 @@ Page({
       }
     })
   },
-
+  
   /** 支付按钮点击事件 */
   toPay() {
+    var that = this;
     api.request_wechatPay(this.data.order.orderId).then(res => {
       console.log("支付结果", res)
-      this.pay()
+      this.subMessage()
+      // this.pay()
     }).catch(err => {
       console.log("支付失败", err)
     })
+  },
+  /** 订阅消息模板 */
+  subMessage() {
+    const that = this;
+    wx.requestSubscribeMessage({
+      tmplIds: ['V0tl-4n-5hwNZc4SrEttvrmawAyM-SB0pQWZNwp54Ks'], // 最多支持3条
+      success(res) {
+        that.pay()
+        // 'accept'表示用户同意订阅该条id对应的模板消息
+        if (res['V0tl-4n-5hwNZc4SrEttvrmawAyM-SB0pQWZNwp54Ks'] === 'accept') {
+          // 用户同意订阅，调用云函数或服务器接口发送订阅消息
+          // wx.cloud.callFunction({
+          //   name: 'sendSubscribeMessage',
+          //   data: {
+          //     templateId: '配置好的模板ID',
+          //     openid: 'o8pFb5cWH1KkBDvGls2X7yMiFkGA',
+          //     data: {
+          //       thing1: {
+          //         value: '活动名称'
+          //       },
+          //       // 其他参数...
+          //     }
+          //   },
+          //   success(res) {
+          //     console.log('订阅消息发送成功', res)
+          //   },
+          //   fail(err) {
+          //     console.error('订阅消息发送失败', err)
+          //   }
+          // })
+          
+        }
+      },
+      fail(err) {
+        that.pay()
+      }
+    })
+
+    
   },
   pay() {
+    const that = this;
     api.request_wechatPay(this.data.order.orderId)
       .then(res => {
         wx.requestPayment({
@@ -154,14 +196,9 @@ Page({
           paySign: res.data.data.unifiedOrderResult.paySign,
           success: res => {
             wx.hideLoading()
-            wx.showToast({
-              title: '支付成功！',
-            })
-            setTimeout(function () {
-              wx.redirectTo({
-                url: '../scan/scan',
-              })
-            }, 2000)
+            that.sendMessage()
+            that.toPayResult()
+            
           },
           fail: res => {
             wx.hideLoading()
@@ -177,4 +214,35 @@ Page({
         })
       });
   },
+
+  /** 发送消息模板 */
+  sendMessage() {
+    const message = {
+      trxid:this.data.order.orderId,
+      orderType:'支付成功'
+    }
+    api.request_sendMessage(message).then(res => {
+      console.log("发送消息模板结果",res)
+    }).catch(err => {
+      console.log("发送消息模板失败",err)
+    })
+  },
+
+  /** 跳转到支付结果页 */
+  toPayResult(){
+    const that = this;
+    setTimeout(function () {
+      wx.navigateTo({
+        url: '../payResult/payResult?nozzle=' + that.data.nozzleId,
+        events: {
+          acceptOrderFromPayResult: function (data) {
+            console.log("获取到来自result页面传送过来的订单", data)
+            that.setData({
+              order: data
+            })
+          }
+        }
+      })
+    }, 500)
+  }
 })

pages/login/login.wxml

@@ -5,7 +5,7 @@
   <view class="action-text">立码加油</view>
   <button class="auth-button" open-type="getPhoneNumber" style="width: 547rpx; height: 94rpx; display: block; box-sizing: border-box; left: 0rpx; top: 0rpx"  bindtap="handleAuthLogin" bindgetphonenumber="handleAuthLogin">一键授权登录</button>
   <view class="agreement">
-    <button class="auth-button"   bindtap="pay">支付</button>
+    <button class="auth-button"   bindtap="subMessage">支付</button>
     <button class="auth-button"   bindtap="RefundTrx">退款</button>
     <button open-type="getPhoneNumber" bindgetphonenumber="handleGetPhoneNumber">获取手机号</button>
     <checkbox checked="{{true}}" disabled="{{true}}" />

pages/payResult/payResult.js

@@ -0,0 +1,94 @@
+// pages/payResult/payResult.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    nozzleId:-1
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+    this.setData({
+      nozzleId:options.nozzle
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  },
+
+  /** 查看订单 */
+  toMoreOrder(){
+    const that = this;
+    wx.navigateTo({
+      url: '../moreOrder/moreOrder?nozzle=' + this.data.nozzleId,
+      events: {
+        acceptOrderFromMoreOrder: function (data) {
+          console.log("【支付结果页】获取到传送过来的订单", data)
+          that.setData({
+            order: data
+          })
+          const eventChannel = that.getOpenerEventChannel()
+          eventChannel.emit('acceptOrderFromPayResult', data);
+          wx.navigateBack()
+        }
+      }
+    })
+  },
+
+  /** 完成 */
+  finish() {
+    wx.redirectTo({
+      url: '../scan/scan',
+    })
+  }
+})

pages/payResult/payResult.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "navigationBarTitleText": ""
+}

pages/payResult/payResult.wxml

@@ -0,0 +1,14 @@
+<view class="payResultContainer">
+  <!-- 标识区 -->
+  <view class="signBox">
+    <icon type="success" size="100" />
+    <text>支付成功</text>
+  </view>
+
+  <view class="buttonBox">
+    <text class="checkOrderBtn" bind:tap="toMoreOrder">查看订单</text>
+    <text class="finishBtn" bind:tap="finish">完成</text>
+  </view>
+
+  <text class="bottomTip">客服帮助 | 隐私政策等</text>
+</view>

pages/payResult/payResult.wxss

@@ -0,0 +1,70 @@
+.payResultContainer{
+  height: 100vh;
+  background-color: #f2f2f2;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.signBox{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex-grow: 1;
+}
+.signBox icon{
+  flex-grow: 2;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.signBox text {
+  font-weight: 600;
+  flex-grow: 1;
+}
+
+.buttonBox{
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  align-items: center;
+  flex-grow: 1;
+  width: 90%;
+  margin-top: 8%;
+}
+.checkOrderBtn{
+  background-color: #d81e07;
+  color: #FFFFFF;
+  height: 6vh;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: small;
+  font-weight: 600;
+  border-radius: 10rpx;
+  margin-bottom: 10%;
+}
+.finishBtn{
+  background-color: #FFFFFF;
+  color: #d81e07;
+  height: 6vh;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: small;
+  font-weight: 600;
+  border-radius: 10rpx;
+  border: #d81e07 solid 5rpx;
+}
+
+.bottomTip{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex-grow: 1;
+  color: #999999;
+}

pages/scan/scan.js

@@ -1,6 +1,7 @@
 const {
   default: api
 } = require("../../js/api");
+const utils = require('../../utils/util')
 
 Page({
   data: {
@@ -15,7 +16,7 @@ Page({
    * 生命周期函数--监听页面加载
    */
   onLoad(options) {
-    this.getSiteInfo()
+
   },
 
   onShow(){
@@ -30,10 +31,16 @@ Page({
         return
       }
       console.log("站点信息",res)
+      var formatePhone = utils.formatPhone(res.data.data.userInfo.userPhoneNumber);
       this.setData({
         isLoggedIn: true,
         site:res.data.data.site,
-        userInfo: res.data.data.userInfo,
+        userInfo: {
+          userAddress:res.data.data.userInfo.userAddress,
+          userAvatarUrl:res.data.data.userInfo.userAvatarUrl,
+          userPhoneNumber:formatePhone,
+          userName:res.data.data.userInfouserName
+        },
         scanTitle: '扫码加油',
         scanTip: '请扫码加油机键盘上的二维码'
       })

utils/util.js

@@ -10,13 +10,13 @@ const formatTime = date => {
 }
 
 const formatDateNotSecond = isoString => {
-  if(isoString == undefined) return '';
+  if (isoString == undefined) return '';
   const date = new Date(isoString);
 
   const year = date.getFullYear();
   const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are zero-based
   const day = String(date.getDate()).padStart(2, '0');
-  
+
   const hours = String(date.getHours()).padStart(2, '0');
   const minutes = String(date.getMinutes()).padStart(2, '0');
 
@@ -28,7 +28,25 @@ const formatNumber = n => {
   return n[1] ? n : `0${n}`
 }
 
+const formatPhone = phone => {
+  // 检查手机号是否有效
+  if (!phone || phone.length !== 11) {
+    return phone;
+  }
+
+  // 获取手机号前3位和后4位
+  const start = phone.substring(0, 3);
+  const end = phone.substring(7);
+
+  // 将中间4位数字替换为星号
+  const hidden = '****';
+
+  // 返回处理后的手机号
+  return start + hidden + end;
+}
+
 module.exports = {
   formatTime,
-  formatDateNotSecond
-}
+  formatDateNotSecond,
+  formatPhone
+}