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.AreaName" 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.inputSearch" placeholder="经办人姓名或电话或逝者姓名" />
							<view class="inlne-button-wrap">
								<button class="u-reset-button button" type="default" @click="showPos">查询</button>
							</view>
							<!-- <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.cabinetPositionName" 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: {
					inputSearch: '',
					cabinetAreaId: '',
					cabinetAreaName: '',
					cabinetPositionId: '',
					cabinetPositionName: '',
					code: '',
				},
			};
		},
		mounted() {
			// this.initTimes()
		},
		methods: {
			async getArea(keyWord){
				const res = await this.$api('signs.getCabinetPosition', {phone: this.form.inputSearch})
				if(res.code != 200) {
					throw new Error("")
				}
				return res.data.map(item => {
					return { ...item, id: item.cabinetAreaId, name: item.cabinetAreaName }
				})
			},
			async search(){
				const res = await this.$api('signs.getCabinetPosition', {phone: this.form.inputSearch})
				console.log(res)
			},
			showArea() {
				if(!this.form.inputSearch){
					this.$refs.uToast.show({type: 'error', message: '请输入查询内容', position: 'top'})
					return 
				}
				this.$refs.area.$open().then(res => {
					if(res.arr && res.arr.length > 0){
						this.form.cabinetAreaId = res.arr[0].cabinetAreaId
						this.form.cabinetAreaName = res.arr[0].cabinetAreaName
					}
				})
			},
			async getPos(){
				const res = await this.$api('signs.getCabinetPosition', {phone: this.form.inputSearch})
				if(res.code != 200) {
					throw new Error("")
				}
				return res.data.map(item => {
					return { ...item, id: item.cabinetPositionId, name: item.cabinetPositionName }
				})
			},
			showPos() {
				if(!this.form.inputSearch){
					this.$refs.uToast.show({type: 'error', message: '请输入查询内容', position: 'top'})
					return 
				}
				this.$refs.pos.$open({}).then(res => {
					if(res.arr && res.arr.length > 0){
						this.form.cabinetPositionId = res.arr[0].cabinetPositionId
						this.form.cabinetPositionName = res.arr[0].cabinetPositionName
					}
				})
			},
			end() {
				this.send = false;
			},
			start() {
				this.send = true;
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {

				if(!this.form.cabinetPositionId){
					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', {cabinetPositionId: this.form.cabinetPositionId}).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.cabinetPositionId){
					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', {cabinetPositionId: this.form.cabinetPositionId, 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>