商品详情（一）-实现列表页跳转 & 获取商品详情数据

商品详情

获取商品ID

• 通过小程序生命周期函数获取路径参数

onLoad (param) {
  // 获取路径中的参数
  this.goodsId = param.goods_id
}

实例

列表页-跳转:url="'/pages/goods_detail/main?gid=' + item.goods_id"

  <!-- 商品列表 -->
    <div class="goods-list">
      <navigator :url="'/pages/goods_detail/main?gid=' + item.goods_id" class='goods-item' :key='item.goods_id' v-for='item in list'>
        <img :src="item.goods_small_logo" mode="aspectFill"/>
        <div class="goods-right">
          <h4>
            {{item.goods_name}}
          </h4>
          <div class="price">
            <span>￥</span>{{item.goods_price}}
          </div>
        </div>
      </navigator>
    </div>

第一步：在src/pages下，新建goods_detail商品详情页文件夹

在里面新建main.js文件

import Vue from 'vue'
import App from './index'

const app = new Vue(App)
app.$mount()

第二步：新建index.vue页面模板

<template>
	<div>详情</div>
</template>
<script>
export default{
    data(){
        return{}
    }
}
</script>

第三步：在src/app.json中，添加页面路径

  "pages": [
    "pages/home/main",
    "pages/cate/main",  
    "pages/cart/main",  
    "pages/my/main",
    "pages/search/main",
    "pages/search_list/main",
    "pages/goods_detail/main"
  ],

第四步：新建文件后，npm run dev重启项目

点击列表title，实现跳转

获取商品id

<template>
	<div>{{gid}}</div>
</template>
<script>
export default{
    data(){
        return{
            gid:'',
        }
    },
    onLoad (param) {
        this.gid = param.gid
        this.loadData()
  }
}
</script>

图例：

加载商品详情数据

• 调用接口获取商品详情数据
  • 路径：goods/detail

async loadData () {
  // 根据商品的id查询详细信息
  let res = await request('goods/detail',  {
    goods_id: this.goodsId
  })
  this.info = res
}

实例：

import request from '../../utils/request.js'
export default {
  data () {
    return {
      gid: '',
        //商品详情数据
      info: {}
    }
  },
  methods: {
     async loadData () {
      // 获取商品详情数据
      let res = await request('goods/detail', {
        goods_id: this.gid
      })
      //console.log(res)
      this.info = res
    }
  },
  onLoad (param) {
    this.gid = param.gid
      //调用商品详情数据
    this.loadData()
  }
}

打印商品详情数据res