shopTourDetails.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  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.name}}</view>
  6. </view>
  7. </scroll-view>
  8. <scroll-view scroll-y class="scroll-con-r" @scrolltolower="onreachBottom">
  9. <view class="item-con" v-for="(item, index) in evaluationItemsList" :key="index">
  10. <view class="item-tit">{{item.name}}</view>
  11. <view class="item-main">
  12. <view class="item-state">状态:
  13. <text v-if="item.state == 0" class="green">合格</text>
  14. <text v-if="item.state == 1" class="red">不合格</text>
  15. <text v-if="item.state == 2" class="yellow">不适用</text>
  16. </view>
  17. <text class="item-btn" @click="openPopup=true">查看评论</text>
  18. </view>
  19. <view class="item-footer">
  20. 考核时间:2020-09-09 14:29
  21. </view>
  22. </view>
  23. </scroll-view>
  24. <!-- 查看评论 -->
  25. <comment-popup :openPopup="openPopup" @close="closePopup" />
  26. </view>
  27. </template>
  28. <script>
  29. import CommentPopup from './commentPopup.vue'
  30. export default{
  31. components: { CommentPopup },
  32. data(){
  33. return{
  34. itemList: [ // 考评项目
  35. { name: '工作态度' },
  36. { name: '办事效率' },
  37. { name: '正常营业' },
  38. { name: '工作态度' },
  39. ],
  40. evaluationItemsList: [ // 考评项
  41. { name: '按时完成工作', state: 0 },
  42. { name: '待人接物礼貌', state: 1 },
  43. { name: '按时完成工作', state: 2 },
  44. { name: '待人接物礼貌', state: 1 },
  45. { name: '按时完成工作', state: 0 },
  46. { name: '待人接物礼貌', state: 1 },
  47. { name: '按时完成工作', state: 2 },
  48. { name: '待人接物礼貌', state: 1 },
  49. { name: '按时完成工作', state: 0 },
  50. { name: '待人接物礼貌', state: 1 },
  51. { name: '按时完成工作', state: 2 },
  52. { name: '待人接物礼貌', state: 1 },
  53. { name: '按时完成工作', state: 0 },
  54. { name: '待人接物礼貌', state: 1 },
  55. { name: '按时完成工作', state: 2 },
  56. { name: '待人接物礼貌', state: 1 },
  57. ],
  58. nowInd: 0, // 当前考评分类
  59. openPopup: false, // 查看评论
  60. }
  61. },
  62. methods: {
  63. // scroll-view到底部加载更多
  64. onreachBottom() {
  65. // if(this.list.length < this.total){
  66. // this.pageNo += 1
  67. // this.pageInit()
  68. // }else{
  69. // this.status = "nomore"
  70. // }
  71. },
  72. // 切换分类
  73. changeType(ind){
  74. this.nowInd = ind
  75. },
  76. // 关闭 查看评论
  77. closePopup(){
  78. this.openPopup = false
  79. }
  80. }
  81. }
  82. </script>
  83. <style lang="scss" scoped>
  84. page {
  85. background-color: #f8f8f8;
  86. height: calc(100vh - 48px);
  87. }
  88. .shopTourDetails-wrap{
  89. height: 100%;
  90. background-color: #f8f8f8;
  91. .scroll-con-l{
  92. display: inline-block;
  93. width: 28%;
  94. height: 99%;
  95. margin: 1% 1% 0;
  96. box-sizing: border-box;
  97. .item-con{
  98. .item-tit{
  99. text-align: center;
  100. padding: 26upx 0;
  101. margin-bottom: 12upx;
  102. background-color: #fff;
  103. position: relative;
  104. &:before{
  105. content: '';
  106. background-color: #fff;
  107. width: 8upx;
  108. height: 50upx;
  109. display: block;
  110. position: absolute;
  111. right: 0;
  112. top: 18upx;
  113. }
  114. }
  115. .item-tit.active{
  116. &:before{
  117. background-color: #fa3534;
  118. }
  119. }
  120. }
  121. }
  122. .scroll-con-r{
  123. display: inline-block;
  124. width: 69%;
  125. height: 99%;
  126. margin: 1% 1% 0 0;
  127. .item-con{
  128. padding: 14upx 30upx;
  129. margin-bottom: 18upx;
  130. border-radius: 12upx;
  131. background-color: #fff;
  132. .item-tit{
  133. font-weight: bold;
  134. }
  135. .item-main{
  136. padding: 14upx 0;
  137. display: flex;
  138. justify-content: space-between;
  139. .item-state{
  140. font-size: 26upx;
  141. text.green{
  142. color: #19be6b;
  143. }
  144. text.yellow{
  145. color: #ff9900;
  146. }
  147. text.red{
  148. color: #fa3534;
  149. }
  150. }
  151. .item-btn{
  152. font-size: 24upx;
  153. color: #2979ff;
  154. }
  155. }
  156. .item-footer{
  157. font-size: 24upx;
  158. color: #464646;
  159. }
  160. }
  161. }
  162. }
  163. </style>