详情页

步骤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>

步骤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)
        }