index.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. <template>
  2. <!-- 下单结果页面 -->
  3. <view class="content">
  4. <image :src="getFileUrl('img/icon/success.png')" mode="widthFix" class="result-img"></image>
  5. <view class="result-title">下单成功</view>
  6. <view class="result-desc">您的菜马上就来,坐等开吃</view>
  7. <view class="result-btns">
  8. <view class="result-btn1" hover-class="hover-active" @click="handleGoAddFood">去加餐</view>
  9. <view class="result-btn2" hover-class="hover-active" @click="handleGoSettle">去结算</view>
  10. </view>
  11. </view>
  12. </template>
  13. <script setup>
  14. import { onLoad } from "@dcloudio/uni-app";
  15. import { ref } from "vue";
  16. import { go } from "@/utils/utils.js";
  17. import { getFileUrl } from "@/utils/file.js";
  18. const resultOrderId = ref(''); // 本页 URL 上的订单ID(下单成功跳转时带的 id)
  19. // 去加餐:从缓存取桌号、人数并带上,点餐页依赖 tableid、diners 拉取列表和购物车
  20. const handleGoAddFood = () => {
  21. const tableid = uni.getStorageSync('currentTableId') ?? '';
  22. const diners = uni.getStorageSync('currentDiners') ?? '';
  23. const q = [];
  24. if (tableid !== '' && tableid != null) q.push(`tableid=${encodeURIComponent(String(tableid))}`);
  25. if (diners !== '' && diners != null) q.push(`diners=${encodeURIComponent(String(diners))}`);
  26. go(q.length ? `/pages/orderFood/index?${q.join('&')}` : '/pages/orderFood/index');
  27. };
  28. // 去结算:带上桌号、人数、金额、备注,确认订单页才显示金额并走「确认支付」
  29. const handleGoSettle = () => {
  30. let orderId = '';
  31. let orderNo = '';
  32. let tableId = '';
  33. let tableNumber = '';
  34. let diners = '';
  35. let totalAmount = '';
  36. let remark = '';
  37. try {
  38. const raw = uni.getStorageSync('lastPlaceOrderInfo');
  39. if (raw) {
  40. const data = JSON.parse(raw);
  41. orderId = data?.orderId ?? resultOrderId.value ?? '';
  42. orderNo = data?.orderNo ?? '';
  43. tableId = data?.tableId ?? '';
  44. tableNumber = data?.tableNumber ?? '';
  45. diners = data?.diners ?? '';
  46. totalAmount = data?.totalAmount != null ? String(data.totalAmount) : '';
  47. remark = (data?.remark ?? '').trim().slice(0, 30);
  48. }
  49. if (!orderId) orderId = resultOrderId.value;
  50. } catch (e) {
  51. console.error('读取下单信息失败', e);
  52. }
  53. const q = [];
  54. if (orderId !== '') q.push(`orderId=${encodeURIComponent(String(orderId))}`);
  55. if (orderNo !== '') q.push(`orderNo=${encodeURIComponent(String(orderNo))}`);
  56. if (tableId !== '') q.push(`tableId=${encodeURIComponent(tableId)}`);
  57. if (tableNumber !== '') q.push(`tableNumber=${encodeURIComponent(tableNumber)}`);
  58. if (diners !== '') q.push(`diners=${encodeURIComponent(diners)}`);
  59. if (totalAmount !== '') q.push(`totalAmount=${encodeURIComponent(totalAmount)}`);
  60. if (remark !== '') q.push(`remark=${encodeURIComponent(remark)}`);
  61. go(q.length ? `/pages/placeOrder/index?${q.join('&')}` : '/pages/placeOrder/index');
  62. };
  63. onLoad((options) => {
  64. resultOrderId.value = options?.id ?? '';
  65. });
  66. </script>
  67. <style lang="scss" scoped>
  68. .content {
  69. background-color: #fff;
  70. width: 100%;
  71. height: 100vh;
  72. overflow: hidden;
  73. text-align: center;
  74. }
  75. .result-img {
  76. width: 84rpx;
  77. height: 84rpx;
  78. margin-top: 64rpx;
  79. }
  80. .result-title {
  81. font-weight: bold;
  82. font-size: 34rpx;
  83. color: #151515;
  84. margin-top: 30rpx;
  85. }
  86. .result-desc {
  87. font-size: 30rpx;
  88. color: #666666;
  89. margin-top: 10rpx;
  90. margin-top: 40rpx;
  91. }
  92. .result-btns {
  93. display: flex;
  94. justify-content: space-around;
  95. align-items: center;
  96. margin-top: 40rpx;
  97. width: 100%;
  98. margin-top: 52rpx;
  99. padding: 0 60rpx;
  100. .result-btn1 {
  101. width: 252rpx;
  102. height: 80rpx;
  103. box-shadow: 0rpx -11rpx 46rpx 0rpx rgba(86, 125, 244, 0.05);
  104. border-radius: 19rpx 19rpx 19rpx 19rpx;
  105. border: 2rpx solid #F47D1F;
  106. font-weight: bold;
  107. font-size: 27rpx;
  108. color: #F47D1F;
  109. display: flex;
  110. align-items: center;
  111. justify-content: center;
  112. }
  113. .result-btn2 {
  114. width: 252rpx;
  115. height: 80rpx;
  116. background: linear-gradient(90deg, #FCB73F 0%, #FC743D 100%);
  117. box-shadow: 0rpx -11rpx 46rpx 0rpx rgba(86, 125, 244, 0.05);
  118. border-radius: 19rpx 19rpx 19rpx 19rpx;
  119. font-weight: bold;
  120. font-size: 27rpx;
  121. color: #FFFFFF;
  122. display: flex;
  123. align-items: center;
  124. justify-content: center;
  125. }
  126. }
  127. </style>