You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
535 lines
12 KiB
535 lines
12 KiB
<template>
|
|
<view class="details_wrapper">
|
|
<!-- <u-navbar title="物流信息" :autoBack="true" leftIconSize="0" placeholder>
|
|
<image :src="$util.img('upload/weapp/pageSalesman/reportForm/beibao.png')"></image>
|
|
</u-navbar> -->
|
|
|
|
<view class="head-shwen">
|
|
<view v-if="orderData.goods_sku_detail.type == 1">
|
|
<view v-show="orderData.order_status == 1">待发货</view>
|
|
<view v-show="orderData.order_status == 3">已发货</view>
|
|
<view v-show="orderData.order_status == 10">已收货</view>
|
|
</view>
|
|
<view v-else>
|
|
兑换详情
|
|
</view>
|
|
</view>
|
|
<view class="head">
|
|
<view class="head-dizi df" v-if="orderData.goods_sku_detail.type == 1">
|
|
<div class="dizi-one">
|
|
<image
|
|
:src="$util.img('upload/weapp/pageSalesman/reportForm/position.png')"
|
|
></image>
|
|
</div>
|
|
<div class="df fdc">
|
|
<div class="dizi-two">{{ orderData.full_address }}{{ orderData.address }}</div>
|
|
<div class="dizi-sui">
|
|
{{ orderData.name }}
|
|
<span>{{ orderData.mobile }}</span>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="dizi-for df aic">
|
|
<image :src="$util.img('upload/weapp/user/you.png')"></image>
|
|
</div> -->
|
|
</view>
|
|
<view class="cais" v-if="orderData.goods_sku_detail.type == 1">
|
|
<image :src="$util.img('upload/weapp/pageSalesman/reportForm/bar.png')"></image>
|
|
</view>
|
|
<view class="list">
|
|
<div class=" df">
|
|
<div><image :src="$util.img(orderData.goods_image)"></image></div>
|
|
<div class="df fdc">
|
|
<div class="name">{{ orderData.goods_name }}</div>
|
|
<div class="df jcsb wbf">
|
|
<div class="one">×{{ orderData.num }}</div>
|
|
<div class="sex">
|
|
{{ orderData.goods_sku_detail.point }}积分
|
|
<span v-if="Number(orderData.goods_sku_detail.price)">
|
|
+￥{{ Number(orderData.goods_sku_detail.price) }}元
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</view>
|
|
<view class="dinkdn">
|
|
<div class="df jcsb">
|
|
<div class="dindan">
|
|
订单编号
|
|
<span>{{ orderData.order_no }}</span>
|
|
</div>
|
|
<div class="fuzhi df aic jcsa" @click="$util.copy(orderData.order_no)">
|
|
复制
|
|
</div>
|
|
</div>
|
|
<div class="df jcsb">
|
|
<div class="dindan">
|
|
订单时间
|
|
<span>{{ $util.timeStampTurnTime(orderData.create_time) }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="df jcsb">
|
|
<div class="dindan">
|
|
付款时间
|
|
<span>{{ $util.timeStampTurnTime(orderData.pay_time) }}</span>
|
|
</div>
|
|
</div>
|
|
</view>
|
|
<view class="zonjia df">
|
|
<div class="f1">
|
|
<div class="df jcsb">
|
|
<div class="zonj">商品总价</div>
|
|
<div class="qiam" style="color: #222222;">
|
|
<div v-if="orderData.type == 1">
|
|
<div>{{ orderData.point }}积分</div>
|
|
</div>
|
|
<div v-if="orderData.type == 0" style="display: flex;">
|
|
<div>
|
|
{{ orderData.point }}积分
|
|
<span v-if="Number(orderData.price)">
|
|
+￥{{ Number(orderData.price) }}元
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="df jcsb" v-if="Number(orderData.delivery_price)">
|
|
<div class="zonj">运费</div>
|
|
<div class="qiam" style="color: red;">￥{{ orderData.delivery_price }}</div>
|
|
</div>
|
|
</div>
|
|
</view>
|
|
<view class="logisticsBox" v-if="showLogistics">
|
|
<view class="logisticsHead">
|
|
<view class="logistics-logo">
|
|
<image :src="$util.img(logisticsData.company_info.logo)"></image>
|
|
</view>
|
|
<view class="logistics-info">
|
|
<view class="company">
|
|
<view class="title">承运公司</view>
|
|
<view class="con">{{ logisticsData.company_info.company_name }}</view>
|
|
</view>
|
|
<view class="orderNum">
|
|
<view style="display: flex;">
|
|
<view class="title">快递编号</view>
|
|
<view class="con">{{ logisticsData.logistic_code }}</view>
|
|
</view>
|
|
<view class="fuzhi" @click="$util.copy(logisticsData.logistic_code)">
|
|
复制
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="orderStatus">
|
|
<u-steps direction="column" dot :current="0">
|
|
<u-steps-item
|
|
:title="item.remark"
|
|
:desc="item.datetime"
|
|
v-for="(item, index) in logisticsData.list"
|
|
:key="index"
|
|
></u-steps-item>
|
|
</u-steps>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view style="width: 100vw; height:120rpx ;"></view>
|
|
<view class="footerBtn" v-if="index == 1 && orderData.goods_sku_detail.type == 1">
|
|
<view class="submit-btn" v-if="orderData.order_status == 3">
|
|
<u-button type="primary" size="mini" @click="getLogistics()">查看物流</u-button>
|
|
<u-button type="primary" size="mini" @click="qudwl()">确认收货</u-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
index: '',
|
|
order_id: undefined,
|
|
orderData: {
|
|
goods_sku_detail: {}
|
|
},
|
|
logisticsData: {
|
|
company_info: {},
|
|
list: []
|
|
},
|
|
showLogistics: false
|
|
};
|
|
},
|
|
onLoad(optin) {
|
|
this.index = optin.im;
|
|
if (optin.order_id) {
|
|
this.order_id = optin.order_id;
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getExchangeOrderDetail();
|
|
},
|
|
methods: {
|
|
getExchangeOrderDetail() {
|
|
this.$api.sendRequest({
|
|
url: '/api/goodsexchange/getExchangeOrderDetail',
|
|
data: {
|
|
order_id: this.order_id
|
|
},
|
|
success: res => {
|
|
this.orderData = res.data;
|
|
|
|
if (this.orderData.order_status == 10) {
|
|
this.getLogistics();
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
btn() {
|
|
this.$util.showToast({
|
|
title: '已告知商家尽快发货'
|
|
});
|
|
},
|
|
// 确认收货
|
|
qudwl() {
|
|
this.$api.sendRequest({
|
|
url: '/api/goodsexchange/takeDelivery',
|
|
data: {
|
|
order_id: this.order_id
|
|
},
|
|
success: res => {
|
|
uni.navigateTo({
|
|
url: '/pages_tool/member/exchange_record'
|
|
});
|
|
}
|
|
});
|
|
// this.$util.showToast({
|
|
// title: '确认收货成功'
|
|
// });
|
|
},
|
|
// 查看物流
|
|
getLogistics() {
|
|
// 显示物流信息
|
|
this.showLogistics = true;
|
|
this.$api.sendRequest({
|
|
url: '/api/goodsexchange/package',
|
|
data: {
|
|
order_id: this.order_id
|
|
},
|
|
success: res => {
|
|
this.logisticsData = res.data;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.details_wrapper {
|
|
position: relative;
|
|
|
|
.head-shwen {
|
|
width: 100%;
|
|
height: 150rpx;
|
|
background-image: linear-gradient(rgb(33, 187, 243), rgb(247, 247, 247));
|
|
|
|
line-height: 40rpx;
|
|
view {
|
|
text-align: center;
|
|
line-height: 120rpx;
|
|
width:200rpx;
|
|
margin: 0 auto;
|
|
font-size:32rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
color: #fff;
|
|
}
|
|
}
|
|
.head {
|
|
padding: 0 24rpx;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
top: -40rpx;
|
|
.head-dizi {
|
|
width: 100%;
|
|
height: 172rpx;
|
|
background: #ffffff;
|
|
border-radius: 16rpx;
|
|
padding: 0 24rpx;
|
|
box-sizing: border-box;
|
|
.dizi-one {
|
|
image {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
margin-top: 34rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
}
|
|
.dizi-two {
|
|
font-size: 32rpx;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #222222;
|
|
line-height: 48rpx;
|
|
margin-top: 32rpx;
|
|
}
|
|
.dizi-sui {
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #222222;
|
|
line-height: 44rpx;
|
|
margin-top: 8rpx;
|
|
span {
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
line-height: 44rpx;
|
|
margin-left: 16rpx;
|
|
}
|
|
}
|
|
.dizi-for {
|
|
image {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
margin-left: 106rpx;
|
|
}
|
|
}
|
|
}
|
|
.cais {
|
|
position: relative;
|
|
top: -35rpx;
|
|
image {
|
|
width: 100%;
|
|
height: 6rpx;
|
|
}
|
|
}
|
|
|
|
.list {
|
|
width: 100%;
|
|
background: #ffffff;
|
|
border-radius: 16rpx;
|
|
padding: 0 32rpx;
|
|
box-sizing: border-box;
|
|
padding-bottom: 32rpx;
|
|
image {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
margin-top: 32rpx;
|
|
}
|
|
.qaun {
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
line-height: 40rpx;
|
|
margin-top: 24rpx;
|
|
image {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-left: 8rpx;
|
|
}
|
|
}
|
|
.name {
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #222222;
|
|
line-height: 40rpx;
|
|
margin-top: 32rpx;
|
|
}
|
|
.wbf {
|
|
width: 490rpx;
|
|
.one {
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
line-height: 34rpx;
|
|
margin-top: 86rpx;
|
|
}
|
|
.sex {
|
|
font-size: 24rpx;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #222222;
|
|
line-height: 40rpx;
|
|
margin-top: 80rpx;
|
|
}
|
|
}
|
|
}
|
|
.dinkdn {
|
|
width: 100%;
|
|
background: #ffffff;
|
|
border-radius: 16rpx;
|
|
padding: 8rpx 32rpx 32rpx 32rpx;
|
|
box-sizing: border-box;
|
|
margin-top: 24rpx;
|
|
.dindan {
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
line-height: 40rpx;
|
|
margin-top: 32rpx;
|
|
span {
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #222222;
|
|
line-height: 40rpx;
|
|
margin-left: 48rpx;
|
|
}
|
|
}
|
|
.fuzhi {
|
|
width: 96rpx;
|
|
height: 48rpx;
|
|
background: #ffffff;
|
|
border-radius: 28rpx;
|
|
border: 2rpx solid #e8e8e8;
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #222222;
|
|
line-height: 34rpx;
|
|
margin-top: 28rpx;
|
|
}
|
|
}
|
|
.zonjia {
|
|
padding: 8rpx 32rpx 32rpx 32rpx;
|
|
width: 100%;
|
|
background: #ffffff;
|
|
border-radius: 16rpx;
|
|
margin-top: 24rpx;
|
|
box-sizing: border-box;
|
|
.zonj {
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #222222;
|
|
line-height: 40rpx;
|
|
margin-top: 24rpx;
|
|
}
|
|
.qiam {
|
|
font-size: 24rpx;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
line-height: 40rpx;
|
|
margin-top: 24rpx;
|
|
}
|
|
.img {
|
|
image {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
.logisticsBox {
|
|
padding: 32rpx 32rpx 32rpx 32rpx;
|
|
width: 100%;
|
|
background: #ffffff;
|
|
border-radius: 16rpx;
|
|
margin-top: 24rpx;
|
|
box-sizing: border-box;
|
|
|
|
.logisticsHead {
|
|
width: 100%;
|
|
display: flex;
|
|
margin-bottom: 20rpx;
|
|
.logistics-logo {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
margin-right: 20rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.logistics-info {
|
|
width: calc(100%-120rpx) !important;
|
|
height: 120rpx;
|
|
|
|
.company,
|
|
.orderNum {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 60rpx;
|
|
.title {
|
|
margin-right: 30rpx;
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
}
|
|
.con {
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
.orderNum {
|
|
justify-content: space-between;
|
|
|
|
.fuzhi {
|
|
width: 96rpx;
|
|
height: 48rpx;
|
|
background: #ffffff;
|
|
border-radius: 28rpx;
|
|
border: 2rpx solid #e8e8e8;
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #222222;
|
|
line-height: 48rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.orderStatus {
|
|
}
|
|
}
|
|
}
|
|
.footerBtn {
|
|
display: flex;
|
|
position: fixed;
|
|
z-index: 5;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 100vw;
|
|
height: 100rpx;
|
|
background: #fff;
|
|
text-align: right;
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
padding-bottom: constant(safe-area-inset-bottom);
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
.submit-btn {
|
|
width: 100%;
|
|
height: 80rpx;
|
|
margin: 0 30rpx;
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
align-items: center;
|
|
button {
|
|
line-height: 70rpx;
|
|
width: 180rpx;
|
|
height: 70rpx;
|
|
padding: 0;
|
|
font-size: $font-size-base;
|
|
font-weight: bold;
|
|
}
|
|
.no-submit {
|
|
width: unset;
|
|
background-color: rgb(204, 204, 204);
|
|
color: #ffffff;
|
|
padding: 0 20rpx;
|
|
font-size: $font-size-base;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|