details.vue
4.59 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<template>
<view class="container">
<tui-list-cell :hover="false">
<view class="fs-flex__between"><view>问题单号</view><view>{{info.problemNo}}</view></view>
</tui-list-cell>
<tui-list-cell :hover="false">
<view class="fs-flex__between"><view class="basis">道路名称</view><view>{{info.roadName}}</view></view>
</tui-list-cell>
<tui-list-cell :hover="false">
<view class="fs-flex__between"><view>养护级别</view><view>{{info.curingLevelName}}</view></view>
</tui-list-cell>
<tui-list-cell :hover="false">
<view class="fs-flex__between"><view>养护组长</view><view>{{info.leaderUserName}}</view></view>
</tui-list-cell>
<tui-list-cell :hover="false">
<view class="fs-flex__between">
<view>紧急程度</view>
<view>
<tui-text v-if="info.pressingType == 1" type="primary" text="特急"></tui-text>
<tui-text v-else-if="info.pressingType == 2" type="primary" text="紧急"></tui-text>
<tui-text v-else-if="info.pressingType == 3" type="primary" text="一般"></tui-text>
</view>
</view>
</tui-list-cell>
<tui-list-cell :hover="false">
<view class="fs-flex__between">
<view>指派状态</view>
<view>
<tui-text v-if="info.distributeStatus == 2" text="已指派" type="success"></tui-text>
<tui-text v-else text="待指派" type="danger"></tui-text>
</view>
</view>
</tui-list-cell>
<tui-list-cell :hover="false">
<view class="fs-flex__between">
<view>领导确认状态</view>
<view>
<tui-text v-if="info.leaderConfrimStatus == 1" text="待确认" type="warning"></tui-text>
<tui-text v-else-if="info.leaderConfrimStatus == 2" text="已确认" type="success"></tui-text>
<tui-text v-else-if="info.leaderConfrimStatus == 3" text="已拒绝" type="danger"></tui-text>
</view>
</view>
</tui-list-cell>
<tui-list-cell :hover="false">
<view class="fs-flex__between"><view>问题来源</view><view>{{info.problemSourceName}}</view></view>
</tui-list-cell>
<tui-list-cell :hover="false">
<view class="fs-flex__between">
<view class="basis">具体位置</view>
<view @click="openMap(info.lat, info.lon, info.lonLatAddress)">
<tui-text type="primary" decoration="underline" :text="info.lonLatAddress"></tui-text>
</view>
</view>
</tui-list-cell>
<tui-list-cell :hover="false">
<view class="fs-flex__between"><view>提交日期</view><view>{{info.createTime}}</view></view>
</tui-list-cell>
<tui-list-cell :hover="false">
<view class="fs-flex__between"><view class="basis">问题描述</view><view>{{info.remark}}</view></view>
</tui-list-cell>
<tui-list-cell :hover="false">
<view class="fs-flex__between">
<view>问题图片</view>
<view class="fs-flex">
<view class="fs-ml20" v-for="(value, key) in info.imgList">
<tui-lazyload-img radius="12rpx" width="150rpx" height="150rpx" mode="aspectFill" :src="value" @click="previewImage('imgList',key)"></tui-lazyload-img>
</view>
</view>
</view>
</tui-list-cell>
<tui-list-cell :hover="false">
<view class="fs-flex__between">
<view>街景图片</view>
<view class="fs-flex">
<view class="fs-ml20" v-for="(value, key) in info.streetImgList">
<tui-lazyload-img radius="12rpx" width="150rpx" height="150rpx" mode="aspectFill" :src="value" @click="previewImage('streetImgList',key)"></tui-lazyload-img>
</view>
</view>
</view>
</tui-list-cell>
<tui-list-cell :hover="false" unlined>
<view class="fs-flex__between fs-safe__area">
<view>远景图片</view>
<view class="fs-flex">
<view class="fs-ml20" v-for="(value, key) in info.longRangeImgList">
<tui-lazyload-img radius="12rpx" width="150rpx" height="150rpx" mode="aspectFill" :src="value" @click="previewImage('longRangeImgList',key)"></tui-lazyload-img>
</view>
</view>
</view>
</tui-list-cell>
</view>
</template>
<script>
import { apiCaseDetail } from '@/api/work'
export default {
data() {
return {
info: {}
}
},
onLoad(options) {
this.getCaseDetail(options.problem_no)
},
methods: {
// 获取问题详情
getCaseDetail(problem_no) {
apiCaseDetail({data:{problem_no}}).then(res => {
this.info = res.data
})
},
// 图片预览
previewImage(index, key) {
const imageList = this.info[index]
uni.previewImage({
current: imageList[key],
loop: true,
urls: imageList
})
},
// 查看地图
openMap(latitude, longitude, address) {
uni.openLocation({
latitude: latitude,
longitude: longitude,
address: address
})
}
}
}
</script>
<style lang="scss" scoped>
.basis {
flex-basis: 180rpx;
flex-shrink: 0;
}
</style>