You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
674 lines
16 KiB
Vue
674 lines
16 KiB
Vue
<template>
|
|
<view class="cabin-query">
|
|
<view class="query-box">
|
|
<view class="choice-btn">
|
|
<view class="left"><text class="iconfont icon-yunshu"></text><text class="tip">起运港</text></view>
|
|
<view class="right" @click="openInputSerch('portDeparture')">
|
|
<text class="gk" v-if="fromData.portDeparture">{{fromData.portDeparture }}</text>
|
|
<text class="gk" v-else>请选择起运港</text>
|
|
<text class="icon iconfont icon-daoda"></text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="choice-btn">
|
|
<view class="left"><text class="iconfont icon-yunshu"></text><text class="tip">目的港</text></view>
|
|
<view class="right" @click="openInputSerch('portArrival')">
|
|
<text class="gk" v-if="fromData.portArrival">{{fromData.portArrival }}</text>
|
|
<text class="gk" v-else>请选择目的港</text>
|
|
<text class="icon iconfont icon-daoda"></text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="choice-btn" @click="openInputSerch('boxType')">
|
|
<view class="left"><text class="iconfont icon-a-jizhuangxiang1"></text><text class="tip">箱型</text></view>
|
|
<view class="right">
|
|
<text class="gk" v-if="fromData.boxType">{{fromData.boxType }}</text>
|
|
<text class="gk" v-else>请选择箱型</text>
|
|
<text class="icon iconfont icon-daoda"></text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="choice-btn" @click="openInputSerch('webCode')">
|
|
<view class="left"><text class="iconfont icon-a-jizhuangxiang1"></text><text class="tip">船公司</text></view>
|
|
<view class="right">
|
|
<text class="gk" v-if="fromData.webCode">{{fromData.webCodeName }}</text>
|
|
<text class="gk" v-else>请选择船公司</text>
|
|
<text class="icon iconfont icon-daoda"></text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="choice-btn">
|
|
<view class="left"><text class="iconfont icon-shijian"></text><text class="tip">开始时间</text></view>
|
|
<view class="right">
|
|
<uni-datetime-picker type="date" :clear-icon="false" v-model="fromData.startTime"
|
|
@maskClick="startTimeClick" :start="Date.now()" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="choice-btn">
|
|
<view class="left"><text class="iconfont icon-shijian"></text><text class="tip">结束时间</text></view>
|
|
<view class="right">
|
|
<uni-datetime-picker type="date" :clear-icon="false" v-model="fromData.endTime"
|
|
@maskClick="endTimeClick" :start="Date.now()" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="button-box">
|
|
<button class="enter" @click="goQuery">查询</button>
|
|
<button class="reset" v-show="hasFromData" @click="resetFrom">重置</button>
|
|
</view>
|
|
|
|
</view>
|
|
<!-- <view class="query-history">
|
|
<view class="history-tit">
|
|
<text class="left">历史记录</text>
|
|
</view>
|
|
<view class="history-list">
|
|
<view class="history-view">
|
|
<view class="setOut">
|
|
<text class="tip">出发地</text>
|
|
<text class="top">{{fromData.portDeparture}}</text>
|
|
</view>
|
|
<view class="icon iconfont icon-daoda"></view>
|
|
<view class="arrive">
|
|
<text class="tip">目的地</text>
|
|
<text class="top">{{fromData.portArrival}}</text>
|
|
</view>
|
|
|
|
<text class="icon-tab left"></text>
|
|
<text class="icon-tab right"></text>
|
|
|
|
<text class="icon-tab top-left"></text>
|
|
<text class="icon-tab top-right"></text>
|
|
</view>
|
|
|
|
<view class="history-view">
|
|
<view class="setOut">
|
|
<text class="tip">出发地</text>
|
|
<text class="top">{{fromData.portDeparture}}</text>
|
|
</view>
|
|
<view class="icon iconfont icon-daoda"></view>
|
|
<view class="arrive">
|
|
<text class="tip">目的地</text>
|
|
<text class="top">{{fromData.portArrival}}</text>
|
|
</view>
|
|
|
|
<text class="icon-tab left"></text>
|
|
<text class="icon-tab right"></text>
|
|
</view>
|
|
|
|
<view class="history-view">
|
|
<view class="setOut">
|
|
<text class="tip">出发地</text>
|
|
<text class="top">{{fromData.portDeparture}}</text>
|
|
</view>
|
|
<view class="icon iconfont icon-daoda"></view>
|
|
<view class="arrive">
|
|
<text class="tip">目的地</text>
|
|
<text class="top">{{fromData.portArrival}}</text>
|
|
</view>
|
|
|
|
<text class="icon-tab left"></text>
|
|
<text class="icon-tab right"></text>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
-->
|
|
<inputSearch
|
|
ref="inputView"
|
|
v-if="inputSearchShow"
|
|
:inputData="inputSearchData"
|
|
@change="getInputChange"
|
|
@submit="getInputRes"
|
|
@cancel="cancelInput"
|
|
/>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import uniDatetimePicker from '@/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue'
|
|
import inputSearch from '@/components/inputSearch/inputSearch.vue'
|
|
import {
|
|
realGk,
|
|
realBox,
|
|
} from '@/common/js/api/manifest/cabinQuery.js'
|
|
export default {
|
|
components: {
|
|
uniDatetimePicker,
|
|
inputSearch
|
|
},
|
|
data() {
|
|
return {
|
|
fromData: {
|
|
portDeparture: 'QINGDAO',
|
|
portDepartureCode: 'CNTAO',
|
|
portArrival: '',
|
|
portArrivalCode: '',
|
|
boxType: '',
|
|
webCode: '',
|
|
webCodeName: '',
|
|
// portArrival: 'GDANSK, POLAND',
|
|
// portArrivalCode: 'PLGDN',
|
|
// boxType: '22G1',
|
|
startTime: '',
|
|
endTime: '',
|
|
},
|
|
hasFromData: true,
|
|
inputSearchShow: false,
|
|
inputSearchData:{
|
|
placeholder: '',
|
|
dataList: [],
|
|
showName: '',
|
|
type: '',
|
|
history: null,
|
|
},
|
|
inputSearchRes: {},
|
|
webCodeData:[
|
|
{
|
|
name: '马士基',
|
|
code: 'MSK',
|
|
image: '../../../static/image/logo/msk.png',
|
|
list: [],
|
|
status: 'loading',
|
|
},
|
|
{
|
|
name: 'MCC',
|
|
code: 'MCC',
|
|
image: '../../../static/image/logo/MCC.png',
|
|
list: [],
|
|
status: 'loading',
|
|
},
|
|
{
|
|
name: '法国达飞',
|
|
code: 'CMA',
|
|
image: '../../../static/image/logo/cma.png',
|
|
list: [],
|
|
status: 'loading',
|
|
},
|
|
{
|
|
name: '中远',
|
|
code: 'COSCO',
|
|
image: '../../../static/image/logo/cosco.png',
|
|
list: [],
|
|
status: 'loading',
|
|
},
|
|
{
|
|
name: 'OOCL',
|
|
code: 'OOCL',
|
|
image: '../../../static/image/logo/oocl.png',
|
|
list: [],
|
|
status: 'loading',
|
|
}
|
|
],
|
|
}
|
|
},
|
|
watch: {
|
|
fromData: {
|
|
handler(newValue, oldValue) {
|
|
let hasData = false
|
|
for (let key in newValue) {
|
|
if (newValue[key] != '') {
|
|
hasData = true;
|
|
}
|
|
}
|
|
this.hasFromData = hasData;
|
|
},
|
|
deep: true,
|
|
immediate: true
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
departureClick(e) {
|
|
console.log(e);
|
|
this.fromData.portDeparture = e.text;
|
|
},
|
|
arrivalClick(e) {
|
|
console.log(e);
|
|
this.fromData.portArrival = e.text;
|
|
},
|
|
startTimeClick(e) {
|
|
console.log('startTimeClick事件:', e);
|
|
},
|
|
endTimeClick(e) {
|
|
console.log('endTimeClick事件:', e);
|
|
},
|
|
goQuery() {
|
|
let res = '';
|
|
Object.keys(this.fromData).map((val, index) => {
|
|
if (this.fromData[val] == '' && val!='endTime') {
|
|
res = val
|
|
console.log(val, this.fromData[val] == '')
|
|
}
|
|
})
|
|
switch (res) {
|
|
// case 'endTime':
|
|
// this.$util.Tips({
|
|
// title: '请填写结束时间'
|
|
// });
|
|
// return false;
|
|
// break;
|
|
case 'startTime':
|
|
this.$util.Tips({
|
|
title: '请填写开始时间'
|
|
});
|
|
return false;
|
|
break;
|
|
case 'boxType':
|
|
this.$util.Tips({
|
|
title: '请填写箱型'
|
|
});
|
|
return false;
|
|
break;
|
|
case 'portArrival':
|
|
this.$util.Tips({
|
|
title: '请填写目的港'
|
|
});
|
|
return false;
|
|
break;
|
|
case 'portDeparture':
|
|
this.$util.Tips({
|
|
title: '请填写起运港'
|
|
});
|
|
return false;
|
|
break;
|
|
}
|
|
uni.navigateTo({
|
|
url: '/pages/manifest/cabinHistory/cabinHistory?data='+JSON.stringify(this.fromData)
|
|
})
|
|
},
|
|
resetFrom() {
|
|
this.fromData = {
|
|
portDeparture: '',
|
|
portDepartureCode: '',
|
|
portArrival: '',
|
|
portArrivalCode: '',
|
|
boxType: '',
|
|
startTime: '',
|
|
endTime: '',
|
|
}
|
|
},
|
|
openInputSerch(type){
|
|
this.inputSearchShow = true;
|
|
if(type == 'portDeparture'){
|
|
let data = {
|
|
placeholder: '请输入起运港',
|
|
dataList: [],
|
|
showName: 'EnName',
|
|
type: 'portDeparture',
|
|
history: this.fromData.portDeparture ? {
|
|
EnName: this.fromData.portDeparture,
|
|
code: this.fromData.portDepartureCode,
|
|
} : null,
|
|
}
|
|
this.$set(this, 'inputSearchData' , data)
|
|
}else if(type == 'portArrival'){
|
|
let data = {
|
|
placeholder: '请输入目的港',
|
|
dataList: [],
|
|
showName: 'EnName',
|
|
type: 'portArrival',
|
|
history: this.fromData.portArrival ? {
|
|
EnName: this.fromData.portArrival,
|
|
code: this.fromData.portArrivalCode,
|
|
} : null,
|
|
}
|
|
this.$set(this, 'inputSearchData' , data)
|
|
}else if(type == 'boxType'){
|
|
let data = {
|
|
placeholder: '请输入箱型',
|
|
dataList: [],
|
|
showName: 'Code',
|
|
type: 'boxType',
|
|
history: this.fromData.boxType ? {
|
|
Code: this.fromData.boxType
|
|
} : null,
|
|
}
|
|
this.$set(this, 'inputSearchData' , data)
|
|
}else if(type == 'webCode'){
|
|
let data = {
|
|
placeholder: '请输入船公司',
|
|
dataList: [],
|
|
showName: 'name',
|
|
type: 'webCode',
|
|
history: this.fromData.webCode ? {
|
|
name: this.fromData.webCodeName,
|
|
code: this.fromData.webCode,
|
|
} : null,
|
|
}
|
|
this.$set(this, 'inputSearchData' , data)
|
|
this.$set(this.inputSearchData, 'dataList', this.webCodeData);
|
|
}
|
|
},
|
|
|
|
getInputChange(key){
|
|
if(this.inputSearchData.type == 'portDeparture' || this.inputSearchData.type == 'portArrival'){
|
|
realGk({
|
|
name: key,
|
|
port_type: this.inputSearchData.type == 'portDeparture' ? 'pol' : 'pod'
|
|
}).then(res =>{
|
|
if(res.code == 200){
|
|
this.$set(this.inputSearchData, 'dataList', []);
|
|
this.$set(this.inputSearchData, 'dataList', res.data);
|
|
this.$refs.inputView.$data.inLoading = false;
|
|
this.$forceUpdate()
|
|
}else{
|
|
this.$set(this.inputSearchData, 'dataList', []);
|
|
this.$refs.inputView.$data.inLoading = false;
|
|
}
|
|
}).catch(err =>{
|
|
console.log('报错信息==', err)
|
|
this.$set(this.inputSearchData, 'dataList', []);
|
|
this.$refs.inputView.$data.inLoading = false;
|
|
})
|
|
}else if(this.inputSearchData.type == 'boxType'){
|
|
realBox({
|
|
name: key,
|
|
}).then(res =>{
|
|
if(res.code == 200){
|
|
this.$set(this.inputSearchData, 'dataList', res.data);
|
|
this.$refs.inputView.$data.inLoading = false;
|
|
this.$forceUpdate()
|
|
}else{
|
|
this.$set(this.inputSearchData, 'dataList', []);
|
|
this.$refs.inputView.$data.inLoading = false;
|
|
}
|
|
}).catch(err =>{
|
|
console.log('报错信息==', err)
|
|
this.$set(this.inputSearchData, 'dataList', []);
|
|
this.$refs.inputView.$data.inLoading = false;
|
|
})
|
|
}else if(this.inputSearchData.type == 'webCode'){
|
|
let newData = [];
|
|
this.webCodeData.map((item,index)=>{
|
|
if(item.name.includes(key)){
|
|
newData.push(item)
|
|
}
|
|
})
|
|
console.log(newData)
|
|
if(newData.length > 0){
|
|
setTimeout(()=>{
|
|
this.$set(this.inputSearchData, 'dataList', newData);
|
|
this.$refs.inputView.$data.inLoading = false;
|
|
this.$forceUpdate()
|
|
},300)
|
|
}else{
|
|
setTimeout(()=>{
|
|
this.$set(this.inputSearchData, 'dataList', []);
|
|
this.$refs.inputView.$data.inLoading = false;
|
|
this.$forceUpdate()
|
|
},300)
|
|
}
|
|
}
|
|
},
|
|
|
|
getInputRes(data){
|
|
console.log(data);
|
|
if(this.inputSearchData.type == 'portDeparture'){
|
|
this.fromData.portDeparture = data.EnName;
|
|
this.fromData.portDepartureCode = data.code;
|
|
}else if(this.inputSearchData.type == 'portArrival'){
|
|
this.fromData.portArrival = data.EnName;
|
|
this.fromData.portArrivalCode = data.code;
|
|
}else if(this.inputSearchData.type == 'boxType'){
|
|
this.fromData.boxType = data.Code;
|
|
}else if(this.inputSearchData.type == 'webCode'){
|
|
this.fromData.webCode = data.code;
|
|
this.fromData.webCodeName = data.name;
|
|
}
|
|
this.inputSearchShow = false;
|
|
this.inputSearchData = {
|
|
placeholder: '',
|
|
history: data,
|
|
dataList: [],
|
|
showName: '',
|
|
type: '',
|
|
}
|
|
},
|
|
|
|
cancelInput(){
|
|
this.inputSearchShow = false;
|
|
this.inputSearchData = {
|
|
placeholder: '',
|
|
history: null,
|
|
dataList: [],
|
|
showName: '',
|
|
type: '',
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.cabin-query {
|
|
background: #f4f4f4;
|
|
height: 100vh;
|
|
padding: 20rpx;
|
|
|
|
.query-box {
|
|
background: #fff;
|
|
padding: 0 30rpx 30rpx 30rpx;
|
|
box-sizing: border-box;
|
|
border-radius: 16rpx;
|
|
box-shadow: 0 0 18rpx #eee;
|
|
|
|
.choice-btn {
|
|
height: 100rpx;
|
|
display: flex;
|
|
border-bottom: 1rpx solid #eee;
|
|
|
|
.left {
|
|
width: 220rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: #666;
|
|
height: 100rpx;
|
|
line-height: 100rpx;
|
|
|
|
.iconfont {
|
|
font-size: 44rpx;
|
|
margin-right: 12rpx;
|
|
margin-top: 2rpx;
|
|
color: #86c7ff;
|
|
// color: #999;
|
|
font-weight: 500;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.tip{
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.icon-shijian {
|
|
font-size: 36rpx;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
flex: 1;
|
|
padding-top: 15rpx;
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
line-height: 80rpx;
|
|
display: flex;
|
|
overflow: hidden;
|
|
.gk{
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.icon{
|
|
// float: right;
|
|
font-size: 28rpx;
|
|
color: #000;
|
|
margin-right: 20rpx;
|
|
width: 50rpx;
|
|
text-align: right;
|
|
}
|
|
.box-type {
|
|
height: 75rpx;
|
|
text-align: left;
|
|
line-height: 75rpx;
|
|
display: block;
|
|
padding-left: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.button-box {
|
|
margin-top: 40rpx;
|
|
height: 100rpx;
|
|
display: flex;
|
|
padding: 0 40rpx;
|
|
|
|
button {
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
}
|
|
|
|
.enter {
|
|
flex: 1;
|
|
background: #ff8213;
|
|
color: #fff;
|
|
border-radius: 80rpx;
|
|
border: none;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.reset {
|
|
width: 200rpx;
|
|
text-align: center;
|
|
color: #ff8213;
|
|
margin-left: 20rpx;
|
|
background: #fff;
|
|
border: 2rpx solid #ff8213;
|
|
padding: 0 30rpx;
|
|
border-radius: 80rpx;
|
|
font-size: 28rpx;
|
|
|
|
.iconfont {
|
|
margin-right: 8rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.query-history{
|
|
padding-top: 40rpx;
|
|
.history-tit{
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
padding: 0 20rpx;
|
|
color: #333;
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
// background:#fff;
|
|
}
|
|
.history-list{
|
|
box-shadow: 0 0 10rpx #ccc;
|
|
}
|
|
|
|
.history-view{
|
|
width:100%;
|
|
padding:10rpx 50rpx;
|
|
background:#fff;
|
|
display: flex;
|
|
// height: 100rpx;
|
|
box-sizing: border-box;
|
|
border-radius: 10rpx;
|
|
// box-shadow: 0 0 10rpx #eee;
|
|
position: relative;
|
|
border-bottom: 1px dashed #eee;
|
|
&:nth-last-of-type(1){
|
|
border-bottom: none;
|
|
}
|
|
.setOut,.arrive{
|
|
// width: 250rpx;
|
|
flex: 1;
|
|
padding: 0 20rpx;
|
|
// height: 100rpx;
|
|
text-align: center;
|
|
padding: 10rpx 0;
|
|
.top{
|
|
line-height: 50rpx;
|
|
color: #333;
|
|
font-weight: 600;
|
|
display: block;
|
|
}
|
|
.tip{
|
|
line-height: 40rpx;
|
|
color: #999;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
display: block;
|
|
}
|
|
}
|
|
.icon{
|
|
font-size: 50rpx;
|
|
color: #2c96fb;
|
|
width: 100rpx;
|
|
line-height: 150rpx;
|
|
height: 150rpx;
|
|
display: inline-block;
|
|
text-align: center;
|
|
}
|
|
.screen{
|
|
width: 100rpx;
|
|
line-height: 100rpx;
|
|
text-align: center;
|
|
font-size: 32rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.icon-tab{
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
background: #f4f4f4;
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
bottom: -20rpx;
|
|
z-index: 999;
|
|
// box-shadow: inset 0px 0px 10px 1px #f4f4f4;
|
|
&.left{
|
|
left:-20rpx;
|
|
}
|
|
&.right{
|
|
right:-20rpx;
|
|
}
|
|
}
|
|
.top-left{
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
background: #f4f4f4;
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: -20rpx;
|
|
z-index: 999;
|
|
left:-20rpx;
|
|
}
|
|
.top-right{
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
background: #f4f4f4;
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: -20rpx;
|
|
z-index: 999;
|
|
right:-20rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</style>
|