fny-ugd-palace-uniapp/pages/signs/address/address.vue

<template>
	<view class="sign-page">
		<view class="view-wrap">
			<view class="card">
				<view class="form-item">
					<view class="form-item__title">
						<view class="name">区域</view>
						<view class="extra"></view>
					</view>
					<view class="form-item__input__wrap">
						<view class="form-item__input" @click="showArea">
							<input placeholder-class="input-placeholder" class="input" type="text" :value="form.blessingAreaName" placeholder="请选择区域" disabled />
							<view class="icon"><image style="width: 16rpx;height: 16rpx;" src="/static/app/page3/arrow-down.png" mode="aspectFit"></image></view>
						</view>
					</view>
				</view>
				<view class="form-item">
					<view class="form-item__title">
						<view class="name">阁位</view>
						<view class="extra"></view>
					</view>
					<view class="form-item__input__wrap">
						<view class="form-item__input" @click="showPos">
							<input placeholder-class="input-placeholder" class="input" type="text" :value="form.blessingPositionName" placeholder="请选择阁位" disabled />
							<view class="icon"><image style="width: 16rpx;height: 16rpx;" src="/static/app/page3/arrow-down.png" mode="aspectFit"></image></view>
						</view>
					</view>
				</view>
				<view class="form-item">
					<view class="form-item__title">
						<view class="name">经办人验证码</view>
						<view class="extra">
							
						</view>
					</view>
					<view class="form-item__input__wrap">
						<view class="form-item__input">
							<input  placeholder-class="input-placeholder" class="input" type="text" v-model="form.code" placeholder="请输入验证码" />
						</view>
					</view>
				</view>
				<view class="tip-btn" :class="{disable: send}" @click="getCode">{{tips}}</view>
			</view>
			<view class="button-wrap">
				<button type="default" class="u-reset-button sing-btn" @click="confirm">
					确认绑定
				</button>
			</view>
		</view>
		<!-- 区域 -->
		<c-form-type-action-sheet ref="area" title="请选择区域" :loadData="getArea">
			<template v-slot="{item}">
				<view>{{item.name}}</view>
			</template>
		</c-form-type-action-sheet>
		<!-- 阁位 -->
		<c-form-type-action-sheet ref="pos" title="请选择阁位" :loadData="getPos">
			<template v-slot="{item}">
				<view>{{item.name}}</view>
			</template>
		</c-form-type-action-sheet>
		<!-- 验证码 -->
		<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
		<!-- 提示框 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tips: '获取验证码',
				seconds: 60,
				send: false,
				form: {
					blessingAreaId: '',
					blessingAreaName: '',
					blessingPositionId: '',
					blessingPositionName: '',
					code: '',
				},
			};
		},
		mounted() {
			// this.initTimes()
		},
		methods: {
			async getArea(keyWord){
				const res = await this.$api('signs.getBlessingArea', {})
				if(res.code != 200) {
					throw new Error("")
				}
				return res.data.map(item => {
					return { ...item, id: item.blessingAreaId, name: item.blessingAreaName }
				})
			},
			showArea() {
				this.$refs.area.$open().then(res => {
					if(res.arr && res.arr.length > 0){
						this.form.blessingAreaId = res.arr[0].blessingAreaId
						this.form.blessingAreaName = res.arr[0].blessingAreaName
					}
				})
				
			},
			async getPos(){
				const res = await this.$api('signs.getBlessingPosition', {blessingAreaId: this.form.blessingAreaId})
				if(res.code != 200) {
					throw new Error("")
				}
				return res.data.map(item => {
					return { ...item, id: item.blessingPositionId, name: item.blessingPositionName }
				})
			},
			showPos() {
				this.$refs.pos.$open({}).then(res => {
					if(res.arr && res.arr.length > 0){
						this.form.blessingPositionId = res.arr[0].blessingPositionId
						this.form.blessingPositionName = res.arr[0].blessingPositionName
					}
				})
			},
			end() {
				this.send = false;
			},
			start() {
				this.send = true;
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				
				if(!this.form.blessingPositionId){
					this.$refs.uToast.show({type: 'error', message: '请选择阁位', position: 'top'})
					return;
				}
				
				if(this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					this.$refs.uToast.show({
						type: 'loading',
						message: '正在获取验证码',
					})
					
					// TODO 发起请求: 
					this.$api('signs.sendCode', {blessingPositionId: this.form.blessingPositionId}).then(res => {
						this.$refs.uToast.hide()
						if(res.code == 200){
							// 这里此提示会被this.start()方法中的提示覆盖
							this.$refs.uToast.show({type: 'success', message: '验证码已发送', position: 'top'})
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start()
						}else{
							this.$refs.uToast.show({type: 'error', message: res.msg, position: 'top'})
						}
					})
					
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			confirm(){
				if(!this.form.blessingPositionId){
					this.$refs.uToast.show({type: 'error', message: '请选择阁位', position: 'top'})
					return;
				}
				if(!this.form.code){
					this.$refs.uToast.show({type: 'error', message: '请填写经办人验证码', position: 'top'})
					return;
				}
				
				this.$refs.uToast.show({
					type: 'loading',
					message: '请稍后',
				})
				
				this.$api('signs.openidBinding', {blessingPositionId: this.form.blessingPositionId, code: this.form.code}).then(res => {
					this.$refs.uToast.hide()
					if(res.code == 200){
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$refs.uToast.show({type: 'success', message: res.msg, position: 'top'})
						uni.navigateBack({
							delta: 1
						})
					}else{
						this.$refs.uToast.show({type: 'error', message: res.msg, position: 'top'})
					}
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>