wxd / MShopWeApp

Commit 6194fb1d7c0c616540f4a2fc0f5b4176af2c5b92

Authored by 后端研发-苏泰源
1 parent c041a84f

商品详情页分享海报增加图片预览、分享按钮修改

Inline Side-by-side
Showing 3 changed files with 31 additions and 80 deletions
pages/goods/goodsInfo/goodsInfo.js
  View file @6194fb1
... ... @@ -4644,7 +4644,7 @@ Page({
4644 4644 context.setLineJoin('round'); //交点设置成圆角
4645 4645 context.setFillStyle("white")
4646 4646 context.setTextAlign('left');
4647   - context.fillText('强烈推荐', 64 * unit, 672 * unit);
  4647 + context.fillText('强烈推荐', 64 * unit, 668 * unit);
4648 4648 // 7.商品价格
4649 4649 let price = '￥' + this.data.data.shop_price;
4650 4650  
... ... @@ -6550,67 +6550,16 @@ Page({
6550 6550 },
6551 6551  
6552 6552  
  6553 + // 预览海报
  6554 + previewPoster() {
  6555 + wx.previewImage({
  6556 + current: this.data.shareImgPath, // 当前显示图片的http链接
  6557 + urls: [this.data.shareImgPath] ,// 需要预览的图片http链接列表
  6558 + });
  6559 + },
6553 6560  
6554 6561  
6555   -
6556   - // 获取指定元素实际宽度
6557   - _getElementWidth(id) {
6558   - // return new Promise(resolve => {
6559   - // let _query = wx.createSelectorQuery();
6560   - // _query.select(id).boundingClientRect(function(res) {
6561   - // console.log('实际宽度~~~~~', res);
6562   - // }).exec();
6563   -
6564   - // const query = wx.createSelectorQuery().in(this)
6565   - // query.select('#toggle-content').boundingClientRect(function(res){
6566   - // //res.top // 这个组件内 #the-id 节点的上边界坐标
6567   - // // console.log('jfidsjfiojsdifjoisdjfiosdf', res);
6568   - // }).exec()
6569   - },
6570   -
6571   - // 说明文字收起/隐藏事件
6572   - toggleHandler() {
6573   - const {toggleFlag} = this.data.toggleParams;
6574   -
6575   - this.setData({
6576   - toggleParams: {
6577   - toggleFlag: toggleFlag === 0 ? 1 : 0,
6578   - toggleShow: true
6579   - }
6580   - })
6581   - },
6582   - /*
6583   - * 检测说明文字是否须要隐藏/收起操做
6584   - * 对比文字外层固定宽度容器元素宽度wrapperWidth与当前文字元素宽度contentWidth
6585   - * 若相差小于10则说明超出一行
6586   - * */
6587   - _checkRemarkToggle() {
6588   - var self = this;
6589   - // setTimeout(function() {
6590   - // self._getElementWidth('#toggle-content');
6591   - // }, 1000);
6592   -
6593   - // Promise.all([
6594   - // this._getElementWidth('#toggle-wrapper'),
6595   - // this._getElementWidth('#toggle-content')]
6596   - // ).then(res => {
6597   - // const wrapperWidth = res[0];
6598   - // const contentWidth = res[1];
6599   -
6600   - // // const {limitRemark, startDate, endDate, statusCode} = this.properties.couponData;
6601   -
6602   - // if (wrapperWidth - contentWidth < 10) {
6603   - // this.setData({
6604   - // // toggleParams: {
6605   - // // toggleFlag: 1,
6606   - // // toggleShow: true
6607   - // // },
6608   - // // timeArea: `${startDate}-${endDate}`,
6609   - // // unableImageSrc: UNABLE_IMAGE[statusCode]
6610   - // })
6611   - // }
6612   - // })
6613   - }
  6562 +
6614 6563  
6615 6564  
6616 6565  
... ...
pages/goods/goodsInfo/goodsInfo.wxml
  View file @6194fb1
... ... @@ -183,8 +183,8 @@
183 183 {{data.goods_name}}
184 184 </view>
185 185 <!-- 这个是分享按钮 -->
186   - <view class="xc-share-frame t-c" bindtap="clickShare">
187   - <view class="iconfont icon-share fs60"></view>
  186 + <view class="xc-share-frame t-c shrink0" bindtap="clickShare">
  187 + <view class="iconfont icon-share"></view>
188 188 <view class="fs22 c-7b">分享</view>
189 189 </view>
190 190 </view>
... ... @@ -265,9 +265,9 @@
265 265 </view>
266 266 <!-- 这个是分享按钮 -->
267 267 <!-- <view class="xc-share-frame {{prom_type==1?'s_ms_bth':''}} t-c" bindtap="saveImageToPhotosAlbum"> -->
268   - <view class="xc-share-frame t-c" bindtap="clickShare">
  268 + <view class="xc-share-frame t-c shrink0" bindtap="clickShare">
269 269 <!-- <image class="share-frame" src="{{iurl}}/miniapp/images/share.png"></image> -->
270   - <view class="iconfont icon-share fs60"></view>
  270 + <view class="iconfont icon-share"></view>
271 271 <!-- <view class="share-font">1分享</view> -->
272 272 <view class="fs22 c-7b">分享</view>
273 273 </view>
... ... @@ -289,7 +289,7 @@
289 289  
290 290 <view class="goods-price">
291 291  
292   - <view class="flex jc_sb">
  292 + <view class="flex jc_sb ai_c">
293 293 <view class="co-red" wx:if="{{prom_type==0 || prom_type==3}}">
294 294  
295 295 <view class="market-price flex" style="align-items: baseline;">
... ... @@ -316,9 +316,9 @@
316 316 </view>
317 317 </view>
318 318 <!-- 这个是分享按钮 -->
319   - <view class="xc-share-frame t-c" bindtap="clickShare" wx:if="{{prom_type != 1 && prom_type != 2}}">
  319 + <view class="xc-share-frame t-c shrink0" bindtap="clickShare" wx:if="{{prom_type != 1 && prom_type != 2}}">
320 320 <!-- <image class="share-frame" src="{{iurl}}/miniapp/images/share.png"></image> -->
321   - <view class="iconfont icon-share fs60"></view>
  321 + <view class="iconfont icon-share"></view>
322 322 <view class="fs22 c-7b">分享</view>
323 323 </view>
324 324 </view>
... ... @@ -400,7 +400,7 @@
400 400 </view>
401 401  
402 402 <view wx:if="{{prom_type==1}}">
403   - <view class="flex jc_sb">
  403 + <view class="flex jc_sb ai_c">
404 404 <view class="flex" style="align-items: baseline;">
405 405 <view class="flex xc-price-frame">
406 406 <text class="fs30">￥</text>
... ... @@ -410,9 +410,9 @@
410 410 </view>
411 411 <!-- 这个是分享按钮 -->
412 412 <!-- <view class="xc-share-frame {{prom_type==1?'s_ms_bth':''}} t-c" bindtap="saveImageToPhotosAlbum"> -->
413   - <view class="xc-share-frame t-c" bindtap="clickShare">
  413 + <view class="xc-share-frame t-c shrink0" bindtap="clickShare">
414 414 <!-- <image class="share-frame" src="{{iurl}}/miniapp/images/share.png"></image> -->
415   - <view class="iconfont icon-share fs60"></view>
  415 + <view class="iconfont icon-share"></view>
416 416 <!-- <view class="share-font">1分享</view> -->
417 417 <view class="fs22 c-7b">分享</view>
418 418 </view>
... ... @@ -432,8 +432,8 @@
432 432 <view class="xc-explain flex jc_sb" wx:if="{{prom_type==2}}">
433 433 <view class="fs32 ellipsis-2" style="max-width:80%; max-height: 90rpx;">{{sele_g.goods_name}}</view>
434 434 <!-- 这个是分享按钮 -->
435   - <view class="xc-share-frame t-c" bindtap="clickShare" style="flex-shrink:0;position: relative;top: -22rpx;">
436   - <view class="iconfont icon-share fs60"></view>
  435 + <view class="xc-share-frame t-c shrink0" bindtap="clickShare" style="flex-shrink:0;position: relative;top: -22rpx;">
  436 + <view class="iconfont icon-share"></view>
437 437 <view class="fs22 c-7b">分享</view>
438 438 </view>
439 439 </view>
... ... @@ -1644,7 +1644,8 @@
1644 1644 </block>
1645 1645 <!-- ---------------分享弹窗--------------- -->
1646 1646 <!-- 二维码显示页面 -->
1647   -<canvas canvas-id='share' style='width:750rpx;height:1217rpx;background-color:white;' wx:if='{{!canvasHidden}}'></canvas>
  1647 +<!-- <canvas canvas-id='share' style='width:750rpx;height:1217rpx;background-color:white;position: fixed;top: 0;'></canvas> -->
  1648 +<canvas canvas-id='share' style='width:750rpx;height:1217rpx;background-color:white;'></canvas>
1648 1649 <warn id="warn"></warn>
1649 1650 <!-- 分享控件，底部弹出 -->
1650 1651 <share id="share_button" bind:send="send" bind:cancel="cancel" bind:share_img="saveImageToPhotosAlbum" wx:if="{{share_hidden}}"></share>
... ... @@ -1652,7 +1653,7 @@
1652 1653 <view class="mask" catchtap="closePoster"></view>
1653 1654 <view class="poster-container">
1654 1655 <view class="poster-wrapper">
1655   - <view class="poster">
  1656 + <view class="poster" bindtap="previewPoster">
1656 1657 <!-- <view class="poster" bindtap="previewImage"> -->
1657 1658 <image src="{{shareImgPath}}" class="poster-img"></image>
1658 1659 <view class="btn-close" catchtap="closePoster">
... ...
pages/goods/goodsInfo/goodsInfo.wxss
  View file @6194fb1
... ... @@ -2289,8 +2289,9 @@ view.cart-btn-lg {
2289 2289  
2290 2290 /* 分享 */
2291 2291 .icon-share {
2292   - font-size: 46rpx;
  2292 + font-size: 42rpx;
2293 2293 color: #d60021;
  2294 + line-height: 1;
2294 2295 }
2295 2296  
2296 2297 .xc-share-frame {
... ... @@ -3686,8 +3687,8 @@ button.custom-service::after {
3686 3687 .poster {
3687 3688 box-sizing: border-box;
3688 3689 width: 100%;
3689   - height: 915rpx;
3690   - border-radius: 20rpx;
  3690 + height: 940rpx;
  3691 + border-radius: 16rpx;
3691 3692 /* box-shadow: 0 8px 12px #666; */
3692 3693 position: relative;
3693 3694 z-index: 999;
... ... @@ -3743,10 +3744,10 @@ button.custom-service::after {
3743 3744 .btn-close {
3744 3745 /* background-color: rgba(0,0,0,.5); */
3745 3746 color: #ccc;
3746   - width: 50rpx;
  3747 + /* width: 50rpx;
3747 3748 height: 50rpx;
3748 3749 line-height: 50rpx;
3749   - text-align: center;
  3750 + text-align: center; */
3750 3751 border-radius: 50%;
3751 3752 position: absolute;
3752 3753 right: 20rpx;
... ... @@ -3754,7 +3755,7 @@ button.custom-service::after {
3754 3755 }
3755 3756  
3756 3757 .icon-close {
3757   - font-size: 48rpx;
  3758 + font-size: 36rpx;
3758 3759 }
3759 3760  
3760 3761 .quan_price {
... ...