Merge remote-tracking branch 'origin/feature/v1.0.29' into feature/v1.0.29

.vscode/settings.json

@@ -1,3 +1,4 @@
 {
-    "prettier.endOfLine": "lf"
+    "prettier.endOfLine": "lf",
+    "files.eol": "\n"
 }

apps/bigmember_pc/src/components/common/BigMemberEmpty.vue

@@ -4,10 +4,7 @@
     :class="classfuncType ? 'reportempty' : ''"
   >
     <div class="empty-content-position">
-      <el-image
-        v-if="imgShow"
-        :src="import('@/assets/images/bmempty.png')"
-      ></el-image>
+      <el-image v-if="imgShow" :src="getAssetsFile('bmempty.png')"></el-image>
       <div class="empty-main">
         <slot class="default">
           <slot name="tipText">{{ tip }}</slot>
@@ -20,6 +17,7 @@
 
 <script>
 import { Image } from 'element-ui'
+import { getAssetsFile } from '@/utils'
 export default {
   name: 'empty',
   components: {
@@ -56,6 +54,9 @@ export default {
     ) {
       this.imgShow = false
     }
+  },
+  methods: {
+    getAssetsFile
   }
 }
 </script>

apps/bigmember_pc/src/components/forecast/ForeCast.vue

@@ -522,6 +522,7 @@ import TimeSelector from '@/components/selector/TimeSelector.vue'
 import { moneyUnit, dateFormatter } from '@/utils'
 import { tryCallHooks } from '@jianyu/easy-inject-qiankun'
 import { getPowerUrl } from '@/utils/power/redirect'
+import { getAssetsFile } from '@/utils'
 import {
   setFollowEnt,
   setCancelEnt,
@@ -578,7 +579,7 @@ export default {
       isFollow: '1',
       potenCode: 0,
       tips: '', // 空状态提示
-      tipimages: 'jy-cry.png',
+      tipimages: 'empty/jy-cry.png',
       dialog: {
         group: false
       },
@@ -1072,14 +1073,15 @@ export default {
         this.myDataObj.initTotal === 0
       ) {
         this.tips = '暂无企业情报信息，前往企业搜索关注企业'
-        this.tipimages = import('@/assets/images/empty/jy-back.png')
+        this.tipimages = getAssetsFile('empty/jy-back.png')
+        console.info(this.tipimages)
       } else if (
         this.myDataObj &&
         this.myDataObj.list.length === 0 &&
         this.myDataObj.initTotal !== 0
       ) {
         this.tips = '暂无匹配数据'
-        this.tipimages = import('@/assets/images/empty/jy-back.png')
+        this.tipimages = getAssetsFile('empty/jy-back.png')
       }
     },
     changeTime(data) {

apps/bigmember_pc/src/components/medical/FollowList.vue

@@ -122,7 +122,7 @@ import {
 import { mixinVisited } from '@/utils/mixins/visited'
 import Empty from '@/components/common/Empty.vue'
 import GroupCard from '@/components/selector/GroupSelector.vue'
-import { dateFormatter, openSelfLink } from '@/utils'
+import { dateFormatter, openSelfLink, getAssetsFile } from '@/utils'
 import {
   setFollowEnt,
   setCancelEnt,
@@ -165,7 +165,7 @@ export default {
       },
       isFollow: '1',
       tips: '', // 空状态提示
-      tipimages: import('@/assets/images/empty/jy-cry.png'),
+      tipimages: getAssetsFile('jy-cry.png'),
       dialog: {
         group: false
       },
@@ -370,14 +370,14 @@ export default {
         this.myDataObj.initTotal === 0
       ) {
         this.tips = '暂未认领任何经销商'
-        this.tipimages = import('@/assets/images/empty/jy-back.png')
+        this.tipimages = getAssetsFile('empty/jy-back.png')
       } else if (
         this.myDataObj &&
         this.myDataObj.list.length === 0 &&
         this.myDataObj.initTotal !== 0
       ) {
         this.tips = '暂无匹配数据'
-        this.tipimages = import('@/assets/images/empty/jy-back.png')
+        this.tipimages = getAssetsFile('empty/jy-back.png')
       }
     }
   }

apps/bigmember_pc/src/components/push-list/PotentialList.vue

@@ -462,7 +462,7 @@ export default {
     padding: 0;
   }
   .el-dialog__body {
-    padding: 0;
+    padding: 0!important;
   }
   .empty-container {
     margin-top: 60px;

apps/bigmember_pc/src/views/Home.vue

@@ -46,6 +46,7 @@ import forLayOut from '@/components/forecast/ForLayout.vue'
 import PushList from '@/components/push-list/PushList.vue'
 import ProjectList from '@/components/push-list/ProjectList.vue'
 import FloatSide from '@/components/home/FloatSide.vue'
+import { getAssetsFile } from '@/utils'
 import {
   getReportIndex,
   getReportStartTime,
@@ -65,7 +66,7 @@ export default {
   },
   data() {
     return {
-      topImg: import('@/assets/images/bg_1.png'),
+      topImg: getAssetsFile('bg_1.png'),
       navItem: [
         {
           text: '中标企业预测',

apps/bigmember_pc/src/views/PotentialList.vue

@@ -133,6 +133,7 @@ import BuyerclassSelector from '@/components/selector/BuyerclassSelector.vue'
 import BusinessScopeSelector from '@/components/selector/BusinessScopeSelector.vue'
 import forLayOut from '@/components/forecast/ForLayout.vue'
 import TabHeader from '@/components/common/TabHeader.vue'
+import { getAssetsFile } from '@/utils'
 import {
   setFollowEnt,
   setRemoveEnt,
@@ -158,13 +159,13 @@ export default {
     return {
       topInfo: {
         c: {
-          img: import('@/assets/images/item_3.png'),
+          img: getAssetsFile('item_3.png'),
           icon: 'top-c',
           text: '潜在客户挖掘',
           desc: '潜在客户'
         },
         r: {
-          img: import('@/assets/images/item_1.png'),
+          img: getAssetsFile('item_1.png'),
           icon: 'top-r',
           text: '潜在竞争对手 / 合作伙伴挖掘'
         }

apps/bigmember_pc/src/views/ProjectProgress.vue

@@ -89,6 +89,7 @@ import forLayOut from '@/components/forecast/ForLayout.vue'
 import { attentionProject, areaProject, getBidIsJoin } from '@/api/modules'
 import { mapState, mapGetters } from 'vuex'
 import { provinceListMapExp } from '@/assets/js/selector.js'
+import { getAssetsFile } from '@/utils'
 export default {
   name: 'ProjectProgress',
   components: {
@@ -101,13 +102,13 @@ export default {
     return {
       topInfo: {
         c: {
-          img: import('@/assets/images/item_11.png'),
+          img: getAssetsFile('item_11.png'),
           icon: 'project-c',
           text: '项目进度监控',
           desc: ''
         },
         r: {
-          img: import('@/assets/images/item_1.png'),
+          img: getAssetsFile('item_1.png'),
           icon: 'top-r',
           text: '潜在竞争对手 / 合作伙伴挖掘'
         }

apps/bigmember_pc/src/views/analysisReport/MarketAnalysisResult.vue

@@ -66,7 +66,7 @@
               <!-- 市场概况 -->
               <div
                 class="sub-section market-overview"
-                v-if="sections.market.overview.length && isConf10"
+                v-if="sections.market.overview.length && isConf26"
               >
                 <div class="sub-section-header">
                   <div class="sub-section-title">市场概况</div>
@@ -76,7 +76,7 @@
                 </div>
               </div>
               <MaskCard
-                v-if="!isConf10"
+                v-if="!isConf26"
                 @click="
                   openBigPage(vipUpgradeMap[Object.keys(vipUpgradeMap)[0]])
                 "
@@ -87,10 +87,10 @@
               <div
                 class="sub-section project-scatter"
                 v-if="
-                  (isConf10 && !sections.loaded.top3) ||
+                  (isConf26 && !sections.loaded.top3) ||
                   (sections.projectScatter.dataAlready &&
                     sections.loaded.top3 &&
-                    isConf10)
+                    isConf26)
                 "
                 v-loading="!sections.loaded.top3"
               >
@@ -106,7 +106,7 @@
                 </div>
               </div>
               <MaskCard
-                v-if="!isConf10"
+                v-if="!isConf26"
                 @click="
                   openBigPage(vipUpgradeMap[Object.keys(vipUpgradeMap)[1]])
                 "
@@ -158,11 +158,11 @@
               <div
                 class="sub-section area-scatter"
                 v-if="
-                  (!sections.loaded.top3 && notOneCityFilter && isConf10) ||
+                  (!sections.loaded.top3 && notOneCityFilter && isConf26) ||
                   (sections.areaScatter.dataAlready &&
                     sections.loaded.top3 &&
                     notOneCityFilter &&
-                    isConf10)
+                    isConf26)
                 "
                 v-loading="!sections.loaded.top3"
               >
@@ -182,10 +182,10 @@
                 <div
                   class="ar-table"
                   v-if="
-                    (!sections.loaded.top3 && isConf10) ||
+                    (!sections.loaded.top3 && isConf26) ||
                     (sections.areaScatter.projectCountTop3 &&
                       sections.loaded.top3 &&
-                      isConf10)
+                      isConf26)
                   "
                   v-loading="!sections.loaded.top3"
                 >
@@ -202,10 +202,10 @@
                 <div
                   class="ar-table"
                   v-if="
-                    (!sections.loaded.top3 && isConf10) ||
+                    (!sections.loaded.top3 && isConf26) ||
                     (sections.areaScatter.projectAmountTop3 &&
                       sections.loaded.top3 &&
-                      isConf10)
+                      isConf26)
                   "
                   v-loading="!sections.loaded.top3"
                 >
@@ -221,7 +221,7 @@
                 </div>
               </div>
               <MaskCard
-                v-if="!isConf10"
+                v-if="!isConf26"
                 @click="
                   openBigPage(vipUpgradeMap[Object.keys(vipUpgradeMap)[2]])
                 "
@@ -303,10 +303,10 @@
               <div
                 class="sub-section market-refine"
                 v-if="
-                  (isConf10 && !sections.loaded.segment) ||
+                  (isConf26 && !sections.loaded.segment) ||
                   (sections.market.refine.dataAlready &&
                     sections.loaded.segment &&
-                    isConf10)
+                    isConf26)
                 "
                 v-loading="!sections.loaded.segment"
               >
@@ -324,7 +324,7 @@
                   />
                 </div>
               </div>
-              <div class="top3-table-list pd-lr20" v-if="isConf10">
+              <div class="top3-table-list pd-lr20" v-if="isConf26">
                 <div
                   class="ar-table"
                   v-if="
@@ -365,7 +365,7 @@
                 </div>
               </div>
               <MaskCard
-                v-if="!isConf10"
+                v-if="!isConf26"
                 @click="
                   openBigPage(vipUpgradeMap[Object.keys(vipUpgradeMap)[3]])
                 "
@@ -406,7 +406,7 @@
               <div class="top3-table-list pd-lr20">
                 <div
                   class="ar-table buyerclass-count-top3"
-                  v-if="sections.buyerclass.projectCountTop3 && isConf10"
+                  v-if="sections.buyerclass.projectCountTop3 && isConf26"
                 >
                   <p class="ar-table-title">
                     项目数量TOP30采购单位及其重点合作中标单位
@@ -421,7 +421,7 @@
                   />
                 </div>
                 <MaskCard
-                  v-if="!isConf10"
+                  v-if="!isConf26"
                   @click="
                     openBigPage(vipUpgradeMap[Object.keys(vipUpgradeMap)[4]])
                   "
@@ -430,7 +430,7 @@
                 ></MaskCard>
                 <div
                   class="ar-table buyerclass-amount-top3"
-                  v-if="sections.buyerclass.projectAmountTop3 && isConf10"
+                  v-if="sections.buyerclass.projectAmountTop3 && isConf26"
                 >
                   <p class="ar-table-title">
                     采购金额TOP30采购单位及其重点合作中标单位
@@ -445,7 +445,7 @@
                   />
                 </div>
                 <MaskCard
-                  v-if="!isConf10"
+                  v-if="!isConf26"
                   @click="
                     openBigPage(vipUpgradeMap[Object.keys(vipUpgradeMap)[5]])
                   "
@@ -482,7 +482,7 @@
                 </div>
               </div>
               <div class="top3-table-list pd-lr20">
-                <div class="ar-table winner-count-top3" v-if="isConf10">
+                <div class="ar-table winner-count-top3" v-if="isConf26">
                   <p class="ar-table-title">
                     项目数量TOP30中标单位及其重点合作采购单位
                   </p>
@@ -496,14 +496,14 @@
                   />
                 </div>
                 <MaskCard
-                  v-if="!isConf10"
+                  v-if="!isConf26"
                   @click="
                     openBigPage(vipUpgradeMap[Object.keys(vipUpgradeMap)[6]])
                   "
                   k="项目数量TOP30中标单位及其重点合作采购单位"
                   :item="vipUpgradeMap[Object.keys(vipUpgradeMap)[6]]"
                 ></MaskCard>
-                <div class="ar-table winner-amount-top3" v-if="isConf10">
+                <div class="ar-table winner-amount-top3" v-if="isConf26">
                   <p class="ar-table-title">
                     中标金额TOP30中标单位及其重点合作采购单位
                   </p>
@@ -517,7 +517,7 @@
                   />
                 </div>
                 <MaskCard
-                  v-if="!isConf10"
+                  v-if="!isConf26"
                   @click="
                     openBigPage(vipUpgradeMap[Object.keys(vipUpgradeMap)[7]])
                   "
@@ -904,14 +904,14 @@ export default {
     reportSelectedKeywords() {
       return this.projectDetailFilters.keywordsGroupList
     },
-    isConf10() {
-      return this.info.power.indexOf(10) !== -1
+    isConf26() {
+      return this.info.power.indexOf(26) !== -1
     },
     getVipUpgradeMap() {
       const tempMap = this.vipUpgradeMap
       Object.keys(tempMap).forEach((v) => {
         const tempTitle = '开通大会员'
-        const tempButton = !this.isConf10 ? '联系客服' : '免费体验'
+        const tempButton = !this.isConf26 ? '联系客服' : '免费体验'
         tempMap[v].title = tempTitle
         tempMap[v].button = tempButton
       })
@@ -931,19 +931,21 @@ export default {
     },
     buyerclassSectionShow() {
       const winnerState = this.sections.buyerclass
-      return (
-        winnerState.dataAlready &&
-        winnerState.projectCountTop3 &&
-        winnerState.projectAmountTop3
-      )
+      // return (
+      //   winnerState.dataAlready &&
+      //   winnerState.projectCountTop3 &&
+      //   winnerState.projectAmountTop3
+      // )
+      return winnerState.dataAlready && winnerState.chartData
     },
     winnerSectionShow() {
       const winnerState = this.sections.winner
-      return (
-        winnerState.dataAlready &&
-        winnerState.projectCountTop3 &&
-        winnerState.projectAmountTop3
-      )
+      // return (
+      //   winnerState.dataAlready &&
+      //   winnerState.projectCountTop3 &&
+      //   winnerState.projectAmountTop3
+      // )
+      return winnerState.dataAlready && winnerState.chartData
     }
   },
   created() {
@@ -1020,7 +1022,7 @@ export default {
         } catch (e) {
           console.log('未初始化百度统计')
         }
-        if (this.isConf10) {
+        if (this.isConf26) {
           setTimeout(this.scrollToTab, 100)
           return true
         } else {

apps/bigmember_pc/src/views/customer/components/BidInfoActive.vue

@@ -32,7 +32,7 @@
                 style="
                   width: 12px;
                   height: 12px;
-                  ling-height: 32px;
+                  line-height: 32px;
                   cursor: pointer;
                 "
                 src="@/assets/images/icon/cancel.png"
@@ -125,7 +125,7 @@
                 position: absolute;
                 width: 12px;
                 height: 12px;
-                ling-height: 32px;
+                line-height: 32px;
                 cursor: pointer;
                 top: 10px;
                 right: 10px;
@@ -171,7 +171,7 @@
                 position: absolute;
                 width: 12px;
                 height: 12px;
-                ling-height: 32px;
+                line-height: 32px;
                 cursor: pointer;
                 top: 10px;
                 right: 10px;

apps/bigmember_pc/src/views/my-property/coupon.vue

@@ -71,6 +71,7 @@
 import { getInfoByUser } from '@/api/modules'
 import { Tabs, TabPane, Pagination, Image } from 'element-ui'
 import couponItem from './components/coupon-item'
+import { getAssetsFile } from '@/utils'
 export default {
   name: 'coupon',
   components: {
@@ -82,7 +83,7 @@ export default {
   },
   data: function () {
     return {
-      img: import('@/assets/images/pc_12.png'),
+      img: getAssetsFile('pc_12.png'),
       tabActiveName: 'notUsed',
       tabList: [
         {

apps/bigmember_pc/src/views/portrayal/EntPortrayal.vue

@@ -484,11 +484,20 @@ export default {
     },
     showConf12() {
       // 企业情报历史记录
-      return this.info.power.indexOf(12) !== -1
+      const { power } = this.info
+      const hasPower =
+        power.includes(12) ||
+        power.includes(20) ||
+        power.includes(23) ||
+        power.includes(4)
+      return hasPower
     },
     // 项目动态
     showConf13() {
-      return this.info.power.indexOf(13) !== -1
+      const { power } = this.info
+      const hasPower =
+        power.includes(13) || power.includes(21) || power.includes(4)
+      return hasPower
     },
     showContact() {
       // 历史项目联系方式

apps/bigmember_pc/src/views/portrayal/EntSearchPortrayal.vue

@@ -732,7 +732,13 @@ export default {
     },
     showEntHistoryForm() {
       // 判断大会员企业情报权限
-      return this.info.memberStatus > 0 && this.info.power.indexOf(12) !== -1
+      const { power, memberStatus } = this.info
+      const hasPower =
+        power.includes(12) ||
+        power.includes(20) ||
+        power.includes(23) ||
+        power.includes(4)
+      return memberStatus > 0 && hasPower
     },
     showContact() {
       // 历史项目联系方式
@@ -741,9 +747,12 @@ export default {
     showProActive() {
       var freeHave = this.info.isFree && this.info.freeEntPort > 0
       var freeTrail = this.hasTrailPower
+      const { power, memberStatus } = this.info
+      const hasPower =
+        power.includes(13) || power.includes(21) || power.includes(4)
       return (
         this.powerInfo.vip > 1 ||
-        (this.info.memberStatus > 0 && this.info.power.indexOf(13) !== -1) ||
+        (memberStatus > 0 && hasPower) ||
         freeHave ||
         freeTrail
       )

apps/bigmember_pc/src/views/portrayal/UnitPortrayal.vue

@@ -857,7 +857,8 @@ export default {
       const usage = this.usageInfo
       const isFreeAuth = info.isFree && info.freeBuyerPort > 0
       const isVipAuth = info.vipStatus > 0 && info.viper && usage.balance > 0
-      const isMember = info.power.indexOf(5) !== -1
+      const hasRoot = info.power.includes(5)
+      const isMember = hasRoot
       // 超级订阅用户是否访问过该画像
       const vipTrial =
         info.vipStatus > 0 && info.viper && usage.balance === 0 && usage.visited

apps/bigmember_pc/src/views/portrayal/components/BidInfoActive.vue

@@ -30,7 +30,7 @@
                 style="
                   width: 12px;
                   height: 12px;
-                  ling-height: 32px;
+                  line-height: 32px;
                   cursor: pointer;
                 "
                 src="@/assets/images/icon/cancel.png"
@@ -167,7 +167,7 @@
                   position: absolute;
                   width: 12px;
                   height: 12px;
-                  ling-height: 32px;
+                  line-height: 32px;
                   cursor: pointer;
                   top: 10px;
                   right: 10px;
@@ -214,7 +214,7 @@
                   position: absolute;
                   width: 12px;
                   height: 12px;
-                  ling-height: 32px;
+                  line-height: 32px;
                   cursor: pointer;
                   top: 10px;
                   right: 10px;
@@ -265,7 +265,7 @@
                 position: absolute;
                 width: 12px;
                 height: 12px;
-                ling-height: 32px;
+                line-height: 32px;
                 cursor: pointer;
                 top: 10px;
                 right: 10px;
@@ -312,7 +312,7 @@
                 position: absolute;
                 width: 12px;
                 height: 12px;
-                ling-height: 32px;
+                line-height: 32px;
                 cursor: pointer;
                 top: 10px;
                 right: 10px;

apps/bigmember_pc/src/views/portrayal/components/DynamicList.vue

@@ -949,6 +949,8 @@ export default {
         return false
       }
       const $ = this.$querySelector.bind(this)
+      const info = this.userInfo
+      const hasRoot = info.power.includes(24) || info.power.includes(25)
       //免费用户仅展示前三条
       //付费用户展示前4页 20条表格数据
       if (this.isTable) {
@@ -971,7 +973,7 @@ export default {
           return false
         }
       } else {
-        if (!this.config.isWinner) {
+        if (!this.config.isWinner && !hasRoot) {
           //采购单位无权限留资等逻辑
           if (!this.config.isMedical) {
             const isFree =

apps/bigmember_pc/src/views/portrayal/components/EntProActive.vue

@@ -18,7 +18,7 @@
                 style="
                   width: 12px;
                   height: 12px;
-                  ling-height: 32px;
+                  line-height: 32px;
                   cursor: pointer;
                 "
                 src="@/assets/images/icon/cancel.png"

apps/bigmember_pc/src/views/portrayal/components/UnitChart.vue

@@ -1001,10 +1001,12 @@ export default {
     async getChartData(newval) {
       this.allBool = []
       const info = this.$store.state.user.info
-      const isMember = info.memberStatus > 0 && info.power.indexOf(5) > -1
-      const res = isMember
-        ? await getUnitChart(newval)
-        : await getVipUnitChart(newval)
+      const hasRoot = info.power.includes(24) || info.power.includes(25)
+      const isMember = info.memberStatus > 0 && info.power.includes(5)
+      const res =
+        isMember || hasRoot
+          ? await getUnitChart(newval)
+          : await getVipUnitChart(newval)
       if (res.error_code === 0) {
         if (res.data && Object.keys(res.data).length > 0) {
           this.showChart = true

apps/jy-pc/src/components/empty/Empty.vue

@@ -12,9 +12,10 @@
 
 <script>
 import { Image } from 'element-ui'
+import { getAssetsFile } from '@/utils'
 
 function getImageUrl(filePath) {
-  return new URL(`./assets/${name}`, import.meta.url).href
+  return new URL(`./assets/${filePath}`, import.meta.url).href
 }
 
 export default {
@@ -31,7 +32,7 @@ export default {
       type: String,
       default() {
         // return require('@/assets/images/empty.png')
-        return getImageUrl('image/public/jy-back.png')
+        return getAssetsFile('empty/jy-back.png')
       }
     }
   }

apps/mobile/src/utils/utils.js

@@ -837,3 +837,8 @@ export function fixH5BackRefresh() {
     iosBackRefresh()
   }
 }
+
+// vite动态获取图片
+export function getAssetsFile(url) {
+  return new URL(`../assets/image/${url}`, import.meta.url).href
+}

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

@@ -1,35 +1,78 @@
 <template>
-  <ContentModuleCard class="mask-card bg-white">
-    <div class="header-title" slot="title">
-      <AppIcon name="arrow" />
-      <span class="header-title-text"></span>
+  <section class="mask-card-container bg-white">
+    <div
+      class="mask-card-bg flex flex-(items-center justify-center)"
+      :style="bgImageStyle"
+    >
+      <div class="mask-card-content">
+        <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">
+              <span>查看服务介绍</span>
+              <van-icon name="arrow" />
+            </span>
+          </span>
+        </div>
+        <div class="mask-content-main">
+          <div class="mask-content-example-image">
+            <img :src="exampleImageUrl" />
+          </div>
+        </div>
+        <div class="mask-content-footer">
+          <p class="mask-content-desc-text">{{ desc }}</p>
+          <div class="mask-content-footer-btn">
+            <van-button type="primary" class="mask-footer-btn" size="small">
+              {{ footerButtonText }}
+            </van-button>
+          </div>
+        </div>
+      </div>
     </div>
-    <div class="banner-center">
-      <div class="banner-center-title">数据导出</div>
-      <p class="banner-center-subtitle">
-        最近5年招标采购数据均可导出下载，如需更多年份和行业字段您可申请数据定制
-      </p>
-    </div>
-    <div class="banner-right">
-      <AppIcon name="arrow" />
-    </div>
-  </ContentModuleCard>
+  </section>
 </template>
 <script>
-import ContentModuleCard from '@/views/article/ui/ContentModuleCard.vue'
-import { AppIcon } from '@/ui'
+import { Icon, Button } from 'vant'
+import { getAssetsFile } from '@/utils'
+
 export default {
   name: 'MaskCard',
   components: {
-    ContentModuleCard,
-    AppIcon
+    [Icon.name]: Icon,
+    [Button.name]: Button
   },
   props: {
-    dataList: {
-      type: Array,
-      default() {
-        return []
+    title: {
+      type: String,
+      default: '大会员专家版权益'
+    },
+    bgImage: {
+      type: String,
+      default: 'mask/bg/customer-list-mask-bg@2x.png'
+    },
+    exampleImage: {
+      type: String,
+      default: 'mask/example/customer-list-example-img@2x.png'
+    },
+    desc: {
+      type: String,
+      default: '根据区域、业务范围、客户类型帮助企业快速找到目标地区潜在业务需求客户及联系方式。'
+    },
+    footerButtonText: {
+      type: String,
+      default: '免费体验'
+    }
+  },
+  computed: {
+    bgImageStyle() {
+      return {
+        backgroundImage: `url(${getAssetsFile(this.bgImage)})`
       }
+    },
+    exampleImageUrl() {
+      return `${getAssetsFile(this.exampleImage)}`
     }
   },
   data() {
@@ -40,4 +83,62 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.mask-card-bg {
+  padding: 45px 0;
+  background-size: 100% auto;
+}
+.mask-card-content {
+  padding: 16px;
+  width: 303px;
+  min-height: 371px;
+  font-size: 13px;
+  line-height: 20px;
+  background: transparent
+    url(@/assets/image/mask/bg/mask-content-wrapper-bg.png) no-repeat;
+  background-size: auto 100%;
+  background-position: top center;
+  border-radius: 8px;
+}
+.mask-content-header {
+  font-size: 13px;
+  line-height: 20px;
+  color: $gold_light;
+  h5 {
+    font-weight: 400;
+  }
+}
+
+.mask-content-example-image {
+  position: relative;
+  margin: 12px 0;
+  border-radius: 4px;
+  overflow: hidden;
+
+  &::after {
+    content: '示例';
+    position: absolute;
+    top: 0;
+    right: 0;
+    border-top-right-radius: 4px;
+    padding: 1px 8px;
+    font-size: 13px;
+    line-height: 20px;
+    color: $main;
+    background-color: $color_main_background;
+  }
+
+  img {
+    display: block;
+    width: 100%;
+  }
+}
+.mask-content-footer-btn {
+  margin-top: 12px;
+}
+.mask-footer-btn {
+  width: 100%;
+  height: 36px;
+  border-radius: 6px;
+}
+</style>

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

@@ -2,7 +2,7 @@
   <section class="service-intro-card bg-white">
     <header
       v-if="showHeader"
-      class="service-intro-header bg-white flex flex-(item-center justify-between)"
+      class="service-intro-header bg-white flex flex-(items-center justify-between)"
     >
       <h5 class="service-intro-title">
         <slot name="title">{{ title }}</slot>

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

@@ -0,0 +1,43 @@
+<template>
+  <div class="service-intro-mask-card bg-white">
+    <div class="intro-mask-container">
+      <ServiceIntroCard class="content-card" showHeader />
+    </div>
+  </div>
+</template>
+<script>
+import ServiceIntroCard from '@/views/article/ui/ServiceIntroCard.vue'
+export default {
+  name: 'ServiceIntroMaskCard',
+  components: {
+    ServiceIntroCard
+  },
+  props: {
+    dataList: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {}
+  },
+  created() {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.intro-mask-container {
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  height: 282px;
+  background: #fff url(@/assets/image/mask/bg/service-intro-bg@2x.png) no-repeat;
+  background-size: contain;
+}
+.content-card {
+  width: 100%;
+}
+</style>