spotCheckDetails.vue 2.8 KB

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