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

<template>
	<view>
		<appFormRadioBtn title="配送方式" :currenSelect.sync="formData.sendType" />
		<tui-list-cell
			class="line-cell"
			:hover="false"
			:arrow="true"
			v-if="formData.sendType == 3"
		>
			<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">
					{{ getCurSideName }}
				</view>
				<view v-else class="tui-placeholder">请选择快递公司</view>
				<input name="sendSide" hidden />
			</picker>

		</tui-list-cell>

		<appAddressGroup
			v-if="formData.sendType == 2 || formData.sendType == 3"
			cityTitle="配送城市"
			@selectAdress="selectAdress"
		></appAddressGroup>
		<appSendTime
			: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";
export default {
	components: {
		TuiListCell,
		appFormRadioBtn,
		appAddressGroup,
		appSendTime
	},
	props: {
		form: {
			type: Object
		}
	},
	data() {
		return {
			formData: {
				sendCost: "",
				receiveProvince: "",
				receiveCity: "",
				receiveFloor: "",
				receiveAddress: "",
				receiveLong: "",
				receiveLat: "",
				sendSide: "2",
				sendType: "3", //1自取 2本店送 3快递送
				sendDate: "",
				sendTime: ""
			},
			deliveryList: [
				{
					name: "达达配送",
					value: "2"
				},
				{
					name: "顺丰同城",
					value: "3"
				},
				{
					name: "闪送",
					value: "4"
				},
				{
					name: "美团",
					value: "5"
				}
			]
		};
	},
	created() {
		this.initData();
	},
	computed: {
		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;
				}
			}
		},
		selectAdress(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;

			this.$nextTick(() => {
				let params = {
					sendSide: this.formData.sendSide,
					receiveLong: info.longitude,
					receiveLat: info.latitude
				};
				this.freightCount(params);
			});
		},
		// 计算运费
		freightCount(option) {
			freight(option).then(res => {
				this.formData.sendCost = res.data.sndCost;
			});
		},
		selectSideEvent(event) {
			const {
				detail: { value }
			} = event;
			console.log(2222, value, this.deliveryList[value].value);
			this.sendSideIndex = value;
			this.formData.sendSide = this.deliveryList[value].value;
		}
	},
	watch: {
		formData: {
			handler(val) {
				if (val) {
					let info = { ...this.form, ...val };
					if (this.formData.sendTime) {
						info.sendTime = `${this.formData.sendDate} ${this.formData.sendTime}`;
					}
					console.log(2222, info);
					this.$emit("update:form", info);
				}
			},
			deep: true
		},
		["formData.sendType"](val) {
			if (val != "3") {
				//不是快递配送不包含运费
				this.formData.sendCost = "";
			}
		}
	}
};
</script>

<style></style>