Ropeskipping/pages/Login/Retrieve.vue

<template>
	<view>
		<swiper class="screen-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
		 :autoplay="true" interval="3000" duration="500">
			<swiper-item v-for="(item,index) in swiperList" :key="index">
				<img class="img" :src="item.url" mode="aspectFill" v-if="item.type=='img'"></img>
			</swiper-item>
		</swiper>
		<view class="title">
			找回密码
		</view>
		<view class="ipt-infor">
			<view class="ipt-username">
				<text>手机号：</text><input type="text" v-model.trim="username" placeholder="请输入"/>
			</view>
			<view class="ipt-username">
				<text>验证码：</text><input type="text" v-model.trim="code" placeholder="请输入"/>
				<button type="default" class="btn-code" :class="cooling? 'active' : ''" @click="get">{{ content }}</button>
			</view>
			<view class="ipt-password">
				<text>新密码：</text><input type="password" v-model.trim="password" placeholder="请输入"/>
			</view>
		</view>
		<view class="img-box" v-show="imgbox">
			<image :src="imgsrc" mode=""></image>
			<input type="text" placeholder="请输入验证码" v-model.trim="codeinput"/>
			<view class="btn-box">
				<button type="default" @click="imgbox = false">关闭</button>
				<button type="default" class="success" @click="submit">确定</button>				
			</view>
		</view>
		<button type="default" class="btn cu-btn bg-green margin-tb-sm lg" @click="register">确定修改</button>
		<view class="go-register" @click="jump">登录</view>
	</view>
</template>

<script>
import { password } from 'api/password'
import { getbase } from 'api/getbase'
import { getcode } from 'api/getcode'
	export default {
		data() {
			return {
				username:'',
				password:'',
				code: '',
				cooling: true,
				content: '获取验证码',
				imgbox: false,
				imgsrc: '',
				codeId: '',
				codeinput: '',
				dotStyle: true,
				swiperList: [{
					id: 0,
					type: 'img',
					url: 'static/item00.png'
				}, {
				// 	id: 0,
				// 	type: 'img',
				// 	url: 'static/title.png'
				// }, {
					id: 1,
					type: 'img',
					url: 'static/item01.png',
				}, {
					id: 2,
					type: 'img',
					url: 'static/item02.png'
				},{
					id: 3,
					type: 'img',
					url: 'static/item04.jpg'
				},]
			}
		},
		methods: {
			jump() {
				uni.navigateTo({
					url:`./Login`
				})
			},
			async get() {
				const that = this
				const params = {
					
				}
				const data = await getbase(params)
				// console.log(data)
				that.imgsrc = data.imageBase64
				that.codeId = data.verificationCodeId
				that.imgbox = true

			},
			async register() {
				const that = this
				try{
					const params = {
						phone: that.username,
						password: that.password,
						code: that.code
					}
					const data = await password(params)
					// console.log(data)
					if (!data || !data.token) {
						uni.showToast({
							title: '修改成功',
							icon: 'success',
							duration: 1500
						})
					}
				}catch(e){
					//TODO handle the exception
					if (e === 'error') {
						uni.showToast({
							title: '提交失败',
							icon: 'none',
							duration: 1500
						})
					} else {
						uni.showToast({
							title: e,
							icon: 'none',
							duration: 1500
						})
					}
				}
			},
			async submit() {
				const that = this
				try{
					const params = {
						params: {
							phone: that.username,
							verificationCodeId: that.codeId,
							verificationCodeValue: that.codeinput
						}
					}
					const data = await getcode(params)
					// console.log(data)
					if (data.expiredInSeconds) {
						that.imgbox = false
						uni.showToast({
							title: '正在获取',
							icon: 'success',
							duration: 3000
						})
						if (that.cooling) {
							that.cooling = false
							var a = 60
							that.content = a + 's'
							var aaa = setInterval(function () {
								a -= 1
								that.content = a + 's'
								if (a - 0 === 0) {
									that.cooling = true
									that.content = '获取验证码'
									clearInterval(aaa)
								}
							},1000)
						}
					}
				}catch(e){
					//TODO handle the exception
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		font-size: 20px;
		width: 200rpx;
		height: 30px;
		line-height: 30px;
		margin-top: 30px;
		border-bottom: 2px solid $blue;
		margin-left: 275rpx;
		text-align: center;
	}
	.ipt-infor {
		margin-left: 50rpx;
		width: 650rpx;
		margin-top: 50px;
		view{
			padding-left: 50rpx;
		}
	}
	.ipt-username {
		position: relative;
		height: 60px;
		line-height: 60px;
		border-bottom: 1px solid $grey;
		
		input {
			position: absolute;
			top: 20px;
			left: 90px;
			font-size: 14px;
		}
	}
	.ipt-password {
		position: relative;
		height: 60px;
		line-height: 60px;
		border-bottom: 1px solid $grey;
		
		input {
			position: absolute;
			top: 20px;
			left: 90px;
			height: 20px;
			line-height: 20px;
			font-size: 14px;
		}
	}
	.btn {
		width: 650rpx;
		margin-left: 50rpx;
		background: $blue;
		color: $white;
		margin-top: 50px;
	}
	.go-register {
		color: $blue;
		position: absolute;
		right: 50rpx;
		margin-top: 20px;
	}

	.btn-code {
		width: 100px;
		height: 30px;
		line-height: 30px;
		font-size: 12px;
		position: absolute;
		right: 0;
		top: 15px;
	}
	.active {
		background: $green;
		color: $white;
	}
	.img-box {
		height: 650rpx;
		width: 650rpx;
		background: white;
		border: 1px solid $gray;
		border-radius: 10px;
		position: fixed;
		padding: 25rpx;
		top: 0;
		left: 50rpx;
		margin-top: 45%;
		z-index: 1;
		image {
			width: 500rpx;
			height: 390rpx;
			margin-left: 50rpx;
			background-color: red;
		}
		input {
			border: 1px solid $blue;
			width: 500rpx;
			margin-left: 50rpx;
			margin-top: 40rpx;
			height: 80rpx;
			font-size: 18px;
			padding-left: 5%;
			border-radius: 10px;
		}
	}
	.btn-box {
		display: flex;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 80rpx;
		button {
			// flex: 1;
			width: 40%;
			height: 80rpx;
			line-height: 80rpx;
		}
		.success {
			background: $green;
			color: $white;
		}
	}
	.img {
		width: 750rpx;
		top: 0;
		height: 100%;
		z-index: 1000;
	}
</style>