修改首页和详情页

修改首页和详情页

app.wxss

@@ -114,3 +114,17 @@ page{
   height: auto;
   object-fit: cover;
 }
+
+.icon-fenxiang {
+  position: absolute;
+  right: 20rpx;
+  margin-top: 20rpx;
+  width: 60rpx;
+  line-height: 60rpx;
+  background: rgba(0, 0, 0, 0.4);
+  border-radius: 50%;
+  text-align: center;
+  color: #fff;
+  font-size: 36rpx;
+  z-index: 1;
+}

pages/index/index.js

@@ -157,19 +157,45 @@ Page({
       limit:1
     }).then(res=>{
       if(res.data[0] && res.data[0].fast_sales_sku[0]){
+        if(res.data[0].fast_sales_sku.length > 0){
+          let price = res.data[0].fast_sales_sku[0].price
+          let data = res.data[0].fast_sales_sku[0]
+          for (let item of res.data[0].fast_sales_sku){
+              if (price > item.price) price =  item.price
+          }
+          data.price = price
+          this.setData({
+            saleProduct:data
+          })
+        }else{
           this.setData({
             saleProduct:res.data[0].fast_sales_sku[0]
           })
         }
+      }
     })
     commonApi._post("product/get_product_by_tag",{
       tag_id:17,
       offset:0,
       limit:1
     }).then(res=>{
+      if(res.data.list.length > 0){
+        let price = res.data.list[0].price
+        for(let item of res.data.list ){
+          if(item.price > price){
+            price = item.price
+          }
+        }
+        let data = res.data.list[0]
+        data.price = price
+        this.setData({
+          roadProduct:data
+        })
+      }else{
         this.setData({
-        roadProduct:res.data.list[0]
+          roadProduct:[111]
         })
+      }
     })
   },
   getFourProduct:function(){

pages/index/index.wxml

@@ -8,11 +8,12 @@
     <view class="iconfont icon-sousuo"></view>
     <view class="textOver">搜索想要的旅游产品或服务</view>
   </navigator>
-  <image bindtap="gotoPath" style="margin-left:0" data-path="/pages/user/service/index" src="https://static.ticket.sz-trip.com/xcxImages/index/top_service1.png" mode="aspectFill"></image>
+  <image bindtap="gotoPath" style="margin-left:0" data-path="/pages/user/service/index"
-  <image bindtap="gotoPath" data-path="/pages/list/message/index" src="https://static.ticket.sz-trip.com/xcxImages/index/top_msg1.png" mode="aspectFill"></image>
+    src="https://static.ticket.sz-trip.com/xcxImages/index/top_service1.png" mode="aspectFill"></image>
+  <image bindtap="gotoPath" data-path="/pages/list/message/index"
+    src="https://static.ticket.sz-trip.com/xcxImages/index/top_msg1.png" mode="aspectFill"></image>
 </view>
-<swiper class="swiper" indicator-dots="{{true}}"
+<swiper class="swiper" indicator-dots="{{true}}" autoplay="{{true}}" interval="{{5000}}" duration="{{300}}">
-  autoplay="{{true}}" interval="{{5000}}" duration="{{300}}">
   <block wx:for="{{banner}}" wx:key="*this">
     <swiper-item bindtap="bannerClick" data-item="{{item}}">
       <image src="{{item.head_img}}" mode="aspectFill"></image>
@@ -52,15 +53,18 @@
     <image src="https://static.ticket.sz-trip.com/xcxImages/index/icon6.png" mode="widthFix"></image>
     <view class="top-icon-text">场馆预约</view>
   </view>
-  <view bindtap="gotoPath" data-title="非遗专卖" data-path="/pages/list/{{isTest?'scene':'feiyi'}}/index" class="top-icon-item">
+  <view bindtap="gotoPath" data-title="非遗专卖" data-path="/pages/list/{{isTest?'scene':'feiyi'}}/index"
+    class="top-icon-item">
     <image src="https://static.ticket.sz-trip.com/xcxImages/index/icon7.png" mode="widthFix"></image>
     <view class="top-icon-text">非遗专卖</view>
   </view>
-  <view bindtap="gotoPath" data-title="剧场演出" data-path="/pages/list/{{isTest?'activity':'theatre'}}/index" class="top-icon-item">
+  <view bindtap="gotoPath" data-title="剧场演出" data-path="/pages/list/{{isTest?'activity':'theatre'}}/index"
+    class="top-icon-item">
     <image src="https://static.ticket.sz-trip.com/xcxImages/index/icon8.png" mode="widthFix"></image>
     <view class="top-icon-text">剧场演出</view>
   </view>
-  <view bindtap="gotoPath" data-title="文创特产" data-path="/pages/list/{{isTest?'road':'techan'}}/index" class="top-icon-item">
+  <view bindtap="gotoPath" data-title="文创特产" data-path="/pages/list/{{isTest?'road':'techan'}}/index"
+    class="top-icon-item">
     <image src="https://static.ticket.sz-trip.com/xcxImages/index/icon9.png" mode="widthFix"></image>
     <view class="top-icon-text">文创特产</view>
   </view>
@@ -71,38 +75,45 @@
 </view>
 <view class="content">
   <view class="sale-road-boxes">
-    <view class="sale-box" bindtap="gotoPath" data-title="特惠新品" data-path="/pages/list/{{isTest==false?'sale':'scene'}}/index" >
+    <view class="sale-box" bindtap="gotoPath" data-title="特惠新品"
+      data-path="/pages/list/{{isTest==false?'sale':'scene'}}/index">
       <view class="sale-title"><text>特惠新品</text>超值商品限时抢购</view>
       <view class="sale-product">
         <view class="sale-product-bg"></view>
-        <image mode="aspectFill" class="sale-img" src="https://static.ticket.sz-trip.com/uploads/20211022/0c90b027b5572b559b34c219eaf257ba.jpg"></image>
+        <image mode="aspectFill" class="sale-img"
-        <image class="sale-tip-img" src="https://static.ticket.sz-trip.com/xcxImages/index/sale.png" mode="aspectFill"></image>
+          src="https://static.ticket.sz-trip.com/uploads/20211022/0c90b027b5572b559b34c219eaf257ba.jpg"></image>
+        <image class="sale-tip-img" src="https://static.ticket.sz-trip.com/xcxImages/index/sale.png" mode="aspectFill">
+        </image>
         <view class="sale-info">
           <view class="sale-product-title textOver2">
             <view>限时特惠</view>
             <view>新品推荐</view>
           </view>
+          <view class="sale-price" style="#F44747" wx:if="{{saleProduct}}">￥{{saleProduct.price?saleProduct.price/100:0}}</view>
         </view>
       </view>
     </view>
     <view class="sale-box" bindtap="gotoPath" data-title="精品线路" data-path="/pages/list/road/index">
       <view class="sale-title"><text>精品线路</text>四季苏州最是江南</view>
-      <view class="sale-product" wx:if="{{roadProduct}}">
+      <view class="sale-product">
         <view class="sale-product-bg road-product-bg"></view>
-        <common-image class="sale-img" width="173rpx" height="165rpx" src="https://static.ticket.sz-trip.com/uploads/20211022/f8d9b54fa477b9ad8bf14e119664455e.jpg" mode="aspectFill"></common-image>
+        <common-image class="sale-img" width="173rpx" height="165rpx"
-        <image class="sale-tip-img" src="https://static.ticket.sz-trip.com/xcxImages/index/road.png" mode="aspectFill"></image>
+          src="https://static.ticket.sz-trip.com/uploads/20211022/f8d9b54fa477b9ad8bf14e119664455e.jpg"
+          mode="aspectFill"></common-image>
+        <image class="sale-tip-img" src="https://static.ticket.sz-trip.com/xcxImages/index/road.png" mode="aspectFill">
+        </image>
         <view class="sale-info">
           <view class="sale-product-title textOver2">
             <view>四季苏州</view>
             <view>最是江南</view>
           </view>
+          <view class="sale-price" style="color:rgb(0, 153, 137)"  wx:if="{{roadProduct}}">￥{{roadProduct.price?roadProduct.price/100:0}}</view>
         </view>
       </view>
     </view>
   </view>
   <view class="small-swiper-box">
-    <swiper class="small-swiper" indicator-dots="{{true}}"
+    <swiper class="small-swiper" indicator-dots="{{true}}" autoplay="{{true}}" interval="{{5000}}" duration="{{300}}">
-      autoplay="{{true}}" interval="{{5000}}" duration="{{300}}">
       <block wx:for="{{xiaobanner}}" wx:key="*this">
         <swiper-item bindtap="bannerClick" data-item="{{item}}">
           <image style="border-radius:77rpx" src="{{item.head_img}}" mode="aspectFill"></image>
@@ -119,16 +130,21 @@
     </swiper> -->
   </view>
   <view class="sale-road-boxes" style="margin-top:0">
-    <image mode="widthFix" style="width:267rpx" src="https://static.ticket.sz-trip.com/xcxImages/index/title5.png"></image>
+    <image mode="widthFix" style="width:267rpx" src="https://static.ticket.sz-trip.com/xcxImages/index/title5.png">
+    </image>
   </view>
   <view class="pic-list" style="margin-top:20rpx">
-    <image bindtap="gotoPath" data-title="街巷美食" data-path="/pages/list/{{isTest?'road':'food'}}/index" src="https://static.ticket.sz-trip.com/xcxImages/index/pic1.png" mode="aspectFill"></image>
+    <image bindtap="gotoPath" data-title="街巷美食" data-path="/pages/list/{{isTest?'road':'food'}}/index"
-    <image bindtap="audioGuide" src="https://static.ticket.sz-trip.com/xcxImages/index/pic2.png" mode="aspectFill"></image>
+      src="https://static.ticket.sz-trip.com/xcxImages/index/pic1.png" mode="aspectFill"></image>
-    <image bindtap="gotoPath" data-title="游记攻略" data-path="/pages/list/strategy/index" src="https://static.ticket.sz-trip.com/xcxImages/index/pic3.png" mode="aspectFill"></image>
+    <image bindtap="audioGuide" src="https://static.ticket.sz-trip.com/xcxImages/index/pic2.png" mode="aspectFill">
+    </image>
+    <image bindtap="gotoPath" data-title="游记攻略" data-path="/pages/list/strategy/index"
+      src="https://static.ticket.sz-trip.com/xcxImages/index/pic3.png" mode="aspectFill"></image>
     <image bindtap="city" src="https://static.ticket.sz-trip.com/xcxImages/index/pic4.png" mode="aspectFill"></image>
   </view>
   <view class="sale-road-boxes" style="margin-top:0;align-items:center">
-    <image mode="widthFix" style="width:267rpx" src="https://static.ticket.sz-trip.com/xcxImages/index/title2.png"></image>
+    <image mode="widthFix" style="width:267rpx" src="https://static.ticket.sz-trip.com/xcxImages/index/title2.png">
+    </image>
     <navigator url="/pages/pbService/index" class="title-more">更多<text class="iconfont icon-you"></text> </navigator>
   </view>
   <view style="overflow-x:auto">
@@ -192,7 +208,8 @@
     </view>
   </view>
   <view class="sale-road-boxes" style="margin-top:0">
-    <image mode="widthFix" style="width:267rpx" src="https://static.ticket.sz-trip.com/xcxImages/index/title7.png"></image>
+    <image mode="widthFix" style="width:267rpx" src="https://static.ticket.sz-trip.com/xcxImages/index/title7.png">
+    </image>
   </view>
   <scroll-view scroll-x style="height:360rpx" bindscroll="listenScroll" class="slide-box">
     <view class="pbservice" style="margin-bottom:30rpx">
@@ -248,24 +265,31 @@
     <view class="scroll-line-bg" style="width:{{4 / 5 * 100}}%;margin-left:{{scrollLeft}}px"></view>
   </view>
   <view class="sale-road-boxes" style="margin-top:0">
-    <image mode="widthFix" style="width:267rpx" src="https://static.ticket.sz-trip.com/xcxImages/index/title6.png"></image>
+    <image mode="widthFix" style="width:267rpx" src="https://static.ticket.sz-trip.com/xcxImages/index/title6.png">
+    </image>
   </view>
   <view class="six-box">
-    <image bindtap="gotoPath" data-title="苏城六纪" data-path="/pages/list/six/index?area={{area_ids[index]}}" wx:for="{{10}}" src="https://static.ticket.sz-trip.com/xcxImages/index/six{{index+1}}.png" mode="widthFix"></image>
+    <image bindtap="gotoPath" data-title="苏城六纪" data-path="/pages/list/six/index?area={{area_ids[index]}}"
+      wx:for="{{10}}" src="https://static.ticket.sz-trip.com/xcxImages/index/six{{index+1}}.png" mode="widthFix">
+    </image>
   </view>
   <view class="sale-road-boxes" style="margin-top:0">
-    <image mode="widthFix" style="width:267rpx" src="https://static.ticket.sz-trip.com/xcxImages/index/title4.png"></image>
+    <image mode="widthFix" style="width:267rpx" src="https://static.ticket.sz-trip.com/xcxImages/index/title4.png">
+    </image>
   </view>
   <view class="hot-list" wx:if="{{isTest==false}}">
     <view class="hot-list-item" wx:for="{{2}}" wx:for-index="number">
       <view wx:for="{{list}}" wx:if="{{index%2==number}}" bindtap="gotoDetail" data-item="{{item}}">
         <view wx:if="{{number==0 && index==0}}" class="hot-item today-hot">
-          <common-image class="today-main-img" width="100%" height="615rpx" src="{{item.ext.headimg}}" mode="aspectFill"></common-image>
+          <common-image class="today-main-img" width="100%" height="615rpx" src="{{item.ext.headimg}}"
+            mode="aspectFill"></common-image>
           <view style="position:absolute;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,0.14)"></view>
-          <image class="today-tip-img" src="https://static.ticket.sz-trip.com/xcxImages/index/today.png" mode="widthFix"></image>
+          <image class="today-tip-img" src="https://static.ticket.sz-trip.com/xcxImages/index/today.png"
+            mode="widthFix"></image>
           <view class="today-date">{{date}} {{month}}</view>
           <view class="today-hot-box">
-            <view class="today-hot-tag textOver" wx:for="{{item.ext.display_tags && ext.display_tags.length>0}}">{{item.ext.display_tags[0]}}</view>
+            <view class="today-hot-tag textOver" wx:for="{{item.ext.display_tags && ext.display_tags.length>0}}">
+              {{item.ext.display_tags[0]}}</view>
             <view class="today-hot-title">{{item.title}}</view>
           </view>
         </view>
@@ -298,7 +322,8 @@
             <view class="tags textOver">
               <view wx:for="{{item.ext.display_tags}}" class="tag textOver">{{item}}</view>
             </view>
-            <view wx:if="{{item.ext.type!='tenscenic'}}" class="hot-price"><text>￥</text><text>{{item.ext.price/100}}</text><text>起</text></view>
+            <view wx:if="{{item.ext.type!='tenscenic'}}" class="hot-price">
+              <text>￥</text><text>{{item.ext.price/100}}</text><text>起</text></view>
           </view>
         </view>
       </view>

pages/index/index.wxss

@@ -139,8 +139,6 @@
   top: 20rpx;
   bottom: 20rpx;
   width: 140rpx;
-  display: flex;
-  align-items: center;
 }
 .sale-product-title {
   font-size: 28rpx;

pages/info/activityInfo/index.js

@@ -9,7 +9,262 @@ Page({
   data: {
     id:null,
     info:null,
-    retailId:""
+    retailId:"",
+    shareImg:null,
+    showShareFlag:false
+  },
+
+   // 分享
+   share:function(){
+    if(!wx.getStorageSync("jstrip_token")){
+      commonApi.user_post("user/getMyInfo",{}).then(res=>{
+
+      })
+      return;
+    }
+    if(!this.data.shareImg){
+      wx.showToast({
+        title: '图片生成中，稍后再试',
+        icon:'none'
+      })
+      return;
+    }
+    this.setData({
+      showShareFlag:!this.data.showShareFlag
+    })
+  },
+  // 保存
+  save(){
+    let url = this.data.shareImg,that = this;
+    wx.authorize({
+      /* 这个就是保存相册的 */
+      scope: 'scope.writePhotosAlbum',
+      success() {
+        wx.saveImageToPhotosAlbum({
+          filePath:url,
+          success(res) { 
+            wx.showToast({
+              title: '保存成功',
+              icon:"success"
+            })
+            that.setData({
+              showShareFlag:!this.data.showShareFlag
+            })
+          },
+          fail(res){
+            wx.showToast({
+              title: '保存失败',
+              icon:'none'
+            })
+          }
+         })
+      },
+      complete(res) {
+          console.log(res);
+          /* 这里判断一下如果没有授权重新打开设置选项 */
+          wx.getSetting({
+              success(res) {
+                  if (!res.authSetting['scope.writePhotosAlbum']) {
+                      /* 打开设置的方法 */
+                      // opensit();
+                      wx.showToast({
+                        title: '请打开权限后再试',
+                        icon:'none'
+                      })
+                  }
+              }
+          });
+      }
+  });
+    
+  },
+  // 绘制海报
+  drawImg:function(){
+    var that = this,userinfo = wx.getStorageSync('jstrip_userInfo');
+    if(!userinfo){
+      // 去登录
+      return false;
+    }
+    const ctx = wx.createCanvasContext('imageCanvas');
+    // const device = wx.getSystemInfoSync();
+    // const ratio = device.screenWidth / 750;
+    
+    // 先获取到图片信息
+    let promise2 = new Promise(function(resolve,reject){
+      wx.getImageInfo({
+        src:that.data.info.post_url,
+        success:function(res){
+          resolve(res);
+        },
+        fail:function(res){
+          reject(res);
+        }
+      })
+    })
+    let promise3 = new Promise(function(resolve,reject){
+      let userid = wx.getStorageSync('jstrip_userid')
+      new QRCode('myQrcode',{
+        text: 'https://m.cloud.sz-trip.com/AppointmentDetail?id='+that.data.info.id+'&userId='+userid,
+        width: 500,
+        height: 500,
+        padding: 12, // 生成二维码四周自动留边宽度，不传入默认为0
+        correctLevel: QRCode.CorrectLevel.H, // 二维码可辨识度
+        callback: (res) => {
+          resolve(res);
+        }
+      })
+    })
+    //成功得到图片信息后，开始绘图
+    Promise.all([promise2,promise3]).then(imgs=>{
+      ctx.save();
+      ctx.beginPath(); //开始绘制
+      that.handleBorderRect(ctx,0,0,551 * ratio,407 * ratio,25 * ratio,'#ccc')
+      ctx.clip();//画好了圆 剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因
+      ctx.drawImage(imgs[0].path, 0, 0,551 * ratio,407 * ratio);
+      ctx.restore();
+      ctx.save();
+      that.handleBorderRect2(ctx,0,407 * ratio,551 * ratio,236*ratio,25 * ratio,'#fff')
+      ctx.restore();
+      // 绘制二维码
+      ctx.drawImage(imgs[1].path, 373 * ratio, 495 * ratio,137 * ratio, 137 * ratio);
+      // 开始文字绘制
+      ctx.setFillStyle("#000");
+      ctx.setFontSize(30 * ratio); //字大小
+      ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
+      that.drawText(ctx,that.data.info.title, 25*ratio, 450*ratio,480 * ratio,ratio);
+      // 售价
+      ctx.setFillStyle("#D62828");
+      ctx.setFontSize(40 * ratio); //字大小
+      ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
+      let price = "￥"+(that.data.info.price/100);
+      let width = ctx.measureText(price).width;
+      ctx.fillText(price, 25*ratio, 620*ratio);
+      // 副标题
+      ctx.setFillStyle("#999999");
+      ctx.setFontSize(28 * ratio); //字大小
+      ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
+      let subtitle = that.data.info.subtitle;
+      if(that.data.info.subtitle.length>10){
+        subtitle = that.data.info.subtitle.substr(0,10)+'...'
+      }
+      ctx.fillText(subtitle, 25*ratio, 540*ratio);
+      // ctx.draw();
+      // 划线价
+      ctx.setFillStyle("#999999");
+      ctx.setFontSize(32 * ratio); //字大小
+      ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
+      let market_price = "￥"+(that.data.info.market_price/100)
+      ctx.fillText(market_price, 40*ratio + width, 620*ratio);
+      let market_price_width = ctx.measureText(market_price).width;
+      // 划线
+      ctx.beginPath()
+      ctx.setLineWidth(1)
+      ctx.moveTo(40*ratio + width, 608*ratio)
+      ctx.lineTo(45*ratio + width + market_price_width, 608*ratio)
+      ctx.stroke();
+      // 长按识别二维码
+      // ctx.setFillStyle("#666");
+      // ctx.setFontSize(22 * ratio); //字大小
+      // ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
+      // ctx.fillText("长按识别二维码", 404*ratio, 710*ratio);
+      // 长按图片转发或保存
+      // ctx.setFillStyle("#000");
+      // ctx.setFontSize(24 * ratio); //字大小
+      // ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
+      // ctx.fillText("长按图片保存到本地",(592*ratio - ctx.measureText("长按图片保存到本地").width)/2, 740*ratio);
+      ctx.draw(); 
+      // 转为图片
+      setTimeout(()=>{
+        wx.canvasToTempFilePath({
+          x: 0,
+          y: 0,
+          canvasId: 'imageCanvas',
+          success: function (res) {
+            that.setData({
+              shareImg:res.tempFilePath
+            })
+          },
+          fail(err){
+            console.log('agdgjgdajhg',err)
+          }
+        })
+      },500)
+      return false;
+    }).catch(err=>{
+      console.log("this err",err)
+    })
+  },
+  // 圆角矩形
+  handleBorderRect(ctx, x, y, w, h, r, color){
+    ctx.beginPath();
+    ctx.moveTo(x+w,y+h);
+    ctx.lineTo(x,y+h)
+    // 左上角
+    ctx.arc(x + r, y + r, r, Math.PI, 1.5 * Math.PI);
+    ctx.moveTo(x + r, y);
+    ctx.lineTo(x + w - r, y);
+    ctx.lineTo(x + w, y + r);
+    // 右上角
+    ctx.arc(x + w - r, y + r, r, 1.5 * Math.PI, 2 * Math.PI);
+    ctx.lineTo(x + w, y + h );
+    ctx.lineTo(x + w - r, y + h);
+    ctx.fillStyle = color;
+    ctx.fill();
+    ctx.closePath();
+  },
+  handleBorderRect2(ctx, x, y, w, h, r, color){
+    ctx.beginPath();
+    ctx.moveTo(x,y);
+    ctx.lineTo(x+w,y)
+    // 右下角
+    ctx.arc(x + w - r, y + h - r, r, 0, 0.5 * Math.PI);
+    ctx.lineTo(x + r, y + h);
+    ctx.lineTo(x, y + h - r);
+    // 左下角
+    ctx.arc(x + r, y + h - r, r, 0.5 * Math.PI, Math.PI);
+    ctx.lineTo(x, y);
+    ctx.lineTo(x, y);
+    ctx.fillStyle = color;
+    ctx.fill();
+    ctx.closePath();
+  },
+  // 绘制两行文字
+  drawText: function(ctx, str, x, y, canvasWidth,ratio) {
+    let row = [],temp="",chr=str.split("");
+    for (var a = 0; a < chr.length; a++) {
+      if (ctx.measureText(temp).width < canvasWidth) {
+        temp += chr[a];
+      }
+      else {
+        a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比
+        row.push(temp);
+        temp = "";
+      }
+    }
+    row.push(temp);
+
+    //如果数组长度大于2 则截取前两个
+    if (row.length > 2) {
+      var rowCut = row.slice(0, 2);
+      var rowPart = rowCut[1];
+      var test = "";
+      var empty = [];
+      for (var a = 0; a < rowPart.length; a++) {
+        if (ctx.measureText(test).width < canvasWidth - 30 * ratio) {
+          test += rowPart[a];
+        }
+        else {
+          break;
+        }
+      }
+      empty.push(test);
+      var group = empty[0] + "..."//这里只显示两行，超出的用...表示
+      rowCut.splice(1, 1, group);
+      row = rowCut;
+    }
+    for (var b = 0; b < row.length; b++) {
+      ctx.fillText(row[b], x, y + b * 40 * ratio, canvasWidth);
+    }
   },
 
   /**
@@ -88,7 +343,6 @@ Page({
    * 生命周期函数--监听页面显示
    */
   onShow: function () {
-
   },
 
   /**

pages/info/activityInfo/index.wxml

@@ -1,6 +1,7 @@
 <!--pages/info/activityInfo/index.wxml-->
 <wxs src="../../../utils/filter.wxs" module="tool" />
 <title title="活动"></title>
+<!-- <view class="iconfont icon-fenxiang" bindtap="share"></view> 分享需要配置域名 -->
 <!-- <swiper class="swiper" indicator-dots="{{true}}"
   autoplay="{{true}}" interval="{{2000}}" duration="{{300}}">
   <block wx:for="{{listimgs}}" wx:key="*this">
@@ -32,7 +33,8 @@
   <view class="box-title">活动详情</view>
   <rich-text class="box-content" nodes="{{tool.formateRichText(info.intro)}}"></rich-text>
 </view>
-<navigator url="/pages/info/sceneProductInfo/index?id={{info.scene_data.id}}" wx:if="{{info && info.scene_data && info.scene_data.id}}" class="scene-box">
+<navigator url="/pages/info/sceneProductInfo/index?id={{info.scene_data.id}}"
+  wx:if="{{info && info.scene_data && info.scene_data.id}}" class="scene-box">
   <image src="{{info.scene_data.headimg}}" mode="aspectFill"></image>
   <view class="scene-info">
     <view class="scene-title textOver">{{info.scene_data.title}}</view>
@@ -46,3 +48,31 @@
   <view class="bottom-btn" bindtap="order">预约活动</view>
   <!-- <view class="bottom-btn disable" wx:else>活动已过期</view> -->
 </view>
+
+<view class="mask" wx:if="{{showShareFlag}}" style="align-items: center;">
+  <view class="mask-bg" bindtap="share"></view>
+  <view class="mask-content share-img-box">
+    <image class="share-img" src="{{shareImg}}" mode="widthFix"></image>
+    <view class="share-tips">
+      <view style="position:relative">
+        <image class="img" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/img.png" mode="widthFix">
+        </image>
+        <view>保存图片到相册</view>
+        <view class="tipimg">
+          <image src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/ok.png" mode="widthFix"></image>
+        </view>
+      </view>
+      <image style="width:36rpx" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/arrow2.png"
+        mode="widthFix"></image>
+      <view style="position:relative">
+        <image class="img" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/code.png" mode="widthFix">
+        </image>
+        <view>微信识别二维码</view>
+        <view class="tipimg">
+          <image src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/ok1.png" mode="widthFix"></image>
+        </view>
+      </view>
+    </view>
+    <view class="save-btn" bindtap="save">保存到相册</view>
+  </view>
+</view>

pages/info/activityInfo/index.wxss

@@ -4,6 +4,9 @@
   height: 330rpx;
   display: block;
 }
+.swiper{
+  position: relative;
+}
 .top-box {
   margin: 25rpx;
   margin-top: -25rpx;
@@ -144,3 +147,81 @@
   font-size: 25rpx;
   float: right;
 }
+
+
+.mask-content {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+}
+.mask-content .icon-close {
+  position: absolute;
+  right: 40rpx;
+  top: 40rpx;
+}
+
+.share-img-box {
+  /* width: 551rpx; */
+  position: static;
+  background: none;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.share-img {
+  display: block;
+  width: 551rpx;
+}
+.share-tips {
+  width: 426rpx;
+  height: 150rpx;
+  background: #FFFFFF;
+  border-radius: 25rpx;
+  margin-top: 25rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 65rpx;
+  color: #999;
+  font-size: 24rpx;
+  text-align: center;
+  line-height: 40rpx;
+}
+.share-tips .img {
+  display: block;
+  width: 55rpx;
+  margin: 0 auto;
+  margin-bottom: 4rpx;
+}
+.tipimg {
+  position: absolute;
+  left: 50%;
+  margin-left: 16rpx;
+  width: 24rpx;
+  height: 24rpx;
+  background: #D62828;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  top: 34rpx;
+}
+.tipimg image {
+  width: 21rpx;
+  display: block;
+  
+}
+.save-btn {
+  width: 403rpx;
+  line-height: 77rpx;
+  background: #D62828;
+  border-radius: 39rpx;
+  text-align: center;
+  color: #fff;
+  font-size: 31rpx;
+  font-weight: 500;
+  margin-top: 50rpx;
+}

pages/info/cardInfo/index.js

@@ -3,6 +3,7 @@ let device = wx.getSystemInfoSync();
 const ratio = device.windowWidth / 750;
 import commonApi from "../../../utils/https/common"
 import util from "../../../utils/util"
+import QRCode from '../../../utils/weapp-qrcode.js'
 let app = getApp()
 Page({
 
@@ -14,7 +15,9 @@ Page({
     type: 1,
     info: null,
     top: 0,
-    retailId:""
+    retailId: "",
+    shareImg: null,
+    showShareFlag: false
   },
 
   /**
@@ -137,6 +140,258 @@ Page({
 
   },
 
+  // 分享
+  share: function () {
+    if (!wx.getStorageSync("jstrip_token")) {
+      commonApi.user_post("user/getMyInfo", {}).then(res => {
+
+      })
+      return;
+    }
+    if (!this.data.shareImg) {
+      wx.showToast({
+        title: '图片生成中，稍后再试',
+        icon: 'none'
+      })
+      return;
+    }
+    this.setData({
+      showShareFlag: !this.data.showShareFlag
+    })
+  },
+  // 保存
+  save() {
+    let url = this.data.shareImg, that = this;
+    wx.authorize({
+      /* 这个就是保存相册的 */
+      scope: 'scope.writePhotosAlbum',
+      success() {
+        wx.saveImageToPhotosAlbum({
+          filePath: url,
+          success(res) {
+            wx.showToast({
+              title: '保存成功',
+              icon: "success"
+            })
+            that.setData({
+              showShareFlag: !this.data.showShareFlag
+            })
+          },
+          fail(res) {
+            wx.showToast({
+              title: '保存失败',
+              icon: 'none'
+            })
+          }
+        })
+      },
+      complete(res) {
+        console.log(res);
+        /* 这里判断一下如果没有授权重新打开设置选项 */
+        wx.getSetting({
+          success(res) {
+            if (!res.authSetting['scope.writePhotosAlbum']) {
+              /* 打开设置的方法 */
+              // opensit();
+              wx.showToast({
+                title: '请打开权限后再试',
+                icon: 'none'
+              })
+            }
+          }
+        });
+      }
+    });
+
+  },
+  // 绘制海报
+  drawImg: function () {
+    var that = this, userinfo = wx.getStorageSync('jstrip_userInfo');
+    if (!userinfo) {
+      // 去登录
+      return false;
+    }
+    const ctx = wx.createCanvasContext('imageCanvas');
+    // const device = wx.getSystemInfoSync();
+    // const ratio = device.screenWidth / 750;
+    // 先获取到图片信息
+    let promise2 = new Promise(function (resolve, reject) {
+      wx.getImageInfo({
+        src: that.data.info.headimg,
+        success: function (res) {
+          resolve(res);
+        },
+        fail: function (res) {
+          reject(res);
+        }
+      })
+    })
+    let promise3 = new Promise(function (resolve, reject) {
+      let userid = wx.getStorageSync('jstrip_userid')
+      new QRCode('myQrcode', {
+        text: 'https://m.cloud.sz-trip.com/ScenicDetail?id=' + that.data.info.id + '&sharedUserId=' + userid + '&channel=-1',
+        width: 500,
+        height: 500,
+        padding: 12, // 生成二维码四周自动留边宽度，不传入默认为0
+        correctLevel: QRCode.CorrectLevel.H, // 二维码可辨识度
+        callback: (res) => {
+          resolve(res);
+        }
+      })
+    })
+    //成功得到图片信息后，开始绘图
+    Promise.all([promise2, promise3]).then(imgs => {
+      ctx.save();
+      ctx.beginPath(); //开始绘制
+      that.handleBorderRect(ctx, 0, 0, 551 * ratio, 407 * ratio, 25 * ratio, '#ccc')
+      ctx.clip();//画好了圆 剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因
+      ctx.drawImage(imgs[0].path, 0, 0, 551 * ratio, 407 * ratio);
+      ctx.restore();
+      ctx.save();
+      that.handleBorderRect2(ctx, 0, 407 * ratio, 551 * ratio, 236 * ratio, 25 * ratio, '#fff')
+      ctx.restore();
+      // 绘制二维码
+      ctx.drawImage(imgs[1].path, 373 * ratio, 495 * ratio, 137 * ratio, 137 * ratio);
+      // 开始文字绘制
+      ctx.setFillStyle("#000");
+      ctx.setFontSize(30 * ratio); //字大小
+      ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
+      that.drawText(ctx, that.data.info.title, 25 * ratio, 450 * ratio, 480 * ratio, ratio);
+      // 售价
+      ctx.setFillStyle("#D62828");
+      ctx.setFontSize(40 * ratio); //字大小
+      ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
+      let price = "￥" + (that.data.info.price / 100);
+      let width = ctx.measureText(price).width;
+      ctx.fillText(price, 25 * ratio, 620 * ratio);
+      // 副标题
+      ctx.setFillStyle("#999999");
+      ctx.setFontSize(28 * ratio); //字大小
+      ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
+      let subtitle = that.data.info.display_tags[0];
+      if (subtitle.length > 10) {
+        subtitle = subtitle.substr(0, 10) + '...'
+      }
+      ctx.fillText(subtitle, 25 * ratio, 540 * ratio);
+      // ctx.draw();
+      // 划线价
+      ctx.setFillStyle("#999999");
+      ctx.setFontSize(32 * ratio); //字大小
+      ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
+      let market_price = "￥" + (Number(that.data.info.market_price) / 100)
+      ctx.fillText(market_price, 40 * ratio + width, 620 * ratio);
+      let market_price_width = ctx.measureText(market_price).width;
+      // 划线
+      ctx.beginPath()
+      ctx.setLineWidth(1)
+      ctx.moveTo(40 * ratio + width, 608 * ratio)
+      ctx.lineTo(45 * ratio + width + market_price_width, 608 * ratio)
+      ctx.stroke();
+      // 长按识别二维码
+      // ctx.setFillStyle("#666");
+      // ctx.setFontSize(22 * ratio); //字大小
+      // ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
+      // ctx.fillText("长按识别二维码", 404*ratio, 710*ratio);
+      // 长按图片转发或保存
+      // ctx.setFillStyle("#000");
+      // ctx.setFontSize(24 * ratio); //字大小
+      // ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
+      // ctx.fillText("长按图片保存到本地",(592*ratio - ctx.measureText("长按图片保存到本地").width)/2, 740*ratio);
+      ctx.draw();
+      // 转为图片
+      setTimeout(() => {
+        wx.canvasToTempFilePath({
+          x: 0,
+          y: 0,
+          canvasId: 'imageCanvas',
+          success: function (res) {
+            that.setData({
+              shareImg: res.tempFilePath
+            })
+          },
+          fail(err) {
+            console.log('agdgjgdajhg', err)
+          }
+        })
+      }, 500)
+      return false;
+    }).catch(err => {
+      console.log("this err", err)
+    })
+  },
+  // 圆角矩形
+  handleBorderRect(ctx, x, y, w, h, r, color) {
+    ctx.beginPath();
+    ctx.moveTo(x + w, y + h);
+    ctx.lineTo(x, y + h)
+    // 左上角
+    ctx.arc(x + r, y + r, r, Math.PI, 1.5 * Math.PI);
+    ctx.moveTo(x + r, y);
+    ctx.lineTo(x + w - r, y);
+    ctx.lineTo(x + w, y + r);
+    // 右上角
+    ctx.arc(x + w - r, y + r, r, 1.5 * Math.PI, 2 * Math.PI);
+    ctx.lineTo(x + w, y + h);
+    ctx.lineTo(x + w - r, y + h);
+    ctx.fillStyle = color;
+    ctx.fill();
+    ctx.closePath();
+  },
+  handleBorderRect2(ctx, x, y, w, h, r, color) {
+    ctx.beginPath();
+    ctx.moveTo(x, y);
+    ctx.lineTo(x + w, y)
+    // 右下角
+    ctx.arc(x + w - r, y + h - r, r, 0, 0.5 * Math.PI);
+    ctx.lineTo(x + r, y + h);
+    ctx.lineTo(x, y + h - r);
+    // 左下角
+    ctx.arc(x + r, y + h - r, r, 0.5 * Math.PI, Math.PI);
+    ctx.lineTo(x, y);
+    ctx.lineTo(x, y);
+    ctx.fillStyle = color;
+    ctx.fill();
+    ctx.closePath();
+  },
+  // 绘制两行文字
+  drawText: function (ctx, str, x, y, canvasWidth, ratio) {
+    let row = [], temp = "", chr = str.split("");
+    for (var a = 0; a < chr.length; a++) {
+      if (ctx.measureText(temp).width < canvasWidth) {
+        temp += chr[a];
+      }
+      else {
+        a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比
+        row.push(temp);
+        temp = "";
+      }
+    }
+    row.push(temp);
+
+    //如果数组长度大于2 则截取前两个
+    if (row.length > 2) {
+      var rowCut = row.slice(0, 2);
+      var rowPart = rowCut[1];
+      var test = "";
+      var empty = [];
+      for (var a = 0; a < rowPart.length; a++) {
+        if (ctx.measureText(test).width < canvasWidth - 30 * ratio) {
+          test += rowPart[a];
+        }
+        else {
+          break;
+        }
+      }
+      empty.push(test);
+      var group = empty[0] + "..."//这里只显示两行，超出的用...表示
+      rowCut.splice(1, 1, group);
+      row = rowCut;
+    }
+    for (var b = 0; b < row.length; b++) {
+      ctx.fillText(row[b], x, y + b * 40 * ratio, canvasWidth);
+    }
+  },
+
   /**
    * 生命周期函数--监听页面初次渲染完成
    */
@@ -167,7 +422,17 @@ Page({
    * 生命周期函数--监听页面显示
    */
   onShow: function () {
-
+    if (!wx.getStorageSync('jstrip_token')) {
+      return;
+    }
+    if (this.data.info && this.data.info.id) {
+      this.drawImg()
+    }
+    else {
+      setTimeout(() => {
+        this.onShow()
+      }, 200)
+    }
   },
 
   /**

pages/info/cardInfo/index.wxml

@@ -1,6 +1,7 @@
 <!--pages/info/hotelProductInfo/index.wxml-->
 <wxs src="../../../utils/filter.wxs" module="tool" />
 <title title="产品详情"></title>
+<!-- <view class="iconfont icon-fenxiang" bindtap="share"></view> 需要配置域名-->
 <swiper class="swiper" indicator-dots="{{true}}" wx:if="{{info}}"
   autoplay="{{true}}" interval="{{2000}}" duration="{{300}}">
   <block wx:for="{{info.listimg}}" wx:key="*this">
@@ -52,3 +53,28 @@
   </view>
   <view bindtap="order" class="btn">立即预订</view>
 </view>
+<view style="position:absolute;right:0;left:-10000rpx;top:-200rpx;">
+  <canvas canvas-id='imageCanvas' class='imageCanvas' style="width:551rpx;height:643rpx;" disable-scroll='true'>
+  </canvas>
+  <canvas class="canvasCode" style="opacity:0;width:500px;height:500px" canvas-id="myQrcode"></canvas>
+</view>
+<view class="mask" wx:if="{{showShareFlag}}" style="align-items: center;">
+  <view class="mask-bg" bindtap="share"></view>
+  <view class="mask-content share-img-box">
+    <image class="share-img" src="{{shareImg}}" mode="widthFix"></image>
+    <view class="share-tips">
+      <view style="position:relative">
+        <image class="img" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/img.png" mode="widthFix"></image>
+        <view>保存图片到相册</view>
+        <view class="tipimg"><image src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/ok.png" mode="widthFix"></image></view>
+      </view>
+      <image style="width:36rpx" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/arrow2.png" mode="widthFix"></image>
+      <view style="position:relative">
+        <image class="img" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/code.png" mode="widthFix"></image>
+        <view>微信识别二维码</view>
+        <view class="tipimg"><image src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/ok1.png" mode="widthFix"></image></view>
+      </view>
+    </view>
+    <view class="save-btn" bindtap="save">保存到相册</view>
+  </view>
+</view>

pages/info/cardInfo/index.wxss

@@ -366,3 +366,80 @@ page {
   border-radius: 39rpx;
   text-align: center;
 }
+
+.mask-content {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+}
+.mask-content .icon-close {
+  position: absolute;
+  right: 40rpx;
+  top: 40rpx;
+}
+
+.share-img-box {
+  /* width: 551rpx; */
+  position: static;
+  background: none;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.share-img {
+  display: block;
+  width: 551rpx;
+}
+.share-tips {
+  width: 426rpx;
+  height: 150rpx;
+  background: #FFFFFF;
+  border-radius: 25rpx;
+  margin-top: 25rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 65rpx;
+  color: #999;
+  font-size: 24rpx;
+  text-align: center;
+  line-height: 40rpx;
+}
+.share-tips .img {
+  display: block;
+  width: 55rpx;
+  margin: 0 auto;
+  margin-bottom: 4rpx;
+}
+.tipimg {
+  position: absolute;
+  left: 50%;
+  margin-left: 16rpx;
+  width: 24rpx;
+  height: 24rpx;
+  background: #D62828;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  top: 34rpx;
+}
+.tipimg image {
+  width: 21rpx;
+  display: block;
+  
+}
+.save-btn {
+  width: 403rpx;
+  line-height: 77rpx;
+  background: #D62828;
+  border-radius: 39rpx;
+  text-align: center;
+  color: #fff;
+  font-size: 31rpx;
+  font-weight: 500;
+  margin-top: 50rpx;
+}

pages/info/hotelProductInfo/index.js

@@ -1,6 +1,9 @@
 // pages/info/hotelProductInfo/index.js
 import util from "../../../utils/util"
 import commonApi from "../../../utils/https/common"
+let device = wx.getSystemInfoSync();
+const ratio = device.windowWidth / 750;
+import QRCode from '../../../utils/weapp-qrcode.js'
 let app = getApp()
 Page({
 
@@ -32,7 +35,9 @@ Page({
     activeSkuIndex: -1,
     skuList: [],
     roomInfo: null,
-    retailId:""
+    retailId: "",
+    shareImg: null,
+    showShareFlag: false
   },
 
   /**
@@ -312,6 +317,259 @@ Page({
     })
   },
 
+
+  // 分享
+  share: function () {
+    if (!wx.getStorageSync("jstrip_token")) {
+      commonApi.user_post("user/getMyInfo", {}).then(res => {
+
+      })
+      return;
+    }
+    if (!this.data.shareImg) {
+      wx.showToast({
+        title: '图片生成中，稍后再试',
+        icon: 'none'
+      })
+      return;
+    }
+    this.setData({
+      showShareFlag: !this.data.showShareFlag
+    })
+  },
+  // 保存
+  save() {
+    let url = this.data.shareImg, that = this;
+    wx.authorize({
+      /* 这个就是保存相册的 */
+      scope: 'scope.writePhotosAlbum',
+      success() {
+        wx.saveImageToPhotosAlbum({
+          filePath: url,
+          success(res) {
+            wx.showToast({
+              title: '保存成功',
+              icon: "success"
+            })
+            that.setData({
+              showShareFlag: !this.data.showShareFlag
+            })
+          },
+          fail(res) {
+            wx.showToast({
+              title: '保存失败',
+              icon: 'none'
+            })
+          }
+        })
+      },
+      complete(res) {
+        console.log(res);
+        /* 这里判断一下如果没有授权重新打开设置选项 */
+        wx.getSetting({
+          success(res) {
+            if (!res.authSetting['scope.writePhotosAlbum']) {
+              /* 打开设置的方法 */
+              // opensit();
+              wx.showToast({
+                title: '请打开权限后再试',
+                icon: 'none'
+              })
+            }
+          }
+        });
+      }
+    });
+
+  },
+  // 绘制海报
+  drawImg: function () {
+    var that = this, userinfo = wx.getStorageSync('jstrip_userInfo');
+    if (!userinfo) {
+      // 去登录
+      return false;
+    }
+    const ctx = wx.createCanvasContext('imageCanvas');
+    // const device = wx.getSystemInfoSync();
+    // const ratio = device.screenWidth / 750;
+    // 先获取到图片信息
+    let promise2 = new Promise(function (resolve, reject) {
+      wx.getImageInfo({
+        src: that.data.sceneInfo.headimg,
+        success: function (res) {
+          resolve(res);
+        },
+        fail: function (res) {
+          reject(res);
+        }
+      })
+    })
+    let promise3 = new Promise(function (resolve, reject) {
+      let userid = wx.getStorageSync('jstrip_userid')
+      new QRCode('myQrcode', {
+        text: 'https://m.cloud.sz-trip.com/ScenicDetail?id=' + that.data.sceneInfo.id + '&sharedUserId=' + userid + '&channel=-1',
+        width: 500,
+        height: 500,
+        padding: 12, // 生成二维码四周自动留边宽度，不传入默认为0
+        correctLevel: QRCode.CorrectLevel.H, // 二维码可辨识度
+        callback: (res) => {
+          resolve(res);
+        }
+      })
+    })
+    //成功得到图片信息后，开始绘图
+    Promise.all([promise2, promise3]).then(imgs => {
+      ctx.save();
+      ctx.beginPath(); //开始绘制
+      that.handleBorderRect(ctx, 0, 0, 551 * ratio, 407 * ratio, 25 * ratio, '#ccc')
+      ctx.clip();//画好了圆 剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因
+      ctx.drawImage(imgs[0].path, 0, 0, 551 * ratio, 407 * ratio);
+      ctx.restore();
+      ctx.save();
+      that.handleBorderRect2(ctx, 0, 407 * ratio, 551 * ratio, 236 * ratio, 25 * ratio, '#fff')
+      ctx.restore();
+      // 绘制二维码
+      ctx.drawImage(imgs[1].path, 373 * ratio, 495 * ratio, 137 * ratio, 137 * ratio);
+      // 开始文字绘制
+      ctx.setFillStyle("#000");
+      ctx.setFontSize(30 * ratio); //字大小
+      ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
+      that.drawText(ctx, that.data.sceneInfo.title, 25 * ratio, 450 * ratio, 480 * ratio, ratio);
+      // 售价
+      ctx.setFillStyle("#D62828");
+      ctx.setFontSize(40 * ratio); //字大小
+      ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
+      let price = "￥" + (that.data.sceneInfo.price / 100);
+      let width = ctx.measureText(price).width;
+      ctx.fillText(price, 25 * ratio, 620 * ratio);
+      // 副标题
+      ctx.setFillStyle("#999999");
+      ctx.setFontSize(28 * ratio); //字大小
+      ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
+      let subtitle = that.data.sceneInfo.display_tags[0];
+      if (subtitle.length > 10) {
+        subtitle = subtitle.substr(0, 10) + '...'
+      }
+      ctx.fillText(subtitle, 25 * ratio, 540 * ratio);
+      // ctx.draw();
+      // 划线价
+      // ctx.setFillStyle("#999999");
+      // ctx.setFontSize(32 * ratio); //字大小
+      // ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
+      // let market_price = "￥"+(Number(that.data.sceneInfo.market_price)/100)
+      // ctx.fillText(market_price, 40*ratio + width, 620*ratio);
+      // let market_price_width = ctx.measureText(market_price).width;
+      // 划线
+      // ctx.beginPath()
+      // ctx.setLineWidth(1)
+      // ctx.moveTo(40*ratio + width, 608*ratio)
+      // ctx.lineTo(45*ratio + width, 608*ratio)
+      // ctx.stroke();
+      // 长按识别二维码
+      // ctx.setFillStyle("#666");
+      // ctx.setFontSize(22 * ratio); //字大小
+      // ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
+      // ctx.fillText("长按识别二维码", 404*ratio, 710*ratio);
+      // 长按图片转发或保存
+      // ctx.setFillStyle("#000");
+      // ctx.setFontSize(24 * ratio); //字大小
+      // ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
+      // ctx.fillText("长按图片保存到本地",(592*ratio - ctx.measureText("长按图片保存到本地").width)/2, 740*ratio);
+      ctx.draw();
+      // 转为图片
+      setTimeout(() => {
+        wx.canvasToTempFilePath({
+          x: 0,
+          y: 0,
+          canvasId: 'imageCanvas',
+          success: function (res) {
+            that.setData({
+              shareImg: res.tempFilePath
+            })
+          },
+          fail(err) {
+            console.log('agdgjgdajhg', err)
+          }
+        })
+      }, 500)
+      return false;
+    }).catch(err => {
+      console.log("this err", err)
+    })
+  },
+  // 圆角矩形
+  handleBorderRect(ctx, x, y, w, h, r, color) {
+    ctx.beginPath();
+    ctx.moveTo(x + w, y + h);
+    ctx.lineTo(x, y + h)
+    // 左上角
+    ctx.arc(x + r, y + r, r, Math.PI, 1.5 * Math.PI);
+    ctx.moveTo(x + r, y);
+    ctx.lineTo(x + w - r, y);
+    ctx.lineTo(x + w, y + r);
+    // 右上角
+    ctx.arc(x + w - r, y + r, r, 1.5 * Math.PI, 2 * Math.PI);
+    ctx.lineTo(x + w, y + h);
+    ctx.lineTo(x + w - r, y + h);
+    ctx.fillStyle = color;
+    ctx.fill();
+    ctx.closePath();
+  },
+  handleBorderRect2(ctx, x, y, w, h, r, color) {
+    ctx.beginPath();
+    ctx.moveTo(x, y);
+    ctx.lineTo(x + w, y)
+    // 右下角
+    ctx.arc(x + w - r, y + h - r, r, 0, 0.5 * Math.PI);
+    ctx.lineTo(x + r, y + h);
+    ctx.lineTo(x, y + h - r);
+    // 左下角
+    ctx.arc(x + r, y + h - r, r, 0.5 * Math.PI, Math.PI);
+    ctx.lineTo(x, y);
+    ctx.lineTo(x, y);
+    ctx.fillStyle = color;
+    ctx.fill();
+    ctx.closePath();
+  },
+  // 绘制两行文字
+  drawText: function (ctx, str, x, y, canvasWidth, ratio) {
+    let row = [], temp = "", chr = str.split("");
+    for (var a = 0; a < chr.length; a++) {
+      if (ctx.measureText(temp).width < canvasWidth) {
+        temp += chr[a];
+      }
+      else {
+        a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比
+        row.push(temp);
+        temp = "";
+      }
+    }
+    row.push(temp);
+
+    //如果数组长度大于2 则截取前两个
+    if (row.length > 2) {
+      var rowCut = row.slice(0, 2);
+      var rowPart = rowCut[1];
+      var test = "";
+      var empty = [];
+      for (var a = 0; a < rowPart.length; a++) {
+        if (ctx.measureText(test).width < canvasWidth - 30 * ratio) {
+          test += rowPart[a];
+        }
+        else {
+          break;
+        }
+      }
+      empty.push(test);
+      var group = empty[0] + "..."//这里只显示两行，超出的用...表示
+      rowCut.splice(1, 1, group);
+      row = rowCut;
+    }
+    for (var b = 0; b < row.length; b++) {
+      ctx.fillText(row[b], x, y + b * 40 * ratio, canvasWidth);
+    }
+  },
+
   /**
    * 生命周期函数--监听页面初次渲染完成
    */
@@ -323,7 +581,17 @@ Page({
    * 生命周期函数--监听页面显示
    */
   onShow: function () {
-
+    // if(!wx.getStorageSync('jstrip_token')){
+    //   return;
+    // }
+    // if(this.data.sceneInfo && this.data.sceneInfo.id){
+    //   this.drawImg()
+    // }
+    // else {
+    //   setTimeout(()=>{
+    //     this.onShow()
+    //   },200)
+    // }
   },
 
   /**

pages/info/hotelProductInfo/index.wxml

@@ -1,5 +1,6 @@
 <!--pages/info/hotelProductInfo/index.wxml-->
 <title title="产品详情"></title>
+<!-- <view class="iconfont icon-fenxiang" bindtap="share"></view> 分享需要配置闩-->
 <view class="iconfont {{isLike==1?'icon-shoucang':'icon-xin'}}" bindtap="like"></view>
 <swiper class="swiper" indicator-dots="{{true}}" wx:if="{{sceneInfo}}"
   autoplay="{{true}}" interval="{{2000}}" duration="{{300}}">
@@ -179,3 +180,28 @@
     </view>
   </view>
 </view>
+<view style="position:absolute;right:0;left:-10000rpx;top:-200rpx;">
+  <canvas canvas-id='imageCanvas' class='imageCanvas' style="width:551rpx;height:643rpx;" disable-scroll='true'>
+  </canvas>
+  <canvas class="canvasCode" style="opacity:0;width:500px;height:500px" canvas-id="myQrcode"></canvas>
+</view>
+<view class="mask" wx:if="{{showShareFlag}}" style="align-items: center;">
+  <view class="mask-bg" bindtap="share"></view>
+  <view class="mask-content share-img-box">
+    <image class="share-img" src="{{shareImg}}" mode="widthFix"></image>
+    <view class="share-tips">
+      <view style="position:relative">
+        <image class="img" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/img.png" mode="widthFix"></image>
+        <view>保存图片到相册</view>
+        <view class="tipimg"><image src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/ok.png" mode="widthFix"></image></view>
+      </view>
+      <image style="width:36rpx" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/arrow2.png" mode="widthFix"></image>
+      <view style="position:relative">
+        <image class="img" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/code.png" mode="widthFix"></image>
+        <view>微信识别二维码</view>
+        <view class="tipimg"><image src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/ok1.png" mode="widthFix"></image></view>
+      </view>
+    </view>
+    <view class="save-btn" bindtap="save">保存到相册</view>
+  </view>
+</view>

pages/info/hotelProductInfo/index.wxss

@@ -474,3 +474,80 @@ page {
   font-size: 50rpx;
   color: #333;
 }
+
+.mask-content {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+}
+.mask-content .icon-close {
+  position: absolute;
+  right: 40rpx;
+  top: 40rpx;
+}
+
+.share-img-box {
+  /* width: 551rpx; */
+  position: static;
+  background: none;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.share-img {
+  display: block;
+  width: 551rpx;
+}
+.share-tips {
+  width: 426rpx;
+  height: 150rpx;
+  background: #FFFFFF;
+  border-radius: 25rpx;
+  margin-top: 25rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 65rpx;
+  color: #999;
+  font-size: 24rpx;
+  text-align: center;
+  line-height: 40rpx;
+}
+.share-tips .img {
+  display: block;
+  width: 55rpx;
+  margin: 0 auto;
+  margin-bottom: 4rpx;
+}
+.tipimg {
+  position: absolute;
+  left: 50%;
+  margin-left: 16rpx;
+  width: 24rpx;
+  height: 24rpx;
+  background: #D62828;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  top: 34rpx;
+}
+.tipimg image {
+  width: 21rpx;
+  display: block;
+  
+}
+.save-btn {
+  width: 403rpx;
+  line-height: 77rpx;
+  background: #D62828;
+  border-radius: 39rpx;
+  text-align: center;
+  color: #fff;
+  font-size: 31rpx;
+  font-weight: 500;
+  margin-top: 50rpx;
+}

pages/info/museumInfo/index.js

@@ -23,7 +23,9 @@ Page({
     time: null,
     date: null,
     retailId: "",
-    isGroup:null
+    isGroup: null,
+    shareImg: null,
+    showShareFlag: false
   },
 
   /**
@@ -124,6 +126,259 @@ Page({
     }, 500)
   },
 
+
+  // 分享
+  share: function () {
+    if (!wx.getStorageSync("jstrip_token")) {
+      commonApi.user_post("user/getMyInfo", {}).then(res => {
+
+      })
+      return;
+    }
+    if (!this.data.shareImg) {
+      wx.showToast({
+        title: '图片生成中，稍后再试',
+        icon: 'none'
+      })
+      return;
+    }
+    this.setData({
+      showShareFlag: !this.data.showShareFlag
+    })
+  },
+  // 保存
+  save() {
+    let url = this.data.shareImg, that = this;
+    wx.authorize({
+      /* 这个就是保存相册的 */
+      scope: 'scope.writePhotosAlbum',
+      success() {
+        wx.saveImageToPhotosAlbum({
+          filePath: url,
+          success(res) {
+            wx.showToast({
+              title: '保存成功',
+              icon: "success"
+            })
+            that.setData({
+              showShareFlag: !this.data.showShareFlag
+            })
+          },
+          fail(res) {
+            wx.showToast({
+              title: '保存失败',
+              icon: 'none'
+            })
+          }
+        })
+      },
+      complete(res) {
+        console.log(res);
+        /* 这里判断一下如果没有授权重新打开设置选项 */
+        wx.getSetting({
+          success(res) {
+            if (!res.authSetting['scope.writePhotosAlbum']) {
+              /* 打开设置的方法 */
+              // opensit();
+              wx.showToast({
+                title: '请打开权限后再试',
+                icon: 'none'
+              })
+            }
+          }
+        });
+      }
+    });
+
+  },
+  // 绘制海报
+  drawImg: function () {
+    var that = this, userinfo = wx.getStorageSync('jstrip_userInfo');
+    if (!userinfo) {
+      // 去登录
+      return false;
+    }
+    const ctx = wx.createCanvasContext('imageCanvas');
+    // const device = wx.getSystemInfoSync();
+    // const ratio = device.screenWidth / 750;
+    // 先获取到图片信息
+    let promise2 = new Promise(function (resolve, reject) {
+      wx.getImageInfo({
+        src: that.data.info.headimg,
+        success: function (res) {
+          resolve(res);
+        },
+        fail: function (res) {
+          reject(res);
+        }
+      })
+    })
+    let promise3 = new Promise(function (resolve, reject) {
+      let userid = wx.getStorageSync('jstrip_userid')
+      new QRCode('myQrcode', {
+        text: 'https://m.cloud.sz-trip.com/ScenicDetail?id=' + that.data.info.id + '&sharedUserId=' + userid + '&channel=-1',
+        width: 500,
+        height: 500,
+        padding: 12, // 生成二维码四周自动留边宽度，不传入默认为0
+        correctLevel: QRCode.CorrectLevel.H, // 二维码可辨识度
+        callback: (res) => {
+          resolve(res);
+        }
+      })
+    })
+    //成功得到图片信息后，开始绘图
+    Promise.all([promise2, promise3]).then(imgs => {
+      ctx.save();
+      ctx.beginPath(); //开始绘制
+      that.handleBorderRect(ctx, 0, 0, 551 * ratio, 407 * ratio, 25 * ratio, '#ccc')
+      ctx.clip();//画好了圆 剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因
+      ctx.drawImage(imgs[0].path, 0, 0, 551 * ratio, 407 * ratio);
+      ctx.restore();
+      ctx.save();
+      that.handleBorderRect2(ctx, 0, 407 * ratio, 551 * ratio, 236 * ratio, 25 * ratio, '#fff')
+      ctx.restore();
+      // 绘制二维码
+      ctx.drawImage(imgs[1].path, 373 * ratio, 495 * ratio, 137 * ratio, 137 * ratio);
+      // 开始文字绘制
+      ctx.setFillStyle("#000");
+      ctx.setFontSize(30 * ratio); //字大小
+      ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
+      that.drawText(ctx, that.data.info.title, 25 * ratio, 450 * ratio, 480 * ratio, ratio);
+      // 售价
+      ctx.setFillStyle("#D62828");
+      ctx.setFontSize(40 * ratio); //字大小
+      ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
+      let price =  that.data.info.price ? ("￥" + (that.data.info.price / 100)) : '免费';
+      let width = ctx.measureText(price).width;
+      ctx.fillText(price, 25 * ratio, 620 * ratio);
+      // 副标题
+      ctx.setFillStyle("#999999");
+      ctx.setFontSize(28 * ratio); //字大小
+      ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
+      let subtitle = that.data.info.display_tags[0];
+      if (subtitle.length > 10) {
+        subtitle = subtitle.substr(0, 10) + '...'
+      }
+      ctx.fillText(subtitle, 25 * ratio, 540 * ratio);
+      // ctx.draw();
+      // 划线价
+      // ctx.setFillStyle("#999999");
+      // ctx.setFontSize(32 * ratio); //字大小
+      // ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
+      // let market_price = "￥" + (Number(that.data.info.market_price) / 100)
+      // ctx.fillText(market_price, 40 * ratio + width, 620 * ratio);
+      // let market_price_width = ctx.measureText(market_price).width;
+      // 划线
+      // ctx.beginPath()
+      // ctx.setLineWidth(1)
+      // ctx.moveTo(40 * ratio + width, 608 * ratio)
+      // ctx.lineTo(45 * ratio + width + market_price_width, 608 * ratio)
+      // ctx.stroke();
+      // 长按识别二维码
+      // ctx.setFillStyle("#666");
+      // ctx.setFontSize(22 * ratio); //字大小
+      // ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
+      // ctx.fillText("长按识别二维码", 404*ratio, 710*ratio);
+      // 长按图片转发或保存
+      // ctx.setFillStyle("#000");
+      // ctx.setFontSize(24 * ratio); //字大小
+      // ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
+      // ctx.fillText("长按图片保存到本地",(592*ratio - ctx.measureText("长按图片保存到本地").width)/2, 740*ratio);
+      ctx.draw();
+      // 转为图片
+      setTimeout(() => {
+        wx.canvasToTempFilePath({
+          x: 0,
+          y: 0,
+          canvasId: 'imageCanvas',
+          success: function (res) {
+            that.setData({
+              shareImg: res.tempFilePath
+            })
+          },
+          fail(err) {
+            console.log('agdgjgdajhg', err)
+          }
+        })
+      }, 500)
+      return false;
+    }).catch(err => {
+      console.log("this err", err)
+    })
+  },
+  // 圆角矩形
+  handleBorderRect(ctx, x, y, w, h, r, color) {
+    ctx.beginPath();
+    ctx.moveTo(x + w, y + h);
+    ctx.lineTo(x, y + h)
+    // 左上角
+    ctx.arc(x + r, y + r, r, Math.PI, 1.5 * Math.PI);
+    ctx.moveTo(x + r, y);
+    ctx.lineTo(x + w - r, y);
+    ctx.lineTo(x + w, y + r);
+    // 右上角
+    ctx.arc(x + w - r, y + r, r, 1.5 * Math.PI, 2 * Math.PI);
+    ctx.lineTo(x + w, y + h);
+    ctx.lineTo(x + w - r, y + h);
+    ctx.fillStyle = color;
+    ctx.fill();
+    ctx.closePath();
+  },
+  handleBorderRect2(ctx, x, y, w, h, r, color) {
+    ctx.beginPath();
+    ctx.moveTo(x, y);
+    ctx.lineTo(x + w, y)
+    // 右下角
+    ctx.arc(x + w - r, y + h - r, r, 0, 0.5 * Math.PI);
+    ctx.lineTo(x + r, y + h);
+    ctx.lineTo(x, y + h - r);
+    // 左下角
+    ctx.arc(x + r, y + h - r, r, 0.5 * Math.PI, Math.PI);
+    ctx.lineTo(x, y);
+    ctx.lineTo(x, y);
+    ctx.fillStyle = color;
+    ctx.fill();
+    ctx.closePath();
+  },
+  // 绘制两行文字
+  drawText: function (ctx, str, x, y, canvasWidth, ratio) {
+    let row = [], temp = "", chr = str.split("");
+    for (var a = 0; a < chr.length; a++) {
+      if (ctx.measureText(temp).width < canvasWidth) {
+        temp += chr[a];
+      }
+      else {
+        a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比
+        row.push(temp);
+        temp = "";
+      }
+    }
+    row.push(temp);
+
+    //如果数组长度大于2 则截取前两个
+    if (row.length > 2) {
+      var rowCut = row.slice(0, 2);
+      var rowPart = rowCut[1];
+      var test = "";
+      var empty = [];
+      for (var a = 0; a < rowPart.length; a++) {
+        if (ctx.measureText(test).width < canvasWidth - 30 * ratio) {
+          test += rowPart[a];
+        }
+        else {
+          break;
+        }
+      }
+      empty.push(test);
+      var group = empty[0] + "..."//这里只显示两行，超出的用...表示
+      rowCut.splice(1, 1, group);
+      row = rowCut;
+    }
+    for (var b = 0; b < row.length; b++) {
+      ctx.fillText(row[b], x, y + b * 40 * ratio, canvasWidth);
+    }
+  },
+
   /**
    * 生命周期函数--监听页面初次渲染完成
    */
@@ -173,6 +428,18 @@ Page({
         }
       })
     }
+
+    // if (!wx.getStorageSync('jstrip_token')) {
+    //   return;
+    // }
+    // if (this.data.info && this.data.info.id) {
+    //   this.drawImg()
+    // }
+    // else {
+    //   setTimeout(() => {
+    //     this.onShow()
+    //   }, 200)
+    // }
   },
 
   /**

pages/info/museumInfo/index.wxml

@@ -1,6 +1,7 @@
 <!--pages/info/museumInfo/index.wxml-->
 <wxs src="../../../utils/filter.wxs" module="tool" />
 <title title="场馆详情"></title>
+<view class="iconfont icon-fenxiang" bindtap="share"></view>
 <swiper class="swiper" indicator-dots="{{true}}" wx:if="{{info}}"
   autoplay="{{true}}" interval="{{2000}}" duration="{{300}}">
   <block wx:for="{{info.listimg}}" wx:key="*this">
@@ -47,3 +48,29 @@
 <view class="fixed-btn" wx:if="{{info.product_venue && info.product_venue.sku && info.product_venue.sku.length>0}}">
   <view bindtap="order" class="btn">参观预约</view>
 </view>
+
+<view style="position:absolute;right:0;left:-10000rpx;top:-200rpx;">
+  <canvas canvas-id='imageCanvas' class='imageCanvas' style="width:551rpx;height:643rpx;" disable-scroll='true'>
+  </canvas>
+  <canvas class="canvasCode" style="opacity:0;width:500px;height:500px" canvas-id="myQrcode"></canvas>
+</view>
+<view class="mask" wx:if="{{showShareFlag}}" style="align-items: center;">
+  <view class="mask-bg" bindtap="share"></view>
+  <view class="mask-content share-img-box">
+    <image class="share-img" src="{{shareImg}}" mode="widthFix"></image>
+    <view class="share-tips">
+      <view style="position:relative">
+        <image class="img" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/img.png" mode="widthFix"></image>
+        <view>保存图片到相册</view>
+        <view class="tipimg"><image src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/ok.png" mode="widthFix"></image></view>
+      </view>
+      <image style="width:36rpx" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/arrow2.png" mode="widthFix"></image>
+      <view style="position:relative">
+        <image class="img" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/code.png" mode="widthFix"></image>
+        <view>微信识别二维码</view>
+        <view class="tipimg"><image src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/ok1.png" mode="widthFix"></image></view>
+      </view>
+    </view>
+    <view class="save-btn" bindtap="save">保存到相册</view>
+  </view>
+</view>

pages/info/museumInfo/index.wxss

@@ -140,3 +140,80 @@
   background:white;
   right: 0;
 }
+
+.mask-content {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+}
+.mask-content .icon-close {
+  position: absolute;
+  right: 40rpx;
+  top: 40rpx;
+}
+
+.share-img-box {
+  /* width: 551rpx; */
+  position: static;
+  background: none;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.share-img {
+  display: block;
+  width: 551rpx;
+}
+.share-tips {
+  width: 426rpx;
+  height: 150rpx;
+  background: #FFFFFF;
+  border-radius: 25rpx;
+  margin-top: 25rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 65rpx;
+  color: #999;
+  font-size: 24rpx;
+  text-align: center;
+  line-height: 40rpx;
+}
+.share-tips .img {
+  display: block;
+  width: 55rpx;
+  margin: 0 auto;
+  margin-bottom: 4rpx;
+}
+.tipimg {
+  position: absolute;
+  left: 50%;
+  margin-left: 16rpx;
+  width: 24rpx;
+  height: 24rpx;
+  background: #D62828;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  top: 34rpx;
+}
+.tipimg image {
+  width: 21rpx;
+  display: block;
+  
+}
+.save-btn {
+  width: 403rpx;
+  line-height: 77rpx;
+  background: #D62828;
+  border-radius: 39rpx;
+  text-align: center;
+  color: #fff;
+  font-size: 31rpx;
+  font-weight: 500;
+  margin-top: 50rpx;
+}

pages/info/postProductInfo/index.js

@@ -362,7 +362,7 @@ Page({
     let promise3 = new Promise(function(resolve,reject){
       let userid = wx.getStorageSync('jstrip_userid')
       new QRCode('myQrcode',{
-        text: 'https://m.cloud.sz-trip.com/MailMerchandiseDetail?id='+that.data.info.id+'&userId='+userid,
+        text: 'https://m.cloud.sz-trip.com/MailMerchandiseDetail?id='+that.data.info.id+'&sharedUserId='+userid+'&channel=-1',
         width: 500,
         height: 500,
         padding: 12, // 生成二维码四周自动留边宽度，不传入默认为0

pages/info/sceneProductInfo/index.js

@@ -1,6 +1,9 @@
 // pages/info/sceneProductInfo/index.js
+let device = wx.getSystemInfoSync();
+const ratio = device.windowWidth / 750;
 import commonApi from "../../../utils/https/common"
 import util from "../../../utils/util"
+import QRCode from '../../../utils/weapp-qrcode.js'
 let app = getApp()
 Page({
 
@@ -16,7 +19,9 @@ Page({
     comment:[],
     commentTotal:0,
     isTest:true,
-    retailId:""
+    retailId:"",
+    shareImg:null,
+    showShareFlag:false
   },
 
   /**
@@ -194,6 +199,258 @@ Page({
     })
   },
 
+    // 分享
+    share:function(){
+      if(!wx.getStorageSync("jstrip_token")){
+        commonApi.user_post("user/getMyInfo",{}).then(res=>{
+  
+        })
+        return;
+      }
+      if(!this.data.shareImg){
+        wx.showToast({
+          title: '图片生成中，稍后再试',
+          icon:'none'
+        })
+        return;
+      }
+      this.setData({
+        showShareFlag:!this.data.showShareFlag
+      })
+    },
+    // 保存
+    save(){
+      let url = this.data.shareImg,that = this;
+      wx.authorize({
+        /* 这个就是保存相册的 */
+        scope: 'scope.writePhotosAlbum',
+        success() {
+          wx.saveImageToPhotosAlbum({
+            filePath:url,
+            success(res) { 
+              wx.showToast({
+                title: '保存成功',
+                icon:"success"
+              })
+              that.setData({
+                showShareFlag:!this.data.showShareFlag
+              })
+            },
+            fail(res){
+              wx.showToast({
+                title: '保存失败',
+                icon:'none'
+              })
+            }
+           })
+        },
+        complete(res) {
+            console.log(res);
+            /* 这里判断一下如果没有授权重新打开设置选项 */
+            wx.getSetting({
+                success(res) {
+                    if (!res.authSetting['scope.writePhotosAlbum']) {
+                        /* 打开设置的方法 */
+                        // opensit();
+                        wx.showToast({
+                          title: '请打开权限后再试',
+                          icon:'none'
+                        })
+                    }
+                }
+            });
+        }
+    });
+      
+    },
+    // 绘制海报
+    drawImg:function(){
+      var that = this,userinfo = wx.getStorageSync('jstrip_userInfo');
+      if(!userinfo){
+        // 去登录
+        return false;
+      }
+      const ctx = wx.createCanvasContext('imageCanvas');
+      // const device = wx.getSystemInfoSync();
+      // const ratio = device.screenWidth / 750;
+      // 先获取到图片信息
+      let promise2 = new Promise(function(resolve,reject){
+        wx.getImageInfo({
+          src:that.data.info.headimg,
+          success:function(res){
+            resolve(res);
+          },
+          fail:function(res){
+            reject(res);
+          }
+        })
+      })
+      let promise3 = new Promise(function(resolve,reject){
+        let userid = wx.getStorageSync('jstrip_userid')
+        new QRCode('myQrcode',{
+          text: 'https://m.cloud.sz-trip.com/ScenicDetail?id='+that.data.info.id+'&sharedUserId='+userid+'&channel=-1',
+          width: 500,
+          height: 500,
+          padding: 12, // 生成二维码四周自动留边宽度，不传入默认为0
+          correctLevel: QRCode.CorrectLevel.H, // 二维码可辨识度
+          callback: (res) => {
+            resolve(res);
+          }
+        })
+      })
+      //成功得到图片信息后，开始绘图
+      Promise.all([promise2,promise3]).then(imgs=>{
+        ctx.save();
+        ctx.beginPath(); //开始绘制
+        that.handleBorderRect(ctx,0,0,551 * ratio,407 * ratio,25 * ratio,'#ccc')
+        ctx.clip();//画好了圆 剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因
+        ctx.drawImage(imgs[0].path, 0, 0,551 * ratio,407 * ratio);
+        ctx.restore();
+        ctx.save();
+        that.handleBorderRect2(ctx,0,407 * ratio,551 * ratio,236*ratio,25 * ratio,'#fff')
+        ctx.restore();
+        // 绘制二维码
+        ctx.drawImage(imgs[1].path, 373 * ratio, 495 * ratio,137 * ratio, 137 * ratio);
+        // 开始文字绘制
+        ctx.setFillStyle("#000");
+        ctx.setFontSize(30 * ratio); //字大小
+        ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
+        that.drawText(ctx,that.data.info.title, 25*ratio, 450*ratio,480 * ratio,ratio);
+        // 售价
+        ctx.setFillStyle("#D62828");
+        ctx.setFontSize(40 * ratio); //字大小
+        ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
+        let price = "￥"+(that.data.info.price/100);
+        let width = ctx.measureText(price).width;
+        ctx.fillText(price, 25*ratio, 620*ratio);
+        // 副标题
+        ctx.setFillStyle("#999999");
+        ctx.setFontSize(28 * ratio); //字大小
+        ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
+        let subtitle = that.data.info.display_tags[0];
+        if(subtitle.length>10){
+          subtitle = subtitle.substr(0,10)+'...'
+        }
+        ctx.fillText(subtitle, 25*ratio, 540*ratio);
+        // ctx.draw();
+        // 划线价
+        // ctx.setFillStyle("#999999");
+        // ctx.setFontSize(32 * ratio); //字大小
+        // ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
+        // let market_price = "￥"+(Number(that.data.info.market_price)/100)
+        // ctx.fillText(market_price, 40*ratio + width, 620*ratio);
+        // let market_price_width = ctx.measureText(market_price).width;
+        // 划线
+        // ctx.beginPath()
+        // ctx.setLineWidth(1)
+        // ctx.moveTo(40*ratio + width, 608*ratio)
+        // ctx.lineTo(45*ratio + width, 608*ratio)
+        // ctx.stroke();
+        // 长按识别二维码
+        // ctx.setFillStyle("#666");
+        // ctx.setFontSize(22 * ratio); //字大小
+        // ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
+        // ctx.fillText("长按识别二维码", 404*ratio, 710*ratio);
+        // 长按图片转发或保存
+        // ctx.setFillStyle("#000");
+        // ctx.setFontSize(24 * ratio); //字大小
+        // ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
+        // ctx.fillText("长按图片保存到本地",(592*ratio - ctx.measureText("长按图片保存到本地").width)/2, 740*ratio);
+        ctx.draw(); 
+        // 转为图片
+        setTimeout(()=>{
+          wx.canvasToTempFilePath({
+            x: 0,
+            y: 0,
+            canvasId: 'imageCanvas',
+            success: function (res) {
+              that.setData({
+                shareImg:res.tempFilePath
+              })
+            },
+            fail(err){
+              console.log('agdgjgdajhg',err)
+            }
+          })
+        },500)
+        return false;
+      }).catch(err=>{
+        console.log("this err",err)
+      })
+    },
+    // 圆角矩形
+    handleBorderRect(ctx, x, y, w, h, r, color){
+      ctx.beginPath();
+      ctx.moveTo(x+w,y+h);
+      ctx.lineTo(x,y+h)
+      // 左上角
+      ctx.arc(x + r, y + r, r, Math.PI, 1.5 * Math.PI);
+      ctx.moveTo(x + r, y);
+      ctx.lineTo(x + w - r, y);
+      ctx.lineTo(x + w, y + r);
+      // 右上角
+      ctx.arc(x + w - r, y + r, r, 1.5 * Math.PI, 2 * Math.PI);
+      ctx.lineTo(x + w, y + h );
+      ctx.lineTo(x + w - r, y + h);
+      ctx.fillStyle = color;
+      ctx.fill();
+      ctx.closePath();
+    },
+    handleBorderRect2(ctx, x, y, w, h, r, color){
+      ctx.beginPath();
+      ctx.moveTo(x,y);
+      ctx.lineTo(x+w,y)
+      // 右下角
+      ctx.arc(x + w - r, y + h - r, r, 0, 0.5 * Math.PI);
+      ctx.lineTo(x + r, y + h);
+      ctx.lineTo(x, y + h - r);
+      // 左下角
+      ctx.arc(x + r, y + h - r, r, 0.5 * Math.PI, Math.PI);
+      ctx.lineTo(x, y);
+      ctx.lineTo(x, y);
+      ctx.fillStyle = color;
+      ctx.fill();
+      ctx.closePath();
+    },
+    // 绘制两行文字
+    drawText: function(ctx, str, x, y, canvasWidth,ratio) {
+      let row = [],temp="",chr=str.split("");
+      for (var a = 0; a < chr.length; a++) {
+        if (ctx.measureText(temp).width < canvasWidth) {
+          temp += chr[a];
+        }
+        else {
+          a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比
+          row.push(temp);
+          temp = "";
+        }
+      }
+      row.push(temp);
+  
+      //如果数组长度大于2 则截取前两个
+      if (row.length > 2) {
+        var rowCut = row.slice(0, 2);
+        var rowPart = rowCut[1];
+        var test = "";
+        var empty = [];
+        for (var a = 0; a < rowPart.length; a++) {
+          if (ctx.measureText(test).width < canvasWidth - 30 * ratio) {
+            test += rowPart[a];
+          }
+          else {
+            break;
+          }
+        }
+        empty.push(test);
+        var group = empty[0] + "..."//这里只显示两行，超出的用...表示
+        rowCut.splice(1, 1, group);
+        row = rowCut;
+      }
+      for (var b = 0; b < row.length; b++) {
+        ctx.fillText(row[b], x, y + b * 40 * ratio, canvasWidth);
+      }
+    },
+
   /**
    * 生命周期函数--监听页面初次渲染完成
    */
@@ -205,7 +462,17 @@ Page({
    * 生命周期函数--监听页面显示
    */
   onShow: function () {
-
+    // if(!wx.getStorageSync('jstrip_token')){
+    //   return;
+    // }
+    // if(this.data.info && this.data.info.id){
+    //   this.drawImg()
+    // }
+    // else {
+    //   setTimeout(()=>{
+    //     this.onShow()
+    //   },200)
+    // }
   },
 
   /**

pages/info/sceneProductInfo/index.wxml

@@ -1,5 +1,6 @@
 <!--pages/info/sceneProductInfo/index.wxml-->
 <title title="产品详情"></title>
+<!-- <view class="iconfont icon-fenxiang" bindtap="share"></view> 需要配置域名 -->
 <view class="iconfont {{isLike==1?'icon-shoucang':'icon-xin'}}" bindtap="like"></view>
 <!-- <view class="audio-box" bindtap="audioGuide">
   <view>语音导览</view>
@@ -104,3 +105,28 @@
 </view>
 <view style="height:{{safeBottom}}px"></view>
 <notice bookingInfo="{{bookingInfo}}" skuName="{{bookingInfoTitle}}" wx:if="{{bookingInfo}}" bind:close="closeMask"></notice>
+<view style="position:absolute;right:0;left:-10000rpx;top:-200rpx;">
+  <canvas canvas-id='imageCanvas' class='imageCanvas' style="width:551rpx;height:643rpx;" disable-scroll='true'>
+  </canvas>
+  <canvas class="canvasCode" style="opacity:0;width:500px;height:500px" canvas-id="myQrcode"></canvas>
+</view>
+<view class="mask" wx:if="{{showShareFlag}}" style="align-items: center;">
+  <view class="mask-bg" bindtap="share"></view>
+  <view class="mask-content share-img-box">
+    <image class="share-img" src="{{shareImg}}" mode="widthFix"></image>
+    <view class="share-tips">
+      <view style="position:relative">
+        <image class="img" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/img.png" mode="widthFix"></image>
+        <view>保存图片到相册</view>
+        <view class="tipimg"><image src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/ok.png" mode="widthFix"></image></view>
+      </view>
+      <image style="width:36rpx" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/arrow2.png" mode="widthFix"></image>
+      <view style="position:relative">
+        <image class="img" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/code.png" mode="widthFix"></image>
+        <view>微信识别二维码</view>
+        <view class="tipimg"><image src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/ok1.png" mode="widthFix"></image></view>
+      </view>
+    </view>
+    <view class="save-btn" bindtap="save">保存到相册</view>
+  </view>
+</view>

pages/info/sceneProductInfo/index.wxss

@@ -280,7 +280,7 @@ page {
 }
 .icon-xin,.icon-shoucang {
   position: absolute;
-  right: 20rpx;
+  right: 100rpx;
   margin-top: 20rpx;
   width: 60rpx;
   line-height: 60rpx;
@@ -321,3 +321,81 @@ page {
   display: block;
   margin-left: 10rpx;
 }
+
+
+.mask-content {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+}
+.mask-content .icon-close {
+  position: absolute;
+  right: 40rpx;
+  top: 40rpx;
+}
+
+.share-img-box {
+  /* width: 551rpx; */
+  position: static;
+  background: none;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.share-img {
+  display: block;
+  width: 551rpx;
+}
+.share-tips {
+  width: 426rpx;
+  height: 150rpx;
+  background: #FFFFFF;
+  border-radius: 25rpx;
+  margin-top: 25rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 65rpx;
+  color: #999;
+  font-size: 24rpx;
+  text-align: center;
+  line-height: 40rpx;
+}
+.share-tips .img {
+  display: block;
+  width: 55rpx;
+  margin: 0 auto;
+  margin-bottom: 4rpx;
+}
+.tipimg {
+  position: absolute;
+  left: 50%;
+  margin-left: 16rpx;
+  width: 24rpx;
+  height: 24rpx;
+  background: #D62828;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  top: 34rpx;
+}
+.tipimg image {
+  width: 21rpx;
+  display: block;
+  
+}
+.save-btn {
+  width: 403rpx;
+  line-height: 77rpx;
+  background: #D62828;
+  border-radius: 39rpx;
+  text-align: center;
+  color: #fff;
+  font-size: 31rpx;
+  font-weight: 500;
+  margin-top: 50rpx;
+}

project.private.config.json

@@ -59,6 +59,12 @@
           "pathName": "pages/pbService/web/index",
           "query": "id=10973",
           "scene": null
+        },
+        {
+          "name": "场馆列表",
+          "pathName": "pages/list/museum/index",
+          "query": "",
+          "scene": null
         }
       ]
     }