ylrz_scrm_company_h5/pages/courseManage/course/becomeSale.vue

<template>
	<view class="centerV hb base-bg-f">
		<image :src="imgPath+'/app/image/logo.png'" mode="aspectFit" class="w400"></image>
		<view class="fs48 bold mt30">注册账户</view>
		<view class="login">
			 <view class="login-item">
				 <view class="input-pwd input-phone">
					 <input v-model="phoneNumber"  maxlength="11"
					  placeholder="请输入电话号码" type="number" ></input>
				 </view>
			 </view> 
			 <view class="login-item">
				 <view class="input-account">
					 <input v-model="nickName" 
					  placeholder="请输入名字" type="text" ></input>
				 </view>
			 </view> 
			 <view class="login-item">
				 <!-- <text>密码</text> -->
				 <view class="input-pwd">
					 <input v-model="password" maxlength="16"
					  placeholder="请输入密码" type="password" ></input>
				 </view>
			 </view> 
			 <view class="btns">
				 <view class="login-btn" @click="login">注册账号</view>
			 </view>
		</view>
		<u-popup :show="showvip" @close="close" @open="open"
		 mode='center' round='20' style="flex: 0;" >
			<view class="VIPvie w600 h600 column justify-center align-center">
				<image :src="imgPath+'/app/manergevip/becomeTrue.png'" class="h400 w400"></image>
				<view class="bold fs50 center mt100">{{tips}}！</view>
				<view class="gologin" @click="loginNav">去登录</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { loginsales } from '@/api/courseManage.js'
	export default {
		data() {
			return {
				tips:'',
				showvip:false,
				companyId:'',
				phoneNumber:'',
				nickName:'',
				password:''
			}
		},
		computed: {
			imgPath() {
			  return this.$store.state.imgpath
			},
		  },
		onLoad(option) {
			this.companyId = option.id
		},
		methods: {
			close() {},
			open() {},
			login(){
				const data={
					companyId:this.companyId,
					phoneNumber:this.phoneNumber,
					nickName:this.nickName,
					password:this.password
				}
				if(this.phoneNumber==''){
					uni.showToast({ title: '请输入手机号！', icon: 'none' });
					return
				}
				if(this.nickName==''){
					uni.showToast({ title: '请输入名字！', icon: 'none' });
					return
				}
				if(this.password==''){
					uni.showToast({ title: '请输入密码！', icon: 'none' });
					return
				}
				if(!uni.$u.test.mobile(this.phoneNumber)){
					uni.showToast({ title: '请输入正确的手机号码！', icon: 'none' });
					return
				}
				loginsales(data).then(res=>{
					console.log(res)
					if(res.code==200){
						this.showvip=true
						this.tips='恭喜账户注册成功'
						uni.showToast({
							title: '注册成功',
							icon: 'none',
						});
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			loginNav(){
				// 条件编译判断平台，设置不同登录页路径
				 let loginPage = '';
				 // #ifdef H5
				 loginPage = '/pages/auth/login';
				 // #endif
				 // #ifdef MP-WEIXIN
				 loginPage = '/pages/auth/wxlogin';
				 // #endif
				uni.navigateTo({
					url:loginPage
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.VIPvie {
	width: 580rpx;
	background: linear-gradient(to bottom, #c3dbfe 2%, #f6fbfe 50%);
	border-radius: 20rpx;
	height: 640rpx;
	position: relative;

	image {
		position: absolute;
		top: -120rpx;
		left: 16%;
	}
}
.login{
width: 100%;
padding: 30rpx 50rpx;
.login-item{
	margin-bottom: 30rpx;
	text-align: left;
	.input-account{
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		border-radius:40rpx;
		border:solid 1rpx #e4e4e4;
		height: 80rpx;	
		width: 100%;
		background:url('/static/account.png') no-repeat 0 center;
		background-size: 30rpx 30rpx;
		background-position: 30rpx;
		input{
			margin-left: 80rpx;
			height: 80rpx;
			line-height: 80rpx
		}
	 
	}
	.input-pwd{
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		border-radius:40rpx;
		border:solid 1rpx #e4e4e4;
		height: 80rpx;	
		width: 100%;
		background:url('/static/password.png') no-repeat 0 center;
		background-size: 30rpx 30rpx;
		background-position: 30rpx;
		input{
			margin-left: 80rpx;
			height: 80rpx;
			line-height: 80rpx
		}
	}
	.input-phone{
		background:url('https://fbylive.obs.cn-southwest-2.myhuaweicloud.com:443/app/manergevip/companyphone.png') no-repeat 0 center;
		background-size: 40rpx 40rpx;
		background-position: 24rpx;
	}
}
.btns{
	margin: 60rpx 0rpx;
	.login-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 80rpx;
		// background: linear-gradient(to bottom, #cfe3ff, #cabbfd);
		background: #5c82ff;
		box-shadow: 0px 7rpx 6rpx 0px rgba(0, 0, 0, 0.2);
		border-radius: 40rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1.0);
	}
}

}
.gologin{
	color: #80b9ff;
	margin-top: 40rpx;
	border: #80b9ff solid 2rpx;
	padding:10rpx 30rpx;
	font-size: 24rpx;
	border-radius: 40rpx;
	margin-bottom: 20rpx;
}
</style>