|
@@ -1,253 +0,0 @@
|
|
|
-<template>
|
|
|
- <view class="container">
|
|
|
- <view class="wrapper">
|
|
|
- <view class="left-top-sign">LOGIN</view>
|
|
|
- <view class="welcome">
|
|
|
- 欢迎回来!
|
|
|
- </view>
|
|
|
- <!-- v-if="loginType === 'phone'" -->
|
|
|
- <view class="input-content">
|
|
|
- <view class="cu-form-group">
|
|
|
- <view class="title"><text class="cuIcon-my"></text></view>
|
|
|
- <input placeholder="请输入手机号" v-model="phone" name="input" ></input>
|
|
|
- </view>
|
|
|
- <view class="cu-form-group">
|
|
|
- <view class="title"><text class="cuIcon-my"></text></view>
|
|
|
- <input placeholder="请输入新密码" password v-model="password" name="input" ></input>
|
|
|
- </view>
|
|
|
- <!-- <view class="input-item">
|
|
|
- <text class="tit">验证码</text>
|
|
|
- <view class="verify-code">
|
|
|
- <input type="mobile" value="" placeholder="6位验证码" maxlength="6"
|
|
|
- data-key="verifyCode" @input="inputChange" style="width: 60%;" />
|
|
|
- <button class="cu-btn bg-green shadow" :disabled="sendDisabled" @click="doGetVerify">{{sendText}}</button>
|
|
|
- </view>
|
|
|
- </view> -->
|
|
|
- <view class="cu-form-group">
|
|
|
- <view class="title">验证码</view>
|
|
|
- <input type="mobile" value="" placeholder="6位验证码" maxlength="6"
|
|
|
- data-key="verifyCode" @input="inputChange" style="width: 60%;"></input>
|
|
|
- <button class='cu-btn bg-green shadow':disabled="sendDisabled" @click="doGetVerify">{{sendText}}</button>
|
|
|
- </view>
|
|
|
- <button style='width:100%;' @click='reset' class="cu-btn bg-gradual-green">重置密码</button>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- verifyCode:'',
|
|
|
- sendText:'获取验证码',
|
|
|
- sendDisabled: false,
|
|
|
- phone:'',
|
|
|
- password:''
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- },
|
|
|
- onShow() {
|
|
|
- },
|
|
|
- onLoad() {
|
|
|
- },
|
|
|
- onReady(){
|
|
|
-
|
|
|
- },
|
|
|
- methods: {
|
|
|
- inputChange(e) {
|
|
|
- const key = e.currentTarget.dataset.key;
|
|
|
- this[key] = e.detail.value;
|
|
|
- },
|
|
|
- reset(){
|
|
|
- var that=this
|
|
|
- if (!this.phone || this.phone.length != 11) {
|
|
|
- uni.showToast({
|
|
|
- title:'请输入正确手机号!',
|
|
|
- icon:'none'
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
- if (!this.password) {
|
|
|
- uni.showToast({
|
|
|
- title:'请输入密码!',
|
|
|
- icon:'none'
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
- if (!this.verifyCode) {
|
|
|
- uni.showToast({
|
|
|
- title:'请输入验证码!',
|
|
|
- icon:'none'
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
- uni.showLoading({
|
|
|
- title: '加载中'
|
|
|
- })
|
|
|
- this.$api.request('user', 'resetPassword',{
|
|
|
- password:that.password,
|
|
|
- phone:that.phone,
|
|
|
- verifyCode:that.verifyCode
|
|
|
- }, failres => {
|
|
|
- that.$api.msg(failres.errmsg)
|
|
|
- uni.hideLoading()
|
|
|
- }).then(res => {
|
|
|
- uni.hideLoading()
|
|
|
- uni.navigateBack()
|
|
|
- })
|
|
|
- },
|
|
|
- verifyCodeInput(e){
|
|
|
- this.verifyCode = e.detail.value
|
|
|
- },
|
|
|
- doGetVerify() {
|
|
|
- const that = this
|
|
|
- var phone = this.phone;
|
|
|
- if (!phone || phone.length != 11) {
|
|
|
- uni.showToast({
|
|
|
- title:'请输入正确手机号!',
|
|
|
- icon:'none'
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
- that.$api.request('user', 'sendVerifyCode', {
|
|
|
- phone: phone,
|
|
|
- }).then(res => {
|
|
|
- that.sendDisabled = true
|
|
|
- let sec = 60
|
|
|
- let interval = setInterval(() => {
|
|
|
- sec--;
|
|
|
- that.sendText = sec + 's后重发'
|
|
|
- if (sec <= 0) {
|
|
|
- that.sendDisabled = false
|
|
|
- that.sendText = "获取验证码"
|
|
|
- clearInterval(interval)
|
|
|
- }
|
|
|
-
|
|
|
- }, 1000)
|
|
|
- })
|
|
|
- },
|
|
|
- },
|
|
|
- }
|
|
|
-
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang='scss' scoped>
|
|
|
- page {
|
|
|
- background: #fff;
|
|
|
- }
|
|
|
- .container {
|
|
|
- padding-top: 115px;
|
|
|
- position: relative;
|
|
|
- width: 100vw;
|
|
|
- height: 100vh;
|
|
|
- overflow: hidden;
|
|
|
- background: #fff;
|
|
|
- }
|
|
|
-
|
|
|
- .wrapper {
|
|
|
- position: relative;
|
|
|
- z-index: 90;
|
|
|
- background: #fff;
|
|
|
- padding-bottom: 40upx;
|
|
|
- height:100%;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- .left-top-sign {
|
|
|
- font-size: 120upx;
|
|
|
- color: $page-color-base;
|
|
|
- position: relative;
|
|
|
- left: -16upx;
|
|
|
- }
|
|
|
-
|
|
|
- .left-bottom-sign {
|
|
|
- position: absolute;
|
|
|
- left: -270upx;
|
|
|
- bottom: -320upx;
|
|
|
- border: 100upx solid #d0d1fd;
|
|
|
- border-radius: 50%;
|
|
|
- padding: 180upx;
|
|
|
- }
|
|
|
-
|
|
|
- .welcome {
|
|
|
- position: relative;
|
|
|
- left: 50upx;
|
|
|
- top: -90upx;
|
|
|
- font-size: 46upx;
|
|
|
- color: #555;
|
|
|
- text-shadow: 1px 0px 1px rgba(0, 0, 0, .3);
|
|
|
- }
|
|
|
-
|
|
|
- .input-content {
|
|
|
- padding: 0 60upx;
|
|
|
- }
|
|
|
-
|
|
|
- .input-item {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: flex-start;
|
|
|
- justify-content: center;
|
|
|
- padding: 0 30upx;
|
|
|
- background: $page-color-light;
|
|
|
- height: 120upx;
|
|
|
- border-radius: 4px;
|
|
|
- margin-bottom: 50upx;
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- margin-bottom: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .tit {
|
|
|
- height: 50upx;
|
|
|
- line-height: 56upx;
|
|
|
- font-size: $font-sm+2upx;
|
|
|
- color: $font-color-base;
|
|
|
- }
|
|
|
-
|
|
|
- input {
|
|
|
- height: 60upx;
|
|
|
- font-size: $font-base + 2upx;
|
|
|
- color: $font-color-dark;
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .confirm-btn {
|
|
|
- width: 630upx;
|
|
|
- height: 76upx;
|
|
|
- line-height: 76upx;
|
|
|
- border-radius: 50px;
|
|
|
- margin-top: 70upx;
|
|
|
- background: $uni-color-primary;
|
|
|
- color: #fff;
|
|
|
- font-size: $font-lg;
|
|
|
-
|
|
|
- &:after {
|
|
|
- border-radius: 100px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .forget-section {
|
|
|
- font-size: $font-sm+2upx;
|
|
|
- color: $font-color-spec;
|
|
|
- text-align: center;
|
|
|
- margin-top: 40upx;
|
|
|
- }
|
|
|
-
|
|
|
- .register-section {
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- bottom: 50upx;
|
|
|
- width: 100%;
|
|
|
- font-size: $font-sm+2upx;
|
|
|
- color: $font-color-base;
|
|
|
- text-align: center;
|
|
|
-
|
|
|
- text {
|
|
|
- color: $font-color-spec;
|
|
|
- margin-left: 10upx;
|
|
|
- }
|
|
|
- }
|
|
|
-</style>
|