shopTourDetails.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  1. <template>
  2. <view class="shopTourDetails-wrap">
  3. <scroll-view scroll-y class="scroll-con-l">
  4. <view class="item-con" v-for="(item, index) in itemList" :key="index">
  5. <view :class="['item-tit', nowInd==index ? 'active' : '']" @click="changeType(index)">{{item.assessItemName}}</view>
  6. </view>
  7. </scroll-view>
  8. <scroll-view scroll-y class="scroll-con-r">
  9. <view class="item-con" v-for="(item, index) in evaluationItemsList" :key="index">
  10. <view class="item-tit">{{item.assessTargetName}}</view>
  11. <view class="item-main">
  12. <view class="item-state">状态:
  13. <text :class="item.result == 'PASS' ? 'green' : item.result == 'NOT_PASS' ? 'red' : item.result == 'NOT_WORK' ? 'yellow' : ''">{{item.resultDictValue}}</text>
  14. </view>
  15. <text v-if="item.comments || item.taskTargetPhotoList" class="item-btn" @click="getComments(item)">查看评论</text>
  16. </view>
  17. <view class="item-footer">
  18. 考核时间:2020-09-09 14:29
  19. </view>
  20. </view>
  21. <u-empty text="暂无数据" img-width="120" v-if="evaluationItemsList.length == 0" mode="list"></u-empty>
  22. </scroll-view>
  23. <!-- 查看评论 -->
  24. <comment-popup :openPopup="openPopup" :comments="comments" :taskTargetPhotoList="taskTargetPhotoList" @close="closePopup" />
  25. </view>
  26. </template>
  27. <script>
  28. import CommentPopup from './commentPopup.vue'
  29. import { getTaskItem } from '@/api/taskItem.js'
  30. export default{
  31. components: { CommentPopup },
  32. data(){
  33. return{
  34. itemList: [], // 考评项目
  35. evaluationItemsList: [], // 考评项
  36. nowInd: 0, // 当前考评分类
  37. openPopup: false, // 查看评论
  38. detail: null, // 详情
  39. taskId: '', // 任务id
  40. comments: '', // 评论
  41. taskTargetPhotoList: [], // 评论图片
  42. }
  43. },
  44. onLoad(opts) {
  45. this.taskId = opts.taskId
  46. this.getTaskItem()
  47. },
  48. methods: {
  49. getTaskItem(){
  50. getTaskItem({ id: this.taskId }).then(res => {
  51. if(res.status == 200){
  52. this.itemList = res.data
  53. this.nowInd = 0
  54. this.evaluationItemsList = this.itemList[this.nowInd].taskTargetVOList ? this.itemList[this.nowInd].taskTargetVOList : []
  55. }
  56. })
  57. },
  58. // 切换分类
  59. changeType(ind){
  60. this.nowInd = ind
  61. this.evaluationItemsList = this.itemList[this.nowInd].taskTargetVOList ? this.itemList[this.nowInd].taskTargetVOList : []
  62. },
  63. // 查看评论
  64. getComments(item){
  65. this.comments = item.comments ? item.comments : ''
  66. if(item.taskTargetPhotoList){
  67. let arr = []
  68. item.taskTargetPhotoList.map(params => {
  69. arr.push(params.photoBasePath + params.photoPath)
  70. })
  71. this.taskTargetPhotoList = arr
  72. }else{
  73. this.taskTargetPhotoList = []
  74. }
  75. this.openPopup = true
  76. },
  77. // 关闭 查看评论
  78. closePopup(){
  79. this.openPopup = false
  80. }
  81. }
  82. }
  83. </script>
  84. <style lang="scss" scoped>
  85. page {
  86. background-color: #f8f8f8;
  87. height: calc(100vh - 48px);
  88. }
  89. .shopTourDetails-wrap{
  90. height: 100%;
  91. background-color: #f8f8f8;
  92. .scroll-con-l{
  93. display: inline-block;
  94. width: 28%;
  95. height: 99%;
  96. margin: 1% 1% 0;
  97. box-sizing: border-box;
  98. .item-con{
  99. .item-tit{
  100. text-align: center;
  101. padding: 26upx 0;
  102. margin-bottom: 12upx;
  103. background-color: #fff;
  104. position: relative;
  105. &:before{
  106. content: '';
  107. background-color: #fff;
  108. width: 8upx;
  109. height: 50upx;
  110. display: block;
  111. position: absolute;
  112. right: 0;
  113. top: 18upx;
  114. }
  115. }
  116. .item-tit.active{
  117. &:before{
  118. background-color: #fa3534;
  119. }
  120. }
  121. }
  122. }
  123. .scroll-con-r{
  124. display: inline-block;
  125. width: 69%;
  126. height: 99%;
  127. margin: 1% 1% 0 0;
  128. .item-con{
  129. padding: 14upx 30upx;
  130. margin-bottom: 18upx;
  131. border-radius: 12upx;
  132. background-color: #fff;
  133. .item-tit{
  134. font-weight: bold;
  135. }
  136. .item-main{
  137. padding: 14upx 0;
  138. display: flex;
  139. justify-content: space-between;
  140. .item-state{
  141. font-size: 26upx;
  142. text.green{
  143. color: #19be6b;
  144. }
  145. text.yellow{
  146. color: #ff9900;
  147. }
  148. text.red{
  149. color: #fa3534;
  150. }
  151. }
  152. .item-btn{
  153. font-size: 24upx;
  154. color: #2979ff;
  155. }
  156. }
  157. .item-footer{
  158. font-size: 24upx;
  159. color: #464646;
  160. }
  161. }
  162. }
  163. }
  164. </style>