spotCheckDetails.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  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. }
  67. },
  68. methods: {
  69. // 查看评论大图
  70. clickPic(index,ind){
  71. // 预览图片
  72. uni.previewImage({
  73. current: ind,
  74. urls: this.list[index].picList[ind],
  75. longPressActions: {
  76. itemList: ['发送给朋友', '保存图片', '收藏'],
  77. success: function(data) {
  78. console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
  79. },
  80. fail: function(err) {
  81. console.log(err.errMsg);
  82. }
  83. }
  84. })
  85. }
  86. }
  87. }
  88. </script>
  89. <style lang="scss" scoped>
  90. page {
  91. background-color: #f8f8f8;
  92. height: calc(100vh - 44px);
  93. }
  94. .spotCheckDetails-wrap{
  95. padding-top: 20upx;
  96. .item-con{
  97. background-color: #fff;
  98. margin: 0 20upx 20upx;
  99. padding: 16upx 20upx 20upx;
  100. .item-header{
  101. display: flex;
  102. justify-content: space-between;
  103. .header-l{
  104. flex-grow: 1;
  105. position: relative;
  106. .item-sub{
  107. position: absolute;
  108. left: 0;
  109. top: 0;
  110. width: 66upx;
  111. text-align: center;
  112. }
  113. .item-c{
  114. padding-left: 66upx;
  115. .item-c-tit{
  116. font-weight: bold;
  117. }
  118. .item-c-txt{
  119. }
  120. }
  121. }
  122. .header-r{
  123. flex-shrink: 0;
  124. }
  125. .header-r.green{
  126. color: #19be6b;
  127. }
  128. .header-r.yellow{
  129. color: #ff9900;
  130. }
  131. .header-r.red{
  132. color: #fa3534;
  133. }
  134. }
  135. .comment-con{
  136. .pic-con{
  137. margin: 20upx 0;
  138. }
  139. .comment-main{
  140. font-size: 26upx;
  141. padding: 16upx 20upx;
  142. line-height: 1.5em;
  143. border-radius: 12upx;
  144. background-color: #f8f8f8;
  145. .comment-tit{
  146. font-weight: bold;
  147. }
  148. .comment-txt{
  149. }
  150. }
  151. }
  152. }
  153. }
  154. </style>