礼物分享功能开发

zhiyangdu
1 parent 5c4e5cb2
Showing 4 changed files with 46 additions and 5 deletions
src/components/giftGivingItem/giftGivingItem.less
src/components/giftGivingItem/giftGivingItem.vue
src/pages/myGiftBox/myGiftBox.less
src/pages/myGiftBox/myGiftBox.vue
@@ -141,6 +141,16 @@
                 color: #d0021b;
             }
         }
+        .btn{
+            width: 146px;
+            height: 52px;
+            line-height: 52px;
+            border-radius: 8px;
+            text-align: center;
+            font-size: 26px;
+            background: rgba(253, 241, 242, 1);
+            color: #d0021b;
+        }
     }
 }
 .noGift {
@@ -77,8 +77,8 @@
                     >
                 </div>
                 <!-- 按钮 -->
-                <div v-show="item.status == 0" class="btn_list">
-                    <div class="box">
+                <div  class="btn_list">
+                    <div v-show="item.status == 0" class="box">
                         <div
                             v-on:click.stop="onCancelPayment(item)"
                             class="btn"
@@ -89,18 +89,24 @@
                             立即支付
                         </div>
                     </div>
+                    <!-- 可分享按钮 -->
+                    <div class="btn" v-show="item.status == 1" >
+                        <div v-on:click.stop="giftToShare(item)" class="active">
+                            分享礼物
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
         <!-- 您还未送过礼物哦～-->
         <div v-else class="noGift">
-            <div v-if="isData==0" class="box">
+            <div v-if="isData == 0" class="box">
                 <img src="static/img/noGifts.png" />
                 <div class="tip">一份礼品 一份轻易</div>
                 <div class="desc">您还未送出礼物</div>
                 <div class="btn">去购买送礼</div>
             </div>
-             <div v-else class="box2">
+            <div v-else class="box2">
                 <img src="static/img/noItem.png" />
                 <div class="tip">您还没有相关订单</div>
             </div>
@@ -114,7 +120,7 @@ export default {
     data() {
         return {};
     },
-    props: ["giftGivingItem","isData"],
+    props: ["giftGivingItem", "isData"],
     created() {},
     methods: {
         // 跳转到礼物详情页
@@ -128,6 +134,10 @@ export default {
         // 取消订单
         onCancelPayment(item) {
             this.$emit("onCancelPayment", item);
+        },
+        // 分享礼物
+        giftToShare(item){
+            this.$emit("giftToShare", item);
         }
     }
 };
@@ -120,4 +120,8 @@
     .van-picker-column{
         font-size: 28px;
     }
+    .van-picker__toolbar {
+        height: 7.87vw;
+        line-height: 7.87vw;
+    }
 }
@@ -56,6 +56,7 @@
                         @onGiftGiving="onGiftGiving"
                         @onCancelPayment="onCancelPayment"
                         @jumpToPay="jumpToPay"
+                        @giftToShare="giftToShare"
                         v-show="active != 0 && active == 1"
                         :giftGivingItem="giftGivingItem"
                         :isData="this.giftGiving.isData"
@@ -740,7 +741,23 @@ export default {
                     this.$set(ext.item, "status", "1");
                 }
             }
+        },
+        /**
+         * 调用原生分享礼物
+         */
+        giftToShare(item){
+            // 判断并调用通用跳转
+            if (typeof this.$parent.toShare === "function") {
+               /**
+             * App内拉起分享
+			 * @param {int} type [分享类型]
+			 * @param {int} id [页面id]
+			 * @param {object} ext [分享扩展参数，可选参数]
+             */
+                this.$parent.toShare('8',item.id,);
+            }
         }
+        
     }
 };
 </script>