|
|
@@ -71,9 +71,27 @@
|
|
|
</view>
|
|
|
</u-modal>
|
|
|
|
|
|
- <u-popup v-model="showPhoneModal" mode="bottom" class="modal">
|
|
|
+ <u-popup v-model="showPhoneModal" mode="bottom" class="modal" border-radius="32">
|
|
|
<view class="modal__content">
|
|
|
- 人生若只如初见，何事秋风悲画扇
|
|
|
+ <view class="top">
|
|
|
+ <view class="top__line"></view>
|
|
|
+ <view class="top__text">更换手机号码</view>
|
|
|
+ </view>
|
|
|
+ <view class="form">
|
|
|
+ <u-form :model="telForm" ref="telForm">
|
|
|
+ <view class="input-wrap">
|
|
|
+ <u-form-item><u-input placeholder="手机号码" v-model="telForm.tel" /></u-form-item>
|
|
|
+ <u-form-item>
|
|
|
+ <u-input placeholder="验证码" v-model="telForm.code" />
|
|
|
+ <view slot="right" @click="getCode" class="getcode">获取验证码</view>
|
|
|
+ </u-form-item>
|
|
|
+ </view>
|
|
|
+ <view class="btns">
|
|
|
+ <view class="cancel" @click="showPhoneModal = false;">取消</view>
|
|
|
+ <view class="submit">确认更换</view>
|
|
|
+ </view>
|
|
|
+ </u-form>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</u-popup>
|
|
|
<u-navbar title="我的资料" :border-bottom="false" background="{ background: '#ffffff',opacity:0.4; }" title-color="#ffffff" back-icon-color="#ffffff">
|
|
|
@@ -92,6 +110,10 @@ export default {
|
|
|
avatar:'',
|
|
|
userBirth:new Date()
|
|
|
},
|
|
|
+ telForm:{
|
|
|
+ tel:'',
|
|
|
+ code:'',
|
|
|
+ },
|
|
|
array_sex: ['男', '女'],
|
|
|
n_show:false,
|
|
|
defaultRegionCode: '440112',
|
|
|
@@ -367,12 +389,80 @@ export default {
|
|
|
|
|
|
.modal {
|
|
|
&__content {
|
|
|
+ position:relative;
|
|
|
width: 750rpx;
|
|
|
height: 1208rpx;
|
|
|
background: #FFFFFF;
|
|
|
box-shadow: 0px 0px 16rpx 4rpx #919CB2;
|
|
|
- border-radius: 32rpx 0rpx 0rpx 32rpx;
|
|
|
+ border-radius: 32rpx 32rpx 0rpx 0rpx ;
|
|
|
overflow: hidden;
|
|
|
+
|
|
|
+ .top {
|
|
|
+ border-bottom: 1rpx solid #eee;
|
|
|
+ &__line {
|
|
|
+ position: absolute;
|
|
|
+ top: 10rpx;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ width: 80rpx;
|
|
|
+ height: 8rpx;
|
|
|
+ background-color: #999;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &__text {
|
|
|
+ height: 77rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 90rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .form {
|
|
|
+ margin: 24rpx auto 0;
|
|
|
+ width: 686rpx;
|
|
|
+ height: 360rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 24rpx 24rpx 24rpx 24rpx;
|
|
|
+
|
|
|
+ .input-wrap {
|
|
|
+ padding:20rpx 80rpx;
|
|
|
+
|
|
|
+ .getcode {
|
|
|
+ color:#007AFF;
|
|
|
+ font-size: 30rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btns {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top:160rpx;
|
|
|
+ .cancel {
|
|
|
+ text-align: center;
|
|
|
+ line-height: 80rpx;
|
|
|
+ color:#007AFF;
|
|
|
+ width: 200rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ background: #F5F5F5;
|
|
|
+ border-radius: 40rpx 40rpx 40rpx 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .submit {
|
|
|
+ text-align: center;
|
|
|
+ line-height: 80rpx;
|
|
|
+ color:#fff;
|
|
|
+ font-size: 30rpx;
|
|
|
+ width: 438rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ background: #007AFF;
|
|
|
+ border-radius: 40rpx 40rpx 40rpx 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|
chenxiong