great_mobileui/center/applyshare.vue

<template>
	<view class="pages">
		<u-navbar
			title="全民分享"
			:placeholder="true"
			:autoBack="true"
			 :safeAreaInsetTop="true"
			 bgColor="#ED0000"
			 :titleStyle="{color:'#fff'}"
			 leftIconColor="#fff"
		>
		</u-navbar>
		<view class="title">
			请填写您的报名信息
		</view>
		<view class="form-wrap">
			<u--form labelPosition="left" labelAlign="right" labelWidth="85px" :model="form"  :rules="rules" ref="uForm" >
				<u-form-item label="姓名" prop="name" required ref="name" >
					<u--input
						v-model="form.name"
						border="none"
						placeholder="请输入您的真实姓名"
						:fontSize="inputFontSize"
						:customStyle="inputCustomStyle"
					></u--input>
				</u-form-item>
				<u-form-item label="联系电话" prop="mobile" required ref="mobile" >
					<u--input
						v-model="form.mobile"
						border="none"
						placeholder="请输入您的联系电话"
						:fontSize="inputFontSize"
						:customStyle="inputCustomStyle"
					></u--input>
				</u-form-item>
				<u-form-item label="职业" prop="careerName" required ref="careerName" >
					<u--input
						v-model="form.careerName"
						border="none"
						placeholder="请输入您的职业"
						:fontSize="inputFontSize"
						:customStyle="inputCustomStyle"
					></u--input>
				</u-form-item>
				<u-form-item label="销售路径 /渠道" prop="saleChannel" required ref="saleChannel" >
					<u--textarea
						count 
						maxlength="200"
						v-model="form.saleChannel"
						border="none"
						placeholder="请描述您的销售剧目的渠道或路径"
						:customStyle="{fontSize:inputFontSize}"
					></u--textarea>
				</u-form-item>
			</u--form>
		</view>
		<u-button
			@click="submit"
			text="确定" 
			type="primary" 
			shape="circle" 
			:customStyle="{'margin':'60rpx 32rpx',height:'98rpx','box-sizing':'border-box',width:'auto'}"
			color="linear-gradient(90deg, #FF7979 0%, #ED0000 100%)">
		</u-button>
	</view>
</template>

<script>
	export default {
		
		data() {
			return {
				backUrl:'',
				form:{
					name:'',
					mobile:'',
					careerName:'',
					saleChannel:''
				},
				
				rules: {
					name: {
						type: 'string',
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change']
					},
					mobile: [
						{
							type: 'string',
							required: true,
							message: '请输入联系电话',
							trigger: ['blur', 'change']
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					],
					careerName: [
						{
							type: 'string',
							required: true,
							message: '请输入您的职业',
							trigger: ['blur', 'change']
						}
					],
					saleChannel: [
						{
							type: 'string',
							required: true,
							message: '请描述您的销售剧目的渠道或路径',
							trigger: ['blur', 'change']
						}
					],
				},
				inputCustomStyle:{
					background:'#fff',
					'padding-left':'30rpx',
					'box-sizing':'border-box',
				},
				inputFontSize:'30rpx'
			}
		},
		onShow() {
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		onLoad(page) {
			this.backUrl =  decodeURIComponent(page.backUrl)||'/center/center';
		},
		methods: {
			leftClick(){
				let pages = getCurrentPages();
				if(pages.length==1){
					uni.$u.route('/pages/index/index')
				}else{
					uni.navigateBack()
				};
			},
			chekPass(){
				console.log('chekPass---',this.form);
				return new Promise((resolve, reject)=>{
					if(!password){
						 reject('needAuth');
					}
				})
			},
			async submit(){
				let that = this;
				// console.log('form',this.form);
				this.$refs.uForm.validate().then(res => {
					// let chekPassResult = await this.chekPass();
					// return
					// uni.$u.toast('校验通过')
					this.$u.api.applyshare(this.form).then(res=>{
						// console.log('res',res.data);
						uni.showToast({
							title:res.msg,
							icon:'success'
						})
						setTimeout(()=>{
							uni.$u.route('/center/applysharesuccess')
							// that.leftClick();
						},2000)
						// uni.reLaunch({url: this.backUrl});
					}).catch(err=>{
						console.log('login',err);
					})
				}).catch(errors => {
					uni.$u.toast('请正确填写表单')
				})
			},
		}
	}
</script>
<style>
page{
	background-color: #F4F5F7;
}
</style>
<style lang="scss" scoped>
.title{
	font-size: 28rpx;
	font-weight: 400;
	color: #363636;
	line-height: 42rpx;
	margin: 44rpx 32rpx 0;
}
.form-wrap{
	margin: 30rpx 32rpx 40rpx;
	padding: 0 0 20rpx;
	/deep/ .u-form-item{
		.u-form-item__body__left__content{
			justify-content: flex-end;
			text-align: right;
			padding-right: 32rpx;
			align-items: flex-start;
		}
		.u-form-item__body__left__content__required{
			position: static;
			left: auto;
			top: auto;
			color: #FF0000;
			margin-right: 2px;
		}
		.u-form-item__body__left__content__label{
			flex: unset;
			font-size: 28rpx;
			color: #606060;
		}
		&:last-of-type{
			.u-form-item__body{
				align-items: flex-start;
			}
		}
	}
	/deep/ .u-input__content__field-wrapper__field{
		height: 68rpx;
	}
}
</style>