cbz/pages/login/code_login.vue

<template>
	<view class="content">
		<view class="title">验证码登录</view>
		<view class="form vflex">
			<u-input v-model="userInfo.name" placeholder="用户名/手机号"></u-input>
			<u-input v-model="code" placeholder="请输入验证码">
				<template slot="suffix">
					<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
					<view class="code" @tap="getCode" >{{tips}}</view>
				</template>
			</u-input>
		</view>
		<view class="hflex acenter">
			<u-checkbox-group @change="checkboxChange" iconSize="20">
				<u-checkbox v-model="agree" shape="circle" iconSize="20"></u-checkbox>
			</u-checkbox-group>
			<view class="text">阅读并同意<span class="read" @click="open(0)">《用户服务协议》</span>、<span class="read" @click="open(1)">《个人信息保护政策》</span></view>
		</view>
		<view class="button hflex acenter jcenter" @click="login">
			<view>登录</view>
		</view>
		<view class="hflex acenter jcenter bottom">
			<view class="text_style1" @click="pwdLogin">账号密码登录</view>
			<view style="margin: 0 10rpx;">|</view>
			<view class="text_style2" @click="register">注册</view>
		</view>
		<!-- 弹出层 -->
		<u-modal :show="showProtocol" :title="protocolTitle" confirmColor="#2988FE" @confirm="isRead" confirmText="我已阅读">
			<view class="slot-content">
				<u-parse :content="protocolContent"></u-parse>
				<!-- <rich-text :nodes="protocolContent"></rich-text> -->
			</view>
		</u-modal>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				userInfo: {
					name: '',
				},
				code: '',
				tips: '',
				agree: false,
				showProtocol: false,
				protocolTitle: '',
				protocolContent: '',
			}
		},
		onLoad() {
			that = this
		},
		methods: {
			// 验证码文字
			codeChange(text) {
				that.tips = text
			},
			// 获取验证码
			getCode() {
				if(that.$refs.uCode.canGetCode) {
					uni.showLoading({
						title: '正在获取验证码'
					})
					$api.req({
						url: '/data/api.Login/sendsms',
						method: 'POST',
						data: {
							phone: that.userInfo.name,
							type: 1
						}
					}, function(res) {
						uni.hideLoading();
						if(res.code == 1) {
							uni.$u.toast('验证码已发送')
							that.$refs.uCode.start()
						} else {
							uni.$u.toast('验证码发送失败')
						}
					})
				} else {
					uni.$u.toast('倒计时结束后再发送')
				}
			},
			// 阅读并同意
			checkboxChange(n) {
				this.agree = !this.agree
			},
			// 打开弹出层
			open(index) {
				const that = this
				$api.req({
					url: '/data/api.Login/getloginset'
				}, function(res) {
					if (res.code == 1) {
						if(index == 0) {
							uni.setStorageSync('xieyi',res.data.service_agreement)
							$api.jump('/pages/user/agreement?title=用户服务协议')
						} else {
							uni.setStorageSync('xieyi',res.data.protection_policy)
							$api.jump('/pages/user/agreement?title=个人隐私保护政策')
						}
					}
				})
			},
			isRead() {
				that.showProtocol = false
			},
			// 登录
			login() {
				if ($api.formCheck(that.userInfo.name,"phone") && $api.formCheck(that.code, "code6")) {
					if (!that.agree) {
						$api.info('请先阅读并同意用户协议和隐私协议')
					} else {
						wx.getSetting({
							success(res) {
								if (res.authSetting['scope.userInfo']) {
									wx.login({
										success: function(res) {
											uni.request({
												url: $api.config.baseUrl + '/data/api.Login/getOpenid',
												method: 'POST',
												data: {
													code: res.code
												},
												header: {
													'content-type': 'application/json',
													'api-name': 'wxapp'
												},
												success:(res)=> {
													console.log(res);
													if(res.data.code == 1) {
														$api.req({
															url: '/data/api.Login/sms',
															method: 'POST',
															data: {
																phone: that.userInfo.name,
																verify: that.code,
																openid: res.data.data.openid
															}
														}, function(res) {
															console.log(res)
															if(res.code == 1) {
																uni.setStorageSync("token",res.data.token)
																uni.setStorageSync("id",res.data.id)
																// var options = {
																//   user: res.data.id.toString(),
																//   pwd: '123456',
																//   appKey: uni.WebIM.config.appkey,
																//   success: function (res2) {
																// 	wx.setStorageSync("HXtoken",res2.access_token)
																// 	$api.jump('/pages/tabbar/mine/mine',3)
																//   },
																//   error: function(error){
																// 	  console.log(error);
																//   }
																// };
																// uni.WebIM.conn.open(options);
																uni.WebIM.conn.open({
																    user: res.data.huanxinID,
																    pwd: "12345678",
																	appKey: uni.WebIM.config.appkey
																  }).then((res2) => {
																    console.log("login success",res2);
																    uni.setStorageSync("myUsername",res.data.huanxinID)
																  }).catch((reason) => {
																    console.log("login fail", reason);
																  });
																  $api.jump('/pages/tabbar/mine/mine',3)
															}
														})
													}
												}
											})
										}
									})
								}
							}
						})
						
					}
				}
			},
			// 账号密码登录
			pwdLogin() {
				$api.jump('/pages/login/password_login')
			},
			// 注册
			register() {
				$api.jump('/pages/login/register')
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content::v-deep {
		padding: 0 60rpx;
		.title {
			margin: 64rpx 0;
			font-size: 52rpx;
			color: #222;
		}
		.form {
			margin-bottom: 100rpx;
			.u-input {
				width: 630rpx !important;
				height: 104rpx !important;
				background-color: #f4f4f4;
				border-radius: 52rpx;
				font-size: 30rpx !important;
				box-sizing: border-box;
				padding: 30rpx 48rpx !important;
				margin: 26rpx 0;
			}
			.pwd_icon {
				width: 40rpx;
				height: 40rpx;
			}
			.code {
				font-size: 30rpx;
				color: #506dff;
			}
		}
		.text {
			font-size: 24rpx;
			color: #9c9c9c;
		}
		.read {
			color: #2a63f3;
		}
		.button {
			width: 100%;
			height: 96rpx;
			background-color: #506dff;
			border-radius: 50rpx;
			box-shadow: 0 4rpx 28rpx 0 rgba(132,123,255,0.4);
			font-size: 40rpx;
			color: #fff;
			margin: 40rpx 0 36rpx;
		}
		.bottom {
			width: 100%;
			.text_style1 {
				font-size: 24rpx;
				color: #555;
			}
			.text_style2 {
				font-size: 24rpx;
				color: #506dff;
			}
		}
		
	}
</style>