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="name" placeholder="请输入姓名" maxlength="50" type="number" />
			</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="phone" placeholder="请输入电话" maxlength="50" type="number" />
			</tui-list-cell>
			<tui-list-cell class="line-cell" :hover="false" :arrow="true" @click="selRegionFn">
				<div class="tui-title">收花人地址</div>
				<div class="tui-input">{{ form.receiveFullAddress }}</div>
			</tui-list-cell>
			<tui-list-cell class="line-cell" :hover="false">
				<div class="tui-title">详细地址</div>
				<input v-model="form.receiveFullAddress" placeholder-class="phcolor" class="tui-input" name="phone" placeholder="小区、大厦或街道名称，如金尚小区" maxlength="50" type="number" />
			</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="phone" placeholder="楼号门牌号，如23号403室 (选填)" maxlength="50" type="number" />
			</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.receiveFloor" placeholder-class="phcolor" class="tui-input" name="age" placeholder="请输入姓名 (选填)" maxlength="50" type="number" />
			</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="age" placeholder="填了花送到了会通知您 (选填)" maxlength="50" 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="[reachPeriod == 0 ? 'red' : 'default']" @click="timeTodaySelFn(0)">上午</button>
				<button class="button-com" :class="[reachPeriod == 1 ? 'red' : 'default']" @click="timeTodaySelFn(1)">下午</button>
				<button class="button-com" :class="[reachPeriod == 2 ? 'red' : 'default']" @click="timeTodaySelFn(2)">晚上</button>
			</div>
		</div>
		<!-- 贺卡 -->
		<div class="module-com gift-wrap">
			<tui-list-cell :hover="false">
				<div class="gift-content">
					<div class="flex-center">
						<checkbox class="ljd-checkbox" checked @change="giftChange"></checkbox>
						<span class="need-gift">需要贺卡</span>
					</div>
					<div class="gitf-textarea">
						<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="age" placeholder="(选填)" maxlength="50" type="number" />
			</tui-list-cell>
		</div>
		<!-- 商品金额 -->
		<div class="module-com shop-price-wrap">
			<div class="module-tit">商品金额</div>
			<div class="module-det">
				<app-list-module v-for="(item, subIndex) in 2" :key="subIndex" />
				<div class="shop-prompt">
					<div>
						<span>运费(6公里)</span>
						<i class="iconfont iconchangjianwentixiangguanwenti2"></i>
					</div>
					<div>￥2</div>
				</div>
				<div class="shop-prompt">
					<div>总计</div>
					<div>￥400</div>
				</div>
			</div>
		</div>
		<!-- 可选优惠 -->
		<div class="module-com discount-wrap">
			<div class="module-tit">可选优惠</div>
			<div class="module-det">
				<app-coupon-sel :discountArr="['member', 'coupon']" />
			</div>
		</div>
		<!-- 匿名派送 -->
		<div class="none-name-delivery flex-center">
			<checkbox class="ljd-checkbox" @change="giftChange"></checkbox>
			<span class="none-name-text">匿名派送</span>
		</div>
        <!-- 选择地区 -->
        <app-area-sel :show="showRegion" @hide="hideAreaSel" @change="changeAreaFn" />
	</div>
</template>

<script>
import TuiListCell from '@/components/plugin/list-cell'
import AppDatePicker from '@/components/app-date-picker'
import AppTextarea from '@/components/app-textarea'
import AppListModule from '@/components/module/app-order-list'
import AppCouponSel from '@/components/app-coupon-sel'
import AppAreaSel from '@/components/app-area-sel'
export default {
	name: 'app-delivery-module',
	components: {
		TuiListCell,
		AppDatePicker,
		AppTextarea,
		AppListModule,
		AppCouponSel,
		AppAreaSel
	},
	data() {
		return {
			region: [],
			showRegion: false,
			form: {
				receiveUserName: '', // 收花人姓名；到店自提的姓名
				receiveMobile: '', // 收花人手机；到店自提的电话；
				receiveProvince: '', // 收花人省份
				receiveCity: '', // 收花人城市
				receiveAddress: '', // 收花人地址
				receiveFloor: '', // 收花人门楼号和牌号
				receiveFullAddress: '', // 收花人完整地址，从腾讯地图接口获取
				receiveLat: '', // 收花人纬度
				receiveLong: '', // 收花人经度
				bookMobile: '', // 订花人手机号
				reachTime: '', // 配送时间
				reachPeriod: '', // 配送时段，0上午1下午2晚上
				needCard: '', // 是否要贺卡 0不要 1要
				cardInfo: '', // 贺卡信息
				remark: '', // 备注
				anonymity: '', // 是否匿名 0不 1要
				sendDistance: '', // 配送距离，根据腾讯js进行计算
				goodsId: '', // 【商城下单特有字段】商品id
				goodsStyleId: '', // 【商城下单特有字段】商品款式id
				goodsNum: '', // 【商城下单特有字段】商品数量
				couponId: '' // 优惠券id，默认0没有使用优惠券
			}
		}
	},
	methods: {
		selTimeFn(e) {
			this.form.reachTime = e.detail.value
		},
		selRegionFn() {
			this.showRegion = true
		},
		changeAreaFn(item) {
			console.log(item)
		},
		hideAreaSel() {
			this.showRegion = false
		},
		timeTodaySelFn(index) {
			this.form.reachPeriod = index
		},
		giftChange() {
			this.form.anonymity = !this.form.anonymity
		}
	}
}
</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;
			}
		}
		// 商品金额
		.shop-price-wrap {
			.shop-prompt {
				@include disFlex(center, space-between);
				color: $fontColor2;
                margin: 20px 0;
                .iconfont {
                    color: $fontColor3;
                    margin-left: 8px;
                }
			}
		}
		// 可选优惠
		.discount-wrap {
			.module-det {
				padding-top: 20px;
				padding-bottom: 20px;
			}
        }
        // 匿名派送
        .none-name-delivery {
            padding-left: 30px;
            margin-top: 40px;
			.none-name-text {
				margin-left: 14px;
				color: $fontColor2;
			}
        }
	}
</style>