|
|
@@ -1,199 +1,202 @@
|
|
|
<template>
|
|
|
<view class="app">
|
|
|
<view class="top-view">
|
|
|
- <image class="bg" src="/static/img/login-bg.png"></image>
|
|
|
+ <image class="bg" src="/static/img/login-bg.png" mode="widthFix"></image>
|
|
|
<view class="inner">
|
|
|
<view class="statusBar" :style="'height:' + statusBarHeight + 'px'"></view>
|
|
|
- <view class="inner-body fx-h fx-bc fx-ac">
|
|
|
- <view class="prv" @tap="utils.navigateBack()">
|
|
|
+ <view class="inner-body">
|
|
|
+ <view class="prv" @tap="navigateBack()">
|
|
|
<image src="/static/img/ic_back_white.png" class="icon-back"></image>
|
|
|
</view>
|
|
|
- <view class="logo">
|
|
|
- <image src="/static/img/cbb_white.png"></image>
|
|
|
- </view>
|
|
|
- <view class="label-text">忘记密码</view>
|
|
|
+ <image class="logoImage" src="/static/img/cbb_white.png"></image>
|
|
|
+ <text class="label-text">忘记密码</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="body">
|
|
|
- <view class="h120"></view>
|
|
|
<view class="input-view">
|
|
|
- <view class="login-input fx-r">
|
|
|
- <view class="left fx-r fx-bc ">
|
|
|
- <view class="label">+86</view>
|
|
|
- <image class="loginv" src="/static/img/login-v.png"></image>
|
|
|
- </view>
|
|
|
- <input type="number" v-model="form.mobile" placeholder="请输入手机号" />
|
|
|
+ <text class="input-view-title">账号</text>
|
|
|
+ <view class="login-input">
|
|
|
+ <input class="input" placeholder-class="login-input-text" type="number" v-model="form.mobile"
|
|
|
+ placeholder="请输入手机号" />
|
|
|
</view>
|
|
|
-
|
|
|
-
|
|
|
- <view class="login-input yzm fx-r fx-bc">
|
|
|
- <view class="left fx-h fx-ac">
|
|
|
- <image class="icon" style="margin-left: 20rpx;" src="/static/img/login-password.png"></image>
|
|
|
- </view>
|
|
|
- <input type="text" v-model="form.verify" placeholder="请输入验证码" />
|
|
|
+
|
|
|
+ <text class="input-view-title">验证码</text>
|
|
|
+ <view class="login-input yzm">
|
|
|
+
|
|
|
+ <input class="input" placeholder-class="login-input-text" type="text" v-model="form.verify"
|
|
|
+ placeholder="请输入验证码" />
|
|
|
<view class="line"></view>
|
|
|
- <view v-if="verifyCount <= 0" class="sbtn" @tap="getVcode">验证码</view>
|
|
|
- <view v-else class="no-sbtn">{{ verifyCount }} S</view>
|
|
|
+ <text v-if="verifyCount <= 0" class="sbtn" @tap="getVcode">验证码</text>
|
|
|
+ <text v-else class="no-sbtn">{{ verifyCount }} S</text>
|
|
|
</view>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- <view class="login-input pass fx-r fx-bc">
|
|
|
- <view class="left fx-h fx-ac">
|
|
|
- <image class="icon" style="margin-left: 20rpx;" src="/static/img/login-password.png"></image>
|
|
|
+ <text class="input-view-title">密码</text>
|
|
|
+
|
|
|
+
|
|
|
+ <view class="login-input pass">
|
|
|
+ <input class="input" placeholder-class="login-input-text" type="text" v-model="form.password"
|
|
|
+ password="*" placeholder="请输入密码" />
|
|
|
+ <view class="easeBox" @tap="showPass = !showPass">
|
|
|
+ <image class="ease" :src="showPass ? '/static/img/ease-open.png' : '/static/img/ease-out.png' ">
|
|
|
+ </image>
|
|
|
</view>
|
|
|
- <input type="text" v-model="form.password" password="*" placeholder="请输入密码" />
|
|
|
- <view class="fx-g1"></view>
|
|
|
- <image @tap="showPass = !showPass" :src="showPass ? '/static/img/mis_pass.png' : '/static/img/ck_pass.png' " class="miss-pass"></image>
|
|
|
</view>
|
|
|
-
|
|
|
-
|
|
|
- <view class="btn ihover" @tap="tapSubmit">确认修改</view>
|
|
|
+
|
|
|
+
|
|
|
+ <text class="btn" @tap="tapSubmit">确认修改</text>
|
|
|
<view id="captcha"></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
</view>
|
|
|
</template>
|
|
|
<style lang="scss">
|
|
|
- page{background: #fff;}
|
|
|
- .top-view{
|
|
|
- position: relative;
|
|
|
- width: 100vw;
|
|
|
- height: 62vw;
|
|
|
- .bg{width: 100vw;height: 62vw;}
|
|
|
- .inner{
|
|
|
- position: absolute;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- .inner-body{
|
|
|
- position:relative;
|
|
|
- .prv{
|
|
|
+ .app {
|
|
|
+ background-color: #FFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .top-view {
|
|
|
+ width: 750rpx;
|
|
|
+ height: 843rpx;
|
|
|
+
|
|
|
+ .bg {
|
|
|
+ width: 750rpx;
|
|
|
+ height: 843rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .inner {
|
|
|
+ margin-top: -843rpx;
|
|
|
+ width: 750rpx;
|
|
|
+ height: 435rpx;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .inner-body {
|
|
|
+ width: 750rpx;
|
|
|
+ align-items: center;
|
|
|
+ padding-top: 80rpx;
|
|
|
+
|
|
|
+ .prv {
|
|
|
position: absolute;
|
|
|
left: 20rpx;
|
|
|
top: 20rpx;
|
|
|
- .icon-back{
|
|
|
+
|
|
|
+ .icon-back {
|
|
|
width: 60rpx;
|
|
|
height: 60rpx;
|
|
|
}
|
|
|
}
|
|
|
- .logo{
|
|
|
- width: 200rpx;
|
|
|
- height: 119rpx;
|
|
|
- margin-bottom: 40rpx;
|
|
|
- margin-top: 60rpx;
|
|
|
- image{width: 100%;height: 100%;}
|
|
|
+
|
|
|
+ .logoImage {
|
|
|
+ width: 228rpx;
|
|
|
+ height: 228rpx;
|
|
|
}
|
|
|
- .label-text{
|
|
|
+
|
|
|
+ .label-text {
|
|
|
+ padding-top: 20rpx;
|
|
|
font-size: 42rpx;
|
|
|
color: #FFFFFF;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .body{
|
|
|
+
|
|
|
+ .body {
|
|
|
position: relative;
|
|
|
background: #fff;
|
|
|
- border-radius: 80rpx 80rpx 0px 0px;
|
|
|
- top: -120rpx;
|
|
|
+ border-radius: 60rpx 60rpx 0px 0px;
|
|
|
z-index: 9;
|
|
|
- height: 500px;
|
|
|
- .h120{height: 100rpx;}
|
|
|
-
|
|
|
- .input-view{
|
|
|
- padding: 0px 60rpx;
|
|
|
- .login-input{
|
|
|
- border-radius: 70rpx;
|
|
|
- border: 1px solid #E0E0E0;
|
|
|
- padding: 30rpx 46rpx;
|
|
|
- margin-bottom: 50rpx;
|
|
|
- .left{
|
|
|
- .label{
|
|
|
- font-size: 28rpx;
|
|
|
- color: #DB292B;
|
|
|
- font-weight: bold;
|
|
|
+ margin: -390rpx 30rpx 0;
|
|
|
+ padding: 0 60rpx 60rpx;
|
|
|
+
|
|
|
+ .input-view {
|
|
|
+ .input-view-title {
|
|
|
+ padding-top: 55rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #191919;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-input {
|
|
|
+ border-radius: 30rpx;
|
|
|
+ padding: 30rpx 30rpx;
|
|
|
+ margin-top: 26rpx;
|
|
|
+ background-color: rgba(246, 249, 254, 1);
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: stretch;
|
|
|
+
|
|
|
+ .easeBox {
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .ease {
|
|
|
+ width: 30rpx;
|
|
|
+ height: 22rpx;
|
|
|
}
|
|
|
- .loginv{width: 15rpx;height: 12rpx;margin-left: 14rpx;}
|
|
|
- .icon{width: 30rpx;height: 33rpx;}
|
|
|
- width: 90rpx;
|
|
|
}
|
|
|
- input{
|
|
|
- width: calc(100% - 90rpx);
|
|
|
- }
|
|
|
-
|
|
|
- &.yzm{
|
|
|
- input{
|
|
|
- width: calc(100% - 90rpx - 22rpx - 80rpx);
|
|
|
+
|
|
|
+ .input {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 30rpx;
|
|
|
+
|
|
|
+ .login-input-text {
|
|
|
+ color: rgba(201, 204, 211, 1);
|
|
|
}
|
|
|
- .line{
|
|
|
+ }
|
|
|
+
|
|
|
+ &.yzm {
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .line {
|
|
|
width: 1px;
|
|
|
height: 36rpx;
|
|
|
background: #eee;
|
|
|
margin-right: 20rpx;
|
|
|
}
|
|
|
- .sbtn{
|
|
|
+
|
|
|
+ .sbtn {
|
|
|
font-size: 12px;
|
|
|
color: #DB292B;
|
|
|
}
|
|
|
- .no-sbtn{
|
|
|
+
|
|
|
+ .no-sbtn {
|
|
|
font-size: 12px;
|
|
|
color: #999999;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
- &.pass{
|
|
|
- input{
|
|
|
- width: calc(100% - 180rpx);
|
|
|
- }
|
|
|
- .miss-pass{width: 60rpx;height: 60rpx}
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .btn{
|
|
|
- background: #DB292B;
|
|
|
- border-radius: 60rpx;
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ background-image: linear-gradient(88deg, #FF332C, #ff6030);
|
|
|
+ border-radius: 24rpx;
|
|
|
text-align: center;
|
|
|
font-weight: bold;
|
|
|
font-size: 28rpx;
|
|
|
padding: 30rpx 0;
|
|
|
color: #FAFAFA;
|
|
|
+ margin-top: 30rpx;
|
|
|
}
|
|
|
-
|
|
|
- .agament{
|
|
|
- margin-top: 40rpx;
|
|
|
- image{width: 36rpx;height: 36rpx;margin-right: 20rpx;}
|
|
|
- color: #999999;
|
|
|
- font-size:24rpx;
|
|
|
- text{color: #DB292B;}
|
|
|
- }
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
- .miss-pass{width: 30px;height: 30px;}
|
|
|
- .mb-view{font-size: 14px; margin-top: 30px;padding: 0px 5px;}
|
|
|
- .mb-view .link{color: #DB292B;}
|
|
|
-
|
|
|
</style>
|
|
|
|
|
|
<script>
|
|
|
import maoScroll from '@/components/mao-scroll/mao-scroll.vue';
|
|
|
import customerWiget from '@/components/ui-public/customer-wiget.vue';
|
|
|
- import { mapState, mapMutations } from 'vuex';
|
|
|
+ import Request from '@/library/Request';
|
|
|
+ import utils from "@/library/utils/Comm.js"
|
|
|
+ import {
|
|
|
+ mapState,
|
|
|
+ mapMutations
|
|
|
+ } from 'vuex';
|
|
|
export default {
|
|
|
components: {
|
|
|
maoScroll,
|
|
|
customerWiget
|
|
|
},
|
|
|
computed: {
|
|
|
- getWebSocket(){
|
|
|
+ getWebSocket() {
|
|
|
// #ifdef APP-PLUS
|
|
|
const webSocket = getApp().globalData.webSocket
|
|
|
// #endif
|
|
|
@@ -206,118 +209,127 @@
|
|
|
data() {
|
|
|
return {
|
|
|
statusBarHeight: 20,
|
|
|
- form:{
|
|
|
- mobile : "",
|
|
|
- password : "",
|
|
|
- verify : ""
|
|
|
+ form: {
|
|
|
+ mobile: "",
|
|
|
+ password: "",
|
|
|
+ verify: ""
|
|
|
},
|
|
|
- isRead : false,
|
|
|
- verifyCount : 0,
|
|
|
- showPass : false,
|
|
|
- captchaIns : null,
|
|
|
- validate : ""
|
|
|
+ isRead: false,
|
|
|
+ verifyCount: 0,
|
|
|
+ showPass: false,
|
|
|
+ captchaIns: null,
|
|
|
+ validate: ""
|
|
|
}
|
|
|
},
|
|
|
onLoad() {
|
|
|
this.initView();
|
|
|
- this.$nextTick(()=>{
|
|
|
+ this.$nextTick(() => {
|
|
|
this.initNeCaptcha();
|
|
|
});
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
methods: {
|
|
|
- ...mapMutations(['setSys','setUser']),
|
|
|
+ ...mapMutations(['setSys', 'setUser']),
|
|
|
+ navigateBack() {
|
|
|
+ utils.navigateBack()
|
|
|
+ },
|
|
|
initView: function() {
|
|
|
-
|
|
|
+
|
|
|
uni.getSystemInfo({
|
|
|
success: (res) => {
|
|
|
this.statusBarHeight = res.statusBarHeight;
|
|
|
}
|
|
|
- });
|
|
|
-
|
|
|
+ });
|
|
|
+
|
|
|
},
|
|
|
- initNeCaptcha () {
|
|
|
+ initNeCaptcha() {
|
|
|
// #ifdef H5
|
|
|
- const options = {
|
|
|
- captchaId: 'c6af8490405544f8a169504b11c86fdc',
|
|
|
- element: '#captcha',
|
|
|
- protocol: 'https',
|
|
|
- onVerify: (err, data) => {
|
|
|
- if(data != null || data != "") {
|
|
|
- this.validate = data.validate;
|
|
|
- this.getVcode2();
|
|
|
- }
|
|
|
+ const options = {
|
|
|
+ captchaId: 'c6af8490405544f8a169504b11c86fdc',
|
|
|
+ element: '#captcha',
|
|
|
+ protocol: 'https',
|
|
|
+ onVerify: (err, data) => {
|
|
|
+ if (data != null || data != "") {
|
|
|
+ this.validate = data.validate;
|
|
|
+ this.getVcode2();
|
|
|
}
|
|
|
}
|
|
|
- options.mode = 'popup';
|
|
|
- initNECaptcha({ ...options }, ins => {
|
|
|
- this.captchaIns = ins
|
|
|
- })
|
|
|
+ }
|
|
|
+ options.mode = 'popup';
|
|
|
+ initNECaptcha({
|
|
|
+ ...options
|
|
|
+ }, ins => {
|
|
|
+ this.captchaIns = ins
|
|
|
+ })
|
|
|
// #endif
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
// #ifdef APP
|
|
|
- this.captchaIns = uni.requireNativePlugin('YD-Captcha')
|
|
|
- this.captchaIns.init({
|
|
|
- captcha_id: 'c6af8490405544f8a169504b11c86fdc',
|
|
|
- is_no_sense_mode: false
|
|
|
- });
|
|
|
+ this.captchaIns = uni.requireNativePlugin('YD-Captcha')
|
|
|
+ this.captchaIns.init({
|
|
|
+ captcha_id: 'c6af8490405544f8a169504b11c86fdc',
|
|
|
+ is_no_sense_mode: false
|
|
|
+ });
|
|
|
// #endif
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
/**
|
|
|
* 注册
|
|
|
*/
|
|
|
- tapReg:function(){
|
|
|
- uni.navigateTo({ url:"./register" });
|
|
|
+ tapReg: function() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "./register"
|
|
|
+ });
|
|
|
},
|
|
|
-
|
|
|
- getVcode:function(){
|
|
|
+
|
|
|
+ getVcode: function() {
|
|
|
if (this.verifyCount > 0) return;
|
|
|
- if (!this.utils.isPoneAvailable(this.form.mobile)) {
|
|
|
+ if (!utils.isPoneAvailable(this.form.mobile)) {
|
|
|
return uni.showToast({
|
|
|
title: '请输入正确的手机号码！',
|
|
|
mask: true,
|
|
|
icon: 'none'
|
|
|
});
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
// #ifdef H5
|
|
|
- this.captchaIns.popUp();
|
|
|
+ this.captchaIns.popUp();
|
|
|
// #endif
|
|
|
-
|
|
|
+
|
|
|
// #ifdef APP
|
|
|
- this.captchaIns.showCaptcha((data)=>{
|
|
|
+ this.captchaIns.showCaptcha((data) => {
|
|
|
var method = data.method;
|
|
|
- if(method == "onSuccess"){
|
|
|
+ if (method == "onSuccess") {
|
|
|
var data = data.data;
|
|
|
this.validate = data.validate;
|
|
|
this.getVcode2();
|
|
|
}
|
|
|
})
|
|
|
// #endif
|
|
|
-
|
|
|
+
|
|
|
},
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
getVcode2: function() {
|
|
|
uni.showLoading({
|
|
|
title: "获取中..."
|
|
|
});
|
|
|
- this
|
|
|
- .request
|
|
|
- .post("findYzm", { mobile: this.form.mobile,validate : this.validate})
|
|
|
+ Request
|
|
|
+ .post("findYzm", {
|
|
|
+ mobile: this.form.mobile,
|
|
|
+ validate: this.validate
|
|
|
+ })
|
|
|
.then(res => {
|
|
|
uni.hideLoading();
|
|
|
if (res.code == 200) {
|
|
|
if (res.data.status == 2) {
|
|
|
- this.utils.CountDowm(res.data.time, (e, s) => {
|
|
|
+ utils.CountDowm(res.data.time, (e, s) => {
|
|
|
this.verifyCount = e;
|
|
|
});
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
if (res.data.status == 1) {
|
|
|
- this.utils.CountDowm(120, (e, s) => {
|
|
|
+ utils.CountDowm(120, (e, s) => {
|
|
|
this.verifyCount = e;
|
|
|
});
|
|
|
}
|
|
|
@@ -338,28 +350,32 @@
|
|
|
uni.hideLoading();
|
|
|
});
|
|
|
},
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
/**
|
|
|
* 提交数据
|
|
|
*/
|
|
|
- tapSubmit:function(){
|
|
|
+ tapSubmit: function() {
|
|
|
//手机号码
|
|
|
- if(this.form.mobile == ""){
|
|
|
+ if (this.form.mobile == "") {
|
|
|
uni.showToast({
|
|
|
- title:"请输入手机号码",icon:"none",mask:true
|
|
|
+ title: "请输入手机号码",
|
|
|
+ icon: "none",
|
|
|
+ mask: true
|
|
|
})
|
|
|
return;
|
|
|
}
|
|
|
//手机验证号码
|
|
|
//this.form.mobile
|
|
|
- if(!this.utils.isPoneAvailable(this.form.mobile) ){
|
|
|
+ if (!utils.isPoneAvailable(this.form.mobile)) {
|
|
|
uni.showToast({
|
|
|
- title:"请输入正确的手机号码",icon:"none",mask:true
|
|
|
+ title: "请输入正确的手机号码",
|
|
|
+ icon: "none",
|
|
|
+ mask: true
|
|
|
})
|
|
|
return;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
if (this.form.password == '') {
|
|
|
uni.showToast({
|
|
|
title: '请输入密码',
|
|
|
@@ -368,30 +384,40 @@
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
- uni.showLoading({ title: '登录中..' });
|
|
|
- this.request
|
|
|
- .post("findPassword",this.form)
|
|
|
- .then(res=>{
|
|
|
- uni.hideLoading();
|
|
|
- if(res.code == 200) {
|
|
|
- this.setUser(res.data);
|
|
|
- this.getWebSocket.connect();
|
|
|
- uni.reLaunch({ url:"../index/index"});
|
|
|
- } else {
|
|
|
- uni.showToast({ title:res.msg,icon:"none",mask:true});
|
|
|
- }
|
|
|
- })
|
|
|
- .catch(res=>{
|
|
|
- uni.hideLoading();
|
|
|
- uni.showModal({title: '系统提示',content: '加载失败，重新点击尝试！',showCancel: false});
|
|
|
+
|
|
|
+
|
|
|
+ uni.showLoading({
|
|
|
+ title: '登录中..'
|
|
|
});
|
|
|
-
|
|
|
+ Request
|
|
|
+ .post("findPassword", this.form)
|
|
|
+ .then(res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.setUser(res.data);
|
|
|
+ this.getWebSocket.connect();
|
|
|
+ uni.reLaunch({
|
|
|
+ url: "../index/index"
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: res.msg,
|
|
|
+ icon: "none",
|
|
|
+ mask: true
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ uni.showModal({
|
|
|
+ title: '系统提示',
|
|
|
+ content: '加载失败，重新点击尝试！',
|
|
|
+ showCancel: false
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
-</script>
|
|
|
-
|
|
|
-
|
|
|
+</script>
|
