微信小程序 更改手机号弹出框

 

/* <!-- changePhone --> */

.show-btn {

margin-top: 100rpx;

color: #22cc22;

}

 

.modal-mask {

width: 100%;

height: 100%;

position: fixed;

top: 0;

left: 0;

background: #000;

opacity: 0.5;

overflow: hidden;

z-index: 9000;

color: #fff;

}

 

.modal-dialog {

/* width: 540rpx; */

width: 86%;

overflow: hidden;

position: fixed;

top: 50%;

left: 0;

z-index: 9999;

background: #f9f9f9;

/* margin: -180rpx 105rpx; */

margin-left: 7%;

margin-top: -180px;

border-radius: 36rpx;

}

 

.modal-title {

padding-top: 50rpx;

font-size: 36rpx;

color: #030303;

text-align: center;

}

 

.modal-content {

padding: 10rpx 32rpx 30rpx 32rpx;

}

 

.modal-input {

display: flex;

background: #fff;

/* border: 2rpx solid #ddd; */

border-radius: 4rpx;

font-size: 28rpx;

flex-direction: column;

background: #f9f9f9;

}

 

.modal-input-div {

display: flex;

/* background: #fff; */

justify-content: center;

align-items: center;

text-align: center;

background: #f9f9f9;

margin-top: 20px;

/* border: 2rpx solid #ddd; */

/* border-radius: 4rpx; */

/* font-size: 28rpx; */

 

height: 40px;

}

.text {

flex: 0 0 60px;

background: #f9f9f9;

text-align: left;

}

.btn-text {

background-color: #fd4343;

width: 60px;

height: 40px;

flex: 0 0 100px;

color: white;

border-radius: 40px;

margin-left: 20px;

line-height: 40px;

}

.input {

width: 100%;

height: 82rpx;

font-size: 28rpx;

line-height: 28rpx;

padding: 0 20rpx;

box-sizing: border-box;

color: #333;

border: 2rpx solid #ddd;

background-color: white;

text-align: left;

}

 

input-holder {

color: #666;

font-size: 28rpx;

/* background-color: white; */

/* text-align: left; */

}

 

.modal-footer {

display: flex;

flex-direction: row;

height: 86rpx;

border-top: 1px solid #dedede;

font-size: 34rpx;

line-height: 86rpx;

margin-top: 20px;

}

 

.btn-cancel {

width: 50%;

color: #666;

text-align: center;

border-right: 1px solid #dedede;

}

 

.btn-confirm {

width: 50%;

color: #fd4343;

text-align: center;

}

/* <!-- changePhoneEnd --> */

<!-- changePhone -->

<view class='containerPromotion' bindtap ="clickCell">

 

<!--弹窗-->

<view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>

<view class="modal-dialog" wx:if="{{showModal}}">

<view class="modal-title">验证手机号</view>

<view class="modal-content">

<view class="modal-input">

<view class="modal-input-div">

<text class="text">手机号</text>

<input placeholder-class="input-holder" type="number" bindinput="inputValuePhone" maxlength="11" class="input" placeholder="请输入手机号"> </input>

</view>

<view class="modal-input-div">

<text class="text">验证码</text>

<input placeholder-class="input-holder" type="number" bindinput="inputValueCode" maxlength="6" class="input" placeholder="请输入验证码"></input>

<text class="btn-text" bindtap="onClickBtn">{{theString}}</text>

</view>

</view>

</view>

<view class="modal-footer">

<view class="btn-cancel" bindtap="onCancel" data-status="cancel">取消</view>

<view class="btn-confirm" bindtap="onConfirm" data-status="confirm">确定</view>

</view>

</view>

 

</view>

 

<!-- changePhoneEnd -->

 

/**changePhone*/

showModal: false,

timer: "",

timerNum: 60,

theString: "获取验证码",

phoneNum: "",

codeNum: ""

/**changePhoneEnd*/