投诉管理 问卷管理页面(home)
This commit is contained in:
parent
832c51d9ec
commit
2c20695f1d
42
pages.json
42
pages.json
|
|
@ -81,7 +81,7 @@
|
|||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "工单大厅"
|
||||
}
|
||||
},{
|
||||
}, {
|
||||
"path": "task_hall/detail",
|
||||
"style": {
|
||||
"enablePullDownRefresh": false,
|
||||
|
|
@ -176,12 +176,50 @@
|
|||
}
|
||||
}
|
||||
]
|
||||
|
||||
}, {
|
||||
"root": "pagesB",
|
||||
"pages": [{
|
||||
"path": "complaint/index",
|
||||
"style": {
|
||||
"enablePullDownRefresh": true,
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "投诉管理"
|
||||
}
|
||||
},{
|
||||
"path": "complaint/detail",
|
||||
"style": {
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "投诉管理详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "questionnaire/list",
|
||||
"style": {
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "问卷列表"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "questionnaire/detail",
|
||||
"style": {
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "问卷详情"
|
||||
}
|
||||
}]
|
||||
}],
|
||||
"condition": {
|
||||
"current": 0, // 当前激活的条件，默认为 0
|
||||
"list": [{
|
||||
"name": "", // 条件名称
|
||||
"path": "pagesA/invite/index", // 要打开的页面路径
|
||||
"path": "pagesB/complaint/index", // 要打开的页面路径
|
||||
"query": "" // 可选的页面参数
|
||||
}]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -158,7 +158,7 @@
|
|||
{
|
||||
image: uni.$globalData?.RESOURCE_URL + 'home/grid/tousu.png',
|
||||
title: '投诉管理',
|
||||
type: ''
|
||||
type: 'complaint'
|
||||
},
|
||||
{
|
||||
image: uni.$globalData?.RESOURCE_URL + 'home/grid/yaoqing.png',
|
||||
|
|
@ -168,7 +168,7 @@
|
|||
{
|
||||
image: uni.$globalData?.RESOURCE_URL + 'home/grid/wenjuan.png',
|
||||
title: '问卷管理',
|
||||
type: ''
|
||||
type: 'questionnaire'
|
||||
},
|
||||
{
|
||||
image: uni.$globalData?.RESOURCE_URL + 'home/grid/fangyuan.png',
|
||||
|
|
@ -275,6 +275,18 @@
|
|||
url: '/pagesA/invite/index'
|
||||
});
|
||||
break;
|
||||
case 'complaint':
|
||||
// 投诉管理
|
||||
uni.navigateTo({
|
||||
url: '/pagesB/complaint/index'
|
||||
});
|
||||
break;
|
||||
case 'questionnaire':
|
||||
// 问卷管理
|
||||
uni.navigateTo({
|
||||
url: '/pagesB/questionnaire/list'
|
||||
});
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,174 +0,0 @@
|
|||
<template>
|
||||
<wd-popup v-model="innerVisible" position="bottom" :safe-area-inset-bottom="true" @close="handleClose">
|
||||
<view class="share-popup">
|
||||
<view class="share-header li-flex li-justify-between li-items-center li-px-30 li-py-20">
|
||||
<text class="li-text-32">分享</text>
|
||||
<text class="ri-close-line li-text-48 li-text-#999" @click="handleClose"></text>
|
||||
</view>
|
||||
|
||||
<view class="share-content li-p-30">
|
||||
<view class="share-methods li-flex li-justify-around">
|
||||
<view class="share-item li-flex li-flex-col li-items-center" @click="handleShare('wechat')">
|
||||
<view class="icon-wrapper li-bg-#07c160 li-mb-15">
|
||||
<text class="ri-wechat-line li-text-white li-text-48"></text>
|
||||
</view>
|
||||
<text class="li-text-26">微信好友</text>
|
||||
</view>
|
||||
<view class="share-item li-flex li-flex-col li-items-center" @click="handleGenerate">
|
||||
<view class="icon-wrapper li-bg-#0070F0 li-mb-15">
|
||||
<text class="ri-image-line li-text-white li-text-48"></text>
|
||||
</view>
|
||||
<text class="li-text-26">生成海报</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 海报预览弹窗 -->
|
||||
<wd-popup v-model="showPoster" position="center" :safe-area-inset-bottom="true">
|
||||
<view class="poster-preview">
|
||||
<canvas canvas-id="posterCanvas" class="poster-canvas"></canvas>
|
||||
<view class="poster-actions li-flex li-justify-around li-mt-30">
|
||||
<wd-button size="small" @click="showPoster = false">取消</wd-button>
|
||||
<wd-button size="small" type="primary" @click="savePoster">保存图片</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
</wd-popup>
|
||||
</wd-popup>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, defineProps, defineEmits, watch } from 'vue'
|
||||
import { useToast } from '@/uni_modules/wot-design-uni'
|
||||
|
||||
const Toast = useToast()
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
const innerVisible = ref(false)
|
||||
|
||||
// 监听props的变化
|
||||
watch(() => props.visible, (val) => {
|
||||
innerVisible.value = val
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:visible', 'close', 'generate', 'share'])
|
||||
const showPoster = ref(false)
|
||||
|
||||
// 关闭弹窗
|
||||
const handleClose = () => {
|
||||
emit('update:visible', false)
|
||||
emit('close')
|
||||
}
|
||||
|
||||
// 处理分享
|
||||
const handleShare = (type) => {
|
||||
emit('share', type)
|
||||
handleClose()
|
||||
}
|
||||
|
||||
// 处理生成海报
|
||||
const handleGenerate = async () => {
|
||||
showPoster.value = true
|
||||
await generatePoster()
|
||||
}
|
||||
|
||||
// 生成海报
|
||||
const generatePoster = async () => {
|
||||
try {
|
||||
const ctx = uni.createCanvasContext('posterCanvas')
|
||||
|
||||
// 设置画布大小
|
||||
const canvasWidth = 300
|
||||
const canvasHeight = 450
|
||||
|
||||
// 绘制背景
|
||||
ctx.setFillStyle('#ffffff')
|
||||
ctx.fillRect(0, 0, canvasWidth, canvasHeight)
|
||||
|
||||
// 绘制标题
|
||||
ctx.setFillStyle('#333333')
|
||||
ctx.setFontSize(16)
|
||||
ctx.setTextAlign('center')
|
||||
ctx.fillText('邀请您加入我们的物业管理平台', canvasWidth / 2, 40)
|
||||
|
||||
// 绘制二维码（示例）
|
||||
ctx.setFillStyle('#000000')
|
||||
ctx.fillRect(100, 200, 100, 100)
|
||||
|
||||
// 绘制底部文字
|
||||
ctx.setFillStyle('#666666')
|
||||
ctx.setFontSize(14)
|
||||
ctx.fillText('扫码加入', canvasWidth / 2, 350)
|
||||
|
||||
// 执行绘制
|
||||
ctx.draw()
|
||||
} catch (error) {
|
||||
Toast.error('生成海报失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 保存海报
|
||||
const savePoster = () => {
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId: 'posterCanvas',
|
||||
success: (res) => {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: res.tempFilePath,
|
||||
success: () => {
|
||||
Toast.success('保存成功')
|
||||
showPoster.value = false
|
||||
handleClose()
|
||||
},
|
||||
fail: () => {
|
||||
Toast.error('保存失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
fail: () => {
|
||||
Toast.error('生成图片失败')
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.share-popup {
|
||||
.share-header {
|
||||
border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.share-methods {
|
||||
.share-item {
|
||||
.icon-wrapper {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.poster-preview {
|
||||
background: #fff;
|
||||
padding: 30rpx;
|
||||
border-radius: 20rpx;
|
||||
|
||||
.poster-canvas {
|
||||
width: 600rpx;
|
||||
height: 900rpx;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.poster-actions {
|
||||
padding: 0 40rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -27,16 +27,17 @@
|
|||
<view class="card-content li-mt-30">
|
||||
<!-- 主要返佣说明 -->
|
||||
<view
|
||||
:style="{backgroundImage:`url(${card_back})`,backgroundSize:'cover',backgroundPosition:'center'}"
|
||||
class="commission-card li-bg-gradient-to-r li-from-#4481EB li-to-#0070F0 li-rd-20 li-p-30 li-mb-30">
|
||||
<view class="li-flex li-items-center li-mb-20">
|
||||
<text class="ri-shopping-bag-3-line li-text-48 li-text-white"></text>
|
||||
<text class="li-text-34 li-text-white li-ml-15">业主消费返佣</text>
|
||||
<text class="ri-shopping-bag-3-line li-text-48 li-text-#0a4696"></text>
|
||||
<text class="li-text-34 li-text-#0a4696 li-ml-15 li-font-medium">业主消费返佣</text>
|
||||
</view>
|
||||
<view class="li-flex li-items-baseline li-mb-15">
|
||||
<text class="li-text-70 li-text-white li-font-bold">5</text>
|
||||
<text class="li-text-34 li-text-white li-ml-10">%</text>
|
||||
<text class="li-text-70 li-text-#0a4696 li-font-bold">5</text>
|
||||
<text class="li-text-34 li-text-#0a4696 li-ml-10">%</text>
|
||||
</view>
|
||||
<text class="li-text-26 li-text-white li-opacity-80">邀请的业主每笔消费，您都可获得返佣</text>
|
||||
<text class="li-text-26 li-text-#0a4696 li-opacity-100">邀请的业主每笔消费，您都可获得返佣</text>
|
||||
</view>
|
||||
|
||||
<!-- 收益说明 -->
|
||||
|
|
@ -71,7 +72,7 @@
|
|||
</view>
|
||||
</view>
|
||||
<view class="invite-button li-mt-40">
|
||||
<wd-button type="primary" block custom-class="share-btn" @click="showSharePopup">
|
||||
<wd-button type="primary" block custom-class="share-btn">
|
||||
<text class="ri-share-forward-line li-mr-10"></text>立即邀请
|
||||
</wd-button>
|
||||
</view>
|
||||
|
|
@ -117,15 +118,12 @@
|
|||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- 分享组件 -->
|
||||
<share-popup ref="sharePopupRef" :visible.sync="showShare" @update:visible="showShare = $event"
|
||||
@close="showShare = false" @generate="generatePoster" @share="handleShare" />
|
||||
|
||||
<!-- 规则弹窗 -->
|
||||
<wd-popup v-model="showRulePopup" position="center" @close="showRulePopup = false">
|
||||
<view class="rules-popup li-bg-white ">
|
||||
<view class="rules-header li-py-20 li-px-30 li-flex li-justify-between li-items-center li-border-b">
|
||||
<text class="li-text-34 li-font-medium">活动规则</text>
|
||||
<text class="li-text-34 li-font-medium">邀请规则</text>
|
||||
<text class="ri-close-line li-text-44 li-text-#999" @click="showRulePopup = false"></text>
|
||||
</view>
|
||||
<view class="rules-content li-p-30">
|
||||
|
|
@ -157,53 +155,27 @@
|
|||
useToast
|
||||
} from '@/uni_modules/wot-design-uni'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import SharePopup from './components/SharePopup.vue'
|
||||
import { useNavigation } from '@/hooks/useNavigation'
|
||||
declare const uni : Uni
|
||||
|
||||
const {
|
||||
hasMultiplePages, // 是否有多个页面在路由栈中
|
||||
isTabBarPage, // 当前页面是否为 tabBar 页面
|
||||
checkRouteStack // 检查当前路由栈状态的方法
|
||||
} = useNavigation()
|
||||
const Toast = useToast()
|
||||
const sharePopupRef = ref(null)
|
||||
const showShare = ref(false)
|
||||
const loading = ref(false)
|
||||
const hasMore = ref(true)
|
||||
const page = ref(1)
|
||||
const inviteList = ref([])
|
||||
const showRulePopup = ref(false)
|
||||
|
||||
const card_back = uni.$globalData?.RESOURCE_URL + 'invite/card-back.png'
|
||||
|
||||
onLoad(() => {
|
||||
checkRouteStack()
|
||||
})
|
||||
|
||||
// 显示分享弹窗
|
||||
const showSharePopup = () => {
|
||||
showShare.value = true
|
||||
}
|
||||
|
||||
// 生成海报
|
||||
const generatePoster = () => {
|
||||
// 调用分享组件的生成海报方法
|
||||
sharePopupRef.value?.generatePoster()
|
||||
}
|
||||
|
||||
// 处理分享
|
||||
const handleShare = (type) => {
|
||||
if (type === 'wechat') {
|
||||
// #ifdef APP-PLUS
|
||||
plus.share.sendWithSystem({
|
||||
type: 'text',
|
||||
content: '邀请链接',
|
||||
href: 'https://example.com/invite'
|
||||
})
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
// 小程序分享通过 onShareAppMessage 处理
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
|
||||
// 加载邀请记录
|
||||
const loadInviteRecords = async () => {
|
||||
|
|
@ -259,19 +231,7 @@
|
|||
showRulePopup.value = true
|
||||
}
|
||||
|
||||
// 微信小程序分享配置
|
||||
const onShareAppMessage = () => {
|
||||
return {
|
||||
title: '邀请您加入我们的物业管理平台',
|
||||
path: '/pagesA/invite/index',
|
||||
imageUrl: '分享图片地址'
|
||||
}
|
||||
}
|
||||
|
||||
// 分享定义到组件实例上
|
||||
defineExpose({
|
||||
onShareAppMessage
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
@ -299,26 +259,22 @@
|
|||
.invite-card {
|
||||
.card-content {
|
||||
.commission-card {
|
||||
background: linear-gradient(135deg, #4481EB 0%, #0070F0 100%);
|
||||
border-radius: 20rpx;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.ri-shopping-bag-3-line {
|
||||
font-size: 48rpx;
|
||||
color: #fff;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
|
||||
.li-text-34 {
|
||||
font-size: 34rpx;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.li-text-26 {
|
||||
font-size: 26rpx;
|
||||
color: #fff;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,577 @@
|
|||
<template>
|
||||
<view class="complaint-detail-page">
|
||||
<!-- 自定义导航栏 -->
|
||||
<wd-navbar :bordered="false"
|
||||
custom-style="background: transparent !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;"
|
||||
safeAreaInsetTop fixed placeholder>
|
||||
<template #left>
|
||||
<view class="li-ml-15 li-mt-10 li-flex li-items-center">
|
||||
<text v-if="hasMultiplePages" class="ri-arrow-left-s-line li-text-70"
|
||||
@click="toPages({type:'nav'})"></text>
|
||||
<text v-if="!hasMultiplePages" class="ri-home-5-line li-text-55 li-mb-8 li-mr-10"
|
||||
@click="toPages({type:'home'})"></text>
|
||||
<text class="li-text-42">投诉详情</text>
|
||||
</view>
|
||||
</template>
|
||||
</wd-navbar>
|
||||
<!-- 导航栏背景 -->
|
||||
<view class="nav-bg-layer"></view>
|
||||
|
||||
<!-- 主要内容区域 -->
|
||||
<view class="li-w-92% li-mx-auto li-mt-30 li-pb-30">
|
||||
<!-- 基本信息卡片 -->
|
||||
<view class="detail-card li-bg-white li-rd-20 li-p-30 li-mb-20 li-shadow-sm">
|
||||
<view class="li-flex li-items-center li-justify-between li-pb-15 li-bottom-border2">
|
||||
<view class="li-flex li-items-center">
|
||||
<text class="ri-error-warning-line li-text-34 li-mr-10 li-text-#999999"></text>
|
||||
<text class="li-text-30">{{complaintDetail.complaint_no}}</text>
|
||||
</view>
|
||||
<view class="status-badge" :style="{
|
||||
backgroundColor: getStatusBgColor(complaintDetail.status),
|
||||
color: getStatusColor(complaintDetail.status)
|
||||
}">
|
||||
{{getStatusText(complaintDetail.status)}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="li-mt-25">
|
||||
<!-- 投诉内容 -->
|
||||
<view class="li-flex li-items-start li-mb-20">
|
||||
<text class="content-label li-text-28 li-text-#9a9a9a li-w-160">投诉内容</text>
|
||||
<text class="content-text li-text-28 li-text-#333 li-flex-1">{{complaintDetail.content}}</text>
|
||||
</view>
|
||||
|
||||
<!-- 投诉类型标签 -->
|
||||
<view class="li-flex li-items-center li-flex-wrap li-mt-10 li-mb-20"
|
||||
v-if="complaintDetail.tags && complaintDetail.tags.length">
|
||||
<wd-tag v-for="(tag, idx) in complaintDetail.tags" :key="idx" color="#0083ff" bg-color="#d0e8ff"
|
||||
custom-class="li-mr-10 li-mb-10">
|
||||
{{tag}}
|
||||
</wd-tag>
|
||||
</view>
|
||||
|
||||
<!-- 投诉图片 -->
|
||||
<view class="li-flex li-flex-wrap li-mt-15 li-mb-20"
|
||||
v-if="complaintDetail.images && complaintDetail.images.length">
|
||||
<image v-for="(img, imgIdx) in complaintDetail.images" :key="imgIdx" :src="img"
|
||||
mode="aspectFill" class="detail-image li-mr-10 li-mb-10"
|
||||
@click="previewImage(complaintDetail.images, imgIdx)">
|
||||
</image>
|
||||
</view>
|
||||
|
||||
<!-- 投诉详情信息 -->
|
||||
<view class="li-flex li-items-center li-mb-15">
|
||||
<text class="content-label li-text-28 li-text-#9a9a9a li-w-160">投诉人</text>
|
||||
<text class="content-text li-text-28 li-text-#333">{{complaintDetail.user_name}}</text>
|
||||
</view>
|
||||
|
||||
<view class="li-flex li-items-center li-mb-15">
|
||||
<text class="content-label li-text-28 li-text-#9a9a9a li-w-160">联系电话</text>
|
||||
<text class="content-text li-text-28 li-text-#333">{{complaintDetail.user_mobile}}</text>
|
||||
<text class="ri-phone-line li-text-28 li-text-#0070F0 li-ml-20"
|
||||
@click="callPhone(complaintDetail.user_mobile)"></text>
|
||||
</view>
|
||||
|
||||
<view class="li-flex li-items-center li-mb-15">
|
||||
<text class="content-label li-text-28 li-text-#9a9a9a li-w-160">所在小区</text>
|
||||
<text class="content-text li-text-28 li-text-#333">{{complaintDetail.village_name}}</text>
|
||||
</view>
|
||||
|
||||
<view class="li-flex li-items-center li-mb-15">
|
||||
<text class="content-label li-text-28 li-text-#9a9a9a li-w-160">具体位置</text>
|
||||
<text class="content-text li-text-28 li-text-#333">{{complaintDetail.location || '未提供'}}</text>
|
||||
</view>
|
||||
|
||||
<view class="li-flex li-items-center li-mb-15">
|
||||
<text class="content-label li-text-28 li-text-#9a9a9a li-w-160">提交时间</text>
|
||||
<text class="content-text li-text-28 li-text-#999">{{complaintDetail.create_time}}</text>
|
||||
</view>
|
||||
|
||||
<view class="li-flex li-items-center li-mb-15" v-if="complaintDetail.process_time">
|
||||
<text class="content-label li-text-28 li-text-#9a9a9a li-w-160">处理时间</text>
|
||||
<text class="content-text li-text-28 li-text-#999">{{complaintDetail.process_time}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 处理记录 -->
|
||||
<view class="detail-card li-bg-white li-rd-20 li-p-30 li-mb-20 li-shadow-sm"
|
||||
v-if="processRecords.length > 0">
|
||||
<view class="li-flex li-items-center li-pb-15 li-bottom-border2">
|
||||
<text class="ri-history-line li-text-32 li-text-#0070F0 li-mr-10"></text>
|
||||
<text class="li-text-32 li-font-bold">处理记录</text>
|
||||
</view>
|
||||
|
||||
<view class="process-timeline li-mt-20">
|
||||
<view v-for="(record, index) in processRecords" :key="index" class="timeline-item">
|
||||
<view class="timeline-dot" :class="{'active': index === 0}"></view>
|
||||
<view class="timeline-content">
|
||||
<view class="li-flex li-items-center li-justify-between">
|
||||
<text class="li-text-30">{{record.action}}</text>
|
||||
<text class="li-text-24 li-text-#999">{{record.time}}</text>
|
||||
</view>
|
||||
<view class="li-text-28 li-text-#666 li-mt-10">{{record.remark}}</view>
|
||||
<view class="li-text-26 li-text-#999 li-mt-5">处理人: {{record.operator}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮区域 -->
|
||||
<view v-if="complaintDetail.status !== 2 && complaintDetail.status !== 3">
|
||||
<view class="action-buttons li-flex li-justify-between li-mt-30 li-px-30">
|
||||
<wd-button type="info" plain custom-class="action-btn" v-if="complaintDetail.status === 0"
|
||||
@click="handleProcess">开始处理</wd-button>
|
||||
<wd-button type="primary" custom-class="action-btn" v-if="complaintDetail.status === 1"
|
||||
@click="handleComplete">处理完成</wd-button>
|
||||
<wd-button type="danger" plain custom-class="action-btn" @click="handleClose">关闭投诉</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部固定操作区 -->
|
||||
<view class="fixed-bottom" v-if="complaintDetail.status === 1">
|
||||
<wd-button type="primary" block @click="showAddRecord = true">添加处理记录</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 处理记录弹窗 -->
|
||||
<wd-popup v-model="showAddRecord" position="bottom" closable :safe-area-inset-bottom="true">
|
||||
<view class="add-record-popup li-p-30">
|
||||
<view class="li-text-32 li-font-bold li-mb-20">添加处理记录</view>
|
||||
|
||||
<view class="li-mt-20 li-mb-30">
|
||||
<view class="li-text-28 li-mb-10">处理备注</view>
|
||||
<wd-textarea v-model="recordForm.remark" placeholder="请输入处理信息" autosize show-word-limit
|
||||
max-length="200"></wd-textarea>
|
||||
</view>
|
||||
|
||||
<view class="li-mt-20 li-mb-30">
|
||||
<view class="li-text-28 li-mb-10">上传图片凭证</view>
|
||||
<wd-upload v-model="recordForm.images" max-size="10485760" multiple :limit="4"
|
||||
:before-preview="beforePreview"></wd-upload>
|
||||
</view>
|
||||
|
||||
<wd-button type="primary" block :loading="submitting" @click="submitRecord">提交记录</wd-button>
|
||||
</view>
|
||||
</wd-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, computed, onMounted } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { useToast } from '@/uni_modules/wot-design-uni';
|
||||
import { useNavigation } from '@/hooks/useNavigation';
|
||||
|
||||
|
||||
// 使用导航composable
|
||||
const {
|
||||
hasMultiplePages,
|
||||
isTabBarPage,
|
||||
checkRouteStack
|
||||
} = useNavigation();
|
||||
|
||||
const Toast = useToast();
|
||||
|
||||
// 页面状态
|
||||
const loading = ref(false);
|
||||
const submitting = ref(false);
|
||||
const showAddRecord = ref(false);
|
||||
|
||||
// 表单数据
|
||||
const recordForm = reactive({
|
||||
remark: '',
|
||||
images: []
|
||||
});
|
||||
|
||||
// 根据查询参数获取投诉ID
|
||||
const complaintId = ref(null);
|
||||
onLoad((option) => {
|
||||
complaintId.value = option.id;
|
||||
loadComplaintDetail();
|
||||
checkRouteStack();
|
||||
});
|
||||
|
||||
// 模拟数据 - 投诉详情
|
||||
const complaintDetail = ref({
|
||||
complaint_id: 1,
|
||||
complaint_no: 'TS20240607001',
|
||||
content: '楼道灯已经坏了三天，晚上上下楼很不方便，希望物业尽快解决！由于光线问题，我家小孩差点摔倒，这是安全隐患，希望物业能够尽快修复。',
|
||||
village_name: '阳光花园小区',
|
||||
location: 'A栋3单元楼道',
|
||||
user_name: '张三',
|
||||
user_mobile: '13800138000',
|
||||
create_time: '2024-06-07 10:23',
|
||||
process_time: '2024-06-07 14:35',
|
||||
status: 1,
|
||||
urgency: 2,
|
||||
tags: ['公共设施', '照明', '安全隐患'],
|
||||
images: [
|
||||
'https://img.yzcdn.cn/vant/cat.jpeg',
|
||||
'https://img.yzcdn.cn/vant/tree.jpeg'
|
||||
]
|
||||
});
|
||||
|
||||
// 模拟数据 - 处理记录
|
||||
const processRecords = ref([
|
||||
{
|
||||
record_id: 1,
|
||||
action: '开始处理',
|
||||
remark: '已联系维修人员前往现场查看情况',
|
||||
operator: '李维修',
|
||||
time: '2024-06-07 14:35'
|
||||
}
|
||||
]);
|
||||
|
||||
// 状态颜色配置
|
||||
const getStatusColor = (status) => {
|
||||
const colorMap = {
|
||||
0: '#ff9d00', // 待处理
|
||||
1: '#37A5FF', // 处理中
|
||||
2: '#00b42a', // 已处理
|
||||
3: '#999999' // 已关闭
|
||||
};
|
||||
return colorMap[status] || '#666666';
|
||||
};
|
||||
|
||||
// 状态背景色配置
|
||||
const getStatusBgColor = (status) => {
|
||||
const bgColorMap = {
|
||||
0: '#fff6e9', // 待处理
|
||||
1: '#e8f4ff', // 处理中
|
||||
2: '#e8ffea', // 已处理
|
||||
3: '#f5f5f5' // 已关闭
|
||||
};
|
||||
return bgColorMap[status] || '#f5f5f5';
|
||||
};
|
||||
|
||||
// 状态文字配置
|
||||
const getStatusText = (status) => {
|
||||
const textMap = {
|
||||
0: '待处理',
|
||||
1: '处理中',
|
||||
2: '已处理',
|
||||
3: '已关闭'
|
||||
};
|
||||
return textMap[status] || '未知状态';
|
||||
};
|
||||
|
||||
// 加载投诉详情
|
||||
const loadComplaintDetail = async () => {
|
||||
try {
|
||||
loading.value = true;
|
||||
// 实际项目中这里应该调用API获取数据
|
||||
// await getComplaintDetail(complaintId.value)
|
||||
|
||||
// 模拟加载延迟
|
||||
await new Promise(resolve => setTimeout(resolve, 800));
|
||||
loading.value = false;
|
||||
} catch (error) {
|
||||
console.error('加载投诉详情失败', error);
|
||||
Toast.fail('加载失败，请重试');
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 返回上一页
|
||||
const goBack = () => {
|
||||
uni.navigateBack();
|
||||
};
|
||||
|
||||
// 拨打电话
|
||||
const callPhone = (phone) => {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: phone,
|
||||
success: () => {
|
||||
console.log('拨打电话成功');
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log('拨打电话失败', err);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 图片预览
|
||||
const previewImage = (images, current) => {
|
||||
uni.previewImage({
|
||||
urls: images,
|
||||
current: images[current]
|
||||
});
|
||||
};
|
||||
|
||||
// 处理操作
|
||||
const handleProcess = async () => {
|
||||
try {
|
||||
Toast.loading('处理中...');
|
||||
// 实际项目中这里应该调用API
|
||||
// await startProcess(complaintId.value)
|
||||
|
||||
// 模拟操作延迟
|
||||
await new Promise(resolve => setTimeout(resolve, 800));
|
||||
|
||||
// 更新状态
|
||||
complaintDetail.value.status = 1;
|
||||
complaintDetail.value.process_time = new Date().toLocaleString();
|
||||
|
||||
// 添加处理记录
|
||||
processRecords.value.unshift({
|
||||
record_id: new Date().getTime(),
|
||||
action: '开始处理',
|
||||
remark: '物业已接单，开始处理',
|
||||
operator: '当前操作员',
|
||||
time: '2025-06-23'
|
||||
});
|
||||
|
||||
Toast.success('已开始处理');
|
||||
} catch (error) {
|
||||
console.error('操作失败', error);
|
||||
Toast.fail('操作失败，请重试');
|
||||
}
|
||||
};
|
||||
|
||||
// 完成处理
|
||||
const handleComplete = async () => {
|
||||
try {
|
||||
Toast.loading('处理中...');
|
||||
// 实际项目中这里应该调用API
|
||||
// await completeProcess(complaintId.value)
|
||||
|
||||
// 模拟操作延迟
|
||||
await new Promise(resolve => setTimeout(resolve, 800));
|
||||
|
||||
// 更新状态
|
||||
complaintDetail.value.status = 2;
|
||||
|
||||
// 添加处理记录
|
||||
processRecords.value.unshift({
|
||||
record_id: new Date().getTime(),
|
||||
action: '处理完成',
|
||||
remark: '问题已解决，楼道灯已修复',
|
||||
operator: '当前操作员',
|
||||
time: '2025-06-23'
|
||||
});
|
||||
|
||||
Toast.success('处理完成');
|
||||
} catch (error) {
|
||||
console.error('操作失败', error);
|
||||
Toast.fail('操作失败，请重试');
|
||||
}
|
||||
};
|
||||
|
||||
// 关闭投诉
|
||||
const handleClose = async () => {
|
||||
try {
|
||||
Toast.loading('处理中...');
|
||||
// 实际项目中这里应该调用API
|
||||
// await closeComplaint(complaintId.value)
|
||||
|
||||
// 模拟操作延迟
|
||||
await new Promise(resolve => setTimeout(resolve, 800));
|
||||
|
||||
// 更新状态
|
||||
complaintDetail.value.status = 3;
|
||||
|
||||
// 添加处理记录
|
||||
processRecords.value.unshift({
|
||||
record_id: new Date().getTime(),
|
||||
action: '关闭投诉',
|
||||
remark: '已与业主沟通，投诉已关闭',
|
||||
operator: '当前操作员',
|
||||
time: '2025-06-23'
|
||||
});
|
||||
|
||||
Toast.success('投诉已关闭');
|
||||
} catch (error) {
|
||||
console.error('操作失败', error);
|
||||
Toast.fail('操作失败，请重试');
|
||||
}
|
||||
};
|
||||
|
||||
// 预览文件
|
||||
const beforePreview = (file) => {
|
||||
console.log('预览文件', file);
|
||||
return true;
|
||||
};
|
||||
|
||||
// 页面跳转
|
||||
const toPages = (item) => {
|
||||
switch (item.type) {
|
||||
case 'nav':
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
break;
|
||||
case 'home':
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
// 提交处理记录
|
||||
const submitRecord = async () => {
|
||||
if (!recordForm.remark.trim()) {
|
||||
return Toast.fail('请输入处理备注');
|
||||
}
|
||||
|
||||
try {
|
||||
submitting.value = true;
|
||||
|
||||
// 实际项目中这里应该调用API
|
||||
// await addProcessRecord({
|
||||
// complaint_id: complaintId.value,
|
||||
// remark: recordForm.remark,
|
||||
// images: recordForm.images.map(img => img.url)
|
||||
// })
|
||||
|
||||
// 模拟提交延迟
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
|
||||
// 添加处理记录
|
||||
processRecords.value.unshift({
|
||||
record_id: new Date().getTime(),
|
||||
action: '处理进展',
|
||||
remark: recordForm.remark,
|
||||
operator: '当前操作员',
|
||||
time: '2025-06-23'
|
||||
});
|
||||
|
||||
// 重置表单
|
||||
recordForm.remark = '';
|
||||
recordForm.images = [];
|
||||
|
||||
// 关闭弹窗
|
||||
showAddRecord.value = false;
|
||||
|
||||
Toast.success('记录已添加');
|
||||
submitting.value = false;
|
||||
} catch (error) {
|
||||
console.error('提交记录失败', error);
|
||||
Toast.fail('提交失败，请重试');
|
||||
submitting.value = false;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #F7F8FA;
|
||||
}
|
||||
|
||||
.complaint-detail-page {
|
||||
min-height: 100vh;
|
||||
|
||||
|
||||
/* 有底部固定按钮时的底部间距 */
|
||||
padding-bottom: 140rpx;
|
||||
}
|
||||
|
||||
.nav-bg-layer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: calc(var(--status-bar-height) + 88rpx);
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
|
||||
z-index: -1;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
.status-badge {
|
||||
padding: 4rpx 20rpx;
|
||||
border-radius: 20rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.li-bottom-border2 {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.detail-image {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
border-radius: 8rpx;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* 处理记录时间线 */
|
||||
.process-timeline {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 10rpx;
|
||||
width: 2rpx;
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
padding-left: 40rpx;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.timeline-dot {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 15rpx;
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #e0e0e0;
|
||||
|
||||
&.active {
|
||||
background-color: #0070F0;
|
||||
box-shadow: 0 0 0 4rpx rgba(0, 112, 240, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 底部固定区域 */
|
||||
.fixed-bottom {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #fff;
|
||||
padding: 20rpx 30rpx;
|
||||
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||
/* #ifdef MP-WEIXIN */
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
/* #endif */
|
||||
/* #ifdef APP-PLUS || H5 */
|
||||
padding-bottom: 50rpx
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
width: 290rpx !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 弹窗样式 */
|
||||
.add-record-popup {
|
||||
max-height: 80vh;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,451 @@
|
|||
<template>
|
||||
<view class="complaint-page">
|
||||
<!-- 自定义导航栏 -->
|
||||
<wd-navbar :bordered="false"
|
||||
custom-style="background: transparent !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;"
|
||||
safeAreaInsetTop fixed placeholder>
|
||||
<template #left>
|
||||
<view class="li-ml-15 li-mt-10 li-flex li-items-center">
|
||||
<text v-if="hasMultiplePages" class="ri-arrow-left-s-line li-text-70"
|
||||
@click="toPages({type:'nav'})"></text>
|
||||
<text v-if="!hasMultiplePages" class="ri-home-5-line li-text-55 li-mb-8 li-mr-10"
|
||||
@click="toPages({type:'home'})"></text>
|
||||
<text class="li-text-42">投诉管理</text>
|
||||
</view>
|
||||
</template>
|
||||
</wd-navbar>
|
||||
<!-- 导航栏背景 -->
|
||||
<view class="nav-bg-layer"></view>
|
||||
|
||||
<!-- 搜索栏 -->
|
||||
<view class="li-w-90% li-mx-auto li-mt-30">
|
||||
<wd-search placeholderStyle="color:#d9d9d9" v-model="searchText" placeholder="搜索投诉内容/编号" hide-cancel
|
||||
placeholder-left @search="handleSearch"></wd-search>
|
||||
</view>
|
||||
|
||||
<!-- 状态筛选 -->
|
||||
<view class="li-flex li-items-center li-mx-auto li-w-96% li-mt-20 li-pl-30">
|
||||
<text v-for="(item, index) in statusList" :key="index"
|
||||
:class="activeStatus === item.value ? 'status-tag active' : 'status-tag'"
|
||||
@click="handleStatusChange(item.value)">
|
||||
{{item.label}}
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<!-- 投诉列表 -->
|
||||
<view class="li-w-92% li-mx-auto li-mt-30 li-pb-30">
|
||||
<view v-if="complaintList.length > 0">
|
||||
<view v-for="(item, index) in complaintList" :key="index" @click="toPages({type:'detail', value:item})"
|
||||
class="complaint-card li-bg-white li-rd-20 li-px-30 li-py-25 li-mb-20 li-shadow-sm">
|
||||
<!-- 投诉头部 -->
|
||||
<view
|
||||
class="complaint-header li-flex li-items-center li-justify-between li-pb-15 li-bottom-border2">
|
||||
<view class="li-flex li-items-center">
|
||||
<text class="ri-error-warning-line li-text-34 li-mr-10 li-text-#999999"></text>
|
||||
<text class="li-text-30">{{item.complaint_no}}</text>
|
||||
</view>
|
||||
<view class="status-badge" :style="{
|
||||
backgroundColor: getStatusBgColor(item.status),
|
||||
color: getStatusColor(item.status)
|
||||
}">
|
||||
{{getStatusText(item.status)}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 投诉内容 -->
|
||||
<view class="complaint-content li-mt-20">
|
||||
<view class="li-flex li-items-start li-mb-15">
|
||||
<text class="content-label li-text-28 li-text-#9a9a9a li-w-160">投诉内容</text>
|
||||
<text
|
||||
class="content-text li-text-28 li-text-#333 li-flex-1 li-line-clamp-2">{{item.content}}</text>
|
||||
</view>
|
||||
|
||||
<view class="li-flex li-items-center li-mb-15">
|
||||
<text class="content-label li-text-28 li-text-#9a9a9a li-w-160">小区信息</text>
|
||||
<text class="content-text li-text-28 li-text-#333">{{item.village_name}}</text>
|
||||
</view>
|
||||
|
||||
<view class="li-flex li-items-center li-mb-15">
|
||||
<text class="content-label li-text-28 li-text-#9a9a9a li-w-160">投诉人</text>
|
||||
<text class="content-text li-text-28 li-text-#333">{{item.user_name}}</text>
|
||||
<text class="ri-phone-line li-text-28 li-text-#0070F0 li-ml-20"
|
||||
@click.stop="callPhone(item.user_mobile)"></text>
|
||||
</view>
|
||||
|
||||
<view class="li-flex li-items-center">
|
||||
<text class="content-label li-text-28 li-text-#9a9a9a li-w-160">提交时间</text>
|
||||
<text class="content-text li-text-28 li-text-#999">{{item.create_time}}</text>
|
||||
</view>
|
||||
|
||||
<!-- 标签 -->
|
||||
<view class="li-flex li-items-center li-flex-wrap li-mt-15"
|
||||
v-if="item.tags && item.tags.length">
|
||||
<wd-tag v-for="(tag, idx) in item.tags" :key="idx" color="#0083ff" bg-color="#d0e8ff"
|
||||
custom-class="li-mr-10 li-mb-10">
|
||||
{{tag}}
|
||||
</wd-tag>
|
||||
</view>
|
||||
|
||||
<!-- 附件图片预览 -->
|
||||
<view class="li-flex li-mt-15" v-if="item.images && item.images.length">
|
||||
<image v-for="(img, imgIdx) in item.images.slice(0, 3)" :key="imgIdx" :src="img"
|
||||
mode="aspectFill" class="preview-image li-mr-10"
|
||||
@click.stop="previewImage(item.images, imgIdx)">
|
||||
</image>
|
||||
<text v-if="item.images.length > 3" class="more-image-text li-text-28 li-text-#0070F0">
|
||||
+{{item.images.length - 3}}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view v-else class="li-mt-100">
|
||||
<wd-status-tip image="search" tip="暂无投诉记录" />
|
||||
</view>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<view v-if="loading" class="li-flex-center li-mt-30">
|
||||
<wd-loading color="#0070F0" />
|
||||
</view>
|
||||
|
||||
<!-- 底部提示 -->
|
||||
<view v-if="!loading && finished && complaintList.length > 0"
|
||||
class="li-text-center li-text-26 li-text-#999 li-py-20">
|
||||
-- 没有更多数据了 --
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
|
||||
import { useNavigation } from '@/hooks/useNavigation';
|
||||
import { useToast } from '@/uni_modules/wot-design-uni';
|
||||
|
||||
const Toast = useToast();
|
||||
|
||||
// 使用导航composable
|
||||
const {
|
||||
hasMultiplePages,
|
||||
isTabBarPage,
|
||||
checkRouteStack
|
||||
} = useNavigation();
|
||||
|
||||
// 状态管理
|
||||
const searchText = ref('');
|
||||
const activeStatus = ref('ALL');
|
||||
const loading = ref(false);
|
||||
const finished = ref(false);
|
||||
const page = ref(1);
|
||||
const pageSize = ref(10);
|
||||
|
||||
// 状态筛选选项
|
||||
const statusList = ref([
|
||||
{ label: '全部', value: 'ALL' },
|
||||
{ label: '待处理', value: 0 },
|
||||
{ label: '处理中', value: 1 },
|
||||
{ label: '已处理', value: 2 },
|
||||
{ label: '已关闭', value: 3 }
|
||||
]);
|
||||
|
||||
// 模拟数据 - 实际项目中应该是通过API获取
|
||||
const complaintList = ref([
|
||||
{
|
||||
complaint_id: 1,
|
||||
complaint_no: 'TS20240607001',
|
||||
content: '楼道灯已经坏了三天，晚上上下楼很不方便，希望物业尽快解决！',
|
||||
village_name: '阳光花园小区',
|
||||
user_name: '张三',
|
||||
user_mobile: '13800138000',
|
||||
create_time: '2024-06-07 10:23',
|
||||
status: 0,
|
||||
urgency: 2,
|
||||
tags: ['公共设施', '照明'],
|
||||
images: [
|
||||
'https://img.yzcdn.cn/vant/cat.jpeg',
|
||||
'https://img.yzcdn.cn/vant/tree.jpeg'
|
||||
]
|
||||
},
|
||||
{
|
||||
complaint_id: 2,
|
||||
complaint_no: 'TS20240606001',
|
||||
content: '小区北门停车场有人乱停车，导致通道被堵，请物业及时处理。',
|
||||
village_name: '阳光花园小区',
|
||||
user_name: '李四',
|
||||
user_mobile: '13900139000',
|
||||
create_time: '2024-06-06 16:45',
|
||||
status: 1,
|
||||
urgency: 1,
|
||||
tags: ['停车管理', '安全隐患'],
|
||||
images: [
|
||||
'https://img.yzcdn.cn/vant/cat.jpeg',
|
||||
'https://img.yzcdn.cn/vant/cat.jpeg',
|
||||
'https://img.yzcdn.cn/vant/cat.jpeg',
|
||||
'https://img.yzcdn.cn/vant/tree.jpeg'
|
||||
]
|
||||
},
|
||||
{
|
||||
complaint_id: 3,
|
||||
complaint_no: 'TS20240605001',
|
||||
content: '小区垃圾分类做得不到位，希望加强宣传和管理。',
|
||||
village_name: '阳光花园小区',
|
||||
user_name: '王五',
|
||||
user_mobile: '13700137000',
|
||||
create_time: '2024-06-05 09:12',
|
||||
status: 2,
|
||||
urgency: 1,
|
||||
tags: ['环境卫生', '垃圾分类'],
|
||||
images: []
|
||||
}
|
||||
]);
|
||||
|
||||
// 状态颜色配置
|
||||
const getStatusColor = (status) => {
|
||||
const colorMap = {
|
||||
0: '#ff9d00', // 待处理
|
||||
1: '#37A5FF', // 处理中
|
||||
2: '#00b42a', // 已处理
|
||||
3: '#999999' // 已关闭
|
||||
};
|
||||
return colorMap[status] || '#666666';
|
||||
};
|
||||
|
||||
// 状态背景色配置
|
||||
const getStatusBgColor = (status) => {
|
||||
const bgColorMap = {
|
||||
0: '#fff6e9', // 待处理
|
||||
1: '#e8f4ff', // 处理中
|
||||
2: '#e8ffea', // 已处理
|
||||
3: '#f5f5f5' // 已关闭
|
||||
};
|
||||
return bgColorMap[status] || '#f5f5f5';
|
||||
};
|
||||
|
||||
// 状态文字配置
|
||||
const getStatusText = (status) => {
|
||||
const textMap = {
|
||||
0: '待处理',
|
||||
1: '处理中',
|
||||
2: '已处理',
|
||||
3: '已关闭'
|
||||
};
|
||||
return textMap[status] || '未知状态';
|
||||
};
|
||||
|
||||
// 处理状态切换
|
||||
const handleStatusChange = (status) => {
|
||||
activeStatus.value = status;
|
||||
resetList();
|
||||
loadComplaintList();
|
||||
};
|
||||
|
||||
// 搜索处理
|
||||
const handleSearch = () => {
|
||||
resetList();
|
||||
loadComplaintList();
|
||||
};
|
||||
|
||||
// 重置列表
|
||||
const resetList = () => {
|
||||
page.value = 1;
|
||||
finished.value = false;
|
||||
complaintList.value = [];
|
||||
};
|
||||
|
||||
// 加载投诉列表数据
|
||||
const loadComplaintList = async () => {
|
||||
if (loading.value || finished.value) return;
|
||||
|
||||
try {
|
||||
loading.value = true;
|
||||
|
||||
// 这里应该调用实际的API接口获取数据
|
||||
// const params = {
|
||||
// page: page.value,
|
||||
// page_size: pageSize.value,
|
||||
// keyword: searchText.value,
|
||||
// status: activeStatus.value !== 'ALL' ? activeStatus.value : ''
|
||||
// };
|
||||
// const res = await getComplaintList(params);
|
||||
|
||||
// 模拟加载延迟
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
|
||||
// 模拟数据加载完成的情况
|
||||
if (page.value > 1) {
|
||||
finished.value = true;
|
||||
} else {
|
||||
page.value++;
|
||||
}
|
||||
|
||||
loading.value = false;
|
||||
} catch (error) {
|
||||
console.error('加载投诉列表失败', error);
|
||||
Toast.fail('加载失败，请重试');
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 页面跳转
|
||||
const toPages = (item) => {
|
||||
switch (item.type) {
|
||||
case 'nav':
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
break;
|
||||
case 'home':
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
break;
|
||||
case 'detail':
|
||||
uni.navigateTo({
|
||||
url: `/pagesB/complaint/detail?id=${item.value.complaint_id}`
|
||||
});
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
// 拨打电话
|
||||
const callPhone = (phone) => {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: phone,
|
||||
success: () => {
|
||||
console.log('拨打电话成功');
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log('拨打电话失败', err);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 预览图片
|
||||
const previewImage = (images, current) => {
|
||||
uni.previewImage({
|
||||
urls: images,
|
||||
current: images[current]
|
||||
});
|
||||
};
|
||||
|
||||
// 生命周期钩子
|
||||
onLoad(() => {
|
||||
checkRouteStack();
|
||||
loadComplaintList();
|
||||
});
|
||||
|
||||
// 下拉刷新
|
||||
onPullDownRefresh(() => {
|
||||
resetList();
|
||||
loadComplaintList().then(() => {
|
||||
uni.stopPullDownRefresh();
|
||||
});
|
||||
});
|
||||
|
||||
// 上拉加载
|
||||
onReachBottom(() => {
|
||||
loadComplaintList();
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #F7F8FA;
|
||||
}
|
||||
|
||||
.complaint-page {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.nav-bg-layer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: calc(var(--status-bar-height) + 88rpx);
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
|
||||
z-index: -1;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
padding: 8rpx 24rpx;
|
||||
border-radius: 30rpx;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
background: #f5f5f5;
|
||||
margin-right: 16rpx;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.status-tag.active {
|
||||
color: #0070F0;
|
||||
background: rgba(0, 112, 240, 0.1);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.complaint-card {
|
||||
transition: all 0.3s;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.complaint-header {
|
||||
.status-badge {
|
||||
padding: 4rpx 20rpx;
|
||||
border-radius: 20rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.li-bottom-border2 {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.preview-image {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 8rpx;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.more-image-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
/* 覆盖组件样式 */
|
||||
::v-deep .wd-search {
|
||||
background-color: transparent !important;
|
||||
padding: 0 !important;
|
||||
border-radius: 10rpx !important;
|
||||
}
|
||||
|
||||
::v-deep .wd-search__block {
|
||||
background-color: rgba(255, 255, 255, 0.8) !important;
|
||||
padding: 8rpx !important;
|
||||
border-radius: 10rpx !important;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.015);
|
||||
}
|
||||
|
||||
::v-deep .wd-status-tip__text {
|
||||
margin-top: 30rpx !important;
|
||||
color: #999 !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<template>
|
||||
问卷详情
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,486 @@
|
|||
<template>
|
||||
<view class="questionnaire-page">
|
||||
<!-- 自定义导航栏 -->
|
||||
<wd-navbar :bordered="false"
|
||||
custom-style="background: transparent !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;"
|
||||
safeAreaInsetTop fixed placeholder>
|
||||
<template #left>
|
||||
<view class="li-ml-15 li-mt-10 li-flex li-items-center">
|
||||
<text v-if="hasMultiplePages" class="ri-arrow-left-s-line li-text-70"
|
||||
@click="toPages({type:'nav'})"></text>
|
||||
<text v-if="!hasMultiplePages" class="ri-home-5-line li-text-55 li-mb-8 li-mr-10"
|
||||
@click="toPages({type:'home'})"></text>
|
||||
<text class="li-text-42">问卷管理</text>
|
||||
</view>
|
||||
</template>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<template #right>
|
||||
<view class="li-flex-center li-mr-200" @click="createQuestionnaire">
|
||||
<text class="ri-add-line li-text-52"></text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<template #right>
|
||||
<view class="li-flex-center li-mr-25" @click="createQuestionnaire">
|
||||
<text class="ri-add-line li-text-52"></text>
|
||||
</view>
|
||||
</template>
|
||||
<!-- #endif -->
|
||||
</wd-navbar>
|
||||
<!-- 导航栏背景 -->
|
||||
<view class="nav-bg-layer"></view>
|
||||
|
||||
|
||||
<!-- 筛选区域 -->
|
||||
<view class="filter-section li-w-92% li-mx-auto li-mt-30">
|
||||
<!-- 小区选择 -->
|
||||
<view v-if="hasPermission" class="li-mb-20">
|
||||
<wd-select v-model="selectedVillage" :columns="villageList" label="选择小区" placeholder="请选择小区"
|
||||
use-label-slot>
|
||||
<template #label>
|
||||
<text class="ri-community-line li-text-32 li-mr-10 li-text-#666"></text>
|
||||
</template>
|
||||
</wd-select>
|
||||
</view>
|
||||
|
||||
<!-- 问卷状态筛选 -->
|
||||
<view class="li-flex li-items-center li-flex-wrap">
|
||||
<text v-for="(item, index) in statusList" :key="index"
|
||||
:class="activeStatus === item.value ? 'status-tag active' : 'status-tag'"
|
||||
@click="handleStatusChange(item.value)">
|
||||
{{item.label}}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 问卷列表 -->
|
||||
<view class="li-w-92% li-mx-auto li-mt-30 li-pb-30">
|
||||
<view v-if="questionnaireList.length > 0">
|
||||
<view v-for="(item, index) in questionnaireList" :key="index"
|
||||
class="questionnaire-card li-bg-white li-rd-20 li-p-30 li-mb-20 li-shadow-sm"
|
||||
@click="toPages({type:'detail', value:item})">
|
||||
<!-- 问卷标题 -->
|
||||
<view class="li-flex li-items-center li-justify-between li-pb-20 li-bottom-border2">
|
||||
<view class="li-flex li-items-center">
|
||||
<text class="ri-questionnaire-line li-text-40 li-mr-15 li-text-#0070F0"></text>
|
||||
<text class="li-text-32 li-font-bold">{{item.title}}</text>
|
||||
</view>
|
||||
<view class="status-badge" :style="{
|
||||
backgroundColor: getStatusBgColor(item.status),
|
||||
color: getStatusColor(item.status)
|
||||
}">
|
||||
{{getStatusText(item.status)}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 问卷信息 -->
|
||||
<view class="li-mt-20">
|
||||
<view class="li-flex li-items-center li-mb-15">
|
||||
<text class="content-label li-text-28 li-text-#9a9a9a li-w-160">所属小区</text>
|
||||
<text class="content-text li-text-28 li-text-#333">{{item.village_name}}</text>
|
||||
</view>
|
||||
|
||||
<view class="li-flex li-items-center li-mb-15">
|
||||
<text class="content-label li-text-28 li-text-#9a9a9a li-w-160">问卷类型</text>
|
||||
<wd-tag color="#0083ff" bg-color="#d0e8ff">{{item.type}}</wd-tag>
|
||||
</view>
|
||||
|
||||
<view class="li-flex li-items-center li-mb-15">
|
||||
<text class="content-label li-text-28 li-text-#9a9a9a li-w-160">参与人数</text>
|
||||
<text class="content-text li-text-28 li-text-#333">{{item.participant_count}}人</text>
|
||||
</view>
|
||||
|
||||
<!-- 修改有效期和操作按钮的布局 -->
|
||||
<view class="li-flex li-flex-col">
|
||||
<view class="li-flex li-items-center li-mb-15">
|
||||
<text class="content-label li-text-28 li-text-#9a9a9a li-w-160">有效期</text>
|
||||
<text class="content-text li-text-28 li-text-#333">{{item.start_time}} ~
|
||||
{{item.end_time}}</text>
|
||||
</view>
|
||||
<view class="li-flex li-items-center li-justify-between" @click.stop>
|
||||
<view></view>
|
||||
<view class="li-flex li-items-center ">
|
||||
<wd-button type="primary" size="small" plain custom-class="action-btn"
|
||||
@click="handleEdit(item)">编辑</wd-button>
|
||||
<wd-button type="danger" size="small" plain custom-class="action-btn"
|
||||
@click="handleDelete(item)">删除</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view v-else class="empty-state li-mt-100">
|
||||
<image src="https://img.yzcdn.cn/vant/empty-image-default.png" mode="aspectFit" class="empty-image">
|
||||
</image>
|
||||
<text class="li-text-28 li-text-#999 li-mt-20">暂无问卷数据</text>
|
||||
</view>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<view v-if="loading" class="li-flex-center li-mt-30">
|
||||
<wd-loading color="#0070F0" />
|
||||
</view>
|
||||
|
||||
<!-- 底部提示 -->
|
||||
<view v-if="!loading && finished && questionnaireList.length > 0"
|
||||
class="li-text-center li-text-26 li-text-#999 li-py-20">
|
||||
-- 没有更多数据了 --
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted, watch } from 'vue';
|
||||
import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
|
||||
import { useNavigation } from '@/hooks/useNavigation';
|
||||
import { useToast } from '@/uni_modules/wot-design-uni';
|
||||
|
||||
const Toast = useToast();
|
||||
|
||||
// 使用导航composable
|
||||
const {
|
||||
hasMultiplePages,
|
||||
isTabBarPage,
|
||||
checkRouteStack
|
||||
} = useNavigation();
|
||||
|
||||
// 权限控制
|
||||
const hasPermission = ref(true); // 实际项目中应该从用户信息或权限系统中获取
|
||||
|
||||
// 状态管理
|
||||
const selectedVillage = ref('1'); // 设置默认选中的小区
|
||||
const activeStatus = ref('ALL');
|
||||
const loading = ref(false);
|
||||
const finished = ref(false);
|
||||
const page = ref(1);
|
||||
const pageSize = ref(10);
|
||||
|
||||
// 小区列表
|
||||
const villageList = ref([
|
||||
{ value: '1', label: '阳光花园小区' },
|
||||
{ value: '2', label: '翠湖庭院' },
|
||||
{ value: '3', label: '金色家园' }
|
||||
]);
|
||||
|
||||
// 状态筛选选项
|
||||
const statusList = ref([
|
||||
{ label: '全部', value: 'ALL' },
|
||||
{ label: '未开始', value: 0 },
|
||||
{ label: '进行中', value: 1 },
|
||||
{ label: '已结束', value: 2 }
|
||||
]);
|
||||
|
||||
// 模拟问卷列表数据
|
||||
const questionnaireList = ref([
|
||||
{
|
||||
id: 1,
|
||||
title: '2024年度物业服务满意度调查',
|
||||
village_name: '阳光花园小区',
|
||||
type: '满意度调查',
|
||||
participant_count: 156,
|
||||
start_time: '2024-06-01',
|
||||
end_time: '2024-06-30',
|
||||
status: 1
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '小区环境改造意见征集',
|
||||
village_name: '阳光花园小区',
|
||||
type: '意见征集',
|
||||
participant_count: 89,
|
||||
start_time: '2024-07-01',
|
||||
end_time: '2024-07-15',
|
||||
status: 0
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '业主委员会换届选举投票',
|
||||
village_name: '阳光花园小区',
|
||||
type: '投票选举',
|
||||
participant_count: 245,
|
||||
start_time: '2024-05-01',
|
||||
end_time: '2024-05-15',
|
||||
status: 2
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '业主委员会换届选举投票',
|
||||
village_name: '阳光花园小区',
|
||||
type: '投票选举',
|
||||
participant_count: 245,
|
||||
start_time: '2024-05-01',
|
||||
end_time: '2024-05-15',
|
||||
status: 2
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '业主委员会换届选举投票',
|
||||
village_name: '阳光花园小区',
|
||||
type: '投票选举',
|
||||
participant_count: 245,
|
||||
start_time: '2024-05-01',
|
||||
end_time: '2024-05-15',
|
||||
status: 2
|
||||
}
|
||||
]);
|
||||
|
||||
// 状态颜色配置
|
||||
const getStatusColor = (status) => {
|
||||
const colorMap = {
|
||||
0: '#ff9d00', // 未开始
|
||||
1: '#0070F0', // 进行中
|
||||
2: '#999999' // 已结束
|
||||
};
|
||||
return colorMap[status] || '#666666';
|
||||
};
|
||||
|
||||
// 状态背景色配置
|
||||
const getStatusBgColor = (status) => {
|
||||
const bgColorMap = {
|
||||
0: '#fff6e9', // 未开始
|
||||
1: '#e8f4ff', // 进行中
|
||||
2: '#f5f5f5' // 已结束
|
||||
};
|
||||
return bgColorMap[status] || '#f5f5f5';
|
||||
};
|
||||
|
||||
// 状态文字配置
|
||||
const getStatusText = (status) => {
|
||||
const textMap = {
|
||||
0: '未开始',
|
||||
1: '进行中',
|
||||
2: '已结束'
|
||||
};
|
||||
return textMap[status] || '未知状态';
|
||||
};
|
||||
|
||||
// 处理状态切换
|
||||
const handleStatusChange = (status) => {
|
||||
activeStatus.value = status;
|
||||
resetList();
|
||||
loadQuestionnaireList();
|
||||
};
|
||||
|
||||
// 重置列表
|
||||
const resetList = () => {
|
||||
page.value = 1;
|
||||
finished.value = false;
|
||||
questionnaireList.value = [];
|
||||
};
|
||||
|
||||
// 加载问卷列表数据
|
||||
const loadQuestionnaireList = async () => {
|
||||
if (loading.value || finished.value) return;
|
||||
|
||||
try {
|
||||
loading.value = true;
|
||||
// 实际项目中这里应该调用API
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
if (page.value > 1) {
|
||||
finished.value = true;
|
||||
} else {
|
||||
page.value++;
|
||||
}
|
||||
loading.value = false;
|
||||
} catch (error) {
|
||||
console.error('加载问卷列表失败', error);
|
||||
Toast.fail('加载失败，请重试');
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 创建问卷
|
||||
const createQuestionnaire = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pagesB/questionnaire/edit'
|
||||
});
|
||||
};
|
||||
|
||||
// 编辑问卷
|
||||
const handleEdit = (item) => {
|
||||
uni.navigateTo({
|
||||
url: `/pagesB/questionnaire/edit?id=${item.id}`
|
||||
});
|
||||
};
|
||||
|
||||
// 删除问卷
|
||||
const handleDelete = (item) => {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要删除该问卷吗？',
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
Toast.loading('删除中...');
|
||||
// 实际项目中这里应该调用API
|
||||
await new Promise(resolve => setTimeout(resolve, 800));
|
||||
Toast.success('删除成功');
|
||||
loadQuestionnaireList();
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 页面跳转
|
||||
const toPages = (item) => {
|
||||
switch (item.type) {
|
||||
case 'nav':
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
break;
|
||||
case 'home':
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
break;
|
||||
case 'detail':
|
||||
uni.navigateTo({
|
||||
url: `/pagesB/questionnaire/detail?id=${item.value.id}`
|
||||
});
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
// 生命周期钩子
|
||||
onLoad(() => {
|
||||
checkRouteStack();
|
||||
loadQuestionnaireList();
|
||||
});
|
||||
|
||||
// 下拉刷新
|
||||
onPullDownRefresh(() => {
|
||||
resetList();
|
||||
loadQuestionnaireList().then(() => {
|
||||
uni.stopPullDownRefresh();
|
||||
});
|
||||
});
|
||||
|
||||
// 上拉加载
|
||||
onReachBottom(() => {
|
||||
loadQuestionnaireList();
|
||||
});
|
||||
|
||||
// 监听小区选择变化
|
||||
watch(selectedVillage, (newVal) => {
|
||||
resetList();
|
||||
loadQuestionnaireList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #F7F8FA;
|
||||
}
|
||||
|
||||
.questionnaire-page {
|
||||
min-height: 100vh;
|
||||
|
||||
}
|
||||
|
||||
.nav-bg-layer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: calc(var(--status-bar-height) + 88rpx);
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
|
||||
z-index: -1;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
|
||||
.filter-section {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border-radius: 20rpx;
|
||||
padding: 20rpx;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
padding: 8rpx 24rpx;
|
||||
border-radius: 30rpx;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
background: #f5f5f5;
|
||||
margin-right: 16rpx;
|
||||
margin-bottom: 16rpx;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.status-tag.active {
|
||||
color: #0070F0;
|
||||
background: rgba(0, 112, 240, 0.1);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.questionnaire-card {
|
||||
transition: all 0.3s;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
padding: 4rpx 20rpx;
|
||||
border-radius: 20rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.li-bottom-border2 {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.empty-image {
|
||||
width: 240rpx;
|
||||
height: 240rpx;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
width: 100rpx !important;
|
||||
margin-left: 15rpx !important;
|
||||
}
|
||||
|
||||
|
||||
::v-deep .wd-navbar__placeholder {
|
||||
height: calc(var(--status-bar-height) + 88rpx) !important;
|
||||
padding-top: constant(safe-area-inset-top) !important;
|
||||
padding-top: env(safe-area-inset-top) !important;
|
||||
}
|
||||
|
||||
::v-deep .wd-select {
|
||||
background-color: transparent !important;
|
||||
margin-bottom: 0 !important;
|
||||
|
||||
.wd-select__value {
|
||||
color: #333 !important;
|
||||
}
|
||||
|
||||
.wd-select__label {
|
||||
margin-right: 20rpx !important;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .wd-select__right-icon {
|
||||
color: #666 !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,134 +1,116 @@
|
|||
|
||||
.bg-FFFFFF{background-color:rgb(255,255,255)}
|
||||
.bg-f9f9f9{background-color:rgb(249,249,249)}
|
||||
.border-4-white{border-style:solid;border-color:rgb(255,255,255);border-width:4rpx}
|
||||
.li-bg-white{background-color:rgb(255,255,255)}
|
||||
.li-block{display:block}
|
||||
.li-border-b{border-style:solid;border-color:b;border-width:1rpx}
|
||||
.li-flex{display:flex}
|
||||
.li-font-500{font-weight:500}
|
||||
.li-font-bold{font-weight:bold}
|
||||
.li-items-baseline{align-items:baseline}
|
||||
.li-items-center{align-items:center}
|
||||
.li-justify-between{justify-content:space-between}
|
||||
.li-lh-44{line-height:44}
|
||||
.li-mb-15{margin-bottom:15rpx}
|
||||
.li-mb-20{margin-bottom:20rpx}
|
||||
.li-mb-30{margin-bottom:30rpx}
|
||||
.li-mb-40{margin-bottom:40rpx}
|
||||
.li-mb-8{margin-bottom:8rpx}
|
||||
.li-ml-10{margin-left:10rpx}
|
||||
.li-ml-15{margin-left:15rpx}
|
||||
.li-ml-20{margin-left:20rpx}
|
||||
.li-mr-10{margin-right:10rpx}
|
||||
.li-mr-15{margin-right:15rpx}
|
||||
.li-mr-5{margin-right:5rpx}
|
||||
.li-mt-10{margin-top:10rpx}
|
||||
.li-mt-20{margin-top:20rpx}
|
||||
.li-mt-30{margin-top:30rpx}
|
||||
.li-mt-40{margin-top:40rpx}
|
||||
.li-mt-5{margin-top:5rpx}
|
||||
.li-mx-auto{margin-left:auto;margin-right:auto}
|
||||
.li-opacity-80{undefined:0.8}
|
||||
.li-p-15{padding:15rpx}
|
||||
.li-p-30{padding:30rpx}
|
||||
.li-pl-30{padding-left:30rpx}
|
||||
.li-py-30{padding-top:30rpx;padding-bottom:30rpx}
|
||||
.li-py-60{padding-top:60rpx;padding-bottom:60rpx}
|
||||
.li-rd-12{border-radius:12rpx}
|
||||
.li-rd-16{border-radius:16rpx}
|
||||
.li-rd-20{border-radius:20rpx}
|
||||
.li-text-0070F0-color{color:rgb(0,112,240)}
|
||||
.li-text-26{font-size:26rpx}
|
||||
.li-text-28{font-size:28rpx}
|
||||
.li-text-30{font-size:30rpx}
|
||||
.li-text-32{font-size:32rpx}
|
||||
.li-text-333-color{color:rgb(51,51,51)}
|
||||
.li-text-34{font-size:34rpx}
|
||||
.li-text-36{font-size:36rpx}
|
||||
.li-text-42{font-size:42rpx}
|
||||
.li-text-48{font-size:48rpx}
|
||||
.li-text-55{font-size:55rpx}
|
||||
.li-text-666-color{color:rgb(102,102,102)}
|
||||
.li-text-70{font-size:70rpx}
|
||||
.li-text-999-color{color:rgb(153,153,153)}
|
||||
.li-text-center{text-align:center}
|
||||
.li-text-white{color:rgb(255,255,255)}
|
||||
.li-w-650rpx{width:650rpx}
|
||||
.li-w-full-92{width:92%}
|
||||
.li-flex-col{flex-direction:column}
|
||||
.li-justify-around{justify-content:space-around}
|
||||
.li-px-30{padding-left:30rpx;padding-right:30rpx}
|
||||
.li-py-20{padding-top:20rpx;padding-bottom:20rpx}
|
||||
.li-font-bold{font-weight:bold}
|
||||
.li-h-100{height:100rpx}
|
||||
.li-h-240{height:240rpx}
|
||||
.li-h-250{height:250rpx}
|
||||
.li-h-50{height:50rpx}
|
||||
.li-h-60{height:60rpx}
|
||||
.li-items-center{align-items:center}
|
||||
.items-center{align-items:center}
|
||||
.li-items-end{align-items:end}
|
||||
.li-justify-between{justify-content:space-between}
|
||||
.li-justify-center{justify-content:center}
|
||||
.li-justify-start{justify-content:start}
|
||||
.li-mb-2{margin-bottom:2rpx}
|
||||
.li-ml-4{margin-left:4rpx}
|
||||
.li-ml-50{margin-left:50rpx}
|
||||
.li-mr-20{margin-right:20rpx}
|
||||
.li-mr-50{margin-right:50rpx}
|
||||
.li-mt-20{margin-top:20rpx}
|
||||
.li-mt-26{margin-top:26rpx}
|
||||
.li-mt-30{margin-top:30rpx}
|
||||
.li-mt-6{margin-top:6rpx}
|
||||
.li-mt-60{margin-top:60rpx}
|
||||
.li-mx-20{margin-left:20rpx;margin-right:20rpx}
|
||||
.li-mx-40{margin-left:40rpx;margin-right:40rpx}
|
||||
.li-mx-auto{margin-left:auto;margin-right:auto}
|
||||
.li-pb-10{padding-bottom:10rpx}
|
||||
.li-pb-14{padding-bottom:14rpx}
|
||||
.li-pb-20{padding-bottom:20rpx}
|
||||
.li-pt-20{padding-top:20rpx}
|
||||
.li-pt-8{padding-top:8rpx}
|
||||
.li-py-20{padding-top:20rpx;padding-bottom:20rpx}
|
||||
.li-rd-20{border-radius:20rpx}
|
||||
.li-rd-full-50{border-radius:50%}
|
||||
.li-rd-tl-30-important{border-top-left-radius:30rpx !important}
|
||||
.li-rd-tr-30-important{border-top-right-radius:30rpx !important}
|
||||
.li-text-000000-color{color:rgb(0,0,0)}
|
||||
.li-text-010B3E-color{color:rgb(1,11,62)}
|
||||
.li-text-19171B-color{color:rgb(25,23,27)}
|
||||
.li-text-20{font-size:20rpx}
|
||||
.li-text-24{font-size:24rpx}
|
||||
.li-text-26{font-size:26rpx}
|
||||
.li-text-32{font-size:32rpx}
|
||||
.li-text-34{font-size:34rpx}
|
||||
.li-text-38{font-size:38rpx}
|
||||
.li-text-706e70-color{color:rgb(112,110,112)}
|
||||
.li-text-B2B2B2-color{color:rgb(178,178,178)}
|
||||
.li-text-BBBDDA-color{color:rgb(187,189,218)}
|
||||
.li-text-F2F7FD-color{color:rgb(242,247,253)}
|
||||
.li-text-F8C883-color{color:rgb(248,200,131)}
|
||||
.li-text-FFFFFF-color{color:rgb(255,255,255)}
|
||||
.li-text-b1bbc7-color{color:rgb(177,187,199)}
|
||||
.li-w-100{width:100rpx}
|
||||
.li-w-240{width:240rpx}
|
||||
.li-w-50{width:50rpx}
|
||||
.li-w-60{width:60rpx}
|
||||
.li-w-full-70{width:70%}
|
||||
.li-w-full-94{width:94%}
|
||||
.li-flex-center{display:flex;align-items:center;justify-content:center}
|
||||
.li-ml-20{margin-left:20rpx}
|
||||
.li-ml-200{margin-left:200rpx}
|
||||
.li-ml-25{margin-left:25rpx}
|
||||
.li-ml-30{margin-left:30rpx}
|
||||
.li-mr-10{margin-right:10rpx}
|
||||
.li-mr-30{margin-right:30rpx}
|
||||
.li-mt-10{margin-top:10rpx}
|
||||
.li-mt-300-important{margin-top:300rpx !important}
|
||||
.li-pt-2{padding-top:2rpx}
|
||||
.li-px-30{padding-left:30rpx;padding-right:30rpx}
|
||||
.li-text-25{font-size:25rpx}
|
||||
.li-text-30{font-size:30rpx}
|
||||
.li-text-35{font-size:35rpx}
|
||||
.li-text-42{font-size:42rpx}
|
||||
.li-text-46{font-size:46rpx}
|
||||
.li-text-B1B0B0-color{color:rgb(177,176,176)}
|
||||
.li-w-full-80{width:80%}
|
||||
.items-center{align-items:center}
|
||||
.justify-end{justify-content:end}
|
||||
.justify-center{justify-content:center}
|
||||
.li-justify-between{justify-content:space-between}
|
||||
.justify-between{justify-content:space-between}
|
||||
.li-bg-white{background-color:rgb(255,255,255)}
|
||||
.li-flex{display:flex}
|
||||
.li-flex-center{display:flex;align-items:center;justify-content:center}
|
||||
.li-flex-col{flex-direction:column}
|
||||
.li-font-bold{font-weight:bold}
|
||||
.li-h-130{height:130rpx}
|
||||
.li-h-160{height:160rpx}
|
||||
.li-h-220{height:220rpx}
|
||||
.li-h-58{height:58rpx}
|
||||
.li-justify-around{justify-content:space-around}
|
||||
.li-ml-22{margin-left:22rpx}
|
||||
.li-ml-25{margin-left:25rpx}
|
||||
.li-ml-35{margin-left:35rpx}
|
||||
.li-mr-5{margin-right:5rpx}
|
||||
.li-mt-10{margin-top:10rpx}
|
||||
.li-mt-12{margin-top:12rpx}
|
||||
.li-mt-14{margin-top:14rpx}
|
||||
.li-mt-15{margin-top:15rpx}
|
||||
.li-mt-20{margin-top:20rpx}
|
||||
.li-mt-30{margin-top:30rpx}
|
||||
.li-mx-auto{margin-left:auto;margin-right:auto}
|
||||
.li-pt-15{padding-top:15rpx}
|
||||
.li-px-25{padding-left:25rpx;padding-right:25rpx}
|
||||
.li-px-30{padding-left:30rpx;padding-right:30rpx}
|
||||
.li-px-40{padding-left:40rpx;padding-right:40rpx}
|
||||
.li-px-50{padding-left:50rpx;padding-right:50rpx}
|
||||
.li-py-25{padding-top:25rpx;padding-bottom:25rpx}
|
||||
.li-rd-10{border-radius:10rpx}
|
||||
.li-rd-15{border-radius:15rpx}
|
||||
.li-text-010B3E-color{color:rgb(1,11,62)}
|
||||
.li-text-22{font-size:22rpx}
|
||||
.li-text-24{font-size:24rpx}
|
||||
.li-text-26{font-size:26rpx}
|
||||
.li-text-28{font-size:28rpx}
|
||||
.li-text-30{font-size:30rpx}
|
||||
.li-text-343333-color{color:rgb(52,51,51)}
|
||||
.li-text-43{font-size:43rpx}
|
||||
.li-text-AFB2B8-color{color:rgb(175,178,184)}
|
||||
.li-text-B1B0B0-color{color:rgb(177,176,176)}
|
||||
.li-text-F42429-color{color:rgb(244,36,41)}
|
||||
.li-w-130{width:130rpx}
|
||||
.li-w-310{width:310rpx}
|
||||
.li-w-58{width:58rpx}
|
||||
.li-w-full-70{width:70%}
|
||||
.li-w-full-88{width:88%}
|
||||
.li-h-100{height:100rpx}
|
||||
.li-ml-20{margin-left:20rpx}
|
||||
.li-ml-200{margin-left:200rpx}
|
||||
.li-ml-30{margin-left:30rpx}
|
||||
.li-mr-10{margin-right:10rpx}
|
||||
.li-mr-30{margin-right:30rpx}
|
||||
.li-mt-300-important{margin-top:300rpx !important}
|
||||
.li-pt-2{padding-top:2rpx}
|
||||
.li-py-20{padding-top:20rpx;padding-bottom:20rpx}
|
||||
.li-rd-full-50{border-radius:50%}
|
||||
.li-text-25{font-size:25rpx}
|
||||
.li-text-35{font-size:35rpx}
|
||||
.li-text-38{font-size:38rpx}
|
||||
.li-text-42{font-size:42rpx}
|
||||
.li-text-46{font-size:46rpx}
|
||||
.li-w-100{width:100rpx}
|
||||
.li-w-full-80{width:80%}
|
||||
.bg-FFFFFF{background-color:rgb(255,255,255)}
|
||||
.border-4-white{border-style:solid;border-color:rgb(255,255,255);border-width:4rpx}
|
||||
.bg-f9f9f9{background-color:rgb(249,249,249)}
|
||||
.li-mb-8{margin-bottom:8rpx}
|
||||
.li-ml-15{margin-left:15rpx}
|
||||
.li-ml-6{margin-left:6rpx}
|
||||
|
|
@ -139,7 +121,6 @@
|
|||
.li-pt-25{padding-top:25rpx}
|
||||
.li-pt-4{padding-top:4rpx}
|
||||
.li-text-009aff-color{color:rgb(0,154,255)}
|
||||
.li-text-32{font-size:32rpx}
|
||||
.li-text-333333-color{color:rgb(51,51,51)}
|
||||
.li-text-36{font-size:36rpx}
|
||||
.li-text-55{font-size:55rpx}
|
||||
|
|
@ -148,47 +129,6 @@
|
|||
.li-text-ff0000-color{color:rgb(255,0,0)}
|
||||
.li-w-full-100{width:100%}
|
||||
.li-w-full-92{width:92%}
|
||||
.li-h-240{height:240rpx}
|
||||
.li-h-250{height:250rpx}
|
||||
.li-h-50{height:50rpx}
|
||||
.li-h-60{height:60rpx}
|
||||
.li-items-end{align-items:end}
|
||||
.li-justify-start{justify-content:start}
|
||||
.li-mb-2{margin-bottom:2rpx}
|
||||
.li-ml-4{margin-left:4rpx}
|
||||
.li-ml-50{margin-left:50rpx}
|
||||
.li-mr-20{margin-right:20rpx}
|
||||
.li-mr-50{margin-right:50rpx}
|
||||
.li-mt-26{margin-top:26rpx}
|
||||
.li-mt-6{margin-top:6rpx}
|
||||
.li-mt-60{margin-top:60rpx}
|
||||
.li-mx-20{margin-left:20rpx;margin-right:20rpx}
|
||||
.li-mx-40{margin-left:40rpx;margin-right:40rpx}
|
||||
.li-pb-10{padding-bottom:10rpx}
|
||||
.li-pb-14{padding-bottom:14rpx}
|
||||
.li-pb-20{padding-bottom:20rpx}
|
||||
.li-pt-20{padding-top:20rpx}
|
||||
.li-pt-8{padding-top:8rpx}
|
||||
.li-rd-20{border-radius:20rpx}
|
||||
.li-rd-tl-30-important{border-top-left-radius:30rpx !important}
|
||||
.li-rd-tr-30-important{border-top-right-radius:30rpx !important}
|
||||
.li-text-000000-color{color:rgb(0,0,0)}
|
||||
.li-text-19171B-color{color:rgb(25,23,27)}
|
||||
.li-text-20{font-size:20rpx}
|
||||
.li-text-34{font-size:34rpx}
|
||||
.li-text-706e70-color{color:rgb(112,110,112)}
|
||||
.li-text-B2B2B2-color{color:rgb(178,178,178)}
|
||||
.li-text-BBBDDA-color{color:rgb(187,189,218)}
|
||||
.li-text-F2F7FD-color{color:rgb(242,247,253)}
|
||||
.li-text-F8C883-color{color:rgb(248,200,131)}
|
||||
.li-text-FFFFFF-color{color:rgb(255,255,255)}
|
||||
.li-text-b1bbc7-color{color:rgb(177,187,199)}
|
||||
.li-w-240{width:240rpx}
|
||||
.li-w-50{width:50rpx}
|
||||
.li-w-60{width:60rpx}
|
||||
.li-w-full-94{width:94%}
|
||||
.li-mb-25{margin-bottom:25rpx}
|
||||
.li-w-full-90{width:90%}
|
||||
.li-font-550{font-weight:550}
|
||||
.li-h-68{height:68rpx}
|
||||
.li-mt-100{margin-top:100rpx}
|
||||
|
|
@ -203,9 +143,7 @@
|
|||
.li-w-150{width:150rpx}
|
||||
.li-w-420{width:420rpx}
|
||||
.li-w-full-85{width:85%}
|
||||
.li-font-400{font-weight:400}
|
||||
.li-m-30{margin:30rpx}
|
||||
.li-text-595959-color{color:rgb(89,89,89)}
|
||||
.li-w-full-90{width:90%}
|
||||
|
||||
.li-h-110{height:110rpx}
|
||||
.li-items-start{align-items:start}
|
||||
|
|
@ -228,6 +166,13 @@
|
|||
.li-w-400{width:400rpx}
|
||||
.overflow-hidden{overflow:hidden}
|
||||
|
||||
.li-font-400{font-weight:400}
|
||||
.li-m-30{margin:30rpx}
|
||||
.li-text-595959-color{color:rgb(89,89,89)}
|
||||
|
||||
|
||||
|
||||
.li-mb-25{margin-bottom:25rpx}
|
||||
|
||||
.li-mb-30{margin-bottom:30rpx}
|
||||
.li-ml-10{margin-left:10rpx}
|
||||
|
|
@ -248,10 +193,10 @@
|
|||
.li-text-white{color:rgb(255,255,255)}
|
||||
.li-w-500{width:500rpx}
|
||||
|
||||
|
||||
.li-text-100{font-size:100rpx}
|
||||
.li-text-ddd-color{color:rgb(221,221,221)}
|
||||
|
||||
|
||||
.li-mb-10{margin-bottom:10rpx}
|
||||
.li-mb-15{margin-bottom:15rpx}
|
||||
.li-mb-40{margin-bottom:40rpx}
|
||||
|
|
@ -262,21 +207,53 @@
|
|||
|
||||
.li-block{display:block}
|
||||
.li-border-b{border-style:solid;border-color:b;border-width:1rpx}
|
||||
.li-font-500{font-weight:500}
|
||||
.li-items-baseline{align-items:baseline}
|
||||
.li-lh-44{line-height:44}
|
||||
.li-mr-15{margin-right:15rpx}
|
||||
.li-mt-5{margin-top:5rpx}
|
||||
.li-opacity-80{undefined:0.8}
|
||||
.li-opacity-100{undefined:1}
|
||||
.li-py-60{padding-top:60rpx;padding-bottom:60rpx}
|
||||
.li-rd-12{border-radius:12rpx}
|
||||
.li-rd-16{border-radius:16rpx}
|
||||
.li-w-650rpx{width:650rpx}
|
||||
.li-text-0a4696-color{color:rgb(10,70,150)}
|
||||
|
||||
.li-h-90{height:90rpx}
|
||||
.li-text-47{font-size:47rpx}
|
||||
.li-w-90{width:90rpx}
|
||||
|
||||
.li-flex-1{flex:1}
|
||||
.li-flex-wrap{flex-wrap:wrap}
|
||||
.li-line-clamp-2{overflow:hidden;display:-webkit-box;line-clamp:2;-webkit-box-orient:vertical;-webkit-line-clamp:2}
|
||||
.li-text-999999-color{color:rgb(153,153,153)}
|
||||
.li-w-160{width:160rpx}
|
||||
.li-w-full-96{width:96%}
|
||||
|
||||
.li-mt-25{margin-top:25rpx}
|
||||
.li-px-20{padding-left:20rpx;padding-right:20rpx}
|
||||
|
||||
|
||||
|
||||
|
||||
.li-block{display:block}
|
||||
.li-items-baseline{align-items:baseline}
|
||||
.li-mr-15{margin-right:15rpx}
|
||||
.li-opacity-100{undefined:1}
|
||||
.li-p-15{padding:15rpx}
|
||||
.li-py-60{padding-top:60rpx;padding-bottom:60rpx}
|
||||
.li-rd-12{border-radius:12rpx}
|
||||
.li-text-0a4696-color{color:rgb(10,70,150)}
|
||||
|
||||
.li-h-90{height:90rpx}
|
||||
.li-ml-30{margin-left:30rpx}
|
||||
.li-mr-6{margin-right:6rpx}
|
||||
.li-mt-300-important{margin-top:300rpx !important}
|
||||
.li-pt-2{padding-top:2rpx}
|
||||
.li-text-25{font-size:25rpx}
|
||||
.li-text-52{font-size:52rpx}
|
||||
.li-w-90{width:90rpx}
|
||||
.li-w-full-80{width:80%}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue