销户系统
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>