taocan-share

@@ -5,15 +5,7 @@ Component({
    * 组件的属性列表
    */
   properties: {
-    seller_id:String,
-    hasSellerShare:{
-      type:Boolean,
-      value:false,
-    },
-    seller:{
-      type:Object,
-      value:{},
-    },
+    pack:Object,
   },
 
   /**
@@ -24,7 +16,7 @@ Component({
     product:null,
   },
   attached: function () {
-    this.formatProduct()
+
   },
   /**
    * 组件的方法列表
@@ -47,30 +39,9 @@ Component({
       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,
+          sid:this.data.pack.sid,
+          pid:this.data.pack.id,
+        },'/pages/taocan/share')
       })
     },
   }

@@ -19,37 +19,8 @@ Page({
    * pid  套餐id
    */
   onLoad: function (options) {
-    this.activityId=options.pid
-    App.Foodset.GetFoodsetList({sid:options.sid}).then(res=>{
-      let packs={}
-      res.data.some(r=>{
-        r.nameSub=r.name.length>6?(r.name.substr(0,6)+'…'):r.name;
-        r['包间可用']=r.service.indexOf('包间可用')>-1;
-        r['免预约']=r.service.indexOf('免预约')>-1;
-        r['随时退']=r.service.indexOf('随时退')>-1;
-        r.sid=this.data.sid
-        packs[r.id]=r
-      })
-      while(Object.keys(packs).length<3){
-        packs[Math.random()]={}
-      }
-      try{
-        if(!packs[this.activityId]){
-          util.toast('套餐已下架','none')
-          this.activityId=res.data[0].id
-        }
-        this.setData({
-          packs:packs,
-          activityId:this.activityId,
-          current:this.getCurrent(this.activityId,packs)
-        })
-        this.getActivityDetail()
-      }catch (e){
-        this.setData({
-          hasNoSets:true,//没有任何套餐
-        });
-      }
-    })
+    this.options=options
+    this.taocanInit()
   },
 
   /**
@@ -118,6 +89,51 @@ Page({
     console.log('shareParams==>',shareParams)
     return shareParams
   },
+
+  async taocanInitScene(){
+    if(this.options.scene){
+      //解析scene追加到options
+    }
+    //fromid存在则设置推荐关系
+    if(this.options.fromid){
+
+    }
+  },
+  async taocanInit(){
+    await this.taocanInitScene();
+    let options=this.options
+    this.activityId=options.pid
+    App.Foodset.GetFoodsetList({sid:options.sid}).then(res=>{
+      let packs={}
+      res.data.some(r=>{
+        r.nameSub=r.name.length>6?(r.name.substr(0,6)+'…'):r.name;
+        r['包间可用']=r.service.indexOf('包间可用')>-1;
+        r['免预约']=r.service.indexOf('免预约')>-1;
+        r['随时退']=r.service.indexOf('随时退')>-1;
+        r.sid=this.data.sid
+        packs[r.id]=r
+      })
+      while(Object.keys(packs).length<3){
+        packs[Math.random()]={}
+      }
+      try{
+        if(!packs[this.activityId]){
+          util.toast('套餐已下架','none')
+          this.activityId=res.data[0].id
+        }
+        this.setData({
+          packs:packs,
+          activityId:this.activityId,
+          current:this.getCurrent(this.activityId,packs)
+        })
+        this.getActivityDetail()
+      }catch (e){
+        this.setData({
+          hasNoSets:true,//没有任何套餐
+        });
+      }
+    })
+  },
   getCurrent(id,packs){
     let ps=Object.keys(packs)
     let index=ps.indexOf(id)

@@ -29,7 +29,7 @@
 <block wx:if="{{!hasNoSets}}">
     <scroll-view class="view margin-left-lg header text-black"
                  scroll-x="true" bindscroll="scroll" scroll-into-view="PID{{activityId}}"
-                 style="width: 100%;white-space: nowrap;height:80rpx;padding-top: 16rpx;">
+                 style="width: 100%;white-space: nowrap;height:80rpx;">
         <block wx:for="{{packs}}" wx:key="*this">
             <view id="PID{{item.id}}"
                   bindtap="touchTab" data-id="{{item.id}}" data-index="{{index}}"
@@ -131,5 +131,5 @@
            style="width: 520rpx;height: 348rpx;"></image>
     <view class="txt-28-h margin-top-lg">该套餐过期啦</view>
 </view>
-<share id="share" seller_id="{{seller.id}}" seller="{{seller}}"></share>
+<share id="share" pack="{{packs[activityId]}}" wx:if="{{packs[activityId].id}}"></share>
 

+// pages/reserve/share.js
+import util from '../../utils/util';
+import App from '../../utils/api';
+const {regeneratorRuntime} = global
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    paletteImageSrc:'',
+    palette:null,
+    hasLoadData:true,
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    this.options=options;
+    this.setQrcode();
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+  async setQrcode(){
+    let options=this.options
+    let openid=await getApp().getOpenid()
+    this.qrcode=await util.http_build_query({
+      page:'pages/taocan/index',
+      path:'pages/taocan/index',
+      param:JSON.stringify({
+        sid:options.sid,
+        pid:options.pid,
+        fromid:openid,
+      })
+    },util.cgi('App.System.GetWxLiteCode'))
+    this.initImage()
+  },
+  initImage(){
+    let palette={
+      background: '#fff',
+      width: '400rpx',
+      height: '400rpx',
+      views: [
+        {
+          type: 'image',
+          url: this.qrcode,
+          css: {
+            mode:'scaleToFill',
+            width: '400rpx',
+            height: '400rpx',
+          },
+        }
+      ],
+    }
+    this.setData({
+      palette:palette
+    })
+  },
+  onImgOK(e){
+    console.log('onImgOK',e.detail.path)
+    wx.getImageInfo({
+      src:e.detail.path,
+      success:res=>{
+        let w=getApp().system.windowWidth
+        console.log('getImageInfo',res)
+        this.setData({
+          paletteImageWidth:w,
+          paletteImageHeight:w/res.width*res.height,
+          paletteImageSrc:e.detail.path,
+        })
+      }
+    })
+  },
+  reviewImage(){
+    wx.previewImage({
+      urls:[this.data.paletteImageSrc],
+    })
+  },
+})
\ No newline at end of file

+{
+  "navigationBarBackgroundColor": "#ffffff",
+  "navigationBarTextStyle": "black",
+  "navigationBarTitleText":"周到安排",
+  "usingComponents": {
+    "nav":"/components/nav/nav",
+    "painter":"/components/painter/painter",
+    "savefile":"/components/userinfo/savefile"
+  }
+}

+<!--pages/reserve/share.wxml-->
+<nav>{{actType=='quanzi'?'分享图':'二维码下载'}}</nav>
+<loading wx:if="{{!hasLoadData || !paletteImageSrc}}">图片生成中</loading>
+<view wx:if="{{hasLoadData}}" style="position: fixed;top:-9999rpx;">
+    <painter palette="{{palette}}" bind:imgOK="onImgOK" bind:imgErr="onImgOK"/>
+</view>
+<view wx:if="{{paletteImageSrc}}" class="pages">
+    <view class="pages-view flex-vc" wx:if="{{actType=='quanzi'}}">
+        <image src="{{paletteImageSrc}}"
+           bindtap="reviewImage"
+           style="width:{{paletteImageWidth}}px;height:{{paletteImageHeight}}px;"></image>
+    </view>
+    <view class="pages-view flex-vc" wx:else="">
+        <image src="{{paletteImageSrc}}"
+               bindtap="reviewImage"
+               style="width:400rpx;height:400rpx; margin-top: 90rpx;"></image>
+        <view class="qrcode-text">{{seller.sellername}}</view>
+    </view>
+    <view class="save flex-vc">
+        <savefile filePath="{{paletteImageSrc}}" style="width: 100%">
+            <view class="save-but flex-cc">
+                保存到相册
+            </view>
+        </savefile>
+    </view>
+</view>
+

+/* pages/reserve/share.wxss */
+page{
+    background-color: #fefefe;
+}
+.pages{
+    padding-bottom: 100rpx;
+    width: 100%;
+    padding-top: 0rpx;
+    background-size: 100% 100%;
+}
+.pages-view{
+    width: 100%;
+    margin: 0 auto;
+}
+.save{
+    position: fixed;
+    bottom: 40rpx;
+    width: calc(100% - 80rpx);
+    left:40rpx;
+}
+.save-but{
+    width: 100%;
+    height: 84rpx;
+    background: linear-gradient(90deg, #3BBFF5 0%, #57A0FF 100%);
+    border-radius: 42rpx;
+
+    font-size: 36rpx;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #FFFFFF;
+    line-height: 84rpx;
+}
+.qrcode-text{
+    font-size: 34rpx;
+    margin-top: 40rpx;
+    margin-bottom: 90rpx;
+}
\ No newline at end of file