| | |
| | | <template> |
| | | <view class="container"> |
| | | <u-navbar |
| | | title="个人资料" |
| | | :is-back="true" |
| | | back-text="" |
| | | :back-icon-size="40" |
| | | @left-click="onBackClick" |
| | | > |
| | | |
| | | </u-navbar> |
| | | <view class="pageBg"></view> |
| | | <div class="avatarBox"> |
| | | <!-- @click="uploadAvatar" --> |
| | | <u-avatar :src="userInfo.avatar || defaultAvatar" size="114" mode="aspectFill" /> |
| | |
| | | <div>{{userInfo.deptName}}</div> |
| | | </div> |
| | | <div class="orderRow"> |
| | | <div class="rowTitle">性别</div> |
| | | <div> |
| | | <u-radio-group v-model="userInfo.sex"> |
| | | <up-radio |
| | | v-for="(item, index) in sexList" |
| | | :key="index" |
| | | :label="item.label" |
| | | :name="item.name" |
| | | @change="radioChange" |
| | | > |
| | | </up-radio> |
| | | </u-radio-group> |
| | | </div> |
| | | </div> |
| | | <div class="orderRow"> |
| | | <div class="rowTitle">手机号</div> |
| | | <div>{{userInfo.phone}}</div> |
| | | <!-- <u-input input-align="right" v-model="userInfo.phone" type="number" placeholder="请输入手机号" |
| | |
| | | </div> |
| | | <div class="orderRow"> |
| | | <div class="rowTitle">邮箱</div> |
| | | <div>{{userInfo.email}}</div> |
| | | <!-- <u-input input-align="right" v-model="userInfo.email" type="email" placeholder="请输入邮箱" |
| | | class="input-item" /> --> |
| | | <!-- <div>{{userInfo.email}}</div> --> |
| | | <u-input input-align="right" v-model="userInfo.email" type="email" placeholder="请输入邮箱" |
| | | class="input-item" /> |
| | | </div> |
| | | </div> |
| | | </view> |
| | | <view class="btngroup"> |
| | | <u-button color="#AEAEAE" class="custom-style" shape="circle" @click="reset">重置</u-button> |
| | | <u-button color="#1D6FE9" class="custom-style" shape="circle" @click="submit">提交</u-button> |
| | | <u-button color="#AEAEAE" class="custom-style" @click="reset">重置</u-button> |
| | | <u-button color="#1D6FE9" class="custom-style" @click="submit">提交</u-button> |
| | | </view> |
| | | </view> |
| | | </template> |
| | |
| | | phone: '', |
| | | email: '', |
| | | deptName: '', |
| | | sex: 2, |
| | | }); |
| | | const sexList = [ |
| | | { |
| | | label: '男', |
| | | name: '0' |
| | | }, |
| | | { |
| | | label: '女', |
| | | name: '1' |
| | | }, |
| | | // { |
| | | // label: '未知', |
| | | // name: '2' |
| | | // } |
| | | ] |
| | | // 校验手机号 |
| | | const validatePhone = () => { |
| | | const phone = userInfo.value.phone |
| | |
| | | phone: user.sysDept.phone, |
| | | email: user.sysDept.email, |
| | | deptName: user.sysDept.deptName, |
| | | sex: user.sex || 2, |
| | | }; |
| | | |
| | | }); |
| | |
| | | }); |
| | | |
| | | }; |
| | | // 返回按钮点击事件 |
| | | const onBackClick = () => { |
| | | uni.navigateBack() |
| | | } |
| | | onShow(async () => { |
| | | getUserInfoData() |
| | | }); |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .container { |
| | | width: 100%; |
| | | height: 100%; |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | } |
| | | .container { |
| | | width: 100%; |
| | | height: 100%; |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | position: relative; |
| | | box-sizing: border-box; |
| | | // 添加导航栏高度的padding-top,避免内容被遮挡 |
| | | padding-top: 88rpx; |
| | | |
| | | } |
| | | :deep(){ |
| | | .u-navbar__content{ |
| | | background: url("@/static/images/user/userbg.svg") no-repeat !important; |
| | | background-size: 100%!important; |
| | | height: 44px !important; |
| | | } |
| | | } |
| | | .pageBg { |
| | | position: fixed; |
| | | top: 0; |
| | | left: 0; |
| | | width: 100%; |
| | | height: 100%; |
| | | background: url("@/static/images/user/userbg.svg") no-repeat ; |
| | | background-size: 100%; |
| | | } |
| | | .avatarBox { |
| | | width: 228rpx; |
| | | height: 228rpx; |
| | |
| | | } |
| | | |
| | | .detailBox { |
| | | position: absolute; |
| | | top: 360rpx; |
| | | width: 702rpx; |
| | | min-height: 430rpx; |
| | | background: #FFFFFF; |
| | | border-radius: 12rpx; |
| | | box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05); |
| | | |
| | | margin-top: 88rpx; |
| | | .detailCon { |
| | | padding: 0 24rpx; |
| | | } |
| | |
| | | .custom-style { |
| | | width: 276rpx; |
| | | height: 76rpx; |
| | | font-family: "Source Han Sans CN"; |
| | | font-weight: 400; |
| | | font-size: 28rpx; |
| | | } |
| | | :deep(.u-button.data-v-461e713c){ |
| | | width: 276rpx !important; |