spotCheckDetails.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. <template>
  2. <view class="spotCheckDetails-wrap">
  3. <view class="item-con" v-for="(item,index) in list" :key="index">
  4. <view class="item-header">
  5. <view class="header-l">
  6. <view class="item-c">
  7. {{item.assessTargetName}}
  8. </view>
  9. </view>
  10. <text :class="['header-r', item.result == 'PASS' ? 'green' : item.result == 'NOT_PASS' ? 'red' : item.result == 'NOT_WORK' ? 'yellow' : '']">{{item.resultDictValue}}</text>
  11. </view>
  12. <view class="comment-con">
  13. <u-row gutter="16" class="pic-con">
  14. <u-col span="3" v-for="(pic, ind) in item.taskTargetPhotoList" :key="ind">
  15. <u-image class="pic" width="100%" height="150upx" :src="pic.photoPath" @click="clickPic(index, ind)"></u-image>
  16. </u-col>
  17. </u-row>
  18. <view class="comment-main" v-if="item.comments">评论:{{item.comments}}</view>
  19. <view class="comment-main" v-else>评论:--</view>
  20. </view>
  21. </view>
  22. <view style="width: 100%;padding-top: 10vh;" v-if="list.length == 0">
  23. <u-empty text="暂无数据" img-width="120" mode="list"></u-empty>
  24. </view>
  25. </view>
  26. </template>
  27. <script>
  28. import { getTaskTargetById } from '@/api/taskTarget.js'
  29. export default{
  30. data(){
  31. return{
  32. list: [], // 列表数据
  33. taskId: '' // 任务id
  34. }
  35. },
  36. onLoad(opts) {
  37. this.taskId = opts.taskId ? opts.taskId : ''
  38. this.getDetails()
  39. },
  40. methods: {
  41. // 查看评论大图
  42. clickPic(index,ind){
  43. // 预览图片
  44. uni.previewImage({
  45. current: ind,
  46. urls: this.list[index].photoList
  47. })
  48. },
  49. // 获取详情
  50. getDetails(){
  51. getTaskTargetById({ taskId: this.taskId }).then(res => {
  52. if(res.status == 200){
  53. res.data.map(item => {
  54. if(item.taskTargetPhotoList){
  55. item.photoList = []
  56. item.taskTargetPhotoList.map(subItem => {
  57. item.photoList.push(subItem.photoPath)
  58. })
  59. }
  60. })
  61. this.list = res.data
  62. }
  63. })
  64. }
  65. }
  66. }
  67. </script>
  68. <style lang="scss" scoped>
  69. page {
  70. background-color: #f8f8f8;
  71. }
  72. .spotCheckDetails-wrap{
  73. padding-top: 20upx;
  74. .item-con{
  75. background-color: #fff;
  76. margin: 0 20upx 20upx;
  77. border: 1px solid #F8F8F8;
  78. border-radius: 6upx;
  79. box-shadow: 1px 1px 3px #eee;
  80. .item-header{
  81. display: flex;
  82. justify-content: space-between;
  83. padding: 20upx;
  84. border-bottom: 1px solid #F8F8F8;
  85. .header-l{
  86. flex-grow: 1;
  87. position: relative;
  88. .item-sub{
  89. position: absolute;
  90. left: 0;
  91. top: 0;
  92. width: 66upx;
  93. text-align: center;
  94. }
  95. .item-c{
  96. .item-c-tit{
  97. font-weight: bold;
  98. }
  99. }
  100. }
  101. .header-r{
  102. flex-shrink: 0;
  103. }
  104. .header-r.green{
  105. color: #19be6b;
  106. }
  107. .header-r.yellow{
  108. color: #ff9900;
  109. }
  110. .header-r.red{
  111. color: #fa3534;
  112. }
  113. }
  114. .comment-con{
  115. padding: 20upx;
  116. .comment-main{
  117. font-size: 26upx;
  118. padding: 16upx 20upx;
  119. line-height: 1.5em;
  120. margin-top: 20upx;
  121. .comment-tit{
  122. font-weight: bold;
  123. }
  124. .comment-txt{
  125. }
  126. }
  127. }
  128. }
  129. }
  130. </style>