feat: P707需求开发

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

src/jfw/modules/app/src/web/staticres/jyapp/vipsubscribe/css/vip_introduce.css

@@ -696,6 +696,7 @@ body .j-container {
 }
 .vip_introduce .vs-container{
   margin: .68rem 0 0;
+  background: linear-gradient(to right, #4A4A5C, #2F2F3D);
 }
 .popup-bottom-group{
   display: flex;

src/jfw/modules/app/src/web/staticres/jyapp/vipsubscribe/js/vip_introduce.js

@@ -0,0 +1,6 @@
+var vipContrastVm = new Vue({
+  el: '.vs-container',
+  components: {
+    vipFreeIntroduce: vipFreeIntroduceNode
+  }
+})

src/jfw/modules/app/src/web/templates/vipsubscribe/vip_introduce.html

@@ -19,6 +19,7 @@
     <link rel="stylesheet" type="text/css" href='{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/local/weui.min.css' />
     <link rel="stylesheet" type="text/css" href="{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/vipsubscribe/css/vip_introduce.css?v={{Msg "seo" "version"}}">
     <link rel="stylesheet" type="text/css" href="{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/css/font.css?v={{Msg "seo" "version"}}"/>
+    <link rel="stylesheet" type="text/css" href="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/vipsubscribe/css/vip-free-introduce-template.css?v={{Msg "seo" "version"}}">
         <style>
         .pop-tip-group.tip-box > div,
         .pop-tip-group.active > div{
@@ -142,7 +143,8 @@
           </div>
         </div>
         <div class="vs-container">
-          <img src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/vipsubscribe/image/vs_new.png?v={{Msg "seo" "version"}}' alt="vs">
+          <!-- <img src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/vipsubscribe/image/vs_new.png?v={{Msg "seo" "version"}}' alt="vs"> -->
+           <vip-free-introduce></vip-free-introduce>
         </div>
     </div>
     <div class="j-footer j-button-group popup-bottom-group">
@@ -159,6 +161,10 @@
     </div>
 </div>
 <script src='https://cdn-common.jianyu360.com/cdn/lib/jquery/3.6.0/jquery.min.js'></script>
+<script src=//cdn-common.jianyu360.com/cdn/lib/vue/2.6.11/vue.min.js> </script>
+<script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/vipsubscribe/js/contrast_function.js?v={{Msg "seo" "version"}}'></script>
+<script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/vipsubscribe/js/vip-free-introduce-template.js?v={{Msg "seo" "version"}}'></script>
+<script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/vipsubscribe/js/vip_introduce.js?v={{Msg "seo" "version"}}'></script>
 <script>
     {{$ss1:=(Ad "app-banner-data-info" -1 .Host (cookie "SESSIONID"))}}
     var headerImageList={{$ss1}}

src/web/staticres/common-module/vipsubscribe/css/vip-free-introduce-template.css

@@ -0,0 +1,158 @@
+.product-introduce {
+	margin-top: .48rem;
+}
+.product-introduce .product-introduce-vs {
+  display: flex;
+  justify-content: center;
+  margin-bottom: .08rem;
+  height: 1rem;
+}
+.product-introduce .product-introduce-vs .vs-img {
+  background: url('../image/contrast-header.png') no-repeat;
+  background-size: 100% 100%;
+  width: 6.06rem;
+  height: 1rem;
+}
+
+.product-introduce .product-introduce-header {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+.product-introduce .product-introduce-header .icon-bracket {
+	display: flex;
+	width: .88rem;
+	height: .16rem;
+	background: url("../image/icon/bracket.png") no-repeat;
+	background-size: 100% 100%;
+}
+.product-introduce .product-introduce-header .icon-bracket.reverse {
+	transform: rotate(180deg);
+}
+.product-introduce .product-introduce-header .title {
+	padding: 0 .12rem;
+	font-size: .3rem;
+	line-height: .48rem;
+	color: #FAE7CA;
+}
+.product-introduce .product-introduce-text {
+	margin-top: .16rem;
+	text-align: center;
+	font-size: .24rem;
+	line-height: .36rem;
+  color: rgba(255, 255, 255, 0.75);
+}
+.product-introduce .product-introduce-text .gold {
+	color: #FAE7CA;
+}
+.product-introduce .product-introduce-content {
+	padding: .36rem .16rem;
+}
+
+.introduction-card {
+	border-radius: .24rem;
+}
+.introduction-card .head-list {
+	display: flex;
+}
+.introduction-card .head-list .head-item {
+	width: 1.84rem;
+	height: .64rem;
+	text-align: center;
+	font-size: .28rem;
+	line-height: .64rem;
+	color: #171826;
+	border-radius: .24rem .24rem 0 0;
+	background: linear-gradient(to right, #F5F5FB, #FFFFFF);
+}
+.introduction-card .head-list .head-item-0 {
+	width: 3.5rem;
+}
+.introduction-card .head-list .head-item-2 {
+	background: linear-gradient(to right, #FAE7CA, #F1D090);
+}
+.introduction-card .body-list {
+	background: #FFFFFF;
+}
+.introduction-card .body-list .body-item {
+	display: flex;
+	border-top: 0.5px solid rgba(0, 0, 0, 0.05);
+}
+.introduction-card .body-list .body-item:nth-child(odd) {
+	background: #fff;
+}
+.introduction-card .body-list .body-item:nth-child(even) {
+	background: #fcfcfe;
+}
+.introduction-card .body-list .body-item .product-name {
+	padding: .24rem .16rem;
+	width: 3.5rem;
+	text-align: center;
+	border-right: 0.5px solid rgba(0, 0, 0, 0.05);
+}
+.introduction-card .body-list .body-item .product-name .title {
+	font-size: .28rem;
+	line-height: .4rem;
+	color: #171826;
+}
+.introduction-card .body-list .body-item .product-name .label {
+	margin-top: .08rem;
+	font-size: .24rem;
+	line-height: .36rem;
+	color: #9B9CA3;
+}
+.introduction-card .body-list .body-item .product-free, .introduction-card .body-list .body-item .product-vip {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 0 .16rem;
+	width: 1.84rem;
+	text-align: center;
+}
+.introduction-card .body-list .body-item .product-free .free-class.wrong, .introduction-card .body-list .body-item .product-vip .free-class.wrong {
+	width: 100%;
+	height: 100%;
+}
+.introduction-card .body-list .body-item .product-free .free-class.wrong::before, .introduction-card .body-list .body-item .product-vip .free-class.wrong::before {
+	display: block;
+	width: 100%;
+	height: 100%;
+	content: '';
+	background: url(../image/icon/icon-red-close.png) no-repeat center;
+	background-size: .4rem .4rem;
+}
+.introduction-card .body-list .body-item .product-free .free-class.right, .introduction-card .body-list .body-item .product-vip .free-class.right {
+	width: 100%;
+	height: 100%;
+}
+.introduction-card .body-list .body-item .product-free .free-class.right::before, .introduction-card .body-list .body-item .product-vip .free-class.right::before {
+	display: block;
+	width: 100%;
+	height: 100%;
+	content: '';
+	background: url(../image/icon/right.png) no-repeat center;
+	background-size: .48rem .48rem;
+}
+.introduction-card .body-list .body-item .product-free .vip-class.right, .introduction-card .body-list .body-item .product-vip .vip-class.right {
+	width: 100%;
+	height: 100%;
+}
+.introduction-card .body-list .body-item .product-free .vip-class.right::before, .introduction-card .body-list .body-item .product-vip .vip-class.right::before {
+	display: block;
+	width: 100%;
+	height: 100%;
+	content: '';
+	background: url(../image/icon/right.png) no-repeat center;
+	background-size: .48rem .48rem;
+}
+.introduction-card .body-list .body-item .product-free {
+	color: #9B9CA3;
+	border-right: 0.5px solid rgba(0, 0, 0, 0.05);
+}
+.introduction-card .body-list .body-item .product-vip {
+	color: #BD7B2E;
+}
+
+.introduction-card .free-text, .introduction-card .vip-text {
+  font-size: .24rem;
+}

src/web/staticres/common-module/vipsubscribe/js/contrast_function.js

@@ -0,0 +1,159 @@
+var 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
+    }
+  ]
+}
+

src/web/staticres/common-module/vipsubscribe/js/vip-free-introduce-template.js

@@ -0,0 +1,69 @@
+var vipFreeIntroduceTemplate = `
+  <div class="product-introduce">
+    <div class="product-introduce-vs">
+      <div class="vs-img">大会员</div>
+    </div>
+    <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">
+      <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>
+    </div>
+  </div>
+`
+
+var vipFreeIntroduceNode = {
+  name: 'vipFreeIntroduceNode',
+  delimiters: ['@@', '@@'],
+  template: vipFreeIntroduceTemplate,
+  data: function () {
+    return {
+      info: contrastFunctionJson
+    }
+  },
+  created:function () {
+    console.log('vipFreeIntroduceNode created', this.info)
+  },
+  methods: {
+    goBuyMember: function () {
+      window.location.href = '/jy_mobile/order/create/bigmember?meal=sj'
+    }
+  }
+}

src/web/staticres/vipsubscribe/css/vip_introduce.css

@@ -689,6 +689,8 @@ body {
 }
 .vip_introduce .vs-container{
   margin: .68rem 0 0;
+  overflow: hidden;
+  background: linear-gradient(to right, #4A4A5C, #2F2F3D);
 }
 .popup-bottom-group{
   display: flex;

src/web/staticres/vipsubscribe/js/vip_introduce.js

@@ -0,0 +1,6 @@
+var vipContrastVm = new Vue({
+  el: '.vs-container',
+  components: {
+    vipFreeIntroduce: vipFreeIntroduceNode
+  }
+})

src/web/templates/weixin/vipsubscribe/vip_introduce.html

@@ -16,6 +16,7 @@
     <link rel="stylesheet" type="text/css" href="/css/wxbutton.css?v={{Msg "seo" "version"}}">
     <link rel="stylesheet" type="text/css" href="/vipsubscribe/css/vip_introduce.css?v={{Msg "seo" "version"}}">
     <link rel="stylesheet" type="text/css" href="/vipsubscribe/css/weui.min.css?v={{Msg "seo" "version"}}"/>
+    <link rel="stylesheet" type="text/css" href="{{Msg "seo" "cdn"}}/common-module/vipsubscribe/css/vip-free-introduce-template.css?v={{Msg "seo" "version"}}">
     <style>
         .pop-tip-group.tip-box > div,
         .pop-tip-group.active > div{
@@ -136,7 +137,8 @@
                 </div>
               </div>
               <div class="vs-container">
-                <img src='{{Msg "seo" "cdn"}}/common-module/vipsubscribe/image/vs_new.png?v={{Msg "seo" "version"}}' alt="vs">
+                <!-- <img src='{{Msg "seo" "cdn"}}/common-module/vipsubscribe/image/vs_new.png?v={{Msg "seo" "version"}}' alt="vs"> -->
+                <vip-free-introduce></vip-free-introduce>
               </div>
             </div>
         </div>
@@ -155,6 +157,10 @@
     </div>
     {{include "/common/weixin.html"}}
     <script src='{{Msg "seo" "cdn"}}/structuredata/mobile/js/jquery.min.js'></script>
+    <script src=//cdn-common.jianyu360.com/cdn/lib/vue/2.6.11/vue.min.js> </script>
+    <script src='{{Msg "seo" "cdn"}}/common-module/vipsubscribe/js/contrast_function.js?v={{Msg "seo" "version"}}'></script>
+    <script src='{{Msg "seo" "cdn"}}/common-module/vipsubscribe/js/vip-free-introduce-template.js?v={{Msg "seo" "version"}}'></script>
+    <script src='{{Msg "seo" "cdn"}}/vipsubscribe/js/vip_introduce.js?v={{Msg "seo" "version"}}'></script>
     <script>
         {{$ss1:=(Ad "app-banner-data-info" -1 .Host (cookie "SESSIONID"))}}
         var headerImageList={{$ss1}}