123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273 |
- <template>
- <view :style="colorStyle">
- <form @submit="editPwd">
- <view class="ChangePassword">
- <view class="list">
- <view class="item">
- <input type='number' placeholder='填写手机号码' placeholder-class='placeholder' v-model="phone"></input>
- </view>
- <view class="item acea-row row-between-wrapper">
- <input type='number' placeholder='填写验证码' placeholder-class='placeholder' class="codeIput" v-model="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>
- </view>
- </form>
- <Verify @success="success" :captchaType="'blockPuzzle'"
- :imgSize="{ width: '330px', height: '155px' }" ref="verify"></Verify>
-
-
-
- </view>
- </template>
- <script>
- import sendVerifyCode from "@/mixins/SendVerifyCode";
- import Verify from '../components/verify/verify.vue';
- import {
- registerVerify,
- bindingUserPhone,
- verifyCode,
- updatePhone
- } from '@/api/api.js';
- import {
- toLogin
- } from '@/libs/login.js';
- import {
- mapGetters
- } from "vuex";
- import colors from '@/mixins/color.js';
- export default {
- mixins: [sendVerifyCode,colors],
- components: {
- Verify
- },
- data() {
- return {
- phone:'',
- captcha:'',
- isAuto: false,
- isShowAuth: false,
- key: '',
- authKey:'',
- type:0,
- show: false
- };
- },
- computed: mapGetters(['isLogin']),
- onLoad(options) {
- if (this.isLogin) {
- this.getVerifyCode();
- } else {
- toLogin();
- }
- this.authKey = options.key || '';
- this.url = options.url || '';
- this.type = options.type || 0
- },
- onShow() {
- uni.removeStorageSync('form_type_cart');
- },
- methods: {
- onLoadFun:function(){
- this.getVerifyCode();
- this.isShowAuth = false
- },
-
- authColse: function(e) {
- this.isShowAuth = e
- },
- getVerifyCode(){
- verifyCode().then(res=>{
- this.$set(this, 'key', res.data.key)
- });
- },
- editPwd: function() {
- let that = this;
- if (!that.phone) return that.$util.Tips({
- title: '请填写手机号码!'
- });
- if (!(/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.phone))) return that.$util.Tips({
- title: '请输入正确的手机号码!'
- });
- if (!that.captcha) return that.$util.Tips({
- title: '请填写验证码'
- });
- if(this.type == 0){
- bindingUserPhone({
- phone: that.phone,
- captcha: that.captcha
- }).then(res => {
- if (res.data !== undefined && res.data.is_bind) {
- uni.showModal({
- title: '是否绑定账号',
- content: res.msg,
- confirmText: '绑定',
- success(res) {
- if (res.confirm) {
- bindingUserPhone({
- phone: that.phone,
- captcha: that.captcha,
- step: 1
- }).then(res => {
- return that.$util.Tips({
- title: res.msg,
- icon: 'success'
- }, {
- tab: 5,
- url: '/pages/users/user_info/index'
- });
- }).catch(err => {
- return that.$util.Tips({
- title: err
- });
- })
- } else if (res.cancel) {
- return that.$util.Tips({
- title: '您已取消绑定!'
- }, {
- tab: 5,
- url: '/pages/users/user_info/index'
- });
- }
- }
- });
- } else
- return that.$util.Tips({
- title: '绑定成功!',
- icon: 'success'
- }, {
- tab: 5,
- url: '/pages/users/user_info/index'
- });
- }).catch(err => {
- return that.$util.Tips({
- title: err
- });
- })
- }else{
- updatePhone({
- phone: that.phone,
- captcha: that.captcha,
- }).then(res=>{
- return that.$util.Tips({
- title: res.msg,
- icon: 'success'
- }, {
- tab: 5,
- url: '/pages/users/user_info/index'
- });
- }).catch(error=>{
- return that.$util.Tips({
- title: error,
- });
- })
- }
- },
- success(data){
- this.$refs.verify.hide()
- let that = this;
- verifyCode().then(res=>{
- registerVerify(
- {
- phone: that.phone,
- type: 'reset',
- key: res.data.key,
- captchaType: 'blockPuzzle',
- captchaVerification: data.captchaVerification,
- }
- ).then(res => {
- that.$util.Tips({
- title: res.msg
- });
- that.sendCode();
- }).catch(err => {
- return that.$util.Tips({
- title: err
- });
- });
- });
-
- },
-
- code() {
-
- if (!this.phone) return this.$util.Tips({
- title: '请填写手机号码!'
- });
- if (!(/^1(3|4|5|7|8|9|6)\d{9}$/i.test(this.phone))) return this.$util.Tips({
- title: '请输入正确的手机号码!'
- });
-
- this.$refs.verify.show();
-
- return;
- },
- }
- }
- </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>
|