|
@@ -0,0 +1,222 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <nav-bar title="查看物流" @click-left="$router.back()" />
|
|
|
+ <div class="store-club">
|
|
|
+ <div class="store">
|
|
|
+ <van-image :src="shopOrderList[0].shopLogo"></van-image>
|
|
|
+ <div class="title">{{ shopOrderList[0].shopName }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="goods-card">
|
|
|
+ <van-image :src="shopOrderList[0].logisticsRecordList[0].image"></van-image>
|
|
|
+ <div class="info">
|
|
|
+ <div class="name">{{ shopOrderList[0].logisticsRecordList[0].productName }}</div>
|
|
|
+ <div class="sum">购买数量:{{ shopOrderList[0].logisticsRecordList[0].buyNum }}</div>
|
|
|
+ <div class="good-sum">已发货数量:{{ shopOrderList[0].logisticsRecordList[0].num }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="logisticInfo">
|
|
|
+ <div class="title">物流信息</div>
|
|
|
+ <div class="logisticInfo-no" @click="active = !active" :class="active ? 'activeLogisticInfo' : ''">
|
|
|
+ <div class="label">{{ logisticsInformationList[0].logisticsCompanyName }}:</div>
|
|
|
+ <div class="shopNo">{{ logisticsInformationList[0].nu }}</div>
|
|
|
+ <van-button color="#FFEEE4" @click.stop="handlerCopy">复制</van-button>
|
|
|
+ </div>
|
|
|
+ <div class="logisticInfo-time">
|
|
|
+ <div class="label">发货时间:</div>
|
|
|
+ <div class="shopNo">{{ logisticsInformationList[0].updateDate }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="line"></div>
|
|
|
+ </div>
|
|
|
+ <div class="logistic-content" v-if="active">
|
|
|
+ <van-steps direction="vertical" :active="0" active-color="#333333" inactive-color="#999999" v-if="logisticsInformationList[0].routerList">
|
|
|
+ <van-step v-for="i in logisticsInformationList[0].routerList" :key="i">
|
|
|
+ <div>{{ r.desc }}</div>
|
|
|
+ <div>{{ i.time }}</div>
|
|
|
+ </van-step>
|
|
|
+ </van-steps>
|
|
|
+ <div class="empty" v-else>暂无物流信息</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { Toast } from 'vant'
|
|
|
+import { orderLogistics } from '@/api/institutionApi/order'
|
|
|
+export default {
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ logisticsInformationList: [],
|
|
|
+ shopOrderList: [],
|
|
|
+ active: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ shopOrderId () {
|
|
|
+ return this.$route.query.shopOrderId
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ this.orderLogistics()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async orderLogistics () {
|
|
|
+ const data = await orderLogistics({ shopOrderId: this.shopOrderId })
|
|
|
+ this.logisticsInformationList = data[0].logisticsInformationList
|
|
|
+ this.shopOrderList = data[0].shopOrderList
|
|
|
+ },
|
|
|
+ handlerCopy () {
|
|
|
+ const ele = document.createElement('input')
|
|
|
+ ele.value = this.logisticsInformationList[0].nu
|
|
|
+ document.body.appendChild(ele)
|
|
|
+ ele.select()
|
|
|
+ document.execCommand('copy')
|
|
|
+ Toast.success('复制成功')
|
|
|
+ document.body.removeChild(ele)
|
|
|
+ this.$emit('handlerShowDialog', false)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.store-club {
|
|
|
+ padding: 5.3vw 3.2vw 0 3.2vw;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #fff;
|
|
|
+ .store {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .van-image {
|
|
|
+ width: 7.5vw;
|
|
|
+ height: 7.5vw;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ margin-left: 2vw;
|
|
|
+ font-size: 4.3vw;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.goods-card {
|
|
|
+ padding: 3.3vw 0 8vw 0;
|
|
|
+ background: #fff;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ ::v-deep .van-image {
|
|
|
+ width: 24vw;
|
|
|
+ height: 24vw;
|
|
|
+ border-radius: 1.1vw;
|
|
|
+ }
|
|
|
+ .info {
|
|
|
+ width: 67.3vw;
|
|
|
+ .name {
|
|
|
+ color: #333333;
|
|
|
+ font-size: 3.7vw;
|
|
|
+ @include webkit-line-clamp(2)
|
|
|
+ }
|
|
|
+ .sum {
|
|
|
+ font-size: 3.2vw;
|
|
|
+ color: #999;
|
|
|
+ margin-top: 3.7vw;
|
|
|
+ }
|
|
|
+ .good-sum {
|
|
|
+ font-size: 3.2vw;
|
|
|
+ color: #999;
|
|
|
+ margin-top: 1vw;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.logisticInfo {
|
|
|
+ margin-top: 2.7vw;
|
|
|
+ padding: 5.3vw 3.2vw 0 3.2vw;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #fff;
|
|
|
+ .title {
|
|
|
+ color: #333;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 3.7vw;
|
|
|
+ margin-bottom: 3.2vw;
|
|
|
+ }
|
|
|
+ .logisticInfo-no, .logisticInfo-time {
|
|
|
+ margin-bottom: 3.2vw;
|
|
|
+ font-size: 3.7vw;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .logisticInfo-no {
|
|
|
+ position: relative;
|
|
|
+ .van-button {
|
|
|
+ width: 10.7vw;
|
|
|
+ height: 5.3vw;
|
|
|
+ border-radius: 1.2vw;
|
|
|
+ font-size: 3.2vw;
|
|
|
+ color: #FF5B00 !important;
|
|
|
+ white-space: nowrap;
|
|
|
+ line-height: 5.3vw;
|
|
|
+ margin-left: 4vw;
|
|
|
+ }
|
|
|
+ &::after {
|
|
|
+ transition: .3s all;
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ right: 4.3vw;
|
|
|
+ top: 0;
|
|
|
+ width: 6.4vw;
|
|
|
+ height: 6.4vw;
|
|
|
+ background: url('https://static.caimei365.com/app/mini-distribution/bottom.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ transform: rotate(90deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .activeLogisticInfo {
|
|
|
+ &::after {
|
|
|
+ transform: rotate(-90deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .logisticInfo-time {
|
|
|
+ padding-bottom: 3.2vw;
|
|
|
+ }
|
|
|
+ .label {
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ .line {
|
|
|
+ height: 1px;
|
|
|
+ width: 100%;
|
|
|
+ background: #E1E1E1;
|
|
|
+ }
|
|
|
+}
|
|
|
+.logistic-content {
|
|
|
+ background: #fff;
|
|
|
+ transition: .3s all;
|
|
|
+}
|
|
|
+.logistic-content {}
|
|
|
+::v-deep .van-step__icon--active {
|
|
|
+ width: 3.7vw;
|
|
|
+ height: 3.7vw;
|
|
|
+ background: #FFDCC8;
|
|
|
+ border-radius: 50%;
|
|
|
+ position: relative;
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ width: 1.6vw;
|
|
|
+ height: 1.6vw;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: #FF5B00;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ transform: translate(-60%, -60%);
|
|
|
+ }
|
|
|
+}
|
|
|
+.empty {
|
|
|
+ padding: 5.3vw 3.2vw;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: 3.7vw;
|
|
|
+ color: #999;
|
|
|
+}
|
|
|
+::v-deep .van-step__line {
|
|
|
+ background: #E1E1E1 !important;
|
|
|
+}
|
|
|
+</style>
|