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>
			<block v-if="form.anonymous">
				<tui-list-cell class="line-cell" :hover="false">
					<div class="none-name-delivery flex-center">
						<checkbox class="ljd-checkbox" @change="anonymityChange"></checkbox>
						<span class="none-name-text">匿名派送</span>
					</div>
				</tui-list-cell>
			</block>
		</div>
		<!-- 备注 -->
		<div class="module-com remark-wrap">
			<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
		},
		props: {
			anonymous: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				region: [],
				showRegion: false,
				form: {
					receiveUserName: '', // 收花人姓名；到店自提的姓名
					receiveMobile: '', // 收花人手机；到店自提的电话；
					receiveProvince: '', // 收花人省份
					receiveCity: '', // 收花人城市
					receiveAddress: '', // 收花人城市
					receiveFloor: '', // 收花人门楼号和牌号
					receiveFullAddress: '', // 收花人完整地址，从腾讯地图接口获取
					// bookName: '', // 订花人姓名
					bookMobile: '', // 订花人手机号
					reachTime: 0, // 配送时间
					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 : ''
			}
			if (this.anonymous) {
				this.form.anonymous = '0'
			}
		},
		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
			},
			anonymityChange() {
				this.form.anonymous = this.form.anonymous == 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;
			}
		}

		// 匿名派送
		.none-name-delivery {
			// padding-left: 30px;
			// padding: 26px 30px;
			// margin-top: 40px;
			margin-bottom: 20px;
			background-color: #fff;
			.none-name-text {
				margin-left: 14px;
				color: $fontColor2;
			}
		}
	}
</style>