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.
366 lines
9.8 KiB
366 lines
9.8 KiB
<template>
|
|
<div class="order-detail wrapper_1200">
|
|
<div class="crumbs">
|
|
<el-breadcrumb separator="/">
|
|
<el-breadcrumb-item :to="{ path: '/order' }">我的订单</el-breadcrumb-item>
|
|
<el-breadcrumb-item>订单详情</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
</div>
|
|
<!-- 订单信息 -->
|
|
<div class="cont">
|
|
<div class="table">
|
|
<el-table
|
|
:data="tableData"
|
|
border
|
|
style="width: 100%"
|
|
:header-cell-style="{ background: '#FAFAFA' }"
|
|
>
|
|
<el-table-column prop="name" label="商品" align="center" width="300">
|
|
<template slot-scope="scope">
|
|
<div class="good_info">
|
|
<div class="l">
|
|
<img :src="imgUrl + scope.row.goods_image" alt />
|
|
</div>
|
|
<div class="r">
|
|
<p>{{ scope.row.goods_name }}</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="order_no"
|
|
label="订单编号"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="num"
|
|
label="物品数量"
|
|
align="center"
|
|
width="80"
|
|
></el-table-column>
|
|
|
|
<el-table-column prop="point" label="实付积分" align="center" width="140">
|
|
</el-table-column>
|
|
<el-table-column prop="price" label="实付余额" align="center" width="140">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="order_status"
|
|
label="订单状态"
|
|
align="center"
|
|
width="140"
|
|
>
|
|
<template slot-scope="scope">
|
|
<div v-if="scope.row.goods_sku_detail.type == 1">
|
|
<div v-if="scope.row.order_status == 1">待发货</div>
|
|
<div v-if="scope.row.order_status == 3">已发货</div>
|
|
<div v-if="scope.row.order_status == 10">已收货</div>
|
|
</div>
|
|
<div v-if="scope.row.goods_sku_detail.type == 2">虚拟商品</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div
|
|
class="infoBoxF"
|
|
v-if="pointData.goods_sku_detail.type == 1 && pointData.order_status == 3"
|
|
>
|
|
<div class="btns">
|
|
<div class="gl" @click="takeDelivery">确认收货</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 物流信息 -->
|
|
<div class="playInfo" style="padding-bottom: 0">
|
|
<div class="left">
|
|
<div class="item">
|
|
<div class="l">订单信息</div>
|
|
<div class="r">
|
|
<p>
|
|
订单编号：{{ pointData.order_no }} |
|
|
<span @click="playCopy(pointData.order_no)">复制</span>
|
|
</p>
|
|
<p>
|
|
下单时间：{{
|
|
$dayjs(pointData.create_time * 1000).format("YYYY-MM-DD HH:mm:ss")
|
|
}}
|
|
</p>
|
|
<p>
|
|
付款时间：{{
|
|
$dayjs(pointData.pay_time * 1000).format("YYYY-MM-DD HH:mm:ss")
|
|
}}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div class="item">
|
|
<div class="l">物流信息</div>
|
|
<div class="r">
|
|
<p>logisticsData.trace.reason</p>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
<div class="right" v-if="pointData.goods_sku_detail.type == 1">
|
|
<div class="item">
|
|
<div class="l">收货信息</div>
|
|
<div class="r">
|
|
<p>{{ pointData.name }} {{ pointData.mobile }}</p>
|
|
<p>{{ pointData.full_address }}{{ pointData.address }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 物流进度 -->
|
|
<div
|
|
class="logisticsBox"
|
|
v-if="pointData.goods_sku_detail.type == 1 && !(pointData.order_status == 1)"
|
|
>
|
|
<div class="logisticsHead">
|
|
<img class="logo" :src="imgUrl + logisticsData.company_info.logo" alt="" />
|
|
<div class="logisticsInfo">
|
|
<div>
|
|
承运公司<span class="con">{{ logisticsData.company_info.company_name }}</span>
|
|
</div>
|
|
<div>
|
|
快递编号
|
|
<span class="con"
|
|
>{{ logisticsData.logistic_code }} |
|
|
<span @click="playCopy(logisticsData.logistic_code)">复制</span></span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<el-steps direction="vertical" :active="0" :space="100">
|
|
<el-step
|
|
v-for="(v, i) in logisticsList"
|
|
:key="i"
|
|
:title="v.remark"
|
|
:description="v.datetime"
|
|
></el-step>
|
|
</el-steps>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import Setting from "~/setting";
|
|
export default {
|
|
auth: false,
|
|
data() {
|
|
return {
|
|
userInfo: JSON.parse(localStorage.getItem("userInfo")),
|
|
imgUrl: Setting.uplodBaseURL,
|
|
tableData: [],
|
|
pointData: {
|
|
goods_sku_detail: {},
|
|
},
|
|
order_id: undefined,
|
|
logisticsData: {
|
|
company_info: {
|
|
logo: "",
|
|
},
|
|
},
|
|
logisticsList: [],
|
|
};
|
|
},
|
|
mounted() {
|
|
this.order_id = this.$route.query.order_id;
|
|
this.getPointData();
|
|
this.getPointLogistics();
|
|
},
|
|
methods: {
|
|
getPointData() {
|
|
let obj = {
|
|
order_id: this.order_id,
|
|
};
|
|
this.$axios
|
|
.post(`/goodsexchange/getExchangeOrderDetail`, obj)
|
|
.then((res) => {
|
|
this.tableData.push(res.data);
|
|
this.pointData = res.data;
|
|
console.log(this.pointData);
|
|
})
|
|
.catch((err) => {});
|
|
},
|
|
// 复制
|
|
playCopy(v) {
|
|
let url = v; //拿到想要复制的值
|
|
let copyInput = document.createElement("input"); //创建input元素
|
|
document.body.appendChild(copyInput); //向页面底部追加输入框
|
|
copyInput.setAttribute("value", url); //添加属性，将url赋值给input元素的value属性
|
|
copyInput.select(); //选择input元素
|
|
document.execCommand("Copy"); //执行复制命令
|
|
this.$message.success("复制成功"); //弹出提示信息，不同组件可能存在写法不同
|
|
//复制之后再删除元素，否则无法成功赋值
|
|
copyInput.remove(); //删除动态创建的节点
|
|
},
|
|
|
|
getPointLogistics() {
|
|
let obj = {
|
|
order_id: this.order_id,
|
|
};
|
|
this.$axios
|
|
.post(`/goodsexchange/package`, obj)
|
|
.then((res) => {
|
|
this.logisticsData = res.data;
|
|
this.logisticsList = res.data.list;
|
|
console.log(this.logisticsData);
|
|
})
|
|
.catch((err) => {});
|
|
},
|
|
takeDelivery() {
|
|
let obj = {
|
|
order_id: this.order_id,
|
|
};
|
|
this.$axios
|
|
.post(`/goodsexchange/takeDelivery`, obj)
|
|
.then((res) => {
|
|
this.$message({
|
|
message: res.message,
|
|
type: "success",
|
|
});
|
|
this.$router.push({ path: "/order" });
|
|
})
|
|
.catch((err) => {});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.order-detail {
|
|
.crumbs {
|
|
margin: 20px 0;
|
|
}
|
|
.cont {
|
|
background: #ffffff;
|
|
border-radius: 4px;
|
|
padding: 30px;
|
|
margin-bottom: 20px;
|
|
.table {
|
|
.good_info {
|
|
display: flex;
|
|
.l {
|
|
width: 100px;
|
|
height: 100px;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.r {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
margin-left: 20px;
|
|
p {
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #222222;
|
|
text-align: left;
|
|
line-height: 100px;
|
|
}
|
|
span {
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #585858;
|
|
text-align: left;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.infoBoxF {
|
|
margin-top: 30px;
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
div {
|
|
width: 80px;
|
|
height: 32px;
|
|
line-height: 32px;
|
|
text-align: center;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
// margin-left: 15px;
|
|
cursor: pointer;
|
|
}
|
|
.gl {
|
|
background: var(--themeColor);
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
.playInfo {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background: #ffffff;
|
|
border-radius: 4px;
|
|
padding: 30px;
|
|
margin-bottom: 20px;
|
|
.left,
|
|
.right {
|
|
width: 50%;
|
|
.item {
|
|
display: flex;
|
|
margin-bottom: 20px;
|
|
.l {
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #585858;
|
|
}
|
|
.r {
|
|
margin-left: 70px;
|
|
|
|
p {
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #222222;
|
|
margin-bottom: 15px;
|
|
span {
|
|
// color: #0094f9;
|
|
color: var(--themeColor);
|
|
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.logisticsBox {
|
|
background: #ffffff;
|
|
border-radius: 4px;
|
|
padding: 30px;
|
|
margin-bottom: 20px;
|
|
.logisticsHead {
|
|
width: 100%;
|
|
display: flex;
|
|
margin-bottom: 20px;
|
|
.logo {
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
.logisticsInfo {
|
|
margin: 0 40px;
|
|
div {
|
|
height: 40px;
|
|
line-height: 40px;
|
|
.con {
|
|
margin-left: 30px;
|
|
span {
|
|
color: var(--themeColor);
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|