mp-ui-user/src/packageOperate/creator/index.vue

<template>
	<view>
		//申请创客
		<!-- #ifdef MP-ALIPAY -->
		<u-navbar title="申请创客" :border="true" :placeholder="true" :autoBack="true" bgColor="#fff" leftIconSize="0" />
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<u-navbar title="申请创客" :border="true" :placeholder="true" :autoBack="true" bgColor="#fff" />
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN || MP-ALIPAY -->
		<view v-if="pagesNum > 1">
			<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="申请创客" />
		</view>
		<view v-else>
			<u-navbar leftIconSize="0" :placeholder="true" bgColor="#fff" :border="true" title="申请创客">
				<view class="nav-left flex" slot="left" @click="$toIndex()">
					<u-icon name="arrow-left" size="20" color="#333"></u-icon>
				</view>
			</u-navbar>
		</view>
		<!-- #endif -->
		<view class="creator">
			<u-form labelPosition="left" ref="form" labelWidth="90">
				<u-form-item label="姓名:" borderBottom required>
					<u-input v-model="form.name" border="none" placeholder="请输入姓名" maxlength="10"></u-input>
				</u-form-item>
				<u-form-item label="手机号码:" borderBottom required>
					<u-input v-model="form.phone" type="number" border="none" placeholder="请输入手机号码"></u-input>
				</u-form-item>
				<u-form-item label="所在地区:" borderBottom @click="selectArea">
					<u-input v-model="form.cityShow" border="none" disabled disabledColor="#ffffff" placeholder="请选择地区">
					</u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="行业资源:" :borderBottom="false">
					<u-textarea v-model="form.resource" placeholder="请输入行业资源" count></u-textarea>
				</u-form-item>
			</u-form>
		</view>
		<!-- 操作按钮 -->
		<view class="save-btn">
			<button :loading="loading" type="default" @click="saveCreator">提交</button>
		</view>
		
		<view class="tip">
			<view class="tip-text">
				申请成为盲票创客 利用业余时间  推广您公司、家附近门店商户，创客和门店都无需投资、销售额分佣、长期收益 点击提交按钮后，客服会联系您。
			</view>
			<view class="tip-phone">
				<image src="../static/phone.png" mode=""></image>
				<view class="">
					咨询电话：400-081-1913
				</view>
			</view>
		</view>
		

		<area-picker :area-show="areaShow" @cancel="cancel" @confirmArea="confirmArea" />
	</view>
</template>

<script>
	import $http from '@/utils/request.js'
	import AreaPicker from '../../components/area-picker/area-picker.vue'
	export default {
		components: {
			AreaPicker
		},
		data() {
			return {
				loading: false,
				form: {
					phone: '',
					name: '',
					cityShow: '', //省市区拼接
					resource: '', //行业资源
					provinceId: '', // 省ID/编码
					province: '', // 省
					cityId: '', // 市ID/编码
					city: '', // 市
					areaId: '', // 区ID/编码
					area: '', // 区
				},
				areaShow: false,
				pagesNum: '',
			}
		},
		onShow() {
			this.pagesNum = getCurrentPages().length
		},
		methods: {

			//打开地址选项
			selectArea() {
				this.areaShow = true
			},
			//隐藏地址选项
			cancel() {
				this.areaShow = false
			},
			confirmArea(obj) {
				this.form.province = obj.province
				this.form.provinceId = obj.provinceId
				this.form.city = obj.city
				this.form.cityId = obj.cityId
				this.form.area = obj.area
				this.form.areaId = obj.areaId
				this.form.cityShow = obj.cityShow
				this.areaShow = false
			},
			//提交
			saveCreator() {
				if(this.loading) return
				this.loading = true
				let _this = this
				if (!_this.form.name) {
					this.loading = false
					uni.$u.toast('请输入姓名');
					return
				}
				if (!_this.form.phone) {
					this.loading = false
					uni.$u.toast('请输入手机号码');
					return
				}
				const rule = /^[1][0-9][0-9]{9}$/
				if (!rule.test(_this.form.phone)) {
					this.loading = false
					uni.$u.toast('请输入正确的手机号');
					return
				}
				$http.post('/api/v1/mp/admin/channel/apply/submit', this.form).then(res => {
					if (res.code == 0) {
						uni.$u.toast('提交成功');
						setTimeout(() => {
							this.loading = false
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					}else {
						this.loading = false
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.creator {
		background-color: #FFFFFF;
		padding: 10rpx 40rpx 0rpx;
	}

	.save-btn {
		margin-top: 20rpx;
		padding: 50rpx 20rpx;

		::v-deep button {
			line-height: 76rpx;
			font-size: 28rpx;
			height: 76rpx;
			color: #fff;
			background-color: $uni-bg-color;
			border: none;
			border-radius: 100rpx;
		}
	}
	
	.tip {
		padding: 40rpx 40rpx 0;
		line-height: 46rpx;
		font-size: 26rpx;
		color: #999;
		
		&-phone {
			text-align: center;
			margin-top: 60rpx;
			image {
				width: 40rpx;
				height: 40rpx;
				vertical-align: top;
				margin-top: 4rpx;
			}
			view {
				display: inline-block;
				margin-left: 10rpx;
				
			}
		}
		
	}
</style>