miniprogram / match-west-road · 提交

转到一个项目

作者 wumengyu
提交 33ed2c426a3c41e51c352f4218678bec773c7c4e 1 个父辈 80093918

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

内嵌 并排对比
正在显示 10 个修改的文件 包含 240 行增加 和 172 行删除
... ... @@ -23,6 +23,8 @@ Page({
is_join:false,
img_heights: [], //图片宽度
img_width: 750, //默认
show_canvas: false,
can_save:false,
},
//获取图片真实宽度
imageLoad: function (e) {
... ... @@ -246,6 +248,7 @@ Page({
count: res.data.count, // 留言板
is_send:res.data.is_send,//能否参加1：不能2：能
});
self.getCode();//获取二维码(此二维码不能进入活动详情，已改为小程序码)
// （0全部，2待拼成，3人数不足未拼成,4已拼成，5已取消，6已完成，7已评价，8已拼成（活动未结束）,9删除
const status = res.data.active.status;
if (status === 2 || status === 6 || status === 7 || status === 8) {
... ... @@ -381,6 +384,35 @@ Page({
}
}
},
//获取活动二维码
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() {
this.setData({show_canvas: true}, () => {
... ... @@ -399,65 +431,117 @@ Page({
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)
// 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() {
console.log('开始画');
const self = this;
//先创建一个画布
const ctx = wx.createCanvasContext("canvas");
self.setData({ctx:ctx});
// self.roundRect(ctx,0,0,300,302,10,'transparent','transparent');//画圆角
// self.roundRect(ctx,0,0,350,402,10,'#000','#000');//画圆角
// 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.fillRect(0, 0, 300, 400);
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, 300, 170);//详情图
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.drawImage(self.data.local_qr_code, 220, 209, 60, 60);//二维码
ctx.drawImage('../../../images/qr_code.jpg', 220, 209, 60, 60);//二维码
//标题
ctx.setFontSize(16);
ctx.setFillStyle('#000');
ctx.textAlign = "left";
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.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 temp = "";
var row = [];
ctx.setFontSize(13);
ctx.setFillStyle('#333333');
ctx.setFillStyle('#000000');
for (var a = 0; a < chr.length; a++) {
if (ctx.measureText(temp).width < 170) {
temp += chr[a];
... ... @@ -470,10 +554,10 @@ Page({
}
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 empty = [];
for (var a = 0; a < rowPart.length; a++) {
... ... @@ -485,15 +569,20 @@ Page({
}
}
empty.push(test);
var group = empty[0] + "...";//这里只显示两行，超出的用...表示
rowCut.splice(1, 1, group);
var group = empty[0] + "...";//这里只显示一行，超出的用...表示
rowCut.splice(0, 1, group);
row = rowCut;
}
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.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)
//成功执行，draw方法中进行回调
ctx.draw(true, function () {
... ...
... ... @@ -24,11 +24,25 @@
<!--<text class='iconfont icon-shoucang0 star2'></text>-->
<!--<text class="collect_word">收藏</text>-->
<!--</view>-->
<button class="share" open-type="share">
<view class="share" bindtap="share">
<view class="iconfont icon-fenxiang2"></view>
<text>分享</text>
</button>
</view>
<!--<button class="share" open-type="share">-->
<!--<view class="iconfont icon-fenxiang2"></view>-->
<!--<text>分享</text>-->
<!--</button>-->
</view>
</view>
<view class='wrap_note canvas-mask' wx:if="{{show_canvas}}" bindtap='hideCanvasMask'>
<view class="shadow">
<canvas class='canvas-poster' canvas-id='canvas'></canvas>
<view class="button-box">
<text bindtap="saveToPhone" class="save-to-phone">保存图片</text>
<button class="share-btn" open-type="share">分享给好友</button>
</view>
</view>
<view class="close-btn" bindtap="closeCanvas"><text class="iconfont icon-guanbi"></text></view>
</view>
<swiper indicator-dots="{{false}}" current="{{current}}" bindchange="swiperChange"
autoplay="{{true}}" interval="3000" duration="1000"
... ...
... ... @@ -577,4 +577,76 @@ swiper {
left: 0;
z-index: 10;
background: rgba(0,0,0,0.3);
}
.wrap_note {
width: 100%;
height: 100%;
position: fixed;
z-index: 20;
background-color: rgba(0, 0, 0, 0.3);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
top: 0;
}
.canvas-mask {
display: flex;
flex-direction: column;
}
.shadow {
/* background:#fff; */
box-shadow: 1rpx 1rpx 40rpx rgba(101, 101, 101, 0.1);
}
.canvas-poster {
/* position: fixed; */
/* width: 600rpx; */
height: 678rpx;
/* top: 100%; */
/* left: 100%; */
/* overflow: hidden; */
}
.button-box {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
height: 56rpx;
/* border-top: 1rpx solid #E8E8E8; */
}
.save-to-phone, .share-btn{
width: 50%;
line-height: 56rpx;
color:#fff;
font-size: 24rpx;
text-align: center;
padding:0;
background:#323232;
border-radius: 0;
}
.share-btn::after {
border:0;
}
.save-to-phone {
border-right: 1rpx solid #E8E8E8;
border-bottom-left-radius: 20rpx;
}
.share-btn {
border-bottom-right-radius: 20rpx;
}
.close-btn {
color: #999999;
font-size: 60rpx;
border-radius: 50%;
/* background-color: #fff; */
margin-top: 34rpx;
}
.close-btn .icon-guanbi {
font-size: 50rpx;
color: #fff;
}
\ No newline at end of file
... ...
... ... @@ -41,7 +41,7 @@ Page({
}
})
},
//获取国外名
//获取国外列表
getAbroadList() {
const self = this;
let url = '/portal/Index/addr';
... ... @@ -62,32 +62,7 @@ Page({
}
})
},
//选择国内城市
chooseDomesticCity(e) {
const current = e.currentTarget.dataset.index;
wx.showLoading({title:'加载中',mask:true});
this.setData({is_show_city:false});
const lat = this.data.cityList[current].latng.split(',')[1];
const lng = this.data.cityList[current].latng.split(',')[0];
this.setData({lat: lat, lng: lng,addr:this.data.cityList[current].title});
// console.log('lat', 'lng',lat,lng);
// this.getIndex();
},
//选择国外城市
chooseAbroadCity(e) {
const current = e.currentTarget.dataset.index;
wx.showLoading({title:'加载中',mask:true});
this.setData({
// current_city: e.detail.value,
is_city_change: true,
is_show_city:false
});
const lat = this.data.AbroadCityList[current].latng.split(',')[1];
const lng = this.data.AbroadCityList[current].latng.split(',')[0];
this.setData({lat: lat, lng: lng,addr:this.data.AbroadCityList[current].title});
console.log('lat', 'lng',lat,lng);
// this.getIndex();
},
//选择城市
chooseCity(e) {
wx.showLoading({title:'加载中',mask:true});
const current = e.currentTarget.dataset.index;
... ...
... ... @@ -276,76 +276,11 @@ Page({
})
}
},
//获取国内城市列表
getCityList() {
const self = this;
let url = '/portal/Index/cityList';
app.post(url, {}, {}).then((res) => {
console.log('获取城市列表', res);
if (+res.code === 1) {
const arr = [];
res.data.list.forEach((item) => {
arr.push(item.title)
});
self.setData({
city_picker_list: arr,
cityList:res.data.list,
});
}
})
},
//获取国外名
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.forEach((item) => {
arr.push(item.title)
});
self.setData({
Abroad_city_picker_list: arr,
AbroadCityList:res.data,
});
}
})
},
//打开城市列表
//打开城市列表页面
chooseCity() {
// this.setData({is_show_city:!this.data.is_show_city})
wx.navigateTo({url:'/pages/index/city-list/city-list'})
},
//选择国内城市
chooseDomesticCity(e) {
const current = e.currentTarget.dataset.index;
wx.showLoading({title:'加载中',mask:true});
this.setData({is_show_city:false});
const lat = this.data.cityList[current].latng.split(',')[1];
const lng = this.data.cityList[current].latng.split(',')[0];
this.setData({lat: lat, lng: lng,addr:this.data.cityList[current].title});
// console.log('lat', 'lng',lat,lng);
this.getIndex();
},
//选择国外城市
chooseAbroadCity(e) {
const current = e.currentTarget.dataset.index;
wx.showLoading({title:'加载中',mask:true});
this.setData({
// current_city: e.detail.value,
is_city_change: true,
is_show_city:false
});
const lat = this.data.AbroadCityList[current].latng.split(',')[1];
const lng = this.data.AbroadCityList[current].latng.split(',')[0];
this.setData({lat: lat, lng: lng,addr:this.data.AbroadCityList[current].title});
console.log('lat', 'lng',lat,lng);
this.getIndex();
},
//切换城市
// cityPickerChange(e) {
// this.setData({
... ...
... ... @@ -3,6 +3,7 @@
<!--swiper-->
<view class="head">
<view class="position {{hidden_top?'hidden-active':'visible-active'}}">
<!--第一版国内城市-->
<!--<picker class="picker" bindchange="cityPickerChange" value="{{current_city}}" range="{{city_picker_list}}" class="picker">-->
<!--<view class="left">-->
<!--<view class="iconfont icon-location"></view>-->
... ... @@ -24,24 +25,6 @@
<!--<view class="iconfont icon-arrow-down"></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"
autoplay="{{true}}" interval="3000" duration="1000">
... ...
... ... @@ -241,7 +241,7 @@ Page({
count:res.data.count,
is_send:res.data.is_send,//能否参加1：不能2：能
});
self.getCode();//获取二维码
self.getCode();//获取二维码(此二维码不能进入活动详情，已改为小程序码)
// self.getImage();
// self.getLocalImage();
// self.countDown();
... ... @@ -511,22 +511,22 @@ Page({
//先创建一个画布
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();
// self.roundRect(ctx,0,0,300,302,10,'transparent','transparent');//画圆角
// self.roundRect(ctx,0,0,350,402,10,'#000','#000');//画圆角
// ctx.arc(150, 75, 50, 0, 2 * Math.PI);//剪切
// ctx.setFillStyle('#ffffff');
// ctx.fill();
// ctx.clip();
//填充背景色
// ctx.fillStyle = '#fff';
ctx.fillRect(30, 30, 300, 150);
ctx.fillStyle = '#fff';
ctx.fillRect(0, 0, 300, 400);
console.log(self.data.local_img);
console.log(self.data.qr_code);
//将图片转化为画布
ctx.drawImage(self.data.local_img, 0, 0, 330, 170);//详情图
ctx.drawImage(self.data.local_img, 0, 0, 300, 170);//详情图
console.log(111);
// ctx.drawImage("../../../../images/tou.png", 20, 166, 30, 30);//头像
// ctx.drawImage("../../../../images/code.jpg", 220, 209, 60, 60);//头像
ctx.drawImage(self.data.local_qr_code, 220, 209, 60, 60);//二维码
// ctx.drawImage(self.data.local_qr_code, 220, 209, 60, 60);//二维码
ctx.drawImage('../../../images/qr_code.jpg', 220, 209, 60, 60);//二维码
//标题
ctx.setFontSize(16);
ctx.setFillStyle('#000');
... ...
... ... @@ -35,7 +35,7 @@
<canvas class='canvas-poster' canvas-id='canvas'></canvas>
<view class="button-box">
<text bindtap="saveToPhone" class="save-to-phone">保存图片</text>
<button class="share-btn" open-type="share">分享小程序</button>
<button class="share-btn" open-type="share">分享给好友</button>
</view>
</view>
<view class="close-btn" bindtap="closeCanvas"><text class="iconfont icon-guanbi"></text></view>
... ...
... ... @@ -609,19 +609,19 @@ swiper {
}
.canvas-poster {
/* position: fixed; */
width: 553rpx;
height: 532rpx;
/* width: 600rpx; */
height: 678rpx;
/* top: 100%; */
/* left: 100%; */
/* overflow: hidden; */
}
.button-box {
width: 545rpx;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
height: 56rpx;
border-top: 1rpx solid #E8E8E8;
/*border-top: 1rpx solid #E8E8E8;*/
}
.save-to-phone, .share-btn{
width: 50%;
... ...