Merge branch 'dev/v1.0.56_wmh' of jianyu/web into feature/v1.0.56

apps/mobile/package.json

@@ -36,6 +36,7 @@
   },
   "devDependencies": {
     "@jonny1994/postcss-px-to-viewport": "^1.1.0",
+    "@unocss/transformer-variant-group": "^0.58.5",
     "@nabla/vite-plugin-eslint": "^2.0.2",
     "@rushstack/eslint-patch": "^1.1.0",
     "@sentry/vite-plugin": "^2.21.1",

apps/mobile/src/router/modules/common.js

@@ -31,5 +31,15 @@ export default [
       header: true,
       title: '区域'
     }
+  },
+  //  
+  {
+    path: '/vipsubscribeRights',
+    name: 'vipsubscribeRights',
+    component: () => import('@/views/common/vipsubscribeRights.vue'),
+    meta: {
+      header: true,
+      title: '会员服务列表'
+    }
   }
 ]

apps/mobile/src/store/modules/createOrder.js

@@ -71,7 +71,7 @@ const productNameMap = {
   118: '剑鱼文库会员',
   203: '市场分析定制报告下载包',
   201: '企业中标分析报告下载包',
-  202: '业主采购分析报告下载包',
+  202: '业主采购分析报告下载包'
 }
 
 const Hooks = {
@@ -512,11 +512,12 @@ export default {
       { index, id, extend }
     ) {
       // 请求前-展示默认产品规格选择、活动等信息
-      await dispatch('setProductSpecInfo', {
-        index,
-        id,
-        extend
-      })
+      
+      // await dispatch('setProductSpecInfo', {
+      //   index,
+      //   id,
+      //   extend
+      // })
       // 合并一些请求参数并请求
       await dispatch(
         'getProductOffers',
@@ -626,7 +627,7 @@ export default {
       )
     },
     // 根据商品ID、规格、优惠等参数获取商品订单金额信息
-    async getProductOrderAmount({ commit, getters }, payload) {
+    async getProductOrderAmount({ state, commit, getters }, payload) {
       // 合并一些请求参数
       const params = Object.assign({}, getters.productExtend, payload)
       // 设置加载状态
@@ -646,6 +647,15 @@ export default {
           activity: false,
           amount: false
         })
+        // 获得当前价格后更新商品规格信息
+        let productobj = JSON.parse(JSON.stringify(getters.productSpecInfo))
+        productobj.discountAmount = data?.discountAmount || 0
+        productobj.discountPrice = data?.discountPrice || 0
+        productobj.originalPrice = data?.originalPrice || 0
+        commit(
+          'updateProductSpecInfo',
+          formatProductSpecInfo(productobj, getters.productChoiceOffers)
+        )
       } else {
         if (msg) {
           // 移动端有msg弹窗。由于toast是单例的，msg弹窗会覆盖loading。
@@ -772,14 +782,14 @@ export default {
     },
     // 获取当前商品选中的优惠信息
     productChoiceOffers(state, getters) {
-      return (
-        getters.productAvailableOffersList.find(
-          (offers) => offers?.lotteryId === state.offers.id
-        ) || {
-          activityId: -1,
-          lotteryId: -1
-        }
-      )
+      let choosed = getters.productAvailableOffersList.find(
+        (offers) => offers?.lotteryId === state.offers.id
+      ) || {
+        activityId: -1,
+        lotteryId: -1
+      }
+
+      return choosed
     },
     // 获取商品不可用优惠信息列表
     productUnavailableOffersList(_, getters) {

apps/mobile/src/utils/callFn/index.js

@@ -267,6 +267,7 @@ export function getAppOrWxPageLink(page) {
  */
 export function openAppOrWxPage(page, config = {}) {
   const link = getAppOrWxPageLink(page)
+  console.log(link)
   openLinkOfOther(link, config)
 }
 

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

@@ -0,0 +1,1633 @@
+<template>
+  <div class="vipsubscribeRights">
+    <div class="header">
+      <!-- <Ad :ad="getAdID" :showCloseIcon="false" :showTag="false"></Ad> -->
+      <img src="@/assets/image/vip-subscribe/serve/head-img.png" alt="" />
+      <div class="scrollbox">
+        <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 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" @click="call_Phone('400-108-6670')">
+        <div class="phone-btn">
+          <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 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 { openAppOrWxPage } from '@/utils/'
+import { LINKS } from '@/data'
+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() {
+      return (this.$envs.inWX ? 'jy' : 'jyapp') + '-wxcontent-bottom'
+    }
+  },
+  watch: {},
+  created() {
+    this.getUserAccountInfoAjax()
+  },
+  methods: {
+    openAppOrWxPage,
+    callPhone,
+    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) {
+      if (item.title === '超级订阅') {
+        if (this.viperbtnText === '立即开通') {
+          this.$router.push({
+            path: '/order/create/svip',
+            query: { type: 'buy' }
+          })
+        } else if (this.viperbtnText === '立即续费') {
+          this.$router.push({
+            path: '/order/create/svip',
+            query: { 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() {
+      // 留资
+      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() {
+      this.openAppOrWxPage(LINKS.客服)
+    },
+    call_Phone(tel) {
+      this.callPhone(tel)
+    },
+    itemclick(index) {
+      this.setswipeTo(index)
+    },
+    cardscroll(val) {
+      this.tab = val
+    },
+    setswipeTo(val) {
+      this.$refs.card_.swipeTo(val)
+    }
+  },
+  data() {
+    return {
+      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: '招标/采购进度监控(项目进度监控)',
+              two: '10个',
+              three: '10个'
+            },
+            {
+              one: '业主监控',
+              two: '-',
+              three: '10个'
+            },
+            {
+              one: '企业情报监控',
+              two: '10个（不含企业工商变动监控）',
+              three: '10个（不含企业工商变动监控）'
+            },
+            {
+              one: '业主人脉信息(采购单位通讯录)',
+              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: '企业分析（企业画像-中标分析）',
+              two: '-',
+              three: '在线查看：每购买1个省，每月可查看50个，上限800个'
+            },
+            {
+              one: '业主分析（采购单位画像-采购分析）',
+              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: '招投标课程（中标必听课）',
+              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: '招标/采购进度监控(项目进度监控)',
+              two: '10个',
+              three: '100个'
+            },
+            {
+              one: '业主监控',
+              two: '10个',
+              three: '100个'
+            },
+            {
+              one: '企业情报监控',
+              two: '10个（不含企业工商变动监控）',
+              three: '100个'
+            },
+            {
+              one: '潜在项目预测',
+              two: '-',
+              three: 'icon-yellow'
+            },
+            {
+              one: '企业人脉信息(企业通讯录)',
+              two: '-',
+              three: 'icon-yellow'
+            },
+            {
+              one: '业主人脉信息(采购单位通讯录)',
+              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: '企业分析（企业画像-中标分析）',
+              two: '在线查看：每购买1个省，每月可查看50个，上限800个',
+              three_slot:
+                '<div><p class="flex-center"><span>在线查看：</span><span class="icon-yellow"></span></p><span>报告下载：1份/年<span></div>'
+            },
+            {
+              one: '业主分析（采购单位画像-采购分析）',
+              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: '招投标课程（中标必听课）',
+              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: '招标/采购进度监控(项目进度监控)',
+              two: '100个',
+              three: '500个'
+            },
+            {
+              one: '业主监控',
+              two: '100个',
+              three: '500个'
+            },
+            {
+              one: '企业情报监控',
+              two: '100个',
+              three: '500个'
+            },
+            {
+              one: '潜在项目预测',
+              two: 'icon-yellow',
+              three: 'icon-yellow'
+            },
+            {
+              one: '企业人脉信息(企业通讯录)',
+              two: 'icon-yellow',
+              three: 'icon-yellow'
+            },
+            {
+              one: '业主人脉信息(采购单位通讯录)',
+              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: '企业分析（企业画像-中标分析）',
+              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_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: '招投标课程（中标必听课）',
+              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: '-',
+              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;
+
+      ::v-deep {
+        .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 8px;
+            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 6px 0px #017e9533;
+        }
+
+        .yellow-item {
+          background: linear-gradient(
+            360deg,
+            #ffffff 0%,
+            #fffaf2 51.55%,
+            #ffecd0 100%
+          );
+          box-shadow: 2px 4px 6px 0px #84500033;
+        }
+
+        .yellowb-item {
+          background: linear-gradient(
+            360deg,
+            #ffffff 0%,
+            #fff5ee 57.07%,
+            #ffdec6 100%
+          );
+          box-shadow: 2px 4px 6px 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;
+
+      .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;
+        margin-left: 36px;
+
+        .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;
+        margin-left: 36px;
+      }
+    }
+
+    .bottomModules img {
+      width: 100%;
+      display: block;
+    }
+
+    .m-content:last-child {
+      border-radius: 0 0 8px 8px;
+      overflow: hidden;
+    }
+
+    .gray {
+      background-color: #fafafb !important;
+    }
+  }
+}
+</style>

apps/mobile/src/views/create-order/components/vipsubscribe/ProductionCard.vue

@@ -2,11 +2,13 @@
   <div class="production-card vipsubscribe">
     <section class="module-area-count-selector" v-show="moduleShow.selectArea">
       <!-- 购买 -->
-      <JCell
-        class="buy-area-count-section"
-        title="购买区域"
-        v-if="buyType === 'buy'"
-      >
+      <JCell class="buy-area-count-section" v-if="buyType === 'buy'">
+        <template #title>
+          <span class="buy-title">购买区域</span>
+          <span class="buy-desc"
+            >支付成功后，可点击“立即订阅”前往设置订阅区域</span
+          >
+        </template>
         <template #label>
           <van-radio-group
             v-model="selectedInfo.radio"
@@ -124,6 +126,8 @@
     ></JCell>
     <BuyTip
       v-model="popup.tip"
+      :descShow="popup.descShow"
+      @descClick="buyAreapack"
       @onConfirm="onTipConfirm"
       @onCancel="onTipCancel"
     />
@@ -149,7 +153,7 @@
 import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
 import { Tag, Popup, RadioGroup, Radio } from 'vant'
 import SpecList from '@/components/create-order/SpecList'
-import BuyTip from '@/views/order/components/areapack/BuyTip'
+import BuyTip from '@/views/order/components/vipsubscribe/BuyTip'
 import { JCell, JStepper } from '@/ui'
 import { mixinHeader } from '@/utils/mixins/header'
 import { pushHistoryState } from '@/utils/mixins/pushState'
@@ -220,7 +224,8 @@ export default {
         vipUpdate: false
       },
       popup: {
-        tip: false
+        tip: false,
+        descShow: false
       }
     }
   },
@@ -258,8 +263,11 @@ export default {
           effectTimeAddType = 4
           value = '1年'
         }
-        const perDayPrice = this.calcSpecPerDayPrice(spec, cycleType)
-
+        const perDayPrice = this.calcSpecPerDayPrice(
+          spec,
+          cycleType,
+          spec?._format?.tag
+        )
         return {
           id: spec.productId,
           productionId: spec.productId,
@@ -907,6 +915,7 @@ export default {
           // 调用 mixin 中的 pushState
           // 没有买过省份订阅包的用户，购买超级订阅返回时候需要弹窗
           this.pushHistoryState()
+          this.popup.descShow = true
         }
       }
       return redirect
@@ -922,8 +931,19 @@ export default {
         confirmButtonText: '我知道了'
       })
     },
-    calcSpecPerDayPrice(spec, cycleType) {
+    calcSpecPerDayPrice(spec, cycleType, tag) {
       // 只根据当前省份下原价计算单价
+      let zsTime = 0
+      if(tag){
+        if(tag.includes('天')){
+          zsTime =  Number(tag.replace('天','').replace('赠',''))
+
+        }else if(tag.includes('月')){
+          zsTime =  Number(tag.replace('月','').replace('赠','')) * 30
+        }else if(tag.includes('年')){
+          zsTime =  Number(tag.replace('年','').replace('赠','')) * 365
+        }
+      }
       const price =
         spec.originalPrice > spec.discountPrice
           ? spec.discountPrice
@@ -934,19 +954,19 @@ export default {
         // 1个月
         case 1:
         case '月': {
-          perDayPrice = (fen2Yuan(price) / 30).toFixed(2)
+          perDayPrice = (fen2Yuan(price) / (30 + zsTime)).toFixed(2)
           break
         }
         // 1个季度
         case 2:
         case '季': {
-          perDayPrice = (fen2Yuan(price) / (30 * 3)).toFixed(2)
+          perDayPrice = (fen2Yuan(price) / ((30 * 3) + zsTime)).toFixed(2)
           break
         }
         // 1年
         case 3:
         case '年': {
-          perDayPrice = (fen2Yuan(price) / 365).toFixed(2)
+          perDayPrice = (fen2Yuan(price) / (365 + zsTime)).toFixed(2)
           break
         }
       }
@@ -955,6 +975,9 @@ export default {
     },
     onTipConfirm() {
       this.popupTipShow(false)
+    },
+    buyAreapack() {
+      this.popupTipShow(false)
       this.$router.push('/common/order/create/areapack')
     },
     onTipCancel() {
@@ -983,6 +1006,18 @@ export default {
     }
   }
 }
+.buy-title {
+  font-size: 16px;
+  color: #171826;
+}
+.buy-desc {
+  font-size: 12px;
+  color: #9b9ca3;
+  margin-left: 8px;
+}
+.buy-area-count-section {
+  padding: 0 5px 0 16px;
+}
 .validate-date {
   ::v-deep {
     .j-row-cell-content {

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

@@ -0,0 +1,157 @@
+<template>
+  <van-popup
+    :value="value"
+    class="vip-back-tip-wrapper"
+    get-container="body"
+    position="center"
+    @click-overlay="onClose"
+    @closeable="onClose"
+  >
+    <div class="popupBox">
+      <div class="header">
+        真的要放弃<span class="large">27</span>项超值权益了吗？
+      </div>
+      <div class="content">
+        <div class="text-item" v-for="item in textlist" :key="item">
+          <div class="text-ic"></div>
+          <div class="text-desc" v-html="item"></div>
+        </div>
+        <div class="desc-pack" @click="descClick">
+          如只需增加订阅省份1项特权，可前往<span class="heightlight"
+            >购买“省份订阅包”</span
+          >，低至19.9元 >
+        </div>
+      </div>
+      <div class="footer">
+        <div class="left-btn" @click="onCancel">暂时离开</div>
+        <div class="right-btn" @click="onConfirm">成为会员，获取商机</div>
+      </div>
+    </div>
+  </van-popup>
+</template>
+<script>
+import { Popup, Icon } from 'vant'
+export default {
+  name: 'vipBackTip',
+  components: {
+    [Icon.name]: Icon,
+    [Popup.name]: Popup
+  },
+  model: {
+    prop: 'value',
+    event: 'close'
+  },
+  props: {
+    value: Boolean,
+    descShow: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      textlist: [
+        '全国商机<span style="color:#B1700E ">实时推送</span>',
+        '获取采购单位<span style="color:#B1700E ">联系人</span>电话',
+        '实时监控所有<span style="color:#B1700E ">潜在商机</span>',
+        '帮你提升中标率<span style="color:#B1700E ">中标率</span>'
+      ]
+    }
+  },
+  methods: {
+    descClick() {
+      this.$emit('descClick')
+    },
+    onCancel() {
+      this.onClose()
+      this.$emit('onCancel')
+    },
+    onConfirm() {
+      this.$emit('onConfirm')
+    },
+    onClose() {
+      this.$emit('close', false)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.vip-back-tip-wrapper {
+  background-color: transparent;
+
+  .popupBox {
+    width: 303px;
+    background-image: url('@/assets/image/vip-subscribe/popup-bg.png');
+    background-size: cover;
+    background-repeat: no-repeat;
+    border-radius: 12px;
+    .header {
+      height: 64px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #9f6001;
+      font-size: 18px;
+      .large {
+        font-size: 22px;
+      }
+    }
+    .content {
+      padding: 24px 19px 16px 19px;
+      background-color: #fff;
+      border-radius: 12px 12px 0 0;
+      .text-item {
+        display: flex;
+        align-items: center;
+        margin-bottom: 16px;
+        .text-ic {
+          width: 16px;
+          height: 18px;
+          background-image: url('@/assets/image/vip-subscribe/box-yellow.png');
+          background-size: 100% 100%;
+          margin-right: 16px;
+        }
+        .text-desc {
+          font-size: 15px;
+          line-height: 22px;
+          color: #171826;
+        }
+        .cr-yellow {
+          color: #b1700e;
+        }
+      }
+      .desc-pack {
+        font-size: 13px;
+        line-height: 22px;
+        color: #9b9ca3;
+        text-align: center;
+      }
+    }
+    .footer {
+      display: flex;
+      background-color: #fff;
+      border-radius: 0 0 12px 12px;
+      box-sizing: border-box;
+      .left-btn {
+        padding: 10px 14px;
+        border-right: 0.5px solid #0000001a;
+        border-top: 0.5px solid #0000001a;
+        font-size: 18px;
+        line-height: 26px;
+        color: #171826;
+      }
+      .right-btn {
+        border-top: 0.5px solid #0000001a;
+        padding: 10px 19px;
+        font-size: 18px;
+        line-height: 26px;
+        color: #b1700e;
+      }
+    }
+  }
+  .heightlight {
+    color: #2abed1;
+  }
+}
+</style>

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

@@ -2,9 +2,12 @@
   <div class="vip-rights">
     <div class="buy-tip">
       <div class="buy-tip-header">购买须知</div>
-      <div class="buy-tip-text">剑鱼平台产品与服务属于虚拟数字产品，鉴于服务的特殊性，一旦开通权益不支持退款，请确认无误后进行支付。</div>
+      <div class="buy-tip-text">
+        剑鱼平台产品与服务属于虚拟数字产品，鉴于服务的特殊性，一旦开通权益不支持退款，请确认无误后进行支付。
+      </div>
     </div>
     <img src="@/assets/image/vip-subscribe/introduce.png" alt="" />
+    <div class="allViewrights" @click="goViewrights">查看全部权益</div>
   </div>
 </template>
 <script>
@@ -14,31 +17,54 @@ export default {
   data: () => ({}),
   beforeCreate() {},
   created() {},
-  methods: {}
+  methods: {
+    goViewrights(){
+      this.$router.push('/common/vipsubscribeRights')
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
 .vip-rights {
-  padding: 0;
+  padding: 0 !important;
+  background: linear-gradient(113.06deg, #3e3e52 0%, #2f2f3d 100%);
+  padding-bottom: 1px;
+
   img {
     width: 100%;
   }
-  .buy-tip{
+
+  .buy-tip {
     margin-bottom: 12px;
     padding: 12px 16px;
     background: #fff;
-    &-header{
+
+    &-header {
       margin-bottom: 4px;
       font-size: 16px;
       line-height: 24px;
       color: #171826;
     }
-    &-text{
+
+    &-text {
       font-size: 12px;
-      color: #5F5E64;
+      color: #5f5e64;
       line-height: 18px;
     }
   }
+  .allViewrights {
+    width: 343px;
+    height: 46px;
+    background-color: #2abed1;
+    font-size: 18px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #f7f9fa;
+    border-radius: 8px;
+    margin: auto;
+    margin-bottom: 25px;
+  }
 }
 </style>