| <template> | 
|     <view class="box" v-if="info"> | 
|         <view class="box_item"> | 
|             <view class="box_item_label">员工姓名</view> | 
|             <view class="box_item_value">{{info.memberName}}</view> | 
|         </view> | 
|         <view class="box_item"> | 
|             <view class="box_item_label">部门</view> | 
|             <view class="box_item_value">{{info.companyName}}</view> | 
|         </view> | 
|         <view class="box_item"> | 
|             <view class="box_item_label">上报时间</view> | 
|             <view class="box_item_value">{{info.submitDate.substring(0, 16)}}</view> | 
|         </view> | 
|         <view class="box_item"> | 
|             <view class="box_item_label">发现时间</view> | 
|             <view class="box_item_value">{{info.happenTime.substring(0, 16)}}</view> | 
|         </view> | 
|         <view class="box_item"> | 
|             <view class="box_item_label">风险类型</view> | 
|             <view class="box_item_value">{{info.typeName}}</view> | 
|         </view> | 
|         <view class="box_item"> | 
|             <view class="box_item_label">发生地点</view> | 
|             <view class="box_item_value">{{info.locationName}}</view> | 
|         </view> | 
|         <view class="box_item"> | 
|             <view class="box_item_label">风险描述</view> | 
|             <view class="box_item_value">{{info.riskInfo}}</view> | 
|         </view> | 
|         <view class="box_item" style="flex-direction: column;"> | 
|             <view class="box_item_label">图片</view> | 
|             <view class="box_item_tu" v-if="info.multifileList"> | 
|                 <view class="box_item_tu_item" v-for="(item, index) in info.multifileList" :key="index" @click="previewImage(item.fileurlFull, info.multifileList.map(item => item.fileurlFull))"> | 
|                     <image :src="item.fileurlFull" mode="widthFix"></image> | 
|                 </view> | 
|                 <view class="box_item_tu_zw"></view> | 
|                 <view class="box_item_tu_zw"></view> | 
|                 <view class="box_item_tu_zw"></view> | 
|             </view> | 
|         </view> | 
|     </view> | 
| </template> | 
|   | 
| <script> | 
|     export default { | 
|         data() { | 
|             return { | 
|                 id: null, | 
|                 info: null | 
|             }; | 
|         }, | 
|         onLoad(option) { | 
|             this.id = option.id | 
|             this.getDetails() | 
|         }, | 
|         methods: { | 
|             getDetails() { | 
|                 this.$u.api.detail({ id: this.id }) | 
|                     .then(res => { | 
|                         console.log(res) | 
|                         this.info = res.data | 
|                     }) | 
|             }, | 
|             previewImage(current, urls) { | 
|                 uni.previewImage({ | 
|                     current, | 
|                     urls | 
|                 }); | 
|             }, | 
|         } | 
|     } | 
| </script> | 
|   | 
| <style lang="scss" scoped> | 
|     .box { | 
|         width: 100%; | 
|         .box_item { | 
|             width: 100%; | 
|             padding: 32rpx 30rpx; | 
|             display: flex; | 
|             box-sizing: border-box; | 
|             align-items: start; | 
|             border-bottom: 2rpx solid rgba(239,239,239,1); | 
|             .box_item_label { | 
|                 width: 220rpx; | 
|                 height: 100%; | 
|                 flex-shrink: 0; | 
|                 display: flex; | 
|                 align-items: center; | 
|                 justify-content: start; | 
|                 color: rgba(0,0,0,1); | 
|                 font-size: 28rpx; | 
|             } | 
|             .box_item_value { | 
|                 flex: 1; | 
|                 height: 100%; | 
|                 display: flex; | 
|                 align-items: center; | 
|                 justify-content: start; | 
|                 color: rgba(16,16,16,1); | 
|                 font-size: 28rpx; | 
|             } | 
|             .box_item_tu { | 
|                 width: 100%; | 
|                 display: flex; | 
|                 align-items: center; | 
|                 justify-content: space-between; | 
|                 flex-wrap: wrap; | 
|                 margin-top: 30rpx; | 
|                 .box_item_tu_zw { | 
|                     width: 156rpx; | 
|                     height: 0; | 
|                 } | 
|                 .box_item_tu_item { | 
|                     width: 156rpx; | 
|                     height: 156rpx; | 
|                     display: flex; | 
|                     align-items: center; | 
|                     justify-content: center; | 
|                     overflow: hidden; | 
|                     margin-bottom: 30rpx; | 
|                     image { | 
|                         width: 100%; | 
|                         height: 100%; | 
|                     } | 
|                 } | 
|             } | 
|         } | 
|     } | 
| </style> |