miniprogram / match-west-road · 提交

转到一个项目

作者 wumengyu
提交 1e0cde0180dd3b3c343d9179dea0378cfe0319e7 1 个父辈 c17f3120

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

内嵌 并排对比
正在显示 9 个修改的文件 包含 498 行增加 和 66 行删除
@@ -381,6 +381,228 @@ Page({ @@ -381,6 +381,228 @@ Page({
381 } 381 }
382 } 382 }
383 }, 383 },
  384 + //点击分享
  385 + share() {
  386 + this.setData({show_canvas: true}, () => {
  387 + this.drawCard();
  388 + })
  389 + },
  390 + hideCanvasMask() {
  391 + // this.setData({show_canvas: true});
  392 + },
  393 + //关闭分享卡片
  394 + closeCanvas() {
  395 + this.setData({show_canvas: false});
  396 + // wx.navigateBack({delta:1})
  397 + },
  398 + //保存图片到手机相册
  399 + saveToPhone() {
  400 + this.getPower();
  401 + },
  402 + //图片链接转成本地路径
  403 + getLocalImage() {
  404 + // http://doctor_wechat.w.bronet.cn/20190122101152.png
  405 + const self = this;
  406 + wx.getImageInfo({
  407 + src: self.data.detail.banner[0],
  408 + success(res) {
  409 + console.log('图片链接转成本地路径',res);
  410 + self.setData({local_img:res.path})
  411 + self.drawCard()
  412 + console.log(res.width)
  413 + console.log(res.height)
  414 + }
  415 + })
  416 + },
  417 + drawCard() {
  418 + console.log('开始画');
  419 + const self = this;
  420 + //先创建一个画布
  421 + const ctx = wx.createCanvasContext("canvas");
  422 + //填充背景色
  423 + ctx.fillStyle = '#fff';
  424 + ctx.fillRect(0, 0, 300, 150);
  425 + console.log(self.data.local_img);
  426 + //将图片转化为画布
  427 + ctx.drawImage(self.data.local_img, 0, 0, 330, 150);
  428 + console.log(111);
  429 + // ctx.drawImage("../../../../images/tou.png", 20, 166, 30, 30);//头像
  430 + // ctx.drawImage("../../../../images/code.jpg", 220, 209, 60, 60);//头像
  431 + //用户名字
  432 + ctx.setFontSize(13);
  433 + ctx.setFillStyle('#333333');
  434 + ctx.textAlign = "left";
  435 + console.log(111);
  436 + ctx.fillText(self.data.detail.userName, 69, 187);
  437 + ctx.restore();
  438 + //签到天数
  439 + ctx.setFontSize(17);
  440 + ctx.setFillStyle('#2C82E6');
  441 + ctx.fillText('连续', 25, 229);
  442 + ctx.restore();
  443 + ctx.setFillStyle('#2C82E6');
  444 + ctx.font = 'bold 22px sans-serif';
  445 + ctx.fillText(self.data.count, 63, 229);
  446 + ctx.restore();
  447 + ctx.setFontSize(17);
  448 + ctx.setFillStyle('#2C82E6');
  449 + ctx.font = 'normal 17px sans-serif';
  450 + ctx.fillText('天签到', 80, 229);
  451 + ctx.restore();
  452 +
  453 + const text = self.data.detail.content;
  454 + // ctx.fillText('此处放文案此处放文案此处放文案此处放文案此处放文案此处放文案此处放文案', 25, 252,200);
  455 + // ctx.restore();
  456 + var chr = text.split("");//这个方法是将一个字符串分割成字符串数组
  457 + var temp = "";
  458 + var row = [];
  459 + ctx.setFontSize(13);
  460 + ctx.setFillStyle('#333333');
  461 + for (var a = 0; a < chr.length; a++) {
  462 + if (ctx.measureText(temp).width < 170) {
  463 + temp += chr[a];
  464 + }
  465 + else {
  466 + a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比
  467 + row.push(temp);
  468 + temp = "";
  469 + }
  470 + }
  471 + row.push(temp);
  472 +
  473 + //如果数组长度大于2 则截取前两个
  474 + if (row.length > 2) {
  475 + var rowCut = row.slice(0, 2);
  476 + var rowPart = rowCut[1];
  477 + var test = "";
  478 + var empty = [];
  479 + for (var a = 0; a < rowPart.length; a++) {
  480 + if (ctx.measureText(test).width < 170) {
  481 + test += rowPart[a];
  482 + }
  483 + else {
  484 + break;
  485 + }
  486 + }
  487 + empty.push(test);
  488 + var group = empty[0] + "...";//这里只显示两行，超出的用...表示
  489 + rowCut.splice(1, 1, group);
  490 + row = rowCut;
  491 + }
  492 + for (var b = 0; b < row.length; b++) {
  493 + ctx.fillText(row[b], 25, 252 + b * 16, 170);
  494 + }
  495 + ctx.restore();
  496 +
  497 + // ctx.drawImage("../../../../images/home-banner.png", 0, 0, 250, 150)
  498 + //成功执行，draw方法中进行回调
  499 + ctx.draw(true, function () {
  500 + // wx.hideLoading();
  501 + console.log("draw callback success");
  502 + self.setData({can_save: true,show_canvas: true});
  503 + console.log(self.data.can_save);
  504 + })
  505 + },
  506 + //获取保存到相册的权限
  507 + getPower() {
  508 + const that = this;
  509 + //保存临时图片
  510 + wx.getSetting({
  511 + success(res) {
  512 + if (!res.authSetting['scope.writePhotosAlbum']) {
  513 + wx.authorize({
  514 + scope: 'scope.writePhotosAlbum',
  515 + success() { //这里是用户同意授权后的回调
  516 + that.savePic();
  517 + },
  518 + fail() { //这里是用户拒绝授权后的回调
  519 + wx.showModal({
  520 + title: '提示',
  521 + content: '若不打开授权，则无法将图片保存在相册中！',
  522 + showCancel: true,
  523 + cancelText: '暂不授权',
  524 + cancelColor: '#000000',
  525 + confirmText: '去授权',
  526 + confirmColor: '#3CC51F',
  527 + success: function (res) {
  528 + if (res.confirm) {
  529 + wx.openSetting({
  530 + //调起客户端小程序设置界面，返回用户设置的操作结果。
  531 + success: function (ret) {
  532 + if (ret.authSetting["scope.writePhotosAlbum"] == true) {
  533 + wx.showToast({
  534 + title: '授权成功',
  535 + icon: 'none',
  536 + duration: 1000
  537 + });
  538 + //再次授权，保存到相册
  539 + that.savePic();
  540 + } else {
  541 + wx.showToast({
  542 + title: '授权失败',
  543 + icon: 'none',
  544 + duration: 1000
  545 + })
  546 + }
  547 + }
  548 + })
  549 + } else {
  550 + wx.showToast({
  551 + title: '授权失败',
  552 + icon: 'none',
  553 + duration: 1000
  554 + })
  555 + // console.log('用户点击取消')
  556 + }
  557 + }
  558 + })
  559 + }
  560 + })
  561 + } else { //用户已经授权过了
  562 + console.log('用户已经授权过了')
  563 + that.savePic();
  564 + }
  565 + }
  566 + });
  567 +
  568 + },
  569 + savePic() {
  570 + console.log('是否能保存',this.data.can_save);
  571 + if(this.data.can_save) {
  572 + wx.canvasToTempFilePath({
  573 + x: 0,
  574 + y: 0,
  575 + width: 300,
  576 + height: 300,
  577 + destWidth: 300,
  578 + destHeight: 300,
  579 + canvasId: 'canvas',
  580 + fileType: 'jpg',
  581 + quality:1,
  582 + success: function (res) {
  583 + console.log("get tempfilepath(success) is:", res.tempFilePath);
  584 + //将图片保存在系统相册中(应先获取权限，)
  585 + wx.saveImageToPhotosAlbum({
  586 + filePath: res.tempFilePath,
  587 + success(res) {
  588 + wx.showToast({title:'保存成功',icon:'none'});
  589 + console.log("save photo is success")
  590 + },
  591 + fail: function () {
  592 + wx.showToast({title:'保存失败',icon:'none'});
  593 + console.log("save photo is fail")
  594 + }
  595 + })
  596 + },
  597 + fail: function () {
  598 + console.log('get tempfilepath is fail')
  599 + }
  600 + })
  601 + }else {
  602 + wx.showLoading({title:'加载中',icon:'loading',duration:1000})
  603 + }
  604 +
  605 + },
384 /** 606 /**
385 * 生命周期函数--监听页面加载 607 * 生命周期函数--监听页面加载
386 */ 608 */
@@ -6,6 +6,7 @@ import mock from './mock.js'//拿到的数据 @@ -6,6 +6,7 @@ import mock from './mock.js'//拿到的数据
6 6
7 Page({ 7 Page({
8 data: { 8 data: {
  9 + is_show_city:false,
9 items: [], 10 items: [],
10 slide: [], 11 slide: [],
11 cate: [], 12 cate: [],
@@ -44,7 +45,7 @@ Page({ @@ -44,7 +45,7 @@ Page({
44 // Do something when catch error 45 // Do something when catch error
45 } 46 }
46 }, 47 },
47 - //获取城市列表 48 + //获取国内城市列表
48 getCityList() { 49 getCityList() {
49 const self = this; 50 const self = this;
50 let url = '/portal/Index/cityList'; 51 let url = '/portal/Index/cityList';
@@ -62,6 +63,45 @@ Page({ @@ -62,6 +63,45 @@ Page({
62 } 63 }
63 }) 64 })
64 }, 65 },
  66 + //获取国外名
  67 + getAbroadList() {
  68 + const self = this;
  69 + let url = '/portal/Index/addr';
  70 + let params = {
  71 + token: wx.getStorageSync('token'),
  72 + };
  73 + app.post(url, params, {}).then((res) => {
  74 + console.log('获取国外列表', res);
  75 + if (+res.code === 1) {
  76 + const arr = [];
  77 + res.data.list.forEach((item) => {
  78 + arr.push(item.title)
  79 + });
  80 + self.setData({
  81 + Abroad_city_picker_list: arr,
  82 + AbroadCityList:res.data.list,
  83 + });
  84 + }
  85 + })
  86 + },
  87 + chooseCity() {
  88 + this.setData({is_show_city:!this.data.is_show_city})
  89 + },
  90 + chooseDomesticCity(e) {
  91 + this.setData({is_show_city:false});
  92 + },
  93 + chooseAbroadCity(e) {
  94 + this.setData({
  95 + current_city: e.detail.value,
  96 + is_city_change: true,
  97 + is_show_city:false
  98 + });
  99 + const lat = this.data.cityList[e.detail.value].latng.split(',')[1];
  100 + const lng = this.data.cityList[e.detail.value].latng.split(',')[0];
  101 + this.setData({lat: lat, lng: lng,addr:this.data.cityList[e.detail.value].title});
  102 + // console.log('lat', 'lng',lat,lng);
  103 + this.getIndex();
  104 + },
65 //切换城市 105 //切换城市
66 cityPickerChange(e) { 106 cityPickerChange(e) {
67 this.setData({ 107 this.setData({
@@ -109,7 +149,12 @@ Page({ @@ -109,7 +149,12 @@ Page({
109 }, 149 },
110 handleBackground() { 150 handleBackground() {
111 console.log('dianji'); 151 console.log('dianji');
112 - this.setData({is_showAnswer: false, is_showUserInfo: false, is_showRelease: false,}) 152 + this.setData({
  153 + is_showAnswer: false,
  154 + is_showUserInfo: false,
  155 + is_showRelease: false,
  156 + is_show_city:false,
  157 + })
113 }, 158 },
114 //进入分类详情 159 //进入分类详情
115 goTypeDetail(e) { 160 goTypeDetail(e) {
@@ -384,6 +429,7 @@ Page({ @@ -384,6 +429,7 @@ Page({
384 }, 429 },
385 onLoad: function () { 430 onLoad: function () {
386 this.getCityList(); 431 this.getCityList();
  432 + this.getAbroadList();
387 this._doRefreshMasonry(this.data.items) 433 this._doRefreshMasonry(this.data.items)
388 }, 434 },
389 onShow() { 435 onShow() {
@@ -3,19 +3,46 @@ @@ -3,19 +3,46 @@
3 <!--swiper--> 3 <!--swiper-->
4 <view class="head"> 4 <view class="head">
5 <view class="position {{hidden_top?'hidden-active':'visible-active'}}"> 5 <view class="position {{hidden_top?'hidden-active':'visible-active'}}">
6 - <picker class="picker" bindchange="cityPickerChange" value="{{current_city}}" range="{{city_picker_list}}" class="picker"> 6 + <!--<picker class="picker" bindchange="cityPickerChange" value="{{current_city}}" range="{{city_picker_list}}" class="picker">-->
  7 + <!--<view class="left">-->
  8 + <!--<view class="iconfont icon-location"></view>-->
  9 + <!--<text>{{city_picker_list[current_city] || china_city}}</text>-->
  10 + <!--<view class="iconfont icon-arrow-down"></view>-->
  11 + <!--</view>-->
  12 + <!--</picker>-->
  13 + <view class="picker" bindtap="chooseCity" value="{{current_city}}" range="{{city_picker_list}}"
  14 + class="picker">
7 <view class="left"> 15 <view class="left">
8 <view class="iconfont icon-location"></view> 16 <view class="iconfont icon-location"></view>
9 <text>{{city_picker_list[current_city] || china_city}}</text> 17 <text>{{city_picker_list[current_city] || china_city}}</text>
10 <view class="iconfont icon-arrow-down"></view> 18 <view class="iconfont icon-arrow-down"></view>
11 </view> 19 </view>
12 - </picker> 20 + </view>
13 <view class="right" bindtap="search"> 21 <view class="right" bindtap="search">
14 <view class="input"></view> 22 <view class="input"></view>
15 <image src="../../images/search@2x.png" class="search-icon"></image> 23 <image src="../../images/search@2x.png" class="search-icon"></image>
16 <!--<view class="iconfont icon-arrow-down"></view>--> 24 <!--<view class="iconfont icon-arrow-down"></view>-->
17 </view> 25 </view>
18 </view> 26 </view>
  27 + <view class="section {{is_show_city?'visible-active':'hidden-active'}}" wx:if="{{is_show_city}}">
  28 + <scroll-view class="area_box {{is_long_screen?'add-height-left':''}}" scroll-y>
  29 + <block wx:for="{{city_picker_list}}" wx:key="index">
  30 + <view class="area-test" data-index="{{index}}" wx:for-index="idx" bindtap="chooseDomesticCity"
  31 + data-id="{{item.id}}">
  32 + <view class="area">{{item}}</view>
  33 + </view>
  34 + </block>
  35 + </scroll-view>
  36 + <scroll-view class="area_box {{is_long_screen?'add-height-left':''}}" scroll-y>
  37 + <block wx:for="{{Abroad_city_picker_list}}" wx:key="index">
  38 + <view class="area-test" data-index="{{index}}" wx:for-index="idx" bindtap="chooseAbroadCity"
  39 + data-id="{{item.id}}">
  40 + <view class="area">{{item}}</view>
  41 + </view>
  42 + </block>
  43 + </scroll-view>
  44 + </view>
  45 + <view class="modal_box" wx:if="{{is_show_city}}" bindtap="handleBackground" catchtouchmove="disableScroll"></view>
19 <swiper indicator-dots="{{false}}" current="{{current}}" bindchange="swiperChange" 46 <swiper indicator-dots="{{false}}" current="{{current}}" bindchange="swiperChange"
20 autoplay="{{true}}" interval="3000" duration="1000"> 47 autoplay="{{true}}" interval="3000" duration="1000">
21 <block wx:for="{{slide}}" wx:key="index"> 48 <block wx:for="{{slide}}" wx:key="index">
@@ -58,9 +85,10 @@ @@ -58,9 +85,10 @@
58 <!--<text slot="footer" style="color: #a1a1a1; margin-left: 10px;">去看看</text>--> 85 <!--<text slot="footer" style="color: #a1a1a1; margin-left: 10px;">去看看</text>-->
59 <!--</wux-notice-bar>--> 86 <!--</wux-notice-bar>-->
60 <!--</view>--> 87 <!--</view>-->
61 - <swiper class="tab-right" style='' vertical="true" autoplay="true" circular="true" interval="3000" display-multiple-items='1'> 88 + <swiper class="tab-right" style='' vertical="true" autoplay="true" circular="true" interval="3000"
  89 + display-multiple-items='1'>
62 <view class="right-item"> 90 <view class="right-item">
63 - <block wx:for-index="idx" wx:for='{{noticeList}}' wx:key="index" > 91 + <block wx:for-index="idx" wx:for='{{noticeList}}' wx:key="index">
64 <swiper-item> 92 <swiper-item>
65 <view class='content-item' bindtap="goNotice" data-id="{{item.id}}"> 93 <view class='content-item' bindtap="goNotice" data-id="{{item.id}}">
66 <text>{{item.title}}</text> 94 <text>{{item.title}}</text>
@@ -100,7 +128,8 @@ @@ -100,7 +128,8 @@
100 <swiper-item> 128 <swiper-item>
101 <view class="fix pl5 pr5 box_bb" bindtap="goMealDetail" data-id="{{item.id}}"> 129 <view class="fix pl5 pr5 box_bb" bindtap="goMealDetail" data-id="{{item.id}}">
102 <!--<navigator url="">--> 130 <!--<navigator url="">-->
103 - <image class="banner mt10 {{currentBannerIndex==index?'active':''}}" src="{{item.pic}}" mode="aspectFill" /> 131 + <image class="banner mt10 {{currentBannerIndex==index?'active':''}}" src="{{item.pic}}"
  132 + mode="aspectFill"/>
104 <text>{{item.title}} {{item.listTime}}</text> 133 <text>{{item.title}} {{item.listTime}}</text>
105 <!--</navigator>--> 134 <!--</navigator>-->
106 </view> 135 </view>
@@ -120,12 +149,13 @@ @@ -120,12 +149,13 @@
120 149
121 <!--瀑布流--> 150 <!--瀑布流-->
122 <view class="masonry-box"> 151 <view class="masonry-box">
123 - <masonry bind:go-detail="goActivityDetail" generic:masonry-item="img-box" id="masonry" interval-width="20rpx"></masonry> 152 + <masonry bind:go-detail="goActivityDetail" generic:masonry-item="img-box" id="masonry"
  153 + interval-width="20rpx"></masonry>
124 </view> 154 </view>
125 155
126 <!--底部tab--> 156 <!--底部tab-->
127 - <import src="/templates/templates.wxml" />  
128 - <template is="tabBar" data='{{...tabcurrent}}' /> 157 + <import src="/templates/templates.wxml"/>
  158 + <template is="tabBar" data='{{...tabcurrent}}'/>
129 <!--swiper--> 159 <!--swiper-->
130 <!--<view class="banner-box">--> 160 <!--<view class="banner-box">-->
131 <!--<swiper indicator-dots="{{true}}"--> 161 <!--<swiper indicator-dots="{{true}}"-->
@@ -155,7 +185,8 @@ @@ -155,7 +185,8 @@
155 <view class="title">请先完善个人信息</view> 185 <view class="title">请先完善个人信息</view>
156 <view class="answer-btn" bindtap="goUserInfo">完成</view> 186 <view class="answer-btn" bindtap="goUserInfo">完成</view>
157 </view> 187 </view>
158 - <view class="modal_box" wx:if="{{is_showUserInfo}}" bindtap="handleBackground" catchtouchmove="disableScroll"></view> 188 + <view class="modal_box" wx:if="{{is_showUserInfo}}" bindtap="handleBackground"
  189 + catchtouchmove="disableScroll"></view>
159 <!--发布--> 190 <!--发布-->
160 <view class="release-btn-box" wx:if="{{is_showRelease}}"> 191 <view class="release-btn-box" wx:if="{{is_showRelease}}">
161 <view class="left-btn" bindtap="releaseMeal"> 192 <view class="left-btn" bindtap="releaseMeal">
@@ -182,7 +213,8 @@ @@ -182,7 +213,8 @@
182 <button class="answer-btn share" open-type="share">去分享</button> 213 <button class="answer-btn share" open-type="share">去分享</button>
183 </view> 214 </view>
184 </view> 215 </view>
185 - <view class="modal_box" wx:if="{{show_gold_modal}}" bindtap="handleBackground" catchtouchmove="disableScroll"></view> 216 + <view class="modal_box" wx:if="{{show_gold_modal}}" bindtap="handleBackground"
  217 + catchtouchmove="disableScroll"></view>
186 218
187 <!--分数<80弹框--> 219 <!--分数<80弹框-->
188 <view class="input-box score-box normal-box" wx:if="{{show_normal_modal}}" catchtouchmove="disableScroll"> 220 <view class="input-box score-box normal-box" wx:if="{{show_normal_modal}}" catchtouchmove="disableScroll">
@@ -191,5 +223,6 @@ @@ -191,5 +223,6 @@
191 <view class="title text margin">等待开放权限</view> 223 <view class="title text margin">等待开放权限</view>
192 <view class="answer-btn close close-btn" catchtap="close">随便看看</view> 224 <view class="answer-btn close close-btn" catchtap="close">随便看看</view>
193 </view> 225 </view>
194 - <view class="modal_box" wx:if="{{show_normal_modal}}" bindtap="handleBackground" catchtouchmove="disableScroll"></view> 226 + <view class="modal_box" wx:if="{{show_normal_modal}}" bindtap="handleBackground"
  227 + catchtouchmove="disableScroll"></view>
195 </view> 228 </view>
@@ -15,6 +15,44 @@ @@ -15,6 +15,44 @@
15 .visible-active { 15 .visible-active {
16 animation: visible-active 0.5s both; 16 animation: visible-active 0.5s both;
17 } 17 }
  18 +.section {
  19 + /* margin-top: 118rpx; */
  20 + display: flex;
  21 + position: fixed;
  22 + /*top:84rpx;*/
  23 + bottom:0;
  24 + left:0;
  25 + width: 100%;
  26 + height: 354rpx;
  27 + z-index:100;
  28 +}
  29 +.area_box {
  30 + width: 50%;
  31 + height: 354rpx;
  32 + background-color: #fff;
  33 + padding: 30rpx 0;
  34 + -webkit-box-sizing: border-box;
  35 + -moz-box-sizing: border-box;
  36 + box-sizing: border-box;
  37 +}
  38 +.add-height-left {
  39 + height: 1107rpx;
  40 +}
  41 +.area-test {
  42 + display: flex;
  43 + flex-direction: column;
  44 + align-items: center;
  45 + justify-content: center;
  46 +}
  47 +.area {
  48 + width: 100%;
  49 + height: 60rpx;
  50 + line-height: 60rpx;
  51 + /* background-color: #D5F0FF; */
  52 + font-size: 32rpx;
  53 + color: #000000;
  54 + text-align: center;
  55 +}
18 .head { 56 .head {
19 position:relative; 57 position:relative;
20 } 58 }
@@ -65,7 +65,7 @@ @@ -65,7 +65,7 @@
65 <view class='content_item' wx:for='{{list}}' wx:key="index" wx:if="{{list.length>0}}" 65 <view class='content_item' wx:for='{{list}}' wx:key="index" wx:if="{{list.length>0}}"
66 bindtap='goPostDetail' data-id="{{item.id}}" data-type="{{item.type}}"> 66 bindtap='goPostDetail' data-id="{{item.id}}" data-type="{{item.type}}">
67 <!--<image src="http://pk86rwhci.bkt.clouddn.com/activity_img@2x.png"></image>--> 67 <!--<image src="http://pk86rwhci.bkt.clouddn.com/activity_img@2x.png"></image>-->
68 - <image src="{{item.pic}}"></image> 68 + <image src="{{item.pic}}" mode="aspectFill"></image>
69 <view class="title"> 69 <view class="title">
70 <text class="area">{{item.address}} {{item.time}}</text> 70 <text class="area">{{item.address}} {{item.time}}</text>
71 <text class="num">还差{{item.people}}人</text> 71 <text class="num">还差{{item.people}}人</text>
@@ -82,7 +82,7 @@ @@ -82,7 +82,7 @@
82 <view class='content_item' wx:for='{{list}}' wx:key="index" wx:if="{{list.length>0}}" 82 <view class='content_item' wx:for='{{list}}' wx:key="index" wx:if="{{list.length>0}}"
83 bindtap='goPostDetail' data-id="{{item.id}}" data-type="{{item.type}}"> 83 bindtap='goPostDetail' data-id="{{item.id}}" data-type="{{item.type}}">
84 <!--<image src="http://pk86rwhci.bkt.clouddn.com/activity_img@2x.png"></image>--> 84 <!--<image src="http://pk86rwhci.bkt.clouddn.com/activity_img@2x.png"></image>-->
85 - <image src="{{item.pic}}"></image> 85 + <image src="{{item.pic}}" mode="aspectFill"></image>
86 <view class="title"> 86 <view class="title">
87 <text class="area">{{item.addr}} {{item.time}}</text> 87 <text class="area">{{item.addr}} {{item.time}}</text>
88 <text class="num">还差{{item.people}}人</text> 88 <text class="num">还差{{item.people}}人</text>
@@ -241,10 +241,10 @@ Page({ @@ -241,10 +241,10 @@ Page({
241 count:res.data.count, 241 count:res.data.count,
242 is_send:res.data.is_send,//能否参加1：不能2：能 242 is_send:res.data.is_send,//能否参加1：不能2：能
243 }); 243 });
244 - this.getLocalImage(); 244 + self.getCode();//获取二维码
  245 + // self.getImage();
  246 + // self.getLocalImage();
245 // self.countDown(); 247 // self.countDown();
246 -  
247 -  
248 // let newTime = new Date().getTime();//当前时间戳 248 // let newTime = new Date().getTime();//当前时间戳
249 // let end_time = app.nextTime(this.data.end_time, this.data.over_hours);//截止时间 249 // let end_time = app.nextTime(this.data.end_time, this.data.over_hours);//截止时间
250 // let endTime = new Date(end_time).getTime(); //截止时间戳 250 // let endTime = new Date(end_time).getTime(); //截止时间戳
@@ -387,6 +387,35 @@ Page({ @@ -387,6 +387,35 @@ Page({
387 console.log('详情options', options); 387 console.log('详情options', options);
388 this.setData({detail_id:+options.id?+options.id:''}); 388 this.setData({detail_id:+options.id?+options.id:''});
389 }, 389 },
  390 + //获取活动二维码
  391 + getCode() {
  392 + const self = this;
  393 + let url = '/portal/Index/qrCode';
  394 + let params = {
  395 + id: self.data.detail_id,
  396 + token:wx.getStorageSync('token'),
  397 + type:2,//1拼活动，2拼餐
  398 + };
  399 + app.post(url, params, {}).then((res) => {
  400 + console.log('获取活动二维码', res);
  401 + if (+res.code === 1) {
  402 + self.setData({qr_code:res.data},() => {
  403 + // console.log('二维码',self.data.qr_code);
  404 + wx.getImageInfo({
  405 + src: 'http://' + self.data.qr_code,
  406 + success(res) {
  407 + // console.log('二维码本地路径',res);
  408 + self.setData({local_qr_code:res.path});
  409 + self.getLocalImage();
  410 + },
  411 + fail() {
  412 + console.log('失败');
  413 + }
  414 + })
  415 + });
  416 + }
  417 + })
  418 + },
390 //点击分享 419 //点击分享
391 share() { 420 share() {
392 this.setData({show_canvas: true}, () => { 421 this.setData({show_canvas: true}, () => {
@@ -405,64 +434,117 @@ Page({ @@ -405,64 +434,117 @@ Page({
405 saveToPhone() { 434 saveToPhone() {
406 this.getPower(); 435 this.getPower();
407 }, 436 },
408 - //图片链接转成本地路径 437 + //详情图链接转成本地路径
409 getLocalImage() { 438 getLocalImage() {
410 const self = this; 439 const self = this;
411 wx.getImageInfo({ 440 wx.getImageInfo({
412 src: self.data.detail.banner[0], 441 src: self.data.detail.banner[0],
413 success(res) { 442 success(res) {
414 - console.log('图片链接转成本地路径',res);  
415 - self.setData({local_img:res.path})  
416 - self.drawCard()  
417 - console.log(res.width)  
418 - console.log(res.height) 443 + // console.log('详情图本地路径',res);
  444 + self.setData({local_img:res.path});
  445 + self.drawCard();
  446 + // console.log(res.width)
  447 + // console.log(res.height)
419 } 448 }
420 }) 449 })
421 }, 450 },
  451 + // 画圆角 ctx、x起点、y起点、w宽度、y高度、r圆角半径、fillColor填充颜色、strokeColor边框颜色
  452 + roundRect(ctx, x, y, w, h, r, fillColor, strokeColor) {
  453 + const self = this;
  454 + // 开始绘制
  455 + ctx.beginPath()
  456 +
  457 + // 绘制左上角圆弧 Math.PI = 180度
  458 + // 圆心x起点、圆心y起点、半径、以3点钟方向顺时针旋转后确认的起始弧度、以3点钟方向顺时针旋转后确认的终止弧度
  459 + ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
  460 +
  461 + // 绘制border-top
  462 + // 移动起点位置 x终点、y终点
  463 + ctx.moveTo(x + r, y)
  464 + // 画一条线 x终点、y终点
  465 + ctx.lineTo(x + w - r, y)
  466 + // self.data.ctx.lineTo(x + w, y + r)
  467 +
  468 + // 绘制右上角圆弧
  469 + ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)
  470 +
  471 + // 绘制border-right
  472 + ctx.lineTo(x + w, y + h - r)
  473 + // self.data.ctx.lineTo(x + w - r, y + h)
  474 +
  475 + // 绘制右下角圆弧
  476 + ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)
  477 +
  478 + // 绘制border-bottom
  479 + ctx.lineTo(x + r, y + h)
  480 + // self.data.ctx.lineTo(x, y + h - r)
  481 +
  482 + // 绘制左下角圆弧
  483 + ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)
  484 +
  485 + // 绘制border-left
  486 + ctx.lineTo(x, y + r)
  487 + // self.data.ctx.lineTo(x + r, y)
  488 +
  489 + if (fillColor) {
  490 + // 因为边缘描边存在锯齿，最好指定使用 transparent 填充
  491 + ctx.setFillStyle(fillColor)
  492 + // 对绘画区域填充
  493 + ctx.fill()
  494 + }
  495 +
  496 + if (strokeColor) {
  497 + // 因为边缘描边存在锯齿，最好指定使用 transparent 填充
  498 + ctx.setStrokeStyle(strokeColor)
  499 + // 画出当前路径的边框
  500 + ctx.stroke()
  501 + }
  502 + // 关闭一个路径
  503 + // self.data.ctx.closePath()
  504 +
  505 + // 剪切，剪切之后的绘画绘制剪切区域内进行，需要save与restore
  506 + ctx.clip()
  507 + },
422 drawCard() { 508 drawCard() {
423 console.log('开始画'); 509 console.log('开始画');
424 const self = this; 510 const self = this;
425 //先创建一个画布 511 //先创建一个画布
426 const ctx = wx.createCanvasContext("canvas"); 512 const ctx = wx.createCanvasContext("canvas");
  513 + self.setData({ctx:ctx});
  514 + self.roundRect(ctx,0,0,300,302,10,'transparent','transparent');//画圆角
  515 + ctx.arc(150, 75, 50, 0, 2 * Math.PI);//剪切
  516 + ctx.setFillStyle('#ffffff');
  517 + ctx.fill();
  518 + ctx.clip();
427 //填充背景色 519 //填充背景色
428 - ctx.fillStyle = '#fff';  
429 - ctx.fillRect(0, 0, 300, 150); 520 + // ctx.fillStyle = '#fff';
  521 + ctx.fillRect(30, 30, 300, 150);
430 console.log(self.data.local_img); 522 console.log(self.data.local_img);
  523 + console.log(self.data.qr_code);
431 //将图片转化为画布 524 //将图片转化为画布
432 - ctx.drawImage(self.data.local_img, 0, 0, 330, 150); 525 + ctx.drawImage(self.data.local_img, 0, 0, 330, 170);//详情图
433 console.log(111); 526 console.log(111);
434 // ctx.drawImage("../../../../images/tou.png", 20, 166, 30, 30);//头像 527 // ctx.drawImage("../../../../images/tou.png", 20, 166, 30, 30);//头像
435 // ctx.drawImage("../../../../images/code.jpg", 220, 209, 60, 60);//头像 528 // ctx.drawImage("../../../../images/code.jpg", 220, 209, 60, 60);//头像
436 - //用户名字  
437 - ctx.setFontSize(13);  
438 - ctx.setFillStyle('#333333'); 529 + ctx.drawImage(self.data.local_qr_code, 220, 209, 60, 60);//二维码
  530 + //标题
  531 + ctx.setFontSize(16);
  532 + ctx.setFillStyle('#000');
439 ctx.textAlign = "left"; 533 ctx.textAlign = "left";
440 console.log(111); 534 console.log(111);
441 - ctx.fillText(self.data.detail.userName, 69, 187); 535 + ctx.fillText(self.data.detail.title, 26, 196.5);
  536 + ctx.fillText(self.data.detail.title, 25.5, 197);
442 ctx.restore(); 537 ctx.restore();
443 - //签到天数  
444 - ctx.setFontSize(17);  
445 - ctx.setFillStyle('#2C82E6');  
446 - ctx.fillText('连续', 25, 229);  
447 - ctx.restore();  
448 - ctx.setFillStyle('#2C82E6');  
449 - ctx.font = 'bold 22px sans-serif';  
450 - ctx.fillText(self.data.count, 63, 229);  
451 - ctx.restore();  
452 - ctx.setFontSize(17);  
453 - ctx.setFillStyle('#2C82E6');  
454 - ctx.font = 'normal 17px sans-serif';  
455 - ctx.fillText('天签到', 80, 229);  
456 - ctx.restore();  
457 -  
458 - const text = self.data.detail.content;  
459 - // ctx.fillText('此处放文案此处放文案此处放文案此处放文案此处放文案此处放文案此处放文案', 25, 252,200);  
460 - // ctx.restore(); 538 + //地点
  539 + ctx.setFontSize(13);
  540 + ctx.setFillStyle('#000000');
  541 + ctx.fillText('地点：', 25, 229);
  542 + const text = self.data.detail.address;
461 var chr = text.split("");//这个方法是将一个字符串分割成字符串数组 543 var chr = text.split("");//这个方法是将一个字符串分割成字符串数组
462 var temp = ""; 544 var temp = "";
463 var row = []; 545 var row = [];
464 ctx.setFontSize(13); 546 ctx.setFontSize(13);
465 - ctx.setFillStyle('#333333'); 547 + ctx.setFillStyle('#000000');
466 for (var a = 0; a < chr.length; a++) { 548 for (var a = 0; a < chr.length; a++) {
467 if (ctx.measureText(temp).width < 170) { 549 if (ctx.measureText(temp).width < 170) {
468 temp += chr[a]; 550 temp += chr[a];
@@ -475,10 +557,10 @@ Page({ @@ -475,10 +557,10 @@ Page({
475 } 557 }
476 row.push(temp); 558 row.push(temp);
477 559
478 - //如果数组长度大于2 则截取前两个  
479 - if (row.length > 2) {  
480 - var rowCut = row.slice(0, 2);  
481 - var rowPart = rowCut[1]; 560 + //如果数组长度大于1 则截取前1个
  561 + if (row.length > 1) {
  562 + var rowCut = row.slice(0, 1);
  563 + var rowPart = rowCut[0];
482 var test = ""; 564 var test = "";
483 var empty = []; 565 var empty = [];
484 for (var a = 0; a < rowPart.length; a++) { 566 for (var a = 0; a < rowPart.length; a++) {
@@ -490,15 +572,20 @@ Page({ @@ -490,15 +572,20 @@ Page({
490 } 572 }
491 } 573 }
492 empty.push(test); 574 empty.push(test);
493 - var group = empty[0] + "...";//这里只显示两行，超出的用...表示  
494 - rowCut.splice(1, 1, group); 575 + var group = empty[0] + "...";//这里只显示一行，超出的用...表示
  576 + rowCut.splice(0, 1, group);
495 row = rowCut; 577 row = rowCut;
496 } 578 }
497 for (var b = 0; b < row.length; b++) { 579 for (var b = 0; b < row.length; b++) {
498 - ctx.fillText(row[b], 25, 252 + b * 16, 170); 580 + ctx.fillText(row[b], 63, 229 + b * 16, 150);
499 } 581 }
500 ctx.restore(); 582 ctx.restore();
501 - 583 + //时间
  584 + ctx.setFontSize(13);
  585 + ctx.setFillStyle('#333333');
  586 + ctx.fillText('时间：', 25, 249);
  587 + ctx.fillText(self.data.end_time, 63, 249);
  588 + ctx.restore();
502 // ctx.drawImage("../../../../images/home-banner.png", 0, 0, 250, 150) 589 // ctx.drawImage("../../../../images/home-banner.png", 0, 0, 250, 150)
503 //成功执行，draw方法中进行回调 590 //成功执行，draw方法中进行回调
504 ctx.draw(true, function () { 591 ctx.draw(true, function () {
@@ -610,6 +697,7 @@ Page({ @@ -610,6 +697,7 @@ Page({
610 }, 697 },
611 onShareAppMessage: function() { 698 onShareAppMessage: function() {
612 let self = this; 699 let self = this;
  700 + self.setData({show_canvas:false,});
613 // 设置菜单中的转发按钮触发转发事件时的转发内容 701 // 设置菜单中的转发按钮触发转发事件时的转发内容
614 var shareObj = { 702 var shareObj = {
615 title: '火柴西路', // 默认是小程序的名称(可以写slogan等) 703 title: '火柴西路', // 默认是小程序的名称(可以写slogan等)
@@ -53,7 +53,7 @@ @@ -53,7 +53,7 @@
53 </navigator> 53 </navigator>
54 </block> 54 </block>
55 </swiper> 55 </swiper>
56 - <view class="dots" wx:if="{{}}"> 56 + <view class="dots">
57 <block wx:for="{{detail.banner}}" wx:key="index" wx:for-index="idx"> 57 <block wx:for="{{detail.banner}}" wx:key="index" wx:for-index="idx">
58 <view class="dot{{idx == current_swiper ? ' active' : ''}}"></view> 58 <view class="dot{{idx == current_swiper ? ' active' : ''}}"></view>
59 </block> 59 </block>
@@ -587,7 +587,7 @@ swiper { @@ -587,7 +587,7 @@ swiper {
587 height: 100%; 587 height: 100%;
588 position: fixed; 588 position: fixed;
589 z-index: 20; 589 z-index: 20;
590 - background-color: rgba(255, 255, 255, 0.93); 590 + background-color: rgba(0, 0, 0, 0.3);
591 display: -webkit-box; 591 display: -webkit-box;
592 display: -ms-flexbox; 592 display: -ms-flexbox;
593 display: flex; 593 display: flex;
@@ -604,18 +604,19 @@ swiper { @@ -604,18 +604,19 @@ swiper {
604 flex-direction: column; 604 flex-direction: column;
605 } 605 }
606 .shadow { 606 .shadow {
  607 + /* background:#fff; */
607 box-shadow: 1rpx 1rpx 40rpx rgba(101, 101, 101, 0.1); 608 box-shadow: 1rpx 1rpx 40rpx rgba(101, 101, 101, 0.1);
608 } 609 }
609 .canvas-poster { 610 .canvas-poster {
610 /* position: fixed; */ 611 /* position: fixed; */
611 - width: 600rpx;  
612 - height: 604rpx; 612 + width: 553rpx;
  613 + height: 532rpx;
613 /* top: 100%; */ 614 /* top: 100%; */
614 /* left: 100%; */ 615 /* left: 100%; */
615 /* overflow: hidden; */ 616 /* overflow: hidden; */
616 } 617 }
617 .button-box { 618 .button-box {
618 - width: 600rpx; 619 + width: 545rpx;
619 display: flex; 620 display: flex;
620 align-items: center; 621 align-items: center;
621 justify-content: space-between; 622 justify-content: space-between;
@@ -625,11 +626,11 @@ swiper { @@ -625,11 +626,11 @@ swiper {
625 .save-to-phone, .share-btn{ 626 .save-to-phone, .share-btn{
626 width: 50%; 627 width: 50%;
627 line-height: 56rpx; 628 line-height: 56rpx;
628 - color:#999; 629 + color:#fff;
629 font-size: 24rpx; 630 font-size: 24rpx;
630 text-align: center; 631 text-align: center;
631 padding:0; 632 padding:0;
632 - background:#fff; 633 + background:#323232;
633 border-radius: 0; 634 border-radius: 0;
634 } 635 }
635 .share-btn::after { 636 .share-btn::after {
@@ -637,6 +638,10 @@ swiper { @@ -637,6 +638,10 @@ swiper {
637 } 638 }
638 .save-to-phone { 639 .save-to-phone {
639 border-right: 1rpx solid #E8E8E8; 640 border-right: 1rpx solid #E8E8E8;
  641 + border-bottom-left-radius: 20rpx;
  642 +}
  643 +.share-btn {
  644 + border-bottom-right-radius: 20rpx;
640 } 645 }
641 .close-btn { 646 .close-btn {
642 color: #999999; 647 color: #999999;
@@ -647,5 +652,5 @@ swiper { @@ -647,5 +652,5 @@ swiper {
647 } 652 }
648 .close-btn .icon-guanbi { 653 .close-btn .icon-guanbi {
649 font-size: 50rpx; 654 font-size: 50rpx;
650 - color: #999999; 655 + color: #fff;
651 } 656 }