index.vue 6.6 KB

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