caimei-applets-caimei/pages/login/components/growthCommunity.vue

<template>
    <view class="growthcommunity">
        <slot name="supplier-title"></slot>
        <view class="negotiation">
            <view class="enterprise">
                <view class="title">美业企谈</view>
                <view class="container">
                    <scroll-view
                        scroll-x="true"
                        class="scroll-view"
                        @scroll="scrollVideoHandler"
                        :scroll-into-view="activeVideoMenu"
                        scroll-with-animation="true"
                    >
                        <view
                            class="video-item"
                            v-for="item in videoList"
                            :key="item.id"
                            @click="$emit('playVideo', item)"
                            :id="`item${index}`"
                        >
                            <view class="player">
                                <image src="https://static.caimei365.com/app/img/supplier-login/player.png" class="player-img"  mode=""></image>
                            </view>
                            <view class="img-item"><image :src="item.headAppBanner" mode="" class="img"></image></view>
                            <view class="videotitle">
                                <view class="text">{{ item.title }}</view>
                            </view>
                        </view>
                    </scroll-view>
                </view>
            </view>
            <view class="item-dots"><page-dots :pageAll="videoList.length" :isActive="isVideo" @hanlder-click="hanlderVideoClick" /></view>
            <view class="enterprise">
                <view class="title">采美资讯</view>
                <view class="container">
                    <scroll-view
                        scroll-x="true"
                        class="scroll-view"
                        @scroll="scrollHandler"
                        :scroll-into-view="activeMenu"
                        scroll-with-animation="true"
                    >
                        <view
                            class="video-item"
                            v-for="(item, index) in articelList"
                            :key="item.id"
                            @click="handlerTramp(item)"
                            :id="`item${index}`"
                        >
                            <view class="img-item"><image :src="item.headAppBanner" mode="" class="img"></image></view>
                            <view class="articleContent">
                                <view class="text">{{ item.title }}</view>
                                <view class="article-con">{{ item.content.match(/[\u4e00-\u9fa5]/g).join('') }}</view>
                            </view>
                        </view>
                    </scroll-view>
                </view>
            </view>
            <view class="item-dots"><page-dots :pageAll="articelList.length" :isActive="isArtical" @hanlder-click="hanlderClick" /></view>
        </view>
    </view>
</template>

<script>
import PageDots from './swiper-dots.vue'
export default {
    props: {
        videoList: {
            type: Array,
            default: () => []
        },
        articelList: {
            type: Array,
            default: () => []
        }
    },
    components: {
        PageDots
    },
    data() {
        return {
            isVideo: 0,
            isArtical: 0,
            activeMenu: 'item0',
            activeVideoMenu: 'item0'
        }
    },
    watch: {
        videoList: {
            handler(val) {
                this.community_video_list = val
            },
            deep: true
        },
        articelList: {
            handler(val) {
                this.community_article_list = val
            },
            deep: true
        }
    },
    methods: {
        handlerTramp($event) {
            const list = this.community_article_list.filter(e => e.id === $event.id)
            let data = list[0].content.replace(/<img/g, '<img style="width: 100%;height: 200px"')
            data = data.replace(/\<figure/g, '<div')
            data = data.replace(/\<\/figure/g, '<\/div')
            uni.setStorageSync('artForm', data)
            uni.navigateTo({
                url: '/pages/login/supplier_information'
            })
        },
        scrollHandler($event) {
            const data = Math.floor($event.detail.scrollLeft / 192)
             this.isArtical = data
        },
        scrollVideoHandler($event) {
            const data = Math.floor($event.detail.scrollLeft / 192)
             this.isVideo = data
        },
        // 点击导航
        hanlderClick($event) {
            this.isArtical = $event
            this.activeMenu = `item${$event}`
        },
        hanlderVideoClick($event) {
            this.isVideo = $event
            this.activeVideoMenu = `item${$event}`
        }
    }
}
</script>

<style scoped lang="scss">
.img {
    width: 100%;
    height: 100%;
}
.growthcommunity {
    padding: 1px;
    box-sizing: border-box;
    background-color: #fff;
    .negotiation {
        padding-left: 72rpx;
    }
}
.enterprise {
    position: relative;
    margin-bottom: 50rpx;
}
.title {
    color: #333333;
    font-size: 32rpx;
    margin-bottom: 34rpx;
}
.scroll-view {
    white-space: nowrap;
}
.video-item {
    width: 384rpx;
    height: 376rpx;
    background: #ffffff;
    border: 1px solid #eaeaea;
    display: inline-flex;
    margin-right: 32rpx;
    box-sizing: border-box;
    flex-direction: column;
    overflow-wrap: break-word;
    white-space: normal;
    position: relative;
    .player {
        height: calc(100% - 159rpx);
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(0, 0, 0, 0.3);
        .player-img {
            width: 60rpx;
            height: 60rpx;
        }
    }
    .img-item {
        height: calc(100% - 159rpx);
        width: 100%;
    }
    .videotitle {
        width: 100%;
        height: 159rpx;
        font-size: 28rpx;
        color: #333333;
        padding: 40rpx 40rpx;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        .text {
            width: 336rpx;
            height: 90rpx;
            overflow: hidden;
            line-height: 48rpx;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow-wrap: break-word;
            text-overflow: ellipsis;
            display: -webkit-box;
        }
    }
    .articleContent {
        .text {
            margin-top: 24rpx;
            box-sizing: border-box;
            padding-left: 24rpx;
            color: #333333;
            font-size: 32rpx;
            border-left: 2px solid #ff5b00;
        }
        .article-con {
            margin-top: 18rpx;
            width: 100%;
            height: 62rpx;
            box-sizing: border-box;
            padding: 0 24rpx;
            color: #666666;
            font-size: 24rpx;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow-wrap: break-word;
            text-overflow: ellipsis;
            display: -webkit-box;
        }
    }
}
.item-dots {
    height: 160rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: -20rpx;
}
</style>