epmet-work-uni/subpages/communitySelfInsp/pages/historyQuery/historyQuery.vue

<template>
    <view>
        <view class="list_1">
            <view class="list1_1">
                <text class="test_1">{{ item.agencyName }}{{ item.monthName }}月份满意度自查</text>
                <text class="test_2">{{ item.status == 1 ? '进行中' : '已结束' }}</text>
            </view>
            <view class="list_2">
                <text class="test_3">已提交人数：{{ item.personQty }}</text>
            </view>
            <view class="list_3">
                <button style="font-weight: 30" class="button1" open-type="share" @tap="shareFun" :data-item="item"><text class="text_one">一键分享</text></button>
                <button class="button" :data-item="item" @tap="handelClickedit"><text text class="text_two">查看统计</text></button>
            </view>
        </view>
        <view class="content">
            <scroll-view class="scroll" :scroll-y="true" :lower-threshold="lowerThreshold" @scrolltolower="onScrollToLower">
                <view class="card">
                    <view :class="'list_card ' + (index == 0 ? 'bgc' : '')" :data-item="item" @tap="handelClickedit" v-for="(item, index) in tableData" :key="index">
                        <view class="left">
                            <view :class="item.status == 1 ? 'bold' : ''">{{ item.agencyName }}{{ item.monthName }}月份满意度自查</view>
                            <view class="left_bto_box">
                                <!-- <view class="{{item.status == 1?'bule':'gray'}}">{{item.status == 1?'进行中':'已结束'}}</view> -->
                                <view>测评人数：{{ item.personQty }}</view>
                            </view>
                        </view>

                        <view class="right">
                            <view v-if="item.status == 1" class="bule">
                                <image src="/static/images/share.png" mode="" />
                                <button open-type="share" @tap="shareFun" :data-item="item">分享</button>
                            </view>
                            <view v-else class="score">
                                <b>{{ item.synthesisScore }}</b>
                                分
                            </view>
                        </view>
                    </view>
                </view>
                <load-more :loadVisible="loadMoreVisible" :loadType="loadMoreType"></load-more>
                <no-data :isShow="nodata" v-if="nodata"></no-data>
            </scroll-view>
        </view>
    </view>
</template>

<script>
import loadMore from '../../../../components/loadMore/loadMore';
import noData from '../../../../components/noData/nodata';
import { getInspRecord } from '../../../../utils/api';
const app = getApp();
export default {
    components: {
        loadMore,
        noData
    },
    data() {
        return {
            title: '',
            tableData: [],
            lowerThreshold: '10',
            loadMoreVisible: false,
            loadMoreType: 'none',
            nodata: false,
            pageNo: 1,
            pageSize: 1000,
            type: '',
            statusHeight: '',
            navigationHeight: '',
            share: '',
            keyWord: '',
            url: '',
            agencyName: '',
            monthName: ''
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.setData({
            statusHeight: app.globalData.deviceInfo.statusHeight,
            navigationHeight: app.globalData.deviceInfo.navigationHeight,
            share: app.globalData.share,
            type: options.type,
            keyWord: options.keyWord
        });
        this.getTable();
        uni.loadFontFace({
            family: 'PingFangSC-regular',
            source: 'url("https://img2.misssixty.com.cn/rs/lib/fonts/PingFangSC-regular.ttf")',
            success: function () {
                console.log('Font loaded successfully');
            },
            fail: function (error) {
                console.error('Font loading failed', error);
            },
            complete: function () {
                console.log('Font loading process complete');
            }
        });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {
        return {
            title: `${this.agencyName}${this.monthName}月份满意度调查`,
            path: '/pages/webView/webView?url=' + this.questionnaireUrl,
            imageUrl: '/static/images/work/shareBg.png'
        };
    },
    methods: {
        shareFun(e) {
            console.log(e);
            this.setData({
                url: e.currentTarget.dataset.item.questionnaireUrl,
                agencyName: e.currentTarget.dataset.item.agencyName,
                monthName: e.currentTarget.dataset.item.monthName
            });
        },

        getTable() {
            this.setData({
                loadMoreVisible: true,
                nodata: false,
                loadMoreType: 'more'
            });
            let parm = {
                searchKey: this.keyWord,
                pageSize: this.pageSize,
                pageNo: this.pageNo
            };
            getInspRecord(parm)
                .then((res) => {
                    res.data.list = res.data.list.reverse();
                    this.setData({
                        loadMoreType: res.data.list.length === this.pageSize ? 'more' : 'none',
                        tableData: this.tableData.concat(res.data.list)
                    });
                    if (this.tableData.length == 0) {
                        this.setData({
                            loadMoreVisible: false,
                            nodata: true
                        });
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },

        onScrollToLower(e) {
            if (this.loadMoreType === 'more') {
                this.setData({
                    loadMoreVisible: true
                });
                this.pageNo += 1;
                this.getTable();
            }
        },

        jumpAdd() {
            if (this.type == 'resi') {
                uni.navigateTo({
                    url: '/subpages/addResi/pages/addResi/addResi'
                });
            } else {
                uni.navigateTo({
                    url: '/subpages/addhouse/pages/addhouse/addhouse'
                });
            }
        },

        handelClickedit(e) {
            console.log(e);
            // if(this.data.type == 'resi'){
            //     wx.navigateTo({
            //         url: `/subpages/addResi/pages/addResi/addResi?type=edit&resiId=${e.currentTarget.dataset.item.resiId}`,
            //     })
            // }else{
            //     wx.navigateTo({
            //         url: `/subpages/addhouse/pages/addhouse/addhouse?type=edit&houseId=${e.currentTarget.dataset.item.id}`,
            //     })
            // }
            uni.navigateTo({
                url: `/subpages/communitySelfInsp/pages/synthesis/synthesis?inspRecordId=${encodeURIComponent(e.currentTarget.dataset.item.id)}&qrCodeImgUrl=${encodeURIComponent(
                    e.currentTarget.dataset.item.qrCodeImgUrl
                )}&agencyName=${encodeURIComponent(e.currentTarget.dataset.item.agencyName)}&monthName=${encodeURIComponent(
                    e.currentTarget.dataset.item.monthName
                )}&questionnaireUrl=${encodeURIComponent(e.currentTarget.dataset.item.questionnaireUrl)}&status=${encodeURIComponent(e.currentTarget.dataset.item.status)}`
            });
            // wx.navigateTo({
            //     url: `/subpages/communitySelfInsp/pages/synthesis/synthesis?inspRecordId=${e.currentTarget.dataset.item.id}&monthName=${e.currentTarget.dataset.item.monthName}&status=${e.currentTarget.dataset.item.status}`,
            // })
        },

        back() {
            //返回上一级，关闭当前页面
            uni.navigateBack({
                delta: 1
            });
        }
    }
};
</script>
<style>
page {
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    background-color: #f0f0f0;
    font-family: 'PingFangSC-regular', sans-serif;
}
.content {
    height: auto;
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 0 20rpx;
    margin-top: 20rpx;
    box-sizing: border-box;
}
.content .scroll {
    height: calc(100vh - 450rpx);
    overflow-y: scroll;
}
.content .scroll .card {
    background-color: #fff;
    border-radius: 30rpx;
    box-sizing: border-box;
}
/* .content .card .bgc{
    /* background:linear-gradient(531deg, #cfe5f7 0%, #E8F2FF 66%, #F7F7F7 100%);
    border-radius: 20rpx 20rpx 0 0; 
} */

.content .card .list_card {
    display: flex;
    justify-content: space-around;
    padding: 20rpx;
    align-items: center;
    color: #333333;
    border-top: 1px solid #eaeaea;
}
.content .card .list_card .left {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 32rpx;
    font-family: 'PingFangSC-regular', sans-serif;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #666666;
}
.content .card .list_card .left :nth-child(1),
.content .card .list_card .left :nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.content .card .list_card .left .left_bto_box {
    display: flex;
    font-size: 28rpx;
    margin-top: 28rpx;
    align-items: center;
}
.content .card .list_card .left .left_bto_box .bule {
    color: #3a80e7;
    background-color: #d5e6fa;
    width: fit-content;
    padding: 5rpx 12rpx;
    box-sizing: border-box;
    border-radius: 6rpx;
    font-size: 26rpx;
    margin-right: 20rpx;
}
.content .card .list_card .left .left_bto_box .gray {
    color: #999999;
    background-color: #f5f5f5;
    width: fit-content;
    padding: 5rpx 12rpx;
    box-sizing: border-box;
    border-radius: 6rpx;
    font-size: 26rpx;
    margin-right: 20rpx;
}

.list_card .right .bule {
    background-color: #3a80e7;
    color: #fff;
    padding: 16rpx;
    font-size: 28rpx;
    width: fit-content;
    color: #fff;
    height: 56rpx;
    border-radius: 25rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.list_card .right .score {
    color: #999;
    font-size: 24rpx;
}
.list_card .right .score b {
    font-size: 36rpx;
    font-family: DIN Alternate;
    font-weight: bold;
    color: #ff783c;
}
.right button {
    font-size: 28rpx;
    color: #fff;
    width: fit-content;
    background-color: #3a80e7;
    padding: 0 !important;
}
.list_card .right image {
    width: 25rpx;
    height: 25rpx;
    margin-right: 10rpx;
}

.fixed_btn {
    position: fixed;
    bottom: 30rpx;
    left: 50%;
    transform: translateX(-184rpx);
}
.list_1 {
    display: flex;
    flex-direction: column;
    background-color: white;
    margin: 20rpx 15rpx 0 20rpx;
    height: 230rpx;
    border-radius: 30rpx;
    padding: 20rpx 0 0 20rpx;
}
.list1_1 {
    display: flex;
    flex-direction: row;
}
.test_1 {
    width: 392rpx;
    height: 33rpx;
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 35rpx;
    font-family: 'PingFangSC-regular', sans-serif;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 41rpx;
    margin: 20rpx 0 0 15rpx;
}
.test_2 {
    width: 68rpx;
    height: 20rpx;
    overflow-wrap: break-word;
    color: rgba(153, 153, 153, 1);
    font-size: 26rpx;
    font-family: PingFang-SC-Regular;
    font-weight: normal;
    text-align: right;
    white-space: nowrap;
    line-height: 42rpx;
    margin: 20rpx 0 0 180rpx;
}
.list_2 {
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin-top: 10rpx;
}
.test_3 {
    width: 220rpx;
    height: 26rpx;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 30rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 46rpx;
    margin: 20rpx 0 0 15rpx;
}
.list_3 {
    width: 351rpx;
    height: 56rpx;
    flex-direction: row;
    display: flex;
    align-items: center;
    justify-content: start;
    margin: 45rpx 0 0 0;
}
.button {
    background-color: rgba(57, 116, 246, 1);
    border-radius: 28rpx;
    height: 56rpx;
    display: flex;
    flex-direction: column;
    width: 160rpx;
    justify-content: center;
    align-items: center;
}
.button1 {
    width: 160rpx;
    height: 56rpx;
    border-radius: 28rpx;
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(153, 153, 153, 1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: 40rpx;
}
.text_one {
    width: 118rpx;
    height: 28rpx;
    font-family: PingFang SC;
    font-size: 28rpx;
    color: #333333;
    line-height: 42rpx;
    margin-bottom: 10rpx;
}
.text_two {
    width: 118rpx;
    height: 40rpx;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 30rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 300;
    white-space: nowrap;
    line-height: 42rpx;
    text-align: center;
}
</style>