powerbank/page_user/hezuo/index.vue

<template>
	<view class="page">
		<u-navbar title="合作加盟" :border-bottom="false" :background="bgc" title-color='#000' back-icon-color="#000" title-size='36' height='50'></u-navbar>
		<view class="box">
			<image src="https://api.ccttiot.com/smartmeter/img/static/u7CKiZqacBOcqYyDWDGF" mode="" class="pic"></image>
			<view class="inp" style="margin-top: 46rpx;">
				<image src="https://api.ccttiot.com/smartmeter/img/static/uft7OxFUV7v09RCwhpfo" mode=""></image>
				<view class="one">您的手机号</view>
				<input type="text" v-model="tel" placeholder="请输入您的手机号" />
			</view>
			<view class="inp" style="position: relative;">
				<image src="https://api.ccttiot.com/smartmeter/img/static/uft7OxFUV7v09RCwhpfo" mode=""></image>
				<view class="one">验证码</view>
				<input type="text" v-model="ma" placeholder="请输入验证码" />
				<view class="hq" @click="hqyzm">{{yzm}}</view>
			</view>
			<view class="inp">
				<image src="https://api.ccttiot.com/smartmeter/img/static/uft7OxFUV7v09RCwhpfo" mode=""></image>
				<view class="one">合作意向</view>
				<input type="text" :placeholder="tit" disabled="false" @click="btnxz" />
			</view>

			<view class="anniu" @click="btnjm">
				马上加盟
			</view>
			<u-select v-model="show" :list="list" @confirm="confirm"></u-select>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					background: '#25CE88'
				},
				show: false,
				tit: '请选择您的合作意向',
				list: [{
						value: '1',
						label: '成为充电合作商'
					},
					{
						value: '2',
						label: '门店铺设充电宝'
					},
					{
						value: '2',
						label: '贴牌OEM'
					}
				],
				yzm: '获取验证码',
				countdown: 0, // 倒计时变量  
				countdownInterval: null, // 倒计时间隔ID  
				tel:'',
				ma:'',
				type:''
			}
		},
		methods: {
			btnjm(){
				let data = {
					mobile:this.tel,
					mobileCode:this.ma,
					intentions:this.type
				}
				this.$u.post("/app/join",data).then(res => {
					if(res.code == 200){
						uni.showToast({
						    title: '申请成功',  
						    icon: 'success',  
						    duration: 1000 
						}) 
						setTimeout(()=>{
							uni.navigateBack()
						},1500)
					}else if(res.code == 500){
						uni.showToast({
						    title: res.msg,  
						    icon: 'none',  
						    duration: 2000 
						})
					}else if(res.code == 401){
						uni.navigateTo({
							url:'/pages/login/login'
						})
					}
				})
			},
			btnxz() {
				this.show = true
			},
			confirm(e) {
				this.tit = e[0].label
				this.type = e[0].value
			},
			hqyzm() {
                if(this.tel == ''){
					uni.showToast({
					    title: '手机号不能为空',  
					    icon: 'none',  
					    duration: 2000 
					});
				}else{
					if(this.yzm == '获取验证码'){
						this.$u.get(`/common/verificationCode/mobile?mobile=${this.tel}&type=${'joinApply'}`).then(res =>{
							if(res.code == 200){
								// 清除之前的定时器
								this.clearCountdown();
								// 开始新的倒计时  
								this.startCountdown();
							}else if(res.code == 500){
								uni.showToast({
								    title: res.msg,  
								    icon: 'none',
								    duration: 2000 
								});
							}
						})
					}else{
						uni.showToast({
						    title: '验证码已发送',  
						    icon: 'none',  
						    duration: 2000 
						});
					}
				}
			},
			startCountdown() {
				this.yzm = '60秒';
				this.countdown = 60;
				this.countdownInterval = setInterval(() => {
					if (this.countdown > 0) {
						this.countdown--;
						this.yzm = this.countdown + '秒';
					} else {
						this.clearCountdown();
						this.yzm = '获取验证码';
					}
				}, 1000);
			},
			clearCountdown() {
				if (this.countdownInterval) {
					clearInterval(this.countdownInterval);
					this.countdownInterval = null;
				}
			},
		},
		beforeDestroy() {
			// 在组件销毁前清除定时器  
			this.clearCountdown();
		},
	}
</script>

<style lang="scss">
	/deep/ .u-title,
	/deep/ .uicon-nav-back {
		padding-bottom: 22rpx;
	}
	page {
		// background: linear-gradient(180deg, #25CE88 0%, rgba(255, 255, 255, 0) 100%);
	}

	.page {
		width: 750rpx;
		position: fixed;
		top: 0;
		left: 0;

		.box {
			width: 750rpx;
			height: 1440rpx;
			background: #F4F5F7;
			border-radius: 0rpx 0rpx 0rpx 0rpx;

			.anniu {
				width: 558rpx;
				height: 90rpx;
				background: linear-gradient(270deg, #54DAA1 0%, #19CD82 100%);
				border-radius: 54rpx 54rpx 54rpx 54rpx;
				font-weight: 500;
				font-size: 36rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 90rpx;
				margin: auto;
				margin-top: 84rpx;
				margin-bottom: 218rpx;
			}

			.pic {
				width: 748rpx;
				height: 768rpx;

			}

			.inp {
				display: flex;
				font-weight: 500;
				font-size: 32rpx;
				padding: 10rpx 60rpx;
				box-sizing: border-box;
				color: #3D3D3D;

				.one {
					width: 165rpx;
				}

				.hq {
					width: 136rpx;
					height: 49rpx;
					background: #38D492;
					border-radius: 6rpx 6rpx 6rpx 6rpx;
					text-align: center;
					font-size: 24rpx;
					color: #FFFFFF;
					padding: 8rpx 8rpx;
					box-sizing: border-box;
					position: absolute;
					top: 14rpx;
					right: 64rpx;
					z-index: 99;
				}

				image {
					width: 14rpx;
					height: 14rpx;
					margin-top: 12rpx;
					margin-right: 10rpx;
				}

				input {
					width: 400rpx;
					height: 52rpx;
					border-radius: 6rpx 6rpx 6rpx 6rpx;
					border: 2rpx solid #979797;
					padding-left: 20rpx;
					font-weight: 500;
					font-size: 32rpx;
					color: #979797;
					margin-left: 28rpx;
				}
			}
		}
	}
</style>