detail_order.vue 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. <template>
  2. <div id="form-1">
  3. <el-row>
  4. <el-col :span="24" class="main animate__animated animate__backInRight">
  5. <el-col class="top-btn">
  6. <el-button type="primary" size="mini" @click="toBack()">返回</el-button>
  7. </el-col>
  8. <el-col :span="8" class="one">
  9. <el-col :span="24" class="add">
  10. <el-col :span="2">
  11. <i class="el-icon-location"></i>
  12. </el-col>
  13. <el-col :span="22">
  14. <p>{{ address.name }},{{ address.phone }}</p>
  15. <p>{{ address.province }} , {{ address.city }} , {{ address.area }} , {{ address.address }}</p>
  16. </el-col>
  17. </el-col>
  18. <el-col :span="24" v-for="(item, index) in list" :key="index">
  19. <el-col :span="24" class="shop"> <i class="el-icon-s-shop"></i>{{ item.shop_name }}</el-col>
  20. <el-col :span="24" v-for="(goods, index) in item.goods" :key="index">
  21. <el-col :span="24" class="goods">
  22. <el-col :span="6"><el-image :src="goods.goods.file[0].url"></el-image></el-col>
  23. <el-col :span="18">
  24. <el-col :span="12">
  25. <p>{{ goods.goods.name }}</p>
  26. <p>规格:{{ goods.name }}</p>
  27. </el-col>
  28. <el-col :span="12" class="money">
  29. <p>¥{{ goods.sell_money }}</p>
  30. <p>X{{ goods.buy_num }}</p>
  31. </el-col>
  32. </el-col>
  33. </el-col>
  34. <el-col :span="24">
  35. <el-col :span="6">运费</el-col>
  36. <el-col :span="18" class="other" v-if="!item.freight_total == '0'">{{ item.freight_total }}</el-col>
  37. <el-col :span="18" class="other" v-else>包邮</el-col>
  38. </el-col>
  39. <el-col :span="24">
  40. <el-col :span="6">订单备注</el-col>
  41. <el-col :span="18" class="other" v-if="item.remarks">{{ item.remarks }}</el-col>
  42. <el-col :span="18" class="other" v-else>暂无备注</el-col>
  43. </el-col>
  44. </el-col>
  45. </el-col>
  46. <el-col :span="24">
  47. <el-col :span="6">配送方式</el-col>
  48. <el-col :span="18" class="other">快递配送</el-col>
  49. </el-col>
  50. <el-col :span="24" class="goods_total">
  51. <el-col :span="6">商品金额</el-col>
  52. <el-col :span="18" class="other">
  53. <p>¥{{ total_detail.goods_total }}</p>
  54. </el-col>
  55. </el-col>
  56. <el-col :span="24" class="goods_total">
  57. <el-col :span="6">应付金额</el-col>
  58. <el-col :span="18" class="other">
  59. <p v-if="total_detail.discount_detail">¥{{ goods_total }}</p>
  60. <p v-else>¥{{ total_detail.goods_total }}</p>
  61. </el-col>
  62. </el-col>
  63. <el-col :span="24">
  64. <el-col :span="6">下单时间</el-col>
  65. <el-col :span="18" class="other">{{ info.buy_time }}</el-col>
  66. </el-col>
  67. <el-col :span="24">
  68. <el-col :span="6">支付时间</el-col>
  69. <el-col :span="18" class="other">{{ info.pay_time || '未支付' }}</el-col>
  70. </el-col>
  71. </el-col>
  72. </el-col>
  73. </el-row>
  74. </div>
  75. </template>
  76. <script>
  77. const _ = require('lodash');
  78. const moment = require('moment');
  79. import { mapState, mapGetters, createNamespacedHelpers } from 'vuex';
  80. const { mapActions } = createNamespacedHelpers('order');
  81. export default {
  82. name: 'form-1',
  83. props: {},
  84. components: {},
  85. data: function () {
  86. return {
  87. info: {},
  88. address: {},
  89. goods_total: 0,
  90. list: [],
  91. total_detail: {},
  92. typeList: [],
  93. statusList: [],
  94. };
  95. },
  96. async created() {
  97. await this.search();
  98. },
  99. methods: {
  100. ...mapActions(['query', 'fetch', 'create', 'update']),
  101. // 查询
  102. async search() {
  103. let res = await this.fetch(this.id);
  104. if (this.$checkRes(res)) {
  105. this.$set(this, `info`, res.data);
  106. // 地址
  107. this.$set(this, `address`, res.data.address);
  108. // 商品
  109. this.$set(this, `list`, res.data.goods);
  110. // 实付金额
  111. this.$set(this, `total_detail`, res.data.total_detail);
  112. var goods_total = 0;
  113. let discount_detail = res.data.total_detail.discount_detail;
  114. for (const key in discount_detail) {
  115. if (Object.hasOwnProperty.call(discount_detail, key)) {
  116. const element = discount_detail[key];
  117. for (const i in element) {
  118. if (Object.hasOwnProperty.call(element, i)) {
  119. const ele = element[i].realPay;
  120. goods_total += ele;
  121. }
  122. }
  123. }
  124. }
  125. this.$set(this, `goods_total`, goods_total);
  126. }
  127. },
  128. // 返回
  129. toBack() {
  130. window.history.go('-1');
  131. },
  132. },
  133. computed: {
  134. id() {
  135. return this.$route.query.id;
  136. },
  137. },
  138. metaInfo() {
  139. return { title: this.$route.meta.title };
  140. },
  141. watch: {
  142. test: {
  143. deep: true,
  144. immediate: true,
  145. handler(val) {},
  146. },
  147. },
  148. };
  149. </script>
  150. <style lang="less" scoped>
  151. .main {
  152. .one {
  153. font-size: 20px;
  154. margin: 10px 0 0 20%;
  155. padding: 5px;
  156. .add {
  157. border-bottom: 2px dashed #ccc;
  158. margin: 0 0 5px 0;
  159. padding: 5px 0;
  160. }
  161. .shop {
  162. padding: 4px 0;
  163. font-size: 22px;
  164. border-bottom: 1px solid #ccc;
  165. }
  166. .goods {
  167. padding: 10px 0;
  168. .money {
  169. text-align: right;
  170. }
  171. }
  172. .other {
  173. text-align: right;
  174. p {
  175. color: red;
  176. }
  177. }
  178. .el-col {
  179. margin: 4px 0;
  180. }
  181. }
  182. }
  183. </style>