feat: 查积分、支付、拆弹、取消订单

supplied-h5/src/view/joyful-selection/order/checkout/index.vue

@@ -55,7 +55,9 @@
 
 <script>
 import { mapActions, mapState } from 'pinia'
+import { postFunction } from '@/api/supplied-service'
 import { useCartStore } from '@/store/cart'
+import { useUserStore } from '@/store/user'
 import { readAddresses, readChosenAddressId } from '../../address/address-data'
 import { createOrderNo, savePaymentInfo } from '../payment/payment-data'
 
@@ -67,10 +69,12 @@ export default {
     remark: '',
     goods: [],
     showAllGoods: false,
-    chosenAddress: {}
+    chosenAddress: {},
+    submitting: false
   }),
   computed: {
     ...mapState(useCartStore, ['items']),
+    ...mapState(useUserStore, ['supplierId', 'token', 'userId']),
     visibleGoods() {
       return this.showAllGoods ? this.goods : this.goods.slice(0, 3)
     },
@@ -91,6 +95,7 @@ export default {
   },
   methods: {
     ...mapActions(useCartStore, ['loadCart']),
+    ...mapActions(useUserStore, ['fetchBridgeToken']),
     getCheckoutGoods() {
       const storedItems = this.readCheckoutItems()
 
@@ -122,15 +127,44 @@ export default {
     maskTel(tel = '') {
       return tel.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')
     },
-    onSubmit() {
-      savePaymentInfo({
-        orderNo: createOrderNo(),
-        amount: this.goodsAmount,
-        receiverName: this.chosenAddress.name || '',
-        receiverTel: this.maskTel(this.chosenAddress.tel || ''),
-        goods: this.goods
-      })
-      this.$router.push('/joyful-selection/payment')
+    async onSubmit() {
+      if (this.submitting) {
+        return
+      }
+
+      this.submitting = true
+      try {
+        await this.fetchBridgeToken()
+
+        if (!this.supplierId || !this.token || !this.userId) {
+          throw new Error('供应商授权信息不完整，请重新进入商城')
+        }
+
+        const orderNo = createOrderNo()
+        const data = await postFunction('order-create', {
+          supplierId: this.supplierId,
+          userId: this.userId,
+          token: this.token,
+          orderNo,
+          amount: this.goodsAmount,
+          goods: this.goods
+        })
+
+        savePaymentInfo({
+          orderNo: data?.orderId || orderNo,
+          orderNumberId: data?.orderNumberId || '',
+          amount: this.goodsAmount,
+          receiverName: this.chosenAddress.name || '',
+          receiverTel: this.maskTel(this.chosenAddress.tel || ''),
+          goods: this.goods
+        })
+        this.$router.push('/joyful-selection/payment')
+      } catch (error) {
+        console.warn('提交待支付订单失败', error)
+        this.$toast(error.message || '提交待支付订单失败')
+      } finally {
+        this.submitting = false
+      }
     }
   }
 }

supplied-h5/src/view/joyful-selection/order/payment/index.vue

@@ -37,7 +37,9 @@
       </van-radio-group>
     </section>
 
-    <van-button class="pay-button" round block @click="onPay">立即支付 ¥{{ amountText }}</van-button>
+    <van-button class="pay-button" round block :loading="submitting" @click="onPay">
+      立即支付 ¥{{ amountText }}
+    </van-button>
 
     <van-popup v-model="showConfirm" class="pay-popup" round position="bottom">
       <article class="pay-panel">
@@ -54,8 +56,8 @@
           <p><span>订单编号</span><b>{{ paymentInfo.orderNo || '-' }}</b></p>
         </div>
         <footer>
-          <van-button round @click="showConfirm = false">取消</van-button>
-          <van-button round type="danger" @click="confirmPay">确认支付</van-button>
+          <van-button round :disabled="submitting" @click="showConfirm = false">取消</van-button>
+          <van-button round type="danger" :loading="submitting" @click="confirmPay">确认支付</van-button>
         </footer>
       </article>
     </van-popup>
@@ -63,6 +65,9 @@
 </template>
 
 <script>
+import { mapActions, mapState } from 'pinia'
+import { postFunction } from '@/api/supplied-service'
+import { useUserStore } from '@/store/user'
 import { readPaymentInfo, formatYuan } from './payment-data'
 
 export default {
@@ -70,10 +75,11 @@ export default {
   data: () => ({
     payType: 'points',
     showConfirm: false,
-    paymentInfo: {},
-    pointsBalance: '32.00'
+    submitting: false,
+    paymentInfo: {}
   }),
   computed: {
+    ...mapState(useUserStore, ['pointsBalance', 'supplierId', 'token']),
     amountText() {
       return formatYuan(this.paymentInfo.amount)
     },
@@ -81,7 +87,7 @@ export default {
       const name = this.paymentInfo.receiverName || '-'
       const tel = this.paymentInfo.receiverTel || ''
 
-      return tel ? `${name}　${tel}` : name
+      return tel ? `${name} ${tel}` : name
     },
     payTypeText() {
       const method = this.payMethods.find(item => item.name === this.payType)
@@ -90,21 +96,61 @@ export default {
     },
     payMethods() {
       return [
-        { name: 'points', label: `积分支付（余额：¥${this.pointsBalance}）`, icon: 'gold-coin-o' },
+        { name: 'points', label: `积分支付（余额：¥${this.pointsBalanceText}）`, icon: 'gold-coin-o' },
         { name: 'wechat', label: '微信支付', icon: 'wechat-pay' },
         { name: 'alipay', label: '支付宝支付', icon: 'alipay' }
       ]
+    },
+    pointsBalanceText() {
+      return Number(this.pointsBalance || 0).toLocaleString('zh-CN', {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2
+      })
     }
   },
   created() {
     this.paymentInfo = readPaymentInfo()
+    this.fetchUserPoints().catch(error => {
+      console.warn('查询用户积分失败', error)
+      this.$toast(error.message || '查询用户积分失败')
+    })
   },
   methods: {
+    ...mapActions(useUserStore, ['fetchUserPoints', 'fetchBridgeToken']),
     onPay() {
       this.showConfirm = true
     },
-    confirmPay() {
-      this.$router.push({ path: '/joyful-selection/payment-success', query: { payType: this.payType } })
+    async confirmPay() {
+      if (this.submitting) {
+        return
+      }
+
+      this.submitting = true
+      try {
+        await this.fetchBridgeToken()
+
+        if (!this.supplierId || !this.token || !this.paymentInfo.orderNo) {
+          throw new Error('订单支付信息不完整，请重新提交订单')
+        }
+
+        await postFunction('order-pay', {
+          supplierId: this.supplierId,
+          token: this.token,
+          orderId: this.paymentInfo.orderNo,
+          amount: this.paymentInfo.amount,
+          totalPrice: Number(this.amountText),
+          wPayOrAPay: 0,
+          pointsPrice: Number(this.amountText)
+        })
+
+        this.showConfirm = false
+        this.$router.push({ path: '/joyful-selection/payment-success', query: { payType: this.payType } })
+      } catch (error) {
+        console.warn('确认购买失败', error)
+        this.$toast(error.message || '确认购买失败')
+      } finally {
+        this.submitting = false
+      }
     }
   }
 }

supplied-h5/src/view/joyful-selection/order/payment/payment-data.js

@@ -5,7 +5,7 @@ export const createOrderNo = () => {
   const pad = value => String(value).padStart(2, '0')
   const timestamp = `${now.getFullYear()}${pad(now.getMonth() + 1)}${pad(now.getDate())}${pad(now.getHours())}${pad(now.getMinutes())}${pad(now.getSeconds())}`
 
-  return `YX${timestamp}`
+  return `ORD${timestamp}`
 }
 
 export const savePaymentInfo = info => {