|
|
@@ -1,73 +1,123 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
+ <!-- 顶部导航栏 -->
|
|
|
+ <view class="navbar">
|
|
|
+ <view class="navbar-content">
|
|
|
+ <view class="navbar-left" @click="goBack">
|
|
|
+ <u-icon name="arrow-leftward" size="38" color="#333"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="navbar-title">基本信息</view>
|
|
|
+ <view class="navbar-right"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
<view class="usermain">
|
|
|
<view class="usermain-item ">
|
|
|
- <view>头像</view>
|
|
|
- <!-- #ifdef MP-WEIXIN -->
|
|
|
- <view>
|
|
|
- <button open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
|
|
|
- <image style="width: 111rpx;height: 111rpx;border-radius: 50%"
|
|
|
+ <view class="usermain-item-title">头像</view>
|
|
|
+ <view class="avatar-wrapper">
|
|
|
+ <!-- #ifdef MP-WEIXIN -->
|
|
|
+ <button open-type="chooseAvatar" class="avatar-button" @chooseavatar="onChooseAvatar">
|
|
|
+ <image style="width: 78rpx;height: 78rpx;border-radius: 50%"
|
|
|
:src="avatar?avatar:'../../static/logo.png'"></image>
|
|
|
</button>
|
|
|
+ <!-- #endif -->
|
|
|
+ <!-- #ifndef MP-WEIXIN -->
|
|
|
+ <view @click="uploadImg()">
|
|
|
+ <image src="../../static/logo.png" v-if="avatar==null" mode=""
|
|
|
+ style="width: 78rpx;height: 78rpx;border-radius: 50%;"></image>
|
|
|
+ <image v-else :src="avatar" mode="" style="width: 78rpx;height: 78rpx;border-radius: 50%;">
|
|
|
+ </image>
|
|
|
+ </view>
|
|
|
+ <!-- #endif -->
|
|
|
+ <view class="edit-avatar-icon">
|
|
|
+ <image src="/static/images/index/Combined-Shape.svg" style="width: 32rpx;height: 32rpx;" mode="scaleToFill"></image>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <!-- #endif -->
|
|
|
- <!-- #ifndef MP-WEIXIN -->
|
|
|
- <view @click="uploadImg()">
|
|
|
- <image src="../../static/logo.png" v-if="avatar==null" mode=""
|
|
|
- style="width: 111rpx;height: 111rpx;border-radius: 50%;"></image>
|
|
|
- <image v-else :src="avatar" mode="" style="width: 111rpx;height: 111rpx;border-radius: 50%;">
|
|
|
- </image>
|
|
|
+ </view>
|
|
|
+ <view class="usermain-item item-padding ">
|
|
|
+ <view class="form-label">
|
|
|
+ <text class="required-mark">*</text>
|
|
|
+ <text class="usermain-item-title">姓名</text>
|
|
|
+ </view>
|
|
|
+ <view class="cu-form-group">
|
|
|
+ <input type="nickname" v-model="userName" placeholder="请输入用户名" />
|
|
|
</view>
|
|
|
- <!-- #endif -->
|
|
|
-
|
|
|
</view>
|
|
|
<view class="usermain-item item-padding ">
|
|
|
- <view>用户名</view>
|
|
|
+ <view class="form-label">
|
|
|
+ <text class="required-mark">*</text>
|
|
|
+ <view class="usermain-item-title">性别</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
<view>
|
|
|
<view class="cu-form-group">
|
|
|
- <input type="nickname" v-model="userName" placeholder="请输入用户名" />
|
|
|
+ <u-radio-group v-model="sex">
|
|
|
+ <u-radio shape="circle" :name="1">男</u-radio>
|
|
|
+ <u-radio shape="circle" active-color="red" :name="2">女</u-radio>
|
|
|
+ </u-radio-group>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="usermain-item item-padding ">
|
|
|
- <view>年龄</view>
|
|
|
+ <view class="usermain-item-title">年龄</view>
|
|
|
<view>
|
|
|
<view class="cu-form-group">
|
|
|
<input v-model="age" />
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <view class="usermain-item item-padding contact-structure">
|
|
|
+ <view class="usermain-item-title">联系方式</view>
|
|
|
+ <view class="contact-wrapper">
|
|
|
+ <text class="phone-display">{{phoneWithMask}}</text>
|
|
|
+ <text class="modify-link" @click="modifyPhone">修改手机号</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
<!-- <view class="usermain-item item-padding">
|
|
|
<view >姓名</view>
|
|
|
<view class="cu-form-group">
|
|
|
<input v-model="realName" placeholder="请填写您的真实姓名" />
|
|
|
</view>
|
|
|
</view> -->
|
|
|
-
|
|
|
<view class="usermain-item item-padding ">
|
|
|
- <view>手机</view>
|
|
|
+ <view class="usermain-item-title">微信号码</view>
|
|
|
<view>
|
|
|
<view class="cu-form-group">
|
|
|
- <input v-model="phone" placeholder="请输入联系电话" :disabled="true" />
|
|
|
+ <input v-model="weChatNum" placeholder="请输入微信号码，方便给求职者交换微信联系" />
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="usermain-item item-padding ">
|
|
|
- <view>微信号</view>
|
|
|
+
|
|
|
+ <!-- 接收简历邮箱 -->
|
|
|
+ <view class="usermain-item item-padding">
|
|
|
+ <view class="usermain-item-title">接收简历邮箱</view>
|
|
|
<view>
|
|
|
<view class="cu-form-group">
|
|
|
- <input v-model="weChatNum" placeholder="请输入微信号" />
|
|
|
+ <input v-model="email" placeholder="建议录入企业邮箱" />
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="usermain-item item-padding ">
|
|
|
- <view>性别</view>
|
|
|
+
|
|
|
+ <!-- 我的公司 -->
|
|
|
+ <view class="usermain-item item-padding">
|
|
|
+ <view class="usermain-item-title">我的公司</view>
|
|
|
<view>
|
|
|
- <view class="cu-form-group">
|
|
|
- <u-radio-group v-model="sex">
|
|
|
- <u-radio shape="circle" :name="1">男</u-radio>
|
|
|
- <u-radio shape="circle" active-color="red" :name="2">女</u-radio>
|
|
|
- </u-radio-group>
|
|
|
+ <view class="form-input-selector" @click="selectCompany">
|
|
|
+ <text v-if="selectedCompany">{{ selectedCompany }}</text>
|
|
|
+ <text v-else class="placeholder">请选择公司</text>
|
|
|
+ <u-icon name="arrow-down" color="#999" size="36"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 我的职务 -->
|
|
|
+ <view class="usermain-item item-padding">
|
|
|
+ <view class="usermain-item-title">我的职务</view>
|
|
|
+ <view>
|
|
|
+ <view class="form-input-selector" @click="selectPosition">
|
|
|
+ <text v-if="selectedPosition">{{ selectedPosition }}</text>
|
|
|
+ <text v-else class="placeholder">请选择职务</text>
|
|
|
+ <u-icon name="arrow-down" color="#999" size="36"></u-icon>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -85,6 +135,9 @@
|
|
|
return {
|
|
|
phone: '',
|
|
|
weChatNum:'',//微信号
|
|
|
+ email: '',//接收简历邮箱
|
|
|
+ selectedCompany: '深圳市汉瑞国际猎头服务有限公司', // 我的公司
|
|
|
+ selectedPosition: '人事总监', // 我的职务
|
|
|
avatar: '../../static/logo.png',
|
|
|
userName: '',
|
|
|
nickName: '',
|
|
|
@@ -103,11 +156,44 @@
|
|
|
age: 0
|
|
|
};
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ phoneWithMask() {
|
|
|
+ if (this.phone && this.phone.length >= 11) {
|
|
|
+ return this.phone.substring(0, 3) + '******' + this.phone.substring(9);
|
|
|
+ }
|
|
|
+ return this.phone || '请设置手机号';
|
|
|
+ }
|
|
|
+ },
|
|
|
onLoad(e) {
|
|
|
this.getUserInfo()
|
|
|
// this.avatar = uni.getStorageSync('avatar')
|
|
|
},
|
|
|
methods: {
|
|
|
+ // 返回上一页
|
|
|
+ goBack() {
|
|
|
+ uni.navigateBack();
|
|
|
+ },
|
|
|
+ // 修改手机号
|
|
|
+ modifyPhone() {
|
|
|
+ console.log('点击修改手机号，当前手机号：', this.phone);
|
|
|
+ const url = `/pages/my/userphone?currentPhone=${this.phone}`;
|
|
|
+ console.log('跳转路径：', url);
|
|
|
+
|
|
|
+ uni.navigateTo({
|
|
|
+ url: url,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 选择公司
|
|
|
+ selectCompany() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/my/myCompany'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 选择职务
|
|
|
+ selectPosition() {
|
|
|
+ // 这里可以跳转到职务选择页面或显示职务选择弹窗
|
|
|
+ console.log('选择职务');
|
|
|
+ },
|
|
|
onChooseAvatar(e) {
|
|
|
let that = this;
|
|
|
let token = uni.getStorageSync('token');
|
|
|
@@ -297,11 +383,47 @@
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
+<style lang="scss" scoped>
|
|
|
page {
|
|
|
/* background: #1c1b20; */
|
|
|
}
|
|
|
|
|
|
+ .navbar {
|
|
|
+ background: #fff;
|
|
|
+ padding: 80rpx 0 40rpx 20rpx;
|
|
|
+
|
|
|
+ .navbar-content {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 30rpx;
|
|
|
+ height: 60rpx;
|
|
|
+
|
|
|
+ .navbar-left {
|
|
|
+ width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .navbar-title {
|
|
|
+ color: rgba(23, 23, 37, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 26px;
|
|
|
+ letter-spacing: 0%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .navbar-right {
|
|
|
+ width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
button::after {
|
|
|
border: none;
|
|
|
background-color: none;
|
|
|
@@ -332,12 +454,20 @@
|
|
|
|
|
|
.usermain-item {
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
margin: 0 40rpx;
|
|
|
- padding: 10rpx 0;
|
|
|
- justify-content: space-between;
|
|
|
- border-bottom: 1rpx solid #e5e5e5;
|
|
|
- /* border-bottom: 2rpx solid #f2f2f2; */
|
|
|
+ padding: 20rpx 0;
|
|
|
+ // border-bottom: 1rpx solid rgba(229, 229, 229, 0.3);
|
|
|
+ gap: 16rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .usermain-item-title {
|
|
|
+ color: rgba(31, 44, 55, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 44rpx;
|
|
|
+ text-align: left;
|
|
|
}
|
|
|
|
|
|
.usermain-item.item-padding {
|
|
|
@@ -357,19 +487,173 @@
|
|
|
|
|
|
}
|
|
|
|
|
|
+ /* 姓名字段样式 - 参考basicInfo.vue */
|
|
|
+ .usermain-item .form-label {
|
|
|
+ color: rgba(31, 44, 55, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 44rpx;
|
|
|
+ letter-spacing: 0.5%;
|
|
|
+ text-align: left;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .usermain-item .required-mark {
|
|
|
+ color: #FF3B30;
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .usermain-item .cu-form-group {
|
|
|
+ background: transparent;
|
|
|
+ text-align: left;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .usermain-item .cu-form-group input {
|
|
|
+ width: 100%;
|
|
|
+ height: 68rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ border: 1rpx solid rgba(227, 231, 236, 1);
|
|
|
+ border-radius: 44rpx;
|
|
|
+ color: rgba(23, 23, 37, 1);
|
|
|
+ padding: 0 32rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+
|
|
|
+ .usermain-item .cu-form-group input::placeholder {
|
|
|
+ color: rgba(155, 155, 155, 1);
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 联系方式样式 */
|
|
|
+ .contact-structure {
|
|
|
+ border-bottom: none !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .contact-wrapper {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0;
|
|
|
+ margin-top: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .phone-display {
|
|
|
+ color: rgba(23, 23, 37, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 40rpx;
|
|
|
+ letter-spacing: 0.5%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .modify-link {
|
|
|
+ color: rgba(24, 144, 255, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 40rpx;
|
|
|
+ letter-spacing: 0.5%;
|
|
|
+ cursor: pointer;
|
|
|
+ text-decoration: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .modify-link:active {
|
|
|
+ opacity: 0.7;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 头像编辑图标样式 */
|
|
|
+ .avatar-wrapper {
|
|
|
+ position: relative;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .edit-avatar-icon {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 10rpx;
|
|
|
+ right: 2rpx;
|
|
|
+ width: 24rpx;
|
|
|
+ height: 24rpx;
|
|
|
+ // background: #fff;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .avatar-button {
|
|
|
+ position: relative;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ background: transparent;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+
|
|
|
.footer-btn {
|
|
|
- margin-top: 150rpx;
|
|
|
+ margin-top: 40rpx;
|
|
|
+ padding-bottom: 40rpx;
|
|
|
}
|
|
|
|
|
|
.footer-btn .usermain-btn {
|
|
|
- color: #FFFFFF;
|
|
|
- background: #6696FF;
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ background: rgba(1, 107, 246, 1);
|
|
|
text-align: center;
|
|
|
- width: 450rpx;
|
|
|
+ width: 90%;
|
|
|
height: 80rpx;
|
|
|
- font-size: 28rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
line-height: 80rpx;
|
|
|
- margin: 0 auto;
|
|
|
+ margin: 20rpx auto;
|
|
|
border-radius: 40rpx;
|
|
|
}
|
|
|
+
|
|
|
+ /* 选择器样式 - 参考workExperience页面 */
|
|
|
+ .form-input-selector {
|
|
|
+ width: 100%;
|
|
|
+ height: 68rpx;
|
|
|
+ padding: 0 40rpx;
|
|
|
+ border: 1px solid rgba(227, 231, 236, 1);
|
|
|
+ border-radius: 24px;
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.2s ease;
|
|
|
+
|
|
|
+ .placeholder {
|
|
|
+ color: #999999;
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ text {
|
|
|
+ color: rgba(23, 23, 37, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .arrow-down {
|
|
|
+ color: rgba(96, 98, 102, 1);
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ transform: scale(1.5);
|
|
|
+ }
|
|
|
+
|
|
|
+ .selector-group:active {
|
|
|
+ background: #f5f7fa !important;
|
|
|
+ transform: scale(0.99);
|
|
|
+ }
|
|
|
</style>
|
your_username