mobile_uniapp_mmhy/pageA/cooperation/cooperation.vue

<template>
	<view class="cooperation">
		<!-- #ifdef H5 -->
		<u-navbar  back-text="" :custom-back='goBack' title="商务合作" :border-bottom="false" :background="{backgroundColor: '#d52e4c'}" back-icon-color="#fff" title-color="#fff"></u-navbar>
		<!-- #endif -->
		
		<u-toast ref="uToast" />
		<view class="formBgc">
			<view class="form">
				<view class="type">
					<view class="label">
						您是:
					</view>
					<u-radio-group v-model="type" active-color="#d52e4c" @change="typeChange">
						<view class="inputBox">
								<u-radio name="1" >
									个人
								</u-radio>
								<input v-model="nameType_1" @focus="type=1" placeholder-style="font-size:24rpx;" placeholder="输入您的名字" type="text" />
						</view>
						<view class="inputBox inputBoxTop">
								<u-radio name="2" >
									公司
								</u-radio>
								<input v-model="nameType_2" @focus="type=2" placeholder-style="font-size:24rpx;" placeholder="输入公司的名字" type="text" />
						</view>
					</u-radio-group>
				</view>
				<view class="item">
					<view class="label">
						合作方向:
					</view>
					<view class="radioGroup">
						<u-radio-group active-color="#d52e4c" width="33.33%" v-model="fors" @change="forsChange">
							<u-radio  name="1" >
								直播合作
							</u-radio>
							<u-radio  name="2" >
								学习直播
							</u-radio>
							<u-radio  name="3" >
								卡商合作
							</u-radio>
						</u-radio-group>						
					</view>
				</view>
				<view class="item">
					<view class="label">
						有无直播卖货经验:
					</view>
					<view class="radioGroup">
						<u-radio-group active-color="#d52e4c" width="50%" v-model="has_exp" @change="has_expChange">
							<u-radio name="1" >
								有
							</u-radio>
							<u-radio name="0" >
								无
							</u-radio>
						</u-radio-group>						
					</view>
				</view>
				<view class="item message">
					<view class="label">
						手机号:
					</view>
					<view class="sms">
						<input v-model="phone" maxlength="11" placeholder-style="font-size:24rpx;" placeholder="输入您的联系人手机号" type="text" />
						<!--  -->
						<view class="wrap" v-if="configAll.system_sms_open">
							<u-toast ref="uToast"></u-toast>
							<u-verification-code :seconds="seconds" start-text="验证码" @end="end" @start="start" ref="uCode" 
							@change="codeChange"></u-verification-code>
							<view class="tips" @tap="getCode" >{{tips}}</view>
						</view>
					</view>
				</view>
				<!-- v-if="configAll.system_sms_open" -->
				<view class="item message"  v-if="configAll.system_sms_open">
					<view class="label">
						验证码:
					</view>
					<input maxlength="4" v-model="sms_code" placeholder-style="font-size:24rpx;" placeholder="输入收到的验证码" type="text"  />
				</view>
			</view>
			<view style="margin: 0 20rpx;">
				<view class="btn">
					<u-button @click="business_form()">提交</u-button>
				</view>
				<view class="tips">
					<view>
						<text class="weigh">温馨提醒 : </text>
					</view>
					<view>
						<text>亲爱的用户，如果你想从事电商事业，并在对我们的理念有共识，认同我们的合作理念以通讯业务，我们将在看到后的第一时间联系！期待您的加入！</text>
					</view>
					<text class="weigh" v-if="configAll.bussiness_contact_mobile!=''">商务合作：{{configAll.bussiness_contact_mobile}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			chanId:'',
			type:'', //1个人2公司
			nameType_1:'',
			nameType_2:'',
			fors:'',//合作方向
			has_exp:'',//有无经验
			phone:'',//手机号
			sms_code:'',//短信
			list: [
				{
					name: 'apple',
					disabled: false
				},
				{
					name: 'banner',
					disabled: false
				},
				{
					name: 'orange',
					disabled: false
				}
			],
			// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
			value: '',
			tips: '',
			// refCode: null,
			seconds: 60,
		};
	},
	onLoad(option){
		// this.type=1
		if(option.chanId){
			uni.setStorageSync('chanId', option.chanId);
			this.chanId=option.chanId
		}else{
			uni.removeStorageSync('chanId');
		}
	},
	methods: {
		goBack(){
		if(getCurrentPages().length==1){
			return
		}else{
			uni.redirectTo({
				url:'/pages/index/index?chanId='+this.chanId
			})
		}
			
		},
		open() {
			this.$refs.popup.open()
		},
		/**
		 * 点击取消按钮触发
		 * @param {Object} done
		 */
		close() {
			// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
			this.$refs.popup.close()
		},
		// 选中某个单选框时，由radio时触发
		typeChange(e){
			console.log(e)
			// console.log(this.type)
		},
		forsChange(e){
			console.log(e)
			// console.log(this.fors)
		},
		has_expChange(e){
			console.log(e)
			// console.log(this.has_exp)
		},
		codeChange(text) {
				this.tips = text;
			},
			//商务合作
			business_form(){
				let obj={
					type:this.type,
					name:this.nameType_1,
					for:this.fors,
					has_exp:this.has_exp,
					phone:this.phone,
					sms_code:this.sms_code,
				}
				if(this.type==2){
					obj.name=this.nameType_2
				}
				this.$http.business_form(obj).then(res=>{
					if(res.data.code==1){
						uni.showToast({
							title: '提交成功',
							duration: 500,
							icon: 'none'
						});
						uni.reLaunch({
						  url: '/pages/index/index',
						})
					}else{
						this.$refs.uToast.show({
							title: res.data.msg,
							type: 'error ',
						})
					}
				})
			},
			// 获取短信
			getCode() {
				if(this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					// uni.showLoading({
					// 	title: '正在获取验证码'
					// })
					console.log(this.phone)
					if(this.phone==''){
						this.$refs.uToast.show({
							title: '请输入手机号',
							type: 'warning ',
						})
						return;
					}
					if (!this.$check.checkMobile.test(this.phone)) {
						this.$refs.uToast.show({
							title: '请输入正确的手机号格式',
							type: 'warning ',
						})
						return false;
					}
					this.$http.send({mobile:this.phone,event:'cooperate'})
					.then(res=>{
						if(res.data.code==1){
							this.$u.toast('验证码已发送');
							this.$refs.uCode.start();
							
						}else{
							this.$refs.uToast.show({
								title: res.data.msg,
								type: 'error ',
							})
						}
					})
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				// this.$u.toast('倒计时结束');
			},
			start() {
				// this.$u.toast('倒计时开始');
			},
	}
};
</script>

<style lang="scss">
	.cooperation{
		width: 100%;
		.formBgc{
			padding-top: 30rpx;
			width: 100%;
			height: 725rpx;
			background: linear-gradient(rgb(213, 46, 76), #fff);
			.form{
				box-sizing: border-box;
				background-color: #fff;
				margin: 0rpx 30rpx 0;
				box-sizing: border-box;
				padding: 20rpx 30rpx;
				border-radius: 20rpx;
				/deep/ .u-radio__label{
					font-size: 25rpx;
					margin-right: 0;
				}
				.item{
					/deep/ .u-radio-group{
						justify-content: space-around;
						width: 100%;
					}
				}
				/deep/ .u-radio-group{
					box-sizing: border-box;
					padding-left: 28rpx;
					// margin-bottom:4rpx;
					flex: 1;
				}
				/deep/ input::-webkit-input-placeholder {
					/* placeholder颜色 */
					color: #aab2bd;
					/* placeholder字体大小 */
					font-size: 24rpx;
				}
				view:last-child{
					border-bottom: 0;
				}
				.label{
					position: relative;
					font-size: 24rpx;
					color: #333;
					padding-left: 20rpx;
				}
				.label::after{
					position: absolute;
					content:'*';
					color: $uni-color-BGC;
					top: 50%;
					transform: translateY(-50%);
					left: 0;
					
				}
				.item{
					padding:26rpx 0;
					border-bottom: 1rpx solid #F2F2F7;
					display: flex;
					.radioGroup{
						flex:1 ;
					}
				}
				.type{
					position: relative;
					box-sizing: border-box;
					padding-left: 90rpx;
					border-bottom: 1rpx solid #F2F2F7;
					padding-bottom: 10rpx;
					.label{
						position: absolute;
						top: 50%;
						left: 0;
						transform: translateY(-50%);
						font-size: 25rpx;
					}
					.inputBox{
						display: flex;
						flex-wrap: wrap;
						// justify-content: space-between;
					}
					.inputBoxTop{
						margin-top: 16rpx;
					}
					
					/deep/ input{
						width:230rpx;
						height: 42rpx;
						line-height: 42rpx;
						background: #FFFFFF;
						min-height: 42rpx;
						max-height: 42rpx;
						border-radius: 8rpx;
						font-size: 20rpx;
						color: #BABABA;
						border: 1rpx solid rgba(86, 86, 86, 0.2);
						padding: 0 16rpx;
						margin-left: 20rpx;
					}
				}
				
				.message{
					position: relative;
					// justify-content: space-between;
					/deep/ .tips{
						width: 168rpx;
						height: 49rpx;
						text-align: center;
						line-height: 49rpx;
						// border: 1rpx solid #D52E4C;
						border-radius: 20rpx;
						font-size: 24rpx;
						color: #fff;
						background-color: $uni-color-BGC;
					}
					.sms{
						flex: 1;
						display: flex;
						justify-content: space-between;
					}
					/deep/ .u-input.u-input--border{
						border: 0!important;
					}
					/deep/ input{
						width:260rpx;
						border: 0;
						line-height: 40rpx !important;
						height: 40rpx;
						min-height: 40rpx!important;
						font-size: 24rpx;
						text-align: left;
						padding-left: 30rpx;
					}

				}
			}
				.btn{					
					.u-size-default{
						height: 80rpx;
						line-height: 80rpx;
						background: #D52E4C;
						border-radius: 40px;
						color: #fff;
						margin-top: 40rpx;
						margin-bottom: 40rpx;
						overflow: hidden!important;
					}
					.u-default-hover{
						background: #c02b46!important;
						border-radius: 40px!important;
						color: #fff!important;
					}
				}
				.tips{
					font-size: 24rpx;
					color: #333;
					line-height: 40rpx;
					.weigh{
						color: #2F2F2F;
						font-weight: 700;
					}
				}
		}
	}
</style>