jianjun
3 years ago
11 changed files with 325 additions and 442 deletions
@ -1,335 +0,0 @@ |
|||
<template> |
|||
<div class="m-pop"> |
|||
<div class="wrap"> |
|||
<cpt-card> |
|||
<div class="title"> |
|||
<img src="@/assets/img/shuju/title-tip.png" /> |
|||
<span>详情</span> |
|||
</div> |
|||
|
|||
<div class="btn-close" @click="handleClose"> |
|||
<img src="@/assets/img/shuju/people/close.png" /> |
|||
</div> |
|||
<!-- <div class="list-title">需求内容</div> --> |
|||
<div class="list-wr"> |
|||
<div class="list left-list" v-infinite-scroll="getServicelist" style="overflow:auto"> |
|||
<template v-if="servicelist.length > 0"> |
|||
<div class="left-item" :class="activeIndex == index ? 'active-item' : ''" v-for="(item, index) in servicelist" :key="index" @click="toDetail(index)"> |
|||
<div class="item-time">{{item.reportTime || '2022-05-18'}}</div> |
|||
<div class="item-content">{{item.content || '本周加班本周加班本周加班本周加班本周加班本周加班'}}</div> |
|||
</div> |
|||
</template> |
|||
<screen-nodata class="nodata" v-else></screen-nodata> |
|||
</div> |
|||
<div class="dashed-line"></div> |
|||
<div class="list right-list"> |
|||
<template v-if="info.content"> |
|||
<!-- <div class="item-title">需求内容</div> --> |
|||
<div class="item"> |
|||
<span class="item-field">所属网格：</span> |
|||
<span>{{ info.gridName }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="item-field">需求类型：</span> |
|||
<span>{{ info.categoryName }}</span> |
|||
</div> |
|||
<!-- <div class="item"> |
|||
<span class="item-field">需求状态：</span> |
|||
<span>{{ info.statusName }}</span> |
|||
</div> --> |
|||
<div class="item"> |
|||
<span class="item-field">上报类型：</span> |
|||
<span>{{ info.reportTypeName }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="item-field">上报人：</span> |
|||
<span>{{ info.reportUserName }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="item-field">上报人联系方式 ：</span> |
|||
<span>{{ info.reportUserMobile }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="item-field">上报时间 ：</span> |
|||
<span>{{ info.reportTime }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="item-field">需求人 ：</span> |
|||
<span>{{ info.demandUserName }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="item-field">服务时间 ：</span> |
|||
<span>{{ info.wantServiceTime }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="item-field">需求内容：</span> |
|||
<div>{{ info.content }}</div> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="item-field">服务方 ：</span> |
|||
<span>{{ info.serviceShowName }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="item-field">实际服务时间 ：</span> |
|||
<span>{{ info.serviceStartTime }} 至 {{ info.serviceEndTime }}</span> |
|||
</div> |
|||
<!-- <div class="item"> |
|||
<span class="item-field">完成情况 ：</span> |
|||
<span>{{ info.finishDesc }}</span> |
|||
</div> --> |
|||
<div class="item"> |
|||
<span class="item-field">评价 ：</span> |
|||
<span> |
|||
<el-rate :value="info.score" disabled></el-rate> |
|||
</span> |
|||
</div> |
|||
</template> |
|||
<screen-nodata class="nodata" v-else></screen-nodata> |
|||
</div> |
|||
</div> |
|||
</cpt-card> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import ScreenNodata from "@/views/modules/visual/components/screen-nodata" |
|||
import cptCard from '@/views/modules/visual/cpts/card' |
|||
import { requestPost } from '@/js/dai/request' |
|||
|
|||
export default { |
|||
name: 'dialogInfo', |
|||
props: { |
|||
userId: { |
|||
type: String, |
|||
default: '', |
|||
}, |
|||
gridName: { |
|||
type: String, |
|||
default: '', |
|||
}, |
|||
orgId: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
|
|||
components: { |
|||
cptCard, |
|||
ScreenNodata |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
pageNo: 1, |
|||
pageSize: 10, |
|||
servicelist: [], |
|||
info: { |
|||
// content: '受到供应链等不可抗力的影响，大多数车企的销量都呈现环比下滑的趋势，不过像供应链断供这样的问题只是暂时的，在复工复产后，5、6月份的销量也许就会恢复到正常水平。长远来看新能源的发展还是非常可观的，其市场格局正在逐步稳定，新能源汽车的前景仍然大有可为。', |
|||
// gridName: '第一网格', |
|||
// categoryName: '便民服务', |
|||
// statusName: '待处理', |
|||
// reportTypeName: '自身上报', |
|||
// reportUserName: '张三', |
|||
// reportUserMobile: '13794049999', |
|||
// reportTime: '2022-05-18 14:47:00', |
|||
// wantServiceTime: '2022-05-18 14:47:00', |
|||
// serviceShowName: '李四', |
|||
// serviceStartTime: '2022-05-18 14:47:00', |
|||
// serviceEndTime: '2022-05-18 14:47:00', |
|||
// finishDesc: '已解决', |
|||
// score: '3.5' |
|||
}, |
|||
loadType: 'loading', |
|||
activeIndex: 0 |
|||
} |
|||
}, |
|||
created () { |
|||
this.servicelist = [] |
|||
}, |
|||
methods: { |
|||
// 获取组织需求列表 |
|||
async getServicelist () { |
|||
if (this.loadType == 'none') { |
|||
return |
|||
} |
|||
const url = '/heart/residemand/service-list' |
|||
const params = { |
|||
serverId: this.orgId, |
|||
pageNo: this.pageNo, |
|||
pageSize: this.pageSize, |
|||
type: 'community_org', // 志愿者：volunteer；社区自组织：community_org； |
|||
} |
|||
const { data, code, msg } = await requestPost(url, params) |
|||
if (code === 0) { |
|||
if (this.pageNo == 1) { |
|||
this.getDemandDetail(data.list[0].demandRecId) |
|||
} |
|||
this.pageNo++ |
|||
this.servicelist = this.servicelist.concat(data.list) |
|||
this.loadType = this.servicelist.length < data.total ? 'loading' : 'none' |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
// 获取需求详情 |
|||
async getDemandDetail (id) { |
|||
this.info = {} |
|||
const url = '/heart/userdemand/demandDetail' |
|||
const params = { |
|||
demandRecId: id, // 需求id |
|||
} |
|||
const { data, code, msg } = await requestPost(url, params) |
|||
if (code === 0) { |
|||
this.info = data |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
toDetail (index) { |
|||
this.activeIndex = index |
|||
this.getDemandDetail(this.servicelist[index].demandRecId) |
|||
}, |
|||
handleClose() { |
|||
this.$emit("close") |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" src="@/assets/scss/modules/visual/people.scss" scoped></style> |
|||
<style lang="scss" scoped> |
|||
@mixin scrollBar { |
|||
&::-webkit-scrollbar { |
|||
/*滚动条整体样式*/ |
|||
width: 8px; /*高宽分别对应横竖滚动条的尺寸*/ |
|||
height: 1px; |
|||
} |
|||
&::-webkit-scrollbar-thumb { |
|||
/*滚动条里面小方块*/ |
|||
border-radius: 8px; |
|||
box-shadow: inset 0 0 5px rgba(#00023f, 0.2); |
|||
background: linear-gradient(270deg, #0063fe, #0095ff); |
|||
} |
|||
&::-webkit-scrollbar-track { |
|||
/*滚动条里面轨道*/ |
|||
box-shadow: inset 0 0 5px rgba(#00023f, 0.2); |
|||
border-radius: 8px; |
|||
background: darken(#0c81fe, 20); |
|||
} |
|||
} |
|||
.m-pop { |
|||
.wrap { |
|||
.list { |
|||
display: block; |
|||
width: calc(100% - 280px); |
|||
max-height: 600px; |
|||
overflow: auto; |
|||
@include scrollBar; |
|||
.item-title { |
|||
padding: 0; |
|||
font-size: 22px; |
|||
font-family: PingFang SC; |
|||
font-weight: 800; |
|||
color: #ffffff; |
|||
margin-bottom: 15px; |
|||
} |
|||
.item { |
|||
display: flex; |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
margin-top: 0; |
|||
margin-bottom: 15px; |
|||
font-size: 16px; |
|||
cursor: pointer; |
|||
.item-field { |
|||
// width: 100px; |
|||
flex-shrink: 0; |
|||
} |
|||
.item-content { |
|||
width: 100%; |
|||
max-height: 420px; |
|||
overflow-y: auto; |
|||
@include scrollBar; |
|||
} |
|||
::v-deep p { |
|||
margin: 0; |
|||
img { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
|
|||
.item-imgs { |
|||
width: 100%; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
|
|||
img { |
|||
display: block; |
|||
width: 240px; |
|||
height: 240px; |
|||
margin-right: 10px; |
|||
} |
|||
} |
|||
} |
|||
.item-desc { |
|||
font-size: 16px; |
|||
margin-bottom: 10px; |
|||
line-height: 24px; |
|||
} |
|||
} |
|||
} |
|||
.list-title { |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
padding: 20px 0 10px 62px; |
|||
font-size: 20px; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
.list-wr { |
|||
display: flex; |
|||
padding: 0 20px; |
|||
.dashed-line { |
|||
width: 1px; |
|||
height: 600px; |
|||
margin: 0 15px; |
|||
border: 1px dashed #1257c9; |
|||
} |
|||
.left-list { |
|||
width: 280px !important; |
|||
height: 600px; |
|||
overflow: auto; |
|||
padding: 10px 0 !important; |
|||
@include scrollBar; |
|||
.active-item { |
|||
border: 1px solid #0063FE !important; |
|||
box-shadow: 0px 0px 10px #0063fe inset; |
|||
} |
|||
.left-item { |
|||
display: flex; |
|||
flex-direction: column; |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
margin-top: 0; |
|||
margin-bottom: 20px; |
|||
font-size: 16px; |
|||
cursor: pointer; |
|||
color: #ffffff; |
|||
padding: 5px; |
|||
border: 1px solid transparent; |
|||
.item-content { |
|||
margin-top: 10px; |
|||
width: 100%; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
} |
|||
} |
|||
.right-list { |
|||
padding: 0 15px !important; |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue