|
|
@@ -0,0 +1,195 @@
|
|
|
+<template>
|
|
|
+ <view class="detailed-feedback-list-view">
|
|
|
+ <pub-list-scroll ref="pubListScrollRef" @next="onScrollTolower" :loaded="loaded" :text="loadText" :status="status">
|
|
|
+ <view class="no-data feedback-no" v-if="!listArray || listArray.length == 0">
|
|
|
+ <image mode="heightFix" src="/static/image/no-data.png" />
|
|
|
+ 暂无数据
|
|
|
+ </view>
|
|
|
+ <view class="detailed-feedback-list" v-else>
|
|
|
+ <view v-for="(item,index) in listArray" :key="index" class="loop-list-item" @click="onClick(item)">
|
|
|
+ <view class="item-content">
|
|
|
+ <view class="item-title">
|
|
|
+ <view class="title-line">{{ item.djr }}</view>
|
|
|
+ <view>{{ filterApplicationType(item.fklx) }}</view>
|
|
|
+ <view class="title-company" :class="filterApplicationBgColor(item.fkzt)">{{ filterApplicationStatus(item.fkzt) }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="part-line"></view>
|
|
|
+ <view class="text-content">
|
|
|
+ <view v-for="(textItem,textIndex) in item.formattedData" :key="textIndex" class="other-loop-item">
|
|
|
+ <view class="textTitle">{{ textItem.title }}</view>
|
|
|
+ <view class="textValue">{{ textItem.value }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="bootom-content">
|
|
|
+ <view>{{ item.yljgmc }}</view>
|
|
|
+ <view>{{ formatDate(item.createTime,'{y}-{m}-{d} {h}:{i}:{s}') }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="footnote_content">
|
|
|
+ <view>本服务由重庆两江新区社会发展局提供</view>
|
|
|
+ <view class="footnote_phone">服务咨询热线：<view class="phone_text" @click="makeCall">023-67685085</view></view>
|
|
|
+ </view>
|
|
|
+ </pub-list-scroll>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+ import { defineProps,ref } from "vue";
|
|
|
+ import {
|
|
|
+ filterApplicationStatus,
|
|
|
+ filterApplicationType,
|
|
|
+ filterApplicationBgColor,
|
|
|
+ formatDate
|
|
|
+ } from '@/lib/util'
|
|
|
+
|
|
|
+ const emit = defineEmits(['click','nextPage']) // 定义 success 事件，用于操作成功后的回调
|
|
|
+ // 定义 props 类型
|
|
|
+ const props = defineProps({
|
|
|
+ listArray: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {}
|
|
|
+ },
|
|
|
+ status: {
|
|
|
+ type: String,
|
|
|
+ default: "loading"
|
|
|
+ }
|
|
|
+ });
|
|
|
+ const pubListScrollRef = ref(null)
|
|
|
+ const loaded = ref(false)
|
|
|
+ const loadText = ref('数据加载中...')
|
|
|
+
|
|
|
+ const onScrollTolower = ()=> {
|
|
|
+ console.log("下一页了？")
|
|
|
+ emit("nextPage")
|
|
|
+ }
|
|
|
+ const onClick = (item:any)=> {
|
|
|
+ emit("click",item)
|
|
|
+ }
|
|
|
+ const makeCall = ()=> {
|
|
|
+ window.location.href = 'tel:023-67685085';
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .detailed-feedback-list-view {
|
|
|
+ background-color: #F6F7F8;
|
|
|
+ height: 100%;
|
|
|
+ .detailed-feedback-list {
|
|
|
+ padding: 32rpx 40rpx 0rpx;
|
|
|
+ background-color: #F6F7F8;
|
|
|
+ .loop-list-item {
|
|
|
+ min-height: 260rpx;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ background: #fff;
|
|
|
+ padding: 14rpx 0 20rpx;
|
|
|
+ .item-content {
|
|
|
+ .item-title{
|
|
|
+ height: 60rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .title-line {
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #363A44;
|
|
|
+ }
|
|
|
+ .title-company {
|
|
|
+ padding: 12rpx 20rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ &.yellow {
|
|
|
+ background-color: #FEF6ED;
|
|
|
+ color: #FD9F48;
|
|
|
+ }
|
|
|
+ &.blue {
|
|
|
+ background-color: #EDF2FD;
|
|
|
+ color: #1E92F0;
|
|
|
+ }
|
|
|
+ &.green {
|
|
|
+ background-color: #E8F7F1;
|
|
|
+ color: #00B578;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .part-line {
|
|
|
+ border-top: 1px solid #EFEFEF;
|
|
|
+ margin: 10rpx 0 30rpx;
|
|
|
+ }
|
|
|
+ .text-content {
|
|
|
+ padding: 0 20rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ .other-loop-item {
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ .textTitle {
|
|
|
+ color: #686B73;
|
|
|
+ margin-right: 24rpx;
|
|
|
+ flex-shrink: 0
|
|
|
+ }
|
|
|
+ .textValue {
|
|
|
+ color: #363A44;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ flex-grow: 1;
|
|
|
+ }
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bootom-content {
|
|
|
+ padding: 0 20rpx;
|
|
|
+ @include flex-between;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #686B73;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .feedback-no {
|
|
|
+ height: calc(100vh - 210px);
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .scroll-view {
|
|
|
+ height: calc(100%);
|
|
|
+ background-color: transparent !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .no-data {
|
|
|
+ margin-top: 0;
|
|
|
+ padding-top: 160rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ .footnote_content {
|
|
|
+ background-color: #F6F7F8;
|
|
|
+ @include flex-center;
|
|
|
+ height: 136rpx;
|
|
|
+ flex-direction: column;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #B3B5B9;
|
|
|
+ line-height: 40rpx;
|
|
|
+ .footnote_phone {
|
|
|
+ display: flex;
|
|
|
+ .phone_text {
|
|
|
+ color: #1E92F0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
