html jquery vue php 混合使用

{extend name="base" /}
{block name="main"}
<style>
    .product-button-prev.swiper-button-prev::after, .product-button-next.swiper-button-next::after {
        content: ''
    }
</style>
<div class="container Wauto">
    <div class="sliderbox">
        <div class="slider">
            <div id="slideBox" class="slideBox">
                <ul id="slider">
                    {ld:slide name="banner"}
                    <li class="slide">
                        <img src="{$item.image}" alt="{$item.title}"/>
                        <div class="container slide-content text-center">
                            {$item.content}
                        </div>
                    </li>
                    {/ld:slide}
                </ul>
            </div>
        </div>
    </div>
    <div class="main w1200">
        <div class="article w1" style="margin: 0">
            <div class="g-product" id="app-product">
                <div class="continer1">
                    <div class="product_content">
                        <div class="g-top wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;">
                            <h2>产品中心</h2>
                            <h4>PRODUCT CENTER</h4>
                        </div>
                        <div class="product_top wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;">
                            {ld:nav pid="144"}
                            <a href="#pro-{$item.id}" class="product {$i===1?'active':''}" @click="handleClickPro({$item.id})">{$item.name}</a>
                            {/ld:nav}
                        </div>
                        <my-swiper :key="products.length" :reach-end="handleReachEnd" :initial-slide="initialSlide">
                            <div class="swiper-slide" v-for="(product,index) in products" :key="product.id">
                                <a :href="product.url" class="product_po wow zoomIn animated" style="visibility: visible; animation-name: zoomIn;">
                                    <div class="pic">
                                        <img :src="product.image"/>
                                    </div>
                                    <p>{{product.title}}</p>
                                </a>
                            </div>
                        </my-swiper>

                        <a href="/chanpinzhongxin.html" class="welcome_but wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;">+查看更多</a>
                    </div>
                </div>
            </div>

            {include file="index/company" /}

            <div class="g-news" id="app-news">
                <div class="continer1">
                    <div class="news_content">
                        <div class="g-top wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;">
                            <h2>新闻资讯</h2>
                            <h4>NEWS INFORMATION</h4>
                        </div>
                        <div class="news_row">
                            <div class="news_left wow fadeInLeft animated" style="visibility: visible; animation-name: fadeInLeft;">
                                <my-swiper-news :key="newsList.length">
                                    <div class="swiper-slide" v-for="(news,index) in imgList" :key="news.id">
                                        <a :href="news.url" class="news_po">
                                            <div class="pic">
                                                <img :src="news.image"/>
                                            </div>
                                            <div class="news_po_min">
                                                <p>{{news.title}}</p>
                                            </div>
                                        </a>
                                    </div>
                                </my-swiper-news>
                            </div>
                            <div class="news_right wow fadeInRight animated" style="visibility: visible; animation-name: fadeInRight;">
                                <a :href="news.url" class="news_wrap_content" v-for="news in newsList" :key="news.id">
                                    <div class="news_wrap_time">
                                        <h2>{{news.show_time.slice(8,10)}}</h2>
                                        <h4>{{news.show_time.slice(0,7)}}</h4>
                                    </div>
                                    <div class="news_right_content">
                                        <h3>{{news.title}}</h3>
                                        <p>{{news.description}}<span style="color:#92D050;">[+查看详情]</span></p>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <a href="/xinwenzhongxin.html" class="welcome_but wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;">+查看更多</a>
                    </div>
                </div>
            </div>

            {include file="index/case" /}

        </div>
    </div>
</div>
<script>
    const MySwiper = {
        template: `
         <div class="product_swiper show_content">
                <div class="swiper swiper-container">
                    <div class="swiper-wrapper">
                         <slot></slot>
                    </div>
                </div>
                <div class="product-button-prev swiper-button-prev"></div>
                <div class="product-button-next swiper-button-next"></div>
        </div>

    `,
        props: {
            reachEnd: {
                type: Function,
                required: true
            },
            initialSlide: {
                type: Number,
                default: 0
            }
        },
        mounted() {
            const that = this
            new Swiper('.product_swiper .swiper-container', {
                initialSlide: that.initialSlide,
                autoplay: {
                    disableOnInteraction: false,
                    pauseOnMouseEnter: true,
                    stopOnLastSlide: true,
                    delay:1000
                },      //自动播放

                loop: false,
                slidesPerView: 1,
                spaceBetween: 5,
                navigation: {
                    nextEl: ".product-button-next",
                    prevEl: ".product-button-prev",
                },
                breakpoints: {
                    992: {
                        slidesPerView: 4,
                        spaceBetween: 40,
                    },
                    600: {
                        slidesPerView: 2,
                        spaceBetween: 20,
                    }
                },
                observer: true,      //修改swiper自己或子元素时，自动初始化swiper
                observeParents: true,
                on: {
                    reachEnd: that.reachEnd
                }
            });
        }
    }

    new Vue({
        el: '#app-product',
        components: {
            'my-swiper': MySwiper
        },
        data: {
            products: [],
            productId: 151,
            list_rows: 8,
            page: 1,
            isLastPage: false,
            loading: false,
            initialSlide: 0,
        },
        methods: {
            fetchProduct(params = {}) {
                if (this.isLastPage) {
                    return
                }
                params = {cid: this.productId, page: 1, limit: {page: this.page, list_rows: this.list_rows}, ...params}
                this.loading = true
                $http.get('/api.v1/lists', {params}).then(res => {
                    if (params.limit.page !== 1) {
                        if (params.limit.page === res.last_page) {
                            this.isLastPage = true
                        }
                        this.products = [...this.products, ...res.data]
                    } else {
                        this.products = res.data
                    }
                }).finally(() => {
                    this.loading = false
                })

            },
            handleClickPro(id) {
                this.productId = id
                this.page = 1
                this.isLastPage = false
                this.initialSlide=0
                this.fetchProduct()
            },
            handleReachEnd(e) {
                if (this.loading) return
                this.page++
                this.initialSlide = e.activeIndex
                this.fetchProduct({limit: {page: this.page, list_rows: this.list_rows}})
            }
        },
        created() {
            this.fetchProduct()
        },
    })

    const MySwiperNews = {
        template: `
         <div class="news_swiper">
            <div class="swiper swiper-container">
                <div class="swiper-wrapper">
                    <slot></slot>
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>

    `,
        mounted() {
            new Swiper('.news_swiper .swiper-container', {
                autoplay: true,      //自动播放
                // speed: 1000,
                loop: true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
                observer: true,      //修改swiper自己或子元素时，自动初始化swiper
                observeParents: true,
            });
        }
    }

    new Vue({
        el: '#app-news',
        components: {
            'my-swiper-news': MySwiperNews
        },
        data: {
            newsList: [],
            list_rows: 6,
            page: 1,
        },
        methods: {
            fetchNews(params = {}) {
                params = {mid: 2, page: 1, _order: 'show_time DESC,id DESC', limit: {page: this.page, list_rows: this.list_rows}, ...params}
                $http.get('/api.v1/lists', {params}).then(res => {
                    if (params.limit.page !== 1) {
                        this.newsList.push(...res.data)
                    } else {
                        this.newsList = res.data
                    }
                    this.newsList.forEach(item => {
                        item.description = item.description.slice(0, 40).concat('...')
                    })
                })
            },
        },
        created() {
            this.fetchNews()
        },
        computed: {
            imgList: function () {
                return this.newsList.slice(0, 4)
            }
        }
    })

    $('.product_content .product').click(function (e) {
        e.preventDefault()
        $(this).addClass('active').siblings().removeClass('active')
    })

</script>
{/block}