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="phone" />
				</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="showRegion" @hide="hideAreaSel" @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, sendSms, 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: ''
			},
			// 省市联动
			regionData: [],
			cityPickerValueDefault: [0, 0],
			// 验证码
			isSend: 0,
			countDown: 59,
			timer: null
		}
	},
	onLoad() {
		let token = uni.getStorageSync('token')
		if (!token) {
			getShopUser()
			return false
		}
		this.init()
	},
	methods: {
		init() {
			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',
					type: 2,
					query: {
						pagestatus: 2,
						...res.data
					}
				})
			})
		},
		// 验证码
		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() {
			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)
				}
			})
		},
		// 省市联动
		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>