6 changed files with 674 additions and 131 deletions
@ -0,0 +1,275 @@
|
||||
<template> |
||||
<view class="view-container"> |
||||
<view class="box detail"> |
||||
<text class="wd-font-800 wd-text-16" style="margin-bottom: 4px"> |
||||
{{ detail.title }} |
||||
</text> |
||||
<view class="tagList"> |
||||
<view |
||||
v-for="(tag, index) in detail.tagList" |
||||
:key="index" |
||||
class="tag" |
||||
> |
||||
{{ tag }} |
||||
</view> |
||||
</view> |
||||
<view |
||||
class="wd-flex wd-text-13" |
||||
style="justify-content: space-between" |
||||
> |
||||
<view class="wd-flex" style="align-items: center; gap: 4px"> |
||||
<u-icon name="calendar" color="#17C653" /> |
||||
<text class="wd-text-13 wd-ml-4px"> |
||||
{{ |
||||
`${$util.formatDate( |
||||
detail.startDate, |
||||
'YYYY/M/D' |
||||
)}~${$util.formatDate(detail.endDate, 'YYYY/M/D')}` |
||||
}} |
||||
</text> |
||||
</view> |
||||
</view> |
||||
<view |
||||
style=" |
||||
font-size: 13px; |
||||
line-height: 160%; |
||||
position: relative; |
||||
transform: 0.2s all; |
||||
" |
||||
v-if="detail.description.length < 20" |
||||
> |
||||
{{ detail.description }} |
||||
</view> |
||||
<view |
||||
v-else |
||||
style=" |
||||
font-size: 13px; |
||||
line-height: 160%; |
||||
position: relative; |
||||
transform: 0.2s all; |
||||
" |
||||
@tap="isShowAllText = !isShowAllText" |
||||
> |
||||
{{ |
||||
isShowAllText |
||||
? detail.description |
||||
: `${detail.description.slice(1, 20)}...` |
||||
}} |
||||
<text style="color: #17c653; padding-left: 4px"> |
||||
{{ isShowAllText ? '收起' : '展开' }} |
||||
</text> |
||||
</view> |
||||
|
||||
<view |
||||
class="wd-flex wd-items-center enterprise" |
||||
@tap="goEnterprise(detail.enterprise)" |
||||
> |
||||
<u-avatar |
||||
:src="detail.enterprise.files[0].url" |
||||
shape="square" |
||||
size="64" |
||||
></u-avatar> |
||||
<view class="wd-flex wd-flex-col" style="gap: 4px"> |
||||
<text class="wd-font-800 wd-text-15"> |
||||
{{ detail.enterprise.enterprisesName }} |
||||
</text> |
||||
<view class="wd-flex wd-pb-8px"> |
||||
<u-icon name="map" size="14" color="#17C653"></u-icon> |
||||
<text class="address wd-text-12" style="margin-left: 4px"> |
||||
{{ detail.enterprise.address }} |
||||
</text> |
||||
</view> |
||||
<view class="tagList"> |
||||
<view |
||||
class="tag" |
||||
v-for="(tag, index) in detail.enterprise.tagList" |
||||
:key="index" |
||||
> |
||||
{{ tag }} |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="audit"> |
||||
<cs-dict-tag |
||||
:dict="dictMap.task_state" |
||||
:value="detail.status" |
||||
></cs-dict-tag> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import { getDeptTree, getDictBatchByType } from '@/api/system/dict.js' |
||||
import { TaskApi } from '@/api/task/index.js' |
||||
import { getEnterPrise } from '@/api/enterprise/index.js' |
||||
export default { |
||||
data() { |
||||
return { |
||||
dictMap: {}, |
||||
// 任务详情 |
||||
detail: { |
||||
id: '', |
||||
description: '' |
||||
}, |
||||
// 是否展开文本 |
||||
isShowAllText: false, |
||||
// 查询条件 |
||||
queryParams: { |
||||
dept: '', |
||||
Inspections_status: '', |
||||
pageSize: 8, |
||||
pageNo: 1, |
||||
taskId: '', |
||||
recordId: '' |
||||
}, |
||||
list: [], |
||||
load: 'loadmore' |
||||
} |
||||
}, |
||||
onLoad(res) { |
||||
this.queryParams.taskId = res.taskId |
||||
this.queryParams.recordId = res.recordId |
||||
this.queryParams.enterpriseId = res.enterpriseId |
||||
this.getDict() |
||||
this.init() |
||||
}, |
||||
methods: { |
||||
/** |
||||
* 获取字典 |
||||
*/ |
||||
async getDict() { |
||||
const dict = await getDictBatchByType({ |
||||
type: ['task_state', 'Inspections_status'].join(',') |
||||
}) |
||||
const dept = await getDeptTree() |
||||
this.dictMap = { |
||||
...dict.data, |
||||
dept: dept.data |
||||
} |
||||
}, |
||||
async init() { |
||||
const res = await TaskApi.getDetail(this.queryParams.taskId) |
||||
const enterprise = await getEnterPrise(this.queryParams.enterpriseId) |
||||
this.detail = { |
||||
...res.data, |
||||
enterprise: enterprise.data |
||||
} |
||||
uni.getLocation({ |
||||
success: res => { |
||||
console.log(res) |
||||
} |
||||
}) |
||||
// this.getList() |
||||
}, |
||||
async getList() { |
||||
uni.showToast({ |
||||
title: '加载中', |
||||
mask: true, |
||||
icon: 'loading' |
||||
}) |
||||
this.load = 'loading' |
||||
// const { data } = await InspectionsApi.getList(this.queryParams) |
||||
this.list.push(...data.list) |
||||
this.load = 'loadmore' |
||||
if (this.list.length == data.total) { |
||||
this.load = 'nomore' |
||||
} |
||||
uni.hideToast() |
||||
}, |
||||
goEnterprise(enterprise) { |
||||
uni.navigateTo({ |
||||
url: `/sub/enterprise/detail?id=${enterprise.id}` |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.view-container { |
||||
padding: 12px; |
||||
.box { |
||||
background-color: #fff; |
||||
border-radius: $cs-border-radius; |
||||
padding: 16px; |
||||
} |
||||
|
||||
.detail { |
||||
display: flex; |
||||
flex-flow: column nowrap; |
||||
gap: 12px; |
||||
position: relative; |
||||
overflow: hidden; |
||||
.tagList { |
||||
display: flex; |
||||
align-items: center; |
||||
gap: var(--Number-4px, 4px); |
||||
.tag { |
||||
display: flex; |
||||
padding: var(--Number-2px, 2px) var(--Number-6px, 6px); |
||||
justify-content: center; |
||||
align-items: center; |
||||
gap: var(--Number-4px, 4px); |
||||
border-radius: var(--Number-2px, 2px); |
||||
background: var(--LightMode-Grey-Grey-100, #f9f9f9); |
||||
color: var(--LightMode-Grey-Grey-600, #78829d); |
||||
text-align: center; |
||||
font-size: 12px; |
||||
font-style: normal; |
||||
font-weight: 400; |
||||
line-height: normal; |
||||
} |
||||
} |
||||
.enterprise { |
||||
border: 1px solid #f9f9f9; |
||||
padding: 12px; |
||||
border-radius: $cs-border-radius; |
||||
gap: 12px; |
||||
position: relative; |
||||
overflow: hidden; |
||||
font-size: 12px; |
||||
.address { |
||||
color: $uni-text-color-grey; |
||||
} |
||||
&:active { |
||||
background-color: $cs-color-touch; |
||||
} |
||||
.tagList { |
||||
margin-top: 8px; |
||||
display: flex; |
||||
gap: 4px; |
||||
color: $uni-text-color-grey; |
||||
display: flex; |
||||
.tag { |
||||
font-size: 12px; |
||||
display: flex; |
||||
padding: 2px 6px; |
||||
justify-content: center; |
||||
align-items: center; |
||||
border-radius: 2px; |
||||
background: #f9f9f9; |
||||
} |
||||
} |
||||
.audit { |
||||
position: absolute; |
||||
right: -19px; |
||||
top: 6px; |
||||
transform: rotateZ(45deg); |
||||
transform-origin: 50% 50%; |
||||
padding: 4px 20px; |
||||
font-size: 12px; |
||||
text-align: center; |
||||
} |
||||
} |
||||
.audit { |
||||
position: absolute; |
||||
right: 0; |
||||
top: 0; |
||||
transform: translateX(23px) translateY(16px) rotateZ(45deg); |
||||
transform-origin: 50% 50%; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue