|
|
@@ -0,0 +1,968 @@
|
|
|
+<template>
|
|
|
+ <view class="success-case-upload">
|
|
|
+ <!-- 顶部导航栏 -->
|
|
|
+ <view class="header">
|
|
|
+ <view class="back-btn" @click="goBack"></view>
|
|
|
+ <text class="header-title">撮合成功审核</text>
|
|
|
+ <view class="placeholder"></view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <scroll-view scroll-y class="content">
|
|
|
+ <view class="form-container">
|
|
|
+ <!-- 男方信息 -->
|
|
|
+ <view class="form-section">
|
|
|
+ <view class="section-title">
|
|
|
+ <text class="title-icon male">♂</text>
|
|
|
+ <text class="title-text">男方信息</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 选择男方用户 -->
|
|
|
+ <view class="form-item">
|
|
|
+ <text class="form-label">选择男方用户 <text class="required">*</text></text>
|
|
|
+ <view class="picker-wrapper" @click="openMalePicker">
|
|
|
+ <view class="selected-user" v-if="selectedMale">
|
|
|
+ <image class="user-avatar" :src="selectedMale.avatarUrl || '/static/default-avatar.svg'" mode="aspectFill"></image>
|
|
|
+ <text class="user-name">{{ selectedMale.name }}</text>
|
|
|
+ <text class="user-age" v-if="selectedMale.age">{{ selectedMale.age }}岁</text>
|
|
|
+ </view>
|
|
|
+ <text class="placeholder-text" v-else>请选择或搜索男方用户</text>
|
|
|
+ <view class="arrow-down"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 男方真实姓名 -->
|
|
|
+ <view class="form-item">
|
|
|
+ <text class="form-label">男方真实姓名 <text class="required">*</text></text>
|
|
|
+ <input class="form-input" v-model="formData.maleRealName" placeholder="请输入男方真实姓名" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 女方信息 -->
|
|
|
+ <view class="form-section">
|
|
|
+ <view class="section-title">
|
|
|
+ <text class="title-icon female">♀</text>
|
|
|
+ <text class="title-text">女方信息</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 选择女方用户 -->
|
|
|
+ <view class="form-item">
|
|
|
+ <text class="form-label">选择女方用户 <text class="required">*</text></text>
|
|
|
+ <view class="picker-wrapper" @click="openFemalePicker">
|
|
|
+ <view class="selected-user" v-if="selectedFemale">
|
|
|
+ <image class="user-avatar" :src="selectedFemale.avatarUrl || '/static/default-avatar.svg'" mode="aspectFill"></image>
|
|
|
+ <text class="user-name">{{ selectedFemale.name }}</text>
|
|
|
+ <text class="user-age" v-if="selectedFemale.age">{{ selectedFemale.age }}岁</text>
|
|
|
+ </view>
|
|
|
+ <text class="placeholder-text" v-else>请选择或搜索女方用户</text>
|
|
|
+ <view class="arrow-down"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 女方真实姓名 -->
|
|
|
+ <view class="form-item">
|
|
|
+ <text class="form-label">女方真实姓名 <text class="required">*</text></text>
|
|
|
+ <input class="form-input" v-model="formData.femaleRealName" placeholder="请输入女方真实姓名" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 成功凭证 -->
|
|
|
+ <view class="form-section">
|
|
|
+ <view class="section-title">
|
|
|
+ <text class="title-icon proof">📷</text>
|
|
|
+ <text class="title-text">成功凭证</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="form-item">
|
|
|
+ <text class="form-label">上传凭证图片 <text class="required">*</text></text>
|
|
|
+ <text class="form-hint">请上传结婚证、订婚照片等凭证(最多9张)</text>
|
|
|
+ <view class="image-upload-area">
|
|
|
+ <view class="image-item" v-for="(img, index) in proofImages" :key="index">
|
|
|
+ <image class="uploaded-image" :src="img" mode="aspectFill"></image>
|
|
|
+ <view class="delete-btn" @click="removeImage(index)">×</view>
|
|
|
+ </view>
|
|
|
+ <view class="add-image-btn" v-if="proofImages.length < 9" @click="chooseImage">
|
|
|
+ <text class="add-icon">+</text>
|
|
|
+ <text class="add-text">添加图片</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 案例信息 -->
|
|
|
+ <view class="form-section">
|
|
|
+ <view class="section-title">
|
|
|
+ <text class="title-icon info">💕</text>
|
|
|
+ <text class="title-text">案例信息</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 案例类型 -->
|
|
|
+ <view class="form-item">
|
|
|
+ <text class="form-label">案例类型 <text class="required">*</text></text>
|
|
|
+ <view class="radio-group">
|
|
|
+ <view class="radio-item" :class="{ active: formData.caseType === 1 }" @click="formData.caseType = 1">
|
|
|
+ <view class="radio-circle"></view>
|
|
|
+ <text class="radio-text">订婚</text>
|
|
|
+ </view>
|
|
|
+ <view class="radio-item" :class="{ active: formData.caseType === 2 }" @click="formData.caseType = 2">
|
|
|
+ <view class="radio-circle"></view>
|
|
|
+ <text class="radio-text">结婚</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 成功日期 -->
|
|
|
+ <view class="form-item">
|
|
|
+ <text class="form-label">成功日期</text>
|
|
|
+ <picker mode="date" :value="formData.caseDate" @change="onDateChange">
|
|
|
+ <view class="date-picker">
|
|
|
+ <text class="date-text" v-if="formData.caseDate">{{ formData.caseDate }}</text>
|
|
|
+ <text class="placeholder-text" v-else>请选择日期</text>
|
|
|
+ <view class="calendar-icon">📅</view>
|
|
|
+ </view>
|
|
|
+ </picker>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 提交按钮 -->
|
|
|
+ <view class="submit-section">
|
|
|
+ <button class="submit-btn" :disabled="submitting" @click="submitForm">
|
|
|
+ <text v-if="submitting">提交中...</text>
|
|
|
+ <text v-else>提交审核</text>
|
|
|
+ </button>
|
|
|
+ <text class="submit-hint">提交后将由平台审核,审核通过后可获得积分奖励</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+
|
|
|
+ <!-- 用户选择弹窗 -->
|
|
|
+ <uni-popup ref="userPickerPopup" type="bottom">
|
|
|
+ <view class="user-picker-popup">
|
|
|
+ <view class="popup-header">
|
|
|
+ <text class="popup-title">{{ pickerGender === 1 ? '选择男方用户' : '选择女方用户' }}</text>
|
|
|
+ <view class="close-btn" @click="closeUserPicker">×</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 搜索框 -->
|
|
|
+ <view class="search-box">
|
|
|
+ <input class="search-input" v-model="searchKeyword" placeholder="搜索姓名或手机号" @input="onSearchInput" />
|
|
|
+ <view class="search-icon">🔍</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 用户列表 -->
|
|
|
+ <scroll-view scroll-y class="user-list">
|
|
|
+ <view class="user-item" v-for="user in filteredUsers" :key="user.resourceId" @click="selectUser(user)">
|
|
|
+ <image class="user-avatar" :src="user.avatarUrl || '/static/default-avatar.svg'" mode="aspectFill"></image>
|
|
|
+ <view class="user-info">
|
|
|
+ <text class="user-name">{{ user.name }}</text>
|
|
|
+ <text class="user-detail">{{ user.age }}岁 · {{ user.phone }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="empty-tip" v-if="filteredUsers.length === 0">
|
|
|
+ <text>暂无匹配的用户</text>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ </uni-popup>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import api from '@/utils/api.js'
|
|
|
+
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ matchmakerId: null,
|
|
|
+ formData: {
|
|
|
+ maleRealName: '',
|
|
|
+ femaleRealName: '',
|
|
|
+ caseType: 2, // 默认结婚
|
|
|
+ caseDate: ''
|
|
|
+ },
|
|
|
+ selectedMale: null,
|
|
|
+ selectedFemale: null,
|
|
|
+ proofImages: [],
|
|
|
+ submitting: false,
|
|
|
+ resubmitId: null, // 重新提交时的原记录ID
|
|
|
+
|
|
|
+ // 用户选择器
|
|
|
+ pickerGender: 1, // 1-男 2-女
|
|
|
+ searchKeyword: '',
|
|
|
+ maleUsers: [],
|
|
|
+ femaleUsers: [],
|
|
|
+ searchTimer: null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ filteredUsers() {
|
|
|
+ const users = this.pickerGender === 1 ? this.maleUsers : this.femaleUsers
|
|
|
+ if (!this.searchKeyword) {
|
|
|
+ return users
|
|
|
+ }
|
|
|
+ const keyword = this.searchKeyword.toLowerCase()
|
|
|
+ return users.filter(u =>
|
|
|
+ (u.name && u.name.toLowerCase().includes(keyword)) ||
|
|
|
+ (u.phone && u.phone.includes(keyword))
|
|
|
+ )
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ this.loadMatchmakerInfo()
|
|
|
+ // 检查是否是重新提交
|
|
|
+ if (options.resubmitId) {
|
|
|
+ this.resubmitId = options.resubmitId
|
|
|
+ this.loadResubmitData(options.resubmitId)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.loadResources()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ goBack() {
|
|
|
+ uni.navigateBack()
|
|
|
+ },
|
|
|
+
|
|
|
+ async loadMatchmakerInfo() {
|
|
|
+ try {
|
|
|
+ const userInfo = uni.getStorageSync('userInfo')
|
|
|
+ if (userInfo && userInfo.userId) {
|
|
|
+ // 通过userId获取红娘信息
|
|
|
+ const matchmakerInfo = await api.matchmaker.getByUserId(userInfo.userId)
|
|
|
+ console.log('红娘信息:', matchmakerInfo)
|
|
|
+ if (matchmakerInfo) {
|
|
|
+ // 兼容不同字段名
|
|
|
+ this.matchmakerId = matchmakerInfo.matchmakerId || matchmakerInfo.matchmaker_id || null
|
|
|
+ console.log('获取到红娘ID:', this.matchmakerId)
|
|
|
+ }
|
|
|
+ if (!this.matchmakerId) {
|
|
|
+ uni.showToast({ title: '未找到红娘信息', icon: 'none' })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ console.error('获取红娘信息失败', e)
|
|
|
+ uni.showToast({ title: '获取红娘信息失败', icon: 'none' })
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 加载重新提交的数据进行回显
|
|
|
+ async loadResubmitData(id) {
|
|
|
+ try {
|
|
|
+ const res = await api.successCaseUpload.getAuditRecordDetail(id)
|
|
|
+ console.log('回显数据:', res)
|
|
|
+ if (res) {
|
|
|
+ // 回显表单数据
|
|
|
+ this.formData.maleRealName = res.maleRealName || ''
|
|
|
+ this.formData.femaleRealName = res.femaleRealName || ''
|
|
|
+ this.formData.caseType = res.caseType || 2
|
|
|
+ this.formData.caseDate = res.caseDate || ''
|
|
|
+
|
|
|
+ // 回显凭证图片(存储格式为JSON数组字符串)
|
|
|
+ if (res.proofImages) {
|
|
|
+ try {
|
|
|
+ const images = JSON.parse(res.proofImages)
|
|
|
+ this.proofImages = Array.isArray(images) ? images : []
|
|
|
+ } catch (e) {
|
|
|
+ // 兼容逗号分隔格式
|
|
|
+ this.proofImages = res.proofImages.split(',').filter(img => img)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 回显男方用户信息
|
|
|
+ if (res.maleUserId) {
|
|
|
+ const maleInfo = res.maleUserInfo || {}
|
|
|
+ this.selectedMale = {
|
|
|
+ userId: res.maleUserId,
|
|
|
+ name: maleInfo.name || res.maleRealName,
|
|
|
+ avatarUrl: maleInfo.avatarUrl || '',
|
|
|
+ age: maleInfo.age || null
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 回显女方用户信息
|
|
|
+ if (res.femaleUserId) {
|
|
|
+ const femaleInfo = res.femaleUserInfo || {}
|
|
|
+ this.selectedFemale = {
|
|
|
+ userId: res.femaleUserId,
|
|
|
+ name: femaleInfo.name || res.femaleRealName,
|
|
|
+ avatarUrl: femaleInfo.avatarUrl || '',
|
|
|
+ age: femaleInfo.age || null
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ console.error('加载回显数据失败', e)
|
|
|
+ uni.showToast({ title: '加载数据失败', icon: 'none' })
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ async loadResources() {
|
|
|
+ if (!this.matchmakerId) {
|
|
|
+ setTimeout(() => this.loadResources(), 500)
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ try {
|
|
|
+ // 加载男方用户列表(只查询已注册用户,user_id不为空)
|
|
|
+ const maleRes = await api.myResource.getRegisteredDropdown(this.matchmakerId, 1)
|
|
|
+ console.log('男方资源返回:', maleRes)
|
|
|
+ this.maleUsers = Array.isArray(maleRes) ? maleRes : (maleRes?.data || [])
|
|
|
+
|
|
|
+ // 加载女方用户列表(只查询已注册用户,user_id不为空)
|
|
|
+ const femaleRes = await api.myResource.getRegisteredDropdown(this.matchmakerId, 2)
|
|
|
+ console.log('女方资源返回:', femaleRes)
|
|
|
+ this.femaleUsers = Array.isArray(femaleRes) ? femaleRes : (femaleRes?.data || [])
|
|
|
+ } catch (e) {
|
|
|
+ console.error('加载资源列表失败', e)
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ openMalePicker() {
|
|
|
+ this.pickerGender = 1
|
|
|
+ this.searchKeyword = ''
|
|
|
+ this.$refs.userPickerPopup.open()
|
|
|
+ },
|
|
|
+
|
|
|
+ openFemalePicker() {
|
|
|
+ this.pickerGender = 2
|
|
|
+ this.searchKeyword = ''
|
|
|
+ this.$refs.userPickerPopup.open()
|
|
|
+ },
|
|
|
+
|
|
|
+ closeUserPicker() {
|
|
|
+ this.$refs.userPickerPopup.close()
|
|
|
+ },
|
|
|
+
|
|
|
+ selectUser(user) {
|
|
|
+ if (this.pickerGender === 1) {
|
|
|
+ this.selectedMale = user
|
|
|
+ // 自动填充真实姓名(每次选择都更新)
|
|
|
+ this.formData.maleRealName = user.name || ''
|
|
|
+ } else {
|
|
|
+ this.selectedFemale = user
|
|
|
+ // 自动填充真实姓名(每次选择都更新)
|
|
|
+ this.formData.femaleRealName = user.name || ''
|
|
|
+ }
|
|
|
+ this.closeUserPicker()
|
|
|
+ },
|
|
|
+
|
|
|
+ onSearchInput() {
|
|
|
+ // 防抖搜索
|
|
|
+ if (this.searchTimer) {
|
|
|
+ clearTimeout(this.searchTimer)
|
|
|
+ }
|
|
|
+ this.searchTimer = setTimeout(() => {
|
|
|
+ this.searchResources()
|
|
|
+ }, 300)
|
|
|
+ },
|
|
|
+
|
|
|
+ async searchResources() {
|
|
|
+ if (!this.matchmakerId) return
|
|
|
+
|
|
|
+ try {
|
|
|
+ // 如果关键词为空,重新加载当前性别的完整列表
|
|
|
+ if (!this.searchKeyword || !this.searchKeyword.trim()) {
|
|
|
+ const res = await api.myResource.getRegisteredDropdown(this.matchmakerId, this.pickerGender)
|
|
|
+ console.log('重新加载资源列表:', res)
|
|
|
+ const users = Array.isArray(res) ? res : (res?.data || [])
|
|
|
+ if (this.pickerGender === 1) {
|
|
|
+ this.maleUsers = users
|
|
|
+ } else {
|
|
|
+ this.femaleUsers = users
|
|
|
+ }
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ // 使用已注册用户搜索接口(只返回user_id不为空的资源)
|
|
|
+ const res = await api.myResource.searchRegistered(this.matchmakerId, this.searchKeyword.trim(), this.pickerGender)
|
|
|
+ console.log('搜索资源返回:', res)
|
|
|
+ const users = Array.isArray(res) ? res : (res?.data || [])
|
|
|
+ if (this.pickerGender === 1) {
|
|
|
+ this.maleUsers = users
|
|
|
+ } else {
|
|
|
+ this.femaleUsers = users
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ console.error('搜索资源失败', e)
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ async chooseImage() {
|
|
|
+ try {
|
|
|
+ // uni.chooseImage 在 Promise 模式下返回 [err, res] 格式
|
|
|
+ const [err, res] = await uni.chooseImage({
|
|
|
+ count: 9 - this.proofImages.length,
|
|
|
+ sizeType: ['compressed'],
|
|
|
+ sourceType: ['album', 'camera']
|
|
|
+ })
|
|
|
+
|
|
|
+ console.log('选择图片返回 err:', err)
|
|
|
+ console.log('选择图片返回 res:', res)
|
|
|
+
|
|
|
+ if (err) {
|
|
|
+ console.error('选择图片失败', err)
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ if (res && res.tempFilePaths && res.tempFilePaths.length > 0) {
|
|
|
+ uni.showLoading({ title: '上传中...' })
|
|
|
+
|
|
|
+ for (const tempPath of res.tempFilePaths) {
|
|
|
+ console.log('准备上传图片:', tempPath)
|
|
|
+ try {
|
|
|
+ const uploadRes = await this.uploadImage(tempPath)
|
|
|
+ console.log('上传结果:', uploadRes)
|
|
|
+ if (uploadRes) {
|
|
|
+ this.proofImages.push(uploadRes)
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ console.error('上传图片失败', e)
|
|
|
+ uni.showToast({ title: '图片上传失败', icon: 'none' })
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ uni.hideLoading()
|
|
|
+ console.log('当前图片列表:', this.proofImages)
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ console.error('选择图片异常', e)
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ async uploadImage(tempPath) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ uni.uploadFile({
|
|
|
+ url: 'http://localhost:8083/api/success-case-upload/upload-image',
|
|
|
+ filePath: tempPath,
|
|
|
+ name: 'file',
|
|
|
+ success: (res) => {
|
|
|
+ try {
|
|
|
+ const data = JSON.parse(res.data)
|
|
|
+ if (data.code === 200 && data.data) {
|
|
|
+ resolve(data.data)
|
|
|
+ } else {
|
|
|
+ uni.showToast({ title: data.message || '上传失败', icon: 'none' })
|
|
|
+ reject(new Error(data.message))
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ reject(e)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail: (err) => {
|
|
|
+ reject(err)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ removeImage(index) {
|
|
|
+ this.proofImages.splice(index, 1)
|
|
|
+ },
|
|
|
+
|
|
|
+ onDateChange(e) {
|
|
|
+ this.formData.caseDate = e.detail.value
|
|
|
+ },
|
|
|
+
|
|
|
+ async submitForm() {
|
|
|
+ // 表单验证
|
|
|
+ if (!this.selectedMale) {
|
|
|
+ uni.showToast({ title: '请选择男方用户', icon: 'none' })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (!this.selectedFemale) {
|
|
|
+ uni.showToast({ title: '请选择女方用户', icon: 'none' })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (this.selectedMale.userId === this.selectedFemale.userId) {
|
|
|
+ uni.showToast({ title: '男方和女方不能是同一人', icon: 'none' })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (!this.formData.maleRealName.trim()) {
|
|
|
+ uni.showToast({ title: '请填写男方真实姓名', icon: 'none' })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (!this.formData.femaleRealName.trim()) {
|
|
|
+ uni.showToast({ title: '请填写女方真实姓名', icon: 'none' })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (this.proofImages.length === 0) {
|
|
|
+ uni.showToast({ title: '请上传至少一张成功凭证图片', icon: 'none' })
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ this.submitting = true
|
|
|
+
|
|
|
+ try {
|
|
|
+ const submitData = {
|
|
|
+ matchmakerId: this.matchmakerId,
|
|
|
+ maleUserId: this.selectedMale.userId, // 传递users表的user_id
|
|
|
+ femaleUserId: this.selectedFemale.userId, // 传递users表的user_id
|
|
|
+ maleRealName: this.formData.maleRealName.trim(),
|
|
|
+ femaleRealName: this.formData.femaleRealName.trim(),
|
|
|
+ proofImages: this.proofImages,
|
|
|
+ caseType: this.formData.caseType,
|
|
|
+ caseDate: this.formData.caseDate || null
|
|
|
+ }
|
|
|
+
|
|
|
+ const res = await api.successCaseUpload.submit(submitData)
|
|
|
+ console.log('提交结果:', res)
|
|
|
+
|
|
|
+ // request函数成功时返回的是data字段的内容(这里是id)
|
|
|
+ // 如果能走到这里说明请求成功了
|
|
|
+ if (res !== undefined && res !== null) {
|
|
|
+ uni.showToast({ title: '提交成功', icon: 'success' })
|
|
|
+ setTimeout(() => {
|
|
|
+ uni.navigateBack()
|
|
|
+ }, 1500)
|
|
|
+ } else {
|
|
|
+ uni.showToast({ title: '提交失败', icon: 'none' })
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ console.error('提交失败', e)
|
|
|
+ uni.showToast({ title: '提交失败,请稍后重试', icon: 'none' })
|
|
|
+ } finally {
|
|
|
+ this.submitting = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+/* 确保所有元素使用border-box */
|
|
|
+* {
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.success-case-upload {
|
|
|
+ min-height: 100vh;
|
|
|
+ background: linear-gradient(180deg, #f8e1f4 0%, #fff5f5 100%);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 100%;
|
|
|
+ overflow-x: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 60rpx 30rpx 30rpx;
|
|
|
+ background: linear-gradient(135deg, #d63384 0%, #9c27b0 100%);
|
|
|
+
|
|
|
+ .back-btn {
|
|
|
+ width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/%3E%3C/svg%3E") no-repeat center;
|
|
|
+ background-size: contain;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-title {
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .placeholder {
|
|
|
+ width: 60rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.content {
|
|
|
+ flex: 1;
|
|
|
+ padding: 30rpx 30rpx 30rpx 30rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.form-container {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 30rpx;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.form-section {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ padding: 30rpx;
|
|
|
+ box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.section-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+
|
|
|
+ .title-icon {
|
|
|
+ font-size: 36rpx;
|
|
|
+ margin-right: 16rpx;
|
|
|
+
|
|
|
+ &.male { color: #2196F3; }
|
|
|
+ &.female { color: #E91E63; }
|
|
|
+ &.proof { color: #FF9800; }
|
|
|
+ &.info { color: #9C27B0; }
|
|
|
+ }
|
|
|
+
|
|
|
+ .title-text {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.form-item {
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.form-label {
|
|
|
+ display: block;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #666;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+
|
|
|
+ .required {
|
|
|
+ color: #E91E63;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.form-hint {
|
|
|
+ display: block;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.form-input {
|
|
|
+ width: 100%;
|
|
|
+ height: 88rpx;
|
|
|
+ background: #f5f5f5;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+
|
|
|
+.form-textarea {
|
|
|
+ width: 100%;
|
|
|
+ height: 200rpx;
|
|
|
+ background: #f5f5f5;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ padding: 24rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.char-count {
|
|
|
+ display: block;
|
|
|
+ text-align: right;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+ margin-top: 8rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.picker-wrapper {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 88rpx;
|
|
|
+ background: #f5f5f5;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ padding: 0 24rpx;
|
|
|
+
|
|
|
+ .placeholder-text {
|
|
|
+ color: #999;
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .arrow-down {
|
|
|
+ width: 24rpx;
|
|
|
+ height: 24rpx;
|
|
|
+ border-right: 4rpx solid #999;
|
|
|
+ border-bottom: 4rpx solid #999;
|
|
|
+ transform: rotate(45deg);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.selected-user {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ .user-avatar {
|
|
|
+ width: 56rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 16rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-name {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333;
|
|
|
+ margin-right: 16rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-age {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.image-upload-area {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.image-item {
|
|
|
+ position: relative;
|
|
|
+ width: 200rpx;
|
|
|
+ height: 200rpx;
|
|
|
+
|
|
|
+ .uploaded-image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .delete-btn {
|
|
|
+ position: absolute;
|
|
|
+ top: -16rpx;
|
|
|
+ right: -16rpx;
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ background: #E91E63;
|
|
|
+ border-radius: 50%;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 28rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.add-image-btn {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 200rpx;
|
|
|
+ background: #f5f5f5;
|
|
|
+ border: 2rpx dashed #ccc;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .add-icon {
|
|
|
+ font-size: 60rpx;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .add-text {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+ margin-top: 8rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.radio-group {
|
|
|
+ display: flex;
|
|
|
+ gap: 40rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.radio-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 20rpx 40rpx;
|
|
|
+ background: #f5f5f5;
|
|
|
+ border-radius: 12rpx;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ background: linear-gradient(135deg, #d63384 0%, #9c27b0 100%);
|
|
|
+
|
|
|
+ .radio-circle {
|
|
|
+ border-color: #fff;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ width: 16rpx;
|
|
|
+ height: 16rpx;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .radio-text {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .radio-circle {
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ border: 4rpx solid #999;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 16rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .radio-text {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.date-picker {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 88rpx;
|
|
|
+ background: #f5f5f5;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ padding: 0 24rpx;
|
|
|
+
|
|
|
+ .date-text {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .placeholder-text {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .calendar-icon {
|
|
|
+ font-size: 36rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.submit-section {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ padding: 0 0 60rpx 0;
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.submit-btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 96rpx;
|
|
|
+ background: linear-gradient(135deg, #d63384 0%, #9c27b0 100%);
|
|
|
+ border-radius: 48rpx;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border: none;
|
|
|
+
|
|
|
+ &[disabled] {
|
|
|
+ opacity: 0.6;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.submit-hint {
|
|
|
+ display: block;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+ margin-top: 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+/* 用户选择弹窗 */
|
|
|
+.user-picker-popup {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 30rpx 30rpx 0 0;
|
|
|
+ max-height: 80vh;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.popup-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 30rpx;
|
|
|
+ border-bottom: 1rpx solid #eee;
|
|
|
+
|
|
|
+ .popup-title {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .close-btn {
|
|
|
+ font-size: 48rpx;
|
|
|
+ color: #999;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.search-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin: 20rpx 30rpx;
|
|
|
+ background: #f5f5f5;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ padding: 0 30rpx;
|
|
|
+
|
|
|
+ .search-input {
|
|
|
+ flex: 1;
|
|
|
+ height: 80rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-icon {
|
|
|
+ font-size: 36rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.user-list {
|
|
|
+ flex: 1;
|
|
|
+ max-height: 60vh;
|
|
|
+ padding: 0 30rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.user-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 24rpx 0;
|
|
|
+ border-bottom: 1rpx solid #f5f5f5;
|
|
|
+
|
|
|
+ .user-avatar {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-info {
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ .user-name {
|
|
|
+ display: block;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-detail {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.empty-tip {
|
|
|
+ padding: 60rpx 0;
|
|
|
+ text-align: center;
|
|
|
+ color: #999;
|
|
|
+ font-size: 28rpx;
|
|
|
+}
|
|
|
+</style>
|