1037 lines
24 KiB
Vue
1037 lines
24 KiB
Vue
<template>
|
||
<view class="container">
|
||
<!-- 帮扶手册历史记录 -->
|
||
<view v-if="type === 'help'" class="help-history">
|
||
<view class="page-title">帮扶手册历史记录</view>
|
||
|
||
<!-- 加载状态 -->
|
||
<view v-if="loading" class="loading-container">
|
||
<u-loading-icon mode="spinner" size="40"></u-loading-icon>
|
||
<text class="loading-text">加载中...</text>
|
||
</view>
|
||
|
||
<!-- 数据为空状态 -->
|
||
<view v-else-if="groupedData.length === 0" class="empty-container">
|
||
<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
|
||
<text class="empty-text">暂无历史记录</text>
|
||
</view>
|
||
|
||
<!-- 分组数据显示 -->
|
||
<view v-else class="history-list">
|
||
<view v-for="(group, groupIndex) in groupedData" :key="groupIndex" class="history-card">
|
||
<!-- 时间标题 -->
|
||
<view class="card-header">
|
||
<text class="time-text">{{ formatTime(group.createTime) }}</text>
|
||
</view>
|
||
|
||
<!-- 图片列表 -->
|
||
<view class="image-list">
|
||
<view
|
||
v-for="(item, itemIndex) in group.items"
|
||
:key="itemIndex"
|
||
class="image-item"
|
||
@click="previewImage(item.manualPhoto, item.manualPhotoName)"
|
||
>
|
||
<image
|
||
:src="item.manualPhoto"
|
||
:alt="item.manualPhotoName"
|
||
mode="aspectFill"
|
||
class="preview-image"
|
||
/>
|
||
<view class="image-name">{{ item.manualPhotoName }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 需求历史记录 -->
|
||
<view v-else-if="type === 'need'" class="need-history">
|
||
<view class="page-title">需求历史记录</view>
|
||
|
||
<!-- 加载状态 -->
|
||
<view v-if="loading" class="loading-container">
|
||
<u-loading-icon mode="spinner" size="40"></u-loading-icon>
|
||
<text class="loading-text">加载中...</text>
|
||
</view>
|
||
|
||
<!-- 数据为空状态 -->
|
||
<view v-else-if="needData.length === 0" class="empty-container">
|
||
<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
|
||
<text class="empty-text">暂无需求记录</text>
|
||
</view>
|
||
|
||
<!-- 需求数据显示 -->
|
||
<view v-else class="need-list">
|
||
<view v-for="(item, index) in needData" :key="index" class="need-card">
|
||
<!-- 时间标题 -->
|
||
<view class="card-header">
|
||
<text class="time-text">{{ formatTime(item.createTime) }}</text>
|
||
</view>
|
||
|
||
<!-- 需求内容 -->
|
||
<view class="need-content">
|
||
<view class="need-item">
|
||
<text class="need-label">就业需求：</text>
|
||
<text class="need-value">{{ item.jobNeed || '无' }}</text>
|
||
</view>
|
||
<view class="need-item">
|
||
<text class="need-label">培训需求：</text>
|
||
<text class="need-value">{{ item.trainingNeed || '无' }}</text>
|
||
</view>
|
||
<view class="need-item">
|
||
<text class="need-label">其他诉求：</text>
|
||
<text class="need-value">{{ item.otherNeed || '无' }}</text>
|
||
</view>
|
||
<view class="need-item">
|
||
<text class="need-label">意见建议：</text>
|
||
<text class="need-value">{{ item.suggestion || '无' }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 满意度历史记录 -->
|
||
<view v-else-if="type === 'satisfaction'" class="satisfaction-history">
|
||
<view class="page-title">满意度历史记录</view>
|
||
|
||
<!-- 加载状态 -->
|
||
<view v-if="loading" class="loading-container">
|
||
<u-loading-icon mode="spinner" size="40"></u-loading-icon>
|
||
<text class="loading-text">加载中...</text>
|
||
</view>
|
||
|
||
<!-- 数据为空状态 -->
|
||
<view v-else-if="satisfactionData.length === 0" class="empty-container">
|
||
<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
|
||
<text class="empty-text">暂无满意度记录</text>
|
||
</view>
|
||
|
||
<!-- 满意度数据显示 -->
|
||
<view v-else class="satisfaction-list">
|
||
<view v-for="(item, index) in satisfactionData" :key="index" class="satisfaction-card">
|
||
<!-- 时间标题 -->
|
||
<view class="card-header">
|
||
<text class="time-text">{{ formatTime(item.createTime) }}</text>
|
||
</view>
|
||
|
||
<!-- 满意度内容 -->
|
||
<view class="satisfaction-content">
|
||
<view class="satisfaction-item">
|
||
<text class="satisfaction-label">对村两委满意度：</text>
|
||
<view class="satisfaction-rating">
|
||
<text class="rating-text">{{ getSatisfactionText(item.villageSatisfaction) }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="satisfaction-item">
|
||
<text class="satisfaction-label">对驻村工作队满意度：</text>
|
||
<view class="satisfaction-rating">
|
||
<text class="rating-text">{{ getSatisfactionText(item.workTeamSatisfaction) }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 家庭成员历史记录 -->
|
||
<view v-else-if="type === 'member'" class="member-history">
|
||
<view class="page-title">家庭成员历史记录</view>
|
||
|
||
<!-- 加载状态 -->
|
||
<view v-if="loading" class="loading-container">
|
||
<u-loading-icon mode="spinner" size="40"></u-loading-icon>
|
||
<text class="loading-text">加载中...</text>
|
||
</view>
|
||
|
||
<!-- 数据为空状态 -->
|
||
<view v-else-if="remarkHistory.length === 0" class="empty-container">
|
||
<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
|
||
<text class="empty-text">暂无历史记录</text>
|
||
</view>
|
||
|
||
<!-- 历史变更记录 -->
|
||
<view v-else class="remark-history">
|
||
<view class="remark-list">
|
||
<view v-for="(item, index) in remarkHistory" :key="index" class="remark-card">
|
||
<view class="remark-header">
|
||
<text class="remark-time">{{ item.updateTime }}</text>
|
||
</view>
|
||
<view class="remark-content">
|
||
<text class="remark-message">{{ item.msg }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 签名历史记录 -->
|
||
<view v-else-if="type === 'sign'" class="signature-history">
|
||
<view class="page-title">签名历史记录</view>
|
||
|
||
<!-- 加载状态 -->
|
||
<view v-if="loading" class="loading-container">
|
||
<u-loading-icon mode="spinner" size="40"></u-loading-icon>
|
||
<text class="loading-text">加载中...</text>
|
||
</view>
|
||
|
||
<!-- 数据为空状态 -->
|
||
<view v-else-if="signatureData.length === 0" class="empty-container">
|
||
<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
|
||
<text class="empty-text">暂无签名记录</text>
|
||
</view>
|
||
|
||
<!-- 签名记录列表 -->
|
||
<view v-else class="signature-list">
|
||
<view v-for="(item, index) in signatureData" :key="index" class="signature-card">
|
||
<!-- 时间标题 -->
|
||
<view class="card-header">
|
||
<text class="time-text">{{ formatTime(item.createTime) }}</text>
|
||
<text class="method-text">{{ getRecordMethodText(item.recordMethod) }}</text>
|
||
</view>
|
||
|
||
<!-- 签名图片 -->
|
||
<view class="signature-images">
|
||
<!-- 入户员签名 -->
|
||
<view class="signature-item">
|
||
<text class="signature-label">入户员签名：</text>
|
||
<view class="signature-image-container">
|
||
<image
|
||
v-if="item.signatureImg"
|
||
:src="item.signatureImg"
|
||
mode="aspectFit"
|
||
class="signature-image"
|
||
@click="previewImage(item.signatureImg, '入户员签名')"
|
||
/>
|
||
<text v-else class="no-signature">无签名</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 户主签名 -->
|
||
<view class="signature-item">
|
||
<text class="signature-label">户主签名：</text>
|
||
<view class="signature-image-container">
|
||
<image
|
||
v-if="item.holderSignatureImg"
|
||
:src="item.holderSignatureImg"
|
||
mode="aspectFit"
|
||
class="signature-image"
|
||
@click="previewImage(item.holderSignatureImg, '户主签名')"
|
||
/>
|
||
<text v-else class="no-signature">无签名</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 其他类型的处理 -->
|
||
<view v-else class="other-type">
|
||
<u-empty mode="page" icon="http://cdn.uviewui.com/uview/empty/page.png"></u-empty>
|
||
<text class="other-text">暂不支持该类型的历史记录</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { helpApi, needApi, satisfactionApi, memberApi,signatureApi , systemApi} from '@/utils/api.js'
|
||
import dayjs from 'dayjs'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
type: '', // 页面类型参数
|
||
id: '', // 家庭ID参数
|
||
loading: false, // 加载状态
|
||
helpData: [], // 帮扶手册原始数据
|
||
groupedData: [], // 分组后的数据
|
||
needData: [], // 需求原始数据
|
||
satisfactionData: [], // 满意度原始数据
|
||
memberData: null, // 成员原始数据
|
||
remarkHistory: [], // 解析后的备注历史记录
|
||
signatureData: [] ,// 签名记录数据
|
||
queryDictTypeDO: {
|
||
dictTypeList: ['biz_record_type'
|
||
].join(','),
|
||
},
|
||
queryDictTypeDO1: {
|
||
dictTypeList: ['biz_satisfaction'
|
||
].join(','),
|
||
},
|
||
satisfactionDict:[],
|
||
recordMethodDict:[],
|
||
}
|
||
},
|
||
|
||
onLoad(options) {
|
||
// 获取页面参数
|
||
this.type = options.type || ''
|
||
this.id = options.id || ''
|
||
|
||
// 如果是帮扶手册类型且有ID，则加载数据
|
||
if (this.type === 'help' && this.id) {
|
||
this.loadHelpHistory()
|
||
}
|
||
// 如果是需求类型且有ID，则加载数据
|
||
else if (this.type === 'need' && this.id) {
|
||
this.loadNeedHistory()
|
||
}
|
||
// 如果是满意度类型且有ID，则加载数据
|
||
else if (this.type === 'satisfaction' && this.id) {
|
||
this.loadSatisfactionHistory();
|
||
|
||
}
|
||
// 如果是家庭成员类型且有ID，则加载数据
|
||
else if (this.type === 'member' && this.id) {
|
||
this.loadMemberDetail()
|
||
}
|
||
// 如果是签名类型且有ID，则加载数据
|
||
else if (this.type === 'sign' && this.id) {
|
||
this.loadSignatureHistory()
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
// 加载帮扶手册历史记录
|
||
async loadHelpHistory() {
|
||
if (!this.id) {
|
||
uni.showToast({
|
||
title: '缺少必要参数',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
this.loading = true
|
||
|
||
try {
|
||
const response = await helpApi.getDetailList(this.id)
|
||
console.log('帮扶手册历史数据:', response)
|
||
|
||
if (response ) {
|
||
this.helpData = response
|
||
this.processData()
|
||
} else {
|
||
this.helpData = []
|
||
this.groupedData = []
|
||
}
|
||
} catch (error) {
|
||
console.error('获取帮扶手册历史记录失败:', error)
|
||
uni.showToast({
|
||
title: '获取数据失败',
|
||
icon: 'none'
|
||
})
|
||
this.helpData = []
|
||
this.groupedData = []
|
||
} finally {
|
||
this.loading = false
|
||
}
|
||
},
|
||
|
||
// 加载需求历史记录
|
||
async loadNeedHistory() {
|
||
if (!this.id) {
|
||
uni.showToast({
|
||
title: '缺少必要参数',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
this.loading = true
|
||
|
||
try {
|
||
const response = await needApi.getDetailList(this.id)
|
||
console.log('需求历史数据:', response)
|
||
|
||
if (response) {
|
||
this.needData = response
|
||
} else {
|
||
this.needData = []
|
||
}
|
||
} catch (error) {
|
||
console.error('获取需求历史记录失败:', error)
|
||
uni.showToast({
|
||
title: '获取数据失败',
|
||
icon: 'none'
|
||
})
|
||
this.needData = []
|
||
} finally {
|
||
this.loading = false
|
||
}
|
||
},
|
||
|
||
// 加载满意度历史记录
|
||
async loadSatisfactionHistory() {
|
||
if (!this.id) {
|
||
uni.showToast({
|
||
title: '缺少必要参数',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
this.loading = true
|
||
|
||
try {
|
||
const response = await satisfactionApi.getDetailList(this.id)
|
||
this.satisfactionDict = await systemApi.getDictType(this.queryDictTypeDO1);
|
||
|
||
if (response) {
|
||
this.satisfactionData = response
|
||
} else {
|
||
this.satisfactionData = []
|
||
}
|
||
} catch (error) {
|
||
console.error('获取满意度历史记录失败:', error)
|
||
uni.showToast({
|
||
title: '获取数据失败',
|
||
icon: 'none'
|
||
})
|
||
this.satisfactionData = []
|
||
} finally {
|
||
this.loading = false
|
||
}
|
||
},
|
||
|
||
// 加载家庭成员详情
|
||
async loadMemberDetail() {
|
||
if (!this.id) {
|
||
uni.showToast({
|
||
title: '缺少必要参数',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
this.loading = true
|
||
|
||
try {
|
||
const response = await memberApi.getDetail(this.id)
|
||
console.log('家庭成员详情数据:', response)
|
||
|
||
if (response) {
|
||
this.memberData = response
|
||
this.processRemarkHistory()
|
||
} else {
|
||
this.memberData = null
|
||
this.remarkHistory = []
|
||
}
|
||
} catch (error) {
|
||
console.error('获取家庭成员详情失败:', error)
|
||
uni.showToast({
|
||
title: '获取数据失败',
|
||
icon: 'none'
|
||
})
|
||
this.memberData = null
|
||
this.remarkHistory = []
|
||
} finally {
|
||
this.loading = false
|
||
}
|
||
},
|
||
|
||
// 加载签名历史记录
|
||
async loadSignatureHistory() {
|
||
if (!this.id) {
|
||
uni.showToast({
|
||
title: '缺少必要参数',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
this.loading = true
|
||
|
||
try {
|
||
const response = await signatureApi.getDetailList(this.id)
|
||
this.recordMethodDict = await systemApi.getDictType(this.queryDictTypeDO);
|
||
|
||
if (response) {
|
||
this.signatureData = response
|
||
} else {
|
||
this.signatureData = []
|
||
}
|
||
} catch (error) {
|
||
console.error('获取签名历史记录失败:', error)
|
||
uni.showToast({
|
||
title: '获取数据失败',
|
||
icon: 'none'
|
||
})
|
||
this.signatureData = []
|
||
} finally {
|
||
this.loading = false
|
||
}
|
||
},
|
||
|
||
// 处理数据：按groupId分组并按createTime排序
|
||
processData() {
|
||
if (!this.helpData || this.helpData.length === 0) {
|
||
this.groupedData = []
|
||
return
|
||
}
|
||
|
||
// 按groupId分组
|
||
const groupMap = new Map()
|
||
|
||
this.helpData.forEach(item => {
|
||
const groupId = item.groupId
|
||
if (!groupMap.has(groupId)) {
|
||
groupMap.set(groupId, {
|
||
groupId: groupId,
|
||
createTime: item.createTime,
|
||
items: []
|
||
})
|
||
}
|
||
groupMap.get(groupId).items.push(item)
|
||
})
|
||
|
||
// 转换为数组并按createTime降序排序
|
||
this.groupedData = Array.from(groupMap.values()).sort((a, b) => {
|
||
return b.createTime - a.createTime
|
||
})
|
||
|
||
console.log('分组后的数据:', this.groupedData)
|
||
},
|
||
|
||
// 处理备注历史记录
|
||
processRemarkHistory() {
|
||
if (!this.memberData || !this.memberData.remark) {
|
||
this.remarkHistory = []
|
||
return
|
||
}
|
||
|
||
try {
|
||
const remarkStr = '['+ this.memberData.remark+']';
|
||
const parsed = JSON.parse(remarkStr)
|
||
|
||
// 如果是数组，直接使用
|
||
if (Array.isArray(parsed)) {
|
||
this.remarkHistory = parsed
|
||
}
|
||
// 如果是对象，包装成数组
|
||
else if (typeof parsed === 'object') {
|
||
this.remarkHistory = [parsed]
|
||
}
|
||
// 其他情况，设为空数组
|
||
else {
|
||
this.remarkHistory = []
|
||
}
|
||
|
||
// 处理msg中的Φ符号，替换为换行符
|
||
this.remarkHistory.forEach(item => {
|
||
if (item.msg) {
|
||
item.msg = item.msg.replace(/Φ/g, '\n')
|
||
}
|
||
})
|
||
|
||
// 按updateTime降序排序
|
||
this.remarkHistory.sort((a, b) => {
|
||
const timeA = new Date(a.updateTime).getTime()
|
||
const timeB = new Date(b.updateTime).getTime()
|
||
return timeB - timeA
|
||
})
|
||
|
||
console.log('解析后的备注历史:', this.remarkHistory)
|
||
} catch (error) {
|
||
console.error('解析备注历史记录失败:', error)
|
||
this.remarkHistory = []
|
||
}
|
||
},
|
||
|
||
// 格式化时间
|
||
formatTime(timestamp) {
|
||
if (!timestamp) return ''
|
||
return dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss')
|
||
},
|
||
|
||
// 获取满意度文字描述
|
||
getSatisfactionText(rating) {
|
||
var str = '';
|
||
this.satisfactionDict.forEach(item =>{
|
||
|
||
if(item.value == rating+'' ){
|
||
str = item.label
|
||
}
|
||
})
|
||
return str
|
||
},
|
||
|
||
// 获取入户方式文字描述
|
||
getRecordMethodText(method) {
|
||
var str = '';
|
||
this.recordMethodDict.forEach(item =>{
|
||
if(item.value == method+'' ){
|
||
str = item.label
|
||
}
|
||
})
|
||
return str
|
||
},
|
||
|
||
// 预览图片
|
||
previewImage(imageSrc, imageName) {
|
||
if (!imageSrc) {
|
||
uni.showToast({
|
||
title: '图片地址无效',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
// 如果是base64格式，需要特殊处理
|
||
if (imageSrc.startsWith('data:image/')) {
|
||
// 对于base64图片，直接显示
|
||
uni.previewImage({
|
||
urls: [imageSrc],
|
||
current: imageSrc,
|
||
success: () => {
|
||
console.log('图片预览成功')
|
||
},
|
||
fail: (error) => {
|
||
console.error('图片预览失败:', error)
|
||
uni.showToast({
|
||
title: '图片预览失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
} else {
|
||
// 对于网络图片，直接预览
|
||
uni.previewImage({
|
||
urls: [imageSrc],
|
||
current: imageSrc,
|
||
success: () => {
|
||
console.log('图片预览成功')
|
||
},
|
||
fail: (error) => {
|
||
console.error('图片预览失败:', error)
|
||
uni.showToast({
|
||
title: '图片预览失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.container {
|
||
padding: 20rpx;
|
||
background-color: #f5f5f5;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.help-history {
|
||
.page-title {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
text-align: center;
|
||
margin-bottom: 30rpx;
|
||
padding: 20rpx 0;
|
||
background-color: #fff;
|
||
border-radius: 12rpx;
|
||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
}
|
||
|
||
.loading-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 100rpx 0;
|
||
|
||
.loading-text {
|
||
margin-top: 20rpx;
|
||
color: #999;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
|
||
.empty-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 100rpx 0;
|
||
|
||
.empty-text {
|
||
margin-top: 20rpx;
|
||
color: #999;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
|
||
.history-list {
|
||
.history-card {
|
||
background-color: #fff;
|
||
border-radius: 12rpx;
|
||
margin-bottom: 20rpx;
|
||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
|
||
overflow: hidden;
|
||
|
||
.card-header {
|
||
padding: 24rpx;
|
||
background-color: #f8f9fa;
|
||
border-bottom: 1rpx solid #e9ecef;
|
||
|
||
.time-text {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
.image-list {
|
||
padding: 24rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 20rpx;
|
||
|
||
.image-item {
|
||
width: 200rpx;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
transition: transform 0.2s ease;
|
||
|
||
&:hover {
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
.preview-image {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
border-radius: 8rpx;
|
||
border: 2rpx solid #e9ecef;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.image-name {
|
||
margin-top: 12rpx;
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
line-height: 1.4;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.need-history {
|
||
.page-title {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
text-align: center;
|
||
margin-bottom: 30rpx;
|
||
padding: 20rpx 0;
|
||
background-color: #fff;
|
||
border-radius: 12rpx;
|
||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
}
|
||
|
||
.need-list {
|
||
.need-card {
|
||
background-color: #fff;
|
||
border-radius: 12rpx;
|
||
margin-bottom: 20rpx;
|
||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
|
||
overflow: hidden;
|
||
|
||
.card-header {
|
||
padding: 24rpx;
|
||
background-color: #f8f9fa;
|
||
border-bottom: 1rpx solid #e9ecef;
|
||
|
||
.time-text {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
.need-content {
|
||
padding: 24rpx;
|
||
|
||
.need-item {
|
||
display: flex;
|
||
margin-bottom: 20rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.need-label {
|
||
width: 160rpx;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.need-value {
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
line-height: 1.5;
|
||
word-break: break-all;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.satisfaction-history {
|
||
.page-title {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
text-align: center;
|
||
margin-bottom: 30rpx;
|
||
padding: 20rpx 0;
|
||
background-color: #fff;
|
||
border-radius: 12rpx;
|
||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
}
|
||
|
||
.satisfaction-list {
|
||
.satisfaction-card {
|
||
background-color: #fff;
|
||
border-radius: 12rpx;
|
||
margin-bottom: 20rpx;
|
||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
|
||
overflow: hidden;
|
||
|
||
.card-header {
|
||
padding: 24rpx;
|
||
background-color: #f8f9fa;
|
||
border-bottom: 1rpx solid #e9ecef;
|
||
|
||
.time-text {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
.satisfaction-content {
|
||
padding: 24rpx;
|
||
|
||
.satisfaction-item {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 24rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.satisfaction-label {
|
||
width: 280rpx;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.satisfaction-rating {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20rpx;
|
||
|
||
.rating-text {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
min-width: 120rpx;
|
||
}
|
||
|
||
.rating-stars {
|
||
display: flex;
|
||
gap: 8rpx;
|
||
|
||
.star {
|
||
font-size: 32rpx;
|
||
color: #ddd;
|
||
transition: color 0.2s ease;
|
||
|
||
&.star-filled {
|
||
color: #ffd700;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.other-type {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 100rpx 0;
|
||
|
||
.other-text {
|
||
margin-top: 20rpx;
|
||
color: #999;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
|
||
.member-history {
|
||
.page-title {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
text-align: center;
|
||
margin-bottom: 30rpx;
|
||
padding: 20rpx 0;
|
||
background-color: #fff;
|
||
border-radius: 12rpx;
|
||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
}
|
||
|
||
.remark-history {
|
||
.remark-list {
|
||
.remark-card {
|
||
background-color: #fff;
|
||
border-radius: 12rpx;
|
||
margin-bottom: 20rpx;
|
||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
|
||
overflow: hidden;
|
||
|
||
.remark-header {
|
||
padding: 20rpx 24rpx;
|
||
background-color: #f8f9fa;
|
||
border-bottom: 1rpx solid #e9ecef;
|
||
|
||
.remark-time {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
.remark-content {
|
||
padding: 24rpx;
|
||
|
||
.remark-message {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
line-height: 1.6;
|
||
word-break: break-all;
|
||
white-space: pre-line;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.signature-history {
|
||
.page-title {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
text-align: center;
|
||
margin-bottom: 30rpx;
|
||
padding: 20rpx 0;
|
||
background-color: #fff;
|
||
border-radius: 12rpx;
|
||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
}
|
||
|
||
.signature-list {
|
||
.signature-card {
|
||
background-color: #fff;
|
||
border-radius: 12rpx;
|
||
margin-bottom: 20rpx;
|
||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
|
||
overflow: hidden;
|
||
|
||
.card-header {
|
||
padding: 24rpx;
|
||
background-color: #f8f9fa;
|
||
border-bottom: 1rpx solid #e9ecef;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.time-text {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.method-text {
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
font-weight: 400;
|
||
}
|
||
}
|
||
|
||
.signature-images {
|
||
padding: 24rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 20rpx;
|
||
|
||
.signature-item {
|
||
width: 45%; /* 两列布局 */
|
||
text-align: left;
|
||
cursor: pointer;
|
||
transition: transform 0.2s ease;
|
||
|
||
&:hover {
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
.signature-label {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.signature-image-container {
|
||
width: 100%;
|
||
height: 200rpx; /* 固定高度 */
|
||
border: 2rpx solid #e9ecef;
|
||
border-radius: 8rpx;
|
||
overflow: hidden;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: #f0f0f0;
|
||
}
|
||
|
||
.signature-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.no-signature {
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
text-align: center;
|
||
line-height: 200rpx; /* 固定高度 */
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |