267 lines
7.5 KiB
Vue
267 lines
7.5 KiB
Vue
<template>
|
|
<view class="pad-x100" v-if="isLoading">
|
|
<!-- 头部 -->
|
|
<status-nav :ifReturn="false" navBarTitle="线路信息及报价" :marginBottom="0"></status-nav>
|
|
<!-- 搜索 -->
|
|
<view class="line-search pad-zy30 border-box">
|
|
<view class="list pad-zy10 border-box flex">
|
|
<view class="item flex">
|
|
<view class="font24 opacity-08">始发地</view>
|
|
<input class="input font30" type="text" v-model="start_addr" placeholder="请输入始发地" placeholder-style="color:#b4b4b4"/>
|
|
</view>
|
|
<view class="icon flex">
|
|
<image src="/static/icon/icon-arrow-right.png" mode="widthFix" style="width: 48rpx;height: 48rpx;"></image>
|
|
</view>
|
|
<view class="item item-right flex">
|
|
<view class="font24 opacity-08">目的地</view>
|
|
<input class="input font30" type="text" v-model="arrive_addr" placeholder="请输入目的地" placeholder-style="color:#b4b4b4"/>
|
|
</view>
|
|
</view>
|
|
<view class="list pad-zy10 border-box flex">
|
|
<view class="item flex">
|
|
<picker mode="date" :start="startDate" :end="endDate" @change="chooseTime(1,$event)">
|
|
<view class="font24 opacity-08">开始日期</view>
|
|
<input class="input font30" type="text" v-model="start_time_value" disabled="true" placeholder="请选择开始日期" placeholder-style="color:#b4b4b4"/>
|
|
</picker>
|
|
</view>
|
|
<view class="icon flex">
|
|
<image src="/static/icon/icon-calendar.png" mode="widthFix" style="width: 44rpx;height: 44rpx;"></image>
|
|
</view>
|
|
<view class="item item-right flex">
|
|
<picker mode="date" :start="startDate" :end="endDate" @change="chooseTime(2,$event)">
|
|
<view class="font24 opacity-08">结束日期</view>
|
|
<input class="input font30" type="text" v-model="end_time_value" disabled="true" placeholder="请选择结束日期" placeholder-style="color:#b4b4b4"/>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
<view class="list pad-zy10 border-box flex">
|
|
<view class="item flex">
|
|
<view class="font24 opacity-08">物流类型</view>
|
|
<picker @change="bindPickerChange" :range="typeArray" style="width: 100%;">
|
|
<input class="input font30" type="text" v-model="logistics_type" disabled="true" placeholder="请选择物流类型" placeholder-style="color:#b4b4b4"/>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
<view class="line-btn pad-sx25">
|
|
<view class="submit-btn font26 radius35 flex" @tap="searchEv">立即搜索</view>
|
|
</view>
|
|
|
|
</view>
|
|
<!-- 线路列表 -->
|
|
<view class="line">
|
|
<list-all :lineList="lineList"></list-all>
|
|
</view>
|
|
<!-- 加载更多 -->
|
|
<view class="tags font20 opacity-05">{{tags}}</view>
|
|
<!-- 尾部 -->
|
|
<foot-tab :current="1"></foot-tab>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import listAll from '@/components/list/list-all.vue';
|
|
function getDate(type) {
|
|
const date = new Date();
|
|
let year = date.getFullYear();
|
|
let month = date.getMonth() + 1;
|
|
let day = date.getDate();
|
|
if (type === 'start') {
|
|
year = year;
|
|
} else if (type === 'end') {
|
|
year = year + 10;
|
|
}
|
|
month = month > 9 ? month : '0' + month;
|
|
day = day > 9 ? day : '0' + day;
|
|
return `${year}-${month}-${day}`;
|
|
}
|
|
export default {
|
|
components:{
|
|
listAll
|
|
},
|
|
data() {
|
|
return {
|
|
screenHeight:uni.getSystemInfoSync().screenHeight,
|
|
statusHeight:uni.getSystemInfoSync().statusBarHeight,
|
|
// 日期
|
|
toTime: getDate({
|
|
format: true
|
|
}),
|
|
startDate: getDate('start'),
|
|
endDate: getDate('end'),
|
|
typeArray: [],
|
|
typeKey:[],
|
|
typeIndex:-1,
|
|
start_addr:'' ,// 始发地
|
|
arrive_addr:'',// 目的地
|
|
start_time:'',// 开始日期
|
|
start_time_value:'',// 开始日期展示
|
|
end_time:'',// 结束日期
|
|
end_time_value:'',// 结束日期展示
|
|
logistics_type:'',// 物流类型
|
|
lineList:[], //线路列表
|
|
tags:'~ 下拉加载更多内容 ~', //提示信息
|
|
page:1,
|
|
size:10,
|
|
total:0,
|
|
noMore:false,
|
|
isLoading:false,
|
|
}
|
|
},
|
|
onLoad(op) {
|
|
//获取物流类型
|
|
this.getLogisticsType();
|
|
// 获取线路列表
|
|
this.getLineList();
|
|
},
|
|
// 触底
|
|
onReachBottom(e) {
|
|
if(!this.noMore){
|
|
this.page++;
|
|
// 获取线路列表
|
|
this.getLineList();
|
|
}
|
|
},
|
|
methods: {
|
|
// 获取物流方式
|
|
getLogisticsType(){
|
|
this.$requst.post('/api/common/line-all-logistics-type').then(res=>{
|
|
if(res.code==0){
|
|
console.log(res,'物流类型');
|
|
let logisticsArr = [];
|
|
let logisticsKey = [];
|
|
res.data.forEach(item=>{
|
|
logisticsArr.push(item.value);
|
|
logisticsKey.push(item.key);
|
|
})
|
|
this.typeArray = logisticsArr;
|
|
this.typeKey = logisticsKey;
|
|
}
|
|
})
|
|
},
|
|
|
|
// 获取线路列表
|
|
getLineList(){
|
|
uni.showLoading({
|
|
title:'加载中'
|
|
})
|
|
let params = {
|
|
page:this.page,
|
|
size:this.size,
|
|
place_origin:this.start_addr,
|
|
destination:this.arrive_addr,
|
|
start_time:this.start_time,
|
|
end_time:this.end_time,
|
|
logistics_type: this.typeIndex<0?'':this.typeKey[this.typeIndex]
|
|
}
|
|
this.$requst.post('/api/common/line-list',params).then(res=>{
|
|
if(res.code==0){
|
|
console.log(res,'线路列表');
|
|
this.total = res.data.total;
|
|
let lineArr = [];
|
|
res.data.list.forEach(item=>{
|
|
let obj = {
|
|
flag:item.logistics_type_text,
|
|
title:item.title,
|
|
start_addr:item.place_origin,
|
|
arrive_addr:item.destination,
|
|
start_time:item.start_time.slice(0,10).split('-').join('.'),
|
|
end_time:item.end_time.slice(0,10).split('-').join('.'),
|
|
max_price:item.highest_price,
|
|
min_price:item.minimum_price
|
|
}
|
|
lineArr.push(obj);
|
|
})
|
|
this.lineList = this.lineList.concat(lineArr);
|
|
if(this.lineList.length == this.total){
|
|
this.noMore = true;
|
|
this.tags = '~ 暂无更多内容 ~';
|
|
}
|
|
uni.hideLoading();
|
|
this.isLoading = true;
|
|
}
|
|
})
|
|
},
|
|
|
|
// 搜索
|
|
searchEv(){
|
|
this.page = 1;
|
|
this.lineList = [];
|
|
// 获取线路列表
|
|
this.getLineList();
|
|
},
|
|
|
|
// 时间选择
|
|
chooseTime(index,e) {
|
|
switch (index){
|
|
case 1:
|
|
this.start_time = e.detail.value;
|
|
this.start_time_value = e.detail.value.split('-')[1]+'月'+e.detail.value.split('-')[2]+'日';
|
|
break;
|
|
case 2:
|
|
this.end_time = e.detail.value;
|
|
this.end_time_value = e.detail.value.split('-')[1]+'月'+e.detail.value.split('-')[2]+'日';
|
|
break;
|
|
}
|
|
},
|
|
|
|
// 物流类型选择
|
|
bindPickerChange: function(e) {
|
|
this.typeIndex = e.target.value;
|
|
this.logistics_type = this.typeArray[this.typeIndex];
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
/* 搜索 */
|
|
.line-search{
|
|
background-color: #ffffff;
|
|
width: 100%;
|
|
}
|
|
.line-search .list{
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 132rpx;
|
|
border-bottom: 2rpx solid #ebebeb;
|
|
}
|
|
.line-search .list .item{
|
|
flex-wrap: wrap;
|
|
width: calc(50% - 25rpx);
|
|
line-height: 1.5;
|
|
}
|
|
.line-search .list .item-right{
|
|
justify-content: flex-end;
|
|
}
|
|
.line-search .list .item-right{
|
|
text-align: right;
|
|
}
|
|
.line-search .list .item .input{
|
|
width: 100%;
|
|
height: 40rpx;
|
|
margin-top: 6rpx;
|
|
}
|
|
.line-search .list .icon{
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 50rpx;
|
|
}
|
|
.line-search .submit-btn{
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 390rpx;
|
|
height: 70rpx;
|
|
margin: auto;
|
|
background-color: #3b45b2;
|
|
color: #ffffff;
|
|
letter-spacing: 2rpx;
|
|
text-indent: 2rpx;
|
|
}
|
|
.line-search .list:nth-of-type(3) .item{
|
|
width: 100%;
|
|
}
|
|
.line-search .list:nth-of-type(3) .input{
|
|
background-image: url(/static/icon/icon-arrow-down.png);
|
|
background-repeat: no-repeat;
|
|
background-position: center right;
|
|
background-size: 23rpx 14rpx;
|
|
}
|
|
</style> |