5 changed files with 193 additions and 150 deletions
@ -0,0 +1,11 @@ |
|||||
|
<template> |
||||
|
<u-image src="" mode=""></u-image> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { src: '' }; |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
@ -1,36 +1,42 @@ |
|||||
{ |
{ |
||||
"pages": [ |
"pages": [ |
||||
{ |
{ |
||||
"path": "pages/index/index", |
"path": "pages/index/index", |
||||
"style": { |
"style": { |
||||
"navigationBarText": "TALL" |
"navigationBarText": "TALL" |
||||
} |
} |
||||
}, |
}, |
||||
{ |
{ |
||||
"path": "pages/project/project", |
"path": "pages/project/project", |
||||
"style": { |
"style": { |
||||
"navigationStyle": "custom" , |
"navigationStyle": "custom", |
||||
"navigationBarTextStyle": "white" |
"navigationBarTextStyle": "white" |
||||
} |
} |
||||
}, |
}, |
||||
{ |
{ |
||||
"path": "pages/test/test", |
"path": "pages/test/test", |
||||
"style": { |
"style": { |
||||
"navigationBarTitleText": "测试" |
"navigationBarTitleText": "测试" |
||||
} |
} |
||||
} |
}, |
||||
], |
{ |
||||
"globalStyle": { |
"path": "pages/phone-bind/phone-bind", |
||||
"navigationBarTextStyle": "black", |
"style": { |
||||
"navigationBarTitleText": "TALL", |
"navigationBarTitleText": "绑定手机号" |
||||
"navigationBarBackgroundColor": "#F8F8F8", |
} |
||||
"backgroundColor": "#F8F8F8" |
} |
||||
}, |
], |
||||
"easycom": { |
"globalStyle": { |
||||
"autoscan": true, |
"navigationBarTextStyle": "black", |
||||
"custom": { |
"navigationBarTitleText": "TALL", |
||||
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue", |
"navigationBarBackgroundColor": "#F8F8F8", |
||||
"^p-(.*)": "@/plugins/p-$1/p-$1.vue" |
"backgroundColor": "#F8F8F8" |
||||
} |
}, |
||||
} |
"easycom": { |
||||
|
"autoscan": true, |
||||
|
"custom": { |
||||
|
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue", |
||||
|
"^p-(.*)": "@/plugins/p-$1/p-$1.vue" |
||||
|
} |
||||
|
} |
||||
} |
} |
||||
|
|||||
@ -0,0 +1,135 @@ |
|||||
|
<template> |
||||
|
<view class="wrap"> |
||||
|
<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType"> |
||||
|
<!-- 手机号 --> |
||||
|
<u-form-item :rightIconStyle="{ color: '#888', fontSize: '32rpx' }" label="手机号码" prop="phone" label-width="160"> |
||||
|
<u-input placeholder="请输入手机号" v-model="model.phone" type="number"></u-input> |
||||
|
</u-form-item> |
||||
|
|
||||
|
<u-form-item label="图形验证码" prop="code" label-width="160"> |
||||
|
<u-input placeholder="请输入图形验证码" v-model="model.code" type="text"></u-input> |
||||
|
<ImageCode slot="right" /> |
||||
|
</u-form-item> |
||||
|
|
||||
|
<u-form-item label="验证码" prop="code" label-width="160"> |
||||
|
<u-input placeholder="请输入短信验证码" v-model="model.code" type="text"></u-input> |
||||
|
<u-button slot="right" type="success" size="mini" @click="getCode">{{ codeTips }}</u-button> |
||||
|
</u-form-item> |
||||
|
</u-form> |
||||
|
<view class="agreement"> |
||||
|
<u-checkbox v-model="check" @change="checkboxChange"></u-checkbox> |
||||
|
<view class="agreement-text"> 勾选代表同意uView的版权协议 </view> |
||||
|
</view> |
||||
|
<u-button @click="submit">提交</u-button> |
||||
|
<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
let that = this; |
||||
|
return { |
||||
|
model: { |
||||
|
phone: '', |
||||
|
code: '', |
||||
|
}, |
||||
|
|
||||
|
rules: { |
||||
|
phone: [ |
||||
|
{ |
||||
|
required: true, |
||||
|
message: '请输入手机号', |
||||
|
trigger: ['change', 'blur'], |
||||
|
}, |
||||
|
{ |
||||
|
validator: (rule, value, callback) => { |
||||
|
// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html |
||||
|
return this.$u.test.mobile(value); |
||||
|
}, |
||||
|
message: '手机号码不正确', |
||||
|
// 触发器可以同时用blur和change，二者之间用英文逗号隔开 |
||||
|
trigger: ['change', 'blur'], |
||||
|
}, |
||||
|
], |
||||
|
code: [ |
||||
|
{ |
||||
|
required: true, |
||||
|
message: '请输入验证码', |
||||
|
trigger: ['change', 'blur'], |
||||
|
}, |
||||
|
{ |
||||
|
type: 'number', |
||||
|
message: '验证码只能为数字', |
||||
|
trigger: ['change', 'blur'], |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
check: false, |
||||
|
codeTips: '', |
||||
|
errorType: ['message'], |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
onReady() { |
||||
|
this.$refs.uForm.setRules(this.rules); |
||||
|
}, |
||||
|
methods: { |
||||
|
submit() { |
||||
|
this.$refs.uForm.validate(valid => { |
||||
|
if (valid) { |
||||
|
if (!this.model.agreement) return this.$u.toast('请勾选协议'); |
||||
|
console.log('验证通过'); |
||||
|
} else { |
||||
|
console.log('验证失败'); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 勾选版权协议 |
||||
|
checkboxChange(e) { |
||||
|
this.model.agreement = e.value; |
||||
|
}, |
||||
|
|
||||
|
codeChange(text) { |
||||
|
this.codeTips = text; |
||||
|
}, |
||||
|
// 获取验证码 |
||||
|
getCode() { |
||||
|
if (this.$refs.uCode.canGetCode) { |
||||
|
// 模拟向后端请求验证码 |
||||
|
uni.showLoading({ |
||||
|
title: '正在获取验证码', |
||||
|
mask: true, |
||||
|
}); |
||||
|
setTimeout(() => { |
||||
|
uni.hideLoading(); |
||||
|
// 这里此提示会被this.start()方法中的提示覆盖 |
||||
|
this.$u.toast('验证码已发送'); |
||||
|
// 通知验证码组件内部开始倒计时 |
||||
|
this.$refs.uCode.start(); |
||||
|
}, 2000); |
||||
|
} else { |
||||
|
this.$u.toast('倒计时结束后再发送'); |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.wrap { |
||||
|
padding: 30rpx; |
||||
|
} |
||||
|
|
||||
|
.agreement { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin: 40rpx 0; |
||||
|
|
||||
|
.agreement-text { |
||||
|
padding-left: 8rpx; |
||||
|
color: $u-tips-color; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue