front-end/mobile-code/src/official/apply.vue

<template>
	<div class="app-content">
		<form @submit="formSubmit">
			<div class="module-com">
				<tui-list-cell class="line-cell" :hover="false">
					<div class="tui-title">花店名称</div>
					<input v-model="form.name" placeholder-class="phcolor" class="tui-input" name="name" placeholder="请输入姓名" />
				</tui-list-cell>
				<tui-list-cell class="line-cell" :hover="false" :arrow="true" @click="openAddres">
					<div class="tui-title">花店地址</div>
					<div class="tui-input" v-if="form.province">{{ form.province + '-' + form.city }}</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.address">{{ form.address }}</div>
					<div class="tui-placeholder" v-else>请选择详细地址</div>
				</tui-list-cell>
				<tui-list-cell class="line-cell" :hover="false">
					<div class="tui-title">门牌号</div>
					<input v-model="form.floor" placeholder-class="phcolor" class="tui-input" name="floor" 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.mobile" placeholder-class="phcolor" class="tui-input" name="mobile" placeholder="请输入" type="number" />
				</tui-list-cell>
				<tui-list-cell class="line-cell code-wrap" :hover="false">
					<div class="tui-title">验证码</div>
					<input v-model="form.code" placeholder-class="phcolor" class="tui-input" name="code" placeholder="请输入验证码" type="number" />
					<div class="tui-code" v-if="isSend">{{ countDown + 's' }}</div>
					<div class="tui-code" v-else @click="getCode">获取验证码</div>
				</tui-list-cell>
			</div>
			<!-- 推荐人 -->
			<div class="module-com recommend-wrap" v-if="!$util.isEmpty(merchantData)">
				<div class="recommend-tag">推荐人</div>
				<div class="recommend-det">
					<app-avatar-module :src="merchantData.smallLogoUrl" :width="78" alt="推荐人头像" />
					<div class="recommend-info">
						<div class="app-size-32">{{ merchantData.merchantName }}</div>
						<div class="app-color-2">{{ merchantData.address }}</div>
					</div>
				</div>
			</div>

			<div class="btn-wrap">
				<button class="admin-button-com blue big" formType="submit">确认</button>
			</div>
			<!-- 选择地区 -->
			<app-area-sel :show.sync="showRegion" @change="changeAreaFn" />
			<!-- 省市联动 -->
			<simple-address ref="simpleAddress" :region="regionData" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onCityConfirm"></simple-address>
		</form>
	</div>
</template>

<script>
	import TuiListCell from '@/components/plugin/list-cell'
	import AppAreaSel from '@/components/app-area-sel'
	import SimpleAddress from '@/components/plugin/simple-address'
	import AppAvatarModule from '@/components/module/app-avatar'
	const form = require('@/utils/formValidation.js')
	// api
	import { merchantDet, applyRegister, sendSmsW, regionTreeW } from '@/api/official'
	// import { getShopUser } from '@/utils/auth'
	export default {
		name: 'apply-data',
		components: {
			TuiListCell,
			AppAreaSel,
			SimpleAddress,
			AppAvatarModule
		},
		data() {
			return {
				merchantData: {},
				form: {
					name: '',
					mobile: '',
					province: '',
					city: '',
					dist: '',
					address: '',
					floor: '',
					longitude: '',
					latitude: ''
					// 推荐商家id
					// oldId: ''
				},
				showRegion: false,
				// 省市联动
				regionData: [],
				cityPickerValueDefault: [0, 0],
				// 验证码
				isSend: 0,
				countDown: 59,
				timer: null
			}
		},
		onLoad() {
			// if (!this.$util.isLogin()) {
			// 	// getShopUser()
			// 	return false
			// }
			// this.init()
		},
		methods: {
			init() {
				this.$util.getCheckLogin().then(res => {
					if (res) {
						let id = this.option.merchantId
						if (id) {
							this._getMerchantDet()
						}
						this._regionTree()
					}
				})
			},
			_regionTree() {
				regionTreeW().then(res => {
					this.regionData = res.data.tree
				})
			},
			_getMerchantDet() {
				merchantDet({ id: this.option.merchantId }).then(res => {
					this.merchantData = res.data
				})
			},
			// ==============
			confirmFn() {
				applyRegister({
					oldId: this.option.merchantId || 0,
					...this.form
				}).then(res => {
					this.$util.pageTo({
						// url: '/official/pay',
						url: '/official/callback',
						type: 2,
						query: {
							pagestatus: 3
							// orderSn: this.option.orderSn,
							// payDiscountPrice: res.data.discountAmount
						}
					})
				})
			},
			// 验证码
			getCode() {
				if (!this.form.mobile || !this.$util.checkMobile(this.form.mobile)) {
					this.$msg('请输入正确的手机号！')
					return false
				}
				this.isSend = 1
				sendSms({
					type: 1,
					mobile: this.form.mobile
				})
					.then(res => {
						this.beginCountDown()
						this.$msg('发送成功！')
					})
					.catch(() => {
						this.isSend = 0
						this.$msg('发送失败！')
					})
			},
			// 倒计时
			beginCountDown() {
				this.countDown = 59
				this.timer = setInterval(() => {
					if (this.countDown === 0) {
						clearInterval(this.timer)
						this.isSend = 0
						return
					}
					this.countDown -= 1
				}, 1000)
			},
			// 选择地址
			selRegionFn() {
				if (!this.form.city) {
					this.$msg('请先选择地址！')
					return false
				}
				this.showRegion = true
				// let that = this
				// uni.chooseLocation({
				// 	success: (res) => {
				// 		this.form.address = res.address
				// 		this.form.latitude = res.latitude
				// 		this.form.longitude = res.longitude
				// 		console.log('位置名称：' + res.name)
				// 		console.log('详细地址：' + res.address)
				// 		console.log('纬度：' + res.latitude)
				// 		console.log('经度：' + res.longitude)
				// 	}
				// })
			},
			changeAreaFn(e) {
				console.log('changeAreaFn', e)
				this.form.address = e.address
				this.form.latitude = e.location.lat
				this.form.longitude = e.location.lng
			},
			// -----
			// 省市联动
			openAddres() {
				this.$refs.simpleAddress.open()
			},
			onCityConfirm(e) {
				// this.form.receiveAddress = e.label
				this.form.province = e.provinceName
				this.form.city = e.cityName
				// this.pickerText = JSON.stringify(e)
			},
			// 表单验证
			formSubmit(e) {
				// 表单规则
				let rules = []
				// 进行表单检查
				let formData = e.detail.value
				let checkRes = form.validation(formData, rules)
				// 验证通过!
				if (!checkRes) {
					setTimeout(() => {
						this.confirmFn()
					})
				} else {
					this.$msg(checkRes)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.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;
		}
	}
	.btn-wrap {
		width: 90%;
		margin: 60px auto;
		.admin-button-com {
			width: 100%;
			margin: 0 auto;
		}
	}
	// 验证码
	.code-wrap {
		.tui-input {
			width: calc(100% - 410px);
			font-size: 28px;
		}
		.tui-code {
			width: 200px;
			text-align: center;
			border-left: 1px solid $borderColor;
			color: $mainColor;
		}
	}
	// 推荐人
	.recommend-wrap {
		padding: 30px 45px;
		.recommend-tag {
			font-size: 28px;
			color: $fontColor2;
			margin-bottom: 24px;
		}
		.recommend-det {
			@include disFlex(center, flex-start);
			.recommend-info {
				margin-left: 20px;
				.app-size-32 {
					margin-bottom: 4px;
				}
			}
		}
	}
</style>