团购支付

src/pages/common/groupbuy/detail.vue

@@ -125,7 +125,7 @@
       <view class='place-order-button' @click.stop='placeOrder'>跟团购买</view>
     </view>
   </view>
-  <sku-dialog ref='skuDialogRef' :flash-price='groupBuyBean?.payPrice || 0' />
+  <sku-dialog ref='skuDialogRef' :flash-price='Number(groupBuyBean?.payPrice) || 0' />
 </template>
 
 <script lang='ts' setup>
@@ -252,7 +252,7 @@ const placeOrder = async () => {
     };
 
     const result = await preOrder(params);
-    goPath(`/pages/common/groupbuy/order?orderBean=${encodeURIComponent(JSON.stringify(result))}`);
+    goPath(`/pages/common/groupbuy/order-confirm?orderBean=${encodeURIComponent(JSON.stringify(result))}`);
   }
 
   showSkuDialog((e: GoodsBean) => {

src/pages/common/groupbuy/order-confirm.vue

@@ -2,7 +2,7 @@
   <view class='content'>
 
     <view class='card-view'>
-      <template v-for='(item,index) in orderBean?.orderGoods' :key='index'>
+      <template class='c-flex-row' v-for='item in orderBean?.orderGoods' :key='item.id'>
         <image class='goods-image' :src='item?.images' />
         <view class='c-flex-column' style='flex: 1'>
           <text class='goods-name'>{{ item?.goodsName }}</text>
@@ -26,7 +26,18 @@
     </view>
 
     <view class='bottom-view c-flex-row'>
-      <view class='confirm-button' @click.stop='payment'>支付</view>
+      <sqb-pay @bindnavigateTo='navigateTo'
+               :return_url='payParams.return_url'
+               :total_amount='payParams.total_amount'
+               :terminal_sn='payParams.terminal_sn'
+               :client_sn='payParams.client_sn'
+               :subject='payParams.subject'
+               :subject_img='payParams.subject_img '
+               :merchant_name='payParams.merchant_name'
+               :notify_url='payParams.notify_url'
+               :sign='payParams.sign'>
+        <button class='confirm-button' @click='payment'>支付</button>
+      </sqb-pay>
     </view>
   </view>
 
@@ -34,7 +45,7 @@
 
 <script lang='ts' setup>
 import { pay, progress } from '@/api/groupbuy';
-import { OrderBean } from '@/api/groupbuy/types';
+import { OrderBean } from '@/api/goods/types';
 import { parseParameter, sortASCII } from '@/utils';
 import { hexMD5 } from '@/utils/common/md5';
 import { useUserStore } from '@/store';
@@ -43,36 +54,59 @@ const userState = useUserStore();
 const { terminalInfo } = storeToRefs(userState);
 
 const orderBean = ref<OrderBean>();
+const payParams = ref({
+  return_url: '',
+  total_amount: '',
+  client_sn: '',
+  terminal_sn: '',
+  subject: '',
+  subject_img: '',
+  merchant_name: '',
+  notify_url: '',
+  sign: ''
+});
 
 onLoad((e: any) => {
   orderBean.value = JSON.parse(decodeURIComponent(e?.orderBean));
+
+  let signParams = buildSignParams.value;
+  const signStr = parseParameter(signParams) + '&key=' + terminalInfo.value.terminalKey;
+  const sign = hexMD5(signStr).toUpperCase();
+  payParams.value = {
+    ...signParams,
+    sign: sign
+  };
 });
 
-const payment = () => {
-  let signParams = {
-    return_url: 'return_url',
-    total_amount: orderBean.value?.totalPrice,
-    client_sn: orderBean.value?.id,
+const buildSignParams = computed(() => {
+  return sortASCII({
+    client_sn: orderBean.value?.id || '',
+    return_url: '/pages/payResult/index',
+    total_amount: ((orderBean.value?.totalPrice || 0) * 100).toString(),
     terminal_sn: terminalInfo.value.terminalSn,
-    subject: 'subject',
-    subject_img: 'subject_img',
-    merchant_name: 'merchant_name',
+    subject: '商品团购券',
+    subject_img: orderBean?.value?.orderGoods[0].images || '',
+    merchant_name: terminalInfo.value.companyName,
     notify_url: 'https://www.baidu.com'
-  };
-  // signParams = util.sortASCII(signParams, true);
-  sortASCII(signParams, true);
-  //参数拼接
-  // const signStr = util.pars(signParams) + '&key=' + terminalInfo.value.terminalKey;
-  const signStr = parseParameter(signParams) + '&key=' + terminalInfo.value.terminalKey;
-  console.log('签名字符串', signStr);
-  // const sign = utilMd5.hexMD5(signStr).toUpperCase();
-  const sign = hexMD5(signStr);
+  }, true);
+});
 
-  console.log('签名结果', sign);
+const navigateTo = (e: any) => {
+  console.log('----------->>>>>navigateTo ', e);
+  uni.redirectTo({
+    url: e.detail.url,
+    fail(e) {
+      uni.showToast({
+        title: '支付失败'
+      });
+    }
+  });
+};
 
+const payment = () => {
   const params = {
     'id': orderBean.value?.id,
-    'orderSn': signParams.client_sn,
+    'orderSn': buildSignParams.value.client_sn,
     'terminal_key': terminalInfo.value.terminalKey,
     'terminal_sn': terminalInfo.value.terminalSn
   };
@@ -80,14 +114,13 @@ const payment = () => {
   progress(params);
   pay({
     'orderId': orderBean.value?.id,
-    'result': JSON.stringify('{payResult:xxx}')
+    'result': '{payResult:xxx}'
   });
 };
 
 </script>
 
 <style lang='scss' scoped>
-
 .content {
   .card-view:nth-of-type(1) {
     margin-top: 30rpx;
@@ -142,18 +175,22 @@ const payment = () => {
   right: 0;
   bottom: 0;
 
-  .confirm-button {
-    display: flex;
+  sqb-pay {
     flex: 1;
-    font-weight: bold;
-    width: 100%;
-    font-size: 30rpx;
-    height: 80rpx;
-    align-items: center;
-    justify-content: center;
-    background: #F32B2B;
-    color: #FFFFFF;
-    border-radius: 40rpx;
+
+    .confirm-button {
+      display: flex;
+      flex: 1;
+      font-weight: bold;
+      width: 100%;
+      font-size: 30rpx;
+      height: 80rpx;
+      align-items: center;
+      justify-content: center;
+      background: #F32B2B;
+      color: #FFFFFF;
+      border-radius: 40rpx;
+    }
   }
 }
 </style>