35-完成推荐商品数据渲染

获取api的数据，讲商品数据进行渲染！

<template>
    <view class='home'>
        <swiper indicator-dots circular>
            <swiper-item v-for='item in swipers' :key='item.id'>
                <image :src='item.img'></image>
            </swiper-item>
        </swiper>
        <!--导航-->
        <view class='nav'>
            <view class='nav_item'>
                <view class='iconfont icon-ziyuan'></view>
                <text>黑马超市</text>
            </view>
            <view class='nav_item'>
                <view class='iconfont icon-guanyuwomen'></view>
                <text>联系我们</text>
            </view>
            <view class='nav_item'>
                <view class='iconfont icon-tupian'></view>
                <text>社区图片</text>
            </view>
            <view class='nav_item'>
                <view class='iconfont icon-shipin'></view>
                <text>学习视频</text>
            </view>
        </view>
        <!--推荐商品-->
        <view class='hot_goods'>
            <view class='tit'>推荐商品</view>
            <view class='goods_list'>
                <view class='goods_item' v-for="item in goods" :key="item.id">
                    <image :src='item.img_url'></image>
                    <view class='price'>
                        <text>￥{{item.sell_price}}</text>
                        <text>￥{{item.market_price}}</text>
                    </view>
                    <view class="name">
                        {{item.title}}
                    </view>
                </view>
            </view>
        </view>    
    </view>
</template>
<script>
    export default {
        data() {
            return {
                swipers:[],
                goods:[]
            }
        },
        onLoad() {    //监听页面加载    
            this.getSwiper()
            this.getHotGoods()
        },
        methods: {
            //获取轮播的数据
            // async getSwiper(){
            //     console.log('获取轮播的数据')
            //     const res = await uni.request({
            //         url:'http://localhost:8082/api/getlunbo',
            //     })
            //     console.log(res.data)
            // }    
            //获取轮播数据
            async getSwiper(){
                // console.log('获取轮播的数据')
                // uni.request({
                //     url:'http://localhost:8082/api/getlunbo',
                //     success:res=>{
                //         console.log(res.data.message)
                //         if(res.data.status !== 0){
                //             return uni.showToast({
                //                 title:'获取数据失败'
                //             })
                //         }
                //         this.swipers = res.data.message
                //     }
                // })
                const res =await this.$myRequest({
                    url:'/api/getlunbo'
                })
                this.swipers = res.data.message
            },
            //获取热门商品列表数据
            async getHotGoods(){
                const res = await this.$myRequest({
                    url:'/api/getgoods?pageindex=1'
                })
                this.goods = res.data.message
                console.log(this.goods)
            }
        }
    }
</script>
<style lang="scss">
.home{
    swiper{
        width:750rpx;
        height: 380rpx;
        image{
            height:100%;
            width:100%;
        }
    }
    .nav{
        display: flex;
        .nav_item{
            width:25%;
            text-align: center;
            view{
                width: 120rpx;
                height:120rpx;
                background-color: $shop-color;
                border-radius: 60rpx;
                margin: 10px auto;
                line-height: 120rpx;
                color:#fff;
                font-size:50rpx;
            }
            .icon-tupian{
                font-size:45rpx;
            }
            text{
                font-size: 30rpx;
            }
        }
    }
    .hot_goods{
        background: #eee;
        overflow:hidden;
        margin-top: 10px;
            .tit{
                height:50px;
                line-height: 50px;
                color:$shop-color;
                text-align: center;
                letter-spacing: 20px;
                font-size: 20px;
                margin:7rpx 0;
                background: #fff;
            }
            .goods_list{
                padding:0 15rpx;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                .goods_item{
                    background: #fff;
                    width:355rpx;
                    margin:10rpx 0;
                    padding: 15rpx;
                    box-sizing: border-box;//不会撑开盒子了
                    image{
                        width:95%;
                        height:200px;
                        display:block;
                        margin:0 auto;  //上面下面实现居中
                    }
                    .price{
                        color:$shop-color;
                        font-size: 36rpx;
                        margin:5rpx 0;
                        text:nth-child(2){
                            color:#CCC;
                            font-size: 28rpx;
                            margin-left:17rpx;
                            text-decoration: line-through;
                        }
                    }
                    .name{
                        font-size:22rpx;
                        line-height:40rpx;
                    }
                }
            }
    }
}
</style>