1-21 url-loader的使用规范

销户系统

1.目前项目里的webpack压缩图片相关是使用url-loader进行压缩的，代码如下：

 {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        include: setPath('src'),
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'img/[name].[hash:5].[ext]'
        }
      },

附上详细说明url-loader的使用规范

2.iconFont阿里巴巴矢量图标库
有空学习一下

3.完成了一个验证手机号的页面，感觉很通用。甚至可以复用

<template>
  <!-- 验证手机号 -->
  <div class="mobile-confirm">
    <div class="section">
      <div class="description">
        <p>验证信息将会以短信方式发送到您的手机，若手机号码有</p>
        <p>变，请及时变更本人有效手机，以便我司告知您销户进展</p>
      </div>
    </div>
    <div class="mobile-num">
      <span>{{mobileNum}}</span>
    </div>
    <div class="code">
      <input type="text" maxlength="4" placeholder="请输入验证码" ref="codeNum">
      <div class="getCode" @click="getCode">
        <span :class="{getting:isGetting}">{{codeStatus}}</span>
      </div>
    </div>

    <button :disabled="checkLoading" class="btn full-width" @click="checkRequirement">
      <Loading v-show="checkLoading"/>
      {{checkLoading ? '' : '下一步'}}
    </button>
  </div>
</template>
<style lang="stylus" src="./assets/style" scoped></style>

<script>
import Vue from 'vue'
import Component from 'vue-class-component'
import AccountModel from '@model/account'
import Loading from '@partial/loading'
@Component({
  components: {
    Loading
  }
})
export default class AppropriatePage extends Vue {
  Account = AccountModel
  mobileNum = ''
  codeStatus = '获取验证码'
  isGetting = false
  checkLoading = false
  countTime = 60
  //获取验证码
  async getCode() {
    if (this.isGetting) {
      return
    }
    this.countTime = 60
    this.codeStatus = `${this.countTime}s后重新获取`
    this.isGetting = true
    this.countDown()
    await AccountModel.sendMobileCode(this.mobileNum)
  }
  //设置定时器进行倒计时
  countDown() {
    this.timer = setInterval(() => {
      this.countTime--
    }, 1000)
    if (this.countTime <= 0) {
    }
  }

  //获取用户信息
  async getClientInfo() {
    const clientId = AccountModel.wrapperParams().clientId //用户编号
    await AccountModel.getClientBaseInfo(clientId)
    this.mobileNum = AccountModel.clientBaseInfo.mobileTel
  }

  /**
   * 点下一步检查前置条件
   */
  async checkRequirement() {
    this.checkLoading = true
    try {
      // 先去请求结果，如果有问题跳转到问题展示页面
      await AccountModel.checkMobileCode({
        mobileTel: this.mobileNum,
        verifyCode: this.$refs.codeNum.value
      })
      await AccountModel.getnextNode('mobileConfirm').then(() => {
        this.$router.push({ path: `${AccountModel.nextNode}` })
      })
    } finally {
      await this.$App.util.delay(500)
      this.checkLoading = false
    }
  }

  created() {
    this.getClientInfo()
  }
  mounted() {
    //监听倒计时状态
    this.$watch('countTime', val => {
      this.codeStatus = `${this.countTime}s后重新获取`
      if (val == 0) {
        clearInterval(this.timer)
        this.codeStatus = '获取验证码'
        this.isGetting = false
      }
    })
  }
}
</script>