金诚优选前端代码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

477 lines
16 KiB

  1. <template>
  2. <view id="order-detail">
  3. <view class="border-box">
  4. <view class="order-item" v-if="order.group_item_count == 1">
  5. <view class="title mx-1px-bottom">
  6. <view class="name">
  7. 订单状态
  8. </view>
  9. <view class="type">
  10. {{typeList[order.status]}}
  11. </view>
  12. </view>
  13. <view class="goods-item">
  14. <view class="item-middle">
  15. <view class="middle-item mx-1px-bottom" :data-id="item.item_meta.detail_id" v-for="(item, index) in order.items" :key="index" @tap="jumpDetail">
  16. <image :src="item.item_meta.image"></image>
  17. <view class="text">
  18. <view class="names">
  19. {{item.item_name}}
  20. </view>
  21. <view class="model">
  22. {{item.item_meta.specs_text}}
  23. </view>
  24. </view>
  25. <view class="money-box">
  26. <view>
  27. {{item.quantity}}
  28. </view>
  29. <view>
  30. {{item.redeem_point}} 积分
  31. </view>
  32. <!--<view class="retreat-box" data-no="{{item.refund_no}}" bindtap="jumpRetreat" wx:if="{{(item.total != 0 && order.can_refund) || (item.total != 0 && item.is_refunded)}}">-->
  33. <!--申请售后-->
  34. <!--</view>-->
  35. <!-- <view wx:if="{{(item.total != 0 && order.can_refund) || (item.total != 0 && item.is_refunded)}}">
  36. <view class="retreat" data-id="{{item.id}}" data-no="{{order.order_no}}" wx:if="{{order.can_refund && !item.is_refunded}}" @tap.stop="applyRetreat" >申请售后</view>
  37. <view class="retreat" data-no="{{btn.refund_no}}" wx:for="{{item.refund_btn}}" wx:for-item="btn" @tap.stop="jumpRetreat">{{btn.refund_status_text}}</view>
  38. </view>-->
  39. </view>
  40. </view>
  41. </view>
  42. <view class="item-bottom">
  43. <view class="all-money">
  44. {{order.count}}, 共计 {{order.redeem_point}}积分
  45. </view>
  46. </view>
  47. </view>
  48. </view>
  49. <view class="order-item" v-if="order.group_item_count > 1">
  50. <view class="title mx-1px-bottom">
  51. <view class="name">
  52. 订单状态
  53. </view>
  54. <view class="type">
  55. {{typeList[order.status]}}
  56. </view>
  57. </view>
  58. <view class="goods-item">
  59. <view class="item-middle" v-for="(item, index) in order.group_order_item" :key="index">
  60. <view class="express-info mx-1px-bottom" v-if="item.shipping">
  61. <view class="left">
  62. <view>
  63. {{item.shipping_title}}
  64. </view>
  65. </view>
  66. <view class="right">
  67. <view>
  68. 物流公司 : {{item.shipping.name}}
  69. </view>
  70. <view>
  71. 物流编号 : {{item.shipping.tracking}}
  72. </view>
  73. </view>
  74. </view>
  75. <view class="express-info mx-1px-bottom" v-else>
  76. 等待商家发货
  77. </view>
  78. <view class="middle-item middle-item__active mx-1px-bottom" :data-id="good.item_meta.detail_id" v-for="(item, index) in item.item" :key="index" wx:for-item="good" @tap="jumpDetail">
  79. <image :src="good.item_meta.image"></image>
  80. <view class="text">
  81. <view class="names">
  82. {{good.item_name}}
  83. </view>
  84. <view class="model">
  85. {{good.item_meta.specs_text}}
  86. </view>
  87. </view>
  88. <view class="money-box">
  89. <view>
  90. {{good.quantity}}
  91. </view>
  92. <view>
  93. {{good.redeem_point}} 积分
  94. </view>
  95. <!--<view class="retreat-box" data-no="{{good.refund_no}}" bindtap="jumpRetreat" wx:if="{{(good.total != 0 && order.can_refund) || (good.total != 0 && good.is_refunded)}}">
  96. 申请售后
  97. </view>-->
  98. <!-- <view wx:if="{{(good.total != 0 && order.can_refund) || (good.total != 0 && good.is_refunded)}}">
  99. <view class="retreat" data-id="{{good.id}}" data-no="{{order.order_no}}" wx:if="{{order.can_refund && !good.is_refunded}}" @tap.stop="applyRetreat" >申请售后</view>
  100. <view class="retreat" data-no="{{btn.refund_no}}" wx:for="{{good.refund_btn}}" wx:for-item="btn" @tap.stop="jumpRetreat">{{btn.refund_status_text}}</view>
  101. </view>-->
  102. <!--<view class="retreat-box" data-id="{{good.id}}" data-no="{{order.order_no}}" @tap.stop="applyRetreat" wx:if="{{(order.status==2 || order.status == 3 || order.status == 4) && (good.total != 0 && !good.is_refunded)}}">
  103. 申请售后
  104. </view>
  105. <view class="retreat-box" data-no="{{good.refund_no}}" bindtap="jumpRetreat" wx:if="{{(order.status==2 || order.status == 3 || order.status == 4 || order.status == 5) && (good.is_refunded)}}">
  106. {{refundStatus[good.refund_status]}}
  107. </view>-->
  108. </view>
  109. </view>
  110. </view>
  111. <view class="item-bottom item-bottom__active">
  112. <div class="all">商品合计</div>
  113. <view class="all-money">
  114. {{order.count}}, 共计 {{order.count}} 积分
  115. </view>
  116. </view>
  117. </view>
  118. </view>
  119. <view class="order-item">
  120. <view class="title mx-1px-bottom">
  121. 订单信息
  122. </view>
  123. <view class="order-info">
  124. <view class="info-item">
  125. <view class="name">
  126. 订单编号 :
  127. </view>
  128. <view class="text">{{order.order_no}}</view>
  129. </view>
  130. <view class="info-item">
  131. <view class="name">
  132. 订单来源 :
  133. </view>
  134. <view class="text">{{order.from}}</view>
  135. </view>
  136. <view class="info-item">
  137. <view class="name">
  138. 订单时间 :
  139. </view>
  140. <view class="text">{{order.submit_time}}</view>
  141. </view>
  142. </view>
  143. </view>
  144. <view class="order-item">
  145. <view class="title mx-1px-bottom">
  146. 收货人信息
  147. </view>
  148. <view class="order-info">
  149. <view class="info-item">
  150. <view class="name">
  151. 地址 :
  152. </view>
  153. <view class="text">{{order.address_name}} {{order.address}}</view>
  154. </view>
  155. <view class="info-item">
  156. <view class="name">
  157. 姓名 :
  158. </view>
  159. <view class="text">{{order.accept_name}}</view>
  160. </view>
  161. <view class="info-item">
  162. <view class="name">
  163. 电话 :
  164. </view>
  165. <view class="text">{{order.mobile}}</view>
  166. </view>
  167. </view>
  168. </view>
  169. <view class="order-item">
  170. <view class="title mx-1px-bottom">
  171. 备注
  172. </view>
  173. <view class="order-info">
  174. {{order.note || order.message || '暂无备注'}}
  175. </view>
  176. </view>
  177. <view class="order-detail-info">
  178. <view class="item">
  179. <view class="name">
  180. 商品积分
  181. </view>
  182. <view class="num">
  183. {{order.adjustment_point}}积分
  184. </view>
  185. </view>
  186. <view class="item">
  187. <view class="name big">
  188. 实付积分
  189. </view>
  190. <view class="num big-money">
  191. {{order.items[0].redeem_point}} 积分
  192. </view>
  193. </view>
  194. </view>
  195. </view>
  196. <view class="button-type point-type">
  197. <view class="more btn" :data-id="order.items[0].item_meta.detail_id" @tap="jumpDetail">
  198. 再次购买
  199. </view>
  200. <view class="pointindex btn" @tap="jumpPoint">
  201. 商城首页
  202. </view>
  203. </view>
  204. <!--<view class="button-type">
  205. <view class="type-submit" wx:if="{{order.status==1}}">
  206. <view class="cancel" bindtap="cancel">
  207. 取消订单
  208. </view>
  209. <view class="submit" data-no="{{order.order_no}}" bindtap="pay">
  210. 立即付款
  211. </view>
  212. </view>
  213. <view class="sbumit-cancel" wx:if="{{order.status==3}}" bindtap="receive">
  214. 确认收货
  215. </view>
  216. </view>-->
  217. </view>
  218. </template>
  219. <script>
  220. import {pageLogin, getUrl,config,is} from '@/common/js/utils.js';
  221. export default {
  222. data() {
  223. return {
  224. order: {},
  225. typeList: {
  226. 0: '临时订单',
  227. 1: '待付款',
  228. 2: '付款成功',
  229. 3: '已发货',
  230. 4: '已完成',
  231. 5: '已完成',
  232. 6: '已取消',
  233. 7: '已退款',
  234. 8: '已作废',
  235. 9: '已删除',
  236. 31: '部分已发货'
  237. },
  238. refundStatus: ['待审核', '审核通过', '拒绝申请', '已完成', '已关闭', '等待买家退货', '买家已退货', '等待商城发货'],
  239. order_no: ''
  240. };
  241. },
  242. onLoad(e) {
  243. console.log(e, '00000000');
  244. this.setData({
  245. order_no: e.no
  246. });
  247. },
  248. onShow() {
  249. wx.showLoading({
  250. title: "加载中",
  251. mask: true
  252. });
  253. this.queryOrderDetail(this.order_no); // let app =getApp();
  254. // app.isBirthday().then(()=>{
  255. // if(this.$cookieStorage.get("birthday_gift")){
  256. // var giftData=this.$cookieStorage.get("birthday_gift").data;
  257. // new app.ToastPannel().__page.showText(giftData);
  258. // }
  259. // });
  260. },
  261. components: {},
  262. props: {},
  263. methods: {
  264. applyRetreat(e) {
  265. wx.navigateTo({
  266. url: '/pages/afterSales/apply/apply?no=' + e.currentTarget.dataset.no + '&id=' + e.currentTarget.dataset.id
  267. });
  268. },
  269. jumpRetreat(e) {
  270. var refund_no = e.currentTarget.dataset.no;
  271. wx.navigateTo({
  272. url: '/pages/afterSales/detail/detail?no=' + refund_no
  273. });
  274. },
  275. pay(e) {
  276. var order_no = e.currentTarget.dataset.no;
  277. wx.navigateTo({
  278. url: '/pages/store/payment/payment?order_no=' + order_no
  279. });
  280. },
  281. jumpDetail(e) {
  282. var id = e.currentTarget.dataset.id;
  283. wx.navigateTo({
  284. url: '/pages/pointStore/detail/detail?id=' + id
  285. });
  286. },
  287. jumpPoint() {
  288. wx.navigateTo({
  289. url: '/pages/pointStore/index/index'
  290. });
  291. },
  292. cancel() {
  293. wx.showModal({
  294. title: '',
  295. content: '确定取消该订单',
  296. success: res => {
  297. if (res.confirm) {
  298. this.cancelOrder(this.order_no);
  299. }
  300. }
  301. });
  302. },
  303. receive() {
  304. wx.showModal({
  305. title: '',
  306. content: '确定已收货?',
  307. success: res => {
  308. if (res.confirm) {
  309. this.receiveOrder(this.order_no);
  310. }
  311. }
  312. });
  313. },
  314. // 获取订单详情
  315. queryOrderDetail(orderNo) {
  316. var token = this.$cookieStorage.get('user_token');
  317. this.$http.get({
  318. api: 'api/order/' + orderNo,
  319. header: {
  320. Authorization: token
  321. }
  322. }).then(res => {
  323. if (res.statusCode = 200) {
  324. res = res.data;
  325. this.setData({
  326. order: res.data
  327. });
  328. } else {
  329. wx.showModal({
  330. title: '',
  331. content: '请求失败,请稍后重试'
  332. });
  333. }
  334. wx.hideLoading();
  335. }).catch(rej => {
  336. wx.showModal({
  337. title: '',
  338. content: '请求失败,请稍后重试'
  339. });
  340. wx.hideLoading();
  341. });
  342. },
  343. // 取消订单
  344. cancelOrder(orderNo) {
  345. var token = this.$cookieStorage.get('user_token');
  346. this.$http.post({
  347. api: 'api/shopping/order/cancel',
  348. header: {
  349. Authorization: token
  350. },
  351. data: {
  352. order_no: orderNo
  353. }
  354. }).then(res => {
  355. if (res.statusCode == 200) {
  356. res = res.data;
  357. wx.showModal({
  358. title: '',
  359. content: res.message,
  360. showCancel: false,
  361. success: res => {
  362. if (res.confirm) {
  363. this.queryOrderDetail(orderNo);
  364. }
  365. }
  366. });
  367. } else {
  368. wx.showModal({
  369. title: '',
  370. content: '取消订单失败, 请检查您的网络状态',
  371. showCancel: false
  372. });
  373. }
  374. }).catch(rej => {
  375. if (rej.statusCode == 404) {
  376. wx.showModal({
  377. title: '',
  378. content: '接口不存在',
  379. showCancel: false
  380. });
  381. } else {
  382. wx.showModal({
  383. title: '',
  384. content: '取消订单失败, 请检查您的网络状态',
  385. showCancel: false
  386. });
  387. }
  388. });
  389. },
  390. // 确认收货
  391. receiveOrder(orderNo) {
  392. var token = this.$cookieStorage.get('user_token');
  393. this.$http.post({
  394. api: 'api/shopping/order/received',
  395. header: {
  396. Authorization: token
  397. },
  398. data: {
  399. order_no: orderNo
  400. }
  401. }).then(res => {
  402. if (res.statusCode == 200) {
  403. res = res.data;
  404. wx.showModal({
  405. title: '',
  406. content: res.message,
  407. showCancel: false,
  408. success: res => {
  409. if (res.confirm) {
  410. this.queryOrderDetail(orderNo);
  411. }
  412. }
  413. });
  414. } else {
  415. wx.showModal({
  416. title: '',
  417. content: '取消订单失败, 请检查您的网络状态',
  418. showCancel: false
  419. });
  420. }
  421. }).catch(rej => {
  422. wx.showModal({
  423. title: '',
  424. content: '取消订单失败, 请检查您的网络状态',
  425. showCancel: false
  426. });
  427. });
  428. },
  429. setData: function (obj) {
  430. let that = this;
  431. let keys = [];
  432. let val, data;
  433. Object.keys(obj).forEach(function (key) {
  434. keys = key.split('.');
  435. val = obj[key];
  436. data = that.$data;
  437. keys.forEach(function (key2, index) {
  438. if (index + 1 == keys.length) {
  439. that.$set(data, key2, val);
  440. } else {
  441. if (!data[key2]) {
  442. that.$set(data, key2, {});
  443. }
  444. }
  445. data = data[key2];
  446. });
  447. });
  448. }
  449. },
  450. computed: {},
  451. watch: {}
  452. };
  453. </script>
  454. <style rel="stylesheet/less" lang="less">
  455. @import "orderdetail";
  456. </style>