作者 wumengyu

添加国际城市页,canvas添加小程序码,优化分享图,获取国外城市列表

@@ -23,6 +23,8 @@ Page({ @@ -23,6 +23,8 @@ Page({
23 is_join:false, 23 is_join:false,
24 img_heights: [], //图片宽度 24 img_heights: [], //图片宽度
25 img_width: 750, //默认 25 img_width: 750, //默认
  26 + show_canvas: false,
  27 + can_save:false,
26 }, 28 },
27 //获取图片真实宽度 29 //获取图片真实宽度
28 imageLoad: function (e) { 30 imageLoad: function (e) {
@@ -246,6 +248,7 @@ Page({ @@ -246,6 +248,7 @@ Page({
246 count: res.data.count, // 留言板 248 count: res.data.count, // 留言板
247 is_send:res.data.is_send,//能否参加1:不能2:能 249 is_send:res.data.is_send,//能否参加1:不能2:能
248 }); 250 });
  251 + self.getCode();//获取二维码(此二维码不能进入活动详情,已改为小程序码)
249 // (0全部,2待拼成,3人数不足未拼成,4已拼成,5已取消,6已完成,7已评价,8已拼成(活动未结束),9删除 252 // (0全部,2待拼成,3人数不足未拼成,4已拼成,5已取消,6已完成,7已评价,8已拼成(活动未结束),9删除
250 const status = res.data.active.status; 253 const status = res.data.active.status;
251 if (status === 2 || status === 6 || status === 7 || status === 8) { 254 if (status === 2 || status === 6 || status === 7 || status === 8) {
@@ -381,6 +384,35 @@ Page({ @@ -381,6 +384,35 @@ Page({
381 } 384 }
382 } 385 }
383 }, 386 },
  387 + //获取活动二维码
  388 + getCode() {
  389 + const self = this;
  390 + let url = '/portal/Index/qrCode';
  391 + let params = {
  392 + id: self.data.detail_id,
  393 + token:wx.getStorageSync('token'),
  394 + type:2,//1拼活动,2拼餐
  395 + };
  396 + app.post(url, params, {}).then((res) => {
  397 + console.log('获取活动二维码', res);
  398 + if (+res.code === 1) {
  399 + self.setData({qr_code:res.data},() => {
  400 + // console.log('二维码',self.data.qr_code);
  401 + wx.getImageInfo({
  402 + src: 'http://' + self.data.qr_code,
  403 + success(res) {
  404 + // console.log('二维码本地路径',res);
  405 + self.setData({local_qr_code:res.path});
  406 + self.getLocalImage();
  407 + },
  408 + fail() {
  409 + console.log('失败');
  410 + }
  411 + })
  412 + });
  413 + }
  414 + })
  415 + },
384 //点击分享 416 //点击分享
385 share() { 417 share() {
386 this.setData({show_canvas: true}, () => { 418 this.setData({show_canvas: true}, () => {
@@ -399,65 +431,117 @@ Page({ @@ -399,65 +431,117 @@ Page({
399 saveToPhone() { 431 saveToPhone() {
400 this.getPower(); 432 this.getPower();
401 }, 433 },
402 - //图片链接转成本地路径 434 + //详情图链接转成本地路径
403 getLocalImage() { 435 getLocalImage() {
404 - // http://doctor_wechat.w.bronet.cn/20190122101152.png  
405 const self = this; 436 const self = this;
406 wx.getImageInfo({ 437 wx.getImageInfo({
407 src: self.data.detail.banner[0], 438 src: self.data.detail.banner[0],
408 success(res) { 439 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) 440 + // console.log('详情图本地路径',res);
  441 + self.setData({local_img:res.path});
  442 + self.drawCard();
  443 + // console.log(res.width)
  444 + // console.log(res.height)
414 } 445 }
415 }) 446 })
416 }, 447 },
  448 + // 画圆角 ctx、x起点、y起点、w宽度、y高度、r圆角半径、fillColor填充颜色、strokeColor边框颜色
  449 + roundRect(ctx, x, y, w, h, r, fillColor, strokeColor) {
  450 + const self = this;
  451 + // 开始绘制
  452 + ctx.beginPath()
  453 +
  454 + // 绘制左上角圆弧 Math.PI = 180度
  455 + // 圆心x起点、圆心y起点、半径、以3点钟方向顺时针旋转后确认的起始弧度、以3点钟方向顺时针旋转后确认的终止弧度
  456 + ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
  457 +
  458 + // 绘制border-top
  459 + // 移动起点位置 x终点、y终点
  460 + ctx.moveTo(x + r, y)
  461 + // 画一条线 x终点、y终点
  462 + ctx.lineTo(x + w - r, y)
  463 + // self.data.ctx.lineTo(x + w, y + r)
  464 +
  465 + // 绘制右上角圆弧
  466 + ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)
  467 +
  468 + // 绘制border-right
  469 + ctx.lineTo(x + w, y + h - r)
  470 + // self.data.ctx.lineTo(x + w - r, y + h)
  471 +
  472 + // 绘制右下角圆弧
  473 + ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)
  474 +
  475 + // 绘制border-bottom
  476 + ctx.lineTo(x + r, y + h)
  477 + // self.data.ctx.lineTo(x, y + h - r)
  478 +
  479 + // 绘制左下角圆弧
  480 + ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)
  481 +
  482 + // 绘制border-left
  483 + ctx.lineTo(x, y + r)
  484 + // self.data.ctx.lineTo(x + r, y)
  485 +
  486 + if (fillColor) {
  487 + // 因为边缘描边存在锯齿,最好指定使用 transparent 填充
  488 + ctx.setFillStyle(fillColor)
  489 + // 对绘画区域填充
  490 + ctx.fill()
  491 + }
  492 +
  493 + if (strokeColor) {
  494 + // 因为边缘描边存在锯齿,最好指定使用 transparent 填充
  495 + ctx.setStrokeStyle(strokeColor)
  496 + // 画出当前路径的边框
  497 + ctx.stroke()
  498 + }
  499 + // 关闭一个路径
  500 + // self.data.ctx.closePath()
  501 +
  502 + // 剪切,剪切之后的绘画绘制剪切区域内进行,需要save与restore
  503 + ctx.clip()
  504 + },
417 drawCard() { 505 drawCard() {
418 console.log('开始画'); 506 console.log('开始画');
419 const self = this; 507 const self = this;
420 //先创建一个画布 508 //先创建一个画布
421 const ctx = wx.createCanvasContext("canvas"); 509 const ctx = wx.createCanvasContext("canvas");
  510 + self.setData({ctx:ctx});
  511 + // self.roundRect(ctx,0,0,300,302,10,'transparent','transparent');//画圆角
  512 + // self.roundRect(ctx,0,0,350,402,10,'#000','#000');//画圆角
  513 + // ctx.arc(150, 75, 50, 0, 2 * Math.PI);//剪切
  514 + // ctx.setFillStyle('#ffffff');
  515 + // ctx.fill();
  516 + // ctx.clip();
422 //填充背景色 517 //填充背景色
423 ctx.fillStyle = '#fff'; 518 ctx.fillStyle = '#fff';
424 - ctx.fillRect(0, 0, 300, 150); 519 + ctx.fillRect(0, 0, 300, 400);
425 console.log(self.data.local_img); 520 console.log(self.data.local_img);
  521 + console.log(self.data.qr_code);
426 //将图片转化为画布 522 //将图片转化为画布
427 - ctx.drawImage(self.data.local_img, 0, 0, 330, 150); 523 + ctx.drawImage(self.data.local_img, 0, 0, 300, 170);//详情图
428 console.log(111); 524 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'); 525 + // ctx.drawImage(self.data.local_qr_code, 220, 209, 60, 60);//二维码
  526 + ctx.drawImage('../../../images/qr_code.jpg', 220, 209, 60, 60);//二维码
  527 + //标题
  528 + ctx.setFontSize(16);
  529 + ctx.setFillStyle('#000');
434 ctx.textAlign = "left"; 530 ctx.textAlign = "left";
435 console.log(111); 531 console.log(111);
436 - ctx.fillText(self.data.detail.userName, 69, 187); 532 + ctx.fillText(self.data.detail.title, 26, 196.5);
  533 + ctx.fillText(self.data.detail.title, 25.5, 197);
437 ctx.restore(); 534 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(); 535 + //地点
  536 + ctx.setFontSize(13);
  537 + ctx.setFillStyle('#000000');
  538 + ctx.fillText('地点:', 25, 229);
  539 + const text = self.data.detail.address;
456 var chr = text.split("");//这个方法是将一个字符串分割成字符串数组 540 var chr = text.split("");//这个方法是将一个字符串分割成字符串数组
457 var temp = ""; 541 var temp = "";
458 var row = []; 542 var row = [];
459 ctx.setFontSize(13); 543 ctx.setFontSize(13);
460 - ctx.setFillStyle('#333333'); 544 + ctx.setFillStyle('#000000');
461 for (var a = 0; a < chr.length; a++) { 545 for (var a = 0; a < chr.length; a++) {
462 if (ctx.measureText(temp).width < 170) { 546 if (ctx.measureText(temp).width < 170) {
463 temp += chr[a]; 547 temp += chr[a];
@@ -470,10 +554,10 @@ Page({ @@ -470,10 +554,10 @@ Page({
470 } 554 }
471 row.push(temp); 555 row.push(temp);
472 556
473 - //如果数组长度大于2 则截取前两个  
474 - if (row.length > 2) {  
475 - var rowCut = row.slice(0, 2);  
476 - var rowPart = rowCut[1]; 557 + //如果数组长度大于1 则截取前1个
  558 + if (row.length > 1) {
  559 + var rowCut = row.slice(0, 1);
  560 + var rowPart = rowCut[0];
477 var test = ""; 561 var test = "";
478 var empty = []; 562 var empty = [];
479 for (var a = 0; a < rowPart.length; a++) { 563 for (var a = 0; a < rowPart.length; a++) {
@@ -485,15 +569,20 @@ Page({ @@ -485,15 +569,20 @@ Page({
485 } 569 }
486 } 570 }
487 empty.push(test); 571 empty.push(test);
488 - var group = empty[0] + "...";//这里只显示两行,超出的用...表示  
489 - rowCut.splice(1, 1, group); 572 + var group = empty[0] + "...";//这里只显示一行,超出的用...表示
  573 + rowCut.splice(0, 1, group);
490 row = rowCut; 574 row = rowCut;
491 } 575 }
492 for (var b = 0; b < row.length; b++) { 576 for (var b = 0; b < row.length; b++) {
493 - ctx.fillText(row[b], 25, 252 + b * 16, 170); 577 + ctx.fillText(row[b], 63, 229 + b * 16, 150);
494 } 578 }
495 ctx.restore(); 579 ctx.restore();
496 - 580 + //时间
  581 + ctx.setFontSize(13);
  582 + ctx.setFillStyle('#333333');
  583 + ctx.fillText('时间:', 25, 249);
  584 + ctx.fillText(self.data.end_time, 63, 249);
  585 + ctx.restore();
497 // ctx.drawImage("../../../../images/home-banner.png", 0, 0, 250, 150) 586 // ctx.drawImage("../../../../images/home-banner.png", 0, 0, 250, 150)
498 //成功执行,draw方法中进行回调 587 //成功执行,draw方法中进行回调
499 ctx.draw(true, function () { 588 ctx.draw(true, function () {
@@ -24,11 +24,25 @@ @@ -24,11 +24,25 @@
24 <!--<text class='iconfont icon-shoucang0 star2'></text>--> 24 <!--<text class='iconfont icon-shoucang0 star2'></text>-->
25 <!--<text class="collect_word">收藏</text>--> 25 <!--<text class="collect_word">收藏</text>-->
26 <!--</view>--> 26 <!--</view>-->
27 - <button class="share" open-type="share"> 27 + <view class="share" bindtap="share">
28 <view class="iconfont icon-fenxiang2"></view> 28 <view class="iconfont icon-fenxiang2"></view>
29 <text>分享</text> 29 <text>分享</text>
30 - </button>  
31 </view> 30 </view>
  31 + <!--<button class="share" open-type="share">-->
  32 + <!--<view class="iconfont icon-fenxiang2"></view>-->
  33 + <!--<text>分享</text>-->
  34 + <!--</button>-->
  35 + </view>
  36 + </view>
  37 + <view class='wrap_note canvas-mask' wx:if="{{show_canvas}}" bindtap='hideCanvasMask'>
  38 + <view class="shadow">
  39 + <canvas class='canvas-poster' canvas-id='canvas'></canvas>
  40 + <view class="button-box">
  41 + <text bindtap="saveToPhone" class="save-to-phone">保存图片</text>
  42 + <button class="share-btn" open-type="share">分享给好友</button>
  43 + </view>
  44 + </view>
  45 + <view class="close-btn" bindtap="closeCanvas"><text class="iconfont icon-guanbi"></text></view>
32 </view> 46 </view>
33 <swiper indicator-dots="{{false}}" current="{{current}}" bindchange="swiperChange" 47 <swiper indicator-dots="{{false}}" current="{{current}}" bindchange="swiperChange"
34 autoplay="{{true}}" interval="3000" duration="1000" 48 autoplay="{{true}}" interval="3000" duration="1000"
@@ -578,3 +578,75 @@ swiper { @@ -578,3 +578,75 @@ swiper {
578 z-index: 10; 578 z-index: 10;
579 background: rgba(0,0,0,0.3); 579 background: rgba(0,0,0,0.3);
580 } 580 }
  581 +.wrap_note {
  582 + width: 100%;
  583 + height: 100%;
  584 + position: fixed;
  585 + z-index: 20;
  586 + background-color: rgba(0, 0, 0, 0.3);
  587 + display: -webkit-box;
  588 + display: -ms-flexbox;
  589 + display: flex;
  590 + -webkit-box-align: center;
  591 + -ms-flex-align: center;
  592 + align-items: center;
  593 + -webkit-box-pack: center;
  594 + -ms-flex-pack: center;
  595 + justify-content: center;
  596 + top: 0;
  597 +}
  598 +.canvas-mask {
  599 + display: flex;
  600 + flex-direction: column;
  601 +}
  602 +.shadow {
  603 + /* background:#fff; */
  604 + box-shadow: 1rpx 1rpx 40rpx rgba(101, 101, 101, 0.1);
  605 +}
  606 +.canvas-poster {
  607 + /* position: fixed; */
  608 + /* width: 600rpx; */
  609 + height: 678rpx;
  610 + /* top: 100%; */
  611 + /* left: 100%; */
  612 + /* overflow: hidden; */
  613 +}
  614 +.button-box {
  615 + width: 100%;
  616 + display: flex;
  617 + align-items: center;
  618 + justify-content: space-between;
  619 + height: 56rpx;
  620 + /* border-top: 1rpx solid #E8E8E8; */
  621 +}
  622 +.save-to-phone, .share-btn{
  623 + width: 50%;
  624 + line-height: 56rpx;
  625 + color:#fff;
  626 + font-size: 24rpx;
  627 + text-align: center;
  628 + padding:0;
  629 + background:#323232;
  630 + border-radius: 0;
  631 +}
  632 +.share-btn::after {
  633 + border:0;
  634 +}
  635 +.save-to-phone {
  636 + border-right: 1rpx solid #E8E8E8;
  637 + border-bottom-left-radius: 20rpx;
  638 +}
  639 +.share-btn {
  640 + border-bottom-right-radius: 20rpx;
  641 +}
  642 +.close-btn {
  643 + color: #999999;
  644 + font-size: 60rpx;
  645 + border-radius: 50%;
  646 + /* background-color: #fff; */
  647 + margin-top: 34rpx;
  648 +}
  649 +.close-btn .icon-guanbi {
  650 + font-size: 50rpx;
  651 + color: #fff;
  652 +}
@@ -41,7 +41,7 @@ Page({ @@ -41,7 +41,7 @@ Page({
41 } 41 }
42 }) 42 })
43 }, 43 },
44 - //获取国外 44 + //获取国外列表
45 getAbroadList() { 45 getAbroadList() {
46 const self = this; 46 const self = this;
47 let url = '/portal/Index/addr'; 47 let url = '/portal/Index/addr';
@@ -62,32 +62,7 @@ Page({ @@ -62,32 +62,7 @@ Page({
62 } 62 }
63 }) 63 })
64 }, 64 },
65 - //选择国内城市  
66 - chooseDomesticCity(e) {  
67 - const current = e.currentTarget.dataset.index;  
68 - wx.showLoading({title:'加载中',mask:true});  
69 - this.setData({is_show_city:false});  
70 - const lat = this.data.cityList[current].latng.split(',')[1];  
71 - const lng = this.data.cityList[current].latng.split(',')[0];  
72 - this.setData({lat: lat, lng: lng,addr:this.data.cityList[current].title});  
73 - // console.log('lat', 'lng',lat,lng);  
74 - // this.getIndex();  
75 - },  
76 - //选择国外城市  
77 - chooseAbroadCity(e) {  
78 - const current = e.currentTarget.dataset.index;  
79 - wx.showLoading({title:'加载中',mask:true});  
80 - this.setData({  
81 - // current_city: e.detail.value,  
82 - is_city_change: true,  
83 - is_show_city:false  
84 - });  
85 - const lat = this.data.AbroadCityList[current].latng.split(',')[1];  
86 - const lng = this.data.AbroadCityList[current].latng.split(',')[0];  
87 - this.setData({lat: lat, lng: lng,addr:this.data.AbroadCityList[current].title});  
88 - console.log('lat', 'lng',lat,lng);  
89 - // this.getIndex();  
90 - }, 65 + //选择城市
91 chooseCity(e) { 66 chooseCity(e) {
92 wx.showLoading({title:'加载中',mask:true}); 67 wx.showLoading({title:'加载中',mask:true});
93 const current = e.currentTarget.dataset.index; 68 const current = e.currentTarget.dataset.index;
@@ -276,76 +276,11 @@ Page({ @@ -276,76 +276,11 @@ Page({
276 }) 276 })
277 } 277 }
278 }, 278 },
279 - //获取国内城市列表  
280 - getCityList() {  
281 - const self = this;  
282 - let url = '/portal/Index/cityList';  
283 - app.post(url, {}, {}).then((res) => {  
284 - console.log('获取城市列表', res);  
285 - if (+res.code === 1) {  
286 - const arr = [];  
287 - res.data.list.forEach((item) => {  
288 - arr.push(item.title)  
289 - });  
290 - self.setData({  
291 - city_picker_list: arr,  
292 - cityList:res.data.list,  
293 - });  
294 - }  
295 - })  
296 - },  
297 - //获取国外名  
298 - getAbroadList() {  
299 - const self = this;  
300 - let url = '/portal/Index/addr';  
301 - let params = {  
302 - token: wx.getStorageSync('token'),  
303 - };  
304 - app.post(url, params, {}).then((res) => {  
305 - console.log('获取国外列表', res);  
306 - if (+res.code === 1) {  
307 - const arr = [];  
308 - res.data.forEach((item) => {  
309 - arr.push(item.title)  
310 - });  
311 - self.setData({  
312 - Abroad_city_picker_list: arr,  
313 - AbroadCityList:res.data,  
314 - });  
315 - }  
316 - })  
317 - },  
318 - //打开城市列表 279 + //打开城市列表页面
319 chooseCity() { 280 chooseCity() {
320 // this.setData({is_show_city:!this.data.is_show_city}) 281 // this.setData({is_show_city:!this.data.is_show_city})
321 wx.navigateTo({url:'/pages/index/city-list/city-list'}) 282 wx.navigateTo({url:'/pages/index/city-list/city-list'})
322 }, 283 },
323 - //选择国内城市  
324 - chooseDomesticCity(e) {  
325 - const current = e.currentTarget.dataset.index;  
326 - wx.showLoading({title:'加载中',mask:true});  
327 - this.setData({is_show_city:false});  
328 - const lat = this.data.cityList[current].latng.split(',')[1];  
329 - const lng = this.data.cityList[current].latng.split(',')[0];  
330 - this.setData({lat: lat, lng: lng,addr:this.data.cityList[current].title});  
331 - // console.log('lat', 'lng',lat,lng);  
332 - this.getIndex();  
333 - },  
334 - //选择国外城市  
335 - chooseAbroadCity(e) {  
336 - const current = e.currentTarget.dataset.index;  
337 - wx.showLoading({title:'加载中',mask:true});  
338 - this.setData({  
339 - // current_city: e.detail.value,  
340 - is_city_change: true,  
341 - is_show_city:false  
342 - });  
343 - const lat = this.data.AbroadCityList[current].latng.split(',')[1];  
344 - const lng = this.data.AbroadCityList[current].latng.split(',')[0];  
345 - this.setData({lat: lat, lng: lng,addr:this.data.AbroadCityList[current].title});  
346 - console.log('lat', 'lng',lat,lng);  
347 - this.getIndex();  
348 - },  
349 //切换城市 284 //切换城市
350 // cityPickerChange(e) { 285 // cityPickerChange(e) {
351 // this.setData({ 286 // this.setData({
@@ -3,6 +3,7 @@ @@ -3,6 +3,7 @@
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 + <!--第一版国内城市-->
6 <!--<picker class="picker" bindchange="cityPickerChange" value="{{current_city}}" range="{{city_picker_list}}" class="picker">--> 7 <!--<picker class="picker" bindchange="cityPickerChange" value="{{current_city}}" range="{{city_picker_list}}" class="picker">-->
7 <!--<view class="left">--> 8 <!--<view class="left">-->
8 <!--<view class="iconfont icon-location"></view>--> 9 <!--<view class="iconfont icon-location"></view>-->
@@ -24,24 +25,6 @@ @@ -24,24 +25,6 @@
24 <!--<view class="iconfont icon-arrow-down"></view>--> 25 <!--<view class="iconfont icon-arrow-down"></view>-->
25 </view> 26 </view>
26 </view> 27 </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> 28 <view class="modal_box" wx:if="{{is_show_city}}" bindtap="handleBackground" catchtouchmove="disableScroll"></view>
46 <swiper indicator-dots="{{false}}" current="{{current}}" bindchange="swiperChange" 29 <swiper indicator-dots="{{false}}" current="{{current}}" bindchange="swiperChange"
47 autoplay="{{true}}" interval="3000" duration="1000"> 30 autoplay="{{true}}" interval="3000" duration="1000">
@@ -241,7 +241,7 @@ Page({ @@ -241,7 +241,7 @@ 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 - self.getCode();//获取二维码 244 + self.getCode();//获取二维码(此二维码不能进入活动详情,已改为小程序码)
245 // self.getImage(); 245 // self.getImage();
246 // self.getLocalImage(); 246 // self.getLocalImage();
247 // self.countDown(); 247 // self.countDown();
@@ -511,22 +511,22 @@ Page({ @@ -511,22 +511,22 @@ Page({
511 //先创建一个画布 511 //先创建一个画布
512 const ctx = wx.createCanvasContext("canvas"); 512 const ctx = wx.createCanvasContext("canvas");
513 self.setData({ctx:ctx}); 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(); 514 + // self.roundRect(ctx,0,0,300,302,10,'transparent','transparent');//画圆角
  515 + // self.roundRect(ctx,0,0,350,402,10,'#000','#000');//画圆角
  516 + // ctx.arc(150, 75, 50, 0, 2 * Math.PI);//剪切
  517 + // ctx.setFillStyle('#ffffff');
  518 + // ctx.fill();
  519 + // ctx.clip();
519 //填充背景色 520 //填充背景色
520 - // ctx.fillStyle = '#fff';  
521 - ctx.fillRect(30, 30, 300, 150); 521 + ctx.fillStyle = '#fff';
  522 + ctx.fillRect(0, 0, 300, 400);
522 console.log(self.data.local_img); 523 console.log(self.data.local_img);
523 console.log(self.data.qr_code); 524 console.log(self.data.qr_code);
524 //将图片转化为画布 525 //将图片转化为画布
525 - ctx.drawImage(self.data.local_img, 0, 0, 330, 170);//详情图 526 + ctx.drawImage(self.data.local_img, 0, 0, 300, 170);//详情图
526 console.log(111); 527 console.log(111);
527 - // ctx.drawImage("../../../../images/tou.png", 20, 166, 30, 30);//头像  
528 - // ctx.drawImage("../../../../images/code.jpg", 220, 209, 60, 60);//头像  
529 - ctx.drawImage(self.data.local_qr_code, 220, 209, 60, 60);//二维码 528 + // ctx.drawImage(self.data.local_qr_code, 220, 209, 60, 60);//二维码
  529 + ctx.drawImage('../../../images/qr_code.jpg', 220, 209, 60, 60);//二维码
530 //标题 530 //标题
531 ctx.setFontSize(16); 531 ctx.setFontSize(16);
532 ctx.setFillStyle('#000'); 532 ctx.setFillStyle('#000');
@@ -35,7 +35,7 @@ @@ -35,7 +35,7 @@
35 <canvas class='canvas-poster' canvas-id='canvas'></canvas> 35 <canvas class='canvas-poster' canvas-id='canvas'></canvas>
36 <view class="button-box"> 36 <view class="button-box">
37 <text bindtap="saveToPhone" class="save-to-phone">保存图片</text> 37 <text bindtap="saveToPhone" class="save-to-phone">保存图片</text>
38 - <button class="share-btn" open-type="share">分享小程序</button> 38 + <button class="share-btn" open-type="share">分享给好友</button>
39 </view> 39 </view>
40 </view> 40 </view>
41 <view class="close-btn" bindtap="closeCanvas"><text class="iconfont icon-guanbi"></text></view> 41 <view class="close-btn" bindtap="closeCanvas"><text class="iconfont icon-guanbi"></text></view>
@@ -609,19 +609,19 @@ swiper { @@ -609,19 +609,19 @@ swiper {
609 } 609 }
610 .canvas-poster { 610 .canvas-poster {
611 /* position: fixed; */ 611 /* position: fixed; */
612 - width: 553rpx;  
613 - height: 532rpx; 612 + /* width: 600rpx; */
  613 + height: 678rpx;
614 /* top: 100%; */ 614 /* top: 100%; */
615 /* left: 100%; */ 615 /* left: 100%; */
616 /* overflow: hidden; */ 616 /* overflow: hidden; */
617 } 617 }
618 .button-box { 618 .button-box {
619 - width: 545rpx; 619 + width: 100%;
620 display: flex; 620 display: flex;
621 align-items: center; 621 align-items: center;
622 justify-content: space-between; 622 justify-content: space-between;
623 height: 56rpx; 623 height: 56rpx;
624 - border-top: 1rpx solid #E8E8E8; 624 + /*border-top: 1rpx solid #E8E8E8;*/
625 } 625 }
626 .save-to-phone, .share-btn{ 626 .save-to-phone, .share-btn{
627 width: 50%; 627 width: 50%;