|
|
@@ -1,277 +1,332 @@
|
|
|
<template>
|
|
|
- <view style="height: 100%;">
|
|
|
- <image mode="widthFix" src="/pages2/static/login_bg.jpg" class="full_img"></image>
|
|
|
- <u-navbar title="忘记密码" :border-bottom="false" background="{ background: '#ffffff',opacity:0.4; }" title-color="#ffffff" back-icon-color="#ffffff"></u-navbar>
|
|
|
- <view style="padding: 30rpx;">
|
|
|
- <view class="login_box">
|
|
|
- <u-form :model="form" ref="uForm" >
|
|
|
- <u-form-item prop="tel" ref="tel"><u-input v-model="form.tel" type="number" maxlength="11" placeholder-style="color:#999999" placeholder="手机号"/></u-form-item>
|
|
|
- <u-form-item prop="code">
|
|
|
- <u-input v-model="form.code" type="number" placeholder-style="color:#999999" placeholder="验证码"/>
|
|
|
- <u-button slot="right" size="mini" @click="getCode">{{codeTips}}</u-button>
|
|
|
- </u-form-item>
|
|
|
- <u-form-item prop="pwd"><u-input class="password" placeholder-style="color:#999999" v-model="form.pwd" type="password" placeholder="请输入新密码"/></u-form-item>
|
|
|
- <u-form-item prop="pwdAgain"><u-input class="password" placeholder-style="color:#999999" v-model="form.pwdAgain" type="password" placeholder="再次输入新密码"/></u-form-item>
|
|
|
- </u-form>
|
|
|
- </view>
|
|
|
-
|
|
|
- <button :disabled="isUse" class="loginBtn" :class="{able:canSubmit()}" @click="submit">
|
|
|
- 确定
|
|
|
- </button>
|
|
|
-
|
|
|
- </view>
|
|
|
- <u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
|
|
|
- </view>
|
|
|
+ <view style="height: 100%">
|
|
|
+ <image
|
|
|
+ mode="widthFix"
|
|
|
+ src="/pages2/static/login_bg.jpg"
|
|
|
+ class="full_img"
|
|
|
+ ></image>
|
|
|
+ <u-navbar
|
|
|
+ title="忘记密码"
|
|
|
+ :border-bottom="false"
|
|
|
+ background="{ background: '#ffffff',opacity:0.4; }"
|
|
|
+ title-color="#ffffff"
|
|
|
+ back-icon-color="#ffffff"
|
|
|
+ ></u-navbar>
|
|
|
+ <view style="padding: 30rpx">
|
|
|
+ <view class="login_box">
|
|
|
+ <u-form :model="form" ref="uForm">
|
|
|
+ <u-form-item prop="tel" ref="tel"
|
|
|
+ ><u-input
|
|
|
+ v-model="form.tel"
|
|
|
+ type="number"
|
|
|
+ maxlength="11"
|
|
|
+ placeholder-style="color:#999999"
|
|
|
+ placeholder="手机号"
|
|
|
+ /></u-form-item>
|
|
|
+ <u-form-item prop="code">
|
|
|
+ <u-input
|
|
|
+ v-model="form.code"
|
|
|
+ type="number"
|
|
|
+ placeholder-style="color:#999999"
|
|
|
+ placeholder="验证码"
|
|
|
+ />
|
|
|
+ <u-button slot="right" size="mini" @click="getCode">{{
|
|
|
+ codeTips
|
|
|
+ }}</u-button>
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item prop="pwd"
|
|
|
+ ><u-input
|
|
|
+ class="password"
|
|
|
+ placeholder-style="color:#999999"
|
|
|
+ v-model="form.pwd"
|
|
|
+ type="password"
|
|
|
+ placeholder="请输入新密码"
|
|
|
+ /></u-form-item>
|
|
|
+ <u-form-item prop="pwdAgain"
|
|
|
+ ><u-input
|
|
|
+ class="password"
|
|
|
+ placeholder-style="color:#999999"
|
|
|
+ v-model="form.pwdAgain"
|
|
|
+ type="password"
|
|
|
+ placeholder="再次输入新密码"
|
|
|
+ /></u-form-item>
|
|
|
+ </u-form>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <button
|
|
|
+ :disabled="isUse"
|
|
|
+ class="loginBtn"
|
|
|
+ :class="{ able: canSubmit() }"
|
|
|
+ @click="submit"
|
|
|
+ >
|
|
|
+ 确定
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
+ <u-verification-code
|
|
|
+ seconds="60"
|
|
|
+ ref="uCode"
|
|
|
+ @change="codeChange"
|
|
|
+ ></u-verification-code>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- code: '',
|
|
|
- form:{
|
|
|
- code:'',
|
|
|
- tel:'',
|
|
|
- pwd:'',
|
|
|
- pwdAgain:''
|
|
|
- },
|
|
|
- rules: {
|
|
|
- tel: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: '请输入手机号',
|
|
|
- // 可以单个或者同时写两个触发验证方式
|
|
|
- trigger: ['change'],
|
|
|
- },
|
|
|
- {
|
|
|
- validator: (rule, value, callback) => {
|
|
|
- // 上面有说，返回true表示校验通过，返回false表示不通过
|
|
|
- // this.$u.test.mobile()就是返回true或者false的
|
|
|
- return this.$u.test.mobile(value);
|
|
|
- },
|
|
|
- message: '手机号码格式不正确',
|
|
|
- // 触发器可以同时用blur和change
|
|
|
- trigger: ['change'],
|
|
|
- }
|
|
|
- ],
|
|
|
- pwd: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: '请输入密码',
|
|
|
- // 可以单个或者同时写两个触发验证方式
|
|
|
- trigger: ['change'],
|
|
|
- }
|
|
|
- ],
|
|
|
- pwdAgain: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: '请输入密码',
|
|
|
- // 可以单个或者同时写两个触发验证方式
|
|
|
- trigger: ['change'],
|
|
|
- }
|
|
|
- ],
|
|
|
- code: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: '请输入验证码',
|
|
|
- // 可以单个或者同时写两个触发验证方式
|
|
|
- trigger: ['change'],
|
|
|
- }
|
|
|
- ],
|
|
|
- },
|
|
|
- codeTips: '',
|
|
|
- read:'',
|
|
|
- isUse:false
|
|
|
- };
|
|
|
- },
|
|
|
- methods: {
|
|
|
- canSubmit() {
|
|
|
- if(this.form.tel && this.form.code && this.form.pwd && this.form.pwdAgain) {
|
|
|
- return true;
|
|
|
- }
|
|
|
- return false;
|
|
|
- },
|
|
|
- submit(){
|
|
|
- let that = this
|
|
|
- if(!this.form.tel){
|
|
|
- this.$u.toast('请输入手机号码');
|
|
|
- return
|
|
|
- }
|
|
|
- if(!this.form.code){
|
|
|
- this.$u.toast('请输入验证码');
|
|
|
- return
|
|
|
- }
|
|
|
- if(!this.form.pwd){
|
|
|
- this.$u.toast('请输入新密码');
|
|
|
- return
|
|
|
- }
|
|
|
- if(!this.form.pwdAgain){
|
|
|
- this.$u.toast('请输入确定新密码');
|
|
|
- return
|
|
|
- }
|
|
|
- if(this.form.pwd!=this.form.pwdAgain){
|
|
|
- this.$u.toast('两次密码不一致');
|
|
|
- return
|
|
|
- }
|
|
|
- that.isUse = true
|
|
|
- let datas = {
|
|
|
- tel:this.form.tel,
|
|
|
- code:this.form.code,
|
|
|
- pwd:this.form.pwd
|
|
|
- }
|
|
|
- that.$api.forgetUser(datas).then(
|
|
|
- res => {
|
|
|
- that.isUse = false
|
|
|
- if (res.data.code == 200) {
|
|
|
- uni.showModal({
|
|
|
- title: '提示',
|
|
|
- content: '修改成功',
|
|
|
- showCancel:false,
|
|
|
- success: function(resst) {
|
|
|
- uni.navigateBack()
|
|
|
- }
|
|
|
- });
|
|
|
- } else {
|
|
|
- that.$u.toast(res.data.msg);
|
|
|
- }
|
|
|
- },
|
|
|
- err => {
|
|
|
- that.isUse = false
|
|
|
- console.log(err);
|
|
|
- }
|
|
|
- );
|
|
|
- },
|
|
|
- codeChange(text) {
|
|
|
- this.codeTips = text;
|
|
|
- },
|
|
|
- // 获取验证码
|
|
|
- getCode() {
|
|
|
- let that = this
|
|
|
- if(that.$refs.uCode.canGetCode) {
|
|
|
- if(that.$refs.tel.validateState == 'success') {
|
|
|
- let datas = {tel:this.form.tel}
|
|
|
- that.$api.forgetSms(datas).then(
|
|
|
- res => {
|
|
|
- if (res.data.code == 200) {
|
|
|
- that.$u.toast('验证码已发送');
|
|
|
- // 通知验证码组件内部开始倒计时
|
|
|
- that.$refs.uCode.start();
|
|
|
- } else {
|
|
|
- that.$u.toast(res.data.msg);
|
|
|
- }
|
|
|
- },
|
|
|
- err => {
|
|
|
- console.log(err);
|
|
|
- });
|
|
|
- } else {
|
|
|
- this.$refs.tel.onFieldChange()
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- },
|
|
|
- },
|
|
|
- onLoad(option) {
|
|
|
- let that = this;
|
|
|
- // this.from = option.from; // 看页面没有用到
|
|
|
- uni.login({
|
|
|
- provider: 'weixin',
|
|
|
- success: function(loginRes) {
|
|
|
- that.code = loginRes.code;
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- onReady() {
|
|
|
- this.$refs.uForm.setRules(this.rules)
|
|
|
- },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ code: "",
|
|
|
+ form: {
|
|
|
+ code: "",
|
|
|
+ tel: "",
|
|
|
+ pwd: "",
|
|
|
+ pwdAgain: "",
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ tel: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: "请输入手机号",
|
|
|
+ // 可以单个或者同时写两个触发验证方式
|
|
|
+ trigger: ["change"],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ validator: (rule, value, callback) => {
|
|
|
+ // 上面有说，返回true表示校验通过，返回false表示不通过
|
|
|
+ // this.$u.test.mobile()就是返回true或者false的
|
|
|
+ return this.$u.test.mobile(value);
|
|
|
+ },
|
|
|
+ message: "手机号码格式不正确",
|
|
|
+ // 触发器可以同时用blur和change
|
|
|
+ trigger: ["change"],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ pwd: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: "请输入密码",
|
|
|
+ // 可以单个或者同时写两个触发验证方式
|
|
|
+ trigger: ["change"],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ pwdAgain: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: "请输入密码",
|
|
|
+ // 可以单个或者同时写两个触发验证方式
|
|
|
+ trigger: ["change"],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ code: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: "请输入验证码",
|
|
|
+ // 可以单个或者同时写两个触发验证方式
|
|
|
+ trigger: ["change"],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ codeTips: "",
|
|
|
+ read: "",
|
|
|
+ isUse: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ canSubmit() {
|
|
|
+ if (
|
|
|
+ this.form.tel &&
|
|
|
+ this.form.code &&
|
|
|
+ this.form.pwd &&
|
|
|
+ this.form.pwdAgain
|
|
|
+ ) {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ return false;
|
|
|
+ },
|
|
|
+ submit() {
|
|
|
+ let that = this;
|
|
|
+ if (!this.form.tel) {
|
|
|
+ this.$u.toast("请输入手机号码");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!this.form.code) {
|
|
|
+ this.$u.toast("请输入验证码");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!this.form.pwd) {
|
|
|
+ this.$u.toast("请输入新密码");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!this.form.pwdAgain) {
|
|
|
+ this.$u.toast("请输入确定新密码");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (this.form.pwd != this.form.pwdAgain) {
|
|
|
+ this.$u.toast("两次密码不一致");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ that.isUse = true;
|
|
|
+ let datas = {
|
|
|
+ tel: this.form.tel,
|
|
|
+ code: this.form.code,
|
|
|
+ pwd: this.form.pwd,
|
|
|
+ };
|
|
|
+ that.$api.forgetUser(datas).then(
|
|
|
+ (res) => {
|
|
|
+ that.isUse = false;
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ uni.showModal({
|
|
|
+ title: "提示",
|
|
|
+ content: "修改成功",
|
|
|
+ showCancel: false,
|
|
|
+ success: function (resst) {
|
|
|
+ uni.navigateBack();
|
|
|
+ },
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ that.$u.toast(res.data.msg);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ (err) => {
|
|
|
+ that.isUse = false;
|
|
|
+ console.log(err);
|
|
|
+ }
|
|
|
+ );
|
|
|
+ },
|
|
|
+ codeChange(text) {
|
|
|
+ this.codeTips = text;
|
|
|
+ },
|
|
|
+ // 获取验证码
|
|
|
+ getCode() {
|
|
|
+ let that = this;
|
|
|
+ if (that.$refs.uCode.canGetCode) {
|
|
|
+ if (that.$refs.tel.validateState == "success") {
|
|
|
+ let datas = { tel: this.form.tel };
|
|
|
+ that.$api.forgetSms(datas).then(
|
|
|
+ (res) => {
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ that.$u.toast("验证码已发送");
|
|
|
+ // 通知验证码组件内部开始倒计时
|
|
|
+ that.$refs.uCode.start();
|
|
|
+ } else {
|
|
|
+ that.$u.toast(res.data.msg);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ (err) => {
|
|
|
+ console.log(err);
|
|
|
+ }
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ this.$refs.tel.onFieldChange();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ let that = this;
|
|
|
+ // this.from = option.from; // 看页面没有用到
|
|
|
+ uni.login({
|
|
|
+ provider: "weixin",
|
|
|
+ success: function (loginRes) {
|
|
|
+ that.code = loginRes.code;
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onReady() {
|
|
|
+ this.$refs.uForm.setRules(this.rules);
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
- .wxBtn{
|
|
|
- position: fixed;
|
|
|
- bottom: 10%;
|
|
|
- width: 100%;
|
|
|
- left: 0;
|
|
|
- }
|
|
|
- /deep/ .wxBtn button::after{
|
|
|
- border: none;
|
|
|
- }
|
|
|
- .loginBtn{
|
|
|
- width: 526rpx;
|
|
|
- height: 80rpx;
|
|
|
- background: linear-gradient(90deg, #015EEA, #00C0FA);
|
|
|
- box-shadow: 0rpx 10rpx 16rpx 4rpx rgba(1, 99, 235, 0.04);
|
|
|
- opacity: 0.6;
|
|
|
- border-radius: 40rpx;
|
|
|
- color: #FFFFFF;
|
|
|
- text-align: center;
|
|
|
- line-height: 80rpx;
|
|
|
- margin: 40rpx auto;
|
|
|
-
|
|
|
- &.able {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- .wxloginBtn{
|
|
|
- background: url("/static/loginBtn.png") no-repeat;
|
|
|
- background-size:100% 100%;
|
|
|
- border:none;
|
|
|
- width: 100rpx;
|
|
|
- height: 100rpx;
|
|
|
- }
|
|
|
-
|
|
|
- /deep/page {
|
|
|
- background-color: #FFFFFF;
|
|
|
- height: 100%;
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- .login_box{
|
|
|
- width: 100%;
|
|
|
- height: 566rpx;
|
|
|
- background: #FFFFFF;
|
|
|
- box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(1, 99, 235, 0.1);
|
|
|
- border-radius: 24rpx;
|
|
|
- margin-top: 30rpx;
|
|
|
- padding:40rpx 35rpx;
|
|
|
-
|
|
|
- .password {
|
|
|
- /deep/.uicon-eye-fill {
|
|
|
- &::before{
|
|
|
- color:#007AFF;
|
|
|
- content:"\e613";
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- /deep/ .u-item-bg{
|
|
|
- border-radius: 32px !important;
|
|
|
- }
|
|
|
- /deep/ .u-subsection{
|
|
|
- border-radius: 32px !important;
|
|
|
- }
|
|
|
+.wxBtn {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 10%;
|
|
|
+ width: 100%;
|
|
|
+ left: 0;
|
|
|
+}
|
|
|
+/deep/ .wxBtn button::after {
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+.loginBtn {
|
|
|
+ width: 526rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ background: linear-gradient(90deg, #015eea, #00c0fa);
|
|
|
+ box-shadow: 0rpx 10rpx 16rpx 4rpx rgba(1, 99, 235, 0.04);
|
|
|
+ opacity: 0.6;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 80rpx;
|
|
|
+ margin: 40rpx auto;
|
|
|
+
|
|
|
+ &.able {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.wxloginBtn {
|
|
|
+ background: url("/static/loginBtn.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ border: none;
|
|
|
+ width: 100rpx;
|
|
|
+ height: 100rpx;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/page {
|
|
|
+ background-color: #ffffff;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.login_box {
|
|
|
+ width: 100%;
|
|
|
+ height: 566rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(1, 99, 235, 0.1);
|
|
|
+ border-radius: 24rpx;
|
|
|
+ margin-top: 30rpx;
|
|
|
+ padding: 40rpx 35rpx;
|
|
|
+
|
|
|
+ .password {
|
|
|
+ /deep/.uicon-eye-fill {
|
|
|
+ &::before {
|
|
|
+ color: #007aff;
|
|
|
+ content: "\e613";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+/deep/ .u-item-bg {
|
|
|
+ border-radius: 32px !important;
|
|
|
+}
|
|
|
+/deep/ .u-subsection {
|
|
|
+ border-radius: 32px !important;
|
|
|
+}
|
|
|
.full_img {
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- display: block;
|
|
|
- width: 100%;
|
|
|
- z-index: -999;
|
|
|
- top: 0;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ z-index: -999;
|
|
|
+ top: 0;
|
|
|
}
|
|
|
|
|
|
.head {
|
|
|
- height: 96rpx;
|
|
|
- width: 100%;
|
|
|
- line-height: 96rpx;
|
|
|
- margin-top: 40rpx;
|
|
|
- text-align: center;
|
|
|
- display: flex;
|
|
|
- position: relative;
|
|
|
- justify-content: center;
|
|
|
+ height: 96rpx;
|
|
|
+ width: 100%;
|
|
|
+ line-height: 96rpx;
|
|
|
+ margin-top: 40rpx;
|
|
|
+ text-align: center;
|
|
|
+ display: flex;
|
|
|
+ position: relative;
|
|
|
+ justify-content: center;
|
|
|
}
|
|
|
.icon {
|
|
|
- position: absolute;
|
|
|
- left: 30rpx;
|
|
|
+ position: absolute;
|
|
|
+ left: 30rpx;
|
|
|
+}
|
|
|
+.aa {
|
|
|
+ padding: 10rpx;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 10rpx;
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
谢杰标