商品详情页保障服务优化

后端研发-苏泰源
1 parent 36a7c2ff
Showing 6 changed files with 187 additions and 61 deletions
packageA/pages/goodsInfo/goodsInfo.js
packageA/pages/goodsInfo/goodsInfo.wxml
packageA/pages/goodsInfo/goodsInfo.wxss
pages/goods/goodsInfo/goodsInfo.js
pages/goods/goodsInfo/goodsInfo.wxml
pages/goods/goodsInfo/goodsInfo.wxss
@@ -451,6 +451,24 @@ Page({
   },
+	
+	onReady() {
+		
+		setTimeout(()=>{
+			wx.createSelectorQuery().selectAll(".showArea, .hideArea").boundingClientRect(res => {
+				// console.log('node@@@@@@@', res);
+				if(res.length != 0) {
+					this.setData({
+						showFold: res[0].height < res[1].height,
+					});
+				};
+				
+			}).exec();
+		}, 1000);
+		
+	},
+
+	
   //------------程序初始化入口-------------
   async init(gid) {
     var ee = this,
@@ -187,18 +187,19 @@
 				</view>
-
-				<view class="bz_view flex bdt16" wx:if="{{store_config}}">
+				<!-- 保障服务 -->
+				<view class="bz_view flex bdt16 ai_c" wx:if="{{store_config}}">
 					<image class="bzfu_img" src="{{iurl}}/miniapp/images/bzfu_w.png"></image>
-					<view class="flex f1 ai_c rel">
-						<view class="bz-content {{flag ? '':'ellipsis-1'}} f1">{{store_config.service_bz}}</view>
-						<view bindtap="clickCollapse" class="cx-obtain-coupon wsize arrow">
-							<text class="bg_jj {{flag?'down1':''}}"></text>
-						</view>
-						<!-- <text class="bg_jj" bindtap="clickCollapse"></text> -->
-						<!-- <text class="iconfont icon-shuangjiantouxia c-db"></text> -->
+					<view class="flex f1 ai_c rel" style="position: relative;" bindtap="{{showFold ? 'clickCollapse':''}}">
+						<view class="bz-content showArea {{flag ? '':'ellipsis-1x'}}">{{bconfig.service_bz}}</view>
+					  <view class="bz-content hideArea">{{bconfig.service_bz}}</view>
+					  <view class="cx-obtain-coupon wsize arrow" wx:if="{{showFold}}">
+					    <text class="bg_jj down {{flag ? 'up':''}}"></text>
+					  </view>
 					</view>
 				</view>
+				
+
@@ -1025,25 +1025,37 @@ left:31rpx;}
  .bz_view{ /* height:100rpx; padding: 0 34rpx 0 13rpx; */ color: #333; font-size: 28rpx; padding: 20rpx 20rpx 20rpx 10rpx;
     /* border-bottom: 3rpx solid #eee; */
 		/* border-top: 3rpx solid #eee; */}
-    .bz_view view{ width: 460rpx; /* max-height: 70rpx; */ /* overflow: hidden; */}   
+    .bz_view view{ width: 520rpx; /* max-height: 70rpx; */ /* overflow: hidden; */}   
 .bb_view{ display: flex;align-items: center;justify-content: space-between; padding: 20rpx; color: #333;
     font-size: 30rpx; /* height: 104rpx; line-height: 104rpx; overflow: hidden; padding-right:26rpx */ }
 .red_bb{ color: #d70026; /* min-width:158rpx;width: auto; */}
-.bg_jj{ width: 14rpx; height:14rpx;
-        border-top: 2rpx solid #d70026;
-        border-right: 2rpx solid #d70026;
-        transform: rotate(45deg);display:inline-block;
-        margin-bottom:3rpx;
+
+.bg_jj {
+	width: 14rpx;
+	height: 14rpx;
+	border-top: 2rpx solid #d70026;
+	border-right: 2rpx solid #d70026;
+	transform: rotateZ(45deg);
+	display: inline-block;
+	margin-bottom: 3rpx;
+}
+
+.bg_jj.down {
+	transform: rotateZ(135deg);
+}
+
+.bg_jj.up {
+	transform: rotateZ(-45deg);
+	margin-top: 6rpx;
 }
-.bg_jj.down1{transform: rotate(135deg);}
 .bz-content {
-	flex-grow: 1;
-	text-align: justify;
-	padding: 0 30rpx 0 20rpx;
+	padding: 0 0 0 20rpx;
 }
+
+
 /* 顶部边框 */
 .topframe{
     width: 100%;
@@ -2845,7 +2857,8 @@ button.custom-service::after{
 	width: auto !important;
 	position: absolute;
 	right: 0;
-	top: 10rpx;
+	top: 50%;
+	transform: translateY(-50%);
 }
 .stock {
@@ -2949,3 +2962,9 @@ button.custom-service::after{
 .huise {
 	background: gray
 }
+
+.hideArea {
+	position: absolute;
+	left: -1000px;
+	top: -1000px;
+}
@@ -8,6 +8,9 @@ var t = require(&quot;../../../utils/util.js&quot;),
   oo = s.globalData,
   o = s.globalData.setting,
   os = o;
+	
+let self = null;
+	
 //评价加载更多
 var more = function (e) {
   return e && e.__esModule ? e : {
@@ -25,7 +28,7 @@ Page({
         color_type: 0, //线条控制
         color_type_one: 0,
         color_type_two: 1,
-        is_no_plus:1,
+
         gid: "",
         stoid: o.stoid,
         url: o.url,
@@ -251,13 +254,11 @@ Page({
         share_hidden: false,
         all_activity_list: null,  //所有活动的列表
+				
     },
     //------初始化加载----------
     onLoad: function (t) {
-        if(!getApp().is_Single_page()){
-            return false;
-          }
         var ee = this,
             that = ee,
             th = ee,
@@ -268,7 +269,8 @@ Page({
             prom_type = t.prom_type,
             prom_id = t.prom_id;  //活动ID
-
+				self = this;
+				
         //-- 自定义海报 --
         getApp().request.promiseGet("/api/weshop/goods/poster/page", {
             data: {store_id: os.stoid, type: 1, is_use: 1}
@@ -357,22 +359,6 @@ Page({
             th.data.c_guide_id = c_guide_id;
         }
-        //调用接口判断商家plus有没有过期
-        i.promiseGet("/store/storemoduleendtime/page?store_id=" + os.stoid + "&type=3", {}).then(res => {
-            if (res.data.code == 0) {
-                var arr = res.data.data.pageData;
-                if (arr.length > 0) {
-                    var item = arr[0];
-                    if (item.is_sy == 0) {
-                        var now = Date.parse(new Date()); now = now / 1000;
-                        if (item.end_time < now) {
-                            th.setData({ is_no_plus: 0 })
-                        }
-                    }
-                }
-            }
-        })
-
         getApp().getConfig(function (e) {
             ee.setData({sto_sele_name_1: e.store_name})
         })
@@ -530,7 +516,9 @@ Page({
         //更新点击量
         getApp().request.put("/api/weshop/goods/updateClick", {
             data: {store_id: os.stoid, goods_id: gid}
-        })
+        });
+				
+				
     },
@@ -982,8 +970,27 @@ Page({
         })
         this.data.enterAddressPage && (this.data.enterAddressPage = !1);
-
-    },
+				
+				
+
+    },
+		
+		onReady() {
+			
+			setTimeout(()=>{
+				wx.createSelectorQuery().selectAll(".showArea, .hideArea").boundingClientRect(res => {
+					// console.log('node@@@@@@@', res);
+					if(res.length != 0) {
+						this.setData({
+							showFold: res[0].height < res[1].height,
+						});
+					};
+					
+				}).exec();
+			}, 1000);
+			
+		},
+		
     enterAddress: function () {
         this.data.enterAddressPage = !0, wx.navigateTo({
             url: "/pages/user/address_list/address_list?operate=selectAddress"
@@ -3545,7 +3552,6 @@ Page({
         //---判断拼单----
         if (prom_type == 6) {
-            console.log('判断拼单');
             //-------判断活动是否抢光---------
             await getApp().request.promiseGet("/api/weshop/activitylist/getActLen/" + os.stoid + "/" + prom_type + "/" + prom_id, {
                 1: 1
@@ -6541,6 +6547,73 @@ Page({
     closeSpecModal_flash_normal: function () {
         this.setData({openSpecModal_flash_normal: 0});
-    }
+    },
+		
+		
+		
+		
+		
+		// 获取指定元素实际宽度
+				_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]
+		// 					})
+		// 				}
+		// 			})
+				}
+		
+		
+		
+		
 })
@@ -324,7 +324,7 @@
             </view>
             <!-- 不是秒杀 -->
             <!-- 等级卡的价格,不是等级卡会员，且商品又有设置等级级价，商家后台有开通升级卡同能 -->
-            <view class="flex ai_and" wx:if="{{!card_field && is_no_plus && g_filters.is_has_rank(rank_switch,data) && prom_type!=1 && prom_type!=2 && prom_type!=4 && card_list && card_list.length>0 && g_filters.get_card_price(data,card_list,1)!=''}}">
+            <view class="flex ai_and" wx:if="{{!card_field && g_filters.is_has_rank(rank_switch,data) && prom_type!=1 && prom_type!=2 && prom_type!=4 && card_list && card_list.length>0 && g_filters.get_card_price(data,card_list,1)!=''}}">
               <view class="flex ai-center  grade-card-frame card-frame">
                 <image class="img" src="{{iurl}}/miniapp/images/userinfo/userinfo/privilege_t.png"></image>
                 <view class="fs24 white view card-name ellipsis-1">
@@ -336,7 +336,7 @@
               </view>
             </view>
             <!-- 等级卡的显示,购买, 等级卡近30天要显示续费 -->
-            <block wx:if="{{g_filters.is_has_rank(rank_switch,data) && is_no_plus}}">
+            <block wx:if="{{g_filters.is_has_rank(rank_switch,data)}}">
               <!-- 不是秒杀，且会员不是等级会员 -->
               <view wx:if="{{!card_field && prom_type!=1 && prom_type!=2  && card_list && card_list.length>0 && g_filters.get_card_price(data,card_list,1)!=''}}">
                 <view class="beauty-makeup-frame flex ai-center">
@@ -662,15 +662,17 @@
         </block>
         <!-- 保障服务 -->
-        <view class="bz_view flex bdt16" wx:if="{{bconfig}}" style="">
+        <view class="bz_view flex bdt16 ai_c" wx:if="{{bconfig.service_bz}}">
           <image class="bzfu_img" src="{{iurl}}/miniapp/images/bzfu_w.png"></image>
-          <view class="flex f1 ai_c rel">
-            <view class="bz-content {{flag ? '':'ellipsis-1'}} f1">{{bconfig.service_bz}}</view>
-            <view bindtap="clickCollapse" class="cx-obtain-coupon wsize arrow">
-              <text class="bg_jj {{flag?'down1':''}}"></text>
+          <view class="flex f1 ai_c rel" style="position: relative;" bindtap="{{showFold ? 'clickCollapse':''}}">
+						<view class="bz-content showArea {{flag ? '':'ellipsis-1x'}}">{{bconfig.service_bz}}</view>
+            <view class="bz-content hideArea">{{bconfig.service_bz}}</view>
+            <view class="cx-obtain-coupon wsize arrow" wx:if="{{showFold}}">
+              <text class="bg_jj down {{flag ? 'up':''}}"></text>
             </view>
           </view>
         </view>
+				
         <!-- - 搭配促销 -- -->
         <view class="dp_cx_view" wx:if="{{collocationGoods}}">
           <view class="bb_view">
@@ -1582,7 +1582,7 @@ view.cart-btn-lg {
 }
 .bz_view view {
-	width: 460rpx;
+	width: 520rpx;
 	/* max-height: 70rpx; */
 	/* overflow: hidden; */
 }
@@ -1607,21 +1607,27 @@ view.cart-btn-lg {
 	height: 14rpx;
 	border-top: 2rpx solid #d70026;
 	border-right: 2rpx solid #d70026;
-	transform: rotate(45deg);
+	transform: rotateZ(45deg);
 	display: inline-block;
 	margin-bottom: 3rpx;
 }
-.bg_jj.down1 {
-	transform: rotate(135deg);
+.bg_jj.down {
+	transform: rotateZ(135deg);
+}
+
+.bg_jj.up {
+	transform: rotateZ(-45deg);
+	margin-top: 6rpx;
 }
 .bz-content {
-	flex-grow: 1;
-	text-align: justify;
-	padding: 0 30rpx 0 20rpx;
+	padding: 0 0 0 20rpx;
 }
+
+
+
 /* 顶部边框 */
 .topframe {
 	width: 100%;
@@ -3774,7 +3780,8 @@ button.custom-service::after {
 	width: auto !important;
 	position: absolute;
 	right: 0;
-	top: 10rpx;
+	top: 50%;
+	transform: translateY(-50%);
 }
@@ -3935,3 +3942,9 @@ button.custom-service::after {
 	width: 100%;
 	height: 100%;
 }
+
+.hideArea {
+	position: absolute;
+	left: -1000px;
+	top: -1000px;
+}