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

后端研发-苏泰源
1 parent c041a84f
Showing 3 changed files with 31 additions and 80 deletions
pages/goods/goodsInfo/goodsInfo.js
pages/goods/goodsInfo/goodsInfo.wxml
pages/goods/goodsInfo/goodsInfo.wxss
@@ -4644,7 +4644,7 @@ Page({
         context.setLineJoin('round'); //交点设置成圆角
         context.setFillStyle("white")
         context.setTextAlign('left');
-        context.fillText('强烈推荐', 64 * unit, 672 * unit);
+        context.fillText('强烈推荐', 64 * unit, 668 * unit);
         // 7.商品价格
         let price = '￥' + this.data.data.shop_price;
@@ -6550,67 +6550,16 @@ Page({
     },
+		// 预览海报
+		previewPoster() {
+			wx.previewImage({
+			  current: this.data.shareImgPath, // 当前显示图片的http链接
+			  urls: [this.data.shareImgPath] ,// 需要预览的图片http链接列表
+			});
+		},
-		
-		// 获取指定元素实际宽度
-				_getElementWidth(id) {
-					// return new Promise(resolve => {
-						// let _query = wx.createSelectorQuery();
-						// _query.select(id).boundingClientRect(function(res) {
-						// 	console.log('实际宽度~~~~~', res);
-						// }).exec();
-						
-						// const query = wx.createSelectorQuery().in(this)
-						//     query.select('#toggle-content').boundingClientRect(function(res){
-						//       //res.top // 这个组件内 #the-id 节点的上边界坐标
-						// 			// console.log('jfidsjfiojsdifjoisdjfiosdf', res);
-						//     }).exec()
-				},
-		
-				// 说明文字收起/隐藏事件
-				toggleHandler() {
-					const {toggleFlag} = this.data.toggleParams;
-		
-					this.setData({
-						toggleParams: {
-							toggleFlag: toggleFlag === 0 ? 1 : 0,
-							toggleShow: true
-						}
-					})
-				},
-				/*
-				* 检测说明文字是否须要隐藏/收起操做
-				* 对比文字外层固定宽度容器元素宽度wrapperWidth与当前文字元素宽度contentWidth
-				* 若相差小于10则说明超出一行
-				* */
-				_checkRemarkToggle() {
-					var self = this;
-					// setTimeout(function() {
-						// self._getElementWidth('#toggle-content');
-					// }, 1000);
-					
-		// 			Promise.all([
-		// 				this._getElementWidth('#toggle-wrapper'),
-		// 				this._getElementWidth('#toggle-content')]
-		// 			).then(res => {
-		// 				const wrapperWidth = res[0];
-		// 				const contentWidth = res[1];
-		
-		// 				// const {limitRemark, startDate, endDate, statusCode} = this.properties.couponData;
-		
-		// 				if (wrapperWidth - contentWidth < 10) {
-		// 					this.setData({
-		// 						// toggleParams: {
-		// 						// 	toggleFlag: 1,
-		// 						// 	toggleShow: true
-		// 						// },
-		// 						// timeArea: `${startDate}-${endDate}`,
-		// 						// unableImageSrc: UNABLE_IMAGE[statusCode]
-		// 					})
-		// 				}
-		// 			})
-				}
+
@@ -183,8 +183,8 @@
                   {{data.goods_name}}
                 </view>
                 <!-- 这个是分享按钮 -->
-                <view class="xc-share-frame t-c" bindtap="clickShare">
-                  <view class="iconfont icon-share fs60"></view>
+                <view class="xc-share-frame t-c shrink0" bindtap="clickShare">
+                  <view class="iconfont icon-share"></view>
                   <view class="fs22 c-7b">分享</view>
                 </view>
               </view>
@@ -265,9 +265,9 @@
               </view>
               <!-- 这个是分享按钮 -->
               <!-- <view class="xc-share-frame {{prom_type==1?'s_ms_bth':''}} t-c"  bindtap="saveImageToPhotosAlbum"> -->
-              <view class="xc-share-frame t-c" bindtap="clickShare">
+              <view class="xc-share-frame t-c shrink0" bindtap="clickShare">
                 <!-- <image class="share-frame" src="{{iurl}}/miniapp/images/share.png"></image> -->
-                <view class="iconfont icon-share fs60"></view>
+                <view class="iconfont icon-share"></view>
                 <!-- <view class="share-font">1分享</view> -->
                 <view class="fs22 c-7b">分享</view>
               </view>
@@ -289,7 +289,7 @@
           <view class="goods-price">
-            <view class="flex jc_sb">
+            <view class="flex jc_sb ai_c">
               <view class="co-red" wx:if="{{prom_type==0 || prom_type==3}}">
                 <view class="market-price flex" style="align-items: baseline;">
@@ -316,9 +316,9 @@
                 </view>
               </view>
               <!-- 这个是分享按钮 -->
-              <view class="xc-share-frame t-c" bindtap="clickShare" wx:if="{{prom_type != 1 && prom_type != 2}}">
+              <view class="xc-share-frame t-c shrink0" bindtap="clickShare" wx:if="{{prom_type != 1 && prom_type != 2}}">
                 <!-- <image class="share-frame" src="{{iurl}}/miniapp/images/share.png"></image> -->
-                <view class="iconfont icon-share fs60"></view>
+                <view class="iconfont icon-share"></view>
                 <view class="fs22 c-7b">分享</view>
               </view>
             </view>
@@ -400,7 +400,7 @@
             </view>
             <view wx:if="{{prom_type==1}}">
-              <view class="flex jc_sb">
+              <view class="flex jc_sb ai_c">
                 <view class="flex" style="align-items: baseline;">
                   <view class="flex xc-price-frame">
                     <text class="fs30">￥</text>
@@ -410,9 +410,9 @@
                 </view>
                 <!-- 这个是分享按钮 -->
                 <!-- <view class="xc-share-frame {{prom_type==1?'s_ms_bth':''}} t-c"  bindtap="saveImageToPhotosAlbum"> -->
-                <view class="xc-share-frame t-c" bindtap="clickShare">
+                <view class="xc-share-frame t-c shrink0" bindtap="clickShare">
                   <!-- <image class="share-frame" src="{{iurl}}/miniapp/images/share.png"></image> -->
-                  <view class="iconfont icon-share fs60"></view>
+                  <view class="iconfont icon-share"></view>
                   <!-- <view class="share-font">1分享</view> -->
                   <view class="fs22 c-7b">分享</view>
                 </view>
@@ -432,8 +432,8 @@
 			<view class="xc-explain flex jc_sb" wx:if="{{prom_type==2}}">
 			  <view class="fs32 ellipsis-2" style="max-width:80%; max-height: 90rpx;">{{sele_g.goods_name}}</view> 
 			  <!-- 这个是分享按钮 -->
-			  <view class="xc-share-frame t-c" bindtap="clickShare" style="flex-shrink:0;position: relative;top: -22rpx;">
-			    <view class="iconfont icon-share fs60"></view>
+			  <view class="xc-share-frame t-c shrink0" bindtap="clickShare" style="flex-shrink:0;position: relative;top: -22rpx;">
+			    <view class="iconfont icon-share"></view>
 			    <view class="fs22 c-7b">分享</view>
 			  </view>
 			</view>
@@ -1644,7 +1644,8 @@
 </block>
 <!-- ---------------分享弹窗--------------- -->
 <!-- 二维码显示页面 -->
-<canvas canvas-id='share' style='width:750rpx;height:1217rpx;background-color:white;' wx:if='{{!canvasHidden}}'></canvas>
+<!-- <canvas canvas-id='share' style='width:750rpx;height:1217rpx;background-color:white;position: fixed;top: 0;'></canvas> -->
+<canvas canvas-id='share' style='width:750rpx;height:1217rpx;background-color:white;'></canvas>
 <warn id="warn"></warn>
 <!-- 分享控件，底部弹出 -->
 <share id="share_button" bind:send="send" bind:cancel="cancel" bind:share_img="saveImageToPhotosAlbum" wx:if="{{share_hidden}}"></share>
@@ -1652,7 +1653,7 @@
   <view class="mask" catchtap="closePoster"></view>
   <view class="poster-container">
     <view class="poster-wrapper">
-      <view class="poster">
+      <view class="poster" bindtap="previewPoster">
         <!-- <view class="poster" bindtap="previewImage"> -->
         <image src="{{shareImgPath}}" class="poster-img"></image>
         <view class="btn-close" catchtap="closePoster">
@@ -2289,8 +2289,9 @@ view.cart-btn-lg {
 /* 分享 */
 .icon-share {
-	font-size: 46rpx;
+	font-size: 42rpx;
 	color: #d60021;
+	line-height: 1;
 }
 .xc-share-frame {
@@ -3686,8 +3687,8 @@ button.custom-service::after {
 .poster {
 	box-sizing: border-box;
 	width: 100%;
-	height: 915rpx;
-	border-radius: 20rpx;
+	height: 940rpx;
+	border-radius: 16rpx;
 	/* box-shadow: 0 8px 12px #666; */
 	position: relative;
 	z-index: 999;
@@ -3743,10 +3744,10 @@ button.custom-service::after {
 .btn-close {
 	/* background-color: rgba(0,0,0,.5); */
 	color: #ccc;
-	width: 50rpx;
+	/* width: 50rpx;
 	height: 50rpx;
 	line-height: 50rpx;
-	text-align: center;
+	text-align: center; */
 	border-radius: 50%;
 	position: absolute;
 	right: 20rpx;
@@ -3754,7 +3755,7 @@ button.custom-service::after {
 }
 .icon-close {
-	font-size: 48rpx;
+	font-size: 36rpx;
 }
 .quan_price {