442 lines
10 KiB
Vue
442 lines
10 KiB
Vue
<template>
|
||
<view class="help-follow-page">
|
||
<view class="header">
|
||
<view class="back-btn" @click="goBack">
|
||
<uni-icons type="arrowleft" size="24" color="#fff" />
|
||
</view>
|
||
<view class="title">跟进</view>
|
||
</view>
|
||
|
||
<!-- 人员信息卡片 -->
|
||
<view class="person-info-card">
|
||
<view class="info-item">
|
||
<uni-icons type="person" size="20" color="#1989fa" />
|
||
<span class="info-label">人员姓名</span>
|
||
<span class="info-value">{{personInfo.personName}}</span>
|
||
</view>
|
||
<view class="info-item">
|
||
<uni-icons type="briefcase" size="20" color="#1989fa" />
|
||
<span class="info-label">帮扶类型</span>
|
||
<span class="info-value">{{personInfo.helpType}}</span>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 新增跟进记录 -->
|
||
<view class="follow-form-section">
|
||
<view class="section-title">新增跟进记录</view>
|
||
|
||
<view class="form-item">
|
||
<view class="form-label required">跟进日期：</view>
|
||
<input class="form-input date-input" v-model="followData.followDate" type="date" placeholder="请选择跟进日期" />
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<view class="form-label required">跟进方式：</view>
|
||
<picker class="form-picker" mode="selector" range="{{followMethods}}" @change="onFollowMethodChange">
|
||
<view class="picker-text">{{followData.followMethod || '请选择跟进方式'}}</view>
|
||
</picker>
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<view class="form-label required">跟进内容：</view>
|
||
<textarea class="form-textarea" v-model="followData.followContent" placeholder="请输入跟进内容" rows="4"></textarea>
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<view class="form-label required">跟进结果：</view>
|
||
<textarea class="form-textarea" v-model="followData.followResult" placeholder="请输入跟进结果" rows="3"></textarea>
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<view class="form-label">下一步计划：</view>
|
||
<textarea class="form-textarea" v-model="followData.nextPlan" placeholder="请输入下一步计划" rows="3"></textarea>
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<view class="form-label">下次联系：</view>
|
||
<input class="form-input date-input" v-model="followData.nextContactDate" type="date" placeholder="请选择下次联系日期" />
|
||
</view>
|
||
|
||
<view class="form-buttons">
|
||
<button class="save-btn" type="primary" @click="saveFollowRecord">保存跟进</button>
|
||
<button class="reset-btn" @click="resetForm">重置</button>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 跟进历史记录 -->
|
||
<view class="history-section">
|
||
<view class="section-header">
|
||
<view class="section-title">跟进历史记录</view>
|
||
<view class="record-count">共{{historyRecords.length}}条记录</view>
|
||
</view>
|
||
|
||
<view class="history-list">
|
||
<view class="history-item" v-for="record in historyRecords" :key="record.id">
|
||
<view class="history-header">
|
||
<uni-icons type="time" size="16" color="#1989fa" />
|
||
<span class="history-date">{{record.date}}</span>
|
||
</view>
|
||
<view class="history-content">
|
||
<view class="history-row">
|
||
<span class="history-label">跟进方式：</span>
|
||
<span class="history-value">{{record.method}}</span>
|
||
</view>
|
||
<view class="history-row">
|
||
<span class="history-label">跟进人：</span>
|
||
<span class="history-value">{{record.follower}}</span>
|
||
</view>
|
||
<view class="history-row">
|
||
<span class="history-label">跟进内容：</span>
|
||
<span class="history-value">{{record.content}}</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { ref, reactive, onMounted } from 'vue'
|
||
import { useRouter, useRoute } from 'uni-app'
|
||
|
||
export default {
|
||
name: 'HelpFollow',
|
||
setup() {
|
||
const router = useRouter()
|
||
const route = useRoute()
|
||
|
||
// 人员信息
|
||
const personInfo = reactive({
|
||
personName: '王小美',
|
||
helpType: '招聘岗位推荐'
|
||
})
|
||
|
||
// 跟进方式选项
|
||
const followMethods = ref(['电话', '微信', '邮件', '上门拜访', '视频会议', '其他'])
|
||
|
||
// 跟进表单数据
|
||
const followData = reactive({
|
||
followDate: '',
|
||
followMethod: '',
|
||
followContent: '',
|
||
followResult: '',
|
||
nextPlan: '',
|
||
nextContactDate: ''
|
||
})
|
||
|
||
// 历史记录数据
|
||
const historyRecords = ref([
|
||
{
|
||
id: 1,
|
||
date: '2025-11-05',
|
||
method: '电话',
|
||
follower: '新兴社区管理员',
|
||
content: '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容。'
|
||
},
|
||
{
|
||
id: 2,
|
||
date: '2025-11-05',
|
||
method: '电话',
|
||
follower: '新兴社区管理员',
|
||
content: '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容。'
|
||
}
|
||
])
|
||
|
||
// 返回上一页
|
||
const goBack = () => {
|
||
router.back()
|
||
}
|
||
|
||
// 重置表单
|
||
const resetForm = () => {
|
||
Object.keys(followData).forEach(key => {
|
||
followData[key] = ''
|
||
})
|
||
}
|
||
|
||
// 保存跟进记录
|
||
const saveFollowRecord = () => {
|
||
// 表单验证
|
||
if (!followData.followDate) {
|
||
uni.showToast({ title: '请选择跟进日期', icon: 'none' })
|
||
return
|
||
}
|
||
if (!followData.followMethod) {
|
||
uni.showToast({ title: '请选择跟进方式', icon: 'none' })
|
||
return
|
||
}
|
||
if (!followData.followContent) {
|
||
uni.showToast({ title: '请输入跟进内容', icon: 'none' })
|
||
return
|
||
}
|
||
if (!followData.followResult) {
|
||
uni.showToast({ title: '请输入跟进结果', icon: 'none' })
|
||
return
|
||
}
|
||
|
||
// 这里是模拟保存，实际项目中应该调用API
|
||
console.log('保存跟进记录:', followData)
|
||
|
||
// 保存成功后添加到历史记录列表
|
||
const newRecord = {
|
||
id: historyRecords.value.length + 1,
|
||
date: followData.followDate,
|
||
method: followData.followMethod,
|
||
follower: '当前登录用户', // 实际应该从登录信息中获取
|
||
content: followData.followContent
|
||
}
|
||
historyRecords.value.unshift(newRecord)
|
||
|
||
// 清空表单
|
||
resetForm()
|
||
|
||
uni.showToast({ title: '保存成功', icon: 'success' })
|
||
}
|
||
|
||
// 跟进方式选择变化
|
||
const onFollowMethodChange = (e) => {
|
||
followData.followMethod = followMethods.value[e.detail.value]
|
||
}
|
||
|
||
onMounted(() => {
|
||
// 组件挂载时的初始化逻辑
|
||
// 可以从路由参数中获取人员ID等信息
|
||
console.log('路由参数:', route.query)
|
||
|
||
// 实际项目中应该根据ID加载人员信息和历史记录
|
||
// loadPersonInfo(route.query.personId)
|
||
// loadHistoryRecords(route.query.personId)
|
||
})
|
||
|
||
return {
|
||
personInfo,
|
||
followMethods,
|
||
followData,
|
||
historyRecords,
|
||
goBack,
|
||
resetForm,
|
||
saveFollowRecord,
|
||
onFollowMethodChange
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.help-follow-page {
|
||
background-color: #f5f5f5;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.header {
|
||
background-color: #1989fa;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 20rpx 30rpx;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 100;
|
||
}
|
||
|
||
.back-btn {
|
||
padding: 10rpx;
|
||
}
|
||
|
||
.title {
|
||
color: #fff;
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
flex: 1;
|
||
text-align: center;
|
||
margin-right: 60rpx;
|
||
}
|
||
|
||
.person-info-card {
|
||
background-color: #fff;
|
||
margin-top: 100rpx;
|
||
padding: 30rpx;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
border-radius: 10rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.info-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 10rpx;
|
||
}
|
||
|
||
.info-label {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.info-value {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.follow-form-section {
|
||
background-color: #fff;
|
||
padding: 30rpx;
|
||
border-radius: 10rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.history-section {
|
||
background-color: #fff;
|
||
padding: 30rpx;
|
||
border-radius: 10rpx;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.section-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.record-count {
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.form-item {
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.form-label {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
margin-bottom: 10rpx;
|
||
display: inline-block;
|
||
}
|
||
|
||
.required::before {
|
||
content: '*';
|
||
color: #ff4d4f;
|
||
margin-right: 5rpx;
|
||
}
|
||
|
||
.form-input {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
border: 1rpx solid #e0e0e0;
|
||
border-radius: 8rpx;
|
||
padding: 0 20rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.date-input {
|
||
background-color: #fafafa;
|
||
}
|
||
|
||
.form-picker {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
border: 1rpx solid #e0e0e0;
|
||
border-radius: 8rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 20rpx;
|
||
background-color: #fafafa;
|
||
}
|
||
|
||
.picker-text {
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.form-textarea {
|
||
width: 100%;
|
||
border: 1rpx solid #e0e0e0;
|
||
border-radius: 8rpx;
|
||
padding: 20rpx;
|
||
font-size: 28rpx;
|
||
min-height: 150rpx;
|
||
resize: none;
|
||
}
|
||
|
||
.form-buttons {
|
||
display: flex;
|
||
gap: 20rpx;
|
||
margin-top: 40rpx;
|
||
}
|
||
|
||
.save-btn {
|
||
flex: 1;
|
||
background-color: #1989fa;
|
||
color: #fff;
|
||
font-size: 32rpx;
|
||
border: none;
|
||
height: 88rpx;
|
||
line-height: 88rpx;
|
||
}
|
||
|
||
.reset-btn {
|
||
flex: 1;
|
||
background-color: #fff;
|
||
color: #333;
|
||
font-size: 32rpx;
|
||
border: 1rpx solid #e0e0e0;
|
||
height: 88rpx;
|
||
line-height: 88rpx;
|
||
}
|
||
|
||
.history-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.history-item {
|
||
border: 1rpx solid #e0e0e0;
|
||
border-radius: 10rpx;
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.history-header {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 15rpx;
|
||
gap: 10rpx;
|
||
}
|
||
|
||
.history-date {
|
||
font-size: 28rpx;
|
||
color: #1989fa;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.history-content {
|
||
padding-left: 30rpx;
|
||
}
|
||
|
||
.history-row {
|
||
margin-bottom: 10rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.history-label {
|
||
color: #666;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.history-value {
|
||
color: #333;
|
||
}
|
||
</style> |