团购支付

2024-04-08 21:33:15 +08:00
parent 935d56227d
commit c94ddeed1a
14 changed files with 483 additions and 384 deletions
--- a/src/pages/common/groupbuy/order-confirm.vue
+++ b/src/pages/common/groupbuy/order-confirm.vue
@@ -0,0 +1,196 @@
+<template>
+  <view class='content'>
+
+    <view class='card-view'>
+      <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>
+          <text class='goods-sku'>{{ item?.stockStock?.colorName }} {{ item?.stockStock?.sizeName }}</text>
+        </view>
+
+        <view class='c-flex-column'>
+          <text class='goods-num'>x{{ item?.goodsNum }}</text>
+          <view class='c-flex-row'>
+            <text class='goods-price' style='margin-right: 10rpx;text-decoration: line-through'>¥{{ item?.originPrice }}
+            </text>
+            <text class='goods-price'>¥{{ item?.consumePrice }}</text>
+          </view>
+        </view>
+      </template>
+    </view>
+
+    <view class='card-view'>
+      <text style='flex: 1'>实付</text>
+      <text style='color: #F32B2B'>¥{{ orderBean?.totalPrice || 0 }}</text>
+    </view>
+
+    <view class='bottom-view c-flex-row'>
+      <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>
+
+</template>
+
+<script lang='ts' setup>
+import { pay, progress } from '@/api/groupbuy';
+import { OrderBean } from '@/api/goods/types';
+import { parseParameter, sortASCII } from '@/utils';
+import { hexMD5 } from '@/utils/common/md5';
+import { useUserStore } from '@/store';
+
+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 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_img: orderBean?.value?.orderGoods[0].images || '',
+    merchant_name: terminalInfo.value.companyName,
+    notify_url: 'https://www.baidu.com'
+  }, true);
+});
+
+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': buildSignParams.value.client_sn,
+    'terminal_key': terminalInfo.value.terminalKey,
+    'terminal_sn': terminalInfo.value.terminalSn
+  };
+
+  progress(params);
+  pay({
+    'orderId': orderBean.value?.id,
+    'result': '{payResult:xxx}'
+  });
+};
+
+</script>
+
+<style lang='scss' scoped>
+.content {
+  .card-view:nth-of-type(1) {
+    margin-top: 30rpx;
+  }
+}
+
+.card-view {
+  display: flex;
+  flex-direction: row;
+  margin: 10rpx 30rpx;
+  background: #FFFFFF;
+  font-size: 35rpx;
+  padding: 30rpx;
+
+  .goods-image {
+    width: 130rpx;
+    height: 130rpx;
+    margin-right: 15rpx;
+    border-radius: 8rpx;
+  }
+
+  .goods-name {
+    color: #333333;
+  }
+
+  .goods-sku {
+    font-size: 30rpx;
+    color: #666666;
+  }
+
+  .c-flex-column {
+    justify-content: space-between;
+
+    .goods-num {
+      display: flex;
+      font-size: 30rpx;
+      justify-content: flex-end;
+      color: #999999;
+    }
+
+    .goods-price {
+      @extend .goods-num;
+    }
+  }
+}
+
+.bottom-view {
+  background: #FFFFFF;
+  padding: 20rpx 30rpx 78rpx 33rpx;
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  sqb-pay {
+    flex: 1;
+
+    .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>