shopTourDetails.vue 4.4 KB

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