点购热门商品

热门商品

热门商品数据

api 获取热门商品的封装接口api/index.js

//首页热门商品列表接口
// /biz/ queryAllCommodit
export function getDetail(){
  return axios.get(`${baseUrl}/biz/queryAllCommodity`)
}

commodity.vue

引入接口

import {getDetail} from '@/api/index.js'
import {reactive, onMounted} from 'vue'

添加循环v-for v-for="(item,i) in lists.datas" :key="i"

<router-link class="listItem"
            :to="{path:'/details',query:{id:item.id}}" v-for="(item,i) in lists.datas" :key="i">
   <div class="left">
       <div class="url">
           <img :src="'http://47.95.13.193/myToiletries'+item.photo" alt="">
       </div>
   </div>
   <div class="right">
       <div class="hot"><img src="../assets/img/homepage_10.jpg" alt=""></div>
       <div class="content">
           <span class="name">{{item.name}}</span><br>
           <span class="jianjie">{{item.info}}</span><br>
           <div class="buy"><span>购买</span></div>
       </div>
   </div>
</router-link>

获取接口中的data的数据然后保存获取 的商品列表

setup() {//vue3组合api
  let lists = reactive({
      datas: [],//保存获取的商品列表
  })
​
  onMounted(async () => {//view与model绑定成功之后生命周期函数
      let res = await getDetail()
      lists.datas = res.data.data.slice(0, 3)
      console.log(res.data.data)//获取接口中的data数据
  })
  return {lists}
}

点击热门商品出现商品详情

api 获取热门商品的封装接口api/index.js

//获取商品详情的api请求参数
// /biz/queryCommodityById
export function getPlaylistDetail(id){
  return axios.get(`${baseUrl}/biz/queryCommodityById?id=${id}`)
}

Details.vue中引入

import DetailsTop from "@/components/detailsTop";

获取商品详情

setup() {//vue3组合api
  const route = useRoute();//当前组件的路由信息对象
  // this.$router.query.id 没有setup时 这样获取router
  let lists = reactive({
      playlist: {}//商品详情
  })
​
  onMounted(async () => {//view与model绑定成功之后生命周期函数
      //先拿到热门商品点击时自己的id
      let id = route.query.id
      console.log("id为" + id)
      let res = await getPlaylistDetail(id)
      lists.playlist = res.data.data
      console.log("lists.playlist" + lists.playlist)
      // console.log(res)
      //进入歌单详情页面,将商品中详情列表传递到store中的playlist中去
      //commit触发store对象中mutation中函数
      store.commit('setPlaylist', lists.playlist)
​
      console.log(lists.playlist.effectList[id = id - 1].name)
  })
  return {lists}
}

拿到了商品详情的数据playlist

<detailsTop :playlist="lists.playlist"></detailsTop>

在detailTop.vue中显示 在页面上使用子组件props传参接收

export default {
  name: "detailsTop",
  //使用props传参接收
  props: ['playlist']
}

使用数据显示内容