商品列表跳转商品详情页

商品列表跳转商品详情页

商品列表界面

 1 <temple>
 2     <ul>
 3             <li v-for="i in product.slice(0,3)">
 4                 <router-link :to="`/details/${i.id}`">
 5                     <img :src="'http://47.95.13.193/myToiletries'+i.photo">
 6                 <hgroup>
 7                     <h3>{{i.name}}</h3>
 8                     <h4>{{i.info}}</h4>
 9                     <button>购买</button>
10                 </hgroup>
11                 <img src="../../assets/img/homepage_10.jpg" alt=""></router-link>
12             </li>
13         </ul>
14 </temple>
15 <script>
16     import {getProductList} from "@/api";
17 ​
18     export default {
19         name: "ProductList",
20         data() {
21             return {
22                 product: []
23             }
24         },
25         created() {
26             this.getProductData()
27         },
28         methods: {
29             async getProductData() {
30                 const res = await getProductList()
31                 this.product = res.data.data
32                 console.log(this.product)
33             },
34 ​
35         }
36 ​
37     }
38 </script>

 

商品详情页

 1  <div class="box">
 2         <h2>{{detailsList.name}}</h2>
 3         <p>{{detailsList.info}}</p>
 4         <span>￥{{detailsList.price}}</span>
 5 </div>
 6 <script>
 7     import {getDetails} from "@/api";
 8     import DetailsHeader from "@/components/header/DetailsHeader";
 9     import BottomDetails from "@/components/details-com/BottomDetails";
10 ​
11     export default {
12         data() {
13             return {
14             
15                 detailsList: [
16                     {effectList: []}
17                 ]
18             }
19         },
20         created() {
21             this.getDetailsData()
22         },
23         methods: {
24             async getDetailsData() {
25                 const res = await getDetails(this.$route.params.id)
26                 console.log(res.data)
27                 this.detailsList = res.data.data
28             }
29         }
30   }
31 </script>

 

api中index.js

1 //商品列表
2 export function getProductList(limit = 3) {
3     return axios.get(`${baseUrl}/biz/queryAllCommodity?limit=${limit}`)
4 }
5 ​
6 export function getDetails(id){
7     return axios.get(`${baseUrl}/biz/queryCommodityById?id=${id}`)
8 }
9 ​

 

 
posted @ 2022-05-13 10:36  WW&xx  阅读(84)  评论(0)  编辑  收藏  举报