Commit 0f26777965539bdd9a2dd3a57a10a9126b1b895d
1 parent
4642cf56
直播列表添加显示时间和主播,直播详情生成和保存海报图片
Showing
5 changed files
with
217 additions
and
156 deletions
packageA/pages/liveStream/liveStream.wxml
... | ... | @@ -9,19 +9,18 @@ |
9 | 9 | <block wx:for="{{live.toBegin}}"> |
10 | 10 | <view class="list-item" data-id="{{item.id}}" data-live="toBegin" catchtap="clickItem"> |
11 | 11 | <view class="list-item-left"> |
12 | - <image src="{{item.cover_img}}" class="item-pic" mode="aspectFill"></image> | |
13 | - <!-- <view class="item-desc"> | |
14 | - <view>{{item.name}}</view> | |
15 | - <view>{{filter.format_time(item.start_time)}}</view> | |
16 | - </view> --> | |
12 | + <image src="{{item.share_img}}" class="item-pic" mode="aspectFill"></image> | |
17 | 13 | </view> |
18 | 14 | <view class="list-item-right"> |
19 | - <view class="item-title">{{item.name}}</view> | |
15 | + <view> | |
16 | + <view class="item-title">{{item.name}}</view> | |
17 | + <view class="item-time">{{filter.format_time(item.start_time, 2)}} 开始</view> | |
18 | + <view></view> | |
19 | + </view> | |
20 | 20 | <subscribe room-id="{{item.roomid}}" stopPropagation="{{true}}"></subscribe> |
21 | 21 | </view> |
22 | - | |
23 | 22 | </view> |
24 | - | |
23 | + | |
25 | 24 | </block> |
26 | 25 | </view> |
27 | 26 | </block> |
... | ... | @@ -34,7 +33,7 @@ |
34 | 33 | <block wx:for="{{live.ing}}"> |
35 | 34 | <view class="list-item" catchtap="clickItem" data-id="{{item.id}}" data-live="ing"> |
36 | 35 | <view class="list-item-left"> |
37 | - <image src="{{item.cover_img}}" class="item-pic" mode="aspectFill"></image> | |
36 | + <image src="{{item.share_img}}" class="item-pic" mode="aspectFill"></image> | |
38 | 37 | </view> |
39 | 38 | <view class="list-item-right"> |
40 | 39 | <view class="item-title">{{item.name}}</view> |
... | ... | @@ -53,10 +52,14 @@ |
53 | 52 | <block wx:for="{{live.over}}"> |
54 | 53 | <view class="list-item" bindtap="clickItem" data-id="{{item.id}}" data-live="over"> |
55 | 54 | <view class="list-item-left"> |
56 | - <image src="{{item.cover_img}}" class="item-pic" mode="aspectFill"></image> | |
55 | + <image src="{{item.share_img}}" class="item-pic" mode="aspectFill"></image> | |
57 | 56 | </view> |
58 | 57 | <view class="list-item-right"> |
59 | - <view class="item-title">{{item.name}}</view> | |
58 | + <view> | |
59 | + <view class="item-title">{{item.name}}</view> | |
60 | + <view class="item-time">{{filter.format_time(item.start_time, 2)}} 开始</view> | |
61 | + <view class="item-anchor">主播:{{item['anchor_name']}}</view> | |
62 | + </view> | |
60 | 63 | <view class="item-btn" catchtap="clickLive" data-roomid="{{item.roomid}}">观看回放</view> |
61 | 64 | </view> |
62 | 65 | </view> | ... | ... |
packageA/pages/liveStream/liveStream.wxss
... | ... | @@ -9,8 +9,8 @@ |
9 | 9 | } |
10 | 10 | .list-item-left { |
11 | 11 | position: relative; |
12 | - width: 300rpx; | |
13 | - height: 300rpx; | |
12 | + width: 340rpx; | |
13 | + height: 220rpx; | |
14 | 14 | flex-shrink: 0; |
15 | 15 | } |
16 | 16 | .list-item-right { |
... | ... | @@ -55,9 +55,18 @@ |
55 | 55 | |
56 | 56 | display: -webkit-box; |
57 | 57 | -webkit-box-orient: vertical; |
58 | - -webkit-line-clamp: 4; | |
58 | + -webkit-line-clamp: 2; | |
59 | 59 | overflow: hidden; |
60 | 60 | } |
61 | +.item-time { | |
62 | + color: #999; | |
63 | + font-size: 22rpx; | |
64 | + padding-top: 10rpx; | |
65 | +} | |
66 | +.item-anchor { | |
67 | + color: #999; | |
68 | + font-size: 22rpx; | |
69 | +} | |
61 | 70 | |
62 | 71 | .item-btn { |
63 | 72 | width: 172rpx; | ... | ... |
packageA/pages/liveStreamDetails/liveStreamDetails.js
... | ... | @@ -29,7 +29,11 @@ Page({ |
29 | 29 | nickName: '', |
30 | 30 | avatarUrl: '', |
31 | 31 | coverImg: '', |
32 | - canvasToImgPath: '' | |
32 | + canvasToImgPath: '', | |
33 | + screenWidth: 0, | |
34 | + canvasHidden: 1, | |
35 | + gid: '', | |
36 | + shareImgPath: '' | |
33 | 37 | }, |
34 | 38 | |
35 | 39 | // 点击商品 |
... | ... | @@ -64,16 +68,15 @@ Page({ |
64 | 68 | //生成海报 |
65 | 69 | createPlaybill: function () { |
66 | 70 | // 1.提示 “正在生成海报...” |
67 | - wx.showLoading({ | |
68 | - title: '正在生成海报...' | |
69 | - }); | |
71 | + | |
70 | 72 | // 2.生成海报,如果生成完毕,关闭提示 |
71 | 73 | this.drawPlaybill(); |
72 | 74 | // 3.展示生成的海报 |
73 | 75 | this.setData({ |
74 | - showPlaybill: !this.data.showPlaybill, | |
75 | - showActionSheet: 'false' | |
76 | + showActionSheet: 'false', | |
77 | + showPlaybill: !this.data.showPlaybill | |
76 | 78 | }); |
79 | + | |
77 | 80 | }, |
78 | 81 | |
79 | 82 | // 获取设备信息 |
... | ... | @@ -84,150 +87,153 @@ Page({ |
84 | 87 | that.setData({ |
85 | 88 | windowWidth: res.windowWidth, |
86 | 89 | windowHeight: res.windowHeight, |
90 | + screenWidth: res.screenWidth, | |
87 | 91 | dpr: res.pixelRatio |
88 | 92 | }) |
89 | 93 | } |
90 | 94 | }); |
95 | + console.log('宽度',this.data.windowWidth); | |
96 | + console.log('高度',this.data.windowHeight); | |
91 | 97 | }, |
92 | 98 | |
93 | - //文本换行 参数:1、canvas对象,2、文本 3、距离左侧的距离 4、距离顶部的距离 5、6、文本的宽度 | |
94 | - drawText: function(ctx, str, leftWidth, initHeight, titleHeight, canvasWidth, unit) { | |
95 | - var lineWidth = 0; | |
96 | - var lastSubStrIndex = 0; //每次开始截取的字符串的索引 | |
97 | - var han = 0; | |
98 | - for (let i = 0; i < str.length; i++) { | |
99 | - if (han == 2) return; | |
100 | - //lineWidth += ctx.measureText(str[i]).width; | |
101 | - lineWidth += ut.measureText(str[i], 21.3 * unit); | |
102 | - if (lineWidth > canvasWidth) { | |
103 | - han++; | |
104 | - | |
105 | - if (han == 2) { | |
106 | - ctx.textAlign = 'justify'; | |
107 | - ctx.fillText(str.substring(lastSubStrIndex, i) + '...', leftWidth, initHeight); //绘制截取部分 | |
108 | - } else { | |
109 | - ctx.textAlign = 'justify'; | |
110 | - ctx.fillText(str.substring(lastSubStrIndex, i), leftWidth, initHeight); | |
111 | - } | |
112 | - initHeight += 22; //22为字体的高度 | |
113 | - lineWidth = 0; | |
114 | - lastSubStrIndex = i; | |
115 | - titleHeight += 20; | |
116 | - } | |
117 | - if (i == str.length - 1) { //绘制剩余部分 | |
118 | - ctx.textAlign = 'justify'; | |
119 | - ctx.fillText(str.substring(lastSubStrIndex, i + 1), leftWidth, initHeight); | |
120 | - } | |
99 | +//文本换行 参数:1、canvas对象,2、文本 3、距离左侧的距离 4、距离顶部的距离 5、6、文本的宽度 | |
100 | +drawText: function(ctx, str, leftWidth, initHeight, titleHeight, canvasWidth, unit) { | |
101 | + var lineWidth = 0; | |
102 | + var lastSubStrIndex = 0; //每次开始截取的字符串的索引 | |
103 | + var han = 0; | |
104 | + for (let i = 0; i < str.length; i++) { | |
105 | + if (han == 2) return; | |
106 | + //lineWidth += ctx.measureText(str[i]).width; | |
107 | + lineWidth += ut.measureText(str[i], 21.3 * unit); | |
108 | + if (lineWidth > canvasWidth) { | |
109 | + han++; | |
110 | + | |
111 | + if (han == 2) { | |
112 | + ctx.textAlign = 'justify'; | |
113 | + ctx.fillText(str.substring(lastSubStrIndex, i) + '...', leftWidth, initHeight); //绘制截取部分 | |
114 | + } else { | |
115 | + ctx.textAlign = 'justify'; | |
116 | + ctx.fillText(str.substring(lastSubStrIndex, i), leftWidth, initHeight); | |
121 | 117 | } |
122 | - }, | |
118 | + initHeight += 22; //22为字体的高度 | |
119 | + lineWidth = 0; | |
120 | + lastSubStrIndex = i; | |
121 | + titleHeight += 20; | |
122 | + } | |
123 | + if (i == str.length - 1) { //绘制剩余部分 | |
124 | + ctx.textAlign = 'justify'; | |
125 | + ctx.fillText(str.substring(lastSubStrIndex, i + 1), leftWidth, initHeight); | |
126 | + } | |
127 | + } | |
128 | +}, | |
123 | 129 | |
124 | 130 | // 生成海报 |
125 | 131 | drawPlaybill: function () { |
126 | - var that = this | |
127 | - // 适配屏get幕 | |
128 | - let scale = this.data.windowWidth / 375.0 | |
129 | - | |
130 | - this.setData({ totalHeight: 667*scale}) | |
131 | - // 获取Canvas | |
132 | - let ctx = wx.createCanvasContext('myCanvas') | |
133 | - | |
134 | - // 放大 因为不放大的话,生成的分享图会模糊。暂时先注释 | |
135 | - ctx.scale(this.data.canvasScale, this.data.canvasScale) | |
132 | + wx.showLoading({ | |
133 | + title: '正在生成海报...' | |
134 | + }); | |
136 | 135 | |
137 | - // var path3 = os.url + "/api/wx/open/app/user/getWeAppEwm/" + | |
138 | - // os.stoid; | |
136 | + // 数据准备 | |
137 | + const title = this.data.details.name; | |
138 | + // const headImg = app.globalData.userInfo['head_pic']; | |
139 | + const that = this; | |
140 | + | |
141 | + // console.log('----------------v', headImg); | |
139 | 142 | |
140 | 143 | var path3 = os.url + "/api/wx/open/app/user/getWeAppEwm/" + |
141 | 144 | os.stoid + "?sceneValue=1012" + "&pageValue=pages/goods/goodsInfo/goodsInfo"; |
142 | - + "?sceneValue=1012" + "&pageValue=packageA/pages/liveStreamDetails/liveStreamDetails" | |
143 | - // console.log('path3---->', path3); | |
145 | + | |
146 | + // 以iPhone6为例,375/750 = 0.5 | |
147 | + // let scale = this.data.windowWidth / 375; | |
148 | + let scale = this.data.screenWidth / 750 * 1.35 | |
144 | 149 | |
145 | 150 | |
146 | - // 绘制主背景白色 | |
147 | - ctx.setFillStyle('#ffffff') | |
148 | - ctx.fillRect(0, 0, this.data.windowWidth, this.data.totalHeight) | |
149 | - ctx.draw(true); | |
151 | + // 适配屏get幕 | |
152 | + // let scale = this.data.windowWidth / 375.0; | |
153 | + // this.setData({totalHeight: 667 * scale}); | |
154 | + | |
155 | + // 获取Canvas | |
156 | + let ctx = wx.createCanvasContext('myCanvas'); | |
150 | 157 | |
158 | + // 放大 因为不放大的话,生成的分享图会模糊。暂时先注释 | |
159 | + // ctx.scale(this.data.canvasScale, this.data.canvasScale) | |
160 | + | |
151 | 161 | |
152 | - const coverImag = this.data.details['cover_img']; | |
153 | - const title = this.data.details.name; | |
154 | - console.log('detail--->', this.data.details); | |
155 | 162 | |
163 | + // var path3 = os.url + "/api/wx/open/app/user/getWeAppEwm/" + | |
164 | + // os.stoid + "?sceneValue=1012" + "&pageValue=pages/goods/goodsInfo/goodsInfo"; | |
165 | + // + "?sceneValue=1012" + "&pageValue=packageA/pages/liveStreamDetails/liveStreamDetails" | |
166 | + // console.log('path3---->', path3); | |
156 | 167 | |
157 | - //绘制头像 | |
158 | - wx.getImageInfo({ | |
159 | - src: that.data.avatarUrl, | |
160 | - success: function(res) { | |
161 | - ctx.save(); | |
162 | - ctx.beginPath(); | |
163 | - ctx.arc(29*scale, 27*scale, 14*scale, 0, 2*Math.PI); | |
164 | - ctx.clip(); | |
165 | - ctx.drawImage(res.path, 15*scale, 13*scale, 28*scale, 28*scale); | |
166 | - ctx.restore() | |
167 | - ctx.draw(true); | |
168 | - } | |
169 | - }) | |
168 | + | |
169 | + // 绘制主背景白色 | |
170 | + ctx.setFillStyle('#ffffff'); | |
171 | + ctx.fillRect(0, 0, 480, 738); | |
172 | + | |
173 | + // 绘制头像 | |
174 | + ctx.save(); | |
175 | + ctx.beginPath(); | |
176 | + ctx.arc(58, 63, 28, 0, 2*Math.PI); | |
177 | + ctx.clip(); | |
178 | + // console.log('1__________________>',app.globalData.userInfo['head_pic']); | |
179 | + ctx.drawImage(this.data.avatarUrl, 30, 35, 56, 56); | |
180 | + ctx.restore(); | |
170 | 181 | |
171 | 182 | // 绘制昵称 |
172 | - ctx.setFontSize(12*scale); | |
183 | + ctx.setFontSize(14); | |
173 | 184 | ctx.setFillStyle('#ADADAD'); |
174 | - ctx.fillText(this.data.nickName, 54*scale, 32*scale); | |
185 | + ctx.fillText(this.data.nickName, 106, 68); | |
175 | 186 | |
176 | - //绘制主图 | |
177 | - wx.getImageInfo({ | |
178 | - src: coverImag, | |
179 | - success: function(res) { | |
180 | - ctx.drawImage(res.path, 0, 52*scale, 240*scale, 191*scale); | |
181 | - ctx.draw(true); | |
182 | - } | |
183 | - }) | |
187 | + // 绘制主图 | |
188 | + ctx.drawImage(this.data.coverImg, 0, 104, 480, 382); | |
189 | + // ctx.draw(true); | |
184 | 190 | |
185 | - //绘制文字 | |
186 | - ctx.setFontSize(14*scale); | |
191 | + // 绘制文字 | |
192 | + ctx.setFontSize(24); | |
187 | 193 | ctx.setFillStyle('#1E1E1E'); |
188 | - // ctx.fillText(title, 10*scale, 281*scale, 97*scale); | |
189 | - this.drawText(ctx, title, 10*scale, 281*scale, 130*scale, 130*scale, scale); | |
190 | - // ctx.draw(true); | |
194 | + this.drawText(ctx, '发的电视剧覅是覅世界佛教阿松i范吉奥i是房间都是金佛ex哎', 51, 563, 300, 300, 2); | |
191 | 195 | |
192 | - //绘制小程序码 | |
193 | - wx.getImageInfo({ | |
194 | - src: path3, | |
195 | - success: function(res) { | |
196 | - ctx.drawImage(res.path, 152*scale, 262*scale, 66*scale, 66*scale); | |
197 | - ctx.draw(true); | |
198 | - } | |
199 | - }) | |
196 | + // 绘制小程序码 | |
197 | + ctx.drawImage(this.data.ewm, 310, 525, 132, 132); | |
198 | + // ctx.draw(true); | |
200 | 199 | |
201 | - //绘制文字:常按识别 | |
202 | - ctx.setFontSize(14*scale); | |
200 | + //绘制文字:长按识别 | |
201 | + ctx.setFontSize(20); | |
203 | 202 | ctx.setFillStyle('#1E1E1E'); |
204 | - ctx.fillText('长按识别小程序', 135*scale, 350*scale); | |
205 | - | |
203 | + ctx.fillText('长按识别小程序', 309, 675); | |
206 | 204 | |
207 | - //把画板内容绘制成图片,并回调 画板图片路径 | |
208 | 205 | ctx.draw(true, function() { |
209 | 206 | setTimeout(function() { |
207 | + console.log("我进来了~~~~~"); | |
210 | 208 | wx.canvasToTempFilePath({ |
211 | 209 | x: 0, |
212 | 210 | y: 0, |
213 | - destWidth: that.data.windowWidth*2, | |
214 | - destHeight: that.data.windowHeight*2, | |
215 | - fileType: 'jpg', | |
216 | - quality: 1, | |
211 | + width: 750, | |
212 | + height: 1217, | |
213 | + destWidth: 750, | |
214 | + destHeight: 1217, | |
217 | 215 | canvasId: 'myCanvas', |
216 | + fileType: 'jpg', | |
218 | 217 | success: function(res) { |
219 | 218 | wx.hideLoading(); |
220 | 219 | that.setData({ |
221 | - canvasToImgPath: res.tempFilePath, | |
220 | + canvasToImgPath: res.tempFilePath | |
222 | 221 | }); |
223 | - console.log(res.tempFilePath); | |
222 | + // that.saveImageToPhotosAlbum(res.tempFilePath); | |
223 | + console.log('截图陈宫:', that.data.canvasToImgPath); | |
224 | + // wx.previewImage({ | |
225 | + // //将图片预览出来 | |
226 | + // urls: [that.data.canvasToImgPath] | |
227 | + // }); | |
224 | 228 | } |
225 | 229 | }) |
226 | - }, 3000) | |
230 | + }, 1000) | |
227 | 231 | }); |
228 | - }, | |
229 | 232 | |
230 | - | |
233 | + | |
234 | + | |
235 | + }, | |
236 | + | |
231 | 237 | |
232 | 238 | //点击观看直播 |
233 | 239 | clickBtn: function () { |
... | ... | @@ -240,17 +246,18 @@ Page({ |
240 | 246 | |
241 | 247 | // 保存图片到手机 |
242 | 248 | onSaveToPhone() { |
249 | + var self = this; | |
243 | 250 | // 获取用户的当前设置,返回值中有小程序已经向用户请求过的权限 |
244 | 251 | this.getSetting().then((res) => { |
245 | 252 | // 判断用户是否授权了保存到相册的权限,如果没有发起授权 |
246 | 253 | if (!res.authSetting['scope.writePhotosAlbum']) { |
247 | 254 | this.authorize().then(() => { |
248 | 255 | // 同意授权后保存下载文件 |
249 | - this.savedownloadFile(this.data.canvasToImgPath) | |
256 | + this.saveImageToPhotosAlbum(self.data.canvasToImgPath) | |
250 | 257 | }) |
251 | 258 | } else { |
252 | 259 | // 如果已经授权,保存下载文件 |
253 | - this.savedownloadFile(this.data.canvasToImgPath) | |
260 | + this.saveImageToPhotosAlbum(self.data.canvasToImgPath) | |
254 | 261 | } |
255 | 262 | }) |
256 | 263 | }, |
... | ... | @@ -259,7 +266,7 @@ Page({ |
259 | 266 | onOpenSetting() { |
260 | 267 | wx.openSetting({ |
261 | 268 | success:(res) => { |
262 | - console.log(res.authSetting) | |
269 | + // console.log(res.authSetting) | |
263 | 270 | } |
264 | 271 | }) |
265 | 272 | }, |
... | ... | @@ -269,7 +276,6 @@ Page({ |
269 | 276 | return new Promise((resolve, reject) => { |
270 | 277 | wx.getSetting({ |
271 | 278 | success: res => { |
272 | - console.log('getting---->', res); | |
273 | 279 | resolve(res) |
274 | 280 | } |
275 | 281 | }) |
... | ... | @@ -286,7 +292,7 @@ Page({ |
286 | 292 | scope: 'scope.writePhotosAlbum', |
287 | 293 | // 同意授权 |
288 | 294 | success: () => { |
289 | - resolve() | |
295 | + resolve(); | |
290 | 296 | }, |
291 | 297 | // 拒绝授权,这里是用户拒绝授权后的回调 |
292 | 298 | fail: res => { |
... | ... | @@ -298,10 +304,10 @@ Page({ |
298 | 304 | duration: 1000 |
299 | 305 | }) |
300 | 306 | } else { |
301 | - this.showModal() | |
307 | + this.showModal(); | |
302 | 308 | } |
303 | 309 | console.log('拒绝授权'); |
304 | - reject() | |
310 | + reject(); | |
305 | 311 | } |
306 | 312 | }) |
307 | 313 | }) |
... | ... | @@ -311,12 +317,14 @@ Page({ |
311 | 317 | savedownloadFile(img) { |
312 | 318 | this.downLoadFile(img).then((res) => { |
313 | 319 | return this.saveImageToPhotosAlbum(res.tempFilePath) |
314 | - }).then(() => { | |
320 | + }).then(() => { | |
321 | + // resolve() | |
315 | 322 | }) |
316 | 323 | }, |
317 | 324 | |
318 | 325 | //单文件下载(下载文件资源到本地),客户端直接发起一个 HTTPS GET 请求,返回文件的本地临时路径。 |
319 | 326 | downLoadFile(img) { |
327 | + var self = this; | |
320 | 328 | return new Promise((resolve, reject) => { |
321 | 329 | wx.showLoading({ |
322 | 330 | title: '保存中...', |
... | ... | @@ -325,8 +333,7 @@ Page({ |
325 | 333 | wx.downloadFile({ |
326 | 334 | url: img, |
327 | 335 | success: (res) => { |
328 | - console.log('downloadfile', res) | |
329 | - resolve(res) | |
336 | + resolve(res); | |
330 | 337 | } |
331 | 338 | }) |
332 | 339 | }) |
... | ... | @@ -346,7 +353,13 @@ Page({ |
346 | 353 | self.setData({ |
347 | 354 | showPlaybill: 'true' |
348 | 355 | }); |
349 | - resolve() | |
356 | + resolve(); | |
357 | + }, | |
358 | + fail: () => { | |
359 | + wx.showToast({ | |
360 | + title: '保存失败', | |
361 | + duration: 1000, | |
362 | + }); | |
350 | 363 | } |
351 | 364 | }) |
352 | 365 | }) |
... | ... | @@ -384,6 +397,34 @@ Page({ |
384 | 397 | that.setData({ |
385 | 398 | details: obj |
386 | 399 | }) |
400 | + | |
401 | + | |
402 | + // 请求主图 | |
403 | + that.getImageInfo(that.data.details['cover_img']).then(res => { | |
404 | + that.setData({ | |
405 | + coverImg: res.path | |
406 | + }); | |
407 | + console.log('主图加载成功~') | |
408 | + }); | |
409 | + | |
410 | + // 请求头像 | |
411 | + that.getImageInfo(app.globalData.userInfo['head_pic']).then(res => { | |
412 | + that.setData({ | |
413 | + avatarUrl: res.path | |
414 | + }); | |
415 | + console.log('头像加载成功~') | |
416 | + }); | |
417 | + | |
418 | + // 请求二维码 | |
419 | + var path3 = os.url + "/api/wx/open/app/user/getWeAppEwm/" + | |
420 | + os.stoid + "?sceneValue=1012" + "&pageValue=pages/goods/goodsInfo/goodsInfo"; | |
421 | + that.getImageInfo(path3).then(res => { | |
422 | + that.setData({ | |
423 | + ewm: res.path | |
424 | + }); | |
425 | + console.log('二维码加载成功~') | |
426 | + }); | |
427 | + | |
387 | 428 | } |
388 | 429 | }) |
389 | 430 | |
... | ... | @@ -409,22 +450,21 @@ Page({ |
409 | 450 | } |
410 | 451 | |
411 | 452 | this.setData({ |
412 | - nickName: app.globalData.userInfo.nickname, | |
413 | - avatarUrl: app.globalData.userInfo.head_pic | |
453 | + nickName: app.globalData.userInfo.nickname | |
414 | 454 | }) |
415 | 455 | |
416 | - var path3 = os.url + "/api/wx/open/app/user/getWeAppEwm/" + | |
417 | - os.stoid + "?sceneValue=1012" + "&pageValue=pages/goods/goodsInfo/goodsInfo"; | |
418 | - wx.getImageInfo({ | |
419 | - src: path3, | |
420 | - success: function(res) { | |
456 | + // var path3 = os.url + "/api/wx/open/app/user/getWeAppEwm/" + | |
457 | + // os.stoid + "?sceneValue=1012" + "&pageValue=pages/goods/goodsInfo/goodsInfo"; | |
458 | + // wx.getImageInfo({ | |
459 | + // src: path3, | |
460 | + // success: function(res) { | |
421 | 461 | // ctx.drawImage(res.path, 152*scale, 262*scale, 66*scale, 66*scale); |
422 | 462 | // ctx.draw(true); |
423 | - that.setData({ | |
424 | - ewm: res.path | |
425 | - }) | |
426 | - } | |
427 | - }) | |
463 | + // that.setData({ | |
464 | + // ewm: res.path | |
465 | + // }) | |
466 | + // } | |
467 | + // }) | |
428 | 468 | }, |
429 | 469 | |
430 | 470 | // 获取图片信息 | ... | ... |
packageA/pages/liveStreamDetails/liveStreamDetails.wxml
... | ... | @@ -5,7 +5,7 @@ |
5 | 5 | <view class="content"> |
6 | 6 | <!-- 封面标题 --> |
7 | 7 | <view class="cover-container"> |
8 | - <image src="{{details.cover_img}}" class="cover-img" mode="aspectFill"></image> | |
8 | + <image src="{{details.cover_img}}" class="cover-img" mode="aspectFit"></image> | |
9 | 9 | <!-- <view class="cover-desc"> |
10 | 10 | <view>{{details.name}}</view> |
11 | 11 | <view>{{filter.format_time(details.start_time)}}</view> |
... | ... | @@ -29,13 +29,13 @@ |
29 | 29 | <block wx:for="{{details.goods}}"> |
30 | 30 | <view class="list-item" bindtap="clickgoods" data-url="{{item.url}}"> |
31 | 31 | <!-- {{item}} --> |
32 | - <image src="{{item.cover_img}}" class="item-pic"></image> | |
32 | + <image src="{{item.cover_img}}" class="item-pic" mode="aspectFit"></image> | |
33 | 33 | <view class="item-desc-container"> |
34 | 34 | <view class="item-desc"> |
35 | 35 | <!-- <view>WEI</view> --> |
36 | 36 | <view>{{item.name}}</view> |
37 | 37 | </view> |
38 | - <view class="item-price">{{item.price}}</view> | |
38 | + <view class="item-price">{{filter.toFix(item.price, 2)}}</view> | |
39 | 39 | </view> |
40 | 40 | </view> |
41 | 41 | </block> |
... | ... | @@ -74,15 +74,20 @@ |
74 | 74 | |
75 | 75 | <!-- 生成海报 --> |
76 | 76 | <view class="{{showPlaybill ? 'playbill':'playbill active'}}" hidden="{{showPlaybill}}"> |
77 | - <!-- <image src="{{canvasToImgPath}}" class="playbill-pic"></image> --> | |
78 | - <canvas canvas-id="myCanvas" class="playbill-pic" style="width:{{windowWidth*dpr}};height:width:{{windowHeight*dpr}}"></canvas> | |
79 | - <view class="playbill-save" bindtap="onSaveToPhone"> | |
80 | - <image src="/packageA/images/liveStreamDetails/save.jpg"></image>保存至相册 | |
81 | - </view> | |
77 | + <!-- <view class="playbill-save" bindtap="onSaveToPhone">保存至相册</view> --> | |
78 | + <image src="{{canvasToImgPath}}" class="playbill-pic" mode="aspectFill"></image> | |
79 | + <canvas canvas-id="myCanvas" catchtouchmove="true" style="width:480px;height:738px;position:absolute;left:5000%;"></canvas> | |
80 | + <!-- style="width:{{windowWidth}}px;height:{{windowHeight}}px;" --> | |
81 | + <view class="playbill-save" bindtap="onSaveToPhone">保存至相册</view> | |
82 | 82 | </view> |
83 | 83 | |
84 | + <!-- <canvas canvas-id="myCanvas" class="" catchtouchmove="true" style="width:{{windowWidth}}px;height:{{windowHeight}}px;"></canvas> --> | |
85 | + | |
84 | 86 | <!-- mask --> |
85 | 87 | <!-- 这里mask必须强制放在actionsheet和playbill的后面 --> |
86 | - <view class="mask" bindtap="hiddenActionSheet"></view> | |
88 | + <view class="mask" bindtap="hiddenActionSheet" catchtouchmove="true"></view> | |
87 | 89 | |
88 | 90 | </view> |
91 | + | |
92 | +<!-- <canvas canvas-id="myCanvas" class="" catchtouchmove="true" style="width:480px;height:738px;position:absolute;left:5000%"></canvas> --> | |
93 | +<!-- <canvas canvas-id='share' style='width:750rpx;height:1217rpx;' wx:if='{{!canvasHidden}}'></canvas> --> | ... | ... |
packageA/pages/liveStreamDetails/liveStreamDetails.wxss
... | ... | @@ -6,6 +6,7 @@ |
6 | 6 | .content { |
7 | 7 | background-color: white; |
8 | 8 | padding-bottom: 168rpx; |
9 | + position: relative; | |
9 | 10 | } |
10 | 11 | .cover-container { |
11 | 12 | height: 646rpx; |
... | ... | @@ -103,8 +104,8 @@ |
103 | 104 | } |
104 | 105 | .share-container image { |
105 | 106 | display: block; |
106 | - width: 60rpx; | |
107 | - height: 60rpx; | |
107 | + width: 50rpx; | |
108 | + height: 50rpx; | |
108 | 109 | padding-top: 14rpx; |
109 | 110 | padding-bottom: 11rpx; |
110 | 111 | } |
... | ... | @@ -222,10 +223,13 @@ |
222 | 223 | display: block; |
223 | 224 | width: 478rpx; |
224 | 225 | height: 737rpx; |
225 | - border-width: 31rpx 20rpx 51rpx; | |
226 | + /* border-width: 31rpx 20rpx 51rpx; | |
226 | 227 | border-color: #f23030; |
227 | - border-style: solid; | |
228 | + border-style: solid; */ | |
229 | + /* border: 4rpx solid #f23030; */ | |
228 | 230 | margin: 0 auto 26rpx; |
231 | + border-radius: 10rpx; | |
232 | + overflow: hidden; | |
229 | 233 | } |
230 | 234 | |
231 | 235 | .playbill-save { | ... | ... |