material-shop-user/pages/new-tabbar/home/index.vue

<template>
    <div class="home">
        <Nav>
            <template #title>
                <p>中国·龙江</p>
                <span>全球最大的家具材料产业集群</span>
            </template>
        </Nav>
        <main>
            <div class="swiper">
                <view class="uni-margin-wrap">
                    <swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="1500" :duration="500"
                        indicator-color="#a0a0a0" indicator-active-color="#fff">
                        <swiper-item>
                            <view class="swiper-item uni-bg-red">
                                <img src="../../../static/new-images/home/swiper.png" alt="">
                            </view>
                        </swiper-item>
                        <swiper-item>
                            <img src="../../../static/new-images/home/swiper.png" alt="">
                        </swiper-item>
                        <swiper-item>
                            <img src="../../../static/new-images/home/swiper.png" alt="">
                        </swiper-item>
                    </swiper>
                </view>
            </div>
            <div class="find-container">
                <div class="find-top">
                    <div class="find-item">
                        <img src="../../../static/new-images/home/icon_1.png" alt="">
                        <p>找布匹</p>
                    </div>
                    <div class="find-item">
                        <img src="../../../static/new-images/home/icon_2.png" alt="">
                        <p>找皮革</p>
                    </div>
                    <div class="find-item">
                        <img src="../../../static/new-images/home/icon_3.png" alt="">
                        <p>找配件</p>
                    </div>
                    <div class="find-item">
                        <img src="../../../static/new-images/home/icon_4.png" alt="">
                        <p>半成品</p>
                    </div>
                </div>
                <div class="find-bottom">
                    <div class="find-item">
                        <img src="../../../static/new-images/home/icon_5.png" alt="">
                        <p>找店铺</p>
                    </div>
                    <div class="find-item">
                        <img src="../../../static/new-images/home/icon_6.png" alt="">
                        <p>发快递</p>
                    </div>
                    <div class="find-item">
                        <img src="../../../static/new-images/home/icon_7.png" alt="">
                        <p>看报价</p>
                    </div>
                    <div class="find-item">
                        <img src="../../../static/new-images/home/icon_8.png" alt="">
                        <p>找更多</p>
                    </div>
                </div>
                <div class="find-bottom"></div>
            </div>
            <div class="seek-advice">
                <p>
                    <i>最近浏览</i>
                </p>
                <div class="over">
                    <tui-roll-news :list="list" :interval="2500">
                    </tui-roll-news>
                    <!-- 人的一生要想活得幸福，走得更为长远，有一项能力必不可少，那就是感恩能力。卡耐基曾说过，感恩是极有教养的产物，你不可能从一般人身上得到，因为忘记或不会感谢乃是人的天性。 -->
                </div>
                <!-- <span>更多</span> -->
            </div>
            <div class="market">
                <div class="market-top">
                    <div class="material">
                        <p>材料</p>
                        <span>行情</span>
                    </div>
                    <div class="percentage">
                        <div class="item-box">
                            <span>皮革</span>
                            <div class="item">
                                <span>0.03%</span>
                                <p><tui-icon name="arrowup" size="12" color="#fff"></tui-icon></p>
                            </div>
                        </div>
                        <p>5.6/m</p>
                    </div>
                    <div class="deal">
                        <span>皮革成交额</span>
                        <p>55889.6元</p>
                    </div>
                </div>
                <div class="market-bottom">
                    <div class="find-left">
                        <div class="title">
                            <span>找</span>
                            <p>材料</p>
                            <div class="img-box">
                                快速响应
                            </div>
                        </div>
                        <div class="text">具材料网这里有符合 您所有的材料需求</div>
                        <p>立即发布</p>
                    </div>
                    <div class="find-right">
                        <div class="title">材料解答</div>
                        <p>这里有家具材料材料专家为您解答材料问题</p>
                        <span>发表问题</span>
                    </div>
                </div>
            </div>
            <div class="hotSales">
                <div class="title">
                    <i>热销材料</i>
                </div>
                <div class="commodity-list">
                    <div class="commodity-item" v-for="(item, index)  in productList" :key="index" @click="goDetail(item)">
                        <div class="img-box">
                            <tui-lazyload-img width="100%" height="100%" radius="20rpx" :src="item.image || ''"
                                mode="aspectFill"></tui-lazyload-img>
                        </div>
                        <div class="text-title">
                            <div class="text-left">
                                <p>工厂价</p>
                                <span>直销</span>
                            </div>
                            <p>品牌</p>
                            <p>{{ item.shopName }}</p>
                        </div>
                        <div class="detail-text">{{ item.productName }}</div>
                        <div class="identifying">
                            <span>七天无理由</span>
                            <span>官方正品</span>
                        </div>
                        <div class="price">
                            <p><span>￥</span>{{ item.originalPrice }}</p>
                            <span>优惠价￥{{ item.price }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</template>

<script>
import Nav from "../components/Nav.vue"
import { getProducts2CanvasApi } from '../../../api/anotherTFInterface'
export default {
    components: {
        Nav
    },
    created() {
        this.getSelect()
    },
    data() {
        return {
            //  滚动的数据
            //list 数据
            list: [{
                id: 1,
                title: '151*****121用户正在浏览'
            }, {
                id: 2,
                title: '191*****057用户刚刚查看了此页面'
            }, {
                id: 3,
                title: '137*****526用户刚刚搜索了布匹'
            }],
            hotSearch: {
                page: 1,
                pageSize: 10,
            },
            productList: [],
            productListTotal: null
        }
    },
    methods: {
        async getSelect() {
            // this.hotSearch.page++
            let res = await getProducts2CanvasApi(this.hotSearch);
            this.productListTotal = res.data.total
            this.productList.push(...res.data.list)
        },
        // 去到详情
        goDetail(item) {
            console.log(item);
            uni.navigateTo({
                url: `/another-tf/another-serve/goodsDetails/index?shopId=${item.shopId}&productId=${item.productId}&skuId=${item.skuId}`,
            });
        },
    },
    // 触底加载
    onReachBottom() {
        if (this.productList.length >= this.productListTotal) return
        this.hotSearch.page++
        this.getSelect()
    }
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>