epmet-work-uni/subpages/statistics/pages/problemList/problemList.vue

<template>
    <view class="problem-list">
        <view class="problem-item" @tap="gotopage" :data-obj="item" v-for="(item, index) in list" :key="index">
            <view :class="'frequency ' + (item.amount < 10 ? 'blue' : item.amount > 10 && item.amount < 20 ? 'orange' : 'purple')">
                <view>
                    <view class="num">{{ item.amount }}</view>
                    <view class="txt">次数</view>
                </view>
            </view>

            <view class="right-con">
                <view class="right-con-txt">
                    {{ item.content }}
                </view>
                <view class="right-con-address">
                    <block v-if="tabValue === 'mobileEvent'">
                        <image src="/static/images/statistics/avatar.png" mode="widthFix" class="icon" />
                        <text class="right-con-address-txt">{{ item.mobile }}</text>
                    </block>
                    <block v-else>
                        <image src="/static/images/statistics/address.png" mode="widthFix" class="icon" />
                        <text class="right-con-address-txt">{{ item.name ? item.name : '' }} {{ item.address }}</text>
                    </block>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { dwdEventEventList } from '../../../../utils/statisticsApi';
const app = getApp();
export default {
    data() {
        return {
            tabList: {
                addressEvent: {
                    label: '同地点同类型',
                    value: 'addressEvent',
                    type: 1
                },
                addressMobileEvents: {
                    label: '同区域不同类型',
                    value: 'addressMobileEvents',
                    type: 3
                },
                mobileEvent: {
                    label: '同一人员',
                    value: 'mobileEvent',
                    type: 2
                }
            },

            pageNo: 1,
            pageSize: 20,
            type: '',
            list: [],
            total: 0,
            data: '',
            tabValue: ''
        };
    },
    onLoad(options) {
        this.setData({
            type: options.type,
            data: options.data ? JSON.parse(options.data) : ''
        });
        uni.setNavigationBarTitle({
            title: this.tabList[options.type].label
        });
        this.getList();
    },
    onReachBottom() {
        if (this.list.length < this.total) {
            this.setData({
                pageNo: this.pageNo + 1
            });
            this.getList();
        }
    },
    methods: {
        getList() {
            dwdEventEventList({
                pageNo: this.pageNo,
                pageSize: this.pageSize,
                type: this.tabList[this.type].type
            }).then((res) => {
                this.setData({
                    list: this.list.concat(res.data.list),
                    total: res.data.total
                });
            });
        },

        gotopage(e) {
            console.log(e);
            let data = e.currentTarget.dataset.obj;
            if (data.content) {
                delete data.content;
            }
            uni.navigateTo({
                url: '/subpages/statistics/pages/problem/problem?type=' + this.type + '&data=' + JSON.stringify(data)
            });
        }
    }
};
</script>
<style>
.tag-list {
    display: flex;
    margin: 0 -8rpx;
    justify-content: space-between;
    margin-bottom: 15px;
}
.tag-list .tag {
    padding: 10rpx 20rpx;
    font-size: 28rpx;
    margin: 0 8rpx;
    color: #3a80e7;
    background: #f1f6ff;
    border: 1px solid #3a80e7;
    border-radius: 1000rpx;
}
.tag-list .tag.cur {
    background: #3a80e7;
    color: #ffff;
}

.problem-list {
    padding: 30rpx;
}

.problem-item {
    background: #f7f7f7;
    border-radius: 20rpx;
    padding: 30rpx 20rpx;
    display: flex;
    align-items: flex-start;
    margin-top: 15px;
}

.frequency {
    width: 80rpx;
    flex: 0 0 80rpx;
    margin-right: 20rpx;
    border-radius: 20rpx;
    padding: 20rpx 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.frequency .num {
    font-size: 40rpx;
    font-weight: bold;
}

.frequency .txt {
    font-size: 20rpx;
    font-weight: 500;
}
.frequency.orange {
    background: #ffebe2;
    color: #fc7031;
}
.frequency.purple {
    background: #e2e2ff;
    color: #8482f7;
}
.frequency.blue {
    background: #d3edff;
    color: #4aa2e2;
}

.right-con {
    flex: 0 0 calc(100% - 100rpx);
    width: calc(100% - 100rpx);
}

.right-con .right-con-txt {
    font-size: 32rpx;
    font-weight: 500;
    color: #333333;
    line-height: 42rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 84rpx;
}
.right-con-address {
    display: flex;
    align-items: center;
    margin-right: 14rpx;
    margin-top: 30rpx;
}
.right-con-address .icon {
    width: 24rpx;
    height: 30rpx;
}

.right-con-address .right-con-address-txt {
    font-size: 28rpx;
    font-weight: 500;
    color: #999999;
    line-height: 40rpx;
}
</style>