diff --git a/App.vue b/App.vue
index e322074..2f48e54 100644
--- a/App.vue
+++ b/App.vue
@@ -4,7 +4,7 @@
 			
 		},
 		onLaunch: function() {
-			// this.login(); // 校验登录态 TODO 等待与后端对接
+			this.login(); // 校验登录态 TODO 等待与后端对接
 		},
 		onShow: function() {
 			// #ifdef MP-WEIXIN
@@ -17,6 +17,7 @@
 		methods: {
 			// 接口code换取用户信息
 			userCode(code){
+				return console.log("code", code);
 				this.$http('', { code }).then(res => {
 					console.log("获得用户信息", res);
 				})
diff --git a/common/api.js b/common/api.js
index 91c7cdc..fe04211 100644
--- a/common/api.js
+++ b/common/api.js
@@ -17,3 +17,6 @@ export const API_ORDER_DETAILS = '/api/order/detail';
 //确认订单详情
 export const API_COFIRMORDER_DETAILS = '/api/order/confirm';
 
+/* 商品详情相关 */
+export const API_GOODS_DETAIL = '/api/goods/detail'; // 商品详情
+export const API_COLLECT_DEAL = '/api/collect/deal'; // 商品收藏
\ No newline at end of file
diff --git a/pages/goodsDetail/index.vue b/pages/goodsDetail/index.vue
index 84c2060..3f699d3 100644
--- a/pages/goodsDetail/index.vue
+++ b/pages/goodsDetail/index.vue
@@ -2,31 +2,27 @@
 	<view>
 		<!-- 商品图片轮播 -->
 		<swiper :current="current" :indicator-dots="true" :circular="true" class="swiper-box">
-			<swiper-item>
-				<image src="../../static/tu.png" style="width: 100%; height: 100%;"></image>
-			</swiper-item>
-			<swiper-item>
-				<image src="../../static/tu.png" style="width: 100%; height: 100%;"></image>
+			<swiper-item v-for="item in goods_detail.banners" :key="item.id">
+				<image :src="item.cover" style="width: 100%; height: 100%;"></image>
+				<!-- <image :src="item.cover" mode="aspectFit"></image> -->
 			</swiper-item>
 		</swiper>
 		<!-- 商品主要信息 -->
 		<view class="head-info">
-			<view class="lf-font-40">网红辣椒棒 魔鬼辣椒挑战全网第一辣 网红优惠季 网红优惠季 网红优惠季 </view>
+			<view class="lf-font-40">{{ goods_detail.name }}</view>
 			<view class="lf-row-between lf-font-24 lf-m-t-30 lf-p-b-20">
 				<view class="lf-flex price">
-					<view>¥ 19.90</view>
-					<view>¥ 39.00</view>
-					<view>2.9折</view>
+					<view>¥{{ goods_detail.specs[0].selling_price }}</view>
+					<view>¥{{ goods_detail.specs[0].original_price }}</view>
+					<view>{{ goods_detail.specs[0].cost }}</view>
 				</view>
 				<view>
-					<view class="lf-color-gray">已售4.5万份</view>
-					<view class="lf-color-primary">库存仅剩98份</view>
+					<view class="lf-color-gray">{{ goods_detail.specs[0].sold_stock_text }}</view>
+					<view class="lf-color-primary">{{ goods_detail.specs[0].stock_text }}</view>
 				</view>
 			</view>
-			<view class="label-box">
-				<view class="label-item">过期退</view>
-				<view class="label-item">满减优惠</view>
-				<view class="label-item">信用付</view>
+			<view class="label-box" v-if="goods_detail.tags && goods_detail.tags.length">
+				<view class="label-item" v-for="(item, index) in goods_detail.tags" :key="index">{{ item }}</view>
 			</view>
 		</view>
 		<!-- 地址信息 -->
@@ -34,43 +30,43 @@
 			<view class="lf-font-32 lf-font-bold">适用门店</view>
 			<view class="lf-m-t-20 lf-row-between">
 				<view class="lf-flex">
-					<image class="lf-fle shop-img" src="../../static/tu.png"></image>
-					<view class="lf-font-32 lf-m-l-20" style="max-width: 512rpx;">李大叔家的店的店的店的店的店</view>
+					<image class="lf-fle shop-img" :src="goods_detail.store.cover"></image>
+					<view class="lf-font-32 lf-m-l-20" style="max-width: 512rpx;">{{ goods_detail.store.name }}</view>
 				</view>
 				<u-icon name="phone" color="#3A62FF" size="46"></u-icon>
 			</view>
 			<view class="lf-flex lf-m-t-20">
 				<u-icon name="map-fill" size="60"></u-icon>
-				<view class="lf-m-l-20 lf-font-32">南宁市青秀区 金湖广场 金浦路 地铁1号线A出口 右转200米</view>
+				<view class="lf-m-l-20 lf-font-32">{{ goods_detail.store.address }}</view>
 			</view>
 		</view>
 		<!-- 商品详情 -->
 		<view class="goods-detail">
 			<view class="lf-font-32 lf-font-bold lf-m-b-20">商品详情</view>
-			<image class="goods-img" src="../../static/tu.png"></image>
-			<image class="goods-img" src="../../static/tu.png"></image>
+			<image class="goods-img" :src="item" v-for="(item, index) in goods_detail.content" :key="index"></image>
 		</view>
 		<!-- 修饰专用 -->
 		<view class="extra"></view>
 		<!-- 吸底操作按钮 -->
 		<view class="lf-row-between fixed-bottom">
 			<view class="lf-flex lf-p-t-10 lf-p-b-10">
-				<view class="lf-flex-column lf-row-center icon-item">
+				<view class="lf-flex-column lf-row-center icon-item" @click="$url('/pages/index/index', {type: 'switch'})">
 					<u-icon name="home" size="50"></u-icon>
 					<view class="lf-m-t-1">首页</view>
 				</view>
-				<view class="lf-flex-column lf-row-center icon-item">
+				<view class="lf-flex-column lf-row-center icon-item" @click="$url('/pages/contactService/index')">
 					<u-icon name="server-fill" size="50"></u-icon>
 					<view class="lf-m-t-1">客服</view>
 				</view>
-				<view class="lf-flex-column lf-row-center icon-item">
-					<u-icon name="heart" size="50"></u-icon>
-					<view class="lf-m-t-1">收藏</view>
+				<view class="lf-flex-column lf-row-center icon-item" @click="switchCollect">
+					<u-icon name="heart-fill" size="50" color="#FF0000" v-if="is_collect"></u-icon>
+					<u-icon name="heart" size="50" v-else></u-icon>
+					<view class="lf-m-t-1">{{ is_collect ? '已收藏' : '收藏' }}</view>
 				</view>
-				<view class="lf-flex-column lf-row-center icon-item">
+				<button class="lf-flex-column lf-row-center icon-item" open-type="share">
 					<u-icon name="share" size="50"></u-icon>
 					<view class="lf-m-t-1">分享</view>
-				</view>
+				</button>
 			</view>
 			<button class="btn">立即抢购</button>
 		</view>
@@ -82,14 +78,35 @@
 		data(){
 			return {
 				current: 0, // 轮播下标
-				goods_id: 0
+				goods_id: 0,
+				goods_detail: {},
+				is_collect: 0 // 1为当前收藏商品了，0为否
 			}
 		},
 		onLoad(options){
 			this.goods_id = options.id;
+			this.getGoodsDetail();
 		},
 		methods: {
-			
+			getGoodsDetail(){
+				this.$http(this.API.API_GOODS_DETAIL, {goods_id: this.goods_id}).then(res => {
+					console.log("res", res);
+					this.goods_detail = res.data;
+					this.is_collect = Boolean(res.data.user.is_collect);
+				})
+			},
+			// 切换商品收藏
+			switchCollect(){
+				this.$http(this.API.API_COLLECT_DEAL, {goods_id: this.goods_id}).then(res => {
+					console.log("res", res);
+					this.is_collect = Boolean(res.data.user.is_collect);
+				})
+			}
+		},
+		onShareAppMessage(){
+			return {
+				title: '测试'
+			}
 		}
 	}
 </script>
@@ -169,6 +186,7 @@
 			width: 60rpx;
 			height: 60rpx;
 			border-radius: 10rpx;
+			background-color: #EEEEEE;
 		}
 	}
 	
@@ -204,8 +222,16 @@
 		padding-bottom: constant(safe-area-inset-bottom);
 		padding-bottom: env(safe-area-inset-bottom);
 		.icon-item{
-			padding: 0 10rpx;
+			padding: 0 14rpx;
 			margin-right: 16rpx;
+			background-color: transparent;
+			margin: 0;
+			line-height: initial;
+			font-size: 28rpx;
+			font-weight: inherit;
+			&:first-child{
+				padding-left: 0;
+			}
 		}
 		.btn{
 			margin: 0;