popPayment.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. <template>
  2. <div>
  3. <van-nav-bar title="订单信息" />
  4. <van-card class="my-card" v-for="(orderDetail, index) in orderDetails" :key="index" :num="orderDetail.productNumber"
  5. :price="orderDetail.price.toFixed(2)" :title="orderDetail.productName"
  6. :thumb="showSugarPhoto(orderDetail.productNo)" />
  7. <van-submit-bar :price="amount" button-color="#07c160" button-text="支付" @click="wxPay()" />
  8. </div>
  9. </template>
  10. <script>
  11. import { useRoute } from "vue-router";
  12. import { showFailToast, showSuccessToast, showToast, showDialog } from 'vant';
  13. import { getOrderBySn } from '@/service/popPayment';
  14. import { onMounted, ref } from "vue";
  15. export default {
  16. name: 'popPayment',
  17. setup() {
  18. const route = useRoute();
  19. const sn = route.query.sn;
  20. const status = route.query.status;
  21. const order = ref(null);
  22. const orderDetails = ref([]);
  23. const amount = ref();
  24. // const price = ref();
  25. onMounted(async () => {
  26. if (status == 1) {
  27. showDialog({
  28. message: '订单已支付',
  29. theme: 'round-button',
  30. confirmButtonColor: '#07c160',
  31. }).then(() => {
  32. if (typeof window.WeixinJSBridge !== 'undefined') {
  33. window.WeixinJSBridge.call('closeWindow');
  34. } else {
  35. window.close();
  36. }
  37. })
  38. } else {
  39. await getOrder();
  40. }
  41. });
  42. const getOrder = async () => {
  43. const { data } = await getOrderBySn({ sn: sn });
  44. if (data.code === '00000') {
  45. order.value = data.data;
  46. orderDetails.value = data.data.orderDetails;
  47. console.log("order", order.value);
  48. console.log("orderDetails", orderDetails.value[0]);
  49. amount.value = order.value.price * 100;
  50. // console.log(amount.value);
  51. // price.value = order.value.price.toFixed(2);
  52. } else { showFailToast(data.message); }
  53. };
  54. const showSugarPhoto = (no) => {
  55. if (no == 'A99') {
  56. return require(`../assets/order/spunSugar/goods/A30.png`);
  57. }
  58. return require(`../assets/order/spunSugar/goods/${no}.png`);
  59. };
  60. const wxPay = () => {
  61. WeixinJSBridge.invoke(
  62. 'getBrandWCPayRequest', {
  63. "appId": "wxcd5b1b2636c9f611", //公众号ID,由商户传入
  64. "timeStamp": route.query.timeStamp, //时间戳,自1970年以来的秒数
  65. "nonceStr": route.query.nonceStr, //随机串
  66. "package": route.query.package,
  67. "signType": "RSA", //微信签名方式:
  68. "paySign": route.query.paySign //微信签名
  69. },
  70. function (res) {
  71. if (res.err_msg == "get_brand_wcpay_request:ok") {
  72. console.log("支付成功");
  73. showSuccessToast('支付成功');
  74. } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
  75. console.log("取消支付");
  76. showToast('取消支付');
  77. } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
  78. console.log("支付失败");
  79. showFailToast('支付失败');
  80. }
  81. }
  82. )
  83. };
  84. return {
  85. wxPay,
  86. getOrder,
  87. orderDetails,
  88. showSugarPhoto,
  89. // price,
  90. amount
  91. };
  92. }
  93. };
  94. </script>
  95. <style>
  96. .van-image__img {
  97. object-fit: contain !important;
  98. }
  99. </style>