123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165 |
- <template>
- <view class="shopTourDetails-wrap">
- <scroll-view scroll-y class="scroll-con-l">
- <view class="item-con" v-for="(item, index) in itemList" :key="index">
- <view :class="['item-tit', nowInd==index ? 'active' : '']" @click="changeType(index)">{{item.name}}</view>
- </view>
- </scroll-view>
- <scroll-view scroll-y class="scroll-con-r" @scrolltolower="onreachBottom">
- <view class="item-con" v-for="(item, index) in evaluationItemsList" :key="index">
- <view class="item-tit">{{item.name}}</view>
- <view class="item-main">
- <view class="item-state">状态:
- <text v-if="item.state == 0" class="green">合格</text>
- <text v-if="item.state == 1" class="red">不合格</text>
- <text v-if="item.state == 2" class="yellow">不适用</text>
- </view>
- <text class="item-btn" @click="openPopup=true">查看评论</text>
- </view>
- <view class="item-footer">
- 考核时间:2020-09-09 14:29
- </view>
- </view>
- </scroll-view>
- <!-- 查看评论 -->
- <comment-popup :openPopup="openPopup" @close="closePopup" />
- </view>
- </template>
- <script>
- import CommentPopup from './commentPopup.vue'
- export default{
- components: { CommentPopup },
- data(){
- return{
- itemList: [ // 考评项目
- { name: '工作态度' },
- { name: '办事效率' },
- { name: '正常营业' },
- { name: '工作态度' },
- ],
- evaluationItemsList: [ // 考评项
- { name: '按时完成工作', state: 0 },
- { name: '待人接物礼貌', state: 1 },
- { name: '按时完成工作', state: 2 },
- { name: '待人接物礼貌', state: 1 },
- { name: '按时完成工作', state: 0 },
- { name: '待人接物礼貌', state: 1 },
- { name: '按时完成工作', state: 2 },
- { name: '待人接物礼貌', state: 1 },
- { name: '按时完成工作', state: 0 },
- { name: '待人接物礼貌', state: 1 },
- { name: '按时完成工作', state: 2 },
- { name: '待人接物礼貌', state: 1 },
- { name: '按时完成工作', state: 0 },
- { name: '待人接物礼貌', state: 1 },
- { name: '按时完成工作', state: 2 },
- { name: '待人接物礼貌', state: 1 },
- ],
- nowInd: 0, // 当前考评分类
- openPopup: false, // 查看评论
- }
- },
- methods: {
- // scroll-view到底部加载更多
- onreachBottom() {
- // if(this.list.length < this.total){
- // this.pageNo += 1
- // this.pageInit()
- // }else{
- // this.status = "nomore"
- // }
- },
- // 切换分类
- changeType(ind){
- this.nowInd = ind
- },
- // 关闭 查看评论
- closePopup(){
- this.openPopup = false
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- page {
- background-color: #f8f8f8;
- height: calc(100vh - 48px);
- }
- .shopTourDetails-wrap{
- height: 100%;
- background-color: #f8f8f8;
- .scroll-con-l{
- display: inline-block;
- width: 28%;
- height: 99%;
- margin: 1% 1% 0;
- box-sizing: border-box;
- .item-con{
- .item-tit{
- text-align: center;
- padding: 26upx 0;
- margin-bottom: 12upx;
- background-color: #fff;
- position: relative;
- &:before{
- content: '';
- background-color: #fff;
- width: 8upx;
- height: 50upx;
- display: block;
- position: absolute;
- right: 0;
- top: 18upx;
- }
- }
- .item-tit.active{
- &:before{
- background-color: #fa3534;
- }
- }
- }
- }
- .scroll-con-r{
- display: inline-block;
- width: 69%;
- height: 99%;
- margin: 1% 1% 0 0;
- .item-con{
- padding: 14upx 30upx;
- margin-bottom: 18upx;
- border-radius: 12upx;
- background-color: #fff;
- .item-tit{
- font-weight: bold;
- }
- .item-main{
- padding: 14upx 0;
- display: flex;
- justify-content: space-between;
- .item-state{
- font-size: 26upx;
- text.green{
- color: #19be6b;
- }
- text.yellow{
- color: #ff9900;
- }
- text.red{
- color: #fa3534;
- }
- }
- .item-btn{
- font-size: 24upx;
- color: #2979ff;
- }
- }
- .item-footer{
- font-size: 24upx;
- color: #464646;
- }
- }
- }
- }
- </style>
|