Huanyuyuehui/pages/users/goods_logistics/index.vue

282 lines
7.4 KiB
Vue
Raw Normal View History

2024-03-21 17:52:58 +08:00
<template>
<view :style="viewColor">
<view class='logistics'>
<view class='header acea-row row-between row-top' v-if="product.cart_info">
<view class='pictrue' >
<image :src='product.cart_info.product.image'></image>
</view>
<view class='text acea-row row-between'>
<view>
<view class='name line1'>{{product.cart_info.product.store_name}}</view>
<view class="sku">{{product.cart_info.productAttr.sku}}</view>
<view class='money'>
2024-05-08 17:48:33 +08:00
<view v-if="orderInfo.activity_type == 20">{{product.cart_info.productAttr.ot_price}}个铸源星 <block v-if="product.cart_info.productAttr.price>0">+{{product.cart_info.productAttr.price}}</block></view>
2024-03-21 17:52:58 +08:00
<view v-else>{{product.product_price}}</view>
</view>
</view>
<view>x{{product.product_num}}</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 ? orderInfo.delivery_name : ''}}</view>
<view class='express line1'><text class='name'>快递单号</text> {{orderInfo.delivery_id ? orderInfo.delivery_id : ''}}</view>
</view>
</view>
<!-- #ifndef H5 -->
<view class='copy' @tap='copyOrderId'>复制单号</view>
<!-- #endif -->
<!-- #ifdef H5 -->
<view class='copy copy-data' :data-clipboard-text="orderInfo.delivery_id">复制单号</view>
<!-- #endif -->
</view>
<view v-if="expressList.length>0" 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>
<recommend v-if="recommend_switch == 1" :hostProduct='hostProduct' :isLogin="isLogin"></recommend>
</view>
</view>
</template>
<script>
2024-03-21 18:05:36 +08:00
2024-03-21 17:52:58 +08:00
import { express, refundOrderExpress } from '@/api/order.js';
import { getProductHot } from '@/api/store.js';
import ClipboardJS from "@/plugin/clipboard/clipboard.js";
import { mapGetters } from "vuex";
import { configMap } from '@/utils';
import { toLogin } from '@/libs/login.js';
import recommend from '@/components/recommend';
export default {
components: {
recommend,
},
data() {
return {
orderId: '',
refundId: '',
merId: '',
product: {},
orderInfo: {},
expressList: [],
hostProduct: [],
scroll: false,
page: 1,
limit: 10
};
},
computed: configMap({recommend_switch:0},mapGetters(['isLogin','viewColor'])),
onLoad: function (options) {
if (!options.orderId && !options.refundId) return this.$util.Tips({title:'缺少订单号'});
this.orderId = options.orderId;
this.refundId = options.refundId;
this.merId = options.merId;
if (this.isLogin) {
this.getExpress();
} else {
toLogin()
}
},
onReady: function() {
// #ifdef H5
this.$nextTick(function() {
const clipboard = new ClipboardJS(".copy-data");
clipboard.on("success", () => {
this.$util.Tips({
title: '复制成功'
});
});
});
// #endif
},
methods: {
copyOrderId:function(){
uni.setClipboardData({ data: this.orderInfo.delivery_id });
},
getExpress:function(){
let that=this;
uni.showLoading({
title: '加载中',
mask: true
})
that.orderId ?
express(that.orderId).then(function(res){
uni.hideLoading()
let result = res.data.express || {};
that.$set(that,'product',res.data.order.orderProduct[0] || {});
that.$set(that,'orderInfo',res.data.order);
that.$set(that,'expressList',result || []);
that.get_host_product();
}).catch(err => {
uni.hideLoading();
return that.$util.Tips({
title: err
});
}) : refundOrderExpress(that.merId,that.refundId).then(function(res){
uni.hideLoading()
let result = res.data.express || {};
that.$set(that,'product',res.data.refund.refundProduct[0].product || {});
that.$set(that,'orderInfo',res.data.refund);
that.$set(that,'expressList',result || []);
that.get_host_product();
}).catch(err => {
uni.hideLoading();
return that.$util.Tips({
title: err
});
});
},
/**
* 获取我的推荐
*/
get_host_product: function () {
let that = this;
if(that.scroll) return
that.scroll = true
getProductHot(
that.page,that.limit
).then(res=>{
that.page++
that.scroll = res.data.list.length < that.limit
that.hostProduct =that.hostProduct.concat(res.data.list)
})
},
},
onReachBottom() {
this.get_host_product()
},
// 滚动监听
onPageScroll() {
uni.$emit('scroll');
},
}
</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: 480rpx;
color: #282828;
}
.logistics .header .text .sku {
color: #999999;
font-size: 22rpx;
margin-top: 10rpx;
}
.logistics .header .text .money {
font-size: 22rpx;
margin-top: 10rpx;
}
.logistics .logisticsCon {
background-color: #fff;
margin: 12rpx 0;
}
.logistics .logisticsCon .company {
height: 120rpx;
margin: 0 0 45rpx 30rpx;
padding-right: 30rpx;
border-bottom: 1px 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;
height: 40rpx;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3rpx;
border: 1px solid #999;
}
.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: 1px solid #e6e6e6;
padding: 0 0 60rpx 38rpx;
}
.logistics .logisticsCon .item .text.on {
border-left-color: var(--view-bntColor22);
}
.logistics .logisticsCon .item .text .data {
font-size: 24rpx;
color: #999;
margin-top: 10rpx;
}
.logistics .logisticsCon .item .text .data .time {
margin-left: 15rpx;
}
</style>