選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

order-confirm-receipt.vue 4.8KB

6ヶ月前
7ヶ月前
1年前
7ヶ月前
1年前
7ヶ月前
1年前
1年前
7ヶ月前
6ヶ月前
7ヶ月前
7ヶ月前
7ヶ月前
7ヶ月前
1年前
7ヶ月前
1年前
1年前
1年前
7ヶ月前
1年前
1年前
1年前
7ヶ月前
1年前
1年前
7ヶ月前
1年前
1年前
7ヶ月前
1年前
7ヶ月前
1年前
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214
  1. <!-- 订单详情-确认收货 -->
  2. <template>
  3. <navBar title="确认收货" navbgClass="nav-bgXin" fontColor='#fff' :scrollTop="scrollTop"></navBar>
  4. <view class="bg-img">
  5. <image :src="`${$imgUrl}order/bg-order.png`" mode="scaleToFill" class="icon"></image>
  6. </view>
  7. <view class="content">
  8. <view class="status">
  9. <text>待收货</text>
  10. </view>
  11. <view>
  12. <text>创建时间:</text>
  13. <text>{{getOrderTime(state.orderInfo.insertTime)}}</text>
  14. </view>
  15. <view class="order">
  16. <view class="num">
  17. <text>订单号:</text>
  18. <text>{{state.orderInfo.orderNo}}</text>
  19. </view>
  20. <view class="name">
  21. <text>产品名称:</text>
  22. <text>{{state.orderInfo.productName ?state.orderInfo.productName: ''}}</text>
  23. </view>
  24. </view>
  25. <view class="message" v-if="state.orderInfo.cardId">
  26. <view class="message-top1">
  27. <view class="msg">
  28. <view class="vehiclePlate">
  29. <text>订单车牌:</text>
  30. <text>{{state.orderInfo.vehiclePlate}}</text>
  31. </view>
  32. <view>
  33. <text>发货卡号:</text>
  34. <text>{{state.orderInfo.cardId ?state.orderInfo.cardId: ''}}</text>
  35. </view>
  36. <view >
  37. <text>发货签号:</text>
  38. <text>{{state.orderInfo.obuId ?state.orderInfo.obuId: ''}}</text>
  39. </view>
  40. </view>
  41. </view>
  42. </view>
  43. </view>
  44. <view class="btn-wrap">
  45. <view class="hint">请核对实收货物与上述货物编号是否一致!</view>
  46. <submit-button title="确认收货" @submit="$util.confirm('是否确认收到货?', confirmReceipt, '收货确认')"></submit-button>
  47. </view>
  48. </template>
  49. <script setup lang="ts">
  50. // import orderInfoItem from "./components/order-info-item";
  51. import navBar from "@/components/nav-bar/nav-bar2.vue";
  52. import { reactive,ref } from "vue";
  53. import { onLoad,onPageScroll } from "@dcloudio/uni-app";
  54. import {requestNew } from "@/utils/network/request.js";
  55. import {confirm,getOrderTime } from "@/utils/utils";
  56. import {orderReceiveGoods,orderDetailQuery } from "@/utils/network/api";
  57. import { getItem, StorageKeys } from "@/utils/storage";
  58. const scrollTop = ref(0); //滚动距离
  59. //监听页面滚动
  60. onPageScroll((e) => {
  61. scrollTop.value = e.scrollTop;
  62. });
  63. const state = reactive({
  64. //订单信息
  65. orderInfo: {} as any,
  66. });
  67. //确认收货
  68. const confirmReceipt = (e) => {
  69. const options = {
  70. type: 2,
  71. data: {
  72. opId: getItem(StorageKeys.OpenId),
  73. orderId:state.orderInfo.orderNo
  74. },
  75. method: "POST",
  76. showLoading: true,
  77. };
  78. requestNew(orderReceiveGoods, options).then((res) => {
  79. confirm(
  80. "您已完成订单收货",
  81. () => {
  82. uni.$emit("refreshOrder");
  83. uni.navigateBack();
  84. },
  85. "收货完成",
  86. false
  87. );
  88. });
  89. }
  90. //确认收货
  91. const confirmReceiptClick = (e) => {
  92. navTo("/pages/bluetooth/bluetooth?routeType=5&id=" + state.orderInfo.id); //去连接蓝牙
  93. };
  94. //获取订单详情
  95. const getOrderDetails = (id) => {
  96. const options = {
  97. type: 2,
  98. data: { id: id },
  99. method: "POST",
  100. showLoading: true,
  101. };
  102. requestNew(orderDetailQuery, options).then((res) => {
  103. console.log("获取订单详情",res)
  104. state.orderInfo =res.data;
  105. });
  106. };
  107. onLoad((options) => {
  108. getOrderDetails(options.id);
  109. });
  110. </script>
  111. <style>
  112. page {
  113. background: #E9EDF0;
  114. padding-bottom: 30rpx;
  115. font-size: 28rpx;
  116. }
  117. </style>
  118. <style lang="scss" scoped>
  119. .hint {
  120. font-size: 28rpx;
  121. color: #CCB375;
  122. text-align: center;
  123. }
  124. .btn {
  125. margin: 500rpx 40rpx 50rpx;
  126. }
  127. .bg-img {
  128. width: 100%;
  129. position: absolute;
  130. z-index: 0;
  131. .icon {
  132. width: 100%;
  133. height: 534rpx;
  134. }
  135. }
  136. .content {
  137. position: relative;
  138. color: white;
  139. padding:0 30rpx ;
  140. padding-top: 200rpx;
  141. }
  142. .status>text{
  143. font-weight: bold;
  144. font-size: 40rpx;
  145. line-height: 82rpx;
  146. }
  147. .order{
  148. height: 136rpx;
  149. background:linear-gradient(to bottom,rgb(188, 195, 205),#ffffff);;
  150. border-radius: 12rpx 12rpx 12rpx 12rpx;
  151. border: 1rpx solid #FFFFFF;
  152. color: black;
  153. font-weight: 400;
  154. font-size: 30rpx;
  155. margin-top: 80rpx;
  156. padding: 20rpx;
  157. box-sizing: border-box;
  158. }
  159. .order>.num{
  160. color: #111111;
  161. }
  162. .order>.name{
  163. color: #666666;
  164. margin-top: 10rpx;
  165. }
  166. .message{
  167. background: white;
  168. border-radius: 12rpx 12rpx 12rpx 12rpx;
  169. border: 1rpx solid #FFFFFF;
  170. color: #666666;
  171. margin-top: 30rpx;
  172. padding: 20rpx 20rpx 0 20rpx;
  173. }
  174. .message-top1{
  175. display: flex;
  176. padding-bottom: 20rpx;
  177. align-items: center;
  178. }
  179. .message-top1>.msg>view{
  180. line-height: 50rpx;
  181. }
  182. .message-top{
  183. display: flex;
  184. border-bottom: 2rpx solid #E6E9EB;
  185. padding-bottom: 20rpx;
  186. }
  187. .vehiclePlate{
  188. font-weight: 400;
  189. font-size: 30rpx;
  190. color: #111111;
  191. }
  192. .btn-wrap{
  193. position: fixed;
  194. bottom: 0;
  195. left: 0;
  196. background-color: white;
  197. width: 100%;
  198. border-radius: 30rpx 30rpx 0rpx 0rpx;
  199. padding: 0 50rpx;
  200. display: flex;
  201. flex-direction: column;
  202. justify-content: space-evenly;
  203. box-sizing: border-box;
  204. height: 188rpx;
  205. }
  206. </style>