You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
899 lines
21 KiB
899 lines
21 KiB
<template>
|
|
<view class="personnel-form-container">
|
|
<!-- 自定义导航栏 -->
|
|
<view class="custom-nav">
|
|
<view class="nav-left" @click="goBack">
|
|
<text class="iconfont icon-arrow-left"></text>
|
|
</view>
|
|
<view class="nav-title">新员工信息填写</view>
|
|
<view class="nav-right"></view>
|
|
</view>
|
|
|
|
<!-- 进度条 -->
|
|
<view class="progress-container">
|
|
<view class="progress-bar">
|
|
<view class="progress-step" :class="currentStep >= 1 ? 'active' : ''">
|
|
<text class="step-number">1</text>
|
|
<text class="step-text">基本信息</text>
|
|
</view>
|
|
<view class="progress-line" :class="currentStep >= 2 ? 'active' : ''"></view>
|
|
<view class="progress-step" :class="currentStep >= 2 ? 'active' : ''">
|
|
<text class="step-number">2</text>
|
|
<text class="step-text">详细信息</text>
|
|
</view>
|
|
<view class="progress-line" :class="currentStep >= 3 ? 'active' : ''"></view>
|
|
<view class="progress-step" :class="currentStep >= 3 ? 'active' : ''">
|
|
<text class="step-number">3</text>
|
|
<text class="step-text">确认提交</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 表单内容 -->
|
|
<view class="form-content">
|
|
<!-- 第一步：基本信息 -->
|
|
<view v-if="currentStep === 1" class="step-content">
|
|
<view class="section-title">基本信息</view>
|
|
|
|
<!-- 头像上传 -->
|
|
<view class="form-item">
|
|
<view class="label">头像</view>
|
|
<view class="avatar-upload" @click="chooseAvatar">
|
|
<image v-if="formData.head_img" :src="formData.head_img" class="avatar-preview"></image>
|
|
<view v-else class="avatar-placeholder">
|
|
<text class="iconfont icon-camera"></text>
|
|
<text class="placeholder-text">点击上传头像</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 姓名 -->
|
|
<view class="form-item required">
|
|
<view class="label">姓名</view>
|
|
<input class="form-input" v-model="formData.name" placeholder="请输入姓名" />
|
|
</view>
|
|
|
|
<!-- 性别 -->
|
|
<view class="form-item required">
|
|
<view class="label">性别</view>
|
|
<view class="radio-group">
|
|
<label class="radio-item" @click="formData.gender = 1">
|
|
<view class="radio" :class="formData.gender === 1 ? 'checked' : ''"></view>
|
|
<text>男</text>
|
|
</label>
|
|
<label class="radio-item" @click="formData.gender = 0">
|
|
<view class="radio" :class="formData.gender === 0 ? 'checked' : ''"></view>
|
|
<text>女</text>
|
|
</label>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 生日 -->
|
|
<view class="form-item">
|
|
<view class="label">出生日期</view>
|
|
<picker mode="date" :value="formData.birthday" @change="onBirthdayChange">
|
|
<view class="picker-input">
|
|
{{formData.birthday || '请选择出生日期'}}
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
|
|
<!-- 手机号 -->
|
|
<view class="form-item required">
|
|
<view class="label">手机号码</view>
|
|
<input class="form-input" v-model="formData.phone" placeholder="请输入手机号码" type="number" />
|
|
</view>
|
|
|
|
<!-- 邮箱 -->
|
|
<view class="form-item">
|
|
<view class="label">邮箱</view>
|
|
<input class="form-input" v-model="formData.email" placeholder="请输入邮箱地址" />
|
|
</view>
|
|
|
|
<!-- 微信号 -->
|
|
<view class="form-item">
|
|
<view class="label">微信号</view>
|
|
<input class="form-input" v-model="formData.wx" placeholder="请输入微信号" />
|
|
</view>
|
|
|
|
<!-- 账号类型 -->
|
|
<view class="form-item required">
|
|
<view class="label">职位类型</view>
|
|
<view class="radio-group">
|
|
<label class="radio-item" @click="formData.account_type = 'teacher'">
|
|
<view class="radio" :class="formData.account_type === 'teacher' ? 'checked' : ''"></view>
|
|
<text>教师</text>
|
|
</label>
|
|
<label class="radio-item" @click="formData.account_type = 'market'">
|
|
<view class="radio" :class="formData.account_type === 'market' ? 'checked' : ''"></view>
|
|
<text>市场</text>
|
|
</label>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 入职时间 -->
|
|
<view class="form-item">
|
|
<view class="label">入职时间</view>
|
|
<picker mode="date" :value="formData.join_time" @change="onJoinTimeChange">
|
|
<view class="picker-input">
|
|
{{formData.join_time || '请选择入职时间'}}
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 第二步：详细信息 -->
|
|
<view v-if="currentStep === 2" class="step-content">
|
|
<view class="section-title">详细信息</view>
|
|
|
|
<!-- 民族 -->
|
|
<view class="form-item">
|
|
<view class="label">民族</view>
|
|
<input class="form-input" v-model="detailData.ethnicity" placeholder="请输入民族" />
|
|
</view>
|
|
|
|
<!-- 年龄 -->
|
|
<view class="form-item">
|
|
<view class="label">年龄</view>
|
|
<input class="form-input" v-model.number="detailData.age" placeholder="请输入年龄" type="number" />
|
|
</view>
|
|
|
|
<!-- 政治面貌 -->
|
|
<view class="form-item">
|
|
<view class="label">政治面貌</view>
|
|
<picker :range="politicsOptions" @change="onPoliticsChange">
|
|
<view class="picker-input">
|
|
{{detailData.politics || '请选择政治面貌'}}
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
|
|
<!-- 毕业院校 -->
|
|
<view class="form-item">
|
|
<view class="label">毕业院校</view>
|
|
<input class="form-input" v-model="detailData.university" placeholder="请输入毕业院校" />
|
|
</view>
|
|
|
|
<!-- 学历 -->
|
|
<view class="form-item">
|
|
<view class="label">学历</view>
|
|
<picker :range="educationOptions" @change="onEducationChange">
|
|
<view class="picker-input">
|
|
{{detailData.education || '请选择学历'}}
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
|
|
<!-- 专业 -->
|
|
<view class="form-item">
|
|
<view class="label">专业</view>
|
|
<input class="form-input" v-model="detailData.major" placeholder="请输入专业" />
|
|
</view>
|
|
|
|
<!-- 毕业日期 -->
|
|
<view class="form-item">
|
|
<view class="label">毕业日期</view>
|
|
<picker mode="date" :value="detailData.graduation_date" @change="onGraduationDateChange">
|
|
<view class="picker-input">
|
|
{{detailData.graduation_date || '请选择毕业日期'}}
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
|
|
<!-- 籍贯 -->
|
|
<view class="form-item">
|
|
<view class="label">籍贯</view>
|
|
<input class="form-input" v-model="detailData.native_place" placeholder="请输入籍贯" />
|
|
</view>
|
|
|
|
<!-- 户口所在地 -->
|
|
<view class="form-item">
|
|
<view class="label">户口所在地</view>
|
|
<input class="form-input" v-model="detailData.household_place" placeholder="请输入户口所在地" />
|
|
</view>
|
|
|
|
<!-- 户口性质 -->
|
|
<view class="form-item">
|
|
<view class="label">户口性质</view>
|
|
<picker :range="householdTypeOptions" @change="onHouseholdTypeChange">
|
|
<view class="picker-input">
|
|
{{detailData.household_type || '请选择户口性质'}}
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
|
|
<!-- 户籍地址 -->
|
|
<view class="form-item">
|
|
<view class="label">户籍地址</view>
|
|
<textarea class="form-textarea" v-model="detailData.household_address" placeholder="请输入户籍地址"></textarea>
|
|
</view>
|
|
|
|
<!-- 现居地址 -->
|
|
<view class="form-item">
|
|
<view class="label">现居地址</view>
|
|
<textarea class="form-textarea" v-model="detailData.current_address" placeholder="请输入现居地址"></textarea>
|
|
</view>
|
|
|
|
<!-- 紧急联系人 -->
|
|
<view class="form-item">
|
|
<view class="label">紧急联系人</view>
|
|
<input class="form-input" v-model="detailData.emergency_contact" placeholder="请输入紧急联系人姓名" />
|
|
</view>
|
|
|
|
<!-- 紧急联系电话 -->
|
|
<view class="form-item">
|
|
<view class="label">紧急联系电话</view>
|
|
<input class="form-input" v-model="detailData.emergency_phone" placeholder="请输入紧急联系电话" type="number" />
|
|
</view>
|
|
|
|
<!-- 婚姻状况 -->
|
|
<view class="form-item">
|
|
<view class="label">婚姻状况</view>
|
|
<picker :range="maritalStatusOptions" @change="onMaritalStatusChange">
|
|
<view class="picker-input">
|
|
{{detailData.marital_status || '请选择婚姻状况'}}
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
|
|
<!-- 银行卡号 -->
|
|
<view class="form-item">
|
|
<view class="label">银行卡号</view>
|
|
<input class="form-input" v-model="detailData.bank_card" placeholder="请输入银行卡号" type="number" />
|
|
</view>
|
|
|
|
<!-- 开户银行 -->
|
|
<view class="form-item">
|
|
<view class="label">开户银行</view>
|
|
<input class="form-input" v-model="detailData.bank_name" placeholder="请输入开户银行" />
|
|
</view>
|
|
|
|
<!-- 备注 -->
|
|
<view class="form-item">
|
|
<view class="label">备注</view>
|
|
<textarea class="form-textarea" v-model="detailData.remark" placeholder="请输入备注信息"></textarea>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 第三步：确认信息 -->
|
|
<view v-if="currentStep === 3" class="step-content">
|
|
<view class="section-title">确认信息</view>
|
|
<view class="confirm-info">
|
|
<view class="info-section">
|
|
<view class="info-title">基本信息</view>
|
|
<view class="info-item">
|
|
<text class="info-label">姓名：</text>
|
|
<text class="info-value">{{formData.name}}</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="info-label">性别：</text>
|
|
<text class="info-value">{{formData.gender === 1 ? '男' : '女'}}</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="info-label">手机：</text>
|
|
<text class="info-value">{{formData.phone}}</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="info-label">职位：</text>
|
|
<text class="info-value">{{formData.account_type === 'teacher' ? '教师' : '市场'}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="info-section">
|
|
<view class="info-title">详细信息</view>
|
|
<view class="info-item" v-if="detailData.education">
|
|
<text class="info-label">学历：</text>
|
|
<text class="info-value">{{detailData.education}}</text>
|
|
</view>
|
|
<view class="info-item" v-if="detailData.university">
|
|
<text class="info-label">毕业院校：</text>
|
|
<text class="info-value">{{detailData.university}}</text>
|
|
</view>
|
|
<view class="info-item" v-if="detailData.emergency_contact">
|
|
<text class="info-label">紧急联系人：</text>
|
|
<text class="info-value">{{detailData.emergency_contact}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部按钮 -->
|
|
<view class="footer-buttons">
|
|
<button v-if="currentStep > 1" class="btn btn-secondary" @click="prevStep">上一步</button>
|
|
<button v-if="currentStep < 3" class="btn btn-primary" @click="nextStep">下一步</button>
|
|
<button v-if="currentStep === 3" class="btn btn-primary" @click="submitForm" :loading="submitting">提交</button>
|
|
</view>
|
|
|
|
<!-- 加载提示 -->
|
|
<uni-load-more v-if="submitting" status="loading" content-text="正在提交..."></uni-load-more>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import apiRoute from '@/common/axios.js'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
currentStep: 1,
|
|
submitting: false,
|
|
// 基本信息
|
|
formData: {
|
|
name: '',
|
|
head_img: '',
|
|
gender: null,
|
|
birthday: '',
|
|
phone: '',
|
|
email: '',
|
|
wx: '',
|
|
account_type: '',
|
|
join_time: ''
|
|
},
|
|
// 详细信息
|
|
detailData: {
|
|
ethnicity: '',
|
|
age: null,
|
|
politics: '',
|
|
university: '',
|
|
education: '',
|
|
major: '',
|
|
graduation_date: '',
|
|
native_place: '',
|
|
household_place: '',
|
|
household_type: '',
|
|
household_address: '',
|
|
current_address: '',
|
|
emergency_contact: '',
|
|
emergency_phone: '',
|
|
marital_status: '',
|
|
bank_card: '',
|
|
bank_name: '',
|
|
remark: ''
|
|
},
|
|
// 选项数据
|
|
politicsOptions: ['群众', '共青团员', '中共党员', '民主党派', '无党派人士'],
|
|
educationOptions: ['高中', '中专', '大专', '本科', '硕士', '博士'],
|
|
householdTypeOptions: ['城镇', '农村'],
|
|
maritalStatusOptions: ['未婚', '已婚', '离异', '丧偶']
|
|
}
|
|
},
|
|
onLoad() {
|
|
// 设置当前日期为默认入职时间
|
|
const today = new Date()
|
|
const year = today.getFullYear()
|
|
const month = String(today.getMonth() + 1).padStart(2, '0')
|
|
const day = String(today.getDate()).padStart(2, '0')
|
|
this.formData.join_time = `${year}-${month}-${day}`
|
|
},
|
|
methods: {
|
|
// 返回上一页
|
|
goBack() {
|
|
uni.navigateBack()
|
|
},
|
|
|
|
// 选择头像
|
|
chooseAvatar() {
|
|
uni.chooseImage({
|
|
count: 1,
|
|
sizeType: ['compressed'],
|
|
sourceType: ['album', 'camera'],
|
|
success: (res) => {
|
|
const tempFilePath = res.tempFilePaths[0]
|
|
this.uploadAvatar(tempFilePath)
|
|
}
|
|
})
|
|
},
|
|
|
|
// 上传头像
|
|
uploadAvatar(filePath) {
|
|
uni.showLoading({ title: '上传中...' })
|
|
|
|
uni.uploadFile({
|
|
url: this.$baseUrl + '/file/avatar',
|
|
filePath: filePath,
|
|
name: 'file',
|
|
success: (res) => {
|
|
const data = JSON.parse(res.data)
|
|
if (data.code === 1) {
|
|
this.formData.head_img = data.data.url
|
|
uni.showToast({ title: '头像上传成功', icon: 'success' })
|
|
} else {
|
|
uni.showToast({ title: data.msg || '上传失败', icon: 'none' })
|
|
}
|
|
},
|
|
fail: (error) => {
|
|
console.error('头像上传失败:', error)
|
|
uni.showToast({ title: '上传失败', icon: 'none' })
|
|
},
|
|
complete: () => {
|
|
uni.hideLoading()
|
|
}
|
|
})
|
|
},
|
|
|
|
// 日期选择事件
|
|
onBirthdayChange(e) {
|
|
this.formData.birthday = e.detail.value
|
|
// 自动计算年龄
|
|
this.calculateAge()
|
|
},
|
|
|
|
onJoinTimeChange(e) {
|
|
this.formData.join_time = e.detail.value
|
|
},
|
|
|
|
onGraduationDateChange(e) {
|
|
this.detailData.graduation_date = e.detail.value
|
|
},
|
|
|
|
// 下拉选择事件
|
|
onPoliticsChange(e) {
|
|
this.detailData.politics = this.politicsOptions[e.detail.value]
|
|
},
|
|
|
|
onEducationChange(e) {
|
|
this.detailData.education = this.educationOptions[e.detail.value]
|
|
},
|
|
|
|
onHouseholdTypeChange(e) {
|
|
this.detailData.household_type = this.householdTypeOptions[e.detail.value]
|
|
},
|
|
|
|
onMaritalStatusChange(e) {
|
|
this.detailData.marital_status = this.maritalStatusOptions[e.detail.value]
|
|
},
|
|
|
|
// 计算年龄
|
|
calculateAge() {
|
|
if (this.formData.birthday) {
|
|
const birthDate = new Date(this.formData.birthday)
|
|
const today = new Date()
|
|
let age = today.getFullYear() - birthDate.getFullYear()
|
|
const monthDiff = today.getMonth() - birthDate.getMonth()
|
|
|
|
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
|
|
age--
|
|
}
|
|
|
|
this.detailData.age = age
|
|
}
|
|
},
|
|
|
|
// 步骤控制
|
|
nextStep() {
|
|
if (this.validateCurrentStep()) {
|
|
this.currentStep++
|
|
}
|
|
},
|
|
|
|
prevStep() {
|
|
this.currentStep--
|
|
},
|
|
|
|
// 验证当前步骤
|
|
validateCurrentStep() {
|
|
if (this.currentStep === 1) {
|
|
if (!this.formData.name) {
|
|
uni.showToast({ title: '请输入姓名', icon: 'none' })
|
|
return false
|
|
}
|
|
if (this.formData.gender === null) {
|
|
uni.showToast({ title: '请选择性别', icon: 'none' })
|
|
return false
|
|
}
|
|
if (!this.formData.phone) {
|
|
uni.showToast({ title: '请输入手机号码', icon: 'none' })
|
|
return false
|
|
}
|
|
if (!/^1[3-9]\d{9}$/.test(this.formData.phone)) {
|
|
uni.showToast({ title: '请输入正确的手机号码', icon: 'none' })
|
|
return false
|
|
}
|
|
if (!this.formData.account_type) {
|
|
uni.showToast({ title: '请选择职位类型', icon: 'none' })
|
|
return false
|
|
}
|
|
}
|
|
return true
|
|
},
|
|
|
|
// 提交表单
|
|
async submitForm() {
|
|
if (!this.validateCurrentStep()) {
|
|
return
|
|
}
|
|
|
|
this.submitting = true
|
|
|
|
try {
|
|
const submitData = {
|
|
...this.formData,
|
|
...this.detailData
|
|
}
|
|
|
|
const response = await apiRoute.post('personnel/add', submitData)
|
|
|
|
if (response.data.code === 1) {
|
|
uni.showToast({
|
|
title: '员工信息提交成功',
|
|
icon: 'success',
|
|
duration: 2000
|
|
})
|
|
|
|
setTimeout(() => {
|
|
uni.navigateBack()
|
|
}, 2000)
|
|
} else {
|
|
uni.showToast({
|
|
title: response.data.msg || '提交失败',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
} catch (error) {
|
|
console.error('提交员工信息失败:', error)
|
|
uni.showToast({
|
|
title: '网络错误，请稍后重试',
|
|
icon: 'none'
|
|
})
|
|
} finally {
|
|
this.submitting = false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.personnel-form-container {
|
|
min-height: 100vh;
|
|
background-color: #f5f5f5;
|
|
padding-bottom: 120rpx;
|
|
}
|
|
|
|
/* 自定义导航栏 */
|
|
.custom-nav {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 88rpx;
|
|
padding: 0 32rpx;
|
|
background-color: #fff;
|
|
border-bottom: 1rpx solid #e5e5e5;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
|
|
.nav-left {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.iconfont {
|
|
font-size: 36rpx;
|
|
color: #333;
|
|
}
|
|
}
|
|
|
|
.nav-title {
|
|
font-size: 36rpx;
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
|
|
.nav-right {
|
|
width: 80rpx;
|
|
}
|
|
}
|
|
|
|
/* 进度条 */
|
|
.progress-container {
|
|
background-color: #fff;
|
|
padding: 40rpx 32rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.progress-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.progress-step {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
flex: 1;
|
|
|
|
.step-number {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
border-radius: 50%;
|
|
background-color: #e5e5e5;
|
|
color: #999;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.step-text {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
|
|
&.active {
|
|
.step-number {
|
|
background-color: #007ACC;
|
|
color: #fff;
|
|
}
|
|
|
|
.step-text {
|
|
color: #007ACC;
|
|
}
|
|
}
|
|
}
|
|
|
|
.progress-line {
|
|
flex: 1;
|
|
height: 4rpx;
|
|
background-color: #e5e5e5;
|
|
margin: 0 20rpx;
|
|
margin-top: -30rpx;
|
|
|
|
&.active {
|
|
background-color: #007ACC;
|
|
}
|
|
}
|
|
|
|
/* 表单内容 */
|
|
.form-content {
|
|
background-color: #fff;
|
|
margin: 0 20rpx 20rpx;
|
|
border-radius: 16rpx;
|
|
padding: 32rpx;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 36rpx;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 40rpx;
|
|
border-left: 8rpx solid #007ACC;
|
|
padding-left: 20rpx;
|
|
}
|
|
|
|
.form-item {
|
|
margin-bottom: 40rpx;
|
|
|
|
&.required .label::before {
|
|
content: '*';
|
|
color: #ff4d4f;
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
.label {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
margin-bottom: 16rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.form-input,
|
|
.picker-input {
|
|
width: 100%;
|
|
height: 88rpx;
|
|
border: 2rpx solid #e5e5e5;
|
|
border-radius: 12rpx;
|
|
padding: 0 24rpx;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
background-color: #fff;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&:focus {
|
|
border-color: #007ACC;
|
|
}
|
|
}
|
|
|
|
.form-textarea {
|
|
width: 100%;
|
|
min-height: 120rpx;
|
|
border: 2rpx solid #e5e5e5;
|
|
border-radius: 12rpx;
|
|
padding: 20rpx 24rpx;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
background-color: #fff;
|
|
box-sizing: border-box;
|
|
resize: none;
|
|
|
|
&:focus {
|
|
border-color: #007ACC;
|
|
}
|
|
}
|
|
|
|
.picker-input {
|
|
color: #999;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
/* 头像上传 */
|
|
.avatar-upload {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border: 2rpx solid #e5e5e5;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
|
|
.avatar-preview {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.avatar-placeholder {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #999;
|
|
|
|
.iconfont {
|
|
font-size: 32rpx;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.placeholder-text {
|
|
font-size: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 单选按钮组 */
|
|
.radio-group {
|
|
display: flex;
|
|
gap: 60rpx;
|
|
}
|
|
|
|
.radio-item {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
|
|
.radio {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
border: 2rpx solid #e5e5e5;
|
|
border-radius: 50%;
|
|
margin-right: 16rpx;
|
|
position: relative;
|
|
|
|
&.checked {
|
|
border-color: #007ACC;
|
|
|
|
&::after {
|
|
content: '';
|
|
width: 16rpx;
|
|
height: 16rpx;
|
|
background-color: #007ACC;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
}
|
|
}
|
|
|
|
text {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
}
|
|
}
|
|
|
|
/* 确认信息 */
|
|
.confirm-info {
|
|
.info-section {
|
|
margin-bottom: 40rpx;
|
|
|
|
.info-title {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 24rpx;
|
|
border-left: 6rpx solid #007ACC;
|
|
padding-left: 16rpx;
|
|
}
|
|
|
|
.info-item {
|
|
display: flex;
|
|
margin-bottom: 16rpx;
|
|
|
|
.info-label {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
width: 120rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.info-value {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 底部按钮 */
|
|
.footer-buttons {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: #fff;
|
|
padding: 24rpx 32rpx 24rpx;
|
|
border-top: 1rpx solid #e5e5e5;
|
|
display: flex;
|
|
gap: 24rpx;
|
|
z-index: 100;
|
|
|
|
.btn {
|
|
flex: 1;
|
|
height: 88rpx;
|
|
border-radius: 12rpx;
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
border: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
&.btn-primary {
|
|
background-color: #007ACC;
|
|
color: #fff;
|
|
|
|
&:active {
|
|
background-color: #0056b3;
|
|
}
|
|
}
|
|
|
|
&.btn-secondary {
|
|
background-color: #f5f5f5;
|
|
color: #666;
|
|
|
|
&:active {
|
|
background-color: #e5e5e5;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 步骤内容动画 */
|
|
.step-content {
|
|
animation: fadeIn 0.3s ease-in-out;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(20rpx);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
</style>
|