logistics_details.vue 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298
  1. <template>
  2. <view :style="colorStyle">
  3. <view class='logistics'>
  4. <view class='header acea-row row-between row-top'>
  5. <view class='pictrue'>
  6. <image :src='orderInfo.image'></image>
  7. </view>
  8. <view class='text acea-row row-between'>
  9. <view class='name line2'>{{orderInfo.store_name}}</view>
  10. <view class='money'>
  11. <view>
  12. <text v-if="parseFloat(orderInfo.total_integral)">{{ orderInfo.total_integral }}积分</text>
  13. <text v-if="parseFloat(orderInfo.total_price) && parseFloat(orderInfo.total_price)">+</text>
  14. <text v-if="parseFloat(orderInfo.total_price)">{{ orderInfo.total_price }}</text>
  15. </view>
  16. <view>x{{orderInfo.total_num}}</view>
  17. </view>
  18. </view>
  19. </view>
  20. <view class='logisticsCon'>
  21. <view class='company acea-row row-between-wrapper'>
  22. <view class='picTxt acea-row row-between-wrapper'>
  23. <view class='iconfont icon-wuliu'></view>
  24. <view class='text'>
  25. <view><text class='name line1'>物流公司:</text> {{orderInfo.delivery_name}}</view>
  26. <view class='express line1'><text class='name'>快递单号:</text> {{orderInfo.delivery_id}}</view>
  27. </view>
  28. </view>
  29. <!-- #ifndef H5 -->
  30. <view class='copy' @tap='copyOrderId'>复制单号</view>
  31. <!-- #endif -->
  32. <!-- #ifdef H5 -->
  33. <view class='copy copy-data' :data-clipboard-text="orderInfo.delivery_id">复制单号</view>
  34. <!-- #endif -->
  35. </view>
  36. <view class='item' v-for="(item,index) in expressList" :key="index">
  37. <view class='circular' :class='index === 0 ? "on":""'></view>
  38. <view class='text' :class='index===0 ? "on-font on":""'>
  39. <view>{{item.status}}</view>
  40. <view class='data' :class='index===0 ? "on-font on":""'>{{item.time}}</view>
  41. </view>
  42. </view>
  43. </view>
  44. <!-- <recommend :hostProduct='hostProduct'></recommend> -->
  45. </view>
  46. <!-- #ifdef MP -->
  47. <!-- <authorize v-if="isShowAuth" @authColse="authColse" @onLoadFun="onLoadFun"></authorize> -->
  48. <!-- #endif -->
  49. </view>
  50. </template>
  51. <script>
  52. import {
  53. getProductHot
  54. } from '@/api/store.js';
  55. import {
  56. getLogisticsDetails
  57. } from '@/api/activity.js'
  58. import ClipboardJS from "@/plugin/clipboard/clipboard.js";
  59. import {
  60. toLogin
  61. } from '@/libs/login.js';
  62. import {
  63. mapGetters
  64. } from "vuex";
  65. import recommend from '@/components/recommend';
  66. import colors from '@/mixins/color.js';
  67. export default {
  68. components: {
  69. recommend
  70. },
  71. mixins:[colors],
  72. data() {
  73. return {
  74. orderId: '',
  75. product: {
  76. productInfo: {}
  77. },
  78. orderInfo: {},
  79. expressList: [],
  80. hostProduct: [],
  81. isShowAuth: false
  82. };
  83. },
  84. computed: mapGetters(['isLogin']),
  85. watch: {
  86. isLogin: {
  87. handler: function(newV, oldV) {
  88. if (newV) {
  89. this.getExpress();
  90. }
  91. },
  92. deep: true
  93. }
  94. },
  95. onLoad: function(options) {
  96. if (!options.order_id) return this.$util.Tips({
  97. title: '缺少订单号'
  98. });
  99. this.orderId = options.order_id;
  100. this.get_host_product();
  101. if (this.isLogin) {
  102. this.getExpress();
  103. } else {
  104. toLogin();
  105. }
  106. },
  107. onReady: function() {
  108. // #ifdef H5
  109. this.$nextTick(function() {
  110. const clipboard = new ClipboardJS(".copy-data");
  111. clipboard.on("success", () => {
  112. this.$util.Tips({
  113. title: '复制成功'
  114. });
  115. });
  116. });
  117. // #endif
  118. },
  119. onShow() {
  120. uni.removeStorageSync('form_type_cart');
  121. },
  122. methods: {
  123. // 授权关闭
  124. authColse: function(e) {
  125. this.isShowAuth = e
  126. },
  127. /**
  128. * 授权回调
  129. */
  130. onLoadFun: function() {
  131. this.getExpress();
  132. this.isShowAuth = false;
  133. },
  134. copyOrderId: function() {
  135. uni.setClipboardData({
  136. data: this.orderInfo.delivery_id
  137. });
  138. },
  139. getExpress: function() {
  140. let that = this;
  141. getLogisticsDetails(that.orderId).then(function(res) {
  142. let result = res.data.express.result || {};
  143. // that.$set(that, 'product', res.data.order.cartInfo[0] || {});
  144. that.$set(that, 'orderInfo', res.data.order);
  145. that.$set(that, 'expressList', result.list || []);
  146. }).catch((error) => {
  147. this.$util.Tips({
  148. title: error
  149. });
  150. });
  151. },
  152. /**
  153. * 获取我的推荐
  154. */
  155. get_host_product: function() {
  156. let that = this;
  157. getProductHot().then(function(res) {
  158. that.$set(that, 'hostProduct', res.data);
  159. });
  160. },
  161. }
  162. }
  163. </script>
  164. <style scoped lang="scss">
  165. .logistics .header {
  166. padding: 23rpx 30rpx;
  167. background-color: #fff;
  168. height: 166rpx;
  169. box-sizing: border-box;
  170. }
  171. .logistics .header .pictrue {
  172. width: 120rpx;
  173. height: 120rpx;
  174. }
  175. .logistics .header .pictrue image {
  176. width: 100%;
  177. height: 100%;
  178. border-radius: 6rpx;
  179. }
  180. .logistics .header .text {
  181. width: 540rpx;
  182. font-size: 28rpx;
  183. color: #999;
  184. margin-top: 6rpx;
  185. }
  186. .logistics .header .text .name {
  187. width: 260rpx;
  188. color: #282828;
  189. }
  190. .logistics .header .text .money {
  191. text-align: right;
  192. }
  193. .logistics .logisticsCon {
  194. background-color: #fff;
  195. margin: 12rpx 0;
  196. }
  197. .logistics .logisticsCon .company {
  198. height: 120rpx;
  199. margin: 0 0 45rpx 30rpx;
  200. padding-right: 30rpx;
  201. border-bottom: 1rpx solid #f5f5f5;
  202. }
  203. .logistics .logisticsCon .company .picTxt {
  204. width: 520rpx;
  205. }
  206. .logistics .logisticsCon .company .picTxt .iconfont {
  207. width: 50rpx;
  208. height: 50rpx;
  209. background-color: #666;
  210. text-align: center;
  211. line-height: 50rpx;
  212. color: #fff;
  213. font-size: 35rpx;
  214. }
  215. .logistics .logisticsCon .company .picTxt .text {
  216. width: 450rpx;
  217. font-size: 26rpx;
  218. color: #282828;
  219. }
  220. .logistics .logisticsCon .company .picTxt .text .name {
  221. color: #999;
  222. }
  223. .logistics .logisticsCon .company .picTxt .text .express {
  224. margin-top: 5rpx;
  225. }
  226. .logistics .logisticsCon .company .copy {
  227. font-size: 20rpx;
  228. width: 106rpx;
  229. text-align: center;
  230. border-radius: 3rpx;
  231. border: 1px solid #999;
  232. padding: 3rpx 0;
  233. }
  234. .logistics .logisticsCon .item {
  235. padding: 0 40rpx;
  236. position: relative;
  237. }
  238. .logistics .logisticsCon .item .circular {
  239. width: 20rpx;
  240. height: 20rpx;
  241. border-radius: 50%;
  242. position: absolute;
  243. top: -1rpx;
  244. left: 31.5rpx;
  245. background-color: #ddd;
  246. }
  247. .logistics .logisticsCon .item .circular.on {
  248. background-color: var(--view-theme);
  249. }
  250. .logistics .logisticsCon .item .text.on-font {
  251. color: var(--view-theme);
  252. }
  253. .logistics .logisticsCon .item .text .data.on-font {
  254. color: var(--view-theme);
  255. }
  256. .logistics .logisticsCon .item .text {
  257. font-size: 26rpx;
  258. color: #666;
  259. width: 615rpx;
  260. border-left: 1rpx solid #e6e6e6;
  261. padding: 0 0 60rpx 38rpx;
  262. }
  263. .logistics .logisticsCon .item .text.on {
  264. border-left-color: var(--view-minorColor);
  265. }
  266. .logistics .logisticsCon .item .text .data {
  267. font-size: 24rpx;
  268. color: #999;
  269. margin-top: 10rpx;
  270. }
  271. .logistics .logisticsCon .item .text .data .time {
  272. margin-left: 15rpx;
  273. }
  274. </style>