taocan-share

+// components/reserve/share/share.js
+import util from '../../../utils/util';
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    seller_id:String,
+    hasSellerShare:{
+      type:Boolean,
+      value:false,
+    },
+    seller:{
+      type:Object,
+      value:{},
+    },
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    hasShow:false,
+    product:null,
+  },
+  attached: function () {
+    this.formatProduct()
+  },
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    show(){
+      this.setData({
+        hasShow:true,
+      })
+    },
+    hide(){
+      this.setData({
+        hasShow:false,
+      })
+    },
+    shareDo(e){
+      this.hide()
+      let act=util.attr(e,'act');
+      if(!act) return;
+      console.log('shareDo.'+act,e);
+      wx.navigateTo({
+        url:util.http_build_query({
+          id:this.data.seller_id,
+          act:act,
+          hasSellerShare:this.data.hasSellerShare
+        },'/pages/reserve/share')
+      })
+    },
+    formatProduct(){
+      let seller=this.data.seller
+      let product= {
+        item_code:seller.id+"",
+        title:seller.sellername,
+        desc:seller.slogan,
+        category_list:(seller.cate && seller.cate.length>0)?seller.cate:['餐厅','饭店','餐饮','订包间','周到安排'],
+        image_list:seller.envi_image,
+        src_mini_program_path:'/pages/reserve/detail?id='+seller.id+'&from=haowu',
+        brand_info:{
+          name:seller.sellername,
+          logo:seller.seller_image,
+          phone:seller.seller_tel,
+        },
+        sku_list:[],
+      }
+      this.setData({
+        product:product,
+      })
+    },
+  }
+})

+{
+  "component": true,
+  "usingComponents": {
+    "share-button": "plugin://haowu/share-button"
+  }
+}

+<!--components/reserve/share/share.wxml-->
+<view class="share mask" catchtap="hide" wx:if="{{hasShow}}">
+    <view class="share-body" catchtap="catchtap">
+        <view class="share-view flex-lr">
+            <button class="button-none share-item flex-vc" open-type="share" catchtap="shareDo">
+                <image class="share-img wechat"></image>
+                <view class="share-name">微信</view>
+            </button>
+            <view class="share-item flex-vc" catchtap="shareDo" data-act="qrcode">
+                <image class="share-img qrcode"></image>
+                <view class="share-name">二维码</view>
+            </view>
+        </view>
+        <view class="clean" bindtap="hide">取消</view>
+    </view>
+
+</view>

+/* components/reserve/share/share.wxss */
+@import "../../../app.wxss";
+.share-body{
+    height: 260rpx;
+    width: calc(100% - 100rpx);
+    padding: 0 50rpx;
+    position: fixed;
+    bottom: 0;
+
+    height: 390rpx;
+    background: #FFFFFF;
+    border-radius: 40rpx 40rpx 0px 0px;
+}
+.share-view{
+    margin-top: 60rpx;
+    margin-bottom: 60rpx;
+}
+.share-img{
+    width: 100rpx;
+    height: 100rpx;
+    background-size: 100% 100%;
+}
+.share-img.wechat{
+    background-image: url("http://nosqn.colorcun.com/reserve/share/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_201906251004331.png");
+}
+.share-img.quanzi{
+    background-image: url("http://nosqn.colorcun.com/reserve/share/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20190625100433.png");
+}
+.share-img.qrcode{
+    background-image: url("http://nosqn.colorcun.com/reserve/share/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_201906251004332.png");
+}
+.share-img.hwq{
+    background-image: url("http://nosqn.colorcun.com/reserve/images/hwq.png");
+}
+.share-name{
+    margin-top: 20rpx;
+    height: 40rpx;
+    font-size: 28rpx;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #353535;
+    line-height: 40rpx;
+}
+.share-item{
+    min-width: 50%;
+    width: 50%;
+}
+.clean{
+    width: 100%;
+    height: 80rpx;
+    background: #F5F5F5;
+    border-radius: 40rpx;
+
+    font-size: 34rpx;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #666666;
+    line-height: 80rpx;
+
+    text-align: center;
+
+}

@@ -56,7 +56,15 @@ Page({
    * 生命周期函数--监听页面初次渲染完成
    * 生命周期函数--监听页面初次渲染完成
    */
    */
   onReady: function () {
   onReady: function () {
-
+    if(wx.getMenuButtonBoundingClientRect){
+      let rect=wx.getMenuButtonBoundingClientRect()
+      console.log('rect',rect);
+      this.setData({
+        shareTop:rect.top,
+        shareHeight:rect.height,
+        shareLeft:rect.left-68,
+      })
+    }
   },
   },
 
 
   /**
   /**
@@ -98,7 +106,17 @@ Page({
    * 用户点击右上角分享
    * 用户点击右上角分享
    */
    */
   onShareAppMessage: function () {
   onShareAppMessage: function () {
-
+    let pack=this.data.packs[this.activityId]
+    let path=util.http_build_query({sid:pack.sid,pid:this.activityId,fromid:getApp().openid},'/pages/taocan/index')
+    let shareParams={
+      title:pack.name||'请客订包间，就上周到安排',
+      path:path,
+    }
+    if(pack.main_url){
+      shareParams.imageUrl=pack.main_url+'?imageView2/2/w/450'
+    }
+    console.log('shareParams==>',shareParams)
+    return shareParams
   },
   },
   getCurrent(id,packs){
   getCurrent(id,packs){
     let ps=Object.keys(packs)
     let ps=Object.keys(packs)
@@ -178,4 +196,7 @@ Page({
       this.createSaleIng=false
       this.createSaleIng=false
     })
     })
   },
   },
+  share(){
+    this.selectComponent('#share').show()
+  },
 })
 })

@@ -2,6 +2,7 @@
   "navigationBarBackgroundColor": "#ffffff",
   "navigationBarBackgroundColor": "#ffffff",
   "navigationBarTextStyle": "black",
   "navigationBarTextStyle": "black",
   "usingComponents": {
   "usingComponents": {
-    "nav":"/components/nav/nav"
+    "nav":"/components/nav/nav",
+    "share":"/components/2.0/taocan/share"
   }
   }
 }
 }

 <!--pages/taocan/index.wxml-->
 <!--pages/taocan/index.wxml-->
 <wxs src="../../utils/util.wxs" module="util" />
 <wxs src="../../utils/util.wxs" module="util" />
-<nav hasHome>套餐详情</nav>
+<nav hasHome>
+    <view style="top:{{shareTop}}px;height:{{shareHeight}}px;left:{{shareLeft}}px;"
+            catchtap="share"
+            class="share view flex align-center justify-center bg-white round">
+        <view class="icon view"></view>
+        <view class="text margin-left-xs">分享</view>
+    </view>
+</nav>
 <!--
 <!--
 <swiper
 <swiper
         display-multiple-items="3"
         display-multiple-items="3"
@@ -124,4 +131,5 @@
            style="width: 520rpx;height: 348rpx;"></image>
            style="width: 520rpx;height: 348rpx;"></image>
     <view class="txt-28-h margin-top-lg">该套餐过期啦</view>
     <view class="txt-28-h margin-top-lg">该套餐过期啦</view>
 </view>
 </view>
+<share id="share" seller_id="{{seller.id}}" seller="{{seller}}"></share>
 
 

@@ -99,4 +99,25 @@
     background: linear-gradient(90deg, #3BBFF5 0%, #57A0FF 100%);
     background: linear-gradient(90deg, #3BBFF5 0%, #57A0FF 100%);
     border-radius: 42rpx;
     border-radius: 42rpx;
 
 
+}
+.share{
+    position: fixed;
+    width: 63px;
+    height: 64rpx;
+    background: rgba(255, 255, 255, 0.6);
+    border-radius: 32rpx;
+    border: 1rpx solid rgba(151, 151, 151, 0.2);
+}
+.share .icon{
+    background-image: url("http://nosqn.colorcun.com/taocan/1%20%2828%29.png");
+    width: 24rpx;
+    height: 24rpx;
+}
+.share .text{
+    height: 36rpx;
+    font-size: 26rpx;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #333333;
+    line-height: 36rpx;
 }
 }