huayuanxi-c/src/packages/login/password.vue

<template>
	<view class="register-box">
		<Navbar title='注册'></Navbar>
		<image class="logo" :src="static ? static + 'logo.png' : ''" mode="heightFix"></image>
		<view class="tip">设置密码</view>
		<viow class="sub-tip">欢迎注册账号</viow>
		<view class="phone-box input-box">
			<IconText :code="`\ue898`" color="#999" size="14"></IconText>
			<uni-easyinput type="password" :inputBorder="false" v-model="password" placeholder="输入密码"></uni-easyinput>
		</view>
		<view class="password-box input-box">
			<IconText :code="`\ue898`" color="#999" size="14"></IconText>
			<uni-easyinput type="password" :inputBorder="false" v-model="repassword" placeholder="再次输入密码">
			</uni-easyinput>
		</view>
		<view class="btn">
			密码支持6-16位数字与字母的组合
		</view>
		<view class="register-btn" @click="handleRegister">注册</view>
		<!-- #ifndef H5 -->
		<!-- <view class="agree">
			注册登录即表示接受<text @click="handleAgree"> 《用户协议》</text>
		</view> -->
		<!-- #endif -->
		<uni-popup ref="agreement" :safe-area="false">
			<scroll-view class="agreement-box" :scroll-y="true">
				<view class="title">{{ agreement.title }}</view>
				<view class="content-styl" v-html="agreement.content"></view>
			</scroll-view>
		</uni-popup>
	</view>
</template>

<script lang="ts">
	import {
		Component,
		Prop,
		Vue
	} from 'vue-property-decorator';
	import {
		OSS_STATIC
	} from '@/common/constants';
	import agreement from './agreement';
	import pubKey from './pubKey';
	import {
		types
	} from '@/common/store/index';
	// @ts-ignore
	import JSEncrypt from '@/common/jsencrypt.js';
	import {
		namespace
	} from 'vuex-class';
	const baseModule = namespace('base');
	@Component({})
	export default class Password extends Vue {
		@baseModule.Getter('_referrerId') referrerId: any;
		@baseModule.Mutation(types.SET_TOKEN) setToken: any;
		link: string = '';
		static: string = OSS_STATIC;
		password: any = null;
		repassword: any = null;
		agreement: {
			title: string;content: string
		} = agreement;
		handleAgree() {
			(this.$refs.agreement as any).open('bottom');
		}
		handleRegister() {
			if (!this.repassword || !this.password) {
				uni.showToast({
					title: '请输入密码',
					icon: 'none'
				})
				return;
			}
			if (this.password !== this.repassword) {
				uni.showToast({
					title: '您输入的密码不一致',
					icon: 'none'
				})
				return;
			}
			// uni.showLoading({
			// 	title: '加载中',
			// });
			let pass = this.rsa(this.password);
			this.$http
				.post({
					url: this.$api.register,
					data: {
						auth: {
							sid: 0,
							agent: 1,
							genre: 0,
							way: 2,
							env: 0,
							identity: this.$Route.query.phone,
							password: pass,
							sys: 0
						},
						// timeStamp: time,
						third: {
							smsToken: this.$Route.query.token,
							referrer: +uni.getStorageSync('referrerId') || 0,
						}
					},
				})
				.then((res: any) => {
					// uni.hideLoading();
					this.setToken(res.token);
					uni.setStorageSync('referrerId', '');
					// #ifdef H5
					this.$Router.replace({
						path: '/packages/login/register-success',
						query: {
							phone: this.$Route.query.phone
						}
					})
					// #endif
					// #ifndef H5
					// this.$Router.back(1);
					this.$Router.pushTab({
						path: '/pages/front/front'
					})
					// #endif
				}, (err: any) => {
					// uni.hideLoading();
					console.log(err);
				});
		}
		rsa(pass: string) {
			console.log('加密前', pass)
			var encryptor = new JSEncrypt() // 创建加密对象实例
			encryptor.setPublicKey(pubKey) //设置公钥
			return encryptor.encrypt(pass) || '加密失败'

		}
	}
</script>
<style>
	.uni-easyinput__content {
		background: transparent !important;
	}
</style>
<style lang="scss" scoped>
	.register-box {
		// padding: 0 vw(24);
		@include flex-y(flex-start, center);
		background: #fff;
		min-height: 100vh;
		box-sizing: border-box;

		.logo {
			// width: vw(90);
			height: vw(72);
			border-radius: vw(45);
			margin-top: vw(36);
		}
		
		.tip {
			margin-top: vw(10);
			@include word-vw(30, #333);
		}
		
		.sub-tip {
			margin-top: vw(6);
			@include word-vw(14, #999);
		}

		.input-box {
			height: vw(52);
			width: vw(335);
			background: #F5F5F5;
			border-radius: vw(10);
			margin-top: vw(16);
			@include flex-x(flex-start);
			padding: 0 vw(24);
			box-sizing: border-box;

			.uni-easyinput__content {
				background: #F5F5F5;
			}

			.code-btn {
				@include word-vw(14, $btn-color);
			}
		}

		.phone-box {
			margin-top: 25%;
		}

		.btn {
			margin-top: vw(18);
			@include word-vw(14, #999);
			margin-right: vw(24);
		}

		.register-btn {
			height: vw(48);
			width: vw(335);
			background: $btn-color;
			border-radius: vw(10);
			@include word-vw(18, #fff);
			@include flex-x(center);
			margin-top: vw(32);
		}

		.agree {
			// width: 100%;
			@include word-vw(14, #666);
			margin-top: vw(25);
			text-align: center;
			position: absolute;
			bottom: vw(36);

			text {
				color: #E6644E;
			}
		}

		//用户协议
		.agreement-box {
			overflow: hidden;
			// overflow-y: auto;
			height: vw(480);
			background: #fff;
			border-top-left-radius: vw(5);
			border-top-right-radius: vw(5);
			padding-bottom: vw(30);
			box-sizing: border-box;

			.title {
				margin: vw(24) 0 vw(30);
				text-align: center;
				@include word-vw(16, $gray3);
			}

			.content-styl {
				@include word-vw(14, $gray6);
				line-height: vw(24);
				padding: 0 vw(15);
			}
		}
	}
</style>