front-end/mobile-code/src/components/app-delivery.vue

<template>
	<div class="app-delivery-module">
		<!-- 配送公共组件 -->
		<!-- 收花人 -->
		<div class="module-com">
			<tui-list-cell class="line-cell" :hover="false">
				<div class="tui-title">收花人姓名</div>
				<input v-model="form.receiveUserName" placeholder-class="phcolor" class="tui-input" name="receiveUserName" placeholder="请输入姓名" />
			</tui-list-cell>
			<tui-list-cell class="line-cell" :hover="false">
				<div class="tui-title">电话</div>
				<input v-model="form.receiveMobile" placeholder-class="phcolor" class="tui-input" name="receiveMobile" placeholder="请输入电话" type="number" />
			</tui-list-cell>
			<tui-list-cell class="line-cell" :hover="false" :arrow="true" @click="openAddres">
				<div class="tui-title">收花人城市</div>
				<!-- <picker mode="date" :value="form.reachTime" @change="selTimeFn" class="tui-input">
					<div v-if="form.reachTime">{{ form.reachTime }}</div>
					<div class="tui-placeholder" v-else>请选择</div>
				</picker>-->
				<div class="tui-input" v-if="form.receiveProvince || form.receiveCity">{{ form.receiveProvince + '-' + form.receiveCity }}</div>
				<div class="tui-placeholder" v-else>请选择</div>
			</tui-list-cell>
			<tui-list-cell class="line-cell" :hover="false" :arrow="true" @click="selRegionFn">
				<div class="tui-title">详细地址</div>
				<div class="tui-input" v-if="form.receiveFullAddress">{{ form.receiveFullAddress }}</div>
				<div class="tui-placeholder" v-else>请选择详细地址</div>
				<!-- <input v-model="form.receiveFullAddress" placeholder-class="phcolor" class="tui-input" name="receiveFullAddress" placeholder="小区、大厦或街道名称，如金尚小区" /> -->
			</tui-list-cell>
			<tui-list-cell class="line-cell" :hover="false">
				<div class="tui-title">门牌号</div>
				<input v-model="form.receiveFloor" placeholder-class="phcolor" class="tui-input" name="receiveFloor" placeholder="楼号门牌号，如23号403室 (选填)" />
			</tui-list-cell>
		</div>
		<!-- 订花人 -->
		<div class="module-com">
			<!-- <tui-list-cell class="line-cell" :hover="false">
				<div class="tui-title">订花人姓名</div>
				<input v-model="form.bookName" placeholder-class="phcolor" class="tui-input" name="bookName" placeholder="请输入姓名 (选填)" />
			</tui-list-cell>-->
			<tui-list-cell class="line-cell" :hover="false">
				<div class="tui-title">订花人电话</div>
				<input v-model="form.bookMobile" placeholder-class="phcolor" class="tui-input" name="bookMobile" placeholder="填了花送到了会通知您 (选填)" type="number" />
			</tui-list-cell>
			<tui-list-cell class="line-cell" :hover="false" :arrow="true">
				<div class="tui-title">送达时间</div>
				<picker mode="date" :value="form.reachTime" @change="selTimeFn" class="tui-input">
					<div v-if="form.reachTime">{{ form.reachTime }}</div>
					<div class="tui-placeholder" v-else>请选择送达时间</div>
				</picker>
			</tui-list-cell>
			<!-- 具体时间 -->
			<div class="delivery-time">
				<button class="button-com" :class="[form.reachPeriod == 0 ? 'red' : 'default']" @click="timeTodaySelFn(0)">上午</button>
				<button class="button-com" :class="[form.reachPeriod == 1 ? 'red' : 'default']" @click="timeTodaySelFn(1)">下午</button>
				<button class="button-com" :class="[form.reachPeriod == 2 ? 'red' : 'default']" @click="timeTodaySelFn(2)">晚上</button>
			</div>
		</div>
		<!-- 贺卡 -->
		<div class="module-com gift-wrap input-line-wrap">
			<tui-list-cell class="line-cell" :hover="false">
				<div class="gift-content">
					<div class="flex-center">
						<checkbox class="ljd-checkbox" :checked="form.needCard == 1 ? true : false" @change="needCardChange"></checkbox>
						<span class="need-gift">需要贺卡</span>
					</div>
					<div class="gitf-textarea">
						<textarea v-model="form.cardInfo" class="tui-textarea" placeholder-class="phcolor" name="cardInfo" placeholder="请填写贺卡内容" auto-height />
						<!-- <app-textarea v-model="form.cardInfo" placeholder="请填写贺卡内容" @blur="blursave('blur')" /> -->
					</div>
				</div>
			</tui-list-cell>
		</div>
		<!-- 备注 -->
		<div class="module-com">
			<tui-list-cell class="line-cell" :hover="false">
				<div class="tui-title">备注</div>
				<input v-model="form.remark" placeholder-class="phcolor" class="tui-input" name="remark" placeholder="(选填)" />
			</tui-list-cell>
		</div>
		<!-- 省市联动 -->
		<simple-address ref="simpleAddress" :region="orderShop.region" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onCityConfirm"></simple-address>
		<!-- 选择地区 -->
		<app-area-sel :show.sync="showRegion" :city="form.receiveCity" @change="changeAreaFn" />
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
import TuiListCell from '@/components/plugin/list-cell'
import AppDatePicker from '@/components/app-date-picker'
// import AppTextarea from '@/components/app-textarea'
import SimpleAddress from '@/components/plugin/simple-address'
import AppAreaSel from '@/components/app-area-sel'
export default {
	name: 'app-delivery-module',
	components: {
		AppAreaSel,
		TuiListCell,
		AppDatePicker,
		// AppTextarea,
		SimpleAddress
	},
	data() {
		return {
			region: [],
			showRegion: false,
			form: {
				receiveUserName: '', // 收花人姓名；到店自提的姓名
				receiveMobile: '', // 收花人手机；到店自提的电话；
				receiveProvince: '', // 收花人省份
				receiveCity: '', // 收花人城市
				receiveAddress: '', // 收花人城市
				receiveFloor: '', // 收花人门楼号和牌号
				receiveFullAddress: '', // 收花人完整地址，从腾讯地图接口获取
				// bookName: '', // 订花人姓名
				bookMobile: '', // 订花人手机号
				reachTime: '', // 配送时间
				reachPeriod: '0', // 配送时段，0上午1下午2晚上
				needCard: '1', // 是否要贺卡 0不要 1要
				cardInfo: '', // 贺卡信息
				remark: '' // 备注
			},
			region: {
				latitude: 0,
				longitude: 0
			},
			// 省市联动
			cityPickerValueDefault: [0, 0]
			// pickerText: ''
		}
	},
	computed: {
		...mapGetters({ orderShop: 'getOrderShop' })
		// regionArr() {
		// 	return this.$util.isEmpty(this.orderShop) ? [] : this.orderShop.region
		// }
	},
	watch: {
		orderShop(val) {
			console.log('val', val)
			this.form.receiveProvince = val.shop.shopProvince ? val.shop.shopProvince : ''
			this.form.receiveCity = val.shop.shopCity ? val.shop.shopCity : ''
		}
	},
	mounted() {
		if (!this.$util.isEmpty(this.orderShop)) {
			this.form.receiveProvince = this.orderShop.shop.shopProvince ? this.orderShop.shop.shopProvince : ''
			this.form.receiveCity = this.orderShop.shop.shopCity ? this.orderShop.shop.shopCity : ''
		}
	},
	methods: {
		selTimeFn(e) {
			this.form.reachTime = e.detail.value
		},
		// 选择地址
		selRegionFn() {
			if (!this.form.receiveCity) {
				this.$msg('请先选择地址！')
				return false
			}
			this.showRegion = true
			// let that = this
			// uni.chooseLocation({
			// 	success: res => {
			// 		this.form.receiveFullAddress = res.address
			// 		this.region.latitude = res.latitude
			// 		this.region.longitude = res.longitude
			// 	}
			// })
		},
		changeAreaFn(e) {
			console.log('changeAreaFn', e)
			this.form.receiveFullAddress = e.address
			this.region.latitude = e.location.lat
			this.region.longitude = e.location.lng
		},
		// -----
		timeTodaySelFn(index) {
			this.form.reachPeriod = index
		},
		needCardChange() {
			this.form.needCard = this.form.needCard == 1 ? 0 : 1
		},
		// 省市联动
		openAddres() {
			this.$refs.simpleAddress.open()
		},
		onCityConfirm(e) {
			this.form.receiveAddress = e.label
			this.form.receiveProvince = e.provinceName
			this.form.receiveCity = e.cityName
			// this.pickerText = JSON.stringify(e)
		}
	}
}
</script>

<style lang="scss" scoped>
	.app-delivery-module {
		.module-com {
			margin-bottom: 20px;
			background-color: #fff;
			.module-tit {
				padding: 20px 18px;
				font-size: 28px;
				font-weight: 600;
				border-bottom: 1px solid $borderColor;
			}
			.module-det {
				padding: 0 30px;
			}
		}
		// 公共
		.line-cell {
			.tui-title {
				width: 210px;
				color: $fontColor2;
			}
			.tui-input {
				width: calc(100% - 210px);
				font-size: 28px;
			}
			.tui-placeholder {
				color: #ccc;
			}
			.phcolor {
				color: #ccc;
			}
		}
		// 今天时间选择
		.delivery-time {
			@include disFlex(center, center);
			background-color: #fff;
			padding: 20px 0;
			// border-top: 1px solid $borderColor;
			.button-com {
				padding-top: 14px;
				padding-bottom: 10px;
				margin: 0 10px;
			}
		}
		// 贺卡
		.gift-wrap {
			.gift-content {
				width: 100%;
			}
			.need-gift {
				margin-left: 14px;
				color: $fontColor2;
			}
			.gitf-textarea {
				margin-top: 40px;
			}
		}
	}
</style>