front-end/hdApp/src/components/app-form-send1.vue

<template>
	<view>
		<tui-list-cell class="line-cell" :hover="false" :arrow="true" >
			<view class="tui-title">配送方</view>
			<picker mode="selector" :value="sendSideIndex" :range="deliveryList" :range-key="'name'" @change="selectSideEvent" class="tui-input">
				<view v-if="formData.sendSide" class="tui-input">
					{{ deliveryList[sendSideIndex].name }}
				</view>
				<view v-else class="tui-placeholder">请选择快递公司</view>
				<input name="sendSide" hidden />
			</picker>
		</tui-list-cell>
		<!-- 门店送或快递送需要设置地址 -->
		<appAddressGroup :customId="customId" cityTitle="配送城市" @selectAdress="selectAdress" ></appAddressGroup>
		<appSendTime @alterTime="selectAdress('')" :sendDate.sync="formData.sendDate" :sendTime.sync="formData.sendTime"></appSendTime>



		<tui-list-cell class="line-cell" :hover="false" :arrow="false">
			<view class="tui-title">运费</view>
			<view v-if="formData.sendCost" class="tui-input">
				{{ formData.sendCost }}
			</view>
			<view v-else class="tui-placeholder">留空表示免运费</view>
			<input name="sendCost" hidden />
		</tui-list-cell>
	</view>
</template>

<script>
import TuiListCell from "@/components/plugin/list-cell";
import { freight } from "@/api/order";
import appFormRadioBtn from "@/components/app-formRadio-btn";
import appAddressGroup from "@/components/app-address-group";
import appSendTime from "@/components/app-send-time";
import {mapGetters} from "vuex";
export default {
	components: {
		TuiListCell,
		appFormRadioBtn,
		appAddressGroup,
		appSendTime
	},
	props: {
		customId:'',
		orderid:'',
		form: {
			type: Object
		}
	},
	data() {
		return {
			formData: {
				sendCost: "",
				receiveProvince: "",
				receiveCity: "",
				receiveFloor: "",
				receiveAddress: "",
				receiveLong: "",
				receiveLat: "",
				sendSide: "",
				sendType: "3", //1自取 2本店送 3快递送
				sendDate: "",
				sendTime: ""
			},
			userLong:'',
			userLat:'',
			sendSideIndex:0,
			deliveryList: []
		};
	},
	created() {
		this.initData();
	},

	computed: {
		...mapGetters(["getDictionariesInfo"]),
		getCurSideName() {
			let name = "";
			if (this.formData.sendSide) {
				const curItem = this.deliveryList.find(ele => {
					return ele.value == this.formData.sendSide;
				});
				if (curItem) {
					name = curItem.name;
				}
			}
			return name;
		}
	},
	methods: {
		initData() {
			for (const key in this.formData) {
				if (Object.hasOwnProperty.call(this.formData, key)) {
					const element = this.form[key];
					this.formData[key] = element;
				}
			}
			//配送方-列表
			let list = this.getDictionariesInfo.expressList;
			for (let i=0;i<list.length;i++){
				this.deliveryList.push({name:list[i].deliveryName,value:list[i].deliveryId,id:list[i].id})
			}
			console.log(list);
			this.formData.sendSide = list[0].id;
		},
		selectAdress(info) {
			if(info){
				this.formData.receiveProvince = info.province;
				this.formData.receiveCity = info.city;
				this.formData.receiveFloor = info.floor;
				this.formData.receiveAddress = info.address;
				this.formData.receiveLong = info.longitude;
				this.formData.receiveLat = info.latitude;
			}

			console.log('this.formData',this.formData)
			this.$nextTick(() => {
				let params = {
					id: this.orderid,
					province: this.formData.receiveProvince,
					city:this.formData.receiveCity,
					address:this.formData.receiveAddress,
					floor:this.formData.receiveFloor,
					expressId: this.formData.sendSide,
					// orderId: this.orderid,
					long: this.formData.receiveLong,
					lat: this.formData.receiveLat,
					sendTime: this.formData.sendTime,
				};
				this.freightCount(params);
			});
		},
		// 计算运费
		freightCount(option) {
			freight(option).then(res => {
				this.formData.sendCost = res.data.sedCost;
			});
		},
		selectSideEvent(event) {
			// console.log(event);
			// console.log(event.detail.value);

			const {detail: { value }} = event;
			this.sendSideIndex = value;
			this.formData.sendSide = this.deliveryList[value].id;
			console.log(this.formData.sendSide);
		}
	},
	watch: {
		formData: {
			handler(val) {
				if (val) {
					let info = { ...this.form, ...val };
					if (this.formData.sendTime) {
						// info.sendTime = `${this.formData.sendDate} ${this.formData.sendTime}`;
						info.sendTime = this.formData.sendTime;
					}
					this.$emit("update:form", info);
				}
			},
			deep: true
		},
		["formData.sendType"](val) {
			if (val != "3") {
				//不是快递配送不包含运费
				this.formData.sendCost = "";
			}
		}
	}
};
</script>

<style></style>