标签：playlist 点购 热门 lists 商品 api data id

热门商品

热门商品数据

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']
}

使用数据显示内容

标签：playlist,点购,热门,lists,商品,api,data,id
来源： https://www.cnblogs.com/2423551404--lx/p/16258289.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。