123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265 |
- <template>
- <view :style="colorStyle">
- <view class="ChangePassword">
- <form @submit="editPwd">
- <view class="phone">当前手机号:{{phone}}</view>
- <view class="list">
- <view class="item">
- <input type='password' placeholder='设置新密码' placeholder-class='placeholder' name="password" :value="password"></input>
- </view>
- <view class="item">
- <input type='password' placeholder='确认新密码' placeholder-class='placeholder' name="qr_password" :value="qr_password"></input>
- </view>
- <view class="item acea-row row-between-wrapper">
- <input type='number' placeholder='填写验证码' placeholder-class='placeholder' class="codeIput" name="captcha" :value="captcha"></input>
- <button class="code font-num" :class="disabled === true ? 'on' : ''" :disabled='disabled' @click="code">
- {{ text }}
- </button>
- </view>
- </view>
- <button form-type="submit" class="confirmBnt bg-color">确认修改</button>
- </form>
- </view>
- <Verify @success="success" :captchaType="'blockPuzzle'" :imgSize="{ width: '330px', height: '155px' }"
- ref="verify"></Verify>
-
-
-
- </view>
- </template>
- <script>
- import sendVerifyCode from "@/mixins/SendVerifyCode";
- import {
- phoneRegisterReset,
- registerVerify,
- verifyCode
- } from '@/api/api.js';
- import {
- getUserInfo,
- getCodeApi
- } from '@/api/user.js';
- import {
- toLogin
- } from '@/libs/login.js';
- import {
- mapGetters
- } from "vuex";
- import colors from '@/mixins/color.js';
- import Verify from '../components/verify/verify.vue';
- export default {
- mixins: [sendVerifyCode,colors],
- components: {
- Verify
- },
- data() {
- return {
- userInfo: {},
- phone: '',
- password: '',
- qr_password: '',
- isAuto: false,
- isShowAuth: false ,
- key: '',
- captcha:'',
- };
- },
- computed: mapGetters(['isLogin']),
- watch:{
- isLogin:{
- handler:function(newV,oldV){
- if(newV){
- this.getUserInfo();
- this.getVerifyCode();
- }
- },
- deep:true
- }
- },
- onLoad() {
- if (this.isLogin) {
- this.getUserInfo();
- this.getVerifyCode();
- } else {
- toLogin();
- }
- },
- onShow() {
- uni.removeStorageSync('form_type_cart');
- },
- methods: {
-
- onLoadFun: function(e) {
- this.getUserInfo();
- this.getVerifyCode();
- this.isShowAuth = false;
- },
-
- authColse: function(e) {
- this.isShowAuth = e
- },
- getVerifyCode(){
- verifyCode().then(res=>{
- this.$set(this, 'key', res.data.key)
- });
- },
- /**
- * 获取个人用户信息
- */
- getUserInfo: function() {
- let that = this;
- getUserInfo().then(res => {
- let tel = res.data.phone;
- let phone = tel.substr(0, 3) + "****" + tel.substr(7);
- that.$set(that, 'userInfo', res.data);
- that.phone = phone;
- });
- },
- success(data) {
- console.log(data,'data');
- this.$refs.verify.hide()
- getCodeApi()
- .then(res => {
- this.keyCode = res.data.key;
- this.getCode(data);
- })
- .catch(res => {
- this.$util.Tips({
- title: res
- });
- });
- },
-
- code(data) {
- let that = this;
- if (!that.userInfo.phone) return that.$util.Tips({
- title: '手机号码不存在,无法发送验证码!'
- });
- this.$refs.verify.show()
- },
- async getCode(data){
- console.log('data-------',data);
- let that = this;
- await registerVerify({
- phone: that.userInfo.phone,
- type: 'reset',
- key: that.key,
- captchaType: 'blockPuzzle',
- captchaVerification: data.captchaVerification,
- })
- .then(res => {
- that.$util.Tips({
- title: res.msg
- });
- that.sendCode();
- })
- .catch(res => {
- that.$util.Tips({
- title: res
- });
- });
- },
-
- editPwd: function(e) {
- let that = this,
- password = e.detail.value.password,
- qr_password = e.detail.value.qr_password,
- captcha = e.detail.value.captcha;
- if (!password) return that.$util.Tips({
- title: '请输入新密码'
- });
- if (qr_password != password) return that.$util.Tips({
- title: '两次输入的密码不一致!'
- });
- if (!captcha) return that.$util.Tips({
- title: '请输入验证码'
- });
- phoneRegisterReset({
- account: that.userInfo.phone,
- captcha: captcha,
- password: password
- }).then(res => {
- uni.reLaunch({
- url: '/pages/users/login/index'
- })
-
-
-
-
-
-
- }).catch(err => {
- return that.$util.Tips({
- title: err
- });
- });
- }
- }
- }
- </script>
- <style lang="scss">
- page {
- background-color: #fff !important;
- }
- .ChangePassword .phone {
- font-size: 32rpx;
- font-weight: bold;
- text-align: center;
- margin-top: 55rpx;
- }
- .ChangePassword .list {
- width: 580rpx;
- margin: 53rpx auto 0 auto;
- }
- .ChangePassword .list .item {
- width: 100%;
- height: 110rpx;
- border-bottom: 2rpx solid #f0f0f0;
- }
- .ChangePassword .list .item input {
- width: 100%;
- height: 100%;
- font-size: 32rpx;
- }
- .ChangePassword .list .item .placeholder {
- color: #b9b9bc;
- }
- .ChangePassword .list .item input.codeIput {
- width: 340rpx;
- }
- .ChangePassword .list .item .code {
- font-size: 32rpx;
- background-color: #fff;
- }
- .ChangePassword .list .item .code.on {
- color: #b9b9bc !important;
- }
- .ChangePassword .confirmBnt {
- font-size: 32rpx;
- width: 580rpx;
- height: 90rpx;
- border-radius: 45rpx;
- color: #fff;
- margin: 92rpx auto 0 auto;
- text-align: center;
- line-height: 90rpx;
- }
- </style>
|