From 1acc16c24728d22bf0cbac42234577ae70e2d47e Mon Sep 17 00:00:00 2001
From: "jqtmviyu@gmail.com" <jqtmviyu@gmail.com>
Date: Fri, 26 Feb 2021 23:22:23 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AF=A6=E6=83=85=E9=A1=B5=E8=BD=AE=E6=92=AD?=
 =?UTF-8?q?=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/http.api.js                  |  7 +++-
 src/pages.json                          |  2 +-
 src/pages/goods_detail/goods_detail.vue | 44 ++++++++++++++++++++++---
 3 files changed, 47 insertions(+), 6 deletions(-)

diff --git a/src/common/http.api.js b/src/common/http.api.js
index 4fff77e..eff1dc1 100644
--- a/src/common/http.api.js
+++ b/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 {
diff --git a/src/pages.json b/src/pages.json
index 35fdf24..9cb2acc 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -83,7 +83,7 @@
       {
 				"name": "商品详情页",
 				"path": "pages/goods_detail/goods_detail",
-				"query": "id=33"
+				"query": "goods_id=33"
 			},
 			{
 				"name": "商品列表",
diff --git a/src/pages/goods_detail/goods_detail.vue b/src/pages/goods_detail/goods_detail.vue
index aa5f40a..8983cf5 100644
--- a/src/pages/goods_detail/goods_detail.vue
+++ b/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>
\ No newline at end of file
+<style lang="scss">
+.swiper {
+  height: 500rpx;
+  .swiper_item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .swiper_image {
+    width: 500rpx;
+    height: 500rpx;
+  }
+}
+</style>	</style>
\ No newline at end of file