优化探店列表与分类列表图片，首页添加国外名称，拼餐详情页添加保存图片到相册

@@ -381,6 +381,228 @@ Page({
             }
             }
         }
         }
     },
     },
+    //点击分享
+    share() {
+        this.setData({show_canvas: true}, () => {
+            this.drawCard();
+        })
+    },
+    hideCanvasMask() {
+        // this.setData({show_canvas: true});
+    },
+    //关闭分享卡片
+    closeCanvas() {
+        this.setData({show_canvas: false});
+        // wx.navigateBack({delta:1})
+    },
+    //保存图片到手机相册
+    saveToPhone() {
+        this.getPower();
+    },
+    //图片链接转成本地路径
+    getLocalImage() {
+        // http://doctor_wechat.w.bronet.cn/20190122101152.png
+        const self = this;
+        wx.getImageInfo({
+            src: self.data.detail.banner[0],
+            success(res) {
+                console.log('图片链接转成本地路径',res);
+                self.setData({local_img:res.path})
+                self.drawCard()
+                console.log(res.width)
+                console.log(res.height)
+            }
+        })
+    },
+    drawCard() {
+        console.log('开始画');
+        const self = this;
+        //先创建一个画布
+        const ctx = wx.createCanvasContext("canvas");
+        //填充背景色
+        ctx.fillStyle = '#fff';
+        ctx.fillRect(0, 0, 300, 150);
+        console.log(self.data.local_img);
+        //将图片转化为画布
+        ctx.drawImage(self.data.local_img, 0, 0, 330, 150);
+        console.log(111);
+        // ctx.drawImage("../../../../images/tou.png", 20, 166, 30, 30);//头像
+        // ctx.drawImage("../../../../images/code.jpg", 220, 209, 60, 60);//头像
+        //用户名字
+        ctx.setFontSize(13);
+        ctx.setFillStyle('#333333');
+        ctx.textAlign = "left";
+        console.log(111);
+        ctx.fillText(self.data.detail.userName, 69, 187);
+        ctx.restore();
+        //签到天数
+        ctx.setFontSize(17);
+        ctx.setFillStyle('#2C82E6');
+        ctx.fillText('连续', 25, 229);
+        ctx.restore();
+        ctx.setFillStyle('#2C82E6');
+        ctx.font = 'bold 22px sans-serif';
+        ctx.fillText(self.data.count, 63, 229);
+        ctx.restore();
+        ctx.setFontSize(17);
+        ctx.setFillStyle('#2C82E6');
+        ctx.font = 'normal 17px sans-serif';
+        ctx.fillText('天签到', 80, 229);
+        ctx.restore();
+
+        const text = self.data.detail.content;
+        // ctx.fillText('此处放文案此处放文案此处放文案此处放文案此处放文案此处放文案此处放文案', 25, 252,200);
+        // ctx.restore();
+        var chr = text.split("");//这个方法是将一个字符串分割成字符串数组
+        var temp = "";
+        var row = [];
+        ctx.setFontSize(13);
+        ctx.setFillStyle('#333333');
+        for (var a = 0; a < chr.length; a++) {
+            if (ctx.measureText(temp).width < 170) {
+                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 < 170) {
+                    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], 25, 252 + b * 16, 170);
+        }
+        ctx.restore();
+
+        // ctx.drawImage("../../../../images/home-banner.png", 0, 0, 250, 150)
+        //成功执行，draw方法中进行回调
+        ctx.draw(true, function () {
+            // wx.hideLoading();
+            console.log("draw callback success");
+            self.setData({can_save: true,show_canvas: true});
+            console.log(self.data.can_save);
+        })
+    },
+    //获取保存到相册的权限
+    getPower() {
+        const that = this;
+        //保存临时图片
+        wx.getSetting({
+            success(res) {
+                if (!res.authSetting['scope.writePhotosAlbum']) {
+                    wx.authorize({
+                        scope: 'scope.writePhotosAlbum',
+                        success() { //这里是用户同意授权后的回调
+                            that.savePic();
+                        },
+                        fail() { //这里是用户拒绝授权后的回调
+                            wx.showModal({
+                                title: '提示',
+                                content: '若不打开授权，则无法将图片保存在相册中！',
+                                showCancel: true,
+                                cancelText: '暂不授权',
+                                cancelColor: '#000000',
+                                confirmText: '去授权',
+                                confirmColor: '#3CC51F',
+                                success: function (res) {
+                                    if (res.confirm) {
+                                        wx.openSetting({
+                                            //调起客户端小程序设置界面，返回用户设置的操作结果。
+                                            success: function (ret) {
+                                                if (ret.authSetting["scope.writePhotosAlbum"] == true) {
+                                                    wx.showToast({
+                                                        title: '授权成功',
+                                                        icon: 'none',
+                                                        duration: 1000
+                                                    });
+                                                    //再次授权，保存到相册
+                                                    that.savePic();
+                                                } else {
+                                                    wx.showToast({
+                                                        title: '授权失败',
+                                                        icon: 'none',
+                                                        duration: 1000
+                                                    })
+                                                }
+                                            }
+                                        })
+                                    } else {
+                                        wx.showToast({
+                                            title: '授权失败',
+                                            icon: 'none',
+                                            duration: 1000
+                                        })
+                                        // console.log('用户点击取消')
+                                    }
+                                }
+                            })
+                        }
+                    })
+                } else { //用户已经授权过了
+                    console.log('用户已经授权过了')
+                    that.savePic();
+                }
+            }
+        });
+
+    },
+    savePic() {
+        console.log('是否能保存',this.data.can_save);
+        if(this.data.can_save) {
+            wx.canvasToTempFilePath({
+                x: 0,
+                y: 0,
+                width: 300,
+                height: 300,
+                destWidth: 300,
+                destHeight: 300,
+                canvasId: 'canvas',
+                fileType: 'jpg',
+                quality:1,
+                success: function (res) {
+                    console.log("get tempfilepath(success) is:", res.tempFilePath);
+                    //将图片保存在系统相册中(应先获取权限，)
+                    wx.saveImageToPhotosAlbum({
+                        filePath: res.tempFilePath,
+                        success(res) {
+                            wx.showToast({title:'保存成功',icon:'none'});
+                            console.log("save photo is success")
+                        },
+                        fail: function () {
+                            wx.showToast({title:'保存失败',icon:'none'});
+                            console.log("save photo is fail")
+                        }
+                    })
+                },
+                fail: function () {
+                    console.log('get tempfilepath is fail')
+                }
+            })
+        }else {
+            wx.showLoading({title:'加载中',icon:'loading',duration:1000})
+        }
+
+    },
     /**
     /**
      * 生命周期函数--监听页面加载
      * 生命周期函数--监听页面加载
      */
      */

@@ -6,6 +6,7 @@ import mock from './mock.js'//拿到的数据
 
 
 Page({
 Page({
     data: {
     data: {
+        is_show_city:false,
         items: [],
         items: [],
         slide: [],
         slide: [],
         cate: [],
         cate: [],
@@ -44,7 +45,7 @@ Page({
             // Do something when catch error
             // Do something when catch error
         }
         }
     },
     },
-    //获取城市列表
+    //获取国内城市列表
     getCityList() {
     getCityList() {
         const self = this;
         const self = this;
         let url = '/portal/Index/cityList';
         let url = '/portal/Index/cityList';
@@ -62,6 +63,45 @@ Page({
             }
             }
         })
         })
     },
     },
+    //获取国外名
+    getAbroadList() {
+        const self = this;
+        let url = '/portal/Index/addr';
+        let params = {
+            token: wx.getStorageSync('token'),
+        };
+        app.post(url, params, {}).then((res) => {
+            console.log('获取国外列表', res);
+            if (+res.code === 1) {
+                const arr = [];
+                res.data.list.forEach((item) => {
+                    arr.push(item.title)
+                });
+                self.setData({
+                    Abroad_city_picker_list: arr,
+                    AbroadCityList:res.data.list,
+                });
+            }
+        })
+    },
+    chooseCity() {
+        this.setData({is_show_city:!this.data.is_show_city})
+    },
+    chooseDomesticCity(e) {
+        this.setData({is_show_city:false});
+    },
+    chooseAbroadCity(e) {
+        this.setData({
+            current_city: e.detail.value,
+            is_city_change: true,
+            is_show_city:false
+        });
+        const lat = this.data.cityList[e.detail.value].latng.split(',')[1];
+        const lng = this.data.cityList[e.detail.value].latng.split(',')[0];
+        this.setData({lat: lat, lng: lng,addr:this.data.cityList[e.detail.value].title});
+        // console.log('lat', 'lng',lat,lng);
+        this.getIndex();
+    },
     //切换城市
     //切换城市
     cityPickerChange(e) {
     cityPickerChange(e) {
         this.setData({
         this.setData({
@@ -109,7 +149,12 @@ Page({
     },
     },
     handleBackground() {
     handleBackground() {
         console.log('dianji');
         console.log('dianji');
-        this.setData({is_showAnswer: false, is_showUserInfo: false, is_showRelease: false,})
+        this.setData({
+            is_showAnswer: false,
+            is_showUserInfo: false,
+            is_showRelease: false,
+            is_show_city:false,
+        })
     },
     },
     //进入分类详情
     //进入分类详情
     goTypeDetail(e) {
     goTypeDetail(e) {
@@ -384,6 +429,7 @@ Page({
     },
     },
     onLoad: function () {
     onLoad: function () {
         this.getCityList();
         this.getCityList();
+        this.getAbroadList();
         this._doRefreshMasonry(this.data.items)
         this._doRefreshMasonry(this.data.items)
     },
     },
     onShow() {
     onShow() {

@@ -3,29 +3,56 @@
     <!--swiper-->
     <!--swiper-->
     <view class="head">
     <view class="head">
         <view class="position {{hidden_top?'hidden-active':'visible-active'}}">
         <view class="position {{hidden_top?'hidden-active':'visible-active'}}">
-            <picker class="picker" bindchange="cityPickerChange" value="{{current_city}}" range="{{city_picker_list}}" class="picker">
+            <!--<picker class="picker" bindchange="cityPickerChange" value="{{current_city}}" range="{{city_picker_list}}" class="picker">-->
+            <!--<view class="left">-->
+            <!--<view class="iconfont icon-location"></view>-->
+            <!--<text>{{city_picker_list[current_city] || china_city}}</text>-->
+            <!--<view class="iconfont icon-arrow-down"></view>-->
+            <!--</view>-->
+            <!--</picker>-->
+            <view class="picker" bindtap="chooseCity" value="{{current_city}}" range="{{city_picker_list}}"
+                  class="picker">
                 <view class="left">
                 <view class="left">
                     <view class="iconfont icon-location"></view>
                     <view class="iconfont icon-location"></view>
                     <text>{{city_picker_list[current_city] || china_city}}</text>
                     <text>{{city_picker_list[current_city] || china_city}}</text>
                     <view class="iconfont icon-arrow-down"></view>
                     <view class="iconfont icon-arrow-down"></view>
                 </view>
                 </view>
-            </picker>
-            <view class="right"  bindtap="search">
+            </view>
+            <view class="right" bindtap="search">
                 <view class="input"></view>
                 <view class="input"></view>
                 <image src="../../images/search@2x.png" class="search-icon"></image>
                 <image src="../../images/search@2x.png" class="search-icon"></image>
                 <!--<view class="iconfont icon-arrow-down"></view>-->
                 <!--<view class="iconfont icon-arrow-down"></view>-->
             </view>
             </view>
         </view>
         </view>
+        <view class="section {{is_show_city?'visible-active':'hidden-active'}}" wx:if="{{is_show_city}}">
+            <scroll-view class="area_box {{is_long_screen?'add-height-left':''}}" scroll-y>
+                <block wx:for="{{city_picker_list}}" wx:key="index">
+                    <view class="area-test" data-index="{{index}}" wx:for-index="idx" bindtap="chooseDomesticCity"
+                          data-id="{{item.id}}">
+                        <view class="area">{{item}}</view>
+                    </view>
+                </block>
+            </scroll-view>
+            <scroll-view class="area_box {{is_long_screen?'add-height-left':''}}" scroll-y>
+                <block wx:for="{{Abroad_city_picker_list}}" wx:key="index">
+                    <view class="area-test" data-index="{{index}}" wx:for-index="idx" bindtap="chooseAbroadCity"
+                          data-id="{{item.id}}">
+                        <view class="area">{{item}}</view>
+                    </view>
+                </block>
+            </scroll-view>
+        </view>
+        <view class="modal_box" wx:if="{{is_show_city}}" bindtap="handleBackground" catchtouchmove="disableScroll"></view>
         <swiper indicator-dots="{{false}}" current="{{current}}" bindchange="swiperChange"
         <swiper indicator-dots="{{false}}" current="{{current}}" bindchange="swiperChange"
                 autoplay="{{true}}" interval="3000" duration="1000">
                 autoplay="{{true}}" interval="3000" duration="1000">
             <block wx:for="{{slide}}" wx:key="index">
             <block wx:for="{{slide}}" wx:key="index">
                 <navigator url="{{item.link}}" hover-class="navigator-hover">
                 <navigator url="{{item.link}}" hover-class="navigator-hover">
-                <!--<view class="navigator" bindtap="navigator">-->
+                    <!--<view class="navigator" bindtap="navigator">-->
                     <swiper-item>
                     <swiper-item>
                         <image src="{{item.pic}}" class="slide-image"/>
                         <image src="{{item.pic}}" class="slide-image"/>
                         <!--<image src="http://pk86rwhci.bkt.clouddn.com/banner.png" class="slide-image"/>-->
                         <!--<image src="http://pk86rwhci.bkt.clouddn.com/banner.png" class="slide-image"/>-->
                     </swiper-item>
                     </swiper-item>
-                <!--</view>-->
+                    <!--</view>-->
                 </navigator>
                 </navigator>
             </block>
             </block>
         </swiper>
         </swiper>
@@ -54,13 +81,14 @@
         <image src="../../images/haowai@2x.png"></image>
         <image src="../../images/haowai@2x.png"></image>
         <!--<text>奥拉维尔·埃利亚松北京首展</text>-->
         <!--<text>奥拉维尔·埃利亚松北京首展</text>-->
         <!--<view wx:for="{{noticeList}}" wx:key="index">-->
         <!--<view wx:for="{{noticeList}}" wx:key="index">-->
-            <!--<wux-notice-bar mode="link"  icon="" action="" content="{{item.name}}" bind:click="onClick">-->
-                <!--<text slot="footer" style="color: #a1a1a1; margin-left: 10px;">去看看</text>-->
-            <!--</wux-notice-bar>-->
+        <!--<wux-notice-bar mode="link"  icon="" action="" content="{{item.name}}" bind:click="onClick">-->
+        <!--<text slot="footer" style="color: #a1a1a1; margin-left: 10px;">去看看</text>-->
+        <!--</wux-notice-bar>-->
         <!--</view>-->
         <!--</view>-->
-        <swiper class="tab-right" style='' vertical="true" autoplay="true" circular="true" interval="3000" display-multiple-items='1'>
+        <swiper class="tab-right" style='' vertical="true" autoplay="true" circular="true" interval="3000"
+                display-multiple-items='1'>
             <view class="right-item">
             <view class="right-item">
-                <block wx:for-index="idx" wx:for='{{noticeList}}' wx:key="index" >
+                <block wx:for-index="idx" wx:for='{{noticeList}}' wx:key="index">
                     <swiper-item>
                     <swiper-item>
                         <view class='content-item' bindtap="goNotice" data-id="{{item.id}}">
                         <view class='content-item' bindtap="goNotice" data-id="{{item.id}}">
                             <text>{{item.title}}</text>
                             <text>{{item.title}}</text>
@@ -86,13 +114,13 @@
     <!--banner-->
     <!--banner-->
     <view class='people_box rel bb1'>
     <view class='people_box rel bb1'>
         <!--<scroll-view scroll-x class='scroll_view'>-->
         <!--<scroll-view scroll-x class='scroll_view'>-->
-            <!--<view class="people_list_box">-->
-                <!--<view class='people_list' wx:for='{{banner}}' wx:key='index'-->
-                      <!--data-index="{{index}}" bindtap="goPeopleDetail" data-id="{{item.user_id}}">-->
-                    <!--<image src="{{item.image}}"></image>-->
-                    <!--<text>Opera Bombana   2018.4.28</text>-->
-                <!--</view>-->
-            <!--</view>-->
+        <!--<view class="people_list_box">-->
+        <!--<view class='people_list' wx:for='{{banner}}' wx:key='index'-->
+        <!--data-index="{{index}}" bindtap="goPeopleDetail" data-id="{{item.user_id}}">-->
+        <!--<image src="{{item.image}}"></image>-->
+        <!--<text>Opera Bombana   2018.4.28</text>-->
+        <!--</view>-->
+        <!--</view>-->
         <!--</scroll-view>-->
         <!--</scroll-view>-->
         <swiper class="bannerBox" autoplay="{{false}}" interval="3000" duration="2000" circular="{{true}}"
         <swiper class="bannerBox" autoplay="{{false}}" interval="3000" duration="2000" circular="{{true}}"
                 previous-margin="50rpx" next-margin="50rpx" bindchange="bannerChange" current="{{currentBannerIndex}}">
                 previous-margin="50rpx" next-margin="50rpx" bindchange="bannerChange" current="{{currentBannerIndex}}">
@@ -100,8 +128,9 @@
                 <swiper-item>
                 <swiper-item>
                     <view class="fix pl5 pr5 box_bb" bindtap="goMealDetail" data-id="{{item.id}}">
                     <view class="fix pl5 pr5 box_bb" bindtap="goMealDetail" data-id="{{item.id}}">
                         <!--<navigator url="">-->
                         <!--<navigator url="">-->
-                            <image class="banner mt10 {{currentBannerIndex==index?'active':''}}" src="{{item.pic}}" mode="aspectFill" />
-                            <text>{{item.title}}   {{item.listTime}}</text>
+                        <image class="banner mt10 {{currentBannerIndex==index?'active':''}}" src="{{item.pic}}"
+                               mode="aspectFill"/>
+                        <text>{{item.title}} {{item.listTime}}</text>
                         <!--</navigator>-->
                         <!--</navigator>-->
                     </view>
                     </view>
                 </swiper-item>
                 </swiper-item>
@@ -120,27 +149,28 @@
 
 
     <!--瀑布流-->
     <!--瀑布流-->
     <view class="masonry-box">
     <view class="masonry-box">
-        <masonry bind:go-detail="goActivityDetail" generic:masonry-item="img-box" id="masonry" interval-width="20rpx"></masonry>
+        <masonry bind:go-detail="goActivityDetail" generic:masonry-item="img-box" id="masonry"
+                 interval-width="20rpx"></masonry>
     </view>
     </view>
 
 
     <!--底部tab-->
     <!--底部tab-->
-    <import src="/templates/templates.wxml" />
-    <template is="tabBar" data='{{...tabcurrent}}' />
+    <import src="/templates/templates.wxml"/>
+    <template is="tabBar" data='{{...tabcurrent}}'/>
     <!--swiper-->
     <!--swiper-->
     <!--<view class="banner-box">-->
     <!--<view class="banner-box">-->
-        <!--<swiper indicator-dots="{{true}}"-->
-                <!--autoplay="{{true}}" interval="3000" duration="1000">-->
-            <!--<block wx:for="{{banner}}" wx:key="index">-->
-                <!--<navigator url="{{item.url}}" hover-class="navigator-hover">-->
-                    <!--<swiper-item class="banner-item">-->
-                        <!--<image src="{{item.image}}" class="slide-image"/>-->
-                    <!--</swiper-item>-->
-                <!--</navigator>-->
-            <!--</block>-->
-        <!--</swiper>-->
+    <!--<swiper indicator-dots="{{true}}"-->
+    <!--autoplay="{{true}}" interval="3000" duration="1000">-->
+    <!--<block wx:for="{{banner}}" wx:key="index">-->
+    <!--<navigator url="{{item.url}}" hover-class="navigator-hover">-->
+    <!--<swiper-item class="banner-item">-->
+    <!--<image src="{{item.image}}" class="slide-image"/>-->
+    <!--</swiper-item>-->
+    <!--</navigator>-->
+    <!--</block>-->
+    <!--</swiper>-->
     <!--</view>-->
     <!--</view>-->
     <!--去答题弹框-->
     <!--去答题弹框-->
-    <view class="input-box"  wx:if="{{is_showAnswer}}" catchtouchmove="disableScroll">
+    <view class="input-box" wx:if="{{is_showAnswer}}" catchtouchmove="disableScroll">
         <image class="sorry-img" src="../../images/sorry@2x.png"></image>
         <image class="sorry-img" src="../../images/sorry@2x.png"></image>
         <view class="title">目前只对</view>
         <view class="title">目前只对</view>
         <view class="title">首批会员开放发布功能</view>
         <view class="title">首批会员开放发布功能</view>
@@ -149,16 +179,17 @@
     </view>
     </view>
     <view class="modal_box" wx:if="{{is_showAnswer}}" bindtap="handleBackground" catchtouchmove="disableScroll"></view>
     <view class="modal_box" wx:if="{{is_showAnswer}}" bindtap="handleBackground" catchtouchmove="disableScroll"></view>
     <!--去完善个人信息弹框-->
     <!--去完善个人信息弹框-->
-    <view class="input-box"  wx:if="{{is_showUserInfo}}" catchtouchmove="disableScroll">
+    <view class="input-box" wx:if="{{is_showUserInfo}}" catchtouchmove="disableScroll">
         <image class="sorry-img" src="../../images/user_info@2x.png"></image>
         <image class="sorry-img" src="../../images/user_info@2x.png"></image>
         <view class="title">为了更好的体验</view>
         <view class="title">为了更好的体验</view>
         <view class="title">请先完善个人信息</view>
         <view class="title">请先完善个人信息</view>
         <view class="answer-btn" bindtap="goUserInfo">完成</view>
         <view class="answer-btn" bindtap="goUserInfo">完成</view>
     </view>
     </view>
-    <view class="modal_box" wx:if="{{is_showUserInfo}}" bindtap="handleBackground" catchtouchmove="disableScroll"></view>
+    <view class="modal_box" wx:if="{{is_showUserInfo}}" bindtap="handleBackground"
+          catchtouchmove="disableScroll"></view>
     <!--发布-->
     <!--发布-->
     <view class="release-btn-box" wx:if="{{is_showRelease}}">
     <view class="release-btn-box" wx:if="{{is_showRelease}}">
-        <view class="left-btn"  bindtap="releaseMeal">
+        <view class="left-btn" bindtap="releaseMeal">
             <image src="../../images/pincan@2x.png"></image>
             <image src="../../images/pincan@2x.png"></image>
             <view class="text">发布拼餐</view>
             <view class="text">发布拼餐</view>
         </view>
         </view>
@@ -171,7 +202,7 @@
 
 
 
 
     <!--分数>=80弹框-->
     <!--分数>=80弹框-->
-    <view class="input-box score-box"  wx:if="{{show_gold_modal}}" catchtouchmove="disableScroll">
+    <view class="input-box score-box" wx:if="{{show_gold_modal}}" catchtouchmove="disableScroll">
         <image class="sorry-img gold-img" src="../../images/gold@2x.png"></image>
         <image class="sorry-img gold-img" src="../../images/gold@2x.png"></image>
         <view class="title text">恭喜您</view>
         <view class="title text">恭喜您</view>
         <view class="title text">获得首批入场卷</view>
         <view class="title text">获得首批入场卷</view>
@@ -182,14 +213,16 @@
             <button class="answer-btn share" open-type="share">去分享</button>
             <button class="answer-btn share" open-type="share">去分享</button>
         </view>
         </view>
     </view>
     </view>
-    <view class="modal_box" wx:if="{{show_gold_modal}}" bindtap="handleBackground" catchtouchmove="disableScroll"></view>
+    <view class="modal_box" wx:if="{{show_gold_modal}}" bindtap="handleBackground"
+          catchtouchmove="disableScroll"></view>
 
 
     <!--分数<80弹框-->
     <!--分数<80弹框-->
-    <view class="input-box score-box normal-box"  wx:if="{{show_normal_modal}}" catchtouchmove="disableScroll">
+    <view class="input-box score-box normal-box" wx:if="{{show_normal_modal}}" catchtouchmove="disableScroll">
         <image class="sorry-img img" src="../../images/achieve-answer-img@2x.png"></image>
         <image class="sorry-img img" src="../../images/achieve-answer-img@2x.png"></image>
         <view class="title text margin">恭喜您获得入场卷</view>
         <view class="title text margin">恭喜您获得入场卷</view>
         <view class="title text margin">等待开放权限</view>
         <view class="title text margin">等待开放权限</view>
         <view class="answer-btn close close-btn" catchtap="close">随便看看</view>
         <view class="answer-btn close close-btn" catchtap="close">随便看看</view>
     </view>
     </view>
-    <view class="modal_box" wx:if="{{show_normal_modal}}" bindtap="handleBackground" catchtouchmove="disableScroll"></view>
+    <view class="modal_box" wx:if="{{show_normal_modal}}" bindtap="handleBackground"
+          catchtouchmove="disableScroll"></view>
 </view>
 </view>

@@ -15,6 +15,44 @@
 .visible-active {
 .visible-active {
     animation: visible-active 0.5s both;
     animation: visible-active 0.5s both;
 }
 }
+.section {
+    /* margin-top: 118rpx; */
+    display: flex;
+    position: fixed;
+    /*top:84rpx;*/
+    bottom:0;
+    left:0;
+    width: 100%;
+    height: 354rpx;
+    z-index:100;
+}
+.area_box {
+    width: 50%;
+    height: 354rpx;
+    background-color: #fff;
+    padding: 30rpx 0;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+.add-height-left {
+    height: 1107rpx;
+}
+.area-test {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+.area {
+    width: 100%;
+    height: 60rpx;
+    line-height: 60rpx;
+    /* background-color: #D5F0FF; */
+    font-size: 32rpx;
+    color: #000000;
+    text-align: center;
+}
 .head {
 .head {
   position:relative;
   position:relative;
 }
 }

@@ -65,7 +65,7 @@
     <view class='content_item' wx:for='{{list}}' wx:key="index" wx:if="{{list.length>0}}"
     <view class='content_item' wx:for='{{list}}' wx:key="index" wx:if="{{list.length>0}}"
           bindtap='goPostDetail' data-id="{{item.id}}" data-type="{{item.type}}">
           bindtap='goPostDetail' data-id="{{item.id}}" data-type="{{item.type}}">
         <!--<image src="http://pk86rwhci.bkt.clouddn.com/activity_img@2x.png"></image>-->
         <!--<image src="http://pk86rwhci.bkt.clouddn.com/activity_img@2x.png"></image>-->
-        <image src="{{item.pic}}"></image>
+        <image src="{{item.pic}}" mode="aspectFill"></image>
         <view class="title">
         <view class="title">
             <text class="area">{{item.address}}   {{item.time}}</text>
             <text class="area">{{item.address}}   {{item.time}}</text>
             <text class="num">还差{{item.people}}人</text>
             <text class="num">还差{{item.people}}人</text>

@@ -82,7 +82,7 @@
     <view class='content_item' wx:for='{{list}}' wx:key="index" wx:if="{{list.length>0}}"
     <view class='content_item' wx:for='{{list}}' wx:key="index" wx:if="{{list.length>0}}"
           bindtap='goPostDetail' data-id="{{item.id}}" data-type="{{item.type}}">
           bindtap='goPostDetail' data-id="{{item.id}}" data-type="{{item.type}}">
         <!--<image src="http://pk86rwhci.bkt.clouddn.com/activity_img@2x.png"></image>-->
         <!--<image src="http://pk86rwhci.bkt.clouddn.com/activity_img@2x.png"></image>-->
-        <image src="{{item.pic}}"></image>
+        <image src="{{item.pic}}"  mode="aspectFill"></image>
         <view class="title">
         <view class="title">
             <text class="area">{{item.addr}}   {{item.time}}</text>
             <text class="area">{{item.addr}}   {{item.time}}</text>
             <text class="num">还差{{item.people}}人</text>
             <text class="num">还差{{item.people}}人</text>

@@ -241,10 +241,10 @@ Page({
                     count:res.data.count,
                     count:res.data.count,
                     is_send:res.data.is_send,//能否参加1：不能2：能
                     is_send:res.data.is_send,//能否参加1：不能2：能
                 });
                 });
-                this.getLocalImage();
+                self.getCode();//获取二维码
+                // self.getImage();
+                // self.getLocalImage();
                 // self.countDown();
                 // self.countDown();
-
-
                 // let newTime = new Date().getTime();//当前时间戳
                 // let newTime = new Date().getTime();//当前时间戳
                 // let end_time = app.nextTime(this.data.end_time, this.data.over_hours);//截止时间
                 // let end_time = app.nextTime(this.data.end_time, this.data.over_hours);//截止时间
                 // let endTime = new Date(end_time).getTime(); //截止时间戳
                 // let endTime = new Date(end_time).getTime(); //截止时间戳
@@ -387,6 +387,35 @@ Page({
         console.log('详情options', options);
         console.log('详情options', options);
         this.setData({detail_id:+options.id?+options.id:''});
         this.setData({detail_id:+options.id?+options.id:''});
     },
     },
+    //获取活动二维码
+    getCode() {
+        const self = this;
+        let url = '/portal/Index/qrCode';
+        let params = {
+            id: self.data.detail_id,
+            token:wx.getStorageSync('token'),
+            type:2,//1拼活动，2拼餐
+        };
+        app.post(url, params, {}).then((res) => {
+            console.log('获取活动二维码', res);
+            if (+res.code === 1) {
+                self.setData({qr_code:res.data},() => {
+                    // console.log('二维码',self.data.qr_code);
+                    wx.getImageInfo({
+                        src: 'http://' + self.data.qr_code,
+                        success(res) {
+                            // console.log('二维码本地路径',res);
+                            self.setData({local_qr_code:res.path});
+                            self.getLocalImage();
+                        },
+                        fail() {
+                            console.log('失败');
+                        }
+                    })
+                });
+            }
+        })
+    },
     //点击分享
     //点击分享
     share() {
     share() {
         this.setData({show_canvas: true}, () => {
         this.setData({show_canvas: true}, () => {
@@ -405,64 +434,117 @@ Page({
     saveToPhone() {
     saveToPhone() {
         this.getPower();
         this.getPower();
     },
     },
-    //图片链接转成本地路径
+    //详情图链接转成本地路径
     getLocalImage() {
     getLocalImage() {
         const self = this;
         const self = this;
         wx.getImageInfo({
         wx.getImageInfo({
             src: self.data.detail.banner[0],
             src: self.data.detail.banner[0],
             success(res) {
             success(res) {
-                console.log('图片链接转成本地路径',res);
-                self.setData({local_img:res.path})
-                self.drawCard()
-                console.log(res.width)
-                console.log(res.height)
+                // console.log('详情图本地路径',res);
+                self.setData({local_img:res.path});
+                self.drawCard();
+                // console.log(res.width)
+                // console.log(res.height)
             }
             }
         })
         })
     },
     },
+    // 画圆角 ctx、x起点、y起点、w宽度、y高度、r圆角半径、fillColor填充颜色、strokeColor边框颜色
+    roundRect(ctx, x, y, w, h, r, fillColor, strokeColor) {
+        const self = this;
+        // 开始绘制
+        ctx.beginPath()
+
+        // 绘制左上角圆弧 Math.PI = 180度
+        // 圆心x起点、圆心y起点、半径、以3点钟方向顺时针旋转后确认的起始弧度、以3点钟方向顺时针旋转后确认的终止弧度
+        ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
+
+        // 绘制border-top
+        // 移动起点位置 x终点、y终点
+        ctx.moveTo(x + r, y)
+        // 画一条线 x终点、y终点
+        ctx.lineTo(x + w - r, y)
+        // self.data.ctx.lineTo(x + w, y + r)
+
+        // 绘制右上角圆弧
+        ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)
+
+        // 绘制border-right
+        ctx.lineTo(x + w, y + h - r)
+        // self.data.ctx.lineTo(x + w - r, y + h)
+
+        // 绘制右下角圆弧
+        ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)
+
+        // 绘制border-bottom
+        ctx.lineTo(x + r, y + h)
+        // self.data.ctx.lineTo(x, y + h - r)
+
+        // 绘制左下角圆弧
+        ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)
+
+        // 绘制border-left
+        ctx.lineTo(x, y + r)
+        // self.data.ctx.lineTo(x + r, y)
+
+        if (fillColor) {
+            // 因为边缘描边存在锯齿，最好指定使用 transparent 填充
+            ctx.setFillStyle(fillColor)
+            // 对绘画区域填充
+            ctx.fill()
+        }
+
+        if (strokeColor) {
+            // 因为边缘描边存在锯齿，最好指定使用 transparent 填充
+            ctx.setStrokeStyle(strokeColor)
+            // 画出当前路径的边框
+            ctx.stroke()
+        }
+        // 关闭一个路径
+        // self.data.ctx.closePath()
+
+        // 剪切，剪切之后的绘画绘制剪切区域内进行，需要save与restore
+        ctx.clip()
+    },
     drawCard() {
     drawCard() {
         console.log('开始画');
         console.log('开始画');
         const self = this;
         const self = this;
         //先创建一个画布
         //先创建一个画布
         const ctx = wx.createCanvasContext("canvas");
         const ctx = wx.createCanvasContext("canvas");
+        self.setData({ctx:ctx});
+        self.roundRect(ctx,0,0,300,302,10,'transparent','transparent');//画圆角
+        ctx.arc(150, 75, 50, 0, 2 * Math.PI);//剪切
+        ctx.setFillStyle('#ffffff');
+        ctx.fill();
+        ctx.clip();
         //填充背景色
         //填充背景色
-        ctx.fillStyle = '#fff';
-        ctx.fillRect(0, 0, 300, 150);
+        // ctx.fillStyle = '#fff';
+        ctx.fillRect(30, 30, 300, 150);
         console.log(self.data.local_img);
         console.log(self.data.local_img);
+        console.log(self.data.qr_code);
         //将图片转化为画布
         //将图片转化为画布
-        ctx.drawImage(self.data.local_img, 0, 0, 330, 150);
+        ctx.drawImage(self.data.local_img, 0, 0, 330, 170);//详情图
         console.log(111);
         console.log(111);
         // ctx.drawImage("../../../../images/tou.png", 20, 166, 30, 30);//头像
         // ctx.drawImage("../../../../images/tou.png", 20, 166, 30, 30);//头像
         // ctx.drawImage("../../../../images/code.jpg", 220, 209, 60, 60);//头像
         // ctx.drawImage("../../../../images/code.jpg", 220, 209, 60, 60);//头像
-        //用户名字
-        ctx.setFontSize(13);
-        ctx.setFillStyle('#333333');
+        ctx.drawImage(self.data.local_qr_code, 220, 209, 60, 60);//二维码
+        //标题
+        ctx.setFontSize(16);
+        ctx.setFillStyle('#000');
         ctx.textAlign = "left";
         ctx.textAlign = "left";
         console.log(111);
         console.log(111);
-        ctx.fillText(self.data.detail.userName, 69, 187);
+        ctx.fillText(self.data.detail.title, 26, 196.5);
+        ctx.fillText(self.data.detail.title, 25.5, 197);
         ctx.restore();
         ctx.restore();
-        //签到天数
-        ctx.setFontSize(17);
-        ctx.setFillStyle('#2C82E6');
-        ctx.fillText('连续', 25, 229);
-        ctx.restore();
-        ctx.setFillStyle('#2C82E6');
-        ctx.font = 'bold 22px sans-serif';
-        ctx.fillText(self.data.count, 63, 229);
-        ctx.restore();
-        ctx.setFontSize(17);
-        ctx.setFillStyle('#2C82E6');
-        ctx.font = 'normal 17px sans-serif';
-        ctx.fillText('天签到', 80, 229);
-        ctx.restore();
-
-        const text = self.data.detail.content;
-        // ctx.fillText('此处放文案此处放文案此处放文案此处放文案此处放文案此处放文案此处放文案', 25, 252,200);
-        // ctx.restore();
+        //地点
+        ctx.setFontSize(13);
+        ctx.setFillStyle('#000000');
+        ctx.fillText('地点：', 25, 229);
+        const text = self.data.detail.address;
         var chr = text.split("");//这个方法是将一个字符串分割成字符串数组
         var chr = text.split("");//这个方法是将一个字符串分割成字符串数组
         var temp = "";
         var temp = "";
         var row = [];
         var row = [];
         ctx.setFontSize(13);
         ctx.setFontSize(13);
-        ctx.setFillStyle('#333333');
+        ctx.setFillStyle('#000000');
         for (var a = 0; a < chr.length; a++) {
         for (var a = 0; a < chr.length; a++) {
             if (ctx.measureText(temp).width < 170) {
             if (ctx.measureText(temp).width < 170) {
                 temp += chr[a];
                 temp += chr[a];
@@ -475,10 +557,10 @@ Page({
         }
         }
         row.push(temp);
         row.push(temp);
 
 
-        //如果数组长度大于2 则截取前两个
-        if (row.length > 2) {
-            var rowCut = row.slice(0, 2);
-            var rowPart = rowCut[1];
+        //如果数组长度大于1 则截取前1个
+        if (row.length > 1) {
+            var rowCut = row.slice(0, 1);
+            var rowPart = rowCut[0];
             var test = "";
             var test = "";
             var empty = [];
             var empty = [];
             for (var a = 0; a < rowPart.length; a++) {
             for (var a = 0; a < rowPart.length; a++) {
@@ -490,15 +572,20 @@ Page({
                 }
                 }
             }
             }
             empty.push(test);
             empty.push(test);
-            var group = empty[0] + "...";//这里只显示两行，超出的用...表示
-            rowCut.splice(1, 1, group);
+            var group = empty[0] + "...";//这里只显示一行，超出的用...表示
+            rowCut.splice(0, 1, group);
             row = rowCut;
             row = rowCut;
         }
         }
         for (var b = 0; b < row.length; b++) {
         for (var b = 0; b < row.length; b++) {
-            ctx.fillText(row[b], 25, 252 + b * 16, 170);
+            ctx.fillText(row[b], 63, 229 + b * 16, 150);
         }
         }
         ctx.restore();
         ctx.restore();
-
+        //时间
+        ctx.setFontSize(13);
+        ctx.setFillStyle('#333333');
+        ctx.fillText('时间：', 25, 249);
+        ctx.fillText(self.data.end_time, 63, 249);
+        ctx.restore();
         // ctx.drawImage("../../../../images/home-banner.png", 0, 0, 250, 150)
         // ctx.drawImage("../../../../images/home-banner.png", 0, 0, 250, 150)
         //成功执行，draw方法中进行回调
         //成功执行，draw方法中进行回调
         ctx.draw(true, function () {
         ctx.draw(true, function () {
@@ -610,6 +697,7 @@ Page({
     },
     },
     onShareAppMessage: function() {
     onShareAppMessage: function() {
         let self = this;
         let self = this;
+        self.setData({show_canvas:false,});
         // 设置菜单中的转发按钮触发转发事件时的转发内容
         // 设置菜单中的转发按钮触发转发事件时的转发内容
         var shareObj = {
         var shareObj = {
             title: '火柴西路', // 默认是小程序的名称(可以写slogan等)
             title: '火柴西路', // 默认是小程序的名称(可以写slogan等)

@@ -53,7 +53,7 @@
                 </navigator>
                 </navigator>
             </block>
             </block>
         </swiper>
         </swiper>
-        <view class="dots" wx:if="{{}}">
+        <view class="dots">
             <block wx:for="{{detail.banner}}" wx:key="index" wx:for-index="idx">
             <block wx:for="{{detail.banner}}" wx:key="index" wx:for-index="idx">
                 <view class="dot{{idx == current_swiper ? ' active' : ''}}"></view>
                 <view class="dot{{idx == current_swiper ? ' active' : ''}}"></view>
             </block>
             </block>

@@ -587,7 +587,7 @@ swiper {
     height: 100%;
     height: 100%;
     position: fixed;
     position: fixed;
     z-index: 20;
     z-index: 20;
-    background-color: rgba(255, 255, 255, 0.93);
+    background-color: rgba(0, 0, 0, 0.3);
     display: -webkit-box;
     display: -webkit-box;
     display: -ms-flexbox;
     display: -ms-flexbox;
     display: flex;
     display: flex;
@@ -604,18 +604,19 @@ swiper {
     flex-direction: column;
     flex-direction: column;
 }
 }
 .shadow {
 .shadow {
+    /* background:#fff; */
     box-shadow: 1rpx 1rpx 40rpx rgba(101, 101, 101, 0.1);
     box-shadow: 1rpx 1rpx 40rpx rgba(101, 101, 101, 0.1);
 }
 }
 .canvas-poster {
 .canvas-poster {
     /* position: fixed; */
     /* position: fixed; */
-    width: 600rpx;
-    height: 604rpx;
+    width: 553rpx;
+    height: 532rpx;
     /* top: 100%; */
     /* top: 100%; */
     /* left: 100%; */
     /* left: 100%; */
     /* overflow: hidden;  */
     /* overflow: hidden;  */
 }
 }
 .button-box {
 .button-box {
-    width: 600rpx;
+    width: 545rpx;
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
     justify-content: space-between;
     justify-content: space-between;
@@ -625,11 +626,11 @@ swiper {
 .save-to-phone, .share-btn{
 .save-to-phone, .share-btn{
     width: 50%;
     width: 50%;
     line-height: 56rpx;
     line-height: 56rpx;
-    color:#999;
+    color:#fff;
     font-size: 24rpx;
     font-size: 24rpx;
     text-align: center;
     text-align: center;
     padding:0;
     padding:0;
-    background:#fff;
+    background:#323232;
     border-radius: 0;
     border-radius: 0;
 }
 }
 .share-btn::after {
 .share-btn::after {
@@ -637,6 +638,10 @@ swiper {
 }
 }
 .save-to-phone {
 .save-to-phone {
     border-right: 1rpx solid #E8E8E8;
     border-right: 1rpx solid #E8E8E8;
+    border-bottom-left-radius: 20rpx;
+}
+.share-btn {
+    border-bottom-right-radius: 20rpx;
 }
 }
 .close-btn {
 .close-btn {
     color: #999999;
     color: #999999;
@@ -647,5 +652,5 @@ swiper {
 }
 }
 .close-btn .icon-guanbi {
 .close-btn .icon-guanbi {
     font-size: 50rpx;
     font-size: 50rpx;
-    color: #999999;
+    color: #fff;
 }
 }