detail_orderDetail.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328
  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="9" 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" class="shop"> <i class="el-icon-s-shop"></i>{{ shop.name }}</el-col>
  19. <el-col :span="24" v-for="(item, index) in list" :key="index">
  20. <el-col :span="24" class="goods">
  21. <el-col :span="6"><el-image :src="item.goods.file[0].url"></el-image></el-col>
  22. <el-col :span="18">
  23. <el-col :span="12">
  24. <p>{{ item.goods.name }}</p>
  25. <p>规格:{{ item.name }}</p>
  26. </el-col>
  27. <el-col :span="12" class="money">
  28. <p v-if="form.type == '0'">¥{{ item.sell_money }}</p>
  29. <p v-else-if="form.type == '1'">¥{{ item.group_config.money }}</p>
  30. <p>X{{ item.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.goods.freight == '0'">{{ item.goods.freight }}</el-col>
  37. <el-col :span="18" class="other" v-else>包邮</el-col>
  38. </el-col>
  39. </el-col>
  40. <el-col :span="24">
  41. <el-col :span="6">订单备注</el-col>
  42. <el-col :span="18" class="other" v-if="form.remarks">{{ form.remarks }}</el-col>
  43. <el-col :span="18" class="other" v-else>暂无备注</el-col>
  44. </el-col>
  45. <el-col :span="24">
  46. <el-col :span="6">配送方式</el-col>
  47. <el-col :span="18" class="other">快递配送</el-col>
  48. </el-col>
  49. <el-col :span="24" class="goods_total">
  50. <el-col :span="6">商品金额</el-col>
  51. <el-col :span="18" class="other">
  52. <p>¥{{ total_detail.goods_total }}</p>
  53. </el-col>
  54. </el-col>
  55. <el-col :span="24" class="goods_total">
  56. <el-col :span="6">快递费</el-col>
  57. <el-col :span="18" class="other">
  58. <p>¥{{ total_detail.freight_total }}</p>
  59. </el-col>
  60. </el-col>
  61. <el-col :span="24" class="goods_total">
  62. <el-col :span="8">优惠后实付金额</el-col>
  63. <el-col :span="16" class="other">
  64. <p>¥{{ pay.pay_money }}</p>
  65. </el-col>
  66. </el-col>
  67. <el-col :span="24">
  68. <el-col :span="6">下单时间</el-col>
  69. <el-col :span="18" class="other">{{ form.buy_time }}</el-col>
  70. </el-col>
  71. <el-col :span="24">
  72. <el-col :span="6">支付时间</el-col>
  73. <el-col :span="18" class="other">{{ form.pay_time }}</el-col>
  74. </el-col>
  75. <el-col :span="24">
  76. <el-col :span="6">寄出运单号</el-col>
  77. <el-col :span="18" class="other">{{ transport.shop_transport_no || '暂无单号' }}</el-col>
  78. </el-col>
  79. <el-col :span="24">
  80. <el-col :span="6">寄出快递类型</el-col>
  81. <el-col :span="18" class="other">{{ transport.shop_transport_name || '暂无快递信息' }}</el-col>
  82. </el-col>
  83. <el-col :span="24">
  84. <el-form :model="form" ref="form" label-width="100px" class="demo-ruleForm">
  85. <el-form-item
  86. label="寄出运单号"
  87. prop="shop_transport_no"
  88. v-if="(form.status == '1' || form.status == '2') && (!transport.shop_transport_no || !transport.shop_transport_name)"
  89. >
  90. <el-input v-model="form.shop_transport_no" placeholder="请输入运单号,快递类型,同时填入" size="small"></el-input>
  91. </el-form-item>
  92. <el-form-item
  93. label="快递类型"
  94. prop="shop_transport_type"
  95. v-if="(form.status == '1' || form.status == '2') && (!transport.shop_transport_no || !transport.shop_transport_name)"
  96. >
  97. <el-select
  98. v-model="form.shop_transport_type"
  99. filterable
  100. remote
  101. reserve-keyword
  102. placeholder="请选择快递类型,运单号,同时填入"
  103. :remote-method="querySearch"
  104. :loading="loading"
  105. @change="handleSelect"
  106. size="small"
  107. style="width: 100%"
  108. >
  109. <el-option v-for="item in shop_transport_typeList" :key="item.id" :label="item.label" :value="item.value"> </el-option>
  110. </el-select>
  111. </el-form-item>
  112. <el-form-item label="订单状态" prop="status">
  113. <el-select v-model="form.status" clearable filterable placeholder="请选择订单状态" size="small" style="width: 100%">
  114. <el-option v-for="i in order_processList" :key="i.label" :label="i.label" :value="i.value"> </el-option>
  115. </el-select>
  116. </el-form-item>
  117. <el-form-item>
  118. <el-button type="primary" @click="onSubmit()">保存</el-button>
  119. </el-form-item>
  120. </el-form>
  121. </el-col>
  122. </el-col>
  123. <el-col :span="9" class="one" v-if="transport.shop_transport_no">
  124. <el-col :span="24">{{ activit.is_check || '暂无快递信息' }}</el-col>
  125. <el-col :span="24">{{ transport.shop_transport_name || '暂无快递信息' }}: {{ activit.no || '暂无快递信息' }}</el-col>
  126. <el-col :span="24">
  127. <p>订单编号: {{ form.id }}</p>
  128. </el-col>
  129. <el-col :span="24">
  130. <p>收货地址:{{ address.province }} , {{ address.city }} , {{ address.area }} , {{ address.address }}</p>
  131. </el-col>
  132. <el-col :span="24">
  133. <el-timeline :reverse="reverse">
  134. <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.time" :color="activity.color">
  135. {{ activity.context }}
  136. </el-timeline-item>
  137. </el-timeline>
  138. </el-col>
  139. </el-col>
  140. </el-col>
  141. </el-row>
  142. </div>
  143. </template>
  144. <script>
  145. const _ = require('lodash');
  146. const moment = require('moment');
  147. import { mapState, mapGetters, createNamespacedHelpers } from 'vuex';
  148. const { mapActions } = createNamespacedHelpers('orderDetail');
  149. const { mapActions: dictData } = createNamespacedHelpers('dictData');
  150. const { mapActions: sot } = createNamespacedHelpers('sot');
  151. export default {
  152. name: 'form-1',
  153. props: {},
  154. components: {},
  155. data: function () {
  156. return {
  157. form: {},
  158. // 地址
  159. address: {},
  160. // 实付金额
  161. total_detail: {},
  162. // 商铺
  163. shop: {},
  164. // 运单号
  165. transport: {},
  166. pay: {},
  167. // 商品列表
  168. list: [],
  169. // 物流
  170. reverse: false,
  171. activities: [],
  172. activit: {},
  173. // 订单状态
  174. order_processList: [],
  175. // 快递类型
  176. shop_transport_typeList: [],
  177. loading: false,
  178. };
  179. },
  180. async created() {
  181. await this.searchOther();
  182. await this.search();
  183. },
  184. methods: {
  185. ...dictData({ dictQuery: 'query' }),
  186. ...sot({ sotFetch: 'fetch' }),
  187. ...mapActions(['query', 'fetch', 'create', 'update']),
  188. // 查询
  189. async search() {
  190. let res;
  191. res = await this.fetch(this.id);
  192. if (this.$checkRes(res)) {
  193. this.$set(this, `form`, res.data);
  194. // 地址
  195. this.$set(this, `address`, res.data.address);
  196. this.$set(this, `shop`, res.data.shop);
  197. // 商品
  198. this.$set(this, `list`, res.data.goods);
  199. // 应付金额
  200. this.$set(this, `total_detail`, res.data.total_detail);
  201. this.$set(this, `pay`, res.data.order.pay);
  202. if (res.data.transport) {
  203. let arr = await this.dictQuery({ code: 'transport_type', value: res.data.transport.shop_transport_type });
  204. if (this.$checkRes(arr)) {
  205. let type = arr.data.find((i) => i.value == res.data.transport.shop_transport_type);
  206. if (type) res.data.transport.shop_transport_name = type.label;
  207. this.$set(this, `transport`, res.data.transport);
  208. }
  209. res = await this.sotFetch(this.id);
  210. if (this.$checkRes(res)) {
  211. if (res.errcode == '0') {
  212. let activities = res.data.list;
  213. activities[0].color = '#0bbd87';
  214. this.$set(this, `activities`, activities);
  215. this.$set(this, `activit`, res.data);
  216. }
  217. }
  218. }
  219. }
  220. },
  221. async querySearch(value) {
  222. this.loading = true;
  223. let res = await this.dictQuery({ code: 'transport_type', label: value });
  224. if (this.$checkRes(res)) {
  225. this.$set(this, 'shop_transport_typeList', res.data);
  226. }
  227. this.loading = false;
  228. },
  229. handleSelect(value) {
  230. // this.$set(this.form, `shop_transport_type`, value);
  231. },
  232. // 提交
  233. async onSubmit() {
  234. let form = this.form;
  235. let transport = {};
  236. let res;
  237. if (form.shop_transport_no && form.shop_transport_type) {
  238. transport.shop_transport_no = form.shop_transport_no;
  239. transport.shop_transport_type = form.shop_transport_type;
  240. form.transport = transport;
  241. }
  242. if (form.id) res = await this.update(form);
  243. if (this.$checkRes(res)) {
  244. this.$message({ type: `success`, message: `维护信息成功` });
  245. this.toBack();
  246. }
  247. },
  248. // 返回
  249. toBack() {
  250. window.history.go('-1');
  251. },
  252. // 查询其他信息
  253. async searchOther() {
  254. let res;
  255. // 减免方式
  256. res = await this.dictQuery({ code: 'order_process' });
  257. if (this.$checkRes(res)) {
  258. this.$set(this, `order_processList`, res.data);
  259. }
  260. // 快递类型
  261. // res = await this.dictQuery({ code: 'transport_type' });
  262. // if (this.$checkRes(res)) {
  263. // this.$set(this, `shop_transport_typeList`, res.data);
  264. // }
  265. },
  266. },
  267. computed: {
  268. id() {
  269. return this.$route.query.id;
  270. },
  271. },
  272. metaform() {
  273. return { title: this.$route.meta.title };
  274. },
  275. watch: {
  276. test: {
  277. deep: true,
  278. immediate: true,
  279. handler(val) {},
  280. },
  281. },
  282. };
  283. </script>
  284. <style lang="less" scoped>
  285. .main {
  286. .one {
  287. margin: 10px 0 0 5%;
  288. padding: 5px;
  289. .add {
  290. border-bottom: 2px dashed #ccc;
  291. margin: 0 0 5px 0;
  292. padding: 5px 0;
  293. }
  294. .shop {
  295. padding: 4px 0;
  296. font-size: 18px;
  297. border-bottom: 1px solid #ccc;
  298. }
  299. .goods {
  300. padding: 10px 0;
  301. .money {
  302. text-align: right;
  303. }
  304. }
  305. .other {
  306. text-align: right;
  307. p {
  308. color: red;
  309. }
  310. }
  311. .el-col {
  312. margin: 4px 0;
  313. }
  314. }
  315. }
  316. /deep/.el-timeline {
  317. margin: 20px 0 0 0;
  318. font-size: 16px;
  319. }
  320. /deep/.el-timeline-item__node:nth-child(1) {
  321. background-color: green;
  322. }
  323. </style>