xusfood_client/xushuo/cooperation.vue

<template>
	<view class="pages">
		<u-navbar
			title="合作加盟"
			:autoBack="true"
			 :safeAreaInsetTop="true"
		>
		</u-navbar>
		<view class="page-bg">
			<img class="img" :src="staticUrl+'/img/cooperation-bg.png'" alt="">
		</view>
		<view class="page-wrap">
			<view class="video-wrap">
				<video 
					id="video" 
					:src="pageData.jiVideo" 
				    controls playsinline loop>
				</video>
			</view>
			<view class="u-content" style="margin-top: 20rpx;">
				<u-parse :content="pageData.jiIntro"></u-parse>
			</view>
			<!-- <view class="center-img" >
				<img :src="staticUrl+'/img/index-nav-3.png'" alt="">
			</view> -->
			<view class="form-wrap">
				<view class="form">
					<img :src="staticUrl+'/img/shopContact.png'" alt="">
					<view class="title">
						<text>免费咨询</text><text class="sub-title">Free consultation</text>
					</view>
					<u--form :model="form" 
						labelPosition="top" 
						labelWidth="200rpx" 
						:labelStyle="{color:'#fff'}"
						ref="uForm">
						<u-form-item label="您的姓名" prop="name">
							<u-input v-model="form.name" shape="circle" color="#fff" placeholder="请输入您的姓名" />
						</u-form-item>
						<u-form-item label="您的电话" prop="mobile">
							<u-input v-model="form.mobile" shape="circle" color="#fff" placeholder="请输入您的电话" />
						</u-form-item>
					</u--form>
				</view>
				<view class="full-btn" @click="submit">提交咨询</view>
				<view class="tip">投资有风险 加盟需谨慎</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				staticUrl:this.$commonConfig.staticUrl,
				pageData:{},
				form:{
					name:'',
					mobile:''
				},
				rules: {
					name:
					// 必填规则
					{
						required: true,
						message: '请输入您的姓名',
						// blur和change事件触发检验
						trigger: ['blur', 'change'],
					},
					// 字段名称
					mobile: [
						{
							required: true, 
							message: '请输入您的电话',
							trigger: ['change','blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					]
				}
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		onShow() {
			this.getIntro()
		},
		onLoad() {

		},
		methods: {
			getIntro(){
				this.$u.api.xsGetIntro().then(res=>{
					this.pageData = res.data;
					// console.log('res',res);
				}).catch(err=>{
					console.log('xsGetIntro',err);
				})
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					// uni.$u.toast('校验通过')
					// console.log('form',this.form);
					this.$u.api.shopContact(this.form).then(res=>{
						uni.$u.toast(res.msg)
						// uni.navigateBack()
						// console.log('res',res.msg);
					}).catch(err=>{
						console.log('shopContact',err);
					})
				}).catch(errors => {
					uni.$u.toast('请正确填写表单')
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
.video-wrap{
	overflow: hidden;
	border-radius: 20rpx;
	text-align: center;
	margin-bottom: 50rpx;
	#video{
		width: 100%;
	}
}
.center-img{
	text-align: center;
	margin-bottom: 40rpx;
}
.form-wrap{
	margin-top: 20rpx;
	.form{
		position: relative;
		min-height: 390rpx;
		box-sizing: border-box;
		padding: 40rpx;
		color: #fff;
		margin-bottom: 40rpx;
		img{
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
			z-index: -1;
		}
		.title{
			font-size: 36rpx;
			font-weight: 600;
			color: rgba(255,255,255,0.99);
			line-height: 50rpx;
			margin-bottom: 16rpx;
			.sub-title{
				margin-left: 16rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(255,255,255,0.5);
				line-height: 33rpx;
				text-transform: uppercase
			}
		}
	}
	.full-btn{
		background-color: #FFB100;
		margin-bottom: 37rpx;
	}
	.tip{
		font-size: 30rpx;
		font-weight: 400;
		color: rgba(51,51,51,0.99);
		line-height: 42rpx;
		padding-bottom: 60rpx;
		text-align: center;
	}
}
</style>