jzhw_uni/pages/servant/servantList/servantList.vue

<template>
    <view class="servant-list-page">
        <!-- <scroll-view scroll-y="true"  style="height:100vh;"> -->
        <view class="servant-list" style="height: 100vh">
            <view class="servant-item" :data-workerno="item.workerNo" @tap="viewMore" v-for="(item, index) in servantList" :key="index">
                <view class="servant-item-left">
                    <image :src="item.headImage" mode="aspectFill" class="servant-img"></image>
                </view>

                <view class="servant-item-right">
                    <view class="servant-top">
                        <view class="servant-name">{{ item.serverName }}</view>
                        <view class="more-info">
                            <text>点击查看更多</text>
                            <van-icon name="arrow" size="12px" />
                        </view>
                    </view>
                    <view class="servant-main">
                        <text class="servant-age">{{ item.age }}岁</text>
                        <text>{{ item.nativePlace }}</text>
                    </view>

                    <view class="skill-certificate sub-color">技能证书：{{ item.certificateName }}</view>
                    <view class="servant-skill sub-color">擅长技能：{{ item.skillNames }}</view>
                </view>
            </view>
        </view>
        <!-- </scroll-view> -->
    </view>
</template>

<script>
var util = require('../../../utils/util.js');
var api = require('../../../config/api.js');
const app = getApp();
export default {
    data() {
        return {
            scrollHeight: 0,
            page: 1,
            limit: 10,
            totalPages: 1,
            addressInfo: {},
            servantList: []
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        var addressInfo = uni.getStorageSync('addressInfo');
        if (addressInfo) {
            this.setData({
                addressInfo: addressInfo
            });
        }
        this.getServantList();
        // wx.getSystemInfo({
        //   success:res=>{
        //     this.setData({
        //       scrollHeight: res.windowHeight
        //     });
        //   }
        // });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        if (this.totalPages > this.page) {
            this.setData({
                page: this.page + 1
            });
            this.getServantList();
        } else {
            uni.showToast({
                title: '没有更多了',
                icon: 'none',
                duration: 2000
            });
            return false;
        }
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        viewMore(e) {
            console.log(e);
            let workerNo = e.currentTarget.dataset.workerno;
            uni.navigateTo({
                url: '/pages/servant/servantDetail/servantDetail?workerNo=' + workerNo
            });
        },

        getServantList: function () {
            //  this.setData({
            // 			servantList:this.data.servantList.concat(this.data.servantList),});

            util.request(api.getServantList, {
                page: this.page,
                limit: this.limit,
                shopId: this.addressInfo.shopId
            }).then((res) => {
                console.info(res);
                if (this.page == 1) {
                    this.setData({
                        servantList: res.data.dataList,
                        totalPages: res.data.pages
                    });
                } else {
                    this.setData({
                        servantList: this.servantList.concat(res.data.dataList),
                        totalPages: res.data.pages
                    });
                }
            });
        }
    }
};
</script>
<style>
.servant-list-page {
    padding: 16rpx 28rpx 0;
}
.servant-item {
    background: #fff;
    border-radius: 10rpx;
    display: flex;
    height: 256rpx;
    margin: 0 0 16rpx;
}
.servant-item-left {
    padding: 12rpx 30rpx 12rpx 14rpx;
}
.servant-img {
    width: 152rpx;
    height: 202rpx;
    border-radius: 10rpx;
    background: #cdefff;
}
.servant-item-right {
    padding: 0 0 16rpx;
    flex: 1;
}
.servant-top {
    display: flex;
    justify-content: space-between;
    height: 52rpx;
}
.servant-name {
    padding: 16rpx 0 0;
    font-size: 30rpx;
    font-weight: bold;
}
.more-info {
    width: 200rpx;
    height: 40rpx;
    background: #09afff;
    border-radius: 0 10rpx 0 10rpx;
    color: #fff;
    font-size: 24rpx;
    line-height: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}
.servant-main {
    margin: 14rpx 0 42rpx 0;
    height: 28rpx;
    line-height: 26rpx;
    font-size: 24rpx;
    display: flex;
    align-items: center;
}
.servant-age {
    padding: 0 24rpx 0 0;
    margin: 0 24rpx 0 0;
    border-right: 2rpx solid #2a2a2a;
}
.skill-certificate {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 20rpx;
    width: 480rpx;
    line-height: 30rpx;
    height: 60rpx;
}
.servant-skill {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    width: 480rpx;
    font-size: 20rpx;
    line-height: 30rpx;
}
</style>