feat: 移动端超前项目遮罩

apps/mobile/src/views/article/components/FreeUserAdvancedMask.vue

@@ -0,0 +1,96 @@
+<template>
+  <section class="free-user-advanced-mask mask-container bg-white">
+    <MaskCard
+      :desc="maskConf.desc"
+      :exampleImage="maskConf.exampleImage"
+      :footerButtonText="maskConf.buttonText"
+      @onFooterBtnClick="onFooterBtnClick"
+    >
+      <template #header>
+        <div class="header flex flex-justify-center flex-align-center">
+          <div class="title">{{ maskConf.title }}</div>
+        </div>
+      </template>
+    </MaskCard>
+  </section>
+</template>
+<script>
+import { Icon } from 'vant'
+import { LINKS } from '@/data'
+import { openAppOrWxPage } from '@/utils/'
+import MaskCard from '@/views/article/ui/MaskCard.vue'
+
+export default {
+  name: 'FreeUserAdvancedMask',
+  components: {
+    MaskCard,
+    [Icon.name]: Icon
+  },
+  props: {
+    type: {
+      type: String,
+      default: 'nijian',
+      validator(value) {
+        return ['nijian', 'caigouyixiang'].includes(value)
+      }
+    }
+  },
+  data() {
+    return {
+      map: {
+        nijian: {
+          title: '超前项目抢先知，中标更容易',
+          desc: '提前3-12个月获取审批中的新项目，超前项目抢先介入，商机提前掌控。',
+          buttonText: '点击进入',
+          source: 'article_proposed_project',
+          exampleImage: 'mask/example/nj-detail-example.png'
+        },
+        caigouyixiang: {
+          title: '项目提前介入，中标更轻松',
+          desc: '提前1-3个月获取项目信息，<br />及早介入准备更充分',
+          buttonText: '点击进入',
+          source: 'article_purchase_intention',
+          exampleImage: 'mask/example/cg-detail-example.png'
+        }
+      }
+    }
+  },
+  computed: {
+    maskConf() {
+      return this.map[this.type] || this.map.nijian
+    }
+  },
+  methods: {
+    onFooterBtnClick() {
+      this.leaveInfo()
+    },
+    leaveInfo() {
+      openAppOrWxPage(LINKS.留资, {
+        query: {
+          source: this.maskConf.source
+        }
+      })
+    },
+    concatKf() {
+      openAppOrWxPage(LINKS.客服)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.header {
+  width: 100%;
+  font-size: 16px;
+}
+::v-deep {
+  .mask-content-desc-text {
+    text-align: center;
+  }
+  .mask-content-example-image {
+    img {
+      transform: scale(1.12);
+    }
+  }
+}
+</style>

apps/mobile/src/views/article/components/FreeUserBiddingMask.vue

@@ -0,0 +1,251 @@
+<template>
+  <section class="free-user-bidding-mask mask-container bg-white">
+    <div class="mask-zz">
+      <div class="compare-dialog-head">
+        <div id="compare-dialog-title">
+          您尚未完善信息，今日查看公告权限用完啦
+        </div>
+      </div>
+      <div class="compare-dialog-body">
+        <div class="table-box">
+          <ul class="table-box-row row-1">
+            <li class="tab-box-column column-1">免费注册用户</li>
+            <li class="tab-box-column column-2">
+              <span class="bold">免费注册用户 </span>
+              <span>（完善信息）</span>
+            </li>
+            <li class="tab-box-column column-3 jump-bigmember-page">
+              <span class="bold">大会员</span>
+              <span class="c-3-text" @click="openMemberLanding">
+                大数据赋能企业 <br />数字化营销&gt;
+              </span>
+            </li>
+          </ul>
+          <p class="split-row">标讯权益</p>
+          <p class="common-row">
+            可查看招标预告、招标公告、招标结果、招标信用信息
+          </p>
+          <p class="split-row">超前项目权益</p>
+          <ul class="table-box-row row-2">
+            <li class="tab-box-column bd-r column-1">
+              <van-icon name="cross" />
+            </li>
+            <li class="tab-box-column bd-r column-2">
+              <van-icon name="cross" />
+            </li>
+            <li class="tab-box-column bd-r column-3 gold-color">
+              <p>采购意向</p>
+              <p>拟建项目</p>
+              <p>AI智能预测</p>
+            </li>
+          </ul>
+          <p class="split-row">每日查看数量</p>
+          <ul class="table-box-row row-3">
+            <li class="tab-box-column bd-r column-1">3条</li>
+            <li class="tab-box-column bd-r column-2 blue-color">不限</li>
+            <li class="tab-box-column bd-r column-3 gold-color">不限</li>
+          </ul>
+          <ul class="table-box-row row-4 row-last">
+            <li class="tab-box-column bd-r column-1">&nbsp;</li>
+            <li class="tab-box-column bd-r column-2">
+              <span class="free-btn-reword" @click="leaveInfo">
+                完善个人信息
+              </span>
+            </li>
+            <li class="tab-box-column bd-r column-3 gold-color">
+              <span class="free-btn-experience">免费体验</span>
+              <span class="jump-customer-service" @click="concatKf">
+                咨询客服
+              </span>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+<script>
+import { Icon } from 'vant'
+import { LINKS } from '@/data'
+import { openAppOrWxPage } from '@/utils/'
+
+export default {
+  name: 'FreeUserBiddingMask',
+  components: {
+    [Icon.name]: Icon
+  },
+  methods: {
+    openMemberLanding() {
+      openAppOrWxPage(LINKS.大会员落地页面)
+    },
+    leaveInfo() {
+      openAppOrWxPage(LINKS.留资, {
+        query: {
+          source: `jyarticle_see3_plus_${this.$env.platform}`
+        }
+      })
+    },
+    concatKf() {
+      openAppOrWxPage(LINKS.客服)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mask-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 520px;
+  background-image: url(@/assets/image/mask/bg/article_content_mask_bg.png);
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+.mask-zz {
+  margin: 0 auto;
+  width: 335px;
+  box-shadow: 0px 0px 28px 1px rgb(0 0 0 / 8%);
+  border-radius: 8px 8px 8px 8px;
+  background-color: white;
+  overflow: hidden;
+}
+.compare-dialog-head {
+  height: 56px;
+  color: #171826;
+  text-align: center;
+  font-size: 15px;
+  line-height: 56px;
+  background: url(@/assets/image/mask/bg/pc_zzt2.png) no-repeat center center;
+  background-size: contain;
+}
+.compare-dialog-body {
+  padding: 14px 16px;
+}
+.table-box {
+  flex-shrink: 0;
+  border: 1px solid #e5e5e5;
+  border-radius: 6px;
+  .bold {
+    font-weight: bold;
+  }
+  .gold-color {
+    color: #b1700e;
+  }
+  .blue-color {
+    color: $main;
+  }
+  .bd-r {
+    border-right: 1px solid #e5e5e5;
+  }
+  .table-box-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 12px;
+    border-bottom: 1px solid #e5e5e5;
+    color: #171826;
+  }
+  .tab-box-column {
+    flex: 1;
+    height: 100%;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: 13px;
+    line-height: 16px;
+    &.column-1 {
+      flex: none;
+      width: 28%;
+    }
+  }
+  .split-row {
+    display: flex;
+    padding: 1px 16px;
+    height: 26px;
+    justify-content: center;
+    align-items: center;
+    color: $main;
+    font-size: 12px;
+    line-height: 18px;
+    border-bottom: 1px solid #e5e5f5;
+    background: #ecfcfe;
+  }
+  .common-row {
+    padding: 2px 12px;
+    color: #5f5e64;
+    font-size: 13px;
+    line-height: 20px;
+    border-bottom: 1px solid #e5e5e5;
+  }
+  .row-1 {
+    height: 64px;
+    .column-1 {
+      background: #f5f6f7;
+    }
+    .column-2 {
+      background: $main;
+      color: #fff;
+    }
+    .column-3 {
+      padding: 0;
+      background: linear-gradient(270deg, #f4deb1 0%, #fff3e0 100%);
+      color: #593913;
+    }
+    .bold {
+      font-size: 13px;
+    }
+    .c-3-text {
+      text-decoration-line: underline;
+      text-underline: #593913;
+    }
+  }
+  .row-2 {
+    height: 76px;
+    .gold-color {
+      line-height: 20px;
+    }
+  }
+  .row-3 {
+    height: 40px;
+  }
+  .row-4 {
+    height: 72px;
+  }
+  .row-last {
+    border-bottom: 0;
+  }
+}
+.free-btn-reword {
+  display: inline-block;
+  border-radius: 4px;
+  background: $main;
+  height: 30px;
+  color: #fff;
+  text-align: center;
+  font-size: 13px;
+  padding: 5px 6px;
+  line-height: 20px;
+  margin-bottom: 4px;
+}
+.free-btn-experience {
+  border-radius: 4px;
+  border: 1px solid #e7c28a;
+  height: 30px;
+  background: linear-gradient(270deg, #fef0d7 0%, #fff9f0 100%);
+  cursor: pointer;
+  color: #b1700e;
+  text-align: center;
+  font-size: 13px;
+  line-height: 20px;
+  padding: 5px 19px;
+  margin-bottom: 4px;
+}
+.jump-customer-service {
+  text-decoration-line: underline;
+}
+</style>

apps/mobile/src/views/article/ui/MaskCard.vue

@@ -8,21 +8,25 @@
         <div
           class="mask-content-header flex flex-(items-center justify-between)"
         >
-          <h5 class="mask-content-title">{{ title }}</h5>
-          <span class="mask-content-actions">
-            <span class="mask-content-action" @click="onHeaderActionClick">
-              <span>查看服务介绍</span>
-              <van-icon name="arrow" />
+          <slot name="header">
+            <h5 class="mask-content-title">{{ title }}</h5>
+            <span class="mask-content-actions">
+              <span class="mask-content-action" @click="onHeaderActionClick">
+                <span>查看服务介绍</span>
+                <van-icon name="arrow" />
+              </span>
             </span>
-          </span>
+          </slot>
         </div>
         <div class="mask-content-main">
-          <div class="mask-content-example-image">
-            <img :src="exampleImageUrl" />
-          </div>
+          <slot name="main">
+            <div class="mask-content-example-image">
+              <img :src="exampleImageUrl" />
+            </div>
+          </slot>
         </div>
         <div class="mask-content-footer">
-          <p class="mask-content-desc-text">{{ desc }}</p>
+          <p class="mask-content-desc-text" v-html="desc"></p>
           <div class="mask-content-footer-btn">
             <van-button
               type="primary"