attach the code:
< style lang= "less" >
.container {
padding: 50rpx;
.login-avatar{
margin: 0 auto;
image{
width: 250rpx;
height:250rpx;
}
}
.login-area{
width: 100%;
.input-wrap {
position: relative;
margin: 20rpx 10rpx 0 10rpx;
}
.tips {
display: flex;
position: absolute;
top: 50%;
right: 0;
font-size: 0;
transform: translate(0, -50%);
-webkit-transform: -webkit-translate(0, -50%);
z-index: 100;
}
.clear-wrap {
display: flex;
width: 40rpx;
height:104rpx;
align-items:center;
justify-content: flex-end;
}
.warn-tip {
line-height: 104rpx;
font-size: 28rpx;
color: -sharpff5777;
}
}
}
< / style >
< template >
< view class= "container" >
<view class="login-avatar">
<image src="img/logo.png"></image>
</view>
<view class="login-area">
<view class="input-wrap">
<wxc-input type="number"
src="https://s10.mogucdn.com/mlcdn/c45406/171025_7abllhkc011ka5kici7532af6202g_28x40.png"
value="{{mobileNumber}}"
placeholder=""
maxlength="11"
data-type="mobile"
bind:input="onInput"
bind:blur="onBlur">
</wxc-input>
<view class="tips">
<text wx:if="{{mobileTip}}" class="warn-tip"></text>
<view wx:if="{{mobileNumber && mobileNumber.length}}" class="clear-wrap" data-type="mobile" bindtap="clearInput">
<icon type="clear" size="14" color="-sharpccc"/>
</view>
</view>
</view>
<view class="input-wrap">
<wxc-input type="number"
src="https://s10.mogucdn.com/mlcdn/c45406/171024_4dk50g015la22946k786bi8je3j3d_60x60.png"
value="{{qqNumber}}"
placeholder="QQ"
maxlength="11"
data-type="qq"
bind:input="onInput"
bind:blur="onBlur">
</wxc-input>
<view class="tips">
<text wx:if="{{qqTip}}" class="warn-tip">QQ</text>
<view wx:if="{{qqNumber && qqNumber.length}}" class="clear-wrap" data-type="qq" bindtap="clearInput">
<icon type="clear" size="14" color="-sharpccc"/>
</view>
</view>
</view>
</view>
< / view >
< / template >
< script >
import wepy from "wepy"
import {connect} from" wepy-redux"
/ / console.log ("moduleA ignored:", moduleA) / / = > moduleA ignored: {}
@ connect ({
/ * num (state) {
return state.counter.num
},
asyncNum (state) {
return state.counter.asyncNum
},
sumNum (state) {
return state.counter.num + state.counter.asyncNum
}*/
})
export default class Index extends wepy.page {
config = {
navigationBarTitleText: "",
usingComponents: {
"wxc-input": "../../minui/@minui/wxc-input/dist/index"
}
}
components = {
}
data = {
mobileNumber: "12655324",
qqNumber: "01223",
mobileTip: true,
qqTip: true
}
computed = {
}
methods = {
tap () {
console.log("do noting from " + this.$name)
},
onInput(e) {
let type = e.target.dataset.type;
let number = e.detail.value;
this.setData({
[type + "Number"]: number
});
this.validate(number, type);
},
onBlur(e) {
let type = e.target.dataset.type;
let number = e.detail.value;
this.validate(number, type);
},
clearInput(e) {
let type = e.currentTarget.dataset.type;
this.setData({
[type + "Number"]: "",
[type + "Tip"]: false
});
},
validate(number, type) {
if (type === "mobile") {
this.validateTelephone(number);
}
if (type === "qq") {
this.validateQQ(number);
}
},
validateTelephone(number) {
let regPhone = /^1(3|4|5|7|8)\d{9}$/;
let tip = false;
if (!regPhone.test(number) && number.length > 0) {
// 7
tip = true;
}
this.setData({
mobileTip: tip
});
},
validateQQ(number) {
let tip = false;
let regQQ = /^[1-9]\d{4,10}$/;
if (!regQQ.test(number) && number.length > 0) {
// 4qq
tip = true;
}
this.setData({
qqTip: tip
});
}
}
events = {
}
onLoad() {
let self = this
this.$parent.getUserInfo(function (userInfo) {
if (userInfo) {
self.userInfo = userInfo
}
self.normalTitle = ""
self.setTimeoutTitle = ""
setTimeout(() => {
self.setTimeoutTitle = ""
self.$apply()
}, 3000)
self.$apply()
})
}
}
< / script >
this is a file with the suffix .wpy. After parsing, it is placed on Mini Program"s development tool, and the console will print an error
minui:https://meili.github.io/min/d...
:methods
.