123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301 |
- <template>
- <view :style="colorStyle">
- <view class='logistics'>
- <view class='header acea-row row-between row-top' v-for="(item,index) in product" :key="index">
- <view class='pictrue'>
- <image :src='item.productInfo.image'></image>
- </view>
- <view class='text acea-row row-between'>
- <view class='name line2'>{{item.productInfo.store_name}}</view>
- <view class='money'>
- <view>¥{{item.truePrice}}</view>
- <view>x{{item.cart_num}}</view>
- </view>
- </view>
- </view>
- <view class='logisticsCon'>
- <view class='company acea-row row-between-wrapper'>
- <view class='picTxt acea-row row-between-wrapper'>
- <view class='iconfont icon-wuliu'></view>
- <view class='text'>
- <view><text class='name line1'>物流公司:</text> {{orderInfo.delivery_name}}</view>
- <view class='express line1'><text class='name'>快递单号:</text> {{orderInfo.delivery_id}}</view>
- </view>
- </view>
-
- <view class='copy' @tap='copyOrderId'>复制单号</view>
-
-
- <view class='copy copy-data' :data-clipboard-text="orderInfo.delivery_id">复制单号</view>
-
- </view>
- <view class='item' v-for="(item,index) in expressList" :key="index">
- <view class='circular' :class='index === 0 ? "on":""'></view>
- <view class='text' :class='index===0 ? "on-font on":""'>
- <view>{{item.status}}</view>
- <view class='data' :class='index===0 ? "on-font on":""'>{{item.time}}</view>
- </view>
- </view>
- </view>
-
- </view>
-
-
-
- </view>
- </template>
- <script>
- import {
- express
- } from '@/api/order.js';
- import {
- getProductHot
- } from '@/api/store.js';
- import ClipboardJS from "@/plugin/clipboard/clipboard.js";
- import {
- toLogin
- } from '@/libs/login.js';
- import {
- mapGetters
- } from "vuex";
- import recommend from '@/components/recommend';
- import colors from "@/mixins/color";
- export default {
- components: {
- recommend
- },
- mixins: [colors],
- data() {
- return {
- orderId: '',
- type:'',
- product: [],
- orderInfo: {},
- expressList: [],
- hostProduct: [],
- isShowAuth: false
- };
- },
- computed: mapGetters(['isLogin']),
- watch: {
- isLogin: {
- handler: function(newV, oldV) {
- if (newV) {
- this.getExpress();
- this.get_host_product();
- }
- },
- deep: true
- }
- },
- onLoad: function(options) {
- if (!options.orderId) return this.$util.Tips({
- title: '缺少订单号'
- });
- if(typeof(options.type) == 'undefined'){
- this.type = ''
- }else{
- this.type = options.type
- }
- this.orderId = options.orderId;
- if (this.isLogin) {
- this.getExpress();
- this.get_host_product();
- }
- },
- onReady: function() {
-
- this.$nextTick(function() {
- const clipboard = new ClipboardJS(".copy-data");
- clipboard.on("success", () => {
- this.$util.Tips({
- title: '复制成功'
- });
- });
- });
-
- },
- onShow() {
- uni.removeStorageSync('form_type_cart');
- if(!this.isLogin){
- toLogin();
- }
- },
- methods: {
-
- authColse: function(e) {
- this.isShowAuth = e
- },
-
- onLoadFun: function() {
- this.getExpress();
- this.get_host_product();
- this.isShowAuth = false;
- },
- copyOrderId: function() {
- uni.setClipboardData({
- data: this.orderInfo.delivery_id
- });
- },
- getExpress: function() {
- let that = this;
- express(that.orderId,this.type).then(function(res) {
- let result = res.data.express.result || {};
- that.$set(that, 'product', res.data.order.cartInfo || []);
- that.$set(that, 'orderInfo', res.data.order);
- that.$set(that, 'expressList', result.list || []);
- }).catch((error) => {
- this.$util.Tips({
- title: error
- });
- });
- },
-
- get_host_product: function() {
- let that = this;
- getProductHot().then(function(res) {
- that.$set(that, 'hostProduct', res.data);
- });
- },
- }
- }
- </script>
- <style scoped lang="scss">
- .logistics .header {
- padding: 23rpx 30rpx;
- background-color: #fff;
- height: 166rpx;
- box-sizing: border-box;
- }
- .logistics .header .pictrue {
- width: 120rpx;
- height: 120rpx;
- }
- .logistics .header .pictrue image {
- width: 100%;
- height: 100%;
- border-radius: 6rpx;
- }
- .logistics .header .text {
- width: 540rpx;
- font-size: 28rpx;
- color: #999;
- margin-top: 6rpx;
- }
- .logistics .header .text .name {
- width: 365rpx;
- color: #282828;
- }
- .logistics .header .text .money {
- text-align: right;
- }
- .logistics .logisticsCon {
- background-color: #fff;
- margin: 12rpx 0;
- }
- .logistics .logisticsCon .company {
- height: 120rpx;
- margin: 0 0 45rpx 30rpx;
- padding-right: 30rpx;
- border-bottom: 1rpx solid #f5f5f5;
- }
- .logistics .logisticsCon .company .picTxt {
- width: 520rpx;
- }
- .logistics .logisticsCon .company .picTxt .iconfont {
- width: 50rpx;
- height: 50rpx;
- background-color: #666;
- text-align: center;
- line-height: 50rpx;
- color: #fff;
- font-size: 35rpx;
- }
- .logistics .logisticsCon .company .picTxt .text {
- width: 450rpx;
- font-size: 26rpx;
- color: #282828;
- }
- .logistics .logisticsCon .company .picTxt .text .name {
- color: #999;
- }
- .logistics .logisticsCon .company .picTxt .text .express {
- margin-top: 5rpx;
- }
- .logistics .logisticsCon .company .copy {
- font-size: 20rpx;
- width: 106rpx;
- text-align: center;
- border-radius: 3rpx;
- border: 1px solid #999;
- padding: 3rpx 0;
- }
- .logistics .logisticsCon .item {
- padding: 0 40rpx;
- position: relative;
- }
- .logistics .logisticsCon .item .circular {
- width: 20rpx;
- height: 20rpx;
- border-radius: 50%;
- position: absolute;
- top: -1rpx;
- left: 31.5rpx;
- background-color: #ddd;
- }
- .logistics .logisticsCon .item .circular.on {
- background-color: var(--view-theme);
- }
- .logistics .logisticsCon .item .text.on-font {
- color: var(--view-theme);
- }
- .logistics .logisticsCon .item .text .data.on-font {
- color: var(--view-theme);
- }
- .logistics .logisticsCon .item .text {
- font-size: 26rpx;
- color: #666;
- width: 615rpx;
- border-left: 1rpx solid #e6e6e6;
- padding: 0 0 60rpx 38rpx;
- }
- .logistics .logisticsCon .item .text.on {
- border-left-color: var(--view-minorColor);
- }
- .logistics .logisticsCon .item .text .data {
- font-size: 24rpx;
- color: #999;
- margin-top: 10rpx;
- }
- .logistics .logisticsCon .item .text .data .time {
- margin-left: 15rpx;
- }
- </style>
|