TuBaoSoft-AP/pages/home/freightCalculation/shipSchedule.vue

<!-- 船期查询 -->
<template>
	<view>
		<!-- 搜索区 -->
		<view style="width: 80%;margin: 10rpx auto;">
			<!-- <u-field v-model="polId" label="起始港" placeholder="请选择起始港" type="select" @click="destination = true"></u-field> -->
			<u-navbar title="船期查询" :background="{ background: '#1669e6' }" title-color="#fff" back-icon-color="#fff"></u-navbar>
			<u-form-item label="起始港" label-width="100rpx">
				<u-input v-model="list.polId" type="select" placeholder="请选择起始港" @click="popup(0)" />
			</u-form-item>
			<u-popup v-model="destination" width="100%">
				<u-navbar :custom-back="portSelection">
					<u-search placeholder="请输入港口" v-model="formPort.fName" @search="searchPort" @custom="searchPort">
					</u-search>
				</u-navbar>
				<u-cell-group>
					<u-cell-item v-for="(item,index) in portList" :key="index" :title="item.fName" @click="confirmSelection(item)"></u-cell-item>
				</u-cell-group>
				<!-- <u-loadmore :status="status" :load-text="loadText" /> -->
			</u-popup>
			<!-- <u-action-sheet :list="destinationList" v-model="destination" @click="destinationMethod"></u-action-sheet> -->
			<u-form-item label="目的港" label-width="100rpx">
				<u-input v-model="list.podId" type="select" placeholder="请选择目的港" @click="popup(1)" />
			</u-form-item>
			<u-action-sheet :list="destinationList" v-model="destinationtwo" @click="destinationMethodTwo">
			</u-action-sheet>
			<u-form-item label="开航日" label-width="100rpx">
				<u-input v-model="list.sailingDay" :disabled="true" type="select" placeholder="请选择日期"
					@click="show = true" />
			</u-form-item>
			<u-calendar max-date="2050" v-model="show" mode="range" @change="change"></u-calendar>
		</view>
		<!-- <view
			style="width: 100%;position:fixed; bottom:0;background-color: #FFFFFF;padding-left: 20px;padding-right: 20px;padding-bottom: 30rpx;">
			<u-button type="primary" @click="submit">确认查询</u-button>
		</view> -->
		<view style="width: 90%;margin: 40rpx auto;">
			<u-button type="primary" @click="submit">确认查询</u-button>
		</view>
		<!-- 历史记录区 -->
		<view v-if="historyList > 0">
			<view
				style="box-shadow: 0px 0px 8px 0px rgba(165, 189, 251, 0.4);width: 96%;border-top-right-radius: 10rpx;margin: 0 auto;">
				<view style="width: 90%;margin: 0 auto;height: 80rpx;margin: 0 auto;line-height: 80rpx;">
					<view style="float: left;">历史记录</view>
					<view style="color: #279cfd;float: right;" @click="deleteAll()">清除全部</view>
				</view>
				<view
					style="width: 100%;height: 80rpx;margin: 0 auto;line-height: 80rpx;padding: 0 5% 0 5%;border-top: 1rpx solid #eff4ff;"
					v-for="(item,index) in historyList" :key="index">
					<view style="float: left;">{{item.fPortOriginName}}——{{item.fPortDestinationName}}</view>
					<view style="color: #279cfd;float: right;">
						<u-icon name="trash" color="#ccc" @click="deleteRecord(item.fId)"></u-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				mode: 'range',
				total: 0,
				// 0为起运港1为目的港
				portStatus: '',
				status: 'nomore',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				list: {},
				portList: [],
				form: {
					fQueryFrom: 'app',
					pageNum: 1,
					pageSize: 10,
				},
				destination: false,
				formPort: {
					pageNum: 1
				},
				destinationtwo: false,
				destinationList: [],
				historyList: []
			}
		},
		created() {
			this.destinationList = []
			this.$u.get('/shipping/address/selectPortName').then(res => {
				for (let item in res.rows) {
					this.destinationList.push({
						value: res.rows[item].fId,
						text: res.rows[item].fName
					})
				}
			})
			this.queryPort()
			this.history()
		},
		// onReachBottom() {
		// 	this.status = 'loading'
		// 	if (this.portList.length < this.total) {
		// 		this.formPort.pageNum++
		// 		this.queryPort()
		// 	} else {
		// 		this.status = 'nomore'
		// 	}
		// },
		methods: {
			queryPort() {
				console.log(this.formPort)
				this.$u.get('/shipping/address/selectPortName', this.formPort).then(res => {
					this.portList = this.portList.concat(res.rows)
					this.total = res.total
				})
			},
			//查询历史搜索记录
			history() {
				this.$u.get('/quotation/queryseapricelog/list').then(res => {
					this.historyList = res.rows
				})
			},
			change(e) {
				console.log(e)
				this.form.fValiddateBegin = e.startDate
				this.form.fValiddateEnd = e.endDate
				this.list.sailingDay = e.startDate + ' - ' + e.endDate
			},
			portSelection() {
				this.destination = false
			},
			confirmSelection(item) {
				this.destination = false
				if (this.portStatus == 0) {
					this.list.polId = item.fName
					this.form.polId = item.fId
				} else if (this.portStatus == 1) {
					this.list.podId = item.fName
					this.form.podId = item.fId
				}
			},
			searchPort() {
				this.formPort.pageNum = 1
				this.queryPort()
			},
			popup(item) {
				if (item == 0) {
					this.portStatus = item
					this.destination = true
				} else if (item == 1) {
					this.portStatus = item
					this.destination = true
				}
			},
			destinationMethod(index) {
				this.list.polId = this.destinationList[index].text
				this.form.polId = this.destinationList[index].value
			},
			destinationMethodTwo(index) {
				this.list.podId = this.destinationList[index].text
				this.form.podId = this.destinationList[index].value
			},
			submit() {
				if (!this.form.polId) return this.textTips('请选择起始港')
				if (!this.form.podId) return this.textTips('请选择目的港')
				if (!this.form.fValiddateBegin || !this.form.fValiddateEnd) return this.textTips('请选择开航日期')
				this.$u.route('/pages/home/freightCalculation/shippingInformation', {
					form: JSON.stringify(this.form),
					list: JSON.stringify(this.list)
				});
				// this.$u.get('/warehouse/seaprice/query').then(res=>{
				// 	console.log(res)
				// })
			},
			textTips(text) {
				uni.showToast({
					icon: 'none',
					title: text,
					position: "center"
				})
			},
			deleteRecord(id) {
				console.log(id)
				if (id) {
					this.$u.delete('/quotation/queryseapricelog/' + id).then(res => {
						console.log(res)
						this.history()
					})
				} else {
					console.log(id)
				}
			},
			deleteAll() {
				let id = ''
				for (let item in this.historyList) {
					id += this.historyList[item].fId + ','
				}
				id = id.substring(0, id.length - 1);
				this.deleteRecord(id)
			}
		}
	}
</script>

<style>
</style>