spotCheckDetails.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  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. <text class="item-c-tit">{{item.name}}:</text>
  9. <text class="item-c-txt">{{item.content}}</text>
  10. </view>
  11. </view>
  12. <text v-if="item.state == 0" class="header-r green">合格</text>
  13. <text v-if="item.state == 1" class="header-r red">不合格</text>
  14. <text v-if="item.state == 2" class="header-r yellow">不适用</text>
  15. </view>
  16. <view class="comment-con">
  17. <u-row gutter="16" class="pic-con">
  18. <u-col span="3" v-for="(pic, ind) in item.picList" :key="ind">
  19. <u-image class="pic" width="100%" height="150upx" :src="pic" @click="clickPic(index, ind)"></u-image>
  20. </u-col>
  21. </u-row>
  22. <view class="comment-main">
  23. <text class="comment-tit">{{item.userName}}:</text>
  24. <text class="comment-txt">{{item.remarks}}</text>
  25. </view>
  26. </view>
  27. </view>
  28. </view>
  29. </template>
  30. <script>
  31. export default{
  32. data(){
  33. return{
  34. list: [ // 列表数据
  35. {
  36. name: '着装标准',
  37. content: '服装干净、整洁、无污渍服装干净、整',
  38. picList: [
  39. '', '', ''
  40. ],
  41. userName: '测试账号',
  42. remarks: '未穿工服、办公桌面不整洁',
  43. state: 0
  44. },
  45. {
  46. name: '着装标准',
  47. content: '服装干净、整洁、无污渍服装干净、整洁、无污渍服装干净、整洁、无污渍服装干净、整洁、无污渍服装干净、整洁、无污渍服装干净、整洁、无污渍',
  48. picList: [
  49. '', '', ''
  50. ],
  51. userName: '测试账号',
  52. remarks: '未穿工服、办公桌面不整洁,未穿工服、办公桌面不整洁,未穿工服、办公桌面不整洁,未穿工服、办公桌面不整洁',
  53. state: 1
  54. },
  55. {
  56. name: '着装标准',
  57. content: '服装干净、整洁、无污渍服装干净、整',
  58. picList: [
  59. '', '', ''
  60. ],
  61. userName: '测试账号',
  62. remarks: '未穿工服、办公桌面不整洁',
  63. state: 2
  64. },
  65. ],
  66. taskId: '' // 任务id
  67. }
  68. },
  69. onLoad(opts) {
  70. this.taskId = opts.taskId ? opts.taskId : ''
  71. this.getDetails()
  72. },
  73. methods: {
  74. // 查看评论大图
  75. clickPic(index,ind){
  76. // 预览图片
  77. uni.previewImage({
  78. current: ind,
  79. urls: this.list[index].picList
  80. })
  81. },
  82. // 获取详情
  83. getDetails(){
  84. getTaskItem({ id: this.taskId }).then(res => {
  85. if(res.status == 200){
  86. this.list = res.data
  87. }
  88. })
  89. }
  90. }
  91. }
  92. </script>
  93. <style lang="scss" scoped>
  94. page {
  95. background-color: #f8f8f8;
  96. height: calc(100vh - 44px);
  97. }
  98. .spotCheckDetails-wrap{
  99. padding-top: 20upx;
  100. .item-con{
  101. background-color: #fff;
  102. margin: 0 20upx 20upx;
  103. padding: 16upx 20upx 20upx;
  104. .item-header{
  105. display: flex;
  106. justify-content: space-between;
  107. .header-l{
  108. flex-grow: 1;
  109. position: relative;
  110. .item-sub{
  111. position: absolute;
  112. left: 0;
  113. top: 0;
  114. width: 66upx;
  115. text-align: center;
  116. }
  117. .item-c{
  118. padding-left: 66upx;
  119. .item-c-tit{
  120. font-weight: bold;
  121. }
  122. .item-c-txt{
  123. }
  124. }
  125. }
  126. .header-r{
  127. flex-shrink: 0;
  128. }
  129. .header-r.green{
  130. color: #19be6b;
  131. }
  132. .header-r.yellow{
  133. color: #ff9900;
  134. }
  135. .header-r.red{
  136. color: #fa3534;
  137. }
  138. }
  139. .comment-con{
  140. .pic-con{
  141. margin: 20upx 0;
  142. }
  143. .comment-main{
  144. font-size: 26upx;
  145. padding: 16upx 20upx;
  146. line-height: 1.5em;
  147. border-radius: 12upx;
  148. background-color: #f8f8f8;
  149. .comment-tit{
  150. font-weight: bold;
  151. }
  152. .comment-txt{
  153. }
  154. }
  155. }
  156. }
  157. }
  158. </style>