info.vue 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446
  1. <template>
  2. <mobile-frame>
  3. <view class="main">
  4. <view class="zero">
  5. <scroll-view scroll-y="true" class="scroll-view">
  6. <view class="list-scroll-view">
  7. <view class="one">
  8. <view class="one_1">
  9. <text class="iconfont icon-dingweixiao"></text>
  10. </view>
  11. <view class="one_2">
  12. <view class="name">
  13. <text>{{info.address.name}}</text>
  14. <text>{{info.address.phone}}</text>
  15. </view>
  16. <view class="address">
  17. <text>{{info.address.province}}</text>
  18. <text>{{info.address.city}}</text>
  19. <text>{{info.address.area}}</text>
  20. <text>{{info.address.address}}</text>
  21. </view>
  22. </view>
  23. </view>
  24. <view class="two">
  25. <view class="two_0">
  26. <text>{{info.zhStatus||'未识别'}}</text>
  27. </view>
  28. <view class="two_1" v-if="info.status=='0'">
  29. <view class="list" v-for="(item,index) in info.goods" :key="index">
  30. <view class="list_1">
  31. <text class="iconfont icon-shangdian"></text>
  32. <text>{{item.shop_name}}</text>
  33. </view>
  34. <view class="list_2">
  35. <view class="goods" v-for="(tag,indexs) in item.goods" :key="indexs">
  36. <view class="url">
  37. <image class="image"
  38. :src="tag.goods.file&&tag.goods.file.length>0?tag.goods.file[0].url:''"
  39. mode=""></image>
  40. </view>
  41. <view class="goodsname">
  42. {{tag.goods.name}}
  43. <view class="specs">
  44. {{tag.name}}
  45. </view>
  46. </view>
  47. <view class="goodsother">
  48. <view v-if="info.type=='0'" class="price">
  49. ¥{{tag.sell_money}}
  50. </view>
  51. <view v-else class="price">
  52. ¥{{tag.group_config.money}}
  53. </view>
  54. <view class="num">
  55. ×{{tag.buy_num}}
  56. </view>
  57. </view>
  58. </view>
  59. </view>
  60. </view>
  61. </view>
  62. <view class="two_2" v-else>
  63. <view class="list_1">
  64. <text class="iconfont icon-shangdian"></text>
  65. <text>{{info.shop.name}}</text>
  66. </view>
  67. <view class="list_2">
  68. <view class="goods" v-for="(item,index) in info.goods" :key="index">
  69. <view class="url">
  70. <image class="image"
  71. :src="item.goods.file&&item.goods.file.length>0?item.goods.file[0].url:''"
  72. mode=""></image>
  73. </view>
  74. <view class="goodsname">
  75. {{item.goods.name}}
  76. <view class="specs">
  77. {{item.name}}
  78. </view>
  79. </view>
  80. <view class="goodsother">
  81. <view v-if="info.type=='0'" class="price">
  82. ¥{{item.sell_money}}
  83. </view>
  84. <view v-else class="price">
  85. ¥{{item.group_config.money}}
  86. </view>
  87. <view class="num">
  88. ×{{item.buy_num}}
  89. </view>
  90. </view>
  91. </view>
  92. </view>
  93. </view>
  94. </view>
  95. <view class="thr">
  96. <view class="thr_1">
  97. <text>商品金额</text>
  98. <text>¥{{info.total_detail.goods_total}}</text>
  99. </view>
  100. <view class="thr_1">
  101. <text>运费</text>
  102. <text>¥{{info.total_detail.freight_total}}</text>
  103. </view>
  104. <view class="thr_1">
  105. <text>实付金额</text>
  106. <text>¥{{info.goods_total}}</text>
  107. </view>
  108. </view>
  109. <view class="four">
  110. <view class="four_1">
  111. <text>订单号</text>
  112. <text>{{info.no}}</text>
  113. </view>
  114. <view class="four_1">
  115. <text>订单状态</text>
  116. <text>{{info.zhStatus||'未识别'}}</text>
  117. </view>
  118. <view class="four_1">
  119. <text>下单时间</text>
  120. <text>{{info.buy_time}}</text>
  121. </view>
  122. <view class="four_1">
  123. <text>订单备注</text>
  124. <text>{{info.remarks}}</text>
  125. </view>
  126. </view>
  127. </view>
  128. </scroll-view>
  129. </view>
  130. <view class="zero_1">
  131. <text>合计</text>
  132. <text>¥{{info.goods_total}}</text>
  133. </view>
  134. </view>
  135. </mobile-frame>
  136. </template>
  137. <script>
  138. export default {
  139. data() {
  140. return {
  141. id: '',
  142. status: '',
  143. info: {},
  144. // 售后状态
  145. statusList: [],
  146. };
  147. },
  148. onLoad: async function(e) {
  149. const that = this;
  150. that.$set(that, `id`, e.id);
  151. that.$set(that, `status`, e.status);
  152. await that.searchOther();
  153. await that.search()
  154. },
  155. onShow: function() {},
  156. methods: {
  157. // 查询详情
  158. async search() {
  159. uni.showLoading({
  160. title: '加载中'
  161. });
  162. const that = this;
  163. let res;
  164. // 待付款
  165. if (that.id && that.status == '0') {
  166. res = await that.$api(`/order/${that.id}`);
  167. } else {
  168. res = await that.$api(`/orderDetail/${that.id}`);
  169. }
  170. if (res.errcode == '0') {
  171. let status = that.statusList.find(i => i.value == res.data.status)
  172. if (status) res.data.zhStatus = status.label;
  173. // 计算优惠劵
  174. if (res.data?.total_detail?.discount_detail) {
  175. // 有优惠券
  176. var key = Object.keys(res.data.total_detail.discount_detail);
  177. var discount_detail = 0;
  178. for (let val of key) {
  179. for (let var1 in res.data.total_detail.discount_detail[val]) {
  180. // object取key和value
  181. if (Object.hasOwnProperty.call(res.data.total_detail.discount_detail[val], var1)) {
  182. var value = res.data.total_detail.discount_detail[val][var1]
  183. discount_detail = that.$plus(discount_detail, value)
  184. }
  185. }
  186. }
  187. // 运费总数和商品总数相加
  188. let total = that.$plus(res.data.total_detail.freight_total, res.data.total_detail
  189. .goods_total)
  190. // 优惠劵相减
  191. res.data.goods_total = that.$minus(total, discount_detail);
  192. } else {
  193. // 无优惠劵
  194. res.data.goods_total = that.$plus(res.data.total_detail.freight_total, res.data.total_detail
  195. .goods_total)
  196. }
  197. that.$set(that, `info`, res.data);
  198. uni.hideLoading();
  199. }
  200. },
  201. // 查询其他信息
  202. async searchOther() {
  203. const that = this;
  204. let res;
  205. // 查询状态
  206. res = await that.$api(`/dictData`, 'GET', {
  207. code: 'order_process'
  208. })
  209. if (res.errcode == '0') {
  210. that.$set(that, `statusList`, res.data);
  211. }
  212. },
  213. }
  214. }
  215. </script>
  216. <style lang="scss">
  217. .main {
  218. display: flex;
  219. flex-direction: column;
  220. width: 100vw;
  221. height: 100vh;
  222. background-color: #f5f5f5;
  223. .zero {
  224. position: relative;
  225. flex-grow: 1;
  226. .one {
  227. background-color: #fff;
  228. margin: 0 0 2vw 0;
  229. display: flex;
  230. justify-content: space-between;
  231. padding: 2vw;
  232. border-bottom: 2px dashed #ff0000;
  233. .one_1 {
  234. width: 8vw;
  235. text-align: center;
  236. padding: 3vw 0 0;
  237. }
  238. .one_2 {
  239. width: 86vw;
  240. .name {
  241. font-size: 16px;
  242. margin: 0 0 1vw 0;
  243. text {
  244. padding: 0 0 0 2vw;
  245. }
  246. }
  247. .address {
  248. font-size: 14px;
  249. color: #858585;
  250. text {
  251. padding: 0 0 0 2vw;
  252. }
  253. }
  254. }
  255. }
  256. .two {
  257. background-color: #fff;
  258. margin: 0 0 2vw 0;
  259. padding: 2vw;
  260. .two_0 {
  261. text-align: right;
  262. color: #ff0000;
  263. }
  264. .two_1 {
  265. display: flex;
  266. flex-direction: column;
  267. .list {
  268. margin: 0 0 1vw 0;
  269. .list_1 {
  270. font-size: 16px;
  271. margin: 0 0 1vw 0;
  272. text:last-child {
  273. padding: 0 0 0 2vw;
  274. }
  275. }
  276. .list_2 {
  277. display: flex;
  278. flex-direction: column;
  279. .goods {
  280. display: flex;
  281. border-bottom: 1px dashed #f1f1f1;
  282. padding: 2vw 0;
  283. .url {
  284. width: 20vw;
  285. .image {
  286. width: 100%;
  287. height: 20vw;
  288. border-radius: 5px;
  289. }
  290. }
  291. .goodsname {
  292. display: flex;
  293. flex-direction: column;
  294. width: 60vw;
  295. padding: 0 2vw;
  296. font-size: 16px;
  297. .specs {
  298. color: var(--f85Color);
  299. font-size: var(--font12Size);
  300. }
  301. }
  302. .goodsother {
  303. width: 15vw;
  304. text-align: right;
  305. }
  306. }
  307. }
  308. }
  309. }
  310. .two_2 {
  311. .list_1 {
  312. font-size: 16px;
  313. margin: 0 0 1vw 0;
  314. text:last-child {
  315. padding: 0 0 0 2vw;
  316. }
  317. }
  318. .list_2 {
  319. display: flex;
  320. flex-direction: column;
  321. .goods {
  322. display: flex;
  323. border-bottom: 1px dashed #f1f1f1;
  324. padding: 2vw 0;
  325. .url {
  326. width: 20vw;
  327. .image {
  328. width: 100%;
  329. height: 20vw;
  330. border-radius: 5px;
  331. }
  332. }
  333. .goodsname {
  334. display: flex;
  335. flex-direction: column;
  336. width: 60vw;
  337. padding: 0 2vw;
  338. font-size: 16px;
  339. .specs {
  340. color: var(--f85Color);
  341. font-size: var(--font12Size);
  342. }
  343. }
  344. .goodsother {
  345. width: 15vw;
  346. text-align: right;
  347. }
  348. }
  349. }
  350. }
  351. }
  352. .thr {
  353. background-color: #fff;
  354. margin: 0 0 2vw 0;
  355. padding: 0 2vw;
  356. .thr_1 {
  357. margin: 2vw 0;
  358. font-size: 15px;
  359. display: flex;
  360. justify-content: space-between;
  361. }
  362. .thr_1:last-child {
  363. text:last-child {
  364. color: #ff0000;
  365. }
  366. }
  367. }
  368. .four {
  369. background-color: #fff;
  370. margin: 0 0 2vw 0;
  371. padding: 0 2vw;
  372. .four_1 {
  373. margin: 2vw 0;
  374. font-size: 15px;
  375. display: flex;
  376. justify-content: space-between;
  377. }
  378. }
  379. }
  380. .zero_1 {
  381. background-color: white;
  382. width: 96vw;
  383. padding: 4vw 2vw;
  384. font-size: 16px;
  385. text:last-child {
  386. color: #ff0000;
  387. padding: 0 0 0 2vw;
  388. }
  389. }
  390. }
  391. .scroll-view {
  392. position: absolute;
  393. top: 0;
  394. left: 0;
  395. right: 0;
  396. bottom: 0;
  397. .list-scroll-view {
  398. display: flex;
  399. flex-direction: column;
  400. }
  401. }
  402. </style>