123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306 |
- <template>
- <view class="container">
- <view class="loginTitle"><text>修改密码</text></view>
- <view class="login_text">
- <view class="login_input flex">
- <view class="login_img">
- +86
- </view>
- <view class="login_name"><input class="uni-input" v-model="phone" focus placeholder="请输入手机号" /></view>
- </view>
- <view class="login_input flex">
- <view class="login_img">
- 新密码
- </view>
- <view class="login_name"><input class="uni-input" type="password" v-model="password" focus
- placeholder="请重复输入密码" /></view>
- </view>
- <view class="login_input flex">
- <view class="login_img">
- 验证码
- </view>
- <view class="login_name flex">
- <input class="uni-input width" v-model="code" focus placeholder="请输入验证码" />
- <view class="code" @click="verification">{{ countDown == 0 ? '验证码' : countDown }}</view>
- </view>
- </view>
- <view><button type="green" @click="register" class="uni-button uni-button-green">修改密码</button></view>
- <view>
- <navigator url="login">
- <button class="uni-button uni-button-green-plain" type="green" plain="true"
- hover-class="none">返回登录</button>
- </navigator>
- </view>
- </view>
- </view>
- </template>
- <script>
- import {
- verify
- } from '@/api/login.js';
- import {
- registerReset
- } from '@/api/set.js';
- export default {
- data() {
- return {
- phone: '',
- password: '',
- code: '',
- time: '',
- countDown: 0,
- };
- },
- onLoad() {
-
- this.invitation = uni.getStorageSync('spread') || '';
- },
- watch: {
-
- countDown(i) {
- if (i == 0) {
- clearInterval(this.time);
- }
- }
- },
- methods: {
-
- register() {
- let obj = this;
- if (obj.phone == '') {
- obj.$api.msg('请输入电话号码');
- return;
- }
- if (this.phone.length != 11) {
- obj.$api.msg('请输入正确的手机号');
- return;
- }
- if (obj.password == '') {
- obj.$api.msg('请输入密码');
- return;
- }
- registerReset({
- account: obj.phone,
- captcha: obj.code,
- password: obj.password,
- }).then(function(e) {
- uni.showToast({
- title: '修改成功',
- duration: 2000,
- position: 'top'
- });
- setTimeout(function() {
- uni.navigateTo({
- url: '/pages/public/login'
- });
- }, 1000)
- });
-
- },
-
- verification() {
- let obj = this;
- if (this.phone == '') {
- this.$api.msg('请输入电话号码');
- return;
- }
- if (this.phone.length < 11) {
- this.$api.msg('请输入正确的手机号');
- return;
- }
-
- if (obj.countDown > 0) {
- return false;
- } else {
- obj.countDown = 60;
- obj.time = setInterval(() => {
- obj.countDown--;
- }, 1000);
-
- verify({
- phone: obj.phone,
- type: ''
- })
- .then(({
- data
- }) => {})
- .catch(err => {
- console.log(err);
- });
- }
- },
- login() {
-
- uni.navigateTo({
- url: '/pages/public/login'
- });
- }
- }
- };
- </script>
- <style lang="scss">
- page {
- height: 100%;
- }
- .container {
- width: 100%;
- height: 100%;
- background-size: 100%;
- background-color: #FFFFFF;
- }
- .container_text {
- width: 100%;
- height: 500rpx;
- top: 0rpx;
- .banner-img {
- width: 100%;
- height: 100%;
- }
- }
- .login_text {
- margin: auto 50rpx;
- position: relative;
- background-color: #ffffff;
- border-radius: 20rpx;
- .login_input {
- border-bottom: 1px solid #f0f0f0;
- margin-bottom: 30rpx;
- padding: 30rpx 0;
- line-height: 1;
- .login_img {
- height: 35rpx;
- width: 150rpx;
- flex-shrink: 0;
- font-size: 30rpx;
- text-align: center;
- margin-right: 20rpx;
- color: $font-base;
- }
- .uni-input {
- text-align: left;
- width: 100%;
- font-size: 28rpx !important;
- }
- .login_name {
- color: #333333;
- flex-grow: 1;
- .code {
- color: #5dbc7c;
- font-size: 23rpx;
- border-left: 1px solid #eeeeee;
- width: 150rpx;
- flex-shrink: 0;
- text-align: center;
- }
- }
- }
- .other {
- margin-top: 60rpx;
- .fenge {
- width: 30%;
- height: 2rpx;
- background-color: #eeeeee;
- }
- .qita {
- font-size: 28rpx;
- color: #999999;
- }
- }
- .weixin {
- width: 75rpx;
- height: 75rpx;
- margin: 25rpx auto;
- }
- .weixin image {
- width: 100%;
- height: 100%;
- }
- .weixin_text {
- text-align: center;
- font-size: 28rpx;
- color: #999999;
- }
- .forget {
- font-size: 28rpx;
- width: 100%;
- text-align: right;
- color: #999999;
- }
- .uni-button-green {
- color: #ffffff;
- background-color: #5dbc7c;
- margin: 40rpx 10rpx;
- border-radius: 50rpx;
- box-shadow: 0px 8px 10px 0px rgba(166, 203, 184, 0.75);
- }
- .uni-button-green-plain {
- margin: 40rpx 10rpx;
- border-radius: 50rpx;
- color: $font-base;
- background-color: $page-color-base;
- border: none;
- }
- .uni-button {
- height: 80rpx;
- line-height: 80rpx;
- font-size: 28rpx;
- width: 100%;
- }
- }
- .loginTitle {
- padding: 150rpx 0;
- width: 100%;
- text-align: left;
- color: $font-base;
- font-size: 48rpx;
- margin: 0 50rpx;
- }
- .forget {
- width: 100rpx;
- font-size: 24rpx;
- color: #ffffff;
- margin: 0px auto;
- border-bottom: 1px solid #ffffff;
- }
- .width {
- width: 325rpx !important;
- }
- .code {
- color: #5dbc7c;
- font-size: 23rpx;
- border-left: 1px solid #eeeeee;
- width: 150rpx;
- flex-shrink: 0;
- text-align: center;
- }
- uni-button {
- height: 80rpx !important;
- line-height: 80rpx !important;
- }
- </style>
|