diff --git a/components/collect-btn/collect-btn.vue b/components/collect-btn/collect-btn.vue
new file mode 100644
index 0000000..69ac02c
--- /dev/null
+++ b/components/collect-btn/collect-btn.vue
@@ -0,0 +1,80 @@
+<template>
+  <view class="collect-btn justify-center" :style="customStyle" @tap="toggleCollect">
+    <image :src="isCollected ? $img1('index/sc1.png') : $img1('index/sc2.png')"></image>
+    <text>收藏</text>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'CollectBtn',
+  props: {
+    goodsId: {
+      type: [Number, String],
+      required: true
+    },
+    goodsNum: {
+      type: [Number, String],
+      required: true
+    },
+    isCollected: {
+      type: Boolean,
+      default: false
+    },
+    customStyle: {
+      type: String,
+      default: 'position: absolute; right: 0; top: 232rpx; margin-right: 48rpx;'
+    }
+  },
+  data() {
+    return {
+      collecting: false
+    }
+  },
+  methods: {
+    toggleCollect() {
+      if (this.collecting) return;
+      this.collecting = true;
+      this.req({
+        url: 'addCollect',
+        data: {
+          goods_id: this.goodsId,
+          goods_num: this.goodsNum
+        },
+        success: res => {
+          if (res.status == 1) {
+            this.$emit('collection-changed', !this.isCollected);
+          }
+        },
+        complete: () => {
+          this.collecting = false;
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.collect-btn {
+  width: 65rpx;
+  height: 95rpx;
+  box-sizing: border-box;
+  flex-direction: column;
+  
+  > image {
+    width: 64rpx;
+    height: 64rpx;
+  }
+  
+  > text {
+    width: 100%;
+    text-align: center;
+    font-weight: 400;
+    font-size: 20rpx;
+    color: #FFFFFF;
+    margin-top: 4rpx;
+    text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0;
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/pages.json b/pages.json
index 5fb6d4e..55d0260 100644
--- a/pages.json
+++ b/pages.json
@@ -1,6 +1,7 @@
 {
 	"easycom": {
-		"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
+		"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue",
+		"^collect-btn$": "@/components/collect-btn/collect-btn.vue"
 	},
 	"pages": [{
 			"path": "pages/shouye/index",
diff --git a/pages/shouye/detail.vue b/pages/shouye/detail.vue
index 791353a..3991780 100644
--- a/pages/shouye/detail.vue
+++ b/pages/shouye/detail.vue
@@ -37,16 +37,12 @@
 					<template v-if="pageData.goods.type != 5">/含明信片</template>
 				</text>
 			</view>
-
-			<view class="header-shoucang justify-center" style=" flex-direction: column; margin-right: 48rpx;"
-				@tap="toggleCollect">
-				<image :src="pageData.goods.collection_is?$img1('index/sc1.png'):$img1('index/sc2.png')"></image>
-				<text>收藏</text>
-			</view>
-
-
-
-
+			<collect-btn 
+				v-if="pageData && pageData.goods" :goods-id="pageData.goods.id" 
+				:goods-num="pageData.goods.num"
+				:is-collected="pageData.goods.collection_is"
+				@collection-changed="onCollectionChanged"
+			></collect-btn>
 		</view>
 		<view class="spylView" v-if="tabCur == 1 && pageData">
 			<view class="" style="display: flex; flex-direction: row; margin-left: 32rpx; margin-top: 56rpx;">
@@ -136,7 +132,6 @@
 
 
 		<template v-if="tabCur == 2">
-
 			<view class="" style="display: flex; flex-direction: row; margin-left: 32rpx; margin-top: 56rpx;">
 				<view class="" style="width: 160rpx; height: 92rpx;">
 					<image style="width: 160rpx; height: 92rpx;" v-if="pageData.goods.type == 5"
@@ -206,21 +201,6 @@
 			</mescroll-body>
 		</template>
 
-		<!-- <view class="fixed-btns">
-      <view class="btn" @click="doRefresh">
-        <image :src="$img('/static/img/refresh.png')" lazy-load></image>
-      </view>
-
-      <view class="btn relative">
-        <button class="hide" open-type="share"></button>
-
-        <image :src="$img('/static/img/share.png')" lazy-load></image>
-      </view>
-
-      <view class="btn" @click="toBag">
-        <image :src="$img('/static/img/bag.png')" lazy-load></image>
-      </view>
-    </view> -->
 
 		<view v-if="pageData" class="ft-fixed justify-evenly">
 			<view v-if="pageData.goods.type == 3" class="lt-btn" @click="confirmSubmit([0, 1])">
@@ -518,7 +498,6 @@
 		<view v-if="aniShow" class="ani-pop">
 			<image :src="aniSrc" lazy-load></image>
 		</view>
-
 		<rule-pop ref="rulePop"></rule-pop>
 		<coupon-pop ref="couponPop"></coupon-pop>
 	</view>
@@ -817,19 +796,8 @@
 				}
 			},
 
-			toggleCollect() {
-				this.req({
-					url: 'addCollect',
-					data: {
-						goods_id: this.pageData.goods.id,
-						goods_num: this.pageData.goods.num
-					},
-					success: res => {
-						if (res.status == 1) {
-							this.doRefresh()
-						}
-					}
-				})
+			onCollectionChanged() {
+				this.doRefresh()
 			},
 
 			toBag() {
@@ -1232,33 +1200,6 @@
 				}
 			}
 
-			&-shoucang {
-				width: 65rpx;
-				height: 95rpx;
-				position: absolute;
-				right: 0;
-				top: 232rpx;
-				box-sizing: border-box;
-				// background: url($imgurl+'/common/shoucang.png') no-repeat 0 0 / 100% 100%;
-
-				>image {
-					width: 64rpx;
-					height: 64rpx;
-					// margin-top: 22rpx;
-				}
-
-				>text {
-					width: 100%;
-					text-align: center;
-					font-weight: 400;
-					font-size: 20rpx;
-					color: #FFFFFF;
-					margin-top: 4rpx;
-					// line-height: 66rpx;
-					text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0;
-				}
-			}
-
 			&-footer {
 				width: 750rpx;
 				position: absolute;