index.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586
  1. <template>
  2. <view class="order-details pos-order-details">
  3. <view class="header acea-row row-middle">
  4. <view class="state">{{ title }}</view>
  5. <view class="data">
  6. <view class="order-num">订单:{{ orderInfo.order_id }}</view>
  7. <view>
  8. <span class="time">{{ orderInfo._add_time }}</span>
  9. </view>
  10. </view>
  11. </view>
  12. <view class="orderingUser acea-row row-middle">
  13. <span class="iconfont icon-yonghu2"></span>{{ orderInfo.nickname }}
  14. </view>
  15. <view class="address">
  16. <view class="name">
  17. {{ orderInfo.real_name
  18. }}<span class="phone">{{ orderInfo.user_phone }}</span>
  19. </view>
  20. <view>{{ orderInfo.user_address }}</view>
  21. </view>
  22. <view class="line">
  23. <image src="/static/images/line.jpg" />
  24. </view>
  25. <view class="pos-order-goods">
  26. <navigator :url="`/pages/goods_details/index?id=${item.productInfo.id}`" hover-class="none" class="goods acea-row row-between-wrapper"
  27. v-for="(item, index) in orderInfo.cartInfo" :key="index">
  28. <view class="picTxt acea-row row-between-wrapper">
  29. <view class="pictrue">
  30. <image :src="item.productInfo.image" />
  31. </view>
  32. <view class="text acea-row row-between row-column">
  33. <view class="info line2">
  34. {{ item.productInfo.store_name }}
  35. </view>
  36. <view class="attr">{{ item.productInfo.suk }}</view>
  37. </view>
  38. </view>
  39. <view class="money">
  40. <view class="x-money">{{ item.productInfo.attrInfo.price }}</view>
  41. <view class="num">x{{ item.cart_num }}</view>
  42. <view class="y-money">{{ item.productInfo.attrInfo.ot_price }}</view>
  43. </view>
  44. </navigator>
  45. </view>
  46. <view class="public-total">
  47. {{ orderInfo.total_num }}件商品,应支付
  48. <span class="money">{{ orderInfo.pay_price }}</span> ( 邮费 ¥{{
  49. orderInfo.pay_postage
  50. }}
  51. )
  52. </view>
  53. <view class="wrapper">
  54. <view class="item acea-row row-between">
  55. <view>订单编号:</view>
  56. <view class="conter acea-row row-middle row-right">
  57. {{ orderInfo.order_id
  58. }}
  59. </view>
  60. </view>
  61. <view class="item acea-row row-between">
  62. <view>下单时间:</view>
  63. <view class="conter">{{ orderInfo._add_time }}</view>
  64. </view>
  65. <view class="item acea-row row-between">
  66. <view>支付状态:</view>
  67. <view class="conter">
  68. {{ orderInfo.paid == 1 ? "已支付" : "未支付" }}
  69. </view>
  70. </view>
  71. <view class="item acea-row row-between">
  72. <view>支付方式:</view>
  73. <view class="conter">{{ payType }}</view>
  74. </view>
  75. <view class="item acea-row row-between">
  76. <view>买家留言:</view>
  77. <view class="conter">{{ orderInfo.mark }}</view>
  78. </view>
  79. </view>
  80. <view class="wrapper">
  81. <view class="item acea-row row-between">
  82. <view>支付金额:</view>
  83. <view class="conter">{{ orderInfo.total_price }}</view>
  84. </view>
  85. <view class='item acea-row row-between' v-if='orderInfo.coupon_id'>
  86. <view>优惠券抵扣:</view>
  87. <view class='conter'>-¥{{orderInfo.coupon_price}}</view>
  88. </view>
  89. <view class='item acea-row row-between' v-if="orderInfo.use_integral > 0">
  90. <view>积分抵扣:</view>
  91. <view class='conter'>-¥{{orderInfo.deduction_price}}</view>
  92. </view>
  93. <view class='item acea-row row-between' v-if="orderInfo.pay_postage > 0">
  94. <view>运费:</view>
  95. <view class='conter'>{{orderInfo.pay_postage}}</view>
  96. </view>
  97. <view class="actualPay acea-row row-right">
  98. 实付款:<span class="money">{{ orderInfo.pay_price }}</span>
  99. </view>
  100. </view>
  101. <view class="wrapper" v-if="
  102. orderInfo.delivery_type != 'fictitious' && orderInfo._status._type === 2
  103. ">
  104. <view class="item acea-row row-between">
  105. <view>配送方式:</view>
  106. <view class="conter" v-if="orderInfo.delivery_type === 'express'">
  107. 快递
  108. </view>
  109. <view class="conter" v-if="orderInfo.delivery_type === 'send'">送货</view>
  110. </view>
  111. <view class="item acea-row row-between">
  112. <view v-if="orderInfo.delivery_type === 'express'">快递公司:</view>
  113. <view v-if="orderInfo.delivery_type === 'send'">送货人:</view>
  114. <view class="conter">{{ orderInfo.delivery_name }}</view>
  115. </view>
  116. <view class="item acea-row row-between">
  117. <view v-if="orderInfo.delivery_type === 'express'">快递单号:</view>
  118. <view v-if="orderInfo.delivery_type === 'send'">送货人电话:</view>
  119. <view class="conter">
  120. {{ orderInfo.delivery_id}}
  121. </view>
  122. </view>
  123. </view>
  124. </view>
  125. </template>
  126. <script>
  127. import {
  128. getAdminOrderDetail
  129. } from "@/api/admin";
  130. export default {
  131. name: "AdminOrder",
  132. data: function() {
  133. return {
  134. order: false,
  135. change: false,
  136. order_id: "",
  137. orderInfo: {
  138. _status: {}
  139. },
  140. status: "",
  141. title: "",
  142. payType: "",
  143. types: "",
  144. clickNum: 1,
  145. goname: ''
  146. };
  147. },
  148. watch: {
  149. "$route.params.oid": function(newVal) {
  150. let that = this;
  151. if (newVal != undefined) {
  152. that.order_id = newVal;
  153. that.getIndex();
  154. }
  155. }
  156. },
  157. onLoad: function(option) {
  158. let self = this
  159. this.order_id = option.id;
  160. this.goname = option.goname
  161. this.getIndex();
  162. },
  163. onShow() {
  164. uni.removeStorageSync('form_type_cart');
  165. },
  166. methods: {
  167. getIndex: function() {
  168. let that = this;
  169. getAdminOrderDetail(that.order_id).then(
  170. res => {
  171. that.orderInfo = res.data;
  172. that.types = res.data._status._type;
  173. that.title = res.data._status._title;
  174. that.payType = res.data._status._payType;
  175. },
  176. err => {
  177. that.$util.Tips({
  178. title: err
  179. }, {
  180. tab: 3,
  181. url: 1
  182. });
  183. }
  184. );
  185. }
  186. }
  187. };
  188. </script>
  189. <style lang="scss">
  190. /*商户管理订单详情*/
  191. .pos-order-details .header {
  192. background: linear-gradient(to right, #2291f8 0%, #1cd1dc 100%);
  193. background: -webkit-linear-gradient(to right, #2291f8 0%, #1cd1dc 100%);
  194. background: -moz-linear-gradient(to right, #2291f8 0%, #1cd1dc 100%);
  195. }
  196. .pos-order-details .header .state {
  197. font-size: 36upx;
  198. color: #fff;
  199. }
  200. .pos-order-details .header .data {
  201. margin-left: 35upx;
  202. font-size: 28upx;
  203. }
  204. .pos-order-details .header .data .order-num {
  205. font-size: 30upx;
  206. margin-bottom: 8upx;
  207. }
  208. .pos-order-details .remarks {
  209. width: 100%;
  210. height: 86upx;
  211. background-color: #fff;
  212. padding: 0 30upx;
  213. }
  214. .pos-order-details .remarks .iconfont {
  215. font-size: 40upx;
  216. color: #2a7efb;
  217. }
  218. .pos-order-details .remarks input {
  219. width: 630upx;
  220. height: 100%;
  221. font-size: 30upx;
  222. }
  223. .pos-order-details .remarks input::placeholder {
  224. color: #666;
  225. }
  226. .pos-order-details .orderingUser {
  227. font-size: 26upx;
  228. color: #282828;
  229. padding: 0 30upx;
  230. height: 67upx;
  231. background-color: #fff;
  232. margin-top: 16upx;
  233. border-bottom: 1px solid #f5f5f5;
  234. }
  235. .pos-order-details .orderingUser .iconfont {
  236. font-size: 40upx;
  237. color: #2a7efb;
  238. margin-right: 15upx;
  239. }
  240. .pos-order-details .address {
  241. margin-top: 0;
  242. }
  243. .pos-order-details .pos-order-goods {
  244. margin-top: 17upx;
  245. }
  246. .pos-order-details .footer .more {
  247. font-size: 27upx;
  248. color: #aaa;
  249. width: 100upx;
  250. height: 64upx;
  251. text-align: center;
  252. line-height: 64upx;
  253. margin-right: 25upx;
  254. position: relative;
  255. }
  256. .pos-order-details .footer .delivery {
  257. background: linear-gradient(to right, #2291f8 0%, #1cd1dc 100%);
  258. background: -webkit-linear-gradient(to right, #2291f8 0%, #1cd1dc 100%);
  259. background: -moz-linear-gradient(to right, #2291f8 0%, #1cd1dc 100%);
  260. }
  261. .pos-order-details .footer .more .order .arrow {
  262. width: 0;
  263. height: 0;
  264. border-left: 11upx solid transparent;
  265. border-right: 11upx solid transparent;
  266. border-top: 20upx solid #e5e5e5;
  267. position: absolute;
  268. left: 15upx;
  269. bottom: -18upx;
  270. }
  271. .pos-order-details .footer .more .order .arrow:before {
  272. content: '';
  273. width: 0;
  274. height: 0;
  275. border-left: 9upx solid transparent;
  276. border-right: 9upx solid transparent;
  277. border-top: 19upx solid #fff;
  278. position: absolute;
  279. left: -10upx;
  280. bottom: 0;
  281. }
  282. .pos-order-details .footer .more .order {
  283. width: 200upx;
  284. background-color: #fff;
  285. border: 1px solid #eee;
  286. border-radius: 10upx;
  287. position: absolute;
  288. top: -200upx;
  289. z-index: 9;
  290. }
  291. .pos-order-details .footer .more .order .item {
  292. height: 77upx;
  293. line-height: 77upx;
  294. }
  295. .pos-order-details .footer .more .order .item~.item {
  296. border-top: 1px solid #f5f5f5;
  297. }
  298. .pos-order-details .footer .more .moreName {
  299. width: 100%;
  300. height: 100%;
  301. }
  302. /*订单详情*/
  303. .order-details .header {
  304. padding: 0 30upx;
  305. height: 150upx;
  306. }
  307. .order-details .header.on {
  308. background-color: #666 !important;
  309. }
  310. .order-details .header .pictrue {
  311. width: 110upx;
  312. height: 110upx;
  313. }
  314. .order-details .header .pictrue image {
  315. width: 100%;
  316. height: 100%;
  317. }
  318. .order-details .header .data {
  319. color: rgba(255, 255, 255, 0.8);
  320. font-size: 24upx;
  321. margin-left: 27upx;
  322. }
  323. .order-details .header.on .data {
  324. margin-left: 0;
  325. }
  326. .order-details .header .data .state {
  327. font-size: 30upx;
  328. font-weight: bold;
  329. color: #fff;
  330. margin-bottom: 7upx;
  331. }
  332. /* .order-details .header .data .time{margin-left:20upx;} */
  333. .order-details .nav {
  334. background-color: #fff;
  335. font-size: 26upx;
  336. color: #282828;
  337. padding: 25upx 0;
  338. }
  339. .order-details .nav .navCon {
  340. padding: 0 40upx;
  341. }
  342. .order-details .nav .navCon .on {
  343. font-weight: bold;
  344. color: #e93323;
  345. }
  346. .order-details .nav .progress {
  347. padding: 0 65upx;
  348. margin-top: 10upx;
  349. }
  350. .order-details .nav .progress .line {
  351. width: 100upx;
  352. height: 2upx;
  353. background-color: #939390;
  354. }
  355. .order-details .nav .progress .iconfont {
  356. font-size: 25upx;
  357. color: #939390;
  358. margin-top: -2upx;
  359. width: 30upx;
  360. height: 30upx;
  361. line-height: 33upx;
  362. text-align: center;
  363. margin-right: 0 !important;
  364. }
  365. .order-details .address {
  366. font-size: 26upx;
  367. color: #868686;
  368. background-color: #fff;
  369. padding: 25upx 30upx 30upx 30upx;
  370. }
  371. .order-details .address .name {
  372. font-size: 30upx;
  373. color: #282828;
  374. margin-bottom: 0.1rem;
  375. }
  376. .order-details .address .name .phone {
  377. margin-left: 40upx;
  378. }
  379. .order-details .line {
  380. width: 100%;
  381. height: 3upx;
  382. }
  383. .order-details .line image {
  384. width: 100%;
  385. height: 100%;
  386. display: block;
  387. }
  388. .order-details .wrapper {
  389. background-color: #fff;
  390. margin-top: 12upx;
  391. padding: 30upx;
  392. }
  393. .order-details .wrapper .item {
  394. font-size: 28upx;
  395. color: #282828;
  396. }
  397. .order-details .wrapper .item~.item {
  398. margin-top: 20upx;
  399. }
  400. .order-details .wrapper .item .conter {
  401. color: #868686;
  402. width: 500upx;
  403. text-align: right;
  404. }
  405. .order-details .wrapper .item .conter .copy {
  406. font-size: 20rpx;
  407. color: #333;
  408. border-radius: 3rpx;
  409. border: 1px solid #666;
  410. padding: 0rpx 15rpx;
  411. margin-left: 24rpx;
  412. height: 40rpx;
  413. }
  414. .order-details .wrapper .actualPay {
  415. border-top: 1upx solid #eee;
  416. margin-top: 30upx;
  417. padding-top: 30upx;
  418. }
  419. .order-details .wrapper .actualPay .money {
  420. font-weight: bold;
  421. font-size: 30upx;
  422. color: #e93323;
  423. }
  424. .order-details .footer {
  425. width: 100%;
  426. height: 100upx;
  427. position: fixed;
  428. bottom: 0;
  429. left: 0;
  430. background-color: #fff;
  431. padding: 0 30upx;
  432. border-top: 1px solid #eee;
  433. }
  434. .order-details .footer .bnt {
  435. width: auto;
  436. height: 60upx;
  437. line-height: 60upx;
  438. text-align: center;
  439. line-height: upx;
  440. border-radius: 50upx;
  441. color: #fff;
  442. font-size: 27upx;
  443. padding: 0 3%;
  444. }
  445. .order-details .footer .bnt.cancel {
  446. color: #aaa;
  447. border: 1px solid #ddd;
  448. }
  449. .order-details .footer .bnt.default {
  450. color: #444;
  451. border: 1px solid #444;
  452. }
  453. .order-details .footer .bnt~.bnt {
  454. margin-left: 18upx;
  455. }
  456. .pos-order-goods {
  457. padding: 0 30upx;
  458. background-color: #fff;
  459. }
  460. .pos-order-goods .goods {
  461. height: 185upx;
  462. }
  463. .pos-order-goods .goods~.goods {
  464. border-top: 1px dashed #e5e5e5;
  465. }
  466. .pos-order-goods .goods .picTxt {
  467. width: 515upx;
  468. }
  469. .pos-order-goods .goods .picTxt .pictrue {
  470. width: 130upx;
  471. height: 130upx;
  472. }
  473. .pos-order-goods .goods .picTxt .pictrue image {
  474. width: 100%;
  475. height: 100%;
  476. border-radius: 6upx;
  477. }
  478. .pos-order-goods .goods .picTxt .text {
  479. width: 365upx;
  480. height: 130upx;
  481. }
  482. .pos-order-goods .goods .picTxt .text .info {
  483. font-size: 28upx;
  484. color: #282828;
  485. }
  486. .pos-order-goods .goods .picTxt .text .attr {
  487. font-size: 24upx;
  488. color: #999;
  489. }
  490. .pos-order-goods .goods .money {
  491. width: 164upx;
  492. text-align: right;
  493. font-size: 28upx;
  494. }
  495. .pos-order-goods .goods .money .x-money {
  496. color: #282828;
  497. }
  498. .pos-order-goods .goods .money .num {
  499. color: #ff9600;
  500. margin: 5upx 0;
  501. }
  502. .pos-order-goods .goods .money .y-money {
  503. color: #999;
  504. text-decoration: line-through;
  505. }
  506. .public-total {
  507. font-size: 28upx;
  508. color: #282828;
  509. border-top: 1px solid #eee;
  510. height: 92upx;
  511. line-height: 92upx;
  512. text-align: right;
  513. padding: 0 30upx;
  514. background-color: #fff;
  515. }
  516. .public-total .money {
  517. color: #ff4c3c;
  518. }
  519. </style>