feat：P707需求开发

Signed-off-by: tangshizhe <48740614+tangshizhe@users.noreply.github.com>

apps/mobile/src/assets/js/contrast_function.js

@@ -0,0 +1,160 @@
+const contrastFunctionJson = {
+  head: ['功能/产品', '免费用户', '超级订阅'],
+  content: [
+    {
+      name: '企业画像',
+      label: '提供企业中标项目分析、重点客户等多维分析',
+      freeClass: 'wrong',
+      freeText: '',
+      superClass: '',
+      superText: '50个/省/月',
+      isNew: true
+    },
+    {
+      name: '采购单位画像',
+      label: '提供重点供应商、采购预算/方式等分析',
+      freeClass: 'wrong',
+      freeText: '',
+      superClass: '',
+      superText: '5个/省/月',
+      isNew: true
+    },
+    {
+      name: '附件下载',
+      label: '招标文件/采购清单一键下载',
+      freeClass: 'wrong',
+      freeText: '',
+      superClass: '',
+      superText: '10个/月',
+      isNew: true
+    },
+    {
+      name: '查看公告原文链接',
+      label: '支持用户点击原文链接查看公告原地址，鉴别信息真伪',
+      freeClass: 'wrong',
+      freeText: '',
+      superClass: 'right',
+      superText: '',
+      isNew: true
+    },
+    {
+      name: '项目报告下载',
+      label: '',
+      freeClass: 'wrong',
+      freeText: '',
+      superClass: 'right',
+      superText: '',
+      isNew: true
+    },
+    {
+      name: '订阅关键词',
+      label: '',
+      freeClass: '',
+      freeText: '10组',
+      superClass: '',
+      superText: '300组',
+      isNew: false
+    },
+    {
+      name: '中标企业联系方式',
+      label: '',
+      freeClass: '',
+      freeText: '公告公示',
+      superClass: '',
+      superText: '招标公告+国家企业公示',
+      isNew: false
+    },
+    {
+      name: '订阅区域',
+      label: '',
+      freeClass: '',
+      freeText: '免费订阅1个省',
+      superClass: '',
+      superText: '根据套餐类型可选',
+      isNew: false
+    },
+    {
+      name: '订阅推送',
+      label: '',
+      freeClass: '',
+      freeText: '300条/天',
+      superClass: '',
+      superText: '2000条/天',
+      isNew: false
+    },
+    {
+      name: '匹配方式',
+      label: '',
+      freeClass: '',
+      freeText: '标题',
+      superClass: '',
+      superText: '标题+全文',
+      isNew: false
+    },
+    {
+      name: '推送设置',
+      label: '固定时间/实时推送',
+      freeClass: 'wrong',
+      freeText: '',
+      superClass: '',
+      superText: '可选',
+      isNew: false
+    },
+    {
+      name: '标讯高级搜索',
+      label: '按联系方式、附件、项目名称/标的物、发布时间搜索',
+      freeClass: 'wrong',
+      freeText: '',
+      superClass: 'right',
+      superText: '',
+      isNew: false
+    },
+    {
+      name: '企业搜索',
+      label: '按中标项目/标的物、联系方式等搜索企业信息',
+      freeClass: 'right',
+      freeText: '',
+      superClass: 'right',
+      superText: '',
+      isNew: false
+    },
+    {
+      name: '采购单位搜索',
+      label: '按地区、采购单位类型等搜索采购单位信息，高效精准拓客',
+      freeClass: 'right',
+      freeText: '',
+      superClass: 'right',
+      superText: '',
+      isNew: false
+    },
+    {
+      name: '周报/月报',
+      label: '',
+      freeClass: 'wrong',
+      freeText: '',
+      superClass: 'right',
+      superText: '',
+      isNew: false
+    },
+    {
+      name: '标讯收藏',
+      label: '关注项目一键收藏，重要信息不遗漏',
+      freeClass: '',
+      freeText: '100条',
+      superClass: '',
+      superText: '5000条',
+      isNew: false
+    },
+    {
+      name: '专属资源社群对接',
+      label: '',
+      freeClass: 'wrong',
+      freeText: '',
+      superClass: 'right',
+      superText: '',
+      isNew: false
+    }
+  ]
+}
+
+export default contrastFunctionJson

apps/mobile/src/views/order/components/vipsubscribe/Introduction.vue

@@ -1,25 +1,51 @@
 <template>
   <div class="vip-rights">
     <div class="buy-tip">
-      <div class="buy-tip-header">购买须知</div>
+      <div class="buy-tip-header">
+        购买须知
+      </div>
       <div class="buy-tip-text">
         剑鱼平台产品与服务属于虚拟数字产品，鉴于服务的特殊性，一旦开通权益不支持退款，请确认无误后进行支付。
       </div>
     </div>
-    <img src="@/assets/image/vip-subscribe/introduce.png" alt="" />
-    <div class="allViewrights" @click="goViewrights">查看全部权益</div>
+    <!-- <img src="@/assets/image/vip-subscribe/introduce.png" alt=""> -->
+    <div class="product-introduce">
+      <div class="product-introduce-header">
+        <span class="icon-bracket" />
+        <span class="title">整体服务对比</span>
+        <span class="icon-bracket reverse" />
+      </div>
+      <div class="product-introduce-text">
+        超级订阅不包含超前项目（拟建项目、采购意向）服务。<br>
+        如需超前项目服务，请<span class="gold" @click="goBuyMember">购买大会员</span>
+      </div>
+      <div class="product-introduce-content">
+        <IntroductionCard />
+      </div>
+    </div>
+    <div class="allViewrights" @click="goViewrights">
+      查看全部权益
+    </div>
   </div>
 </template>
+
 <script>
+import IntroductionCard from './IntroductionCard.vue'
+
 export default {
   name: 'VipSubscribeIntroduction',
-  components: {},
+  components: {
+    IntroductionCard
+  },
   data: () => ({}),
   beforeCreate() {},
   created() {},
   methods: {
-    goViewrights(){
+    goViewrights() {
       this.$router.push('/common/vipsubscribeRights')
+    },
+    goBuyMember() {
+      this.$router.push('/order/create/bigmember?meal=sj')
     }
   }
 }
@@ -53,6 +79,43 @@ export default {
       line-height: 18px;
     }
   }
+  .product-introduce {
+    margin-top: 26px;
+    .product-introduce-header {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .icon-bracket {
+        display: flex;
+        width: 44px;
+        height: 8px;
+        background: url('../../../../assets/image/icon/bracket.png') no-repeat;
+        background-size: 100% 100%;
+        &.reverse {
+          transform: rotate(180deg);
+        }
+      }
+      .title {
+        padding: 0 8px;
+        font-size: 18px;
+        line-height: 26px;
+        color: #FAE7CA;
+      }
+    }
+    .product-introduce-text {
+      margin-top: 8px;
+      text-align: center;
+      font-size: 12px;
+      line-height: 18px;
+      .gold {
+        color: #FAE7CA;
+
+      }
+    }
+    .product-introduce-content {
+      padding: 18px 8px;
+    }
+  }
   .allViewrights {
     width: 343px;
     height: 46px;

apps/mobile/src/views/order/components/vipsubscribe/IntroductionCard.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="introduction-card">
+    <div class="head-list">
+      <div v-for="(item, index) in info.head" :key="index" class="head-item" :class="`head-item-${index}`">
+        {{ item }}
+      </div>
+    </div>
+    <div class="body-list">
+      <div v-for="(item, index) in info.content" :key="index" class="body-item">
+        <div class="product-name">
+          <div class="title">
+            {{ item.name }}
+            <div v-if="item.isNew" class="isnew" />
+          </div>
+          <div class="label">
+            {{ item.label }}
+          </div>
+        </div>
+        <div class="product-free">
+          <div v-if="item.freeClass" class="free-class" :class="item.freeClass" />
+          <div v-if="item.freeText" class="free-text">
+            {{ item.freeText }}
+          </div>
+        </div>
+        <div class="product-vip">
+          <div v-if="item.superClass" class="vip-class" :class="item.superClass" />
+          <div v-if="item.superText" class="vip-text">
+            {{ item.superText }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import contrastFunctionJson from '@/assets/js/contrast_function.js'
+
+export default {
+  name: 'IntroductionCard',
+  data() {
+    return {
+      info: contrastFunctionJson || {
+        head: [],
+        content: []
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.introduction-card {
+  border-radius: 12px;
+  .head-list {
+    display: flex;
+    .head-item {
+      width: 92px;
+      height: 32px;
+      text-align: center;
+      font-size: 14px;
+      line-height: 32px;
+      color: #171826;
+      border-radius: 12px 12px 0 0;
+      background: linear-gradient(to right, #F5F5FB, #FFFFFF);
+      &-0 {
+        width: 175px;
+      }
+      &-2 {
+        background: linear-gradient(to right, #FAE7CA, #F1D090);
+      }
+    }
+  }
+  .body-list {
+    background: #FFFFFF;
+    .body-item {
+      display: flex;
+      border-top: 0.5px solid rgba(0, 0, 0, 0.05);
+      &:nth-child(odd) {
+        background: #fff;
+      }
+      &:nth-child(even) {
+        background: rgba(252, 252, 254, 1);
+      }
+      .product-name {
+        padding: 12px 8px;
+        width: 175px;
+        text-align: center;
+        border-right: 0.5px solid rgba(0, 0, 0, 0.05);
+        .title {
+          font-size: 14px;
+          line-height: 20px;
+          color: #171826;
+        }
+        .label {
+          margin-top: 4px;
+          font-size: 12px;
+          line-height: 18px;
+          color: #9B9CA3;
+        }
+      }
+      .product-free, .product-vip {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 0 8px;
+        width: 92px;
+        text-align: center;
+        .free-class {
+          &.wrong {
+            width: 100%;
+            height: 100%;
+            &::before {
+              display: block;
+              width: 100%;
+              height: 100%;
+              content: '';
+              background: url(../../../../assets/image/icon/icon-red-close.png) no-repeat center;
+              background-size: 20px 20px;
+            }
+          }
+          &.right {
+            width: 100%;
+            height: 100%;
+            &::before {
+              display: block;
+              width: 100%;
+              height: 100%;
+              content: '';
+              background: url(../../../../assets/image/icon/icon-check.png) no-repeat center;
+              background-size: 24px 24px;
+            }
+          }
+        }
+        .vip-class {
+          &.right {
+            width: 100%;
+            height: 100%;
+            &::before {
+              display: block;
+              width: 100%;
+              height: 100%;
+              content: '';
+              background: url(../../../../assets/image/icon/icon-check.png) no-repeat center;
+              background-size: 24px 24px;
+            }
+          }
+        }
+
+      }
+      .product-free {
+        color: #9B9CA3;
+        border-right: 0.5px solid rgba(0, 0, 0, 0.05);
+      }
+      .product-vip {
+        color: #BD7B2E;
+      }
+    }
+  }
+}
+</style>