emis-app/pages/post/freightCalculate.vue

<template>
	<tpx-page>
		<tpx-layout>
			<template v-slot:body>
				<view class="com-jianju pos-rlt pb-30" style="padding-top: 2rpx;">
					<view class="blcok-white" style="padding-top: 0;padding-bottom: 0;">
				
						<view>
							<view class="yunf-input-item">
								<tpx-select v-model:value="submitParam.sendSiteCode"  v-model:resObject="sndStRes" :getListFun="getSendSiteList" :transKeyVal="{valKey: 'siteCode',titleKey: 'siteName'}" :isWhite="true"
									v-model:text="submitParam.sendSiteName" placeholder="请选择始发网点" 
								>
									<tpx-text-item label="始发网点" :value="submitParam.sendSiteName"></tpx-text-item>
								</tpx-select>
							</view>
							
							<view class="yunf-input-item">
								<tpx-select v-model:value="submitParam.reciever.country"  v-model:resObject="countryRes" :getListFun="getEmisCountry" :transKeyVal="{valKey: 'code',titleKey: 'name'}" :isWhite="true" 
									v-model:text="submitParam.reciever.countryName" :searchParam="countrySearchParam"  placeholder="请选择目的国" @onChange="handleCountryChange"
								>
									<tpx-text-item label="目的国" :value="submitParam.reciever.countryName"></tpx-text-item>
								</tpx-select>
							</view> 
							
							<view v-if="submitParam.reciever.country" class="yunf-input-item">
								<tpx-select v-model:value="submitParam.reciever.province" v-model:resObject="provRes" :getListFun="getEmisRegion" :transKeyVal="{valKey: 'regionCode',titleKey: 'regionName'}" :isWhite="true" 
									v-model:text="submitParam.reciever.provinceName"  :searchParam="provParam"  placeholder="请选择省/州" @onChange="handlePrvChange"
								>
									<tpx-text-item label="省/州" :value="submitParam.reciever.provinceName"></tpx-text-item>
								</tpx-select>
							</view>     
							
							<template v-if="submitParam.reciever.province">
								<view class="yunf-input-item">
									<tpx-select v-model:value="submitParam.transLine" v-model:text="submitParam.transLineTypeName" v-model:resObject="wayRes" 
										:getListFun="getTransLineList" :transKeyVal="{valKey: 'lineCode',titleKey: 'lineName'}" 
										:searchParam="waySearchParam" @onChange="handleWayChange" placeholder="请选择路线" 
									>
										<tpx-text-item label="路线" :value="submitParam.transLineTypeName"></tpx-text-item>
									</tpx-select>
								</view>
							</template>
							
							<view v-if="submitParam.transLine" class="yunf-input-item">
								<tpx-text-item label="目的网点">
									<template v-slot:right>{{submitParam.dispatchUnderlingSiteName}}</template>
								</tpx-text-item>
							</view>
							
							<view class="yunf-input-item">
								<tpx-select v-model:value="submitParam.customsEclaration" :list="dicData.emis_declare_mode"
									mode="drop" 
								>
									<tpx-text-item label="报关方式" :value="submitParam.customsEclaration" :list="dicData.emis_declare_mode"></tpx-text-item>
								</tpx-select>
							</view>
							
							<view class="yunf-input-item">
								<tpx-select v-model:value="submitParam.customsClear" :list="dicData.emis_customs_clear"
									mode="drop" 
								>
									<tpx-text-item label="清关方式" :value="submitParam.customsClear" :list="dicData.emis_customs_clear"></tpx-text-item>
								</tpx-select>
							</view>
							<view class="yunf-input-item">
								<tpx-select v-model:value="submitParam.custNo" v-model:resObject="yuejieRes" :getListFun="getMonthpayAccountList" :transKeyVal="{valKey: 'custNo',titleKey: 'custName'}" 
									:searchParam="yuejieSearchParam" :minChecked="0" placeholder="请选择月结账户"
								>
									<tpx-text-item label="月结账户" :list="yuejieRes.list" :value="submitParam.custNo"></tpx-text-item>
								</tpx-select>
							</view>
							<view class="yunf-input-item" >
								<tpx-text-item label="重量">
									<template v-slot:right>
										<tpx-input v-model:value="submitParam.billWeight"  placeholder="" inputAlign="right" suffix="kg" _digit="4"></tpx-input>
									</template>
								</tpx-text-item>
							</view>
							
							<view class="yunf-input-item" >
								<tpx-text-item label="体积">
									<template v-slot:right>
										<tpx-input v-model:value="submitParam.totalVolume"  placeholder="" inputAlign="right" suffix="m³" _digit="4"></tpx-input>
									</template>
								</tpx-text-item>
							</view>
							
							<view class="yunf-input-item" >
								<tpx-text-item label="计费方式">
									<template v-slot:right>
										<view style="display: inline-block;">
											<u-radio-group v-model="submitParam.calcFeeType" custom-style="justify-content:end;">
												<view v-for="(item, index) in dicData.emis_calc_fee_type">
													<u-radio
														v-if="item.val == 1 || item.val == 2"
														:label="item.title" :name="item.val" activeColor="#B12D29" size="30" labelSize="26"
														:custom-style="`margin-right: ${index+1<dicData.emis_calc_fee_type.length?30:0}rpx;`">
													</u-radio>
												</view>
											</u-radio-group>
										</view>
									</template>
								</tpx-text-item>
							</view>
						</view>
					</view>
				
					<view v-if="proTypeList.length > 0">
						<view class="com-section mt-30">产品类型</view>
						<view class="blcok-white yunf-list" style="padding-bottom: 2rpx;">
							
							<tpx-checkitems :list="proTypeList" v-model:value="productType" v-model:text="productTypeName" v-slot="curPro" min-checked="1" type="single"
								:transKeyVal="{valKey: 'productType', titleKey: 'productTypeName'}" 
							>
								<view slot :class="`yunf-item ${curPro.checked?'active':''}`">
									<u-row justify="between">
										<u-col span="8">
											<u-text :text="curPro.item.productTypeName" size="28" :bold="true"></u-text>
											<u-text margin="6rpx" :text="curPro.item.agingDesc" size="26" color="#999"></u-text>
										</u-col>
										<u-col span="4">
											<u-text align="right" text="运费预估" size="26" color="#999"></u-text>
											<u-text align="right" margin="6rpx" :text="curPro.item.estFee" size="26" :bold="true" mode="price"
												color="#B12D29"></u-text>
										</u-col>
									</u-row>
								</view>
							</tpx-checkitems>
						</view>
					</view>
					
					<u-row justify="center">
						<view class="mt-40">
							<u-button @click="handleCalPost" size="large" shape="circle"
								custom-style="width: 400rpx;height:80rpx;font-size: 30rpx;" type="primary">运费试算</u-button>
						</view>
					</u-row>
					
				</view>
			</template>
			<template v-if="proTypeList.length > 0" v-slot:footer>
				<view class="pos-rlt blcok-white" style="border-radius: 0;margin-top: 0;">
					
					<u-row justify="between">
						<view>
							<view >
								<u-row>
									<view class="mr-10">
										<u-text text="预估" :bold="true" size="28"></u-text>
									</view>
									<u-text :text="checkedEstFee" mode="price" color="#B12D29" :bold="true" size="28"></u-text>
								</u-row>
								<u-text margin="10rpx 0 0 0" text="温馨提示：具体费用以快递小哥核实为准" color="#999" size="26"></u-text>
							</view>
						</view>
						<u-row>
							<u-button @click="handleGoXiaDan" size="large" shape="circle"
								custom-style="width: 200rpx;height:80rpx;font-size: 30rpx;" type="primary">下单</u-button>
						</u-row>
					</u-row>
				</view>
			</template>
		</tpx-layout>
		
	</tpx-page>
	
</template>

<script>
	
	import * as apiService from "@/common/api"
	import { getOrderModels } from "./model"
	
	export default {
		components: { },
		props: {
		},
		watch:{
			submitParam: {
				handler:function(){
					this.productType = ''
					this.productTypeName = ''
					this.proTypeList = []
				},
				deep: true
			}
		},
		computed: {
			
			waySearchParam() {
				return { country: this.submitParam.reciever.country, fromCountry: '' }
			},
			countrySearchParam() {
				return { transLineCode: this.submitParam.transLine }
			},
			provParam(){ 
				const { country } = this.submitParam.reciever
				return { countryCode: country, regionType: 1 }
			},
			yuejieSearchParam(){
				let { empName } = this.$store.getters.userInfo
				return {  payee: empName, salesmen: empName }
			},
			dicData() {
			  return this.$store.getters.dicData
			},
			checkedEstFee() {
				let item = this.proTypeList.filter(t=> t.val == this.productType)[0] || {}
				return item.estFee
			},
		},
		data() {
			return this.getDefaultData()
		},
		onShareAppMessage() {
			return {
			}
		},
		onLoad(option) {
			this.queryOption = option
			this.initData();
			this.initEvent()
		},
		unmounted() {
	
		},
		methods: {
			getDefaultData() { // data的默认数据
				let { ownerSiteCode, ownerSiteName } = this.$store.getters.userInfo
				return {
					pageLoading: true,
					queryOption: {
					},
					proTypeList: [],
					sndStRes: { list: [] },
					countryRes: { list: [] }, 
					provRes: { list: [] },
					wayRes: { list: [] },
					yuejieRes: { list: [] }, 
					productType: '',
					productTypeName: '',
					submitParam: {
						reciever: {
							country: '', 
							province: ''
						},
						transLine: "", // 线路编码
						productType: "", // 产品类型code
						calcFeeType: "1", // 计费类型 1-重量计费 2-体积计费
						billWeight: "", // 实际重量
						totalVolume: "", // 总体积
						dispatchUnderlingSiteCode: "", // 目的地站点
						customsClear: "", // 清关方式
						customsEclaration:"", // 清关方式
						sendSiteCode: ownerSiteCode, // 发件站点
						sendSiteName: ownerSiteName, // 发件站点名称
						custNo: '', // 月结账号
					}
				}
			},
			getEmisCountry: apiService.getEmisCountry,
			getTransLineList: apiService.getTransLineList,
			getEmisRegion: apiService.getEmisRegion,
			getSendSiteList: apiService.getSendSiteList,
			getMonthpayAccountList: apiService.getMonthpayAccountList,
			async initData() { // 初始化
				this.pageLoading = false
			},
			  
			initEvent() {
				
			},
			handleCountryChange(val) {
				this.submitParam.reciever.province = ''
				this.submitParam.reciever.provinceName = ''
				this.handlePrvChange()
			},
			handlePrvChange(val){
				this.submitParam.transLine = ''
				this.submitParam.transLineTypeName = ''
				this.handleWayChange() // 调用线路切换，清空后续数据
			},
			handleWayChange(val) { // 线路切换
				const item = this.wayRes.list.filter(t=> t.val == val)[0]
				if(val) {
					this.updateDltDestSite({ lineCode: val })
				} else {
					this.submitParam.dispatchUnderlingSiteCode = ''
					this.submitParam.dispatchUnderlingSiteName = ''
				}
			},
		
			handleDialogClick(curModal){
				curModal.show = true
			},
			async updateDltDestSite({ lineCode }) {
				const { country, province } = this.submitParam.reciever
				let res = await apiService.getCaculteDestSite({ lineCode, country, province })
				// 更新路线推荐的默认目的地
				let data = res.data || {}
				this.submitParam.dispatchUnderlingSiteCode = data.siteCode;
				this.submitParam.dispatchUnderlingSiteName = data.siteName;
			},
			async handleCalPost(type) {
				let params = JSON.parse(JSON.stringify(this.submitParam));
				let res = await apiService.preCalcWaybillFee({ ...params, _loading: true })
				this.proTypeList = res.data || []
				if(this.proTypeList.length > 0) {
					this.showToast('试算成功')
				} else {
					this.showToast('未匹配到产品信息，请切换条件重新试算')
				}
			},
			handleGoXiaDan() {
				let cpData = JSON.parse(JSON.stringify(this.submitParam))
				// 下单，需要重置 发件的网点信息，使用登录者的信息
				let { sendSiteCode, sendSiteName } = this.getDefaultData()
				cpData.sendSiteCode = sendSiteCode
				cpData.sendSiteName = sendSiteName
				cpData.productTypeName = this.productTypeName
				cpData.productType = this.productType
				this.goto(`post/openorder?defaultSubParams=${encodeURIComponent(JSON.stringify(cpData))}&type=create`)
			}
		}
	}
</script>

<style lang="scss">
	@import '@/common/uni-nvue.scss';

	page {
		background-color: #F6F6F6;
		height: 100% !important;
	}
</style>
<style scoped lang="scss">
	.yunf-item {
		margin-bottom: 20rpx;
		padding: 30rpx;
		background: #F6F6F6;
		border-radius: 20rpx;
		border: 2rpx solid transparent;
		&.active {
			border-color: $uni-color-primary;
		}
	}
	.yunf-input-item{
		padding: 20rpx 0;
		border-bottom: 2rpx solid #F6F6F6;
	}
</style>