details.vue 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376
  1. <template>
  2. <view class="orderDetail">
  3. <navigation-bar-view ref="nav" :maxTimer="options.isAdmin ? 0 : 60"></navigation-bar-view>
  4. <view class="header-bg"></view>
  5. <block v-if="order.rentSn">
  6. <view class="code">{{order.rentSn}}</view>
  7. <view class="label-box">取物码</view>
  8. </block>
  9. <view style="height: 3.3vw;" v-else></view>
  10. <view class="group">
  11. <view class="top">
  12. <view class="line"></view>
  13. <view class="label">存放信息</view>
  14. </view>
  15. <view class="content">
  16. <view class="cell">
  17. <view class="label">租赁状态:</view>
  18. <view class="message">
  19. <text v-if="order.rentStatus == 1">租赁中</text>
  20. <text v-if="order.rentStatus == 2">已取出</text>
  21. <text v-if="order.rentStatus == 0">未开始</text>
  22. </view>
  23. </view>
  24. <view class="cell">
  25. <view class="label">格口类型:</view>
  26. <view class="message">
  27. <text v-if="order.cabinetType == 1">小格子</text>
  28. <text v-if="order.cabinetType == 2">中格子</text>
  29. <text v-if="order.cabinetType == 3">大格子</text>
  30. <text v-if="order.rentType == 1">(预存{{order.rentTimes / 60}}小时)</text>
  31. <text v-if="order.rentType == 2">(剩余{{order.remainNums}}次)</text>
  32. </view>
  33. </view>
  34. <view class="cell">
  35. <view class="label">存放时间:</view>
  36. <view class="message">{{order.payTime}}</view>
  37. </view>
  38. <view class="cell">
  39. <view class="label">存放箱号:</view>
  40. <view class="message">{{order.caseSn}}</view>
  41. </view>
  42. <view class="cell">
  43. <view class="label">联系方式:</view>
  44. <view class="message">{{order.mobile}}</view>
  45. </view>
  46. </view>
  47. </view>
  48. <view class="group">
  49. <view class="top">
  50. <view class="line"></view>
  51. <view class="label">订单信息</view>
  52. </view>
  53. <view class="content">
  54. <view class="cell">
  55. <view class="label">订单金额:</view>
  56. <view class="message">¥{{order.payAmount}}</view>
  57. </view>
  58. <view class="cell">
  59. <view class="label">支付方式:</view>
  60. <view class="message">
  61. <text v-if="order.payType == 1">微信支付</text>
  62. <text v-if="order.payType == 2">支付宝支付</text>
  63. </view>
  64. </view>
  65. <view class="cell">
  66. <view class="label">订单编号:</view>
  67. <view class="message">{{order.orderSn}}</view>
  68. </view>
  69. <view class="cell">
  70. <view class="label">下单时间:</view>
  71. <view class="message">{{order.createTime}}</view>
  72. </view>
  73. <view class="cell">
  74. <view class="label">支付时间:</view>
  75. <view class="message">{{order.payTime}}</view>
  76. </view>
  77. <view class="cell">
  78. <view class="label">最迟时间:</view>
  79. <view class="message">{{order.endTime}}</view>
  80. </view>
  81. </view>
  82. </view>
  83. <block v-if="options.isAdmin">
  84. <view class="footer-btns" v-if="order.rentStatus == 1">
  85. <view class="btn right" @click="closeOrder">结束订单</view>
  86. </view>
  87. </block>
  88. <block v-else>
  89. <block v-if="order.rentStatus == 1">
  90. <block v-if="getOvertimeStatus()">
  91. <view class="footer-btns">
  92. <view class="btn right" @click="renew">你已超时,请先续费(¥{{order.renewalPrice}}/小时)</view>
  93. </view>
  94. </block>
  95. <block v-else>
  96. <view class="footer-btns" v-if="order.rentType == 1">
  97. <view class="btn left" @click="openLocker(1)">临时取物</view>
  98. <view class="btn right" @click="openLocker(2)">结束取物</view>
  99. </view>
  100. <view class="footer-btns" v-if="order.rentType == 2">
  101. <view class="btn left" @click="openLocker(1)" v-if="order.remainNums > 1">临时取物</view>
  102. <view class="btn right" @click="openLocker(2)">结束取物</view>
  103. </view>
  104. </block>
  105. </block>
  106. </block>
  107. <pay-code-popup ref="payCode" :orderSn="renewalOrderSn" :type="payType" @success="paySuccess"></pay-code-popup>
  108. </view>
  109. </template>
  110. <script>
  111. import payCodePopup from '../../components/payCodePopup.vue';
  112. import navigationBarView from '../../components/navigationBarView.vue'
  113. export default {
  114. components: {
  115. payCodePopup,
  116. navigationBarView
  117. },
  118. data() {
  119. return {
  120. order: {
  121. endTime: ''
  122. },
  123. options: {},
  124. payType: '',
  125. renewalOrderSn: ''
  126. }
  127. },
  128. onLoad(options) {
  129. this.options = options;
  130. if (options.isAdmin) {
  131. this.getAdminData()
  132. } else {
  133. if (options.orderSn) {
  134. this.order.orderSn = options.orderSn;
  135. this.getNewOrder();
  136. } else {
  137. this.getData();
  138. }
  139. }
  140. const $this = this;
  141. this.$nextTick(function() {
  142. $this.$refs.payCode.clearTimer();
  143. })
  144. },
  145. onHide() {
  146. const $this = this;
  147. this.$nextTick(function() {
  148. $this.$refs.payCode.clearTimer();
  149. $this.$refs.nav.clearTimer();
  150. })
  151. },
  152. methods: {
  153. getAdminData() {
  154. this.$api.managerDetail({
  155. orderId: this.options.id
  156. }).then(res => {
  157. res.data.remainNums = res.data.remainNums || res.data.rentNums;
  158. this.order = res.data
  159. })
  160. },
  161. getData() {
  162. this.options.deviceSn = uni.getStorageSync('sn');
  163. this.$api.offorderOfflineInfo(this.options).then(res => {
  164. res.data.remainNums = res.data.remainNums || res.data.rentNums;
  165. this.order = res.data
  166. })
  167. },
  168. getOvertimeStatus() {
  169. let endTime = this.order.endTime.replace(/\-/g, '/');
  170. return new Date().getTime() > new Date(endTime).getTime();
  171. },
  172. renew() {
  173. this.$api.offorderRenewal({
  174. orderSn: this.order.orderSn
  175. }).then(res => {
  176. this.renewalOrderSn = res.order.renewalOrderSn;
  177. const $this = this;
  178. this.payType = '1';
  179. this.$nextTick(function() {
  180. console.log("SSS1");
  181. $this.$refs.payCode.init(res)
  182. })
  183. })
  184. },
  185. paySuccess(e) {
  186. if (e == 1) {
  187. uni.showToast({
  188. title: '续费成功'
  189. })
  190. this.getNewOrder();
  191. }
  192. },
  193. openLocker(e) {
  194. uni.showLoading({
  195. title: "开箱中..."
  196. })
  197. this.$api.offorderOpenLocker({
  198. orderSn: this.order.orderSn,
  199. type: e
  200. }).then(res => {
  201. uni.hideLoading()
  202. uni.redirectTo({
  203. url: '/pages/fetchPacket/success'
  204. })
  205. }, err => {
  206. uni.hideLoading()
  207. })
  208. },
  209. getNewOrder() {
  210. this.$api.offlineInfoByorder({
  211. orderSn: this.order.orderSn
  212. }).then(res => {
  213. res.data.remainNums = res.data.remainNums || res.data.rentNums;
  214. this.order = res.data
  215. })
  216. },
  217. closeOrder() {
  218. const _ = this;
  219. uni.showModal({
  220. title: '提示',
  221. content: '确认结束这个订单?',
  222. success: (r) => {
  223. if (r.confirm) {
  224. _.$api.managerEndOrder({
  225. orderSn: this.order.orderSn
  226. }).then(res => {
  227. uni.showToast({
  228. title: '操作成功'
  229. })
  230. _.getAdminData()
  231. })
  232. }
  233. }
  234. })
  235. }
  236. }
  237. }
  238. </script>
  239. <style lang="scss">
  240. .orderDetail {
  241. padding-top: 1rpx;
  242. min-height: 100vh;
  243. background-color: #F8F8F8;
  244. .header-bg {
  245. position: absolute;
  246. top: 0;
  247. width: 100vw;
  248. height: 50vw;
  249. overflow: hidden;
  250. &:after {
  251. width: 140%;
  252. height: 50vw;
  253. position: absolute;
  254. left: -20%;
  255. top: 0;
  256. content: '';
  257. border-radius: 0 0 50% 50%;
  258. background: linear-gradient(to right, #FEE704, #FDD001);
  259. }
  260. }
  261. .code {
  262. position: relative;
  263. margin-top: 1.7vw;
  264. text-align: center;
  265. font-weight: bold;
  266. font-size: 9.2vw;
  267. line-height: 9.2vw;
  268. }
  269. .label-box {
  270. position: relative;
  271. margin-top: 28rpx;
  272. text-align: center;
  273. font-size: 30rpx;
  274. line-height: 30rpx;
  275. }
  276. .group {
  277. position: relative;
  278. padding: 0 3.3vw;
  279. margin: 3.3vw 4vw 0;
  280. background-color: #FFFFFF;
  281. border-radius: 1.6vw;
  282. padding-bottom: 0.9vw;
  283. .top {
  284. display: flex;
  285. align-items: center;
  286. height: 10vw;
  287. border-bottom: 2rpx solid #F8F8F8;
  288. margin-bottom: 2.3vw;
  289. .line {
  290. width: 4rpx;
  291. height: 3.2vw;
  292. margin-right: 1.3vw;
  293. border-radius: 4rpx;
  294. background-color: #FDD302;
  295. }
  296. .label {
  297. font-weight: bold;
  298. font-size: 4vw;
  299. }
  300. }
  301. .cell {
  302. display: flex;
  303. align-items: center;
  304. margin-bottom: 4vw;
  305. font-size: 3.5vw;
  306. line-height: 3.5vw;
  307. .label {
  308. color: #333333;
  309. }
  310. .message {
  311. color: #AAAAAA;
  312. }
  313. }
  314. }
  315. .footer-btns {
  316. display: flex;
  317. align-items: center;
  318. justify-content: space-between;
  319. width: calc(100vw - 8vw);
  320. padding: 2.3vw 0;
  321. margin: 0 4vw;
  322. .btn {
  323. flex: 1;
  324. display: flex;
  325. align-items: center;
  326. justify-content: center;
  327. height: 11.5vw;
  328. border-radius: 11.5vw;
  329. margin-right: 4vw;
  330. font-weight: 500;
  331. font-size: 4vw;
  332. &:last-child {
  333. margin: 0;
  334. }
  335. &.left {
  336. color: #FFFFFF;
  337. background: linear-gradient(to right, #43F62D, #22E151, #01CB75);
  338. }
  339. &.right {
  340. background: linear-gradient(to right, #FEE704, #FDD001);
  341. }
  342. }
  343. }
  344. }
  345. </style>