|
@@ -0,0 +1,452 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <view class="add-resource">
|
|
|
|
|
+ <!-- 顶部导航栏 -->
|
|
|
|
|
+ <view class="header">
|
|
|
|
|
+ <view class="back-btn" @click="goBack">
|
|
|
|
|
+ <text class="back-icon">‹</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <text class="header-title">信息录入</text>
|
|
|
|
|
+ <view class="header-right">
|
|
|
|
|
+ <text class="more-icon">⋯</text>
|
|
|
|
|
+ <text class="info-icon">ⓘ</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <scroll-view scroll-y class="content">
|
|
|
|
|
+ <!-- 社会属性 -->
|
|
|
|
|
+ <view class="section">
|
|
|
|
|
+ <view class="section-title">
|
|
|
|
|
+ <text class="section-label">社会属性</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 婚况 -->
|
|
|
|
|
+ <view class="form-group">
|
|
|
|
|
+ <text class="label">婚况</text>
|
|
|
|
|
+ <view class="select-wrapper">
|
|
|
|
|
+ <picker @change="onMarriageChange" :value="formData.marriageIndex" :range="marriageOptions">
|
|
|
|
|
+ <view class="select-input">
|
|
|
|
|
+ <text>{{ formData.marriage || '请选择婚况' }}</text>
|
|
|
|
|
+ <text class="arrow">▼</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </picker>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 学历 -->
|
|
|
|
|
+ <view class="form-group">
|
|
|
|
|
+ <text class="label">学历</text>
|
|
|
|
|
+ <view class="select-wrapper">
|
|
|
|
|
+ <picker @change="onEducationChange" :value="formData.educationIndex" :range="educationOptions">
|
|
|
|
|
+ <view class="select-input">
|
|
|
|
|
+ <text>{{ formData.education || '请选择学历' }}</text>
|
|
|
|
|
+ <text class="arrow">▼</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </picker>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 年收入 -->
|
|
|
|
|
+ <view class="form-group">
|
|
|
|
|
+ <text class="label">年收入(万元)</text>
|
|
|
|
|
+ <input type="text" class="text-input" placeholder="请输入年收入" v-model="formData.income" />
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 住址 -->
|
|
|
|
|
+ <view class="form-group">
|
|
|
|
|
+ <text class="label">住址</text>
|
|
|
|
|
+ <input type="text" class="text-input" placeholder="请输入住址" v-model="formData.address" />
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 户籍地 -->
|
|
|
|
|
+ <view class="form-group">
|
|
|
|
|
+ <text class="label">户籍地</text>
|
|
|
|
|
+ <input type="text" class="text-input" placeholder="请输入户籍地" v-model="formData.hometown" />
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 职业 -->
|
|
|
|
|
+ <view class="form-group">
|
|
|
|
|
+ <text class="label">职业</text>
|
|
|
|
|
+ <input type="text" class="text-input" placeholder="请输入职业" v-model="formData.occupation" />
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 购房 -->
|
|
|
|
|
+ <view class="form-group">
|
|
|
|
|
+ <text class="label">购房</text>
|
|
|
|
|
+ <view class="checkbox-group">
|
|
|
|
|
+ <view class="checkbox-item" @click="toggleCheckbox('hasHouse')">
|
|
|
|
|
+ <view class="checkbox" :class="{ checked: formData.hasHouse }"></view>
|
|
|
|
|
+ <text>有房</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 购车 -->
|
|
|
|
|
+ <view class="form-group">
|
|
|
|
|
+ <text class="label">购车</text>
|
|
|
|
|
+ <view class="checkbox-group">
|
|
|
|
|
+ <view class="checkbox-item" @click="toggleCheckbox('hasCar')">
|
|
|
|
|
+ <view class="checkbox" :class="{ checked: formData.hasCar }"></view>
|
|
|
|
|
+ <text>有车</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 基本信息 -->
|
|
|
|
|
+ <view class="section">
|
|
|
|
|
+ <view class="section-title">
|
|
|
|
|
+ <text class="section-label">基本信息</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 姓名 -->
|
|
|
|
|
+ <view class="form-group">
|
|
|
|
|
+ <text class="label required">姓名</text>
|
|
|
|
|
+ <input type="text" class="text-input" placeholder="请输入姓名" v-model="formData.name" />
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 年龄 -->
|
|
|
|
|
+ <view class="form-group">
|
|
|
|
|
+ <text class="label">年龄</text>
|
|
|
|
|
+ <input type="number" class="text-input" placeholder="请输入年龄" v-model="formData.age" />
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 性别 -->
|
|
|
|
|
+ <view class="form-group">
|
|
|
|
|
+ <text class="label">性别</text>
|
|
|
|
|
+ <view class="select-wrapper">
|
|
|
|
|
+ <picker @change="onGenderChange" :value="formData.genderIndex" :range="genderOptions">
|
|
|
|
|
+ <view class="select-input">
|
|
|
|
|
+ <text>{{ formData.gender || '请选择性别' }}</text>
|
|
|
|
|
+ <text class="arrow">▼</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </picker>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 星座 -->
|
|
|
|
|
+ <view class="form-group">
|
|
|
|
|
+ <text class="label">星座</text>
|
|
|
|
|
+ <view class="select-wrapper">
|
|
|
|
|
+ <picker @change="onZodiacChange" :value="formData.zodiacIndex" :range="zodiacOptions">
|
|
|
|
|
+ <view class="select-input">
|
|
|
|
|
+ <text>{{ formData.zodiac || '请选择星座' }}</text>
|
|
|
|
|
+ <text class="arrow">▼</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </picker>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 身高 -->
|
|
|
|
|
+ <view class="form-group">
|
|
|
|
|
+ <text class="label">身高 (cm)</text>
|
|
|
|
|
+ <input type="number" class="text-input" placeholder="请输入身高" v-model="formData.height" />
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 体重 -->
|
|
|
|
|
+ <view class="form-group">
|
|
|
|
|
+ <text class="label">体重 (kg)</text>
|
|
|
|
|
+ <input type="number" class="text-input" placeholder="请输入体重" v-model="formData.weight" />
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 底部按钮 -->
|
|
|
|
|
+ <view class="button-group">
|
|
|
|
|
+ <view class="reset-btn" @click="resetForm">重置</view>
|
|
|
|
|
+ <view class="submit-btn" @click="submitForm">提交</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </scroll-view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script>
|
|
|
|
|
+export default {
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ formData: {
|
|
|
|
|
+ // 社会属性
|
|
|
|
|
+ marriage: '',
|
|
|
|
|
+ marriageIndex: 0,
|
|
|
|
|
+ education: '',
|
|
|
|
|
+ educationIndex: 0,
|
|
|
|
|
+ income: '',
|
|
|
|
|
+ address: '',
|
|
|
|
|
+ hometown: '',
|
|
|
|
|
+ occupation: '',
|
|
|
|
|
+ hasHouse: false,
|
|
|
|
|
+ hasCar: false,
|
|
|
|
|
+ // 基本信息
|
|
|
|
|
+ name: '',
|
|
|
|
|
+ age: '',
|
|
|
|
|
+ gender: '',
|
|
|
|
|
+ genderIndex: 0,
|
|
|
|
|
+ zodiac: '',
|
|
|
|
|
+ zodiacIndex: 0,
|
|
|
|
|
+ height: '',
|
|
|
|
|
+ weight: ''
|
|
|
|
|
+ },
|
|
|
|
|
+ marriageOptions: ['未婚', '已婚', '离异', '丧偶'],
|
|
|
|
|
+ educationOptions: ['初中', '高中', '大专', '本科', '硕士', '博士'],
|
|
|
|
|
+ genderOptions: ['男', '女'],
|
|
|
|
|
+ zodiacOptions: ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座']
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ goBack() {
|
|
|
|
|
+ uni.navigateBack()
|
|
|
|
|
+ },
|
|
|
|
|
+ onMarriageChange(e) {
|
|
|
|
|
+ this.formData.marriageIndex = e.detail.value
|
|
|
|
|
+ this.formData.marriage = this.marriageOptions[e.detail.value]
|
|
|
|
|
+ },
|
|
|
|
|
+ onEducationChange(e) {
|
|
|
|
|
+ this.formData.educationIndex = e.detail.value
|
|
|
|
|
+ this.formData.education = this.educationOptions[e.detail.value]
|
|
|
|
|
+ },
|
|
|
|
|
+ onGenderChange(e) {
|
|
|
|
|
+ this.formData.genderIndex = e.detail.value
|
|
|
|
|
+ this.formData.gender = this.genderOptions[e.detail.value]
|
|
|
|
|
+ },
|
|
|
|
|
+ onZodiacChange(e) {
|
|
|
|
|
+ this.formData.zodiacIndex = e.detail.value
|
|
|
|
|
+ this.formData.zodiac = this.zodiacOptions[e.detail.value]
|
|
|
|
|
+ },
|
|
|
|
|
+ toggleCheckbox(field) {
|
|
|
|
|
+ this.formData[field] = !this.formData[field]
|
|
|
|
|
+ },
|
|
|
|
|
+ resetForm() {
|
|
|
|
|
+ this.formData = {
|
|
|
|
|
+ marriage: '',
|
|
|
|
|
+ marriageIndex: 0,
|
|
|
|
|
+ education: '',
|
|
|
|
|
+ educationIndex: 0,
|
|
|
|
|
+ income: '',
|
|
|
|
|
+ address: '',
|
|
|
|
|
+ hometown: '',
|
|
|
|
|
+ occupation: '',
|
|
|
|
|
+ hasHouse: false,
|
|
|
|
|
+ hasCar: false,
|
|
|
|
|
+ name: '',
|
|
|
|
|
+ age: '',
|
|
|
|
|
+ gender: '',
|
|
|
|
|
+ genderIndex: 0,
|
|
|
|
|
+ zodiac: '',
|
|
|
|
|
+ zodiacIndex: 0,
|
|
|
|
|
+ height: '',
|
|
|
|
|
+ weight: ''
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ submitForm() {
|
|
|
|
|
+ if (!this.formData.name) {
|
|
|
|
|
+ uni.showToast({
|
|
|
|
|
+ title: '请输入姓名',
|
|
|
|
|
+ icon: 'none'
|
|
|
|
|
+ })
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+ console.log('提交表单:', this.formData)
|
|
|
|
|
+ uni.showToast({
|
|
|
|
|
+ title: '提交成功',
|
|
|
|
|
+ icon: 'success'
|
|
|
|
|
+ })
|
|
|
|
|
+ setTimeout(() => {
|
|
|
|
|
+ uni.navigateBack()
|
|
|
|
|
+ }, 1500)
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+</script>
|
|
|
|
|
+
|
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
|
+.add-resource {
|
|
|
|
|
+ min-height: 100vh;
|
|
|
|
|
+ background: #FFF9F9;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* 顶部导航栏 */
|
|
|
|
|
+.header {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ padding: 20rpx 30rpx;
|
|
|
|
|
+ padding-top: calc(20rpx + env(safe-area-inset-top));
|
|
|
|
|
+ background: #FFF9F9;
|
|
|
|
|
+ border-bottom: 1rpx solid #F0F0F0;
|
|
|
|
|
+
|
|
|
|
|
+ .back-btn {
|
|
|
|
|
+ width: 50rpx;
|
|
|
|
|
+ height: 50rpx;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+
|
|
|
|
|
+ .back-icon {
|
|
|
|
|
+ font-size: 40rpx;
|
|
|
|
|
+ color: #9C27B0;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .header-title {
|
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .header-right {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ gap: 15rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .more-icon,
|
|
|
|
|
+ .info-icon {
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+ color: #999;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.content {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ overflow-y: auto;
|
|
|
|
|
+ padding: 20rpx;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* 表单区域 */
|
|
|
|
|
+.section {
|
|
|
|
|
+ background: #FFFFFF;
|
|
|
|
|
+ border-radius: 16rpx;
|
|
|
|
|
+ padding: 20rpx;
|
|
|
|
|
+ margin-bottom: 20rpx;
|
|
|
|
|
+ box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
|
|
|
|
+
|
|
|
|
|
+ .section-title {
|
|
|
|
|
+ margin-bottom: 20rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .section-label {
|
|
|
|
|
+ display: inline-block;
|
|
|
|
|
+ background: #FFEBEE;
|
|
|
|
|
+ color: #E91E63;
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ padding: 6rpx 14rpx;
|
|
|
|
|
+ border-radius: 8rpx;
|
|
|
|
|
+ border: 2rpx solid #E91E63;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* 表单组 */
|
|
|
|
|
+.form-group {
|
|
|
|
|
+ margin-bottom: 20rpx;
|
|
|
|
|
+
|
|
|
|
|
+ &:last-child {
|
|
|
|
|
+ margin-bottom: 0;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .label {
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ font-size: 26rpx;
|
|
|
|
|
+ color: #666;
|
|
|
|
|
+ margin-bottom: 10rpx;
|
|
|
|
|
+
|
|
|
|
|
+ &.required::after {
|
|
|
|
|
+ content: ' *';
|
|
|
|
|
+ color: #E91E63;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .text-input {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ padding: 12rpx 16rpx;
|
|
|
|
|
+ border: 1rpx solid #E0E0E0;
|
|
|
|
|
+ border-radius: 8rpx;
|
|
|
|
|
+ font-size: 26rpx;
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+ background: #F8F8F8;
|
|
|
|
|
+
|
|
|
|
|
+ &::placeholder {
|
|
|
|
|
+ color: #999;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .select-wrapper {
|
|
|
|
|
+ .select-input {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ padding: 12rpx 16rpx;
|
|
|
|
|
+ border: 1rpx solid #E0E0E0;
|
|
|
|
|
+ border-radius: 8rpx;
|
|
|
|
|
+ font-size: 26rpx;
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+ background: #F8F8F8;
|
|
|
|
|
+
|
|
|
|
|
+ .arrow {
|
|
|
|
|
+ font-size: 20rpx;
|
|
|
|
|
+ color: #999;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .checkbox-group {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
|
+ gap: 15rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .checkbox-item {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ gap: 8rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .checkbox {
|
|
|
|
|
+ width: 24rpx;
|
|
|
|
|
+ height: 24rpx;
|
|
|
|
|
+ border: 2rpx solid #E0E0E0;
|
|
|
|
|
+ border-radius: 4rpx;
|
|
|
|
|
+ background: #FFFFFF;
|
|
|
|
|
+
|
|
|
|
|
+ &.checked {
|
|
|
|
|
+ background: #E91E63;
|
|
|
|
|
+ border-color: #E91E63;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ text {
|
|
|
|
|
+ font-size: 26rpx;
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* 按钮组 */
|
|
|
|
|
+.button-group {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ gap: 15rpx;
|
|
|
|
|
+ margin: 30rpx 0;
|
|
|
|
|
+
|
|
|
|
|
+ .reset-btn,
|
|
|
|
|
+ .submit-btn {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ padding: 16rpx;
|
|
|
|
|
+ border-radius: 12rpx;
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .reset-btn {
|
|
|
|
|
+ background: #F5F5F5;
|
|
|
|
|
+ color: #666;
|
|
|
|
|
+ border: 1rpx solid #E0E0E0;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .submit-btn {
|
|
|
|
|
+ background: linear-gradient(135deg, #E91E63 0%, #C2185B 100%);
|
|
|
|
|
+ color: #FFFFFF;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+</style>
|