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

<template>
	<view>
		<view
			style="width: 96%;margin: 0 auto;box-shadow: 0px 0px 8px 0px rgb(165 189 251 / 40%);padding: 20rpx;border-radius: 20rpx;">
			<u-form :model="form" ref="uForm">
				<u-form-item label="业务类型" label-width="130rpx">
					<u-input v-model="fBilltype" @click="businesstype = !businesstype" type="select"
						placeholder="请输入业务类型" />
				</u-form-item>
				<u-form-item label="船公司" label-width="130rpx">
					<u-input v-model="fCorpid" @click="shippingcompany = !shippingcompany" type="select"
						placeholder="请输入船公司" />
				</u-form-item>
				<u-form-item label="航线" label-width="130rpx">
					<u-input v-model="fLineName" @click="fLine = !fLine" type="select" placeholder="请选择航线" />
				</u-form-item>
				<u-form-item label="订舱代理" label-width="130rpx">
					<u-input v-model="fBookagentName" @click="fBookagent = !fBookagent" type="select" placeholder="请选择订舱代理" />
				</u-form-item>
				<u-form-item label="箱型" label-width="130rpx">
					<u-input v-model="fSpecification" @click="boxtype = !boxtype" type="select" placeholder="请输入箱型" />
				</u-form-item>
				<u-form-item label="箱量" label-width="130rpx">
					<u-input v-model="form.fQty" placeholder="请输入箱量" type="digit" />
				</u-form-item>
				<u-form-item label="海运费" label-width="130rpx">
					<u-input v-model="form.shippingFee" placeholder="请输入海运费" @input="amtrmb" type="digit" />
				</u-form-item>
				<u-form-item label="汇率" label-width="130rpx">
					<u-input v-model="form.exrate" placeholder="请输入汇率" @input="amtrmb" type="digit" />
				</u-form-item>
				<u-form-item label="折合人民币" label-width="160rpx">
					<u-input v-model="form.rmb" placeholder="请输入海运费和汇率后自动计算" type="digit" disabled />
				</u-form-item>
			</u-form>
		</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: 100%;padding-bottom: 110rpx;" v-if="datalist === true">
			<h2 style="text-align: center;margin-top: 20rpx;margin-bottom: 20rpx;">预测价格:{{parseInt(amt)}}元</h2>
			<u-table>
				<u-tr>
					<u-th>费用</u-th>
					<u-th>价格</u-th>
					<u-th>备注</u-th>
				</u-tr>
				<u-tr v-for="(item,index) in this.fleet" :key="index">
					<u-td style="height: 60rpx;">{{item.fFeeid?item.fFeeid:'费用名称丢失'}}</u-td>
					<u-td style="height: 60rpx;">{{item.fUnitprice}}</u-td>
					<u-td style="height: 60rpx;">{{item.remark?'item.remark':'1'}}</u-td>
				</u-tr>
			</u-table>
		</view>
		<!-- 订舱代理下拉 -->
		<u-action-sheet :list="fBookagentList" v-model="fBookagent" @click="fBookagentType"></u-action-sheet>
		<!-- 航线下拉 -->
		<u-action-sheet :list="fLineList" v-model="fLine" @click="fLineType"></u-action-sheet>
		<!-- 箱型下拉 -->
		<u-action-sheet :list="list" v-model="boxtype" @click="boxType"></u-action-sheet>
		<!-- 业务类型 -->
		<u-action-sheet :list="businessList" v-model="businesstype" @click="businessType"></u-action-sheet>
		<!-- 船公司 -->
		<u-action-sheet :list="shippingList" v-model="shippingcompany" @click="shippingCompany"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {},
				fSpecification: '',
				fBookagentName: '',
				fBilltype: '',
				fLineName: '',
				fCorpid: '',
				boxtype: false,
				fLine: false,
				fBookagent: false,
				businesstype: false,
				shippingcompany: false,
				datalist: false,
				businessList: [],
				shippingList: [],
				amt: '',
				fleet: [],
				fLineList: [],
				fBookagentList: [],
				list: [{
					id: 'f_specification1',
					text: '20GP'
				}, {
					id: 'f_specification2',
					text: '40GP'
				}, {
					id: 'f_specification3',
					text: '40HC'
				}, {
					id: 'f_specification4',
					text: '45HC'
				}, {
					id: 'f_specification5',
					text: '20RH'
				}, {
					id: 'f_specification6',
					text: '40RH'
				}],
			};
		},
		created() {
			this.$u.get('/shipping/address/list', {
				fTypes: 4
			}).then(res => {
				for(let item in res.rows){
					this.fLineList.push({
						id: res.rows[item].fId,
						text: res.rows[item].fName
					})
				}
			})
			this.$u.get('/basicdata/corps/list', {
				fTypeid:9
			}).then(res => {
				for(let item in res.rows){
					this.fBookagentList.push({
						id: res.rows[item].fId,
						text: res.rows[item].fName
					})
				}
			})
			this.$u.get('/warehouse/seaprice/appBasicInformation').then(res => {
				console.log(res)
				this.businessList = res.data.billType
				this.shippingList = res.data.corpList
				this.businessList.forEach(item => item.text = item.dictLabel)
				this.shippingList.forEach(item => item.text = item.fName)
				this.businessList.forEach(item => {
					if (item.dictLabel == '进口') {
						this.form.fBilltype = item.dictValue
						this.fBilltype = item.dictLabel
					}
				})
			})
		},
		methods: {
			//查询运费和汇率
			information() {
				if (this.form.fSpecification && this.form.fBilltype && this.form.fCorpid) {
					this.$u.get('/warehouse/seaprice/changeSelectShippingFee', this.form).then(res => {
						// console.log(res.data)
						if (res.data) {
							this.$set(this.form, 'shippingFee', res.data.fUnitprice)
							this.$set(this.form, 'exrate', res.data.fExrate)
							this.$set(this.form, 'rmb', res.data.rmb)
						}
					})
				}
			},
			//折合人民币计算
			amtrmb() {
				this.form.rmb = this.form.shippingFee * this.form.exrate
			},
			//箱型下拉赋值
			boxType(index) {
				this.form.fSpecification = this.list[index].id
				this.fSpecification = this.list[index].text
				this.information()
			},
			//航线下拉
			fLineType(index) {
				this.form.fLineid = this.fLineList[index].dictValue
				this.fLineName = this.fLineList[index].text
			},
			//订舱代理下拉
			fBookagentType(index) {
				this.form.fBookagentid = this.fBookagentList[index].dictValue
				this.fBookagentName = this.fBookagentList[index].text
			},
			//业务类型
			businessType(index) {
				this.form.fBilltype = this.businessList[index].dictValue
				this.fBilltype = this.businessList[index].text
				this.information()
			},
			//船公司
			shippingCompany(index) {
				this.form.fCorpid = this.shippingList[index].fId
				this.fCorpid = this.shippingList[index].text
				this.information()
			},
			//计算
			submit() {
				this.$u.get('/warehouse/seaprice/calculateCost', this.form).then(res => {
					if (res.code == 500) {
						uni.showToast({
							icon: 'none',
							title: res.msg,
							position: "bottom"
						})
						this.datalist = false
					} else {
						this.amt = res.data.amt
						this.fleet = res.data.fleet
						this.datalist = true
					}
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.u-form ::v-deep .u-form-item {
		padding: 5rpx;
	}
</style>