优化标的信息详情页面

pages/goods/detail.scss

@@ -59,6 +59,9 @@
 
 .info-item__name .goods-name {
   font-size: 30rpx;
+  .twoline-hide {
+    white-space: normal;
+  }
 }
 
 /* 商品分享 */
@@ -124,10 +127,14 @@
 	color: #3c3c3c;
 
 	.item-title{
-		padding: 26rpx 30rpx;
+		padding: 26rpx 50rpx;
 		font-size: 36rpx;
 		font-weight: 600;
 		border-bottom: #eee solid 2rpx;
+        display: inline-block;
+	}
+    .item-title-text {
+      border-bottom: #000000 solid 4rpx;
     }
 	
 	.item-content{
@@ -148,6 +155,11 @@
 			
 			&-txt{
 				color: #808080;
+                white-space: normal;
+                .atxt {
+                  color: red;
+                  text-decoration: underline;
+                }
 			}
 		}
 	}

pages/goods/detail.vue

@@ -38,12 +38,12 @@
     </view>
 
 
-    <!-- 标的信息 -->
     <view v-if="!isLoading" class="bdcontent m-top20">
-      <view class="item-title b-f">
+      <view class="item-title b-f" v-for="items in tab" @click="changeTab(items.key)">
-        <text>标的信息</text>
+        <text :class="{'item-title-text': tabKey === items.key}">{{items.title}}</text>
       </view>
-	  <view class="item-content b-f">
+      <!-- 标的信息 -->
+      <view class="item-content b-f" v-if="tabKey === 1">
         <view class="gdic">
           <text class="gdic-tit">标的名称</text>
           <text class="gdic-txt">{{goods.goods_name}}</text>
@@ -73,18 +73,18 @@
           <text class="gdic-txt">{{goods.charges_type==1?'免费':'付费'}}</text>
         </view>
         <view class="gdic">
-				<text class="gdic-tit">标的价款</text>
+          <text class="gdic-tit">委托起止日</text>
           <text class="gdic-txt">{{bdprice}}</text>
         </view>
+        <view class="gdic">
+          <text class="gdic-tit">免责条款</text>
+          <text class="gdic-txt">
+            <text class="atxt" @click="gotopage('escapeclause')">点击查看免责条款</text>
+          </text>
         </view>
       </view>
-	
       <!-- 委托方信息 -->
-    <view v-if="!isLoading" class="bdcontent m-top20">
+      <view class="item-content b-f" v-else-if="tabKey === 2">
-      <view class="item-title b-f">
-        <text>委托方信息</text>
-      </view>
-	  <view class="item-content b-f">
         <view class="gdic">
           <text class="gdic-tit">联合推荐方</text>
           <text class="gdic-txt">深圳国夏文化数字科技有限公司</text>
@@ -113,16 +113,9 @@
           <text class="gdic-tit">渠道机构</text>
           <text class="gdic-txt">{{goods.copyrightOwner}}</text>
         </view>
-
-	  </view>
       </view>
-
       <!-- 资源信息 -->
-    <view v-if="!isLoading || goods.source" class="bdcontent m-top20">
+      <view class="item-content b-f" v-else-if="tabKey === 3" v-for="(item,index) in goods.source" >
-      <view class="item-title b-f">
-        <text>资源信息</text>
-      </view>
-	  <view class="item-content b-f" v-for="(item,index) in goods.source">
         <view class="gdic">
           <text class="gdic-tit">资源类型</text>
           <text class="gdic-txt">{{item.source_type}}</text>
@@ -142,6 +135,8 @@
       </view>
     </view>
 
+    <!-- 协议弹框 -->
+    <whpop v-model="showPopup" :maskCloseAble="true" :mkey="murl"></whpop>
 	
 	<!-- 底部选项卡 -->
 	<view class="footer-fixed">
@@ -177,14 +172,18 @@
 		<view class="xqbtn" @click="goteshop()">进入店铺</view>
 	</view>
   </view>
+
+
 </template>
 
 <script>
   import * as GoodsApi from '@/api/goods'
+  import whpop from "../login/components/WhPopup";
   
   export default {
     components: {
       // Shortcut,
+      'whpop': whpop,
     },
     data() {
       return {
@@ -203,7 +202,24 @@
         // 显示/隐藏SKU弹窗
         showSkuPopup: false,
         // 模式 1:都显示 2:只显示购物车 3:只显示立即购买
-        skuMode: 1
+        skuMode: 1,
+        tab: [
+          {
+            key: 1,
+            title: '标的信息',
+          },
+          {
+            key: 2,
+            title: '委托方信息',
+          },
+          {
+            key: 3,
+            title: '资源信息',
+          },
+        ],
+        tabKey: 1,
+        showPopup: false, // 协议展示
+        murl: '', // 协议标识
       }
     },
 
@@ -218,6 +234,10 @@
     },
 
     methods: {
+      // 切换内容
+      changeTab(key) {
+        this.tabKey = key
+      },
 
       // 刷新页面数据
       onRefreshPage() {
@@ -274,6 +294,11 @@
         this.$navTo('pages/index/index')
       },
 
+      // 阅读注册协议和隐私
+      gotopage(str){
+        this.murl = str
+        this.showPopup = ! this.showPopup
+      },
     },
 
     /**