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

<template>
  <div class="vipsubscribeRights">
    <div class="header">
      <Ad
        :ad="getAdID"
        :showCloseIcon="false"
        :showTag="false"
        @loaded="loadSuccess"
      ></Ad>
      <img
        src="@/assets/image/vip-subscribe/serve/head-img.png"
        v-if="!aDloadSuccess"
        alt=""
      />
      <div class="scrollbox">
        <div class="s-content">
          <van-swipe
            type="card"
            :height="tabheight"
            :width="tabwidth"
            :loop="false"
            @change="cardscroll"
            ref="card_"
          >
            <van-swipe-item
              :default="index"
              v-for="(item, index) in cardlist"
              :key="index"
            >
              <div
                :class="{
                  'card-item': true,
                  'blue-item': item.color === 'blue',
                  'yellow-item': item.color === 'yellow',
                  'yellowb-item': item.color === 'yellowb'
                }"
                @click="itemclick(index)"
              >
                <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'
                    }"
                    @click.stop="cardClick(item)"
                  >
                    {{
                      item.title === '超级订阅' ? viperbtnText : memberbtnText
                    }}
                  </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>
    <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 && 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 && 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 && 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" @click="gosource">申请免费体验</div>
      </div>
      <div class="bottomModules">
        <img src="@/assets/image/vip-subscribe/serve/hzhb.png" alt="" />
      </div>
      <div class="footer-group">
        <div class="group_item">
          <div class="phone-btn" @click="call_Phone('400-108-6670')">
            <div class="icon-phone"></div>
            <div class="btn-text">电话咨询</div>
          </div>
          <div class="wx-btn" @click="kefu_">
            <div class="icon-wx"></div>
            <div class="btn-text">在线客服</div>
          </div>
        </div>
        <div class="open-btn" @click="bottombtnClick">{{ bottombtnText }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import { getUserAccountInfo } from '@/api/modules'
import { callPhone } from '@/utils/callFn'
import { mapGetters } from 'vuex'
import Ad from '@/components/ad/Ad.vue'
import { Swipe, SwipeItem } from 'vant'
import { px2px } from '@/utils'
export default {
  name: 'vipsubscribeRights',
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    Ad
  },
  computed: {
    ...mapGetters('user', ['isLogin', 'isFree', 'isMember', 'isSuper']),
    viperbtnText() {
      if (this.isSuper) {
        if (this.renew) {
          // 允许立即续费
          return '立即续费'
        } else {
          return '续费咨询'
        }
      } else {
        return '立即开通'
      }
    },
    memberbtnText() {
      if (this.isMember) {
        return '续费咨询'
      } else {
        return '立即开通'
      }
    },
    bottombtnText() {
      if (this.tab == 0) {
        return this.viperbtnText
      } else {
        return this.memberbtnText
      }
    },
    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('148px').replace('px', '')
    },
    tabwidth() {
      return px2px('323px').replace('px', '')
    },
    getAdID() {
      let code = ''
      if (this.$envs.inWX) {
        code = 'wx-vipServeList-header'
      } else {
        code = 'app-vipServeList-header'
      }
      return code
    }
  },
  watch: {},
  created() {
    this.getUserAccountInfoAjax()
  },
  mounted() {
    if (sessionStorage.getItem('vipserveTab')) {
      let tab = sessionStorage.getItem('vipserveTab')
      this.setswipeTo(tab)
      this.tab = tab
      sessionStorage.removeItem('vipserveTab')
    }
  },
  methods: {
    callPhone,
    loadSuccess() {
      this.aDloadSuccess = true
    },
    getUserAccountInfoAjax() {
      getUserAccountInfo().then((res) => {
        let data = res.data
        if (data.list && data.list.length > 0) {
          let list = data.list
          list.forEach((ele) => {
            if (ele.name === '超级订阅') {
              this.renew = ele.attr.renew || false
            }
            if (ele.name.includes('大会员')) {
              if (this.$envs.inApp) {
                this.hjLink = ele.attr.app || ''
              } else {
                this.hjLink = ele.attr.h5 || ''
              }
            }
          })
        }
      })
    },
    cardClick(item) {
      sessionStorage.setItem('vipserveTab', this.tab)
      if (item.title === '超级订阅') {
        if (this.viperbtnText === '立即开通') {
          location.href = '/jy_mobile/order/create/svip?type=buy'
        } else if (this.viperbtnText === '立即续费') {
          location.href = '/jy_mobile/order/create/svip?type=renew'
        } else {
          this.kefu_()
        }
      } else if (item.title === '大会员商机版2.0') {
        if (this.memberbtnText === '立即开通') {
          this.$router.push('/order/create/bigmember?meal=sj')
        } else if (this.memberbtnText === '续费咨询') {
          window.location.href = this.hjLink
        }
      } else if (item.title === '大会员专家版2.0') {
        if (this.memberbtnText === '立即开通') {
          this.$router.push('/order/create/bigmember?meal=zj')
        } else if (this.memberbtnText === '续费咨询') {
          window.location.href = this.hjLink
        }
      }
    },
    bottombtnClick() {
      let obj = {}
      if (this.tab == 0) {
        obj = { title: '超级订阅' }
      } else if (this.tab == 1) {
        obj = { title: '大会员商机版2.0' }
      } else if (this.tab == 2) {
        obj = { title: '大会员专家版2.0' }
      }
      this.cardClick(obj)
    },
    gosource() {
      sessionStorage.setItem('vipserveTab', this.tab)
      // 留资
      if (this.$envs.inWX) {
        location.href =
          '/weixin/frontPage/bigmember/free/perfect_info?source=wx_ServiceList_experience'
      } else if (this.$envs.inApp) {
        location.href =
          '/jyapp/frontPage/bigmember/free/perfect_info?source=app_ServiceList_experience'
      } else {
        location.href =
          '/jyapp/frontPage/bigmember/free/perfect_info?source=h5_ServiceList_experience'
      }
    },
    kefu_() {
      sessionStorage.setItem('vipserveTab', this.tab)
      if (this.$envs.inWX) {
        location.href = '/big/wx/page/customer'
      } else {
        location.href = '/jyapp/free/customer'
      }
    },
    call_Phone(tel) {
      this.callPhone(tel)
    },
    itemclick(index) {
      this.setswipeTo(index)
      if (index == 1) {
        let dom = document.querySelector('.van-swipe__track')
        this.$nextTick(() => {
          setTimeout(() => {
            dom.style.transform = `translateX(-${px2px('305px')})`
          }, 150)
        })
      }
    },
    cardscroll(val) {
      this.tab = val
      if (this.tab == 1) {
        let dom = document.querySelector('.van-swipe__track')
        this.$nextTick(() => {
          dom.style.transform = `translateX(-${px2px('305px')})`
        })
      }
    },
    setswipeTo(val) {
      this.$refs.card_.swipeTo(val)
    }
  },
  data() {
    return {
      aDloadSuccess: false,
      hjLink: '',
      tab: 0,
      renew: false,
      cardlist: [
        {
          title: '超级订阅',
          tag: '推荐个人、小微企业使用',
          desc: '<span style="color:#2ABED1;fontSize:16px">27</span>项特权，支持标讯灵活订阅、高级搜索，让商机获取更轻松！',
          color: 'blue'
        },
        {
          title: '大会员商机版2.0',
          tag: '推荐企业获取商机、业务拓展使用',
          desc: '<span style="color:#B1700E;fontSize:16px">38</span>项特权，提前推送超前项目，优先对接项目负责人。',
          color: 'yellow'
        },
        {
          title: '大会员专家版2.0',
          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: '招标/采购进度监控<br>(项目进度监控)',
              two: '10个',
              three: '10个'
            },
            {
              one: '业主监控',
              two: '-',
              three: '10个'
            },
            {
              one: '企业情报监控',
              two: '10个（不含企业工商变动监控）',
              three: '10个（不含企业工商变动监控）'
            },
            {
              one: '业主人脉信息<br>(采购单位通讯录)',
              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: '企业分析<br>（企业画像-中标分析）',
              two: '-',
              three: '在线查看：每购买1个省，每月可查看50个，上限800个'
            },
            {
              one: '业主分析<br>（采购单位画像-采购分析）',
              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: '招投标课程<br>（中标必听课）',
              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: '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: '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: 'yellow',
          title: '业务拓展',
          head: ['服务项目', '超级订阅', '大会员商机版2.0'],
          content: [
            {
              one: '招标/采购进度监控<br>(项目进度监控)',
              two: '10个',
              three: '100个'
            },
            {
              one: '业主监控',
              two: '10个',
              three: '100个'
            },
            {
              one: '企业情报监控',
              two: '10个（不含企业工商变动监控）',
              three: '100个'
            },
            {
              one: '潜在项目预测',
              two: '-',
              three: 'icon-yellow'
            },
            {
              one: '企业人脉信息<br>(企业通讯录)',
              two: '-',
              three: 'icon-yellow'
            },
            {
              one: '业主人脉信息<br>(采购单位通讯录)',
              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: '企业分析<br>（企业画像-中标分析）',
              two: '在线查看：每购买1个省，每月可查看50个，上限800个',
              three_slot:
                '<div><p class="flex-center"><span>在线查看：</span><span class="icon-yellow"></span></p><span>报告下载：1份/年<span></div>'
            },
            {
              one: '业主分析<br>（采购单位画像-采购分析）',
              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: '招投标课程<br>（中标必听课）',
              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: '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', '大会员专家版2.0'],
          content: [
            {
              one: '招标/采购进度监控<br>(项目进度监控)',
              two: '100个',
              three: '500个'
            },
            {
              one: '业主监控',
              two: '100个',
              three: '500个'
            },
            {
              one: '企业情报监控',
              two: '100个',
              three: '500个'
            },
            {
              one: '潜在项目预测',
              two: 'icon-yellow',
              three: 'icon-yellow'
            },
            {
              one: '企业人脉信息<br>(企业通讯录)',
              two: 'icon-yellow',
              three: 'icon-yellow'
            },
            {
              one: '业主人脉信息<br>(采购单位通讯录)',
              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: '企业分析<br>（企业画像-中标分析）',
              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: '业主分析<br>（采购单位画像-采购分析）',
              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: '招投标课程<br>（中标必听课）',
              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: 'icon-yellow',
              three: 'icon-yellow'
            },
            {
              one: '客户管理',
              two: '议价',
              three: '议价'
            },
            {
              one: '账号使用统计',
              two: 'icon-yellow',
              three: 'icon-yellow'
            },
            {
              one: '企业协作',
              two: 'icon-yellow',
              three: 'icon-yellow'
            },
            {
              one: '年终报告',
              two: 'icon-yellow',
              three: 'icon-yellow'
            }
          ]
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.vipsubscribeRights {
  padding-bottom: 66px;

  .header {
    max-height: 190px;
    position: relative;

    .scrollbox {
      position: absolute;
      bottom: -72px;
      left: 0;
      box-sizing: border-box;
      padding-left: 12px;
      width: 100%;
      height: 148px;
      .s-content {
        // margin-left: 12px;
      }

      ::v-deep {
        .van-swipe {
          overflow: visible;
        }
        .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 7px;
            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,
            #ffffff 0%,
            #f4feff 55.8%,
            #e4fcff 100%
          );
          box-shadow: 2px 4px 14px 0px #017e9533;
        }

        .yellow-item {
          background: linear-gradient(
            360deg,
            #ffffff 0%,
            #fffaf2 51.55%,
            #ffecd0 100%
          );
          box-shadow: 2px 4px 14px 0px #84500033;
        }

        .yellowb-item {
          background: linear-gradient(
            360deg,
            #ffffff 0%,
            #fff5ee 57.07%,
            #ffdec6 100%
          );
          box-shadow: 2px 4px 14px 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;

          ::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 {
          background-color: #dafafe;
          color: #2abed1;
        }

        .yellow {
          background-color: #fff6ee;
          color: #c26f33;
        }

        .yellowb {
          background-color: #ffede1;
          color: #c26f33;
        }
      }
    }

    .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;
      justify-content: space-between;
      .group_item {
        width: 149px;
        display: flex;
        justify-content: space-between;
      }

      .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;

        .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;
      }
    }

    .bottomModules img {
      width: 100%;
      display: block;
    }

    .m-content:last-child {
      border-radius: 0 0 8px 8px;
      overflow: hidden;
    }

    .gray {
      background-color: #fafafb !important;
    }
  }
}
</style>