提交一把

jiangping

2024-05-16 a4945c89ee72aa8b6f2c0a75653a3256a2b30b4f

 company/src/views/login.vue

@@ -28,169 +28,216 @@
                    </div>
                </template>
            </div>
            <el-button :loading="loading" @click="login">登&nbsp;&nbsp;录</el-button>
          <div style="text-align: left;margin-bottom: 15px;font-size: 14px">
            <el-checkbox :true-label="1" :false-label="0"   v-model="readed"/>
              我已阅读和同意《<span @click="agreeType=0;title1='服务协议';visible1=true" style="color: dodgerblue;cursor: pointer">服务协议</span>》和
            《<span  @click="agreeType=1;title1='隐私协议';visible1=true" style="color: dodgerblue;cursor: pointer">隐私协议</span>》
          </div>
          <el-button :loading="loading" @click="login">登&nbsp;&nbsp;录</el-button>
        </div>
        <el-dialog
            class="center-title"
            :title="title1"
            width="70%"
            height="70%"
            text="用户协议"
            :visible.sync="visible1"
        >
          <div class="agree-list" v-if="agreeType==0" v-html="agreement0">
          </div>
          <div class="agree-list"  v-else v-html="agreement1">
          </div>
          <template  v-slot:footer>
            <el-button type="primary"   @click="readed=1;visible1=false">同意</el-button>
            <el-button @click="visible1=false">返回</el-button>
          </template>
        </el-dialog>
    </div>

</template>

<script>
    import { mapMutations } from 'vuex'
    import { getCaptcha, loginByPassword, loginByPhone } from '@/api/system/common'
    import { sendSms } from '@/api/business/smsEmail'
import { mapMutations } from 'vuex'
import { getCaptcha, loginByPassword, loginByPhone } from '@/api/system/common'
import { sendSms } from '@/api/business/smsEmail'
import { getAgreement } from '@/api/system/dict'

    export default {
        name: 'Login',
        data () {
            return {
                systemTitle: process.env.VUE_APP_SYSTEM_TITLE,
                loading: false,
                username: '',
                password: '',
                phone: '',
                code: '',
                active: 1,
                num: 0,
                timer: null,
                // 验证码
                captcha: {
                    loading: false,
                    value: '',
                    uuid: '',
                    uri: ''
                }
            }
        },
        methods: {
            ...mapMutations(['setUserInfo']),
            handleClick(e) {
                this.active = e
                this.username = ''
                this.password = ''
                this.phone = ''
                this.code = ''
            },
            send() {
                if (!this.phone) {
                    this.$message.warning('请先输入手机号')
                    return
                }
                var reg = /^1[3456789]\d{9}$/;
                if (!reg.test(this.phone)) {
                    this.$message.warning('手机号不合法')
                    return
                }
                sendSms({
                    phone: this.phone
                }).then(res => {
                    this.num = 60
                    this.setTimer()
                })
            },
            setTimer () {
                this.timer = setInterval(() => {
                    if (this.num === 0) {
                        this.num = 0
                        clearInterval(this.timer)
                        this.timer = null
                        return
                    }
                    this.num -= 1
                }, 1000)
            },
            // 登录
            login () {
                if (this.loading) {
                    return
                }
                if (this.active === 1) {
                    if (!this.__check()) {
                        return
                    }
                    this.loading = true
                    loginByPassword({
                        username: this.username.trim(),
                        password: this.password,
                        code: this.captcha.value.trim(),
                        uuid: this.captcha.uuid
                    })
                        .then(() => {
                            window.location.href = process.env.VUE_APP_CONTEXT_PATH
                        })
                        .catch(e => {
                            this.refreshCaptcha()
                            this.$tip.apiFailed(e)
                        })
                        .finally(() => {
                            this.loading = false
                        })
                } else {
                    if (!this.phone) {
                        this.$tip.error('请输入手机号')
                        return
                    }
                    if (!this.code) {
                        this.$tip.error('请输入验证码')
                        return
                    }
                    this.loading = true
                    loginByPhone({
                        phone: this.phone,
                        code: this.code.trim()
                    })
                        .then(() => {
                            window.location.href = process.env.VUE_APP_CONTEXT_PATH
                        })
                        .catch(e => {
                            this.$tip.apiFailed(e)
                        })
                        .finally(() => {
                            this.loading = false
                        })
                }
            },
            // 刷新验证码
            refreshCaptcha () {
                this.captcha.loading = true
                getCaptcha()
                    .then(data => {
                        this.captcha.uri = data.image
                        this.captcha.uuid = data.uuid
                    })
                    .catch(e => {
                        this.$tip.apiFailed(e)
                    })
                    .finally(() => {
                        setTimeout(() => {
                            this.captcha.loading = false
                        }, 150)
                    })
            },
            // 登录前验证
            __check () {
                if (this.username.trim() === '') {
                    this.$tip.error('请输入用户名')
                    return false
                }
                if (this.password === '') {
                    this.$tip.error('请输入密码')
                    return false
                }
                if (this.captcha.value.trim() === '') {
                    this.$tip.error('请输入图片验证码')
                    return false
                }
                return true
            }
        },
        created () {
            this.refreshCaptcha()
            document.title=this.systemTitle
        }
export default {
  name: 'Login',
  data () {
    return {
      title1:'服务协议',
      systemTitle: process.env.VUE_APP_SYSTEM_TITLE,
      loading: false,
      username: '',
      password: '',
      phone: '',
      visible1:false,
      code: '',
      readed: 0,
      agreeType:'',
      active: 1,
      num: 0,
      timer: null,
      agreement0: '这是服务协议',
      agreement1: '这是隐私协议',
      // 验证码
      captcha: {
        loading: false,
        value: '',
        uuid: '',
        uri: ''
      }
    }
  },
  methods: {
    ...mapMutations(['setUserInfo']),
    handleClick (e) {
      this.active = e
      this.username = ''
      this.password = ''
      this.phone = ''
      this.code = ''
    },
    getAgree () {
      getAgreement({}).then(res => {
        if (res && res.length >= 2) {
          this.agreement0 = res[0]
          this.agreement1 = res[1]
        }
      })
    },
    send () {
      if (!this.phone) {
        this.$message.warning('请先输入手机号')
        return
      }
      var reg = /^1[3456789]\d{9}$/
      if (!reg.test(this.phone)) {
        this.$message.warning('手机号不合法')
        return
      }
      sendSms({
        phone: this.phone
      }).then(res => {
        this.num = 60
        this.setTimer()
      })
    },
    setTimer () {
      this.timer = setInterval(() => {
        if (this.num === 0) {
          this.num = 0
          clearInterval(this.timer)
          this.timer = null
          return
        }
        this.num -= 1
      }, 1000)
    },
    // 登录
    login () {
      if (this.loading) {
        return
      }
      if (this.readed != 1) {
        this.$message.error('请先阅读和同意《服务协议》和《隐私协议》')
        return
      }
      if (this.active === 1) {
        if (!this.__check()) {
          return
        }
        this.loading = true
        loginByPassword({
          username: this.username.trim(),
          password: this.password,
          code: this.captcha.value.trim(),
          uuid: this.captcha.uuid
        })
          .then(() => {
            window.location.href = process.env.VUE_APP_CONTEXT_PATH
          })
          .catch(e => {
            this.refreshCaptcha()
            this.$tip.apiFailed(e)
          })
          .finally(() => {
            this.loading = false
          })
      } else {
        if (!this.phone) {
          this.$tip.error('请输入手机号')
          return
        }
        if (!this.code) {
          this.$tip.error('请输入验证码')
          return
        }
        this.loading = true
        loginByPhone({
          phone: this.phone,
          code: this.code.trim()
        })
          .then(() => {
            window.location.href = process.env.VUE_APP_CONTEXT_PATH
          })
          .catch(e => {
            this.$tip.apiFailed(e)
          })
          .finally(() => {
            this.loading = false
          })
      }
    },
    // 刷新验证码
    refreshCaptcha () {
      this.captcha.loading = true
      getCaptcha()
        .then(data => {
          this.captcha.uri = data.image
          this.captcha.uuid = data.uuid
        })
        .catch(e => {
          this.$tip.apiFailed(e)
        })
        .finally(() => {
          setTimeout(() => {
            this.captcha.loading = false
          }, 150)
        })
    },
    // 登录前验证
    __check () {
      if (this.username.trim() === '') {
        this.$tip.error('请输入用户名')
        return false
      }
      if (this.password === '') {
        this.$tip.error('请输入密码')
        return false
      }
      if (this.captcha.value.trim() === '') {
        this.$tip.error('请输入图片验证码')
        return false
      }
      return true
    }
  },
  created () {
    this.refreshCaptcha()
    this.getAgree()
    document.title = this.systemTitle
  }
}
</script>

<style scoped lang="scss">
    @import "@/assets/style/variables.scss";
    .agree-list{
      height: 550px;
      //max-height: 50%;
      overflow: auto;
    }
    $input-gap: 30px;
    .wrap {
        display: flex;
@@ -265,7 +312,7 @@
                }
            }
            .info-input {
                margin-bottom: 60px;
                margin-bottom: 15px;
                /deep/ .el-input {
                    margin-top: 30px;
                    &:first-child {
@@ -313,4 +360,14 @@
            }
        }
    }
   ::v-deep .center-title .el-dialog__title {
      text-align: center;
      width: 100%;
      font-size: 18px;
      font-weight: bold;

    }
    ::v-deep  .el-dialog__header{
      text-align: center;
    }
</style>