wxd / MShopWeApp

Commit ad261438aa0f006dd502edeb0c171d6cc3b5f2ee

Authored by 后端研发-倪永富
1 parent de3f7688

分享海报页面排版优化，增加转发好友和保存到相册，点击海报进入图片预览

Inline Side-by-side
Showing 3 changed files with 280 additions and 69 deletions
pages/goods/goodsInfo/goodsInfo.js
  View file @ad26143
... ... @@ -241,6 +241,8 @@ Page({
241 241  
242 242 poster:null, //自定义海报
243 243 share_b_img:'', //自定义分享的背景
  244 +
  245 + showPoster: false,
244 246 },
245 247  
246 248 //------初始化加载----------
... ... @@ -1536,6 +1538,7 @@ Page({
1536 1538  
1537 1539 //--点击分享事件---
1538 1540 onShareAppMessage: function(t) {
  1541 +
1539 1542 var th = this;
1540 1543 var price = th.data.data.shop_price;
1541 1544 if (th.data.prom_act) {
... ... @@ -3330,10 +3333,13 @@ Page({
3330 3333 //先画背景
3331 3334 var pg_path = "../../../images/share/share_bg.png";
3332 3335  
  3336 + // context.fillStyle="#FFFFFF";
  3337 + // context.fillRect(0,0,554 * unit, 899 * unit);
  3338 +
3333 3339 //-- 如果有自定义海报的时候，判断背景的图片 --
3334 3340 if(th.data.share_b_img){
3335 3341 pg_path=th.data.share_b_img;
3336   - }
  3342 + }
3337 3343 context.drawImage(pg_path, 0, 0, 554 * unit, 899 * unit);
3338 3344  
3339 3345 //-- 是自定义海报的情况下 --
... ... @@ -3655,10 +3661,13 @@ Page({
3655 3661 })
3656 3662 return false;
3657 3663 }
3658   - wx.previewImage({
3659   - //将图片预览出来
3660   - urls: [that.data.shareImgPath]
3661   - });
  3664 + // wx.previewImage({
  3665 + // //将图片预览出来
  3666 + // urls: [that.data.shareImgPath]
  3667 + // });
  3668 + that.setData({
  3669 + showPoster: true,
  3670 + });
3662 3671 wx.hideLoading();
3663 3672 }
3664 3673 })
... ... @@ -4353,8 +4362,118 @@ Page({
4353 4362 })
4354 4363 }
4355 4364 })
4356   - }
4357   -
4358   -
  4365 + },
  4366 +
  4367 + closePoster() {
  4368 + this.setData({
  4369 + showPoster: false,
  4370 + });
  4371 + },
  4372 +
  4373 + // 保存图片到手机
  4374 + savePic() {
  4375 + console.log('保存图片');
  4376 + var self = this;
  4377 + // 获取用户的当前设置，返回值中有小程序已经向用户请求过的权限
  4378 + this.getSetting().then((res) => {
  4379 + // 判断用户是否授权了保存到相册的权限，如果没有发起授权
  4380 + if (!res.authSetting['scope.writePhotosAlbum']) {
  4381 + this.authorize().then(() => {
  4382 + // 同意授权后保存下载文件
  4383 + this.saveImage(self.data.shareImgPath)
  4384 + .then(() => {
  4385 + self.setData({
  4386 + showPoster: false
  4387 + });
  4388 + });
  4389 + })
  4390 + } else {
  4391 + // 如果已经授权，保存下载文件
  4392 + this.saveImage(self.data.shareImgPath)
  4393 + .then(() => {
  4394 + self.setData({
  4395 + showPoster: false
  4396 + });
  4397 + });
  4398 + }
  4399 +
  4400 + })
  4401 + },
  4402 +
  4403 + // 获取用户已经授予了哪些权限
  4404 + getSetting() {
  4405 + return new Promise((resolve, reject) => {
  4406 + wx.getSetting({
  4407 + success: res => {
  4408 + resolve(res)
  4409 + }
  4410 + })
  4411 + })
  4412 + },
  4413 +
  4414 + // 发起首次授权请求
  4415 + authorize() {
  4416 + // isFirst 用来记录是否为首次发起授权，
  4417 + // 如果首次授权拒绝后，isFirst赋值为1
  4418 + let isFirst = wx.getStorageSync('isFirst') || 0;
  4419 + return new Promise((resolve, reject) => {
  4420 + wx.authorize({
  4421 + scope: 'scope.writePhotosAlbum',
  4422 + // 同意授权
  4423 + success: () => {
  4424 + resolve();
  4425 + },
  4426 + // 拒绝授权,这里是用户拒绝授权后的回调
  4427 + fail: res => {
  4428 + if(isFirst === 0) {
  4429 + wx.setStorageSync('isFirst', 1);
  4430 + wx.showToast({
  4431 + title: '保存失败',
  4432 + icon: 'none',
  4433 + duration: 1000
  4434 + })
  4435 + } else {
  4436 + this.showModal();
  4437 + }
  4438 + console.log('拒绝授权');
  4439 + reject();
  4440 + }
  4441 + })
  4442 + })
  4443 + },
  4444 +
  4445 +
  4446 + // 保存图片到系统相册
  4447 + saveImage(saveUrl) {
  4448 + var self = this;
  4449 + return new Promise((resolve, reject) => {
  4450 + wx.saveImageToPhotosAlbum({
  4451 + filePath: saveUrl,
  4452 + success: (res) => {
  4453 + wx.showToast({
  4454 + title: '保存成功',
  4455 + duration: 1000,
  4456 + });
  4457 + self.setData({
  4458 + showPlaybill: 'true'
  4459 + });
  4460 + resolve();
  4461 + },
  4462 + fail: () => {
  4463 + wx.showToast({
  4464 + title: '保存失败',
  4465 + duration: 1000,
  4466 + });
  4467 + }
  4468 + })
  4469 + })
  4470 + },
  4471 +
  4472 + previewImage() {
  4473 + wx.previewImage({
  4474 + //将图片预览出来
  4475 + urls: [this.data.shareImgPath]
  4476 + });
  4477 + },
4359 4478  
4360 4479 });
... ...
pages/goods/goodsInfo/goodsInfo.wxml
  View file @ad26143
... ... @@ -383,14 +383,14 @@
383 383 </block>
384 384  
385 385 <!-- 门店收货地址 -->
386   - <view class="xc-address_frame flex-vertical xc-ash {{def_pick_store!=null?'sn_height':'on_height'}}" >
  386 + <view class="xc-address_frame bdt16 flex-vertical xc-ash {{def_pick_store!=null?'sn_height':'on_height'}}" >
387 387 <view class="address_frame" bindtap="choice_store" data-ind="0">
388 388 <view class="flex-vertical-between ">
389 389 <view class="flex-vertical select_store_height">
390 390 <image class="stores-img" src="{{iurl}}/miniapp/images/stores.png"></image>
391   - <view class="fs30 xc-ash-9f">选择门店</view>
  391 + <view class="fs30" style="color:black;">选择门店</view>
392 392 </view>
393   - <view class="red_bb fs32">
  393 + <view class="red_bb fs30">
394 394 更多门店
395 395 <text class="bg_jj"></text>
396 396 </view>
... ... @@ -421,9 +421,9 @@
421 421 </view>
422 422  
423 423 <!--许程 7.24暂时注释 -->
424   - <view wx:if="{{prom_type!=1&&prom_act.kttype!=3&&prom_act.kttype!=2&&prom_act.kttype!=1 && is_closecoupon!=1}}">
  424 + <view class="bdt16" wx:if="{{prom_type!=1&&prom_act.kttype!=3&&prom_act.kttype!=2&&prom_act.kttype!=1 && is_closecoupon!=1}}">
425 425 <view class="cx-frame flex" style="position: relative" wx:if="{{fir_quan.length>0}}">
426   - <view class="cx-sizs wsize">领券</view>
  426 + <view class="cx-sizs fs30">领券</view>
427 427 <view class="xc-coupon-fram" wx:for="{{fir_quan}}" wx:key="{{index}}">
428 428 <view class="circle xc-circular xc-one"></view>
429 429 <view class="xc-coupon t-c four-level-word">满{{item.condition}}减{{item.money}}</view>
... ... @@ -478,7 +478,7 @@
478 478 </block>
479 479  
480 480  
481   - <view class="bz_view flex ai-center" wx:if="{{bconfig}}" style="line-height: 36rpx">
  481 + <view class="bz_view flex ai-center bdt16" wx:if="{{bconfig}}" style="line-height: 36rpx">
482 482 <image class="bzfu_img" src="{{iurl}}/miniapp/images/bzfu_w.png"></image>
483 483 <view class="bz-content">{{bconfig.service_bz}}</view>
484 484 </view>
... ... @@ -507,7 +507,7 @@
507 507  
508 508  
509 509 <!--- 宝贝评价 ---->
510   - <view style="overflow: hidden">
  510 + <view class="bdt16" style="overflow: hidden">
511 511 <view class="bb_view">
512 512 <view>宝贝评价（{{categories3[0].num}}）</view>
513 513 <view class="red_bb" bindtap="look_pj">查看全部
... ... @@ -523,32 +523,34 @@
523 523 </view>
524 524  
525 525 <scroll-view scroll-x="true" class="pj_scroll">
526   - <view class="xc_comment-detail" style="display: inline-block" wx:for="{{fir_comments}}" wx:key="fir_comments">
527   - <view class="xc_comment-left">
528   - <view class="xc_comment-user">
529   - <view class="xc_user-img">
530   - <image class="xc_imgs" src='{{item.is_anonymous!=1?item.head_pic:iurl+"/miniapp/images/hui_hear_pic.png"}}' binderror="bind_bnerr2" data-errorimg="fir_comments[{{index}}].head_pic"></image>
531   - </view>
532   -
533   - <view class="xc_user">
534   - <view class="xc_user-name five-level-word">{{item.is_anonymous!=1?item.username:'匿名'}}</view>
535   - <image class="xc_comment-img" src="{{iurl}}/miniapp/images/star-red.png" wx:for="{{item.sum_rank}}" wx:key="{{index}}"></image>
536   - </view>
537   - </view>
538   - <view class="xc_comment-font pj_word_size ellipsis-2">
539   - {{item.content?item.content:''}}
540   - </view>
541   - <view class="xc_comment-val">
542   - <view class="xc_comment-time">{{item.add_time}}</view>
543   -
544   - </view>
545   - </view>
546   - <view class="xc_goods-img-frame">
547   - <image wx:if="{{item.img[0]!=undefined && item.img[0]!=null}}" class="xc_goods-img" src='{{iurl+item.img[0]}}'></image>
548   - <image wx:elif="{{item.weapp_img[0]!=undefined && item.weapp_img[0]!=null}}" class="xc_goods-img" src='{{item.weapp_img[0]}}'></image>
549   - <image wx:else class="xc_goods-img" src='{{gallery[0].image_url}}'></image>
550   - </view>
551   - </view>
  526 +
  527 + <view class="xc_comment-detail" style="display: inline-block" wx:for="{{fir_comments}}" wx:key="fir_comments">
  528 + <view class="xc_comment-left">
  529 + <view class="xc_comment-user">
  530 + <view class="xc_user-img">
  531 + <image class="xc_imgs" src='{{item.is_anonymous!=1?item.head_pic:iurl+"/miniapp/images/hui_hear_pic.png"}}' binderror="bind_bnerr2" data-errorimg="fir_comments[{{index}}].head_pic"></image>
  532 + </view>
  533 +
  534 + <view class="xc_user">
  535 + <view class="xc_user-name five-level-word">{{item.is_anonymous!=1?item.username:'匿名'}}</view>
  536 + <image class="xc_comment-img" src="{{iurl}}/miniapp/images/star-red.png" wx:for="{{item.sum_rank}}" wx:key="{{index}}"></image>
  537 + </view>
  538 + </view>
  539 + <view class="xc_comment-font pj_word_size ellipsis-2">
  540 + {{item.content?item.content:''}}
  541 + </view>
  542 + <view class="xc_comment-val">
  543 + <view class="xc_comment-time">{{item.add_time}}</view>
  544 +
  545 + </view>
  546 + </view>
  547 + <view class="xc_goods-img-frame">
  548 + <image wx:if="{{item.img[0]!=undefined && item.img[0]!=null}}" class="xc_goods-img" src='{{iurl+item.img[0]}}'></image>
  549 + <image wx:elif="{{item.weapp_img[0]!=undefined && item.weapp_img[0]!=null}}" class="xc_goods-img" src='{{item.weapp_img[0]}}'></image>
  550 + <image wx:else class="xc_goods-img" src='{{gallery[0].image_url}}'></image>
  551 + </view>
  552 + </view>
  553 +
552 554 </scroll-view>
553 555 </view>
554 556  
... ... @@ -563,7 +565,7 @@
563 565 </view>
564 566 <view class="t_g_info">
565 567 <view class="red_shu"></view>
566   - <view style='font-size: 32rpx;'>商品信息</view>
  568 + <view class="fs30">商品信息</view>
567 569 </view>
568 570 <view class="table_s">
569 571 <view class="tb_item tb-l">
... ... @@ -985,7 +987,7 @@
985 987 <!-- 没有门店的时候 -->
986 988 <view class="flex" bindtap="choice_store" wx:else>
987 989 <image class="stores-img" src="{{iurl}}/miniapp/images/stores.png"></image>
988   - <view class="fs28 xc-ash-9f">选择门店</view>
  990 + <view class="fs30" style="color:black;">选择门店</view>
989 991 </view>
990 992  
991 993 <view class="red-co fs28" bindtap="choice_store" >
... ... @@ -1483,5 +1485,18 @@
1483 1485 </block>
1484 1486 <!-- ---------------分享弹窗--------------- -->
1485 1487 <!--二维码显示页面-->
1486   -<canvas canvas-id='share' style='width:750rpx;height:1217rpx;' wx:if='{{!canvasHidden}}'></canvas>
1487   -<warn id="warn"></warn>
1488 1488 \ No newline at end of file
  1489 +<canvas canvas-id='share' style='width:750rpx;height:1217rpx;background-color:white;' wx:if='{{!canvasHidden}}'></canvas>
  1490 +<warn id="warn"></warn>
  1491 +
  1492 +
  1493 +<view wx:if="{{showPoster}}" class="poster-container">
  1494 + <view class="poster" bindtap="previewImage">
  1495 + <image src="{{shareImgPath}}" class="poster-img"></image>
  1496 + <view class="btn-close" bindtap="closePoster">x</view>
  1497 + </view>
  1498 + <view class="btn-container">
  1499 + <button class="btn-share" open-type="share" bindtap="">微信好友分享</button>
  1500 + <button class="btn-share" bindtap="savePic">保存到相册</button>
  1501 + </view>
  1502 +</view>
  1503 +
... ...
pages/goods/goodsInfo/goodsInfo.wxss
  View file @ad26143
... ... @@ -9,15 +9,15 @@ image {
9 9 display: flex;
10 10 justify-content: center;
11 11 width: 100%;
12   - height: 80rpx;
13   - margin-bottom: 20rpx;
  12 + /* height: 80rpx; */
  13 + /* margin-bottom: 20rpx; */
14 14 background-color: #fff;
15   - border-bottom: 1rpx #fafafa solid;
  15 + /* border-bottom: 1rpx #fafafa solid; */
16 16 }
17 17 .type-box {
18 18 width: 25%;
19 19 box-sizing: border-box;
20   - font-size: 36rpx;
  20 + font-size: 28rpx;
21 21 line-height: 76rpx;
22 22 padding: 0 20rpx;
23 23 text-align: center;
... ... @@ -25,13 +25,27 @@ image {
25 25 overflow: hidden;
26 26 }
27 27 .type-navbar-item {
28   - border-bottom: 4rpx solid #fff;
  28 + /* border-bottom: 4rpx solid #fff; */
29 29 display: flex;
30 30 justify-content: center;
31 31 width: 100%;
32 32 }
33 33 .type-item-on {
34   - border-bottom: 4rpx solid #333;
  34 + color: #F95D74;
  35 + font-weight: bold;
  36 + /* border-bottom: 4rpx solid #F95D74; */
  37 + position: relative;
  38 +}
  39 +.type-item-on:after {
  40 + content: '';
  41 + position: absolute;
  42 + width: 50%;
  43 + height: 4rpx;
  44 + background-color: #F95D74;
  45 + left: 0;
  46 + right: 0;
  47 + bottom: 0;
  48 + margin: 0 auto;
35 49 }
36 50 .swiper_box {
37 51 width: 100%;
... ... @@ -46,9 +60,12 @@ image {
46 60 width: 560rpx;
47 61 line-height: 46rpx;
48 62 font-size: 32rpx;
  63 + font-weight: bold;
49 64 color: #333;
50   - margin-top: 40rpx;
51   - margin-bottom:20rpx;
  65 + margin-top: 30rpx;
  66 + margin-bottom:30rpx;
  67 + flex: 1;
  68 + text-align: justify;
52 69 }
53 70  
54 71 .goods-collect {
... ... @@ -78,7 +95,7 @@ image {
78 95  
79 96 /* margin-top: 46rpx; */
80 97 margin-top:26rpx;
81   - padding-bottom:12rpx;
  98 + padding-bottom:20rpx;
82 99 }
83 100  
84 101 .prom-info {
... ... @@ -114,7 +131,8 @@ image {
114 131 .goods-price>.tm{ color: #999999; font-size: 26rpx;margin-top: 10rpx;}
115 132  
116 133 .goods-num {
117   - display: flex;font-size: 28rpx;
  134 + display: flex;
  135 + font-size: 24rpx;
118 136 justify-content: space-between;
119 137 }
120 138  
... ... @@ -949,11 +967,12 @@ left:31rpx;}
949 967  
950 968 .bzfu_img{ width: 164rpx; height:34rpx; margin-right: 18rpx; margin-left: 12rpx }
951 969 .bz_view{ height:100rpx; padding: 0 34rpx 0 13rpx; color: #333; font-size: 28rpx;
952   - border-bottom: 3rpx solid #eee; border-top: 3rpx solid #eee; }
  970 + /* border-bottom: 3rpx solid #eee; */
  971 + /* border-top: 3rpx solid #eee; */}
953 972 .bz_view view{ width: 460rpx; max-height: 70rpx; overflow: hidden;}
954 973  
955 974 .bb_view{ display: flex;align-items: center;justify-content: space-between; padding: 0 34rpx; color: #333;
956   - font-size: 32rpx; height: 104rpx; line-height: 104rpx; overflow: hidden; padding-right:26rpx }
  975 + font-size: 30rpx; height: 104rpx; line-height: 104rpx; overflow: hidden; padding-right:26rpx }
957 976 .red_bb{ color: #d70026; min-width:158rpx;width: auto;}
958 977 .bg_jj{ width: 18rpx; height:18rpx;
959 978 border-top: 2rpx solid #d70026;
... ... @@ -1180,7 +1199,7 @@ left:31rpx;}
1180 1199 background: #ffe3e2;
1181 1200 color: 28rpx;
1182 1201 border-radius:20rpx;
1183   - font-size: 28rpx;
  1202 + font-size: 24rpx;
1184 1203 }
1185 1204 .xc_comment-discuss{
1186 1205 width: 152rpx;
... ... @@ -1190,7 +1209,7 @@ left:31rpx;}
1190 1209 background: #ffe3e2;
1191 1210 color: 28rpx;
1192 1211 border-radius:20rpx;
1193   - font-size: 28rpx;
  1212 + font-size: 24rpx;
1194 1213 margin-left: 28rpx
1195 1214 }
1196 1215  
... ... @@ -1274,7 +1293,14 @@ left:31rpx;}
1274 1293 }
1275 1294  
1276 1295 .pj_word_size{ font-size: 28rpx}
1277   -.pj_scroll{white-space: nowrap;margin-bottom: 50rpx;}
  1296 +.pj_scroll{
  1297 + white-space: nowrap;
  1298 + /* height: 324rpx; */
  1299 + margin-bottom: 50rpx;
  1300 + display: flex;
  1301 + align-items: center;
  1302 + /* box-shadow: 0 8px 12px #e7e9eb; */
  1303 +}
1278 1304  
1279 1305  
1280 1306 /*领券*/
... ... @@ -1285,7 +1311,7 @@ left:31rpx;}
1285 1311 font-size: 23rpx;
1286 1312 }
1287 1313 .cx-frame{
1288   - border-top:3rpx solid #eee;
  1314 + /* border-top:3rpx solid #eee; */
1289 1315 width:99%;
1290 1316 height: 95rpx;
1291 1317 line-height: 95rpx;
... ... @@ -1317,19 +1343,17 @@ left:31rpx;}
1317 1343  
1318 1344 }
1319 1345 .xc-coupon-fram .xc-circular{
1320   - width: 24rpx;
1321   - height:20rpx;
  1346 + width: 22rpx;
  1347 + height:22rpx;
1322 1348 background-color:#fff;
1323 1349 position:absolute;
1324   - top:40rpx;
1325   -
1326   -
  1350 + top: 40rpx;
1327 1351 }
1328 1352 .xc-coupon-fram .xc-one{
1329 1353 left:3rpx;
1330 1354 }
1331 1355 .xc-coupon-fram .xc-two{
1332   - left: 175rpx;
  1356 + left: 178rpx;
1333 1357 }
1334 1358  
1335 1359 .cx-obtain-coupon{
... ... @@ -2257,7 +2281,7 @@ right:17rpx; top:55rpx;
2257 2281 .no_pj_list{text-align: center; width: 100%; color: #999; margin: 30rpx 0; display: inline-block; font-size: 28rpx}
2258 2282 /* 门店地址 */
2259 2283 .xc-address_frame{
2260   - border-top:1rpx solid #eee;
  2284 + /* border-top:1rpx solid #eee; */
2261 2285 width: 100%;
2262 2286 height: auto;
2263 2287 }
... ... @@ -2322,6 +2346,7 @@ background: white;
2322 2346 width: 100%;
2323 2347 border-radius: 20rpx 20rpx 0 0;
2324 2348 height: 72%;
  2349 +bottom: 0;
2325 2350 }
2326 2351 .popup-top{
2327 2352 border-bottom: 1rpx solid #eee;
... ... @@ -2605,4 +2630,56 @@ button.custom-service::after{
2605 2630 .dp_cx_view{border-bottom: 0.02rpx solid #eee; padding-bottom: 40rpx}
2606 2631 .act_content{ margin-top: 40rpx}
2607 2632 .act_content view{ margin-bottom: 12rpx}
2608   -.color_b{color: #ff9c00}
2609 2633 \ No newline at end of file
  2634 +.color_b{color: #ff9c00}
  2635 +
  2636 +.poster-container {
  2637 + box-sizing: border-box;
  2638 + position: fixed;
  2639 + top: 0;
  2640 + width: 100%;
  2641 + height: 100%;
  2642 + z-index: 999;
  2643 + background-color: rgba(0,0,0,.4);
  2644 + padding: 60rpx;
  2645 +}
  2646 +
  2647 +.poster {
  2648 + box-sizing: border-box;
  2649 + width: 100%;
  2650 + height: 90%;
  2651 + border-radius: 20rpx;
  2652 + /* box-shadow: 0 8px 12px #666; */
  2653 + position: relative;
  2654 + z-index: 999;
  2655 + overflow: hidden;
  2656 +}
  2657 +.poster-img {
  2658 + display: block;
  2659 + width: 100%;
  2660 + height: 100%;
  2661 +}
  2662 +.btn-container {
  2663 + display: flex;
  2664 + justify-content: space-around;
  2665 +}
  2666 +.btn-share {
  2667 + display: block;
  2668 + background-color: #FE6867;
  2669 + color: white;
  2670 + border-radius: 8rpx;
  2671 + line-height: 80rpx;
  2672 + margin-top: 28rpx;
  2673 + padding: 0 60rpx;
  2674 +}
  2675 +.btn-close {
  2676 + background-color: rgba(0,0,0,.5);
  2677 + color: white;
  2678 + width: 40rpx;
  2679 + height: 40rpx;
  2680 + line-height: 40rpx;
  2681 + text-align: center;
  2682 + border-radius: 50%;
  2683 + position: absolute;
  2684 + right: 20rpx;
  2685 + top: 10rpx;
  2686 +}
2610 2687 \ No newline at end of file
... ...