TuBaoSoft-Ui-Zd/pages/home/freightCalculation/shippingInformation.vue

<!-- 船期信息 -->
<template>
	<view>
		<u-navbar title="船期信息" :background="{ background: '#1669e6' }" title-color="#fff" back-icon-color="#fff"></u-navbar>
		<!-- 搜索区 -->
		<view style="width: 96%;margin: 10rpx auto;box-shadow: 0px 0px 8px 0px rgba(165, 189, 251, 0.4);padding: 0 3% 0 3%;border-radius: 5rpx;">
			<!-- <u-field v-model="polId" label="起始港" placeholder="请选择起始港" type="select" @click="destination = true"></u-field> -->
			<u-form-item label="起始港:" label-width="110rpx" style="float: left;width: 50%;">
				<u-input v-model="list.polId" type="select" placeholder="请选择起始港" @click="popup(0)" />
			</u-form-item>
			<!-- <u-action-sheet :list="destinationList" v-model="destination" @click="destinationMethod"></u-action-sheet> -->
			<u-form-item label="目的港:" label-width="110rpx">
				<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="110rpx">
				<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
		v-if="dataList.length === 0"
		style="width: 96%;height: 650rpx;margin: 0 auto;border-radius: 10rpx;">
			<u-empty text="无符合条件的航期" mode="search"></u-empty>
		</view>
		<view style="box-shadow: 0px 0px 8px 0px rgba(165, 189, 251, 0.4);width: 96%;border-top-right-radius: 10rpx;margin: 0 auto;padding-top: 10rpx;"
		v-for="(item,index) in dataList" :key="index">
			<span style="width: 10rpx;height: 40rpx;background-color: #2979ff;display: block;float: left;margin-top: 10rpx;"></span>
			<h4 style="width: 140rpx;border-radius: 200rpx;text-align: center;color: #2979ff;border: 2rpx solid #1785FF;float: right;margin-right: 10rpx;margin-top: 10rpx;">{{item.fBilltype}}</h4>
			<view style="width: 90%;margin: 0 auto;margin: 0 auto;">
				<view style="display: flex;justify-content: space-between;height: 60rpx;line-height: 60rpx;">
					<h4>{{item.fLineName}}</h4>
				</view>
				<view style="display: flex;justify-content: space-between;height: 60rpx;line-height: 60rpx;">
					<h4>{{item.fCorpName?item.fCorpName:'无船公司'}}</h4>
					<h4>{{item.fBookagentName?item.fBookagentName:'无订舱代理'}}</h4>
					<h4>{{item.fSailingSchedule ? item.fSailingSchedule:'无日期'}}</h4>
				</view>
				<view style="display: flex;justify-content: space-between;border-top: 1rpx solid #eff4ff;height: 60rpx;line-height: 60rpx;">
					<h4>20GP</h4>
					<h4>40GP</h4>
					<h4>40HC</h4>
					<h4>45HC</h4>
					<h4>20RH</h4>
					<h4>40RH</h4>
				</view>
				<view style="border-top: 1rpx solid #eff4ff;height: 60rpx;line-height: 60rpx;">
					<span v-if="item.seapriceItem[0]" style="display: flex;justify-content: space-between;">
						<h4>{{item.seapriceItem[0].fSpecification1}}</h4>
						<h4>{{item.seapriceItem[0].fSpecification2}}</h4>
						<h4>{{item.seapriceItem[0].fSpecification3}}</h4>
						<h4>{{item.seapriceItem[0].fSpecification4}}</h4>
						<h4>{{item.seapriceItem[0].fSpecification5}}</h4>
						<h4>{{item.seapriceItem[0].fSpecification6}}</h4>
					</span>
					<span v-else>
						<h3 style="text-align: center;">无海运费</h3>
					</span>
				</view>
				<view style="width: 100%;margin: 0 auto;height: 80rpx;margin: 0 auto;line-height: 80rpx;border-top: 1rpx solid #eff4ff;" @click="expenseDetails(item)">
					<view style="float: left;"><h3>运费测算</h3></view>
					<view style="float: right;"><u-icon name="arrow-right"></u-icon></view>
				</view>
			</view>
		</view>
		<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
		<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-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				destination:false,
				formPort: {
					pageNum: 1
				},
				portList:[],
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				iconType: 'flower',
				status: 'loadmore',
				mode: 'range',
				list:{},
				form: {
					fQueryFrom: 'app',
					pageNum: 1,
					pageSize: 10,
				},
				dataList:[],
				destinationtwo: false,
				destinationList: [],
				total:0
			}
		},
		onLoad(option) {
			this.form = JSON.parse(option.form)
			this.list = JSON.parse(option.list)
			this.submit()
		},
		onReachBottom() {
			this.status = 'loading'
			if (this.dataList.length < this.total) {
				this.form.pageNum++
				this.query()
			} else {
				this.status = 'nomore'
			}
		},
		created() {
			this.queryPort()
			this.destinationList = []
			this.$u.get('/shipping/address/selectPortName').then(res => {
				console.log(res)
				for (let item in res.rows) {
					this.destinationList.push({
						value: res.rows[item].fId,
						text: res.rows[item].fName
					})
				}
			})
		},
		methods: {
			popup(item) {
				if (item == 0) {
					this.portStatus = item
					this.destination = true
				} else if (item == 1) {
					this.portStatus = item
					this.destination = true
				}
			},
			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
				}
				this.formPort.fName = ''
			},
			searchPort() {
				this.portList = []
				this.formPort.pageNum = 1
				this.queryPort()
			},
			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
				})
			},
			portSelection() {
				this.destination = false
				this.formPort.fName = ''
			},
			query() {
				this.$u.get('/warehouse/seaprice/queryApp',this.form).then(res=>{
					this.dataList = this.dataList.concat(res.rows)
					this.total = res.total
					if (res.total === 0) this.status = 'nomore'
				})
			},
			change(e) {
				this.form.fValiddateBegin = e.startDate
				this.form.fValiddateEnd = e.endDate
				this.list.sailingDay = e.startDate + ' - ' + e.endDate
			},
			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.dataList = []
				this.$u.get('/warehouse/seaprice/queryApp',this.form).then(res=>{
					// console.log(res)
					this.dataList = this.dataList.concat(res.rows)
				})
			},
			expenseDetails(item){
				this.$u.route('/pages/home/freightCalculation/freightCalculation',{
					form:JSON.stringify(item)
				});
			},
			textTips(text){
				uni.showToast({
					icon: 'none',
					title: text,
					position: "center"
				})
			},
		}
	}
</script>
<style scoped lang="scss">
	
</style>