详情页轮播图

src/common/http.api.js

@@ -14,6 +14,9 @@ const CATEGORIES_URL = "/categories"
 // 商品页列表搜索
 const GOODS_SEARCH_URL = '/goods/search'
 
+// 商品详情搜索
+const GOODS_DETAIOL_URL = '/goods/detail'
+
 // 此处第二个参数vm，就是我们在页面使用的this，你可以通过vm获取vuex等操作
 const install = (Vue, vm) => {
 
@@ -28,9 +31,11 @@ const install = (Vue, vm) => {
   // 商品页
   // 商品列表搜索
   const getGoods = (params = {}) => vm.$u.get(GOODS_SEARCH_URL, params)
+  // 商品详情
+  const getGoodsDetail = (params = {}) => vm.$u.get(GOODS_DETAIOL_URL, params)
 
   // 将各个定义的接口名称，统一放进对象挂载到vm.$u.api(因为vm就是this，也即this.$u.api)下
-  vm.$u.api = { getSwiperdata, getCatitems, getFloordata, getCategories, getGoods }
+  vm.$u.api = { getSwiperdata, getCatitems, getFloordata, getCategories, getGoods, getGoodsDetail }
 }
 
 export default {

src/pages.json

@@ -83,7 +83,7 @@
       {
 				"name": "商品详情页",
 				"path": "pages/goods_detail/goods_detail",
-				"query": "id=33"
+				"query": "goods_id=33"
 			},
 			{
 				"name": "商品列表",

src/pages/goods_detail/goods_detail.vue

@@ -1,13 +1,49 @@
 <template>
-  <view>商品详情页</view>
+  <view>
+    <!-- 1.0 轮播图模块 -->
+     <swiper class="swiper" indicator-dots indicator-active-color="#EB4450" autoplay>
+       <swiper-item v-for="item in pics" :key="item.pics_id" class="swiper_item">
+         <image class="swiper_image" :src="item.pics_big"></image>
+       </swiper-item>
+     </swiper>
+
+  </view>
 </template>
 
 <script>
 export default {
+  data(){
+    return {
+      goods_id: "",
+      pics: []
+    }
+  },
+  onLoad( {goods_id} ){
+    console.log(goods_id)
+    this.goods_id = goods_id
+    this.getGoodsDetail()
+  },
+  methods: {
+    async getGoodsDetail(){
+      const { pics } = (await this.$u.api.getGoodsDetail({ goods_id: this.goods_id })).message
+      this.pics = pics
+    }
+  },
 
 }
 </script>
 
-<style>
+<style lang="scss">
-
+.swiper {
-</style>
+  height: 500rpx;
+  .swiper_item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .swiper_image {
+    width: 500rpx;
+    height: 500rpx;
+  }
+}
+</style>	</style>