|
|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <div v-loading="loading">
|
|
|
+ <div v-loading="loading" class="orderList">
|
|
|
<div class="white-box">
|
|
|
<div class="filter-box">
|
|
|
<filter-user :filter-types="filterTypes" @select-value="handleFilterUser"></filter-user>
|
|
|
@@ -7,6 +7,7 @@
|
|
|
<el-table ref="multipleTable" :data="tableData" style="width: 100%;"
|
|
|
:row-class-name="rowClassName"
|
|
|
@selection-change="handleSelectionChange"
|
|
|
+ @cell-click="openLogisticsQuery"
|
|
|
:height="tool.getTableHeight()">
|
|
|
<el-table-column type="selection" width="70" v-if="tableHeaders"></el-table-column>
|
|
|
<el-table-column v-for="(tableHeader, key) in tableHeaders" :key="key" :label="tableHeader.header" :width="tableHeader.other.width ? tableHeader.other.width : ''" :prop="tableHeader.other.prop ? tableHeader.other.prop : null">
|
|
|
@@ -55,24 +56,56 @@
|
|
|
<el-button type="primary" @click.native="handleDelivery">发货</el-button>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
+
|
|
|
+ <el-dialog
|
|
|
+ :width="dialogWidth"
|
|
|
+ custom-class="logisticsQueryDialog"
|
|
|
+ title="物流动态"
|
|
|
+ :visible.sync="logisticsQueryDialog"
|
|
|
+ :before-close="logisticsQueryDialogHandleClose">
|
|
|
+ <div class="diaBody" v-loading="logisticsQueryLoading">
|
|
|
+ <el-tabs style="width: 100%!important" type="border-card" v-if="logisticsQueryList.length > 0">
|
|
|
+ <el-tab-pane v-for="( item, index ) in logisticsQueryList" :key="index" :label="item.name">
|
|
|
+ <div class="block">
|
|
|
+ <el-timeline :reverse="reverse">
|
|
|
+ <el-timeline-item
|
|
|
+ v-for="(activity, index2) in item.children"
|
|
|
+ :key="index2"
|
|
|
+ :icon="activity.icon"
|
|
|
+ :color="activity.color"
|
|
|
+ :size="activity.size"
|
|
|
+ :timestamp="activity.date_action">
|
|
|
+ <span class="timelineStatus">{{activity.order_status}}</span>
|
|
|
+ </el-timeline-item>
|
|
|
+ </el-timeline>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ <el-empty v-if="logisticsQueryEmpty" :image-size="200"></el-empty>
|
|
|
+
|
|
|
+ <!-- <span slot="footer" class="dialog-footer">-->
|
|
|
+ <!-- <el-button @click="dialogVisible = false">取 消</el-button>-->
|
|
|
+ <!-- <el-button type="primary" @click="logisticsQueryDialog = false">确 定</el-button>-->
|
|
|
+ <!-- </span>-->
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import network from '@/utils/network'
|
|
|
-import tool from '@/utils/tool'
|
|
|
-import baseInfo from '@/utils/baseInfo'
|
|
|
import FilterUser from '@/components/FilterUser'
|
|
|
-import permission from '@/utils/permission'
|
|
|
import Pagination from '@/components/Pagination'
|
|
|
import filterHelper from '@/utils/filterHelper'
|
|
|
+import network from '@/utils/network'
|
|
|
+import permission from '@/utils/permission'
|
|
|
+import tool from '@/utils/tool'
|
|
|
+import axios from 'axios'
|
|
|
|
|
|
export default {
|
|
|
name: 'shop_order-list',
|
|
|
components: {FilterUser, Pagination},
|
|
|
- mounted () {
|
|
|
- this.getData()
|
|
|
- },
|
|
|
data () {
|
|
|
return {
|
|
|
tableHeaders: null,
|
|
|
@@ -94,9 +127,87 @@ export default {
|
|
|
expressCompany: '',
|
|
|
orderTrackNo: '',
|
|
|
},
|
|
|
+ logisticsQueryDialog: false,
|
|
|
+ logisticsQueryList: [],
|
|
|
+ logisticsQueryLoading: false,
|
|
|
+ reverse: true,
|
|
|
+ logisticsQueryEmpty: false,
|
|
|
+ dialogWidth:0,
|
|
|
+ dialogTop:0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.setDialogWidth()
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getData()
|
|
|
+ window.onresize = () => {
|
|
|
+ return (() => {
|
|
|
+ this.setDialogWidth()
|
|
|
+ })()
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ setDialogWidth() {
|
|
|
+ var val = document.body.clientWidth
|
|
|
+ const def = 800 // 默认宽度
|
|
|
+ if (val > def) {
|
|
|
+ this.dialogWidth = '60%'
|
|
|
+ this.dialogTop = '15vh'
|
|
|
+ } else {
|
|
|
+ this.dialogWidth = '90%'
|
|
|
+ this.dialogTop = '1vh'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ openLogisticsQuery(row, column, cell, event){
|
|
|
+ this.logisticsQueryEmpty = false
|
|
|
+
|
|
|
+ if(column.label == "订单号"){
|
|
|
+ console.log(row.SEND_AT.value , row.STATUS, row.PAY_TYPE.value )
|
|
|
+ if((row.SEND_AT.value > 0 && row.STATUS == '1' && row.PAY_TYPE.value === '在线支付') === false ) return
|
|
|
+ let id = row.SN.value
|
|
|
+ this.logisticsQueryList = []
|
|
|
+ this.logisticsQueryDialog = true
|
|
|
+ this.logisticsQueryLoading = true
|
|
|
+ this.queryData(id).then(res => {
|
|
|
+ const data = res.data.data
|
|
|
+ let keysList = Object.keys(data)
|
|
|
+ let list = []
|
|
|
+ keysList.forEach((key, index) => {
|
|
|
+ let oneList = data[key]
|
|
|
+ oneList[ oneList.length - 1 ].color = '#0bbd87'
|
|
|
+ oneList[ oneList.length - 1 ].size = 'large'
|
|
|
+ // oneList[ oneList.length - 1 ].icon = 'el-icon-s-promotion'
|
|
|
+ let one = {
|
|
|
+ 'name': key,
|
|
|
+ 'children': oneList
|
|
|
+ }
|
|
|
+ list.push(one)
|
|
|
+ })
|
|
|
+ console.log(list)
|
|
|
+ this.logisticsQueryList = list
|
|
|
+ this.logisticsQueryLoading = false
|
|
|
+ }).catch((error) =>{
|
|
|
+ console.log(error);
|
|
|
+ this.logisticsQueryList = []
|
|
|
+ this.logisticsQueryEmpty = true
|
|
|
+ this.logisticsQueryLoading = false
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ openLogisticsQuery1 (data) {
|
|
|
+
|
|
|
+ },
|
|
|
+ async queryData (id) {
|
|
|
+ const link = 'https://taoplus.com.my/index.php?route=information/order_tracking/jsons&order_tracking_search=' + id
|
|
|
+ const ret = await axios.get(link)// await 后面也可以跟的是Promise实例对象
|
|
|
+ // console.log(ret)
|
|
|
+ return ret
|
|
|
+ },
|
|
|
+ logisticsQueryDialogHandleClose (done) {
|
|
|
+ this.logisticsQueryDialog = false
|
|
|
+ },
|
|
|
+
|
|
|
rowClassName (val) {
|
|
|
if (val.row) {
|
|
|
let index = this.multipleSelection.findIndex(item => {
|
|
|
@@ -199,8 +310,14 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-/deep/.el-table .selected-row {
|
|
|
+::v-deep.el-table .selected-row {
|
|
|
background: #bce5ef;
|
|
|
/*color: white;*/
|
|
|
}
|
|
|
+.timelineStatus{
|
|
|
+ color: #409EFF;
|
|
|
+}
|
|
|
+.diaBody{
|
|
|
+ min-height: 20vh;
|
|
|
+}
|
|
|
</style>
|
tyler