cyywl_server/yudao-ui-app/pages/users/retrievePassword/index.vue

<template>
  <div class="login-wrapper">
    <div class="logo-wrap">
      <img src="/static/images/mallLogo.png" style="width:105rpx;height:105rpx;"></image>
      <img src="/static/images/mall.png" style="width:233rpx;height:43rpx;"></image>
    </div>
    <view class="title">找回密码</view>
    <div class="whiteBg">
      <div class="list">
        <div class="item">
          <div class="acea-row row-middle">
            <image src="/static/images/phone_1.png" style="width: 40rpx; height: 40rpx;"></image>
            <input type="text" class="texts" placeholder="输入手机号码" v-model="account" />
          </div>
        </div>
        <div class="item">
          <div class="acea-row row-middle">
            <image src="/static/images/code_2.png" style="width: 40rpx; height: 40rpx;"></image>
            <input type="text" class="texts" placeholder="填写验证码"  v-model="captcha" />
          </div>
          <button class="code" :disabled="disabled" :class="disabled === true ? 'on' : ''" @click="code">
            {{ text }}
          </button>
        </div>
        <div class="item">
          <div class="acea-row row-middle">
            <image src="/static/images/code_2.png" style="width: 40rpx; height: 40rpx;"></image>
            <input type="password" class="texts" placeholder="填写您的新密码" v-model="password" />
          </div>
        </div>
        <div class="item" v-if="isShowCode">
          <div class="align-left">
            <input type="text" placeholder="填写验证码" class="codeIput" v-model="codeVal" />
            <div class="code" @click="again"><img :src="codeUrl" /></div>
          </div>
        </div>
      </div>
      <div class="logon" @click="registerReset">确认</div>
      <div class="tips">
        <span @click="back">立即登录</span>
      </div>
    </div>
    <div class="bottom"></div>
  </div>
</template>

<script>
  import sendVerifyCode from "@/mixins/SendVerifyCode";
  import {
    registerVerify,
    registerReset,
    getCodeApi
  } from "@/api/user";
  // import { validatorDefaultCatch } from "@/utils/dialog";
  // import attrs, { required, alpha_num, chs_phone } from "@utils/validate";
  // import { VUE_APP_API_URL } from "@utils";

  export default {
    name: "RetrievePassword",
    data: function() {
      return {
        account: "",
        password: "",
        captcha: "",
        keyCode: "",
        codeUrl: "",
        codeVal: "",
        isShowCode: false
      };
    },
    mixins: [sendVerifyCode],
    mounted: function() {

    },
    methods: {
      back() {
        uni.navigateBack();
      },
      again() {
        this.codeUrl =
          VUE_APP_API_URL + "/captcha?" + this.keyCode + Date.parse(new Date());
      },
      async registerReset() {
        var that = this;
        if (!that.account) return that.$util.Tips({
          title: '请填写手机号码'
        });
        if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(that.account)) return that.$util.Tips({
          title: '请输入正确的手机号码'
        });
        if (!that.captcha) return that.$util.Tips({
          title: '请填写验证码'
        });
        registerReset({
            mobile: that.account,
            password: that.password,
            code: that.captcha
          })
          .then(res => {
            that.$util.Tips({
              title: res.message
            }, {
              tab: 3
            })
          })
          .catch(res => {
            that.$util.Tips({
              title: res
            })
          });
      },
      async code() {
        let that = this;
        if (!that.account) return that.$util.Tips({
          title: '请填写手机号码'
        });
        if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(that.account)) return that.$util.Tips({
          title: '请输入正确的手机号码'
        });
        await registerVerify(that.account, 3)
          .then(res => {
            // that.$dialog.success(res.message);
            that.sendCode();
          })
          .catch(res => {
            // if (res.data.status === 402) {
            // 	that.codeUrl = `${VUE_APP_API_URL}/sms_captcha?key=${that.keyCode}`;
            // 	that.isShowCode = true;
            // }
            that.$util.Tips({
              title: res
            });
          });
      },
    }
  };
</script>
<style lang="scss" scoped>
  .code img {
    width: 100%;
    height: 100%;
  }

  .acea-row.row-middle {
    input {
      margin-left: 20rpx;
      display: block;
    }
  }

  .login-wrapper {
    padding: 30rpx 52rpx;
    background: url('@/static/images/bg-linear.png') center 0 no-repeat;
    background-size: 100% 672rpx;

    .logo-wrap {
      margin: 185rpx 0 85rpx 0;
      display:flex;
      align-items:center;
      img{
       margin-right: 20rpx;
      }
    }

    .title {
      font-size: 40rpx;
      font-weight: 400;
      color: #000;
    }

    .whiteBg {

      margin-top: 46rpx;

      .list {
        overflow: hidden;

        .item {
          margin-bottom: 38rpx;
          height: 98rpx;
          display: flex;

          &:last-child {
            margin-bottom: 0;
          }

          .code {
            width: 197rpx;
            text-align: center;
            line-height: 96rpx;
            background: #FFF3F6;
            border: 1px solid #F54275;
            border-radius: 15rpx;
            font-size: 28rpx;
            color: #F03A76;
            margin-left: 19rpx;
          }

          .row-middle {
            position: relative;
            padding: 28rpx;
            background: #fff;
            border: 1px solid #BFBFBF;
            border-radius: 15rpx;
            flex: 1;

            .texts {
              flex: 1;
              font-size: 28rpx;
              height: 42rpx;
              line-height: 42rpx;
              display: flex;
              justify-content: center;
              align-items: center;
            }

            input {
              flex: 1;
              font-size: 28rpx;
              height: 80rpx;
              line-height: 80rpx;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
        }
      }

      .logon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 87rpx;
        margin-top: 99rpx;
        color: #FFFFFF;
        font-size: 32rpx;
        background: linear-gradient(0deg, #E63163 0%, #FF819F 100%);
        border-radius: 44rpx;
      }

      .tips {
        margin-top: 50rpx;
        font-size: 24rpx;
        color: #000;
        display: flex;
        justify-content: center;
      }
    }
  }
</style>