Vue商城项目（篇4）商品详情页实现

详情页

步骤1：获取请求数据

    mounted(){
        // console.log(this.$route.query)
        let goods_id=this.$route.query.goods_id
        let promise1=this.axios({
            url:'/goods/detail',
            method:'GET',
            params:{
                goods_id:goods_id
            }
        })
        promise1.then((res)=>{
            // console.log(res)
            this.detailData=res.data.message
            this.detailPic=res.data.message.pics
        })
    }

步骤2：将数据渲染至页面

        <!-- 轮播区域 -->
        <div class="lunboArea">
          <el-carousel :interval="5000" arrow="always"  height="150px">
            <el-carousel-item v-for="item in detailPic" :key="item.pics_id">
                <img class="lunboPic" :src="item.pics_mid_url" />
            </el-carousel-item>
            </el-carousel>
        </div>

        <!-- 名称，收藏 -->
        <div class="goodsName clearFix">
            <div class="name">
                {{detailData.goods_name}}
                <p>￥ {{detailData.goods_price}}</p>
            </div>
            <div class="collect">
                收藏
            </div>
        </div>

步骤3：将字符串转换为HTML

 <!-- 详情介绍 -->
<div v-html="detailData.goods_introduce"></div>

底部导航

        <!-- 底部导航 -->
        <div class="footNav clearFix">
            <div class="footItem">分享</div>
            <div class="footItem" @click="goCart">购物车</div>
            <div class="footItem" @click="addCart">加入购物车</div>
        </div>

点击加入购物车，将商品信息保存至本地

       addCart(){    
            //   商品id
            let goods_id=this.$route.query.goods_id
            console.log(goods_id)
            // 从本地中获取购物车中商品
            let cart=JSON.parse(sessionStorage.getItem("cart"))||[]
            // console.log(typeof cart)
            // 判断是否含有当前商品信息
            let index=cart.findIndex((v)=>v.goods_id==goods_id)
            // console.log(index)
            // 不存在
            if(index==-1){
                this.detailData.num=1//添加num属性
                this.detailData.checked=true
                cart.push(this.detailData)
            }else{
                // 存在,num++
                console.log(cart[index])
                cart[index].num++
            }
            sessionStorage.setItem("cart",JSON.stringify(cart))
        }

点击购物车跳转购物车页面

        goCart(){
            this.$router.push('/cart')
        }