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

<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 || item?.goodsCode }}</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 @navigateTo='navigateTo'
               :return_url='buildSqbParams.return_url'
               :total_amount='buildSqbParams.total_amount'
               :terminal_sn='buildSqbParams.terminal_sn'
               :client_sn='buildSqbParams.client_sn'
               :subject='buildSqbParams.subject'
               :subject_img='buildSqbParams.subject_img '
               :merchant_name='buildSqbParams.merchant_name'
               :notify_url='buildSqbParams.notify_url'
               :sign='buildSqbParams.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/order/types';
import { parseParameter, sortASCII } from '@/utils';
import { hexMD5 } from '@/utils/common/md5';
import { useUserStore } from '@/store';
import { handlePayResult } from '@/utils/order';

const userState = useUserStore();
const { terminalInfo } = storeToRefs(userState);

const orderBean = ref<OrderBean>();

onLoad((e: any) => {
  orderBean.value = JSON.parse(decodeURIComponent(e?.orderBean));
});

const buildSqbParams = computed(() => {
  const params = sortASCII({
    client_sn: orderBean.value?.id || '',
    return_url: '/pages/common/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);

  return {
    ...params,
    sign: hexMD5(parseParameter(params) + '&key=' + terminalInfo.value.terminalKey).toUpperCase()
  };
});

const navigateTo = (e: any) => {
  console.log('----------->>>>>navigateTo ', e);
  handlePayResult(orderBean.value?.id, e, {
    onSuccess: () => {
      pay({
        'orderId': orderBean.value?.id,
        'result': 'xxx'
      });
    }
  });
};

const payment = () => {
  const params = {
    'id': orderBean.value?.id,
    'orderSn': buildSqbParams.value.client_sn,
    'terminal_key': terminalInfo.value.terminalKey,
    'terminal_sn': terminalInfo.value.terminalSn
  };
  progress(params);
};
</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>