合并人才集团代码
This commit is contained in:
969
packageRc/pages/daiban/addbangfu.vue
Normal file
969
packageRc/pages/daiban/addbangfu.vue
Normal file
@@ -0,0 +1,969 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<u-navbar
|
||||
title="帮扶登记"
|
||||
:autoBack="true"
|
||||
bgColor="transparent"
|
||||
leftIconColor="#fff"
|
||||
:titleStyle="{ color: '#fff' }"
|
||||
></u-navbar>
|
||||
<view class="input-outer-part">
|
||||
<scroll-view scroll-y="true" style="height: calc(100vh - 100px)">
|
||||
<view class="inner">
|
||||
<div class="self-form">
|
||||
<view class="inner-part">
|
||||
<div class="form-item required">
|
||||
<label class="form-label">被帮扶对象</label>
|
||||
<input
|
||||
v-model="serviceForm.serviceObjectName"
|
||||
style="border: none; width: 100%; padding: 10px 0;"
|
||||
placeholder="请输入"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-item required">
|
||||
<label class="form-label">帮扶方式</label>
|
||||
<div class="form-select-wrapper" style="position: relative;">
|
||||
<!-- 显示区域 -->
|
||||
<div
|
||||
class="form-value"
|
||||
:class="{ 'noValue': !serviceForm.demandType }"
|
||||
@click="showDemandTypePicker = !showDemandTypePicker"
|
||||
style="width: 100%; height: 40px; padding: 0 10px; border: 1px solid #e6e6e6; border-radius: 8rpx; background-color: #fff; display: flex; align-items: center; justify-content: space-between; cursor: pointer;"
|
||||
>
|
||||
{{ getDemandTypeLabel(serviceForm.demandType) || "请选择" }}
|
||||
<span class="arrow-down">▼</span>
|
||||
</div>
|
||||
|
||||
<!-- 选项列表 -->
|
||||
<div
|
||||
v-if="showDemandTypePicker"
|
||||
class="options-list"
|
||||
style="position: absolute; top: 45px; left: 0; right: 0; background-color: #fff; border: 1px solid #e6e6e6; border-radius: 8rpx; z-index: 1000; max-height: 200px; overflow-y: auto;"
|
||||
>
|
||||
<div
|
||||
v-for="option in demandTypeOptions"
|
||||
:key="option.value"
|
||||
@click="selectDemandType(option.value)"
|
||||
style="padding: 10px; border-bottom: 1px solid #f0f0f0; cursor: pointer;"
|
||||
>
|
||||
{{ option.label }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-item required" v-if="serviceForm.demandType == '4' || serviceForm.demandType == '5'">
|
||||
<label class="form-label">帮扶时间 <text class="required">*</text></label>
|
||||
<picker mode="date" :value="serviceForm.practicalSolutionTime" start="1900-01-01" end="2100-12-31" @change="onDateChange">
|
||||
<view class="date-picker-wrapper" :class="{ noValue: !serviceForm.practicalSolutionTime }">
|
||||
<view v-if="serviceForm.practicalSolutionTime" class="date-value">{{ serviceForm.practicalSolutionTime }}</view>
|
||||
<view v-else>请选择</view>
|
||||
<view class="icon-right">✏️</view>
|
||||
</view>
|
||||
</picker>
|
||||
</div>
|
||||
|
||||
<div class="form-item required" v-if="serviceForm.demandType == '4' || serviceForm.demandType == '5'">
|
||||
<label class="form-label">经办人</label>
|
||||
<div class="form-select-wrapper">
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-model="serviceForm.agentUserId"
|
||||
placeholder="请选择经办人"
|
||||
@change="handleAgentChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in jingbrList1"
|
||||
:key="item.userId"
|
||||
:label="item.nickName"
|
||||
:value="item.userId"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-item required" v-if="serviceForm.demandType == '5'">
|
||||
<label class="form-label">电话沟通结果</label>
|
||||
<div class="form-value" @click="showPicker('dhgtjg')" :class="{ noValue: !serviceForm.dhgtjg }">
|
||||
{{ getDhgtjgLabel(serviceForm.dhgtjg) || "请选择" }}
|
||||
<span class="arrow-down">▼</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-item required" v-if="serviceForm.demandType == '4' || serviceForm.demandType == '5'">
|
||||
<label class="form-label">帮扶内容</label>
|
||||
<div class="date-picker-wrapper" :class="{ noValue: !serviceForm.serviceContent }">
|
||||
<picker
|
||||
@change="onServiceContentChange"
|
||||
:range="serviceContentOptions.map(item => item.label)"
|
||||
:value="getServiceContentIndex(serviceForm.serviceContent)"
|
||||
mode="selector"
|
||||
>
|
||||
<view class="date-value">
|
||||
{{ getServiceContentLabel(serviceForm.serviceContent) || "请选择" }}
|
||||
<span class="arrow-down">▼</span>
|
||||
</view>
|
||||
</picker>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
|
||||
<view class="inner-part">
|
||||
<div class="form-item required" v-if="serviceForm.demandType == '4' || serviceForm.demandType == '5'">
|
||||
<label class="form-label">帮扶情况说明</label>
|
||||
<textarea
|
||||
v-model="serviceForm.blqksm"
|
||||
style="width: 100%; border: none; padding: 10px 0; min-height: 100px; resize: none;"
|
||||
placeholder="请输入"
|
||||
></textarea>
|
||||
</div>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<view class="inner-part">
|
||||
<div class="form-item required" v-if="serviceForm.demandType == '4' || serviceForm.demandType == '5'">
|
||||
<label class="form-label">帮扶情况说明</label>
|
||||
<div class="file-upload-container">
|
||||
<button class="upload-btn" @click="chooseImages" :disabled="fileList.length >= 6">
|
||||
+ 添加图片 ({{ fileList.length }}/6)
|
||||
</button>
|
||||
<div class="file-list" v-if="fileList.length > 0">
|
||||
<div v-for="(file, index) in fileList" :key="index" class="file-item">
|
||||
<image :src="file.url" mode="aspectFill" class="uploaded-image"></image>
|
||||
<span class="delete-btn" @click="removeImage(index)">删除</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<view class="inner-part" v-if="serviceForm.demandType == '4' || serviceForm.demandType == '5'">
|
||||
<div class="form-item">
|
||||
<label class="form-label">附件</label>
|
||||
<div style="width: 100%; padding: 10px 0;">
|
||||
<button @click="triggerFileUpload" style="padding: 8px 16px; background: #f0f0f0; border: none; border-radius: 4px;">
|
||||
上传附件 (最多6个)
|
||||
</button>
|
||||
<!-- 简单的文件列表显示 -->
|
||||
<div v-if="serviceForm.fileUrl.length > 0" class="file-list">
|
||||
<div v-for="(file, index) in serviceForm.fileUrl" :key="index" class="file-item">
|
||||
{{ file.name }}
|
||||
<span @click="removeFile(index)" style="margin-left: 10px; cursor: pointer; color: #ff4444;">删除</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</div>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<view class="button-area">
|
||||
<view class="btn" @click="cancelPage">取消</view>
|
||||
<view class="btn save" @click="submitServiceForm">保存</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 通用选择器 -->
|
||||
<div v-if="currentPicker" class="datetime-picker-overlay">
|
||||
<div class="datetime-picker">
|
||||
<div class="picker-header">
|
||||
<span @click="cancelPicker" style="padding: 10px;">取消</span>
|
||||
<span style="font-weight: bold;">{{ getPickerTitle(currentPicker) }}</span>
|
||||
<span @click="confirmPicker" style="padding: 10px; color: #007AFF;">确定</span>
|
||||
</div>
|
||||
<div class="picker-content">
|
||||
<div v-if="currentPicker === 'practicalSolutionTime'">
|
||||
<input
|
||||
type="datetime-local"
|
||||
v-model="manualDateTime"
|
||||
style="width: 100%; padding: 15px; box-sizing: border-box;"
|
||||
/>
|
||||
</div>
|
||||
<div v-else class="picker-options">
|
||||
<div
|
||||
v-for="option in getPickerOptions(currentPicker)"
|
||||
:key="option.value"
|
||||
@click="selectPickerOption(option.value)"
|
||||
:class="{ 'selected': selectedOption === option.value }"
|
||||
>
|
||||
{{ option.label }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getJbrInfo} from "../../api/personinfo/index"
|
||||
import { getDicts } from '@/apiRc/system/dict.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
serviceForm: {
|
||||
serviceObjectName: '',
|
||||
userId: '',
|
||||
demandType: '', // 帮扶方式
|
||||
practicalSolutionTime: '', // 帮扶时间
|
||||
agentUserId: '', // 经办人ID
|
||||
agentUserName: '', // 经办人名称
|
||||
dhgtjg: '', // 电话沟通结果
|
||||
serviceContent: '', // 帮扶内容
|
||||
blqksm: '', // 帮扶情况说明
|
||||
personStatus: '', // 人员状态
|
||||
fileUrl: [] // 附件
|
||||
},
|
||||
|
||||
serviceContentMap: {
|
||||
'1': '就业政策咨询',
|
||||
'2': '职业指导',
|
||||
'3': '技能培训',
|
||||
'4': '岗位推荐',
|
||||
'5': '创业指导',
|
||||
'6': '其他'
|
||||
},
|
||||
// 帮扶内容选项（picker组件需要的格式）
|
||||
serviceContentOptions: [
|
||||
{ value: '1', label: '就业政策咨询' },
|
||||
{ value: '2', label: '职业指导' },
|
||||
{ value: '3', label: '技能培训' },
|
||||
{ value: '4', label: '岗位推荐' },
|
||||
{ value: '5', label: '创业指导' },
|
||||
{ value: '6', label: '其他' }
|
||||
],
|
||||
showDemandTypePicker: false, // 控制帮扶方式选择器显示
|
||||
jingbrList1:[],
|
||||
currentPicker: null,
|
||||
selectedOption: '',
|
||||
manualDateTime: this.formatDateTime(new Date()),
|
||||
fileList: [], // 初始化文件列表
|
||||
// 帮扶方式选项 (4: 上门服务, 5: 电话回访)
|
||||
demandTypeOptions: [
|
||||
{ value: '4', label: '上门服务' },
|
||||
{ value: '5', label: '电话回访' }
|
||||
],
|
||||
// 经办人选项（模拟数据）
|
||||
jingbrList: [
|
||||
{ userId: '1', nickName: '张三' },
|
||||
{ userId: '2', nickName: '李四' },
|
||||
{ userId: '3', nickName: '王五' }
|
||||
],
|
||||
// 电话沟通结果选项
|
||||
dhgtjgOptions: [
|
||||
{ value: '1', label: '已沟通' },
|
||||
{ value: '2', label: '未接通' },
|
||||
{ value: '3', label: '拒绝沟通' }
|
||||
],
|
||||
// 帮扶内容选项（通过字典获取）
|
||||
serviceContentOptions: [],
|
||||
// 人员状态选项（通过字典获取）
|
||||
personStatusOptions: []
|
||||
};
|
||||
},
|
||||
created(){
|
||||
this.getJbrInfo11();
|
||||
// 使用getDicts API获取帮扶内容字典数据
|
||||
getDicts('qcjy_fwnr').then(res => {
|
||||
if (res.data && Array.isArray(res.data)) {
|
||||
// 将字典数据转换为picker组件需要的格式
|
||||
this.serviceContentOptions = res.data.map(item => ({
|
||||
value: item.dictValue,
|
||||
label: item.dictLabel
|
||||
}));
|
||||
}
|
||||
});
|
||||
|
||||
// 使用getDicts API获取人员状态字典数据
|
||||
getDicts('qcjy_ryzt').then(res => {
|
||||
if (res.data && Array.isArray(res.data)) {
|
||||
this.personStatusOptions = res.data.map(item => ({
|
||||
value: item.dictValue,
|
||||
label: item.dictLabel
|
||||
}));
|
||||
}
|
||||
});
|
||||
},
|
||||
onLoad(options) {
|
||||
if (options.name) {
|
||||
this.serviceForm.serviceObjectName = options.name;
|
||||
}
|
||||
if (options.id) {
|
||||
this.serviceForm.userId = options.id;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 选择图片
|
||||
chooseImages() {
|
||||
const remainingCount = 6 - this.fileList.length;
|
||||
if (remainingCount <= 0) {
|
||||
uni.showToast({ title: '最多只能上传6张图片', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
|
||||
uni.chooseImage({
|
||||
count: remainingCount,
|
||||
sizeType: ['original', 'compressed'],
|
||||
sourceType: ['album', 'camera'],
|
||||
success: (res) => {
|
||||
// 添加新选择的图片到列表
|
||||
res.tempFilePaths.forEach((path, index) => {
|
||||
this.fileList.push({
|
||||
url: path,
|
||||
file: res.tempFiles[index]
|
||||
});
|
||||
});
|
||||
// 更新 serviceForm.fileUrl
|
||||
this.updateFileUrls();
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('选择图片失败:', err);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 移除图片
|
||||
removeImage(index) {
|
||||
this.fileList.splice(index, 1);
|
||||
// 更新 serviceForm.fileUrl
|
||||
this.updateFileUrls();
|
||||
},
|
||||
|
||||
// 更新文件URL数组
|
||||
updateFileUrls() {
|
||||
this.serviceForm.fileUrl = this.fileList.map(file => file.url);
|
||||
},
|
||||
async getJbrInfo11(){
|
||||
const res=await getJbrInfo()
|
||||
this.jingbrList1=res
|
||||
},
|
||||
// 显示选择器
|
||||
showPicker(type) {
|
||||
this.currentPicker = type;
|
||||
if (type !== 'practicalSolutionTime') {
|
||||
this.selectedOption = this.serviceForm[type] || '';
|
||||
}
|
||||
},
|
||||
// 取消选择器
|
||||
cancelPicker() {
|
||||
this.currentPicker = null;
|
||||
},
|
||||
// 确认选择器
|
||||
confirmPicker() {
|
||||
if (this.currentPicker === 'practicalSolutionTime') {
|
||||
this.manualConfirmDate();
|
||||
} else {
|
||||
this.serviceForm[this.currentPicker] = this.selectedOption;
|
||||
// 特殊处理经办人，同时保存名称
|
||||
if (this.currentPicker === 'agentUserId') {
|
||||
const agent = this.jingbrList1.find(item => item.userId === this.selectedOption);
|
||||
this.serviceForm.agentUserName = agent ? agent.nickName : '';
|
||||
}
|
||||
}
|
||||
this.currentPicker = null;
|
||||
},
|
||||
// 选择选项
|
||||
selectPickerOption(value) {
|
||||
this.selectedOption = value;
|
||||
},
|
||||
// 获取选择器标题
|
||||
getPickerTitle(type) {
|
||||
const titles = {
|
||||
demandType: '选择帮扶方式',
|
||||
practicalSolutionTime: '选择帮扶时间',
|
||||
agentUserId: '选择经办人',
|
||||
dhgtjg: '选择电话沟通结果',
|
||||
serviceContent: '选择帮扶内容'
|
||||
};
|
||||
return titles[type] || '请选择';
|
||||
},
|
||||
// 获取选择器选项
|
||||
getPickerOptions(type) {
|
||||
const options = {
|
||||
demandType: this.demandTypeOptions || [],
|
||||
agentUserId: this.jingbrList1 && this.jingbrList1.length > 0 ?
|
||||
this.jingbrList1.map(item => ({ value: item.userId, label: item.nickName })) : [],
|
||||
dhgtjg: this.dhgtjgOptions || [],
|
||||
serviceContent: this.serviceContentOptions || []
|
||||
};
|
||||
return options[type] || [];
|
||||
},
|
||||
// 获取帮扶方式标签
|
||||
getDemandTypeLabel(value) {
|
||||
const option = this.demandTypeOptions.find(item => item.value === value);
|
||||
return option ? option.label : '';
|
||||
},
|
||||
// 获取经办人名称
|
||||
getAgentUserName(userId) {
|
||||
const agent = this.jingbrList1.find(item => item.userId === userId);
|
||||
return agent ? agent.nickName : '';
|
||||
},
|
||||
// 处理经办人选择变化
|
||||
handleAgentChange(value) {
|
||||
if (!value || !this.jingbrList1 || !this.jingbrList1.length) {
|
||||
this.serviceForm.agentUserName = '';
|
||||
return;
|
||||
}
|
||||
const user = this.jingbrList1.find(item => item.userId === value);
|
||||
if (user) {
|
||||
this.serviceForm.agentUserName = user.nickName;
|
||||
} else {
|
||||
this.serviceForm.agentUserName = '';
|
||||
}
|
||||
},
|
||||
|
||||
// 处理帮扶方式选择变化
|
||||
handleDemandTypeChange(event) {
|
||||
this.serviceForm.demandType = event.target.value;
|
||||
},
|
||||
|
||||
// 选择帮扶方式
|
||||
selectDemandType(value) {
|
||||
this.serviceForm.demandType = value;
|
||||
this.showDemandTypePicker = false;
|
||||
},
|
||||
// 获取电话沟通结果标签
|
||||
getDhgtjgLabel(value) {
|
||||
const option = this.dhgtjgOptions.find(item => item.value === value);
|
||||
return option ? option.label : '';
|
||||
},
|
||||
// 获取帮扶内容标签
|
||||
getServiceContentLabel(value) {
|
||||
return this.serviceContentMap[value] || '';
|
||||
},
|
||||
|
||||
// 处理帮扶内容选择变化
|
||||
onServiceContentChange(e) {
|
||||
const index = e.detail.value;
|
||||
if (this.serviceContentOptions && this.serviceContentOptions[index]) {
|
||||
this.serviceForm.serviceContent = this.serviceContentOptions[index].value;
|
||||
}
|
||||
},
|
||||
|
||||
// 获取帮扶内容当前索引
|
||||
getServiceContentIndex(value) {
|
||||
if (!value) return 0;
|
||||
const index = this.serviceContentOptions.findIndex(item => item.value === value);
|
||||
return index !== -1 ? index : 0;
|
||||
},
|
||||
// 格式化日期时间为YYYY-MM-DDTHH:MM格式（datetime-local输入框需要）
|
||||
formatDateTime(date) {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const hours = String(date.getHours()).padStart(2, '0');
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||
return `${year}-${month}-${day}T${hours}:${minutes}`;
|
||||
},
|
||||
|
||||
// 日期选择变化处理
|
||||
onDateChange(e) {
|
||||
this.serviceForm.practicalSolutionTime = e.detail.value;
|
||||
},
|
||||
|
||||
// 手动确认日期选择
|
||||
manualConfirmDate() {
|
||||
// 将datetime-local格式转换为显示格式
|
||||
const date = new Date(this.manualDateTime);
|
||||
this.serviceForm.practicalSolutionTime = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
|
||||
},
|
||||
|
||||
// 触发文件上传
|
||||
triggerFileUpload() {
|
||||
if (this.serviceForm.fileUrl.length < 6) {
|
||||
// 模拟添加文件
|
||||
const mockFiles = ['文档.pdf', '图片.jpg', '表格.xlsx', '报告.docx'];
|
||||
const randomFile = mockFiles[Math.floor(Math.random() * mockFiles.length)];
|
||||
this.serviceForm.fileUrl.push({
|
||||
name: randomFile,
|
||||
url: `mock-url/${Date.now()}/${randomFile}`
|
||||
});
|
||||
} else {
|
||||
uni.showToast({ title: '最多只能上传6个文件', icon: 'none' });
|
||||
}
|
||||
},
|
||||
|
||||
// 删除文件
|
||||
removeFile(index) {
|
||||
this.serviceForm.fileUrl.splice(index, 1);
|
||||
},
|
||||
|
||||
// 取消页面
|
||||
cancelPage() {
|
||||
uni.navigateBack();
|
||||
},
|
||||
|
||||
// 验证表单
|
||||
validateForm() {
|
||||
if (!this.serviceForm.serviceObjectName) {
|
||||
uni.showToast({ title: '请填写被帮扶对象', icon: 'none' });
|
||||
return false;
|
||||
}
|
||||
if (!this.serviceForm.demandType) {
|
||||
uni.showToast({ title: '请选择帮扶方式', icon: 'none' });
|
||||
return false;
|
||||
}
|
||||
|
||||
// 如果是上门服务或电话回访，需要验证更多字段
|
||||
if (this.serviceForm.demandType === '4' || this.serviceForm.demandType === '5') {
|
||||
if (!this.serviceForm.practicalSolutionTime) {
|
||||
uni.showToast({ title: '请选择帮扶时间', icon: 'none' });
|
||||
return false;
|
||||
}
|
||||
if (!this.serviceForm.agentUserId) {
|
||||
uni.showToast({ title: '请选择经办人', icon: 'none' });
|
||||
return false;
|
||||
}
|
||||
if (this.serviceForm.demandType === '5' && !this.serviceForm.dhgtjg) {
|
||||
uni.showToast({ title: '请选择电话沟通结果', icon: 'none' });
|
||||
return false;
|
||||
}
|
||||
if (!this.serviceForm.serviceContent) {
|
||||
uni.showToast({ title: '请选择帮扶内容', icon: 'none' });
|
||||
return false;
|
||||
}
|
||||
if (!this.serviceForm.blqksm) {
|
||||
uni.showToast({ title: '请填写帮扶情况说明', icon: 'none' });
|
||||
return false;
|
||||
}
|
||||
if (!this.serviceForm.personStatus) {
|
||||
uni.showToast({ title: '请选择人员状态', icon: 'none' });
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
},
|
||||
setName(){
|
||||
this.serviceForm.serviceObjectName = this.name
|
||||
this.serviceForm.serviceObjectId = this.userId
|
||||
this.serviceForm.userId = this.userId
|
||||
|
||||
this.$forceUpdate();
|
||||
},
|
||||
// 提交表单
|
||||
async submitServiceForm() {
|
||||
try {
|
||||
// 验证表单
|
||||
if (!this.validateForm()) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 模拟加载状态
|
||||
uni.showLoading({ title: '保存中...' });
|
||||
|
||||
// 准备提交数据
|
||||
const submitData = {
|
||||
...this.serviceForm,
|
||||
// 格式化文件数据
|
||||
fileUrl: JSON.stringify(this.serviceForm.fileUrl)
|
||||
};
|
||||
|
||||
// 打印提交数据
|
||||
console.log('提交数据:', submitData);
|
||||
|
||||
// 模拟API调用延迟
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
|
||||
uni.showToast({ title: '保存成功', icon: 'success' });
|
||||
uni.navigateBack();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
uni.showToast({ title: '保存失败', icon: 'none' });
|
||||
} finally {
|
||||
uni.hideLoading();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
height: 100vh;
|
||||
background-color: #eef1f5 !important;
|
||||
background-image: url("~@/packageRc/static/images/top.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% auto;
|
||||
}
|
||||
|
||||
.input-outer-part {
|
||||
background: #eef1f5;
|
||||
padding: 32rpx;
|
||||
padding-top: 100rpx; /* 增加顶部内边距，防止内容被遮挡 */
|
||||
position: relative;
|
||||
top: -80rpx;
|
||||
border-radius: 32rpx 32rpx 0 0;
|
||||
}
|
||||
|
||||
.inner {
|
||||
.inner-part {
|
||||
background: #fff;
|
||||
padding: 0 32rpx;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.self-form {
|
||||
// 表单样式
|
||||
}
|
||||
|
||||
/* 表单项目样式 */
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
/* 选择器容器样式 */
|
||||
.form-select-wrapper {
|
||||
flex: 1;
|
||||
padding: 5px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form-select {
|
||||
width: 100%;
|
||||
padding: 20rpx;
|
||||
border: 1px solid #e6e6e6;
|
||||
border-radius: 8rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-select.noValue {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.form-select-wrapper::after {
|
||||
content: '▼';
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
pointer-events: none;
|
||||
color: #999;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.form-item.required .form-label::after {
|
||||
content: '*';
|
||||
color: #ff4444;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
width: 110px;
|
||||
flex-shrink: 0;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.form-value {
|
||||
flex: 1;
|
||||
padding: 10px 0;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.form-value.noValue {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.arrow-down {
|
||||
font-size: 12px;
|
||||
color: #A6A6A6;
|
||||
}
|
||||
|
||||
.edit-icon {
|
||||
font-size: 14px;
|
||||
color: #A6A6A6;
|
||||
}
|
||||
|
||||
.form-input-wrapper {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form-input-wrapper input {
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.form-input-wrapper .edit-icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
/* 单选按钮样式 */
|
||||
.radio-group {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.radio-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.radio-item input[type="radio"] {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.radio-label {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 文件列表样式 */
|
||||
.file-list {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.file-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 0;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 文件上传样式 */
|
||||
.file-upload-container {
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.upload-btn {
|
||||
padding: 10px 20px;
|
||||
background-color: #f0f0f0;
|
||||
border: 1px dashed #ddd;
|
||||
border-radius: 4px;
|
||||
color: #666;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.upload-btn:disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.file-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.file-item {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.uploaded-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: -8px;
|
||||
background-color: #ff4444;
|
||||
color: white;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 选择器样式 */
|
||||
.datetime-picker-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.datetime-picker {
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
width: 85%;
|
||||
max-width: 420px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.picker-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
font-size: 17px;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.picker-header > span:first-child {
|
||||
color: #666;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.picker-header > span:last-child {
|
||||
color: #1d64cf;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.picker-content {
|
||||
max-height: 280px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.picker-options {
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.picker-options > div {
|
||||
padding: 16px 20px;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
position: relative;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.picker-options > div:not(:last-child) {
|
||||
border-bottom: 1px solid #f8f8f8;
|
||||
}
|
||||
|
||||
.picker-options > div:active {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.picker-options > div.selected {
|
||||
background-color: #f0f7ff;
|
||||
color: #1d64cf;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 添加选中状态的对勾图标 */
|
||||
.picker-options > div.selected::after {
|
||||
content: '✓';
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #1d64cf;
|
||||
}
|
||||
|
||||
/* 日期选择器样式 */
|
||||
.date-picker-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.date-picker-wrapper.noValue {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.date-value {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.icon-right {
|
||||
color: #999;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.noValue {
|
||||
color: #c0c4cc;
|
||||
}
|
||||
|
||||
.button-area {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 24rpx 32rpx;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
.btn {
|
||||
line-height: 72rpx;
|
||||
width: 176rpx;
|
||||
margin-right: 16rpx;
|
||||
font-size: 28rpx;
|
||||
border: 1px solid #b8c5d4;
|
||||
color: #282828;
|
||||
text-align: center;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.save {
|
||||
background: linear-gradient(103deg, #1d64cf 0%, #1590d4 99%);
|
||||
color: #fff;
|
||||
border: 0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
599
packageRc/pages/daiban/daiban.vue
Normal file
599
packageRc/pages/daiban/daiban.vue
Normal file
@@ -0,0 +1,599 @@
|
||||
<!--
|
||||
* @Date: 2025-10-16 15:15:47
|
||||
* @LastEditors: shirlwang
|
||||
* @LastEditTime: 2025-10-31 14:56:32
|
||||
-->
|
||||
<template>
|
||||
<view>
|
||||
<!-- @scroll="handleScroll" @scrolltolower="scrollBottom" -->
|
||||
<scroll-view :scroll-y="true" class="container" style="background-image: url('../../../packageRc/static/pageBg.png');">
|
||||
<view style="padding: 40rpx 28rpx;">
|
||||
<view class="kinggang">
|
||||
<view>
|
||||
<view class="num-title" style="color: #1A62CE">重点毕业生数</view>
|
||||
<view>1120</view>
|
||||
</view>
|
||||
<text style="color: #B5C1D1;">｜</text>
|
||||
<view>
|
||||
<view class="num-title" style="color: #16ACB7">累计需求数</view>
|
||||
<view>1120</view>
|
||||
</view>
|
||||
<text style="color: #B5C1D1;">｜</text>
|
||||
<view>
|
||||
<view class="num-title" style="color: #6A57D1">累计服务数</view>
|
||||
<view>1120</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="trace-line">
|
||||
<view class="trace">
|
||||
<view class="title">
|
||||
<image src="../../../packageRc/static/trace.png"/>
|
||||
毕业生追踪
|
||||
</view>
|
||||
<view style="display: flex;justify-content: space-between;" @click="goPersonalList">
|
||||
<view>点击查看</view>
|
||||
<uni-icons color="#639AEB" type="arrow-right" size="16"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view class="sendManager">
|
||||
<view class="title">
|
||||
<image src="../../../packageRc/static/sendManager.png"/>
|
||||
任务下发管理员
|
||||
</view>
|
||||
<view style="display: flex;justify-content: space-between;">
|
||||
<view>点击查看</view>
|
||||
<uni-icons color="#DBAA4E" type="arrow-right" size="16"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="titles">
|
||||
<view class="title-item active"><view>待办需求预警列表</view></view>
|
||||
<view>共 {{jobList1count}}条信息</view>
|
||||
</view>
|
||||
<view v-for="(item, index) in jobList1" :key="index" class="job-list">
|
||||
<view class="title">销售顾问</view>
|
||||
<view class="info">
|
||||
待办内容文字示例待办内容文字示例待办内容文字示例待办内容文字示例
|
||||
</view>
|
||||
<view class="bottom-line">
|
||||
<view>发起时间：2025-09-24 15:02</view>
|
||||
<view style="color: #EF7325;">青岛xx公司</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="titles">
|
||||
<view class="title-item active"><view>待服务毕业生列表</view></view>
|
||||
<view>共 {{jobListcount}} 条信息</view>
|
||||
</view>
|
||||
<view v-for="(item, index) in jobList" :key="index" class="person-list">
|
||||
<view class="top-info">
|
||||
<image v-if="index%2==0" src="../../../packageRc/static/personIcon.png"/>
|
||||
<image v-else src="../../../packageRc/static/personIconFe.png"/>
|
||||
<view class="top-right">
|
||||
<view class="name-line">
|
||||
<view class="name">姓名<view class="tag">{{item.name}}</view></view>
|
||||
<view class="service-status">·未服务</view>
|
||||
</view>
|
||||
<view class="info-line" style="display: flex;">
|
||||
<view style="margin-right: 24rpx;"><text>年龄：</text>27岁</view>
|
||||
<view><text>服务次数：</text>1次</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-line">
|
||||
<view><text>联系电话：</text>152****5488</view>
|
||||
<view><text>详细地址：</text>{{item.xxdz}}</view>
|
||||
</view>
|
||||
<view class="services">
|
||||
<view @click="showReturnReasonPopup(item.id)">退回</view>
|
||||
<view @click="tiao(item.id,item.name)">服务</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 退回原因弹窗 -->
|
||||
<uni-popup ref="returnReasonPopup" position="center" round>
|
||||
<view class="popup-content" style="background:rgb(248, 248, 248);">
|
||||
|
||||
<textarea
|
||||
v-model="returnReason"
|
||||
class="reason-textarea"
|
||||
placeholder="请输入退回原因"
|
||||
placeholder-class="placeholder-style"
|
||||
rows="5"
|
||||
maxlength="200"
|
||||
></textarea>
|
||||
<view class="popup-footer">
|
||||
<button class="cancel-btn" @click="cancelReturn">取消</button>
|
||||
<button class="confirm-btn" @click="confirmReturn">确认退回</button>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { personInfoList,personAlertList } from '../../api/personinfo/index'
|
||||
import { returnPerson} from '@/packageRc/api/personinfo/index'
|
||||
import { reactive, inject, watch, ref, onMounted, watchEffect, nextTick } from 'vue';
|
||||
let activeTab = ref(1)
|
||||
let activeTitle = ref(1)
|
||||
let jobList = ref([{},{},{},{},{}])
|
||||
let jobListcount = ref()
|
||||
let returnItemData = ref()
|
||||
let jobList1 = ref([{},{}])
|
||||
let jobList1count = ref()
|
||||
// 退回原因弹窗相关
|
||||
let returnReasonPopup = ref(null)
|
||||
let returnReason = ref('')
|
||||
let currentItemIndex = ref(-1)
|
||||
function goPersonalList() {
|
||||
console.log('goPersonalList')
|
||||
uni.navigateTo({
|
||||
url: '/packageRc/pages/personalList/personalList'
|
||||
});
|
||||
}
|
||||
function back() {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
|
||||
};
|
||||
onMounted(() => {
|
||||
getlist();
|
||||
getlistyujing();
|
||||
});
|
||||
|
||||
async function getlist(){
|
||||
|
||||
try {
|
||||
const res = await personInfoList();
|
||||
console.log("res", res);
|
||||
jobList.value = res.rows || [];
|
||||
jobListcount.value=res.total || 0
|
||||
} catch (error) {
|
||||
console.error("获取数据失败:", error);
|
||||
jobList.value = [];
|
||||
}
|
||||
};
|
||||
async function getlistyujing(){
|
||||
|
||||
try {
|
||||
const res = await personAlertList();
|
||||
console.log("res", res);
|
||||
jobList1.value = res.rows || [];
|
||||
jobList1count.value=res.total || 0
|
||||
} catch (error) {
|
||||
console.error("获取数据失败:", error);
|
||||
jobList1.value = [];
|
||||
}
|
||||
};
|
||||
|
||||
// 显示退回原因弹窗
|
||||
function showReturnReasonPopup(dd) {
|
||||
this.returnItemData.id=dd
|
||||
console.log("退回")
|
||||
returnReason.value = ''
|
||||
// 使用 ref 控制弹窗显示
|
||||
if (returnReasonPopup.value) {
|
||||
returnReasonPopup.value.open()
|
||||
}
|
||||
}
|
||||
|
||||
function tiao(id,name){
|
||||
console.log('尝试导航到待办详情页面，ID:', id);
|
||||
// 尝试直接使用uni.navigateTo，使用正确的格式并传递id参数
|
||||
uni.navigateTo({
|
||||
url: `/packageRc/pages/daiban/daibandetail?id=${id}&name=${name}`,
|
||||
success: function() {
|
||||
console.log('导航成功');
|
||||
},
|
||||
fail: function(err) {
|
||||
console.error('导航失败:', err);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 确认退回
|
||||
function confirmReturn() {
|
||||
if (!returnReason.value.trim()) {
|
||||
uni.showToast({
|
||||
title: '请填写退回原因',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
const params = {
|
||||
id: this.returnItemData.id,
|
||||
opinion: this.returnReason
|
||||
}
|
||||
const { code, msg } = returnPerson(params);
|
||||
if (code == 200) {
|
||||
this.returnDialog = false;
|
||||
this.$u.toast(msg);
|
||||
this.getList(true);
|
||||
}
|
||||
|
||||
// 这里可以添加提交退回原因的API调用
|
||||
console.log('退回原因:', returnReason.value, '项目索引:', currentItemIndex.value)
|
||||
|
||||
// 模拟提交成功
|
||||
uni.showToast({
|
||||
title: '退回成功'
|
||||
})
|
||||
|
||||
// 使用 ref 控制弹窗关闭
|
||||
if (returnReasonPopup.value) {
|
||||
returnReasonPopup.value.close()
|
||||
}
|
||||
}
|
||||
|
||||
// 取消退回
|
||||
function cancelReturn() {
|
||||
// 使用 ref 控制弹窗关闭
|
||||
if (returnReasonPopup.value) {
|
||||
returnReasonPopup.value.close()
|
||||
}
|
||||
}
|
||||
function viewMore() {
|
||||
// uni.navigateTo({
|
||||
// url: '/pages/jobList/jobList'
|
||||
// })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
view{box-sizing: border-box;display: block;}
|
||||
.container{
|
||||
background-color: #F4F4F4;background-position: top center;background-size: 100% auto;
|
||||
height: 100vh;
|
||||
min-width: 100vw;
|
||||
padding-bottom: 0;
|
||||
background-repeat: no-repeat;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.kinggang{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
padding: 36rpx 32rpx 33rpx 32rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 16rpx;
|
||||
border: 3rpx solid #FFFFFF;
|
||||
margin-bottom: 24rpx;background: linear-gradient(180deg, #EDF4FF 0%, #FFFFFF 52%);
|
||||
>view{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
font-weight: bold;
|
||||
>view{font-size: 50rpx;}
|
||||
.num-title{
|
||||
font-size: 28rpx;
|
||||
margin-top: 16rpx;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
// text{
|
||||
// font-size: 28rpx;
|
||||
// }
|
||||
}
|
||||
image{
|
||||
width: 78rpx;
|
||||
// margin-bottom: 15rpx;
|
||||
height: 78rpx;
|
||||
}
|
||||
|
||||
/* 退回原因弹窗样式 */
|
||||
.popup-content {
|
||||
background: #FFFF;
|
||||
border-radius: 24rpx;
|
||||
padding: 48rpx;
|
||||
width: 88%;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.popup-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #282828;
|
||||
margin-bottom: 36rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.reason-textarea {
|
||||
width: 100%;
|
||||
border: 2rpx solid #D8D8D8;
|
||||
border-radius: 12rpx;
|
||||
padding: 24rpx;
|
||||
min-height: 220rpx;
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
box-sizing: border-box;
|
||||
background: #FAFAFA;
|
||||
}
|
||||
|
||||
.placeholder-style {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.popup-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.cancel-btn,
|
||||
.confirm-btn {
|
||||
flex: 1;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
border-radius: 16rpx;
|
||||
font-size: 32rpx;
|
||||
text-align: center;
|
||||
margin: 0 15rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
background: #F8F8F8;
|
||||
color: #666666;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
background: #1A62CE;
|
||||
color: #FFFFFF;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* 弹窗背景遮罩层样式 */
|
||||
::v-deep(.uni-popup__wrapper) {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
.trace-line{
|
||||
width: 100%;
|
||||
margin-bottom: 24rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
>view{
|
||||
padding: 37.5rpx 32rpx;
|
||||
width: calc(50% - 12rpx);
|
||||
.title{
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #1D6AD7;
|
||||
margin-bottom: 16rpx;
|
||||
display: flex;
|
||||
image{
|
||||
width: 46rpx;
|
||||
height: 46rpx;
|
||||
margin-right: 11rpx;
|
||||
}
|
||||
}
|
||||
.more{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
.trace{
|
||||
color: #2E77DF;
|
||||
border: 2rpx solid #78ADFF;
|
||||
background: linear-gradient(0deg, #FFFFFF 1%, #D0E1FF 100%);
|
||||
box-shadow: inset 0px 4rpx 10rpx 0px rgba(255, 255, 255, 0.302);
|
||||
.title{
|
||||
color: #1D6AD7;
|
||||
}
|
||||
}
|
||||
.sendManager{
|
||||
border: 2rpx solid #FFC34B;
|
||||
color: #C68412;
|
||||
box-shadow: inset 0px 4px 10px 0px rgba(255, 255, 255, 0.302);
|
||||
background: linear-gradient(0deg, #FFFFFF 0%, #FBF4D1 100%);
|
||||
.title{color: #CE9523;}
|
||||
|
||||
}
|
||||
}
|
||||
.tabs{
|
||||
margin-bottom: 29rpx;
|
||||
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
background: #fff;
|
||||
color: #878787;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
.tab{
|
||||
width: 50%;
|
||||
border: 4rpx solid transparent;
|
||||
border-radius: 16rpx;
|
||||
line-height: 64rpx;
|
||||
position: relative;
|
||||
&.active{
|
||||
border: 4rpx solid #fff;
|
||||
color: #fff;
|
||||
background: linear-gradient(180deg, #79AFFF 1%, #A2B3FE 100%);
|
||||
box-shadow: 0px 4rpx 10rpx 0px rgba(40, 102, 194, 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
.titles{
|
||||
display: flex;
|
||||
margin-bottom: 44rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.title-item{
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #282828;
|
||||
margin-right: 32rpx;
|
||||
position: relative;
|
||||
>view{
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding: 0 16rpx;
|
||||
}
|
||||
&.active::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: -12rpx;
|
||||
left: 0;
|
||||
width: 120%;
|
||||
height: 24rpx;
|
||||
border-radius: 50px 0px 0px 50px;
|
||||
background: linear-gradient(90deg, #78AEFF 0%, rgba(120, 174, 255, 0.31) 52%, rgba(24, 116, 255, 0) 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.job-list{
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
color: #333333;
|
||||
border-radius: 24rpx;
|
||||
background: #FFFFFF;
|
||||
padding: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
position: relative;
|
||||
.sign{
|
||||
position: absolute;
|
||||
font-size: 24rpx;
|
||||
right: 0;
|
||||
top: 0;
|
||||
padding: 4rpx 14rpx;
|
||||
border: 1rpx solid #EC4827;
|
||||
background: rgba(227, 79, 49, 0.09);
|
||||
border-top-right-radius: 24rpx;
|
||||
border-bottom-left-radius: 24rpx;
|
||||
color: #EC4827;
|
||||
}
|
||||
.top-line{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 24rpx;
|
||||
color: #A2A2A2;
|
||||
margin-bottom: 16rpx;
|
||||
.salary{
|
||||
font-size: 32rpx;
|
||||
color: #4C6EFB;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.title{
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #282828;
|
||||
margin-bottom: 16rpx;
|
||||
display: flex;
|
||||
image{
|
||||
width: 46rpx;
|
||||
height: 46rpx;
|
||||
margin-right: 11rpx;
|
||||
}
|
||||
}
|
||||
.info{
|
||||
font-size: 24rpx;
|
||||
margin-bottom: 16rpx;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.bottom-line{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 24rpx;
|
||||
color: #A2A2A2;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
}
|
||||
.view-more-btn{
|
||||
padding: 10rpx 56rpx;
|
||||
background: #FFFFFF;
|
||||
color: #4C6EFB;
|
||||
border: 1rpx solid #4C6EFB;
|
||||
text-align: center;
|
||||
border-radius: 40rpx;
|
||||
width: fit-content;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.person-list{
|
||||
padding-top: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #FFFFFF;
|
||||
.top-info{
|
||||
padding: 0 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
display: flex;
|
||||
image{
|
||||
width: 86rpx;
|
||||
height: 86rpx;
|
||||
margin-right: 19rpx;
|
||||
display: block;
|
||||
}
|
||||
.top-right{
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
.name-line{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.name{
|
||||
font-size: 32rpx;
|
||||
display: flex;
|
||||
margin-right: 15rpx;
|
||||
margin-bottom: 3rpx;
|
||||
align-items: center;
|
||||
.tag{
|
||||
font-size: 24rpx;
|
||||
line-height: 32rpx;
|
||||
padding: 0 12rpx;
|
||||
margin-left: 15rpx;
|
||||
border-radius: 4rpx;
|
||||
background: #4D89E3;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.service-status{
|
||||
color: #E0A61F;
|
||||
font-weight: bold;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
.info-line{
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.info-line{
|
||||
padding: 0 32rpx 32rpx;
|
||||
color: #3D3D3D;
|
||||
border-bottom: 1px solid #E8E8E8;
|
||||
>view{
|
||||
text{
|
||||
color: #8E8E8E;
|
||||
}
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
.services{
|
||||
line-height: 40rpx;
|
||||
padding: 28rpx 32rpx;
|
||||
display: flex;
|
||||
>view{
|
||||
flex-grow: 1;
|
||||
font-size: 26rpx;
|
||||
color: #1A62CE;
|
||||
text-align: center;
|
||||
&:first-child{
|
||||
color: #E04020;
|
||||
border-right: 1px solid #D8D8D8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1442
packageRc/pages/daiban/daibandetail.vue
Normal file
1442
packageRc/pages/daiban/daibandetail.vue
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user