服务列表页面提交

apps/mobile/src/views/common/vipsubscribeRights.vue

@@ -76,28 +76,70 @@
           </div>
           <div
             class="m-content"
-            :class="{ 'gray': (i + 1) % 2 === 0 }"
+            :class="{ gray: (i + 1) % 2 === 0 }"
             v-for="(c, i) in item.content"
             :key="i"
           >
             <div class="con-item">
-              <span :class="c.one" v-if="c.one.indexOf('icon-') !== -1"></span>
+              <span
+                :class="c.one"
+                v-if="c.one && c.one.indexOf('icon-') !== -1"
+              ></span>
+              <div
+                class="slot_box"
+                v-else-if="c.one_slot"
+                v-html="c.one_slot"
+              ></div>
               <span class="text" v-else v-html="c.one"></span>
             </div>
             <div class="con-item con-cr-gray">
-              <span :class="c.two" v-if="c.two.indexOf('icon-') !== -1"></span>
+              <span
+                :class="c.two"
+                v-if="c.two && c.two.indexOf('icon-') !== -1"
+              ></span>
+              <div
+                class="slot_box"
+                v-else-if="c.two_slot"
+                v-html="c.two_slot"
+              ></div>
               <span class="text" v-else v-html="c.two"></span>
             </div>
             <div class="con-item" :class="item.color">
               <span
                 :class="c.three"
-                v-if="c.three.indexOf('icon-') !== -1"
+                v-if="c.three && c.three.indexOf('icon-') !== -1"
               ></span>
+              <div
+                class="slot_box"
+                v-else-if="c.three_slot"
+                v-html="c.three_slot"
+              ></div>
               <span class="text" v-else v-html="c.three"></span>
             </div>
           </div>
         </div>
       </div>
+      <div class="middleModules">
+        <div class="middle-tit">如果想进一步了解剑鱼标讯产品及服务</div>
+        <div class="middle-desc">
+          请点击申请免费体验，我们将第一时间联系您，并推荐适合您需求的产品，或指派专业客户经理为您定制解决方案。
+        </div>
+        <div class="middle-btn">申请免费体验</div>
+      </div>
+      <div class="bottomModules">
+        <img src="@/assets/image/vip-subscribe/serve/hzhb.png" alt="" />
+      </div>
+      <div class="footer-group">
+        <div class="phone-btn">
+          <div class="icon-phone"></div>
+          <div class="btn-text">电话咨询</div>
+        </div>
+        <div class="wx-btn">
+          <div class="icon-wx"></div>
+          <div class="btn-text">在线客服</div>
+        </div>
+        <div class="open-btn">立即开通</div>
+      </div>
     </div>
   </div>
 </template>
@@ -147,6 +189,7 @@ export default {
   },
   data() {
     return {
+      tab: 0,
       cardlist: [
         {
           title: '超级订阅',
@@ -210,8 +253,7 @@ export default {
               one: '招标信用信息',
               two: 'icon-blue',
               three: 'icon-blue'
-            },
-
+            }
           ]
         },
         {
@@ -313,7 +355,8 @@ export default {
             {
               one: '标讯订阅',
               two: '订阅区域：1个省<br>关键词：10组<br>信息推送：300条/天',
-              three: '订阅区域：按购买数量<br>关键词：300组<br>信息推送：2000条/天'
+              three:
+                '订阅区域：按购买数量<br>关键词：300组<br>信息推送：2000条/天'
             },
             {
               one: '微信提醒',
@@ -330,7 +373,6 @@ export default {
               two: 'icon-blue',
               three: 'icon-blue'
             }
-
           ]
         },
         {
@@ -363,7 +405,6 @@ export default {
               two: 'icon-blue',
               three: 'icon-blue'
             }
-
           ]
         },
         {
@@ -390,7 +431,7 @@ export default {
               one: '数据清洗服务',
               two: '议价',
               three: '议价'
-            },
+            }
           ]
         },
         {
@@ -422,15 +463,77 @@ export default {
         }
       ],
       tableModules_vip_member2: [
+        {
+          color: 'yellow',
+          title: '项目信息',
+          head: ['服务项目', '超级订阅', '大会员商机版2.0'],
+          content: [
+            {
+              one: '拟在建项目',
+              two: '-',
+              three: 'icon-yellow'
+            },
+            {
+              one: '推荐项目',
+              two: '-',
+              three: 'icon-yellow'
+            },
+            {
+              one: '业主委托项目',
+              two: '-',
+              three: 'icon-yellow'
+            },
+            {
+              one: '审批项目',
+              two: '-',
+              three: 'icon-yellow'
+            }
+          ]
+        },
         {
           color: 'yellow',
           title: '招标采购信息',
           head: ['服务项目', '超级订阅', '大会员商机版2.0'],
           content: [
             {
-              one: '',
-              two: '',
-              three: ''
+              one: '采购意向',
+              two: '-',
+              three: 'icon-yellow'
+            },
+            {
+              one: '招标预告',
+              two: 'icon-yellow',
+              three: 'icon-yellow'
+            },
+            {
+              one: '招标公告',
+              two: 'icon-yellow',
+              three: 'icon-yellow'
+            },
+            {
+              one: '招标结果',
+              two: 'icon-yellow',
+              three: 'icon-yellow'
+            },
+            {
+              one: '询价采购',
+              two: 'icon-yellow',
+              three: 'icon-yellow'
+            },
+            {
+              one: '谈判采购',
+              two: 'icon-yellow',
+              three: 'icon-yellow'
+            },
+            {
+              one: '企业采购',
+              two: 'icon-yellow',
+              three: 'icon-yellow'
+            },
+            {
+              one: '招标信用信息',
+              two: 'icon-yellow',
+              three: 'icon-yellow'
             }
           ]
         },
@@ -440,40 +543,592 @@ export default {
           head: ['服务项目', '超级订阅', '大会员商机版2.0'],
           content: [
             {
-              one: '',
-              two: '',
-              three: ''
+              one: '招标/采购进度监控(项目进度监控)',
+              two: '10个',
+              three: '100个'
+            },
+            {
+              one: '业主监控',
+              two: '10个',
+              three: '100个'
+            },
+            {
+              one: '企业情报监控',
+              two: '10个（不含企业工商变动监控）',
+              three: '100个'
+            },
+            {
+              one: '潜在项目预测',
+              two: '-',
+              three: 'icon-yellow'
+            },
+            {
+              one: '企业人脉信息(企业通讯录)',
+              two: '-',
+              three: 'icon-yellow'
+            },
+            {
+              one: '业主人脉信息(采购单位通讯录)',
+              two: '5个/省/月，上限80个',
+              three: 'icon-yellow'
+            },
+            {
+              one: '招标采购信息发布',
+              two: 'icon-yellow',
+              three: 'icon-yellow'
+            },
+            {
+              one: '供应信息发布',
+              two: '30条/月',
+              three: '30条/月'
+            },
+            {
+              one: '广告服务',
+              two: '议价',
+              three: '议价'
+            }
+          ]
+        },
+        {
+          color: 'yellow',
+          title: '营销分析',
+          head: ['服务项目', '超级订阅', '大会员商机版2.0'],
+          content: [
+            {
+              one: '企业分析（企业画像-中标分析）',
+              two: '在线查看：每购买1个省，每月可查看50个，上限800个',
+              three_slot:
+                '<div><p class="flex-center"><span>在线查看：</span><span class="icon-yellow"></span></p><span>报告下载：1份/年<span></div>'
+            },
+            {
+              one: '业主分析（采购单位画像-采购分析）',
+              two: '在线查看：每购买1个省，每月可查看5个，上限80个',
+              three_slot:
+                '<div><p class="flex-center"><span>在线查看：</span><span class="icon-yellow"></span></p><span>报告下载：1份/年<span></div>'
+            }
+          ]
+        },
+        {
+          color: 'yellow',
+          title: '标讯服务',
+          head: ['服务项目', '超级订阅', '大会员商机版2.0'],
+          content: [
+            {
+              one: '高级搜索',
+              two: 'icon-yellow',
+              three: 'icon-yellow'
+            },
+            {
+              one: '附件下载',
+              two: '10个/月',
+              three: 'icon-yellow'
+            },
+            {
+              one: '查看原文链接',
+              two: 'icon-yellow',
+              three: 'icon-yellow'
+            },
+            {
+              one: '标讯收藏',
+              two: '5000条',
+              three: '5000条'
+            },
+            {
+              one: '服务平台',
+              two: 'icon-yellow',
+              three: 'icon-yellow'
+            }
+          ]
+        },
+        {
+          color: 'yellow',
+          title: '秘书服务',
+          head: ['服务项目', '超级订阅', '大会员商机版2.0'],
+          content: [
+            {
+              one: '标讯订阅',
+              two: '订阅区域：按购买数量<br>关键词：300组<br>信息推送：2000条/天',
+              three: '订阅区域：全国<br>关键词：300组<br>信息推送：3000条/天'
+            },
+            {
+              one: '订阅关键词优化',
+              two: '-',
+              three: 'icon-yellow'
+            },
+            {
+              one: '产品操作培训',
+              two: '-',
+              three: 'icon-yellow'
+            },
+            {
+              one: '微信提醒',
+              two: 'icon-yellow',
+              three: 'icon-yellow'
+            },
+            {
+              one: 'APP提醒',
+              two: 'icon-yellow',
+              three: 'icon-yellow'
+            },
+            {
+              one: '邮件提醒',
+              two: 'icon-yellow',
+              three: 'icon-yellow'
+            }
+          ]
+        },
+        {
+          color: 'yellow',
+          title: '专家服务',
+          head: ['服务项目', '超级订阅', '大会员商机版2.0'],
+          content: [
+            {
+              one: '标书制作',
+              two: '议价',
+              three: '议价'
+            },
+            {
+              one: '企业认证服务',
+              two: '议价',
+              three: '议价'
+            },
+            {
+              one: '招投标课程（中标必听课）',
+              two: '议价',
+              three: '议价'
+            },
+            {
+              one: '剑鱼文库',
+              two: '议价',
+              three: '议价'
+            },
+            {
+              one: '招投标攻略',
+              two: 'icon-yellow',
+              three: 'icon-yellow'
+            }
+          ]
+        },
+        {
+          color: 'yellow',
+          title: '数据服务',
+          head: ['服务项目', '超级订阅', '大会员商机版2.0'],
+          content: [
+            {
+              one: '数据导出',
+              two: '议价',
+              three: '100条/天'
+            },
+            {
+              one: '数据定制服务',
+              two: '议价',
+              three: '议价'
+            },
+            {
+              one: '数据对接服务',
+              two: '议价',
+              three: '议价'
+            },
+            {
+              one: '数据清洗服务',
+              two: '议价',
+              three: '议价'
+            }
+          ]
+        },
+        {
+          color: 'yellow',
+          title: '企业管理',
+          head: ['服务项目', '超级订阅', '大会员商机版2.0'],
+          content: [
+            {
+              one: '企业订阅分发',
+              two: 'icon-yellow',
+              three: 'icon-yellow'
+            },
+            {
+              one: '客户管理',
+              two: '议价',
+              three: '议价'
+            },
+            {
+              one: '账号使用统计',
+              two: '-',
+              three: 'icon-yellow'
+            },
+            {
+              one: '企业协作',
+              two: 'icon-yellow',
+              three: 'icon-yellow'
+            },
+            {
+              one: '年终报告',
+              two: 'icon-yellow',
+              three: 'icon-yellow'
             }
           ]
         }
       ],
       tableModules_member2_memberP: [
+        {
+          color: 'yellowb',
+          title: '项目信息',
+          head: ['服务项目', '大会员商机版2.0', '大会员专家版2.0'],
+          content: [
+            {
+              one: '拟在建项目',
+              two: 'icon-yellow',
+              three: 'icon-yellow'
+            },
+            {
+              one: '推荐项目',
+              two: 'icon-yellow',
+              three: 'icon-yellow'
+            },
+            {
+              one: '业主委托项目',
+              two: 'icon-yellow',
+              three: 'icon-yellow'
+            },
+            {
+              one: '审批项目',
+              two: 'icon-yellow',
+              three: 'icon-yellow'
+            }
+          ]
+        },
         {
           color: 'yellowb',
           title: '招标采购信息',
           head: ['服务项目', '大会员商机版2.0', '大会员专家版2.0'],
           content: [
             {
-              one: '',
-              two: '',
-              three: ''
+              one: '采购意向',
+              two: 'icon-yellow',
+              three: 'icon-yellow'
+            },
+            {
+              one: '招标预告',
+              two: 'icon-yellow',
+              three: 'icon-yellow'
+            },
+            {
+              one: '招标公告',
+              two: 'icon-yellow',
+              three: 'icon-yellow'
+            },
+            {
+              one: '招标结果',
+              two: 'icon-yellow',
+              three: 'icon-yellow'
+            },
+            {
+              one: '询价采购',
+              two: 'icon-yellow',
+              three: 'icon-yellow'
+            },
+            {
+              one: '谈判采购',
+              two: 'icon-yellow',
+              three: 'icon-yellow'
+            },
+            {
+              one: '企业采购',
+              two: 'icon-yellow',
+              three: 'icon-yellow'
+            },
+            {
+              one: '招标信用信息',
+              two: 'icon-yellow',
+              three: 'icon-yellow'
             }
           ]
         },
         {
           color: 'yellowb',
           title: '业务拓展',
+          head: ['服务项目', '超级订阅', '大会员商机版2.0'],
+          content: [
+            {
+              one: '招标/采购进度监控(项目进度监控)',
+              two: '100个',
+              three: '500个'
+            },
+            {
+              one: '业主监控',
+              two: '100个',
+              three: '500个'
+            },
+            {
+              one: '企业情报监控',
+              two: '100个',
+              three: '500个'
+            },
+            {
+              one: '潜在项目预测',
+              two: 'icon-yellow',
+              three: 'icon-yellow'
+            },
+            {
+              one: '企业人脉信息(企业通讯录)',
+              two: 'icon-yellow',
+              three: 'icon-yellow'
+            },
+            {
+              one: '业主人脉信息(采购单位通讯录)',
+              two: 'icon-yellow',
+              three: 'icon-yellow'
+            },
+            {
+              one: '向业主推荐',
+              two: '-',
+              three: 'icon-yellow'
+            },
+            {
+              one: '向业主唯一推荐',
+              two: '-',
+              three: '1次'
+            },
+            {
+              one: '潜在客户挖掘',
+              two: '-',
+              three: 'icon-yellow'
+            },
+            {
+              one: '潜在竞争对手/合作伙伴挖掘',
+              two: '-',
+              three: 'icon-yellow'
+            },
+            {
+              one: '招标采购信息发布',
+              two: 'icon-yellow',
+              three: 'icon-yellow'
+            },
+            {
+              one: '供应信息发布',
+              two: '30条/月',
+              three: '30条/月'
+            },
+            {
+              one: '广告服务',
+              two: '议价',
+              three: '议价'
+            }
+          ]
+        },
+        {
+          color: 'yellowb',
+          title: '营销分析',
+          head: ['服务项目', '大会员商机版2.0', '大会员专家版2.0'],
+          content: [
+            {
+              one: '市场分析周报',
+              two: '-',
+              three: 'icon-yellow'
+            },
+            {
+              one: '市场分析月报',
+              two: '-',
+              three: 'icon-yellow'
+            },
+            {
+              one: '市场分析定制报告',
+              two: '-',
+              three_slot:
+                '<div><p class="flex-center"><span>在线查看：</span><span class="icon-yellow"></span></p><span>报告下载：1份/年<span></div>'
+            },
+            {
+              one: '企业分析（企业画像-中标分析）',
+              two_slot:
+                '<div><p class="flex-center"><span>在线查看：</span><span class="icon-yellow"></span></p><span>报告下载：1份/年<span></div>',
+              three_slot:
+                '<div><p class="flex-center"><span>在线查看：</span><span class="icon-yellow"></span></p><span>报告下载：3份/年<span></div>'
+            },
+            {
+              one: '业主分析（采购单位画像-采购分析）',
+              two_slot:
+                '<div><p class="flex-center"><span>在线查看：</span><span class="icon-yellow"></span></p><span>报告下载：1份/年<span></div>',
+              three_slot:
+                '<div><p class="flex-center"><span>在线查看：</span><span class="icon-yellow"></span></p><span>报告下载：3份/年<span></div>'
+            },
+            {
+              one: '投标决策分析',
+              two: '-',
+              three: 'icon-yellow'
+            },
+            {
+              one: '中标企业预测',
+              two: '-',
+              three: '200次'
+            }
+          ]
+        },
+        {
+          color: 'yellowb',
+          title: '标讯服务',
+          head: ['服务项目', '大会员商机版2.0', '大会员专家版2.0'],
+          content: [
+            {
+              one: '高级搜索',
+              two: 'icon-yellow',
+              three: 'icon-yellow'
+            },
+            {
+              one: '附件下载',
+              two: 'icon-yellow',
+              three: 'icon-yellow'
+            },
+            {
+              one: '查看原文链接',
+              two: 'icon-yellow',
+              three: 'icon-yellow'
+            },
+            {
+              one: '标讯收藏',
+              two: '5000条',
+              three: '5000条'
+            },
+            {
+              one: '服务平台',
+              two: 'icon-yellow',
+              three: 'icon-yellow'
+            }
+          ]
+        },
+        {
+          color: 'yellowb',
+          title: '秘书服务',
+          head: ['服务项目', '大会员商机版2.0', '大会员专家版2.0'],
+          content: [
+            {
+              one: '标讯订阅',
+              two: '订阅区域：按购买数量<br>关键词：300组<br>信息推送：3000条/天',
+              three: '订阅区域：全国<br>关键词：300组<br>信息推送：3000条/天'
+            },
+            {
+              one: '订阅关键词优化',
+              two: 'icon-yellow',
+              three: 'icon-yellow'
+            },
+            {
+              one: '产品操作培训',
+              two: 'icon-yellow',
+              three: 'icon-yellow'
+            },
+            {
+              one: '资深客服服务',
+              two: '-',
+              three: 'icon-yellow'
+            },
+            {
+              one: '微信提醒',
+              two: 'icon-yellow',
+              three: 'icon-yellow'
+            },
+            {
+              one: 'APP提醒',
+              two: 'icon-yellow',
+              three: 'icon-yellow'
+            },
+            {
+              one: '邮件提醒',
+              two: 'icon-yellow',
+              three: 'icon-yellow'
+            }
+          ]
+        },
+        {
+          color: 'yellowb',
+          title: '专家服务',
+          head: ['服务项目', '大会员商机版2.0', '大会员专家版2.0'],
+          content: [
+            {
+              one: '标书制作',
+              two: '议价',
+              three: '议价'
+            },
+            {
+              one: '企业认证服务',
+              two: '议价',
+              three: '议价'
+            },
+            {
+              one: '招投标课程（中标必听课）',
+              two: '议价',
+              three: '议价'
+            },
+            {
+              one: '剑鱼文库',
+              two: '议价',
+              three: '议价'
+            },
+            {
+              one: '招投标攻略',
+              two: 'icon-yellow',
+              three: 'icon-yellow'
+            }
+          ]
+        },
+        {
+          color: 'yellowb',
+          title: '数据服务',
+          head: ['服务项目', '大会员商机版2.0', '大会员专家版2.0'],
+          content: [
+            {
+              one: '数据导出',
+              two: '100条/天',
+              three: '200条/天'
+            },
+            {
+              one: '数据定制服务',
+              two: '议价',
+              three: '议价'
+            },
+            {
+              one: '数据对接服务',
+              two: '议价',
+              three: '议价'
+            },
+            {
+              one: '数据清洗服务',
+              two: '议价',
+              three: '议价'
+            }
+          ]
+        },
+        {
+          color: 'yellowb',
+          title: '企业管理',
           head: ['服务项目', '大会员商机版2.0', '大会员专家版2.0'],
           content: [
             {
-              one: '',
-              two: '',
-              three: ''
+              one: '企业订阅分发',
+              two: 'icon-yellow',
+              three: 'icon-yellow'
+            },
+            {
+              one: '客户管理',
+              two: '议价',
+              three: '议价'
+            },
+            {
+              one: '账号使用统计',
+              two: '-',
+              three: 'icon-yellow'
+            },
+            {
+              one: '企业协作',
+              two: 'icon-yellow',
+              three: 'icon-yellow'
+            },
+            {
+              one: '年终报告',
+              two: 'icon-yellow',
+              three: 'icon-yellow'
             }
           ]
         }
-      ],
-      tab: 0
+      ]
     }
   }
 }
@@ -481,6 +1136,7 @@ export default {
 
 <style lang="scss" scoped>
 .vipsubscribeRights {
+  padding-bottom: 66px;
   .header {
     max-height: 190px;
     position: relative;
@@ -674,22 +1330,28 @@ export default {
           min-height: 44px;
           font-size: 11px;
           line-height: 18px;
-          .icon-blue {
-            width: 16px;
-            height: 16px;
-            background-size: 16px 16px;
-            display: block;
-            background-image: url('@/assets/image/vip-subscribe/serve/right-green.png');
-          }
-          .icon-yellow {
-            width: 16px;
-            height: 16px;
-            background-size: 16px 16px;
-            display: block;
-            background-image: url('@/assets/image/vip-subscribe/serve/right-yellow.png');
-          }
-          .text{
-            text-align: center;
+          ::v-deep {
+            .icon-blue {
+              width: 16px;
+              height: 16px;
+              background-size: 16px 16px;
+              display: block;
+              background-image: url('@/assets/image/vip-subscribe/serve/right-green.png');
+            }
+            .icon-yellow {
+              width: 16px;
+              height: 16px;
+              background-size: 16px 16px;
+              display: block;
+              background-image: url('@/assets/image/vip-subscribe/serve/right-yellow.png');
+            }
+            .flex-center {
+              display: flex;
+              align-items: center;
+            }
+            .text {
+              text-align: center;
+            }
           }
         }
         .blue {
@@ -706,6 +1368,98 @@ export default {
         }
       }
     }
+    .middleModules {
+      width: 100%;
+      height: 231px;
+      margin-top: 24px;
+      background-image: url('@/assets/image/vip-subscribe/serve/bg-img.png');
+      background-size: 100% 100%;
+      padding-top: 30px;
+      .middle-tit {
+        font-size: 20px;
+        line-height: 32px;
+        color: #171826;
+        text-align: center;
+      }
+      .middle-desc {
+        width: 340px;
+        color: #5f5e64;
+        line-height: 20px;
+        font-size: 14px;
+        text-align: center;
+        margin: auto;
+        margin-top: 16px;
+      }
+      .middle-btn {
+        width: 343px;
+        height: 46px;
+        border-radius: 8px;
+        font-size: 18px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: #2abed1;
+        color: #f7f9fa;
+        margin: auto;
+        margin-top: 17px;
+      }
+    }
+    .footer-group {
+      width: 100%;
+      background-color: #fff;
+      padding: 12px 16px;
+      box-sizing: border-box;
+      position: fixed;
+      left: 0;
+      bottom: 0;
+      display: flex;
+      .phone-btn {
+        // display: flex;
+        // justify-content: center;
+        .icon-phone {
+          background-image: url('@/assets/image/vip-subscribe/serve/phone.png');
+          background-size: 16px 16px;
+          width: 16px;
+          height: 16px;
+          margin: auto;
+        }
+      }
+      .wx-btn {
+        // display: flex;
+        // justify-content: center;
+        margin-left: 36px;
+        .icon-wx {
+          background-image: url('@/assets/image/vip-subscribe/serve/kefu.png');
+          background-size: 16px 16px;
+          width: 16px;
+          height: 16px;
+          margin: auto;
+        }
+      }
+      .btn-text {
+        font-size: 14px;
+        line-height: 20px;
+        color: #171826;
+        text-align: center;
+        margin-top: 4px;
+      }
+      .open-btn {
+        width: 159px;
+        height: 42px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #f7f9fa;
+        background-color: #2abed1;
+        font-size: 18px;
+        border-radius: 4px;
+        margin-left: 36px;
+      }
+    }
+    .bottomModules img {
+      width: 100%;
+      display: block;
+    }
     .m-content:last-child {
       border-radius: 0 0 8px 8px;
       overflow: hidden;