提交

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

@@ -20,16 +20,85 @@
             <div
               :class="{
                 'card-item': true,
-                'blue-item': index === 0,
-                'yellow-item': index === 1,
-                'yellowb-item': index === 2
+                'blue-item': item.color === 'blue',
+                'yellow-item': item.color === 'yellow',
+                'yellowb-item': item.color === 'yellowb'
               }"
               @click="itemclick(index)"
-            ></div>
+            >
+              <div class="card-head">
+                <div class="left-text">{{ item.title }}</div>
+                <div
+                  :class="{
+                    'right-btn': true,
+                    'btn-blue': item.color === 'blue',
+                    'btn-yellow': item.color === 'yellow',
+                    'btn-yellowb': item.color === 'yellowb'
+                  }"
+                >
+                  {{ item.btn }}
+                </div>
+              </div>
+              <div
+                :class="{
+                  'tag-text': true,
+                  'tag-blue': item.color === 'blue',
+                  'tag-yellow': item.color === 'yellow',
+                  'tag-yellowb': item.color === 'yellowb'
+                }"
+              >
+                {{ item.tag }}
+              </div>
+              <div class="card-desc" v-html="item.desc"></div>
+            </div>
           </van-swipe-item>
         </van-swipe>
       </div>
     </div>
+    <div class="content_box">
+      <img
+        src="@/assets/image/vip-subscribe/serve/title.png"
+        class="titleImg"
+        alt=""
+      />
+      <div class="tableModules" v-for="(item, index) in serveList" :key="index">
+        <div class="m-title">{{ item.title }}</div>
+        <div class="m-table">
+          <div class="m-head">
+            <div
+              class="m-head-item"
+              :class="i === 2 ? item.color : ''"
+              v-for="(t, i) in item.head"
+              :key="t"
+            >
+              {{ t }}
+            </div>
+          </div>
+          <div
+            class="m-content"
+            :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="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="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"
+              ></span>
+              <span class="text" v-else v-html="c.three"></span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script>
@@ -38,20 +107,25 @@ import { Swipe, SwipeItem } from 'vant'
 import { px2px } from '@/utils'
 export default {
   name: 'vipsubscribeRights',
-  data() {
-    return {
-      cardlist: [{}, {}, {}],
-      tab: 0
-    }
-  },
   components: {
     [Swipe.name]: Swipe,
     [SwipeItem.name]: SwipeItem,
     Ad
   },
   computed: {
+    serveList() {
+      if (this.tab === 0) {
+        return this.tableModules_free_vip
+      } else if (this.tab === 1) {
+        return this.tableModules_vip_member2
+      } else if (this.tab === 2) {
+        return this.tableModules_member2_memberP
+      } else {
+        return []
+      }
+    },
     tabheight() {
-      return px2px('142px').replace('px', '')
+      return px2px('148px').replace('px', '')
     },
     tabwidth() {
       return px2px('323px').replace('px', '')
@@ -70,6 +144,337 @@ export default {
     setswipeTo(val) {
       this.$refs.card_.swipeTo(val)
     }
+  },
+  data() {
+    return {
+      cardlist: [
+        {
+          title: '超级订阅',
+          btn: '立即开通',
+          tag: '推荐个人、小微企业使用',
+          desc: '<span style="color:#2ABED1;fontSize:16px">27</span>项特权，支持标讯灵活订阅、高级搜索，让商机获取更轻松！',
+          color: 'blue'
+        },
+        {
+          title: '大会员商机版2.0',
+          btn: '立即开通',
+          tag: '推荐企业获取商机、业务拓展使用',
+          desc: '<span style="color:#B1700E;fontSize:16px">38</span>项特权，提前推送超前项目，优先对接项目负责人。',
+          color: 'yellow'
+        },
+        {
+          title: '大会员专家版2.0',
+          btn: '立即开通',
+          tag: '推荐企业获取商机、业务拓展、企业管理、市场分析使用',
+          desc: '<span style="color:#B1700E;fontSize:16px">48</span>项特权，分析业主、企业画像、导出数据辅助市场决策。',
+          color: 'yellowb'
+        }
+      ],
+      tableModules_free_vip: [
+        {
+          color: 'blue',
+          title: '招标采购信息',
+          head: ['服务项目', '免费用户', '超级订阅'],
+          content: [
+            {
+              one: '招标预告',
+              two: 'icon-blue',
+              three: 'icon-blue'
+            },
+            {
+              one: '招标公告',
+              two: 'icon-blue',
+              three: 'icon-blue'
+            },
+            {
+              one: '招标结果',
+              two: 'icon-blue',
+              three: 'icon-blue'
+            },
+            {
+              one: '询价采购',
+              two: 'icon-blue',
+              three: 'icon-blue'
+            },
+            {
+              one: '谈判采购',
+              two: 'icon-blue',
+              three: 'icon-blue'
+            },
+            {
+              one: '企业采购',
+              two: 'icon-blue',
+              three: 'icon-blue'
+            },
+            {
+              one: '招标信用信息',
+              two: 'icon-blue',
+              three: 'icon-blue'
+            },
+
+          ]
+        },
+        {
+          color: 'blue',
+          title: '业务拓展',
+          head: ['服务项目', '免费用户', '超级订阅'],
+          content: [
+            {
+              one: '招标/采购进度监控(项目进度监控)',
+              two: '10个',
+              three: '10个'
+            },
+            {
+              one: '业主监控',
+              two: '-',
+              three: '10个'
+            },
+            {
+              one: '企业情报监控',
+              two: '10个（不含企业工商变动监控）',
+              three: '10个（不含企业工商变动监控）'
+            },
+            {
+              one: '业主人脉信息(采购单位通讯录)',
+              two: '-',
+              three: '5个/省/月，上限80个'
+            },
+            {
+              one: '招标采购信息发布',
+              two: 'icon-blue',
+              three: 'icon-blue'
+            },
+            {
+              one: '供应信息发布',
+              two: '30条/月',
+              three: '30条/月'
+            },
+            {
+              one: '广告服务',
+              two: '议价',
+              three: '议价'
+            }
+          ]
+        },
+        {
+          color: 'blue',
+          title: '营销分析',
+          head: ['服务项目', '免费用户', '超级订阅'],
+          content: [
+            {
+              one: '企业分析（企业画像-中标分析）',
+              two: '-',
+              three: '在线查看：每购买1个省，每月可查看50个，上限800个'
+            },
+            {
+              one: '业主分析（采购单位画像-采购分析）',
+              two: '-',
+              three: '在线查看：每购买1个省，每月可查看5个，上限80个'
+            }
+          ]
+        },
+        {
+          color: 'blue',
+          title: '标讯服务',
+          head: ['服务项目', '免费用户', '超级订阅'],
+          content: [
+            {
+              one: '高级搜索',
+              two: '-',
+              three: 'icon-blue'
+            },
+            {
+              one: '附件下载',
+              two: '-',
+              three: '10个/月'
+            },
+            {
+              one: '查看原文链接',
+              two: '-',
+              three: 'icon-blue'
+            },
+            {
+              one: '标讯收藏',
+              two: '100条',
+              three: '5000条'
+            },
+            {
+              one: '服务平台',
+              two: 'icon-blue',
+              three: 'icon-blue'
+            }
+          ]
+        },
+        {
+          color: 'blue',
+          title: '秘书服务',
+          head: ['服务项目', '免费用户', '超级订阅'],
+          content: [
+            {
+              one: '标讯订阅',
+              two: '订阅区域：1个省<br>关键词：10组<br>信息推送：300条/天',
+              three: '订阅区域：按购买数量<br>关键词：300组<br>信息推送：2000条/天'
+            },
+            {
+              one: '微信提醒',
+              two: 'icon-blue',
+              three: 'icon-blue'
+            },
+            {
+              one: 'APP提醒',
+              two: 'icon-blue',
+              three: 'icon-blue'
+            },
+            {
+              one: '邮件提醒',
+              two: 'icon-blue',
+              three: 'icon-blue'
+            }
+
+          ]
+        },
+        {
+          color: 'blue',
+          title: '专家服务',
+          head: ['服务项目', '免费用户', '超级订阅'],
+          content: [
+            {
+              one: '标书制作',
+              two: '议价',
+              three: '议价'
+            },
+            {
+              one: '企业认证服务',
+              two: '议价',
+              three: '议价'
+            },
+            {
+              one: '招投标课程（中标必听课）',
+              two: '议价',
+              three: '议价'
+            },
+            {
+              one: '剑鱼文库',
+              two: '议价',
+              three: '议价'
+            },
+            {
+              one: '招投标攻略',
+              two: 'icon-blue',
+              three: 'icon-blue'
+            }
+
+          ]
+        },
+        {
+          color: 'blue',
+          title: '数据服务',
+          head: ['服务项目', '免费用户', '超级订阅'],
+          content: [
+            {
+              one: '数据导出',
+              two: '议价',
+              three: '议价'
+            },
+            {
+              one: '数据定制服务',
+              two: '议价',
+              three: '议价'
+            },
+            {
+              one: '数据对接服务',
+              two: '议价',
+              three: '议价'
+            },
+            {
+              one: '数据清洗服务',
+              two: '议价',
+              three: '议价'
+            },
+          ]
+        },
+        {
+          color: 'blue',
+          title: '企业管理',
+          head: ['服务项目', '免费用户', '超级订阅'],
+          content: [
+            {
+              one: '企业订阅分发',
+              two: '-',
+              three: 'icon-blue'
+            },
+            {
+              one: '客户管理',
+              two: '议价',
+              three: '议价'
+            },
+            {
+              one: '企业协作',
+              two: 'icon-blue',
+              three: 'icon-blue'
+            },
+            {
+              one: '年终报告',
+              two: 'icon-blue',
+              three: 'icon-blue'
+            }
+          ]
+        }
+      ],
+      tableModules_vip_member2: [
+        {
+          color: 'yellow',
+          title: '招标采购信息',
+          head: ['服务项目', '超级订阅', '大会员商机版2.0'],
+          content: [
+            {
+              one: '',
+              two: '',
+              three: ''
+            }
+          ]
+        },
+        {
+          color: 'yellow',
+          title: '业务拓展',
+          head: ['服务项目', '超级订阅', '大会员商机版2.0'],
+          content: [
+            {
+              one: '',
+              two: '',
+              three: ''
+            }
+          ]
+        }
+      ],
+      tableModules_member2_memberP: [
+        {
+          color: 'yellowb',
+          title: '招标采购信息',
+          head: ['服务项目', '大会员商机版2.0', '大会员专家版2.0'],
+          content: [
+            {
+              one: '',
+              two: '',
+              three: ''
+            }
+          ]
+        },
+        {
+          color: 'yellowb',
+          title: '业务拓展',
+          head: ['服务项目', '大会员商机版2.0', '大会员专家版2.0'],
+          content: [
+            {
+              one: '',
+              two: '',
+              three: ''
+            }
+          ]
+        }
+      ],
+      tab: 0
+    }
   }
 }
 </script>
@@ -82,19 +487,86 @@ export default {
 
     .scrollbox {
       position: absolute;
-      bottom: -70px;
+      bottom: -72px;
       left: 0;
       box-sizing: border-box;
       padding-left: 12px;
       width: 100%;
-      height: 142px;
+      height: 148px;
+
       ::v-deep {
         .card-item {
           width: 315px;
           height: 142px;
           border: 1.5px solid #ffffff;
           border-radius: 12px;
+          padding: 14px 0 0 10px;
+          box-sizing: border-box;
+
+          .card-head {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .left-text {
+              font-size: 16px;
+              font-weight: 400;
+              line-height: 22px;
+              text-align: left;
+              color: #1b1a2a;
+            }
+            .right-btn {
+              width: 112px;
+              height: 33px;
+              border-radius: 18px 0 0 18px;
+              font-size: 16px;
+              color: #fff;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+            }
+            .btn-blue {
+              background: linear-gradient(270deg, #3687ff 0%, #2abed1 100%);
+            }
+            .btn-yellow {
+              background: linear-gradient(270deg, #d69e55 0%, #f1d090 130.11%);
+            }
+            .btn-yellowb {
+              background: linear-gradient(270deg, #d69e55 0%, #f1d090 130.11%);
+            }
+          }
+          .tag-text {
+            font-size: 11px;
+            display: inline-block;
+            padding: 4px 8px;
+            line-height: 14px;
+            margin-top: 12px;
+            border-radius: 20px;
+            margin-right: 10px;
+          }
+          .tag-blue {
+            color: #2abed1;
+            background: #eaf8fa;
+            border: 1px solid #2abed1;
+          }
+          .tag-yellow {
+            color: #b1700e;
+            background: #c98f3714;
+            border: 1px solid #c98f37;
+          }
+          .tag-yellowb {
+            color: #b1700e;
+            border: 1px solid #c98f37;
+            background: #c98f3714;
+          }
+          .card-desc {
+            font-size: 14px;
+            line-height: 20px;
+            margin-top: 8px;
+            color: #686868;
+            margin-right: 10px;
+          }
         }
+
         .blue-item {
           background: linear-gradient(
             360deg,
@@ -102,8 +574,9 @@ export default {
             #f4feff 55.8%,
             #e4fcff 100%
           );
-          box-shadow: 2px 4px 16px 0px #017e9533;
+          box-shadow: 2px 4px 6px 0px #017e9533;
         }
+
         .yellow-item {
           background: linear-gradient(
             360deg,
@@ -111,8 +584,9 @@ export default {
             #fffaf2 51.55%,
             #ffecd0 100%
           );
-          box-shadow: 2px 4px 16px 0px #84500033;
+          box-shadow: 2px 4px 6px 0px #84500033;
         }
+
         .yellowb-item {
           background: linear-gradient(
             360deg,
@@ -120,13 +594,125 @@ export default {
             #fff5ee 57.07%,
             #ffdec6 100%
           );
-          box-shadow: 2px 4px 16px 0px #84500033;
+          box-shadow: 2px 4px 6px 0px #84500033;
         }
+
         .van-swipe__indicators {
           display: none;
         }
       }
     }
   }
+  .content_box {
+    padding-top: 104px;
+    background-color: #fff;
+    .titleImg {
+      width: 264px;
+      display: block;
+      margin: auto;
+    }
+    .tableModules {
+      padding: 14px 12px 0 12px;
+      .m-title {
+        font-size: 15px;
+        line-height: 22px;
+        color: #171826;
+        position: relative;
+        padding-left: 11px;
+        margin-bottom: 8px;
+      }
+      .m-title::before {
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        content: '';
+        height: 16px;
+        width: 3px;
+        border-radius: 11px;
+        background-color: #2abed1;
+      }
+      .m-head {
+        border-radius: 8px 8px 0 0;
+        background: linear-gradient(269.92deg, #f5f6f7 0.06%, #edeff2 99.93%);
+        font-size: 12px;
+        line-height: 18px;
+        color: #171826;
+        display: flex;
+        .m-head-item {
+          flex: 1;
+          text-align: center;
+          padding: 12px 2px;
+        }
+        .blue {
+          background: linear-gradient(279.5deg, #7ce8f7 17%, #ddfff5 100%);
+          border-radius: 8px 8px 0 0;
+        }
+        .yellow {
+          background: linear-gradient(270deg, #f1d090 0%, #fae7ca 100%);
+          border-radius: 8px 8px 0 0;
+          color: #c26f33 !important;
+        }
+        .yellowb {
+          background: linear-gradient(270deg, #f5c594 0%, #ffebdc 100%);
+          border-radius: 8px 8px 0 0;
+          color: #c26f33 !important;
+        }
+      }
+      .m-content {
+        background-color: #fff;
+        display: flex;
+        .con-cr-gray {
+          color: #9b9ca3;
+        }
+        .con-item {
+          flex: 1;
+          padding: 10px 8px;
+          align-items: center;
+          display: flex;
+          justify-content: center;
+          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;
+          }
+        }
+        .blue {
+          background-color: #dafafe;
+          color: #2abed1;
+        }
+        .yellow {
+          background-color: #fff6ee;
+          color: #c26f33;
+        }
+        .yellowb {
+          background-color: #ffede1;
+          color: #c26f33;
+        }
+      }
+    }
+    .m-content:last-child {
+      border-radius: 0 0 8px 8px;
+      overflow: hidden;
+    }
+    .gray {
+      background-color: #fafafb !important;
+    }
+  }
 }
 </style>