开发ing

.env

@@ -1,6 +1,7 @@
 # just a flag
 ENV = 'production'
 VUE_APP_NAME = 'development'
-VUE_PAY_CENTER = 'https://pay.mall.com'
+# 付款中心URL
+VUE_APP_PAY_CENTER_URL = 'https://spread-test.matchexpo.cn'
 # base api
 VUE_APP_BASE_API = ''

src/api/system.js

@@ -95,6 +95,9 @@ export function getVerList (){
 export function getPackList (key) {
   return request({
     url: '/api/trade/packet-list',
-    method: 'get'
+    method: 'get',
+    params: {
+      all_packet_key: key
+    }
   })
 }

src/layout/index.vue

@@ -41,7 +41,25 @@
             <router-link :to="item.path||'/'">{{ item.meta.title }}</router-link>
           </el-breadcrumb-item>
         </el-breadcrumb>
-        <div class="packet" @click="$bus.$emit('showPacket',true)">{{packet.ver_name}}</div>
+        <div class="packet">
+          <div class="item" @click="$bus.$emit('showPacket',true)" v-if="user.permission.includes('expo_invitation_management')">
+            <span class="el-icon-star-off"></span>
+            邀请函
+          </div>
+          <div class="item lock" @click="$bus.$emit('showPacket',true)" v-else>
+            <span class="el-icon-lock"></span>
+            邀请函
+          </div>
+
+          <div class="item" @click="$bus.$emit('showPacket',true)" v-if="user.permission.includes('expo_management')">
+            <span class="el-icon-star-off"></span>
+            预登记
+          </div>
+          <div class="item lock" @click="$bus.$emit('showPacket',true)" v-else>
+            <span class="el-icon-lock"></span>
+            预登记
+          </div>
+        </div>
         <div class="user-info">
           <div class="avatar">
             <img :src="this.user.avatar?this.user.avatar:'/static/image/avatar.webp'" alt="">
@@ -202,13 +220,24 @@ export default {
         border-bottom: 1px solid #E5E7EB;
         height: 80px;
         .packet{
-          cursor: pointer;
           margin-left: auto;
-          font-size: 16px;
-          background-color: #409EFF;
-          padding: 4px 12px;
-          color: white;
-          border-radius: 8px;
+          display: flex;
+          gap: 6px;
+          .item{
+            border: 1px solid #C4A793;
+            cursor: pointer;
+            font-size: 14px;
+            background-image: linear-gradient(60deg,#EAD5C3,#C7A088);
+            padding: 4px 10px;
+            font-weight: bold;
+            color: #543317;
+            border-radius: 8px;
+            &.lock{
+              color: #3E4B60;
+              border: 1px solid #D5DAE0;
+              background-image: linear-gradient(60deg,#EFF2F6,#E1E6EE);
+            }
+          }
         }
         .user-info{
           position: relative;

src/views/components/packetList.vue

@@ -1,24 +1,137 @@
 <script lang="ts">
 import Vue from 'vue'
-
+import { getVerList, getPackList } from '@/api/system'
 export default Vue.extend({
   name: 'PacketList',
   data() {
     return {
       cycle: 'month',
       showDetail: false,
-      type: 'expoReg'
+      type: 'expoReg',
+      verList: [],
+      packetList: [],
+      payCenterUrl: '',
+      renderInfo: {
+        STARTER: {
+          price: 0,
+          url: '',
+          button: '立即订购'
+        },
+        PRO: {
+          price: 0,
+          url: '',
+          button: '立即订购'
+        }
+      }
     }
   },
+  computed: {
+    user() { return this.$store.state.user.user }
+  },
+  mounted() {
+    this.init()
+  },
   methods: {
     close() {
       this.$emit('close')
     },
+    init() {
+      this.payCenterUrl = process.env.VUE_APP_PAY_CENTER_URL
+      getVerList().then(res => {
+        this.verList = res.data
+        return getPackList('')
+      }).then(res2 => {
+        this.packetList = res2.data
+        this.computeInfo()
+      })
+    },
+    computeInfo() {
+      const basePacket = this.user.app_list[0].ver_key.replace(/_STARTER|_PRO|_MONTH|_YEAR/gi, '')
+      const FullBasePacket = this.user.app_list[0].ver_key.replace(/_MONTH|_YEAR/gi, '')
+      console.log(basePacket)
+      if (this.type === 'expoReg') {
+        if (basePacket === 'EXPOREG_INVITATION') {
+          if (this.cycle === 'month') {
+            this.renderInfo.STARTER.price = this.getPacketByPKey('EXPOREG_STARTER_MONTH').price
+            this.renderInfo.STARTER.button = FullBasePacket !== 'EXPOREG_STARTER' ? '升级权益' : '续费'
+            this.renderInfo.STARTER.url = this.payCenterUrl + '/packet/info?app_code=EXPOREG&key=&packet_key=EXPOREG_STARTER_MONTH&type=2'
+            this.renderInfo.PRO.price = this.getPacketByPKey('EXPOREG_PRO_MONTH').price
+            this.renderInfo.PRO.button = FullBasePacket !== 'EXPOREG_PRO' ? '升级权益' : '续费'
+            this.renderInfo.PRO.url = this.payCenterUrl + '/packet/info?app_code=EXPOREG&key=&packet_key=EXPOREG_PRO_MONTH&type=2'
+          } else {
+            this.renderInfo.STARTER.price = this.getPacketByPKey('EXPOREG_STARTER_YEAR').price
+            this.renderInfo.STARTER.button = FullBasePacket !== 'EXPOREG_STARTER' ? '升级权益' : '续费'
+            this.renderInfo.STARTER.url = this.payCenterUrl + '/packet/info?app_code=EXPOREG&key=&packet_key=EXPOREG_STARTER_YEAR&type=2'
+            this.renderInfo.PRO.price = this.getPacketByPKey('EXPOREG_PRO_YEAR').price
+            this.renderInfo.PRO.button = FullBasePacket !== 'EXPOREG_PRO' ? '升级权益' : '续费'
+            this.renderInfo.PRO.url = this.payCenterUrl + '/packet/info?app_code=EXPOREG&key=&packet_key=EXPOREG_PRO_YEAR&type=2'
+          }
+        } else {
+          if (this.cycle === 'month') {
+            this.renderInfo.STARTER.price = this.getPacktByKey('EXPOREG_STARTER_MONTH').price
+            this.renderInfo.STARTER.button = FullBasePacket !== 'EXPOREG_STARTER' ? '立即订购' : '续费'
+            this.renderInfo.STARTER.url = this.payCenterUrl + '/packet/info?app_code=EXPOREG&key=EXPOREG_STARTER_MONTH&packet_key=&type=1'
+            this.renderInfo.PRO.price = this.getPacktByKey('EXPOREG_PRO_MONTH').price
+            this.renderInfo.PRO.button = FullBasePacket !== 'EXPOREG_PRO' ? '立即订购' : '续费'
+            this.renderInfo.PRO.url = this.payCenterUrl + '/packet/info?app_code=EXPOREG&key=EXPOREG_PRO_MONTH&packet_key=&type=1'
+          } else {
+            this.renderInfo.STARTER.price = this.getPacktByKey('EXPOREG_STARTER_YEAR').price
+            this.renderInfo.STARTER.button = FullBasePacket !== 'EXPOREG_STARTER' ? '立即订购' : '续费'
+            this.renderInfo.STARTER.url = this.payCenterUrl + '/packet/info?app_code=EXPOREG&key=EXPOREG_STARTER_YEAR&packet_key=&type=1'
+            this.renderInfo.PRO.price = this.getPacktByKey('EXPOREG_PRO_YEAR').price
+            this.renderInfo.PRO.button = FullBasePacket !== 'EXPOREG_PRO' ? '立即订购' : '续费'
+            this.renderInfo.PRO.url = this.payCenterUrl + '/packet/info?app_code=EXPOREG&key=EXPOREG_PRO_YEAR&packet_key=&type=1'
+          }
+        }
+      } else {
+        if(basePacket === 'EXPOREG_INVITATION') {
+          if (this.cycle === 'month') {
+            this.renderInfo.STARTER.price = this.getPacketByPKey('EXPOREG_INVITATION_STARTER_MONTH').price
+            this.renderInfo.STARTER.button = FullBasePacket !== 'EXPOREG_INVITATION_STARTER' ? '立即订购' : '续费'
+            this.renderInfo.STARTER.url = this.payCenterUrl + '/packet/info?app_code=EXPOREG&key=&packet_key=EXPOREG_INVITATION_STARTER_MONTH&type=2'
+            this.renderInfo.PRO.price = this.getPacketByPKey('EXPOREG_INVITATION_PRO_MONTH').price
+            this.renderInfo.PRO.button = FullBasePacket !== 'EXPOREG_INVITATION_PRO' ? '立即订购' : '续费'
+            this.renderInfo.PRO.url = this.payCenterUrl + '/packet/info?app_code=EXPOREG&key=&packet_key=EXPOREG_INVITATION_PRO_MONTH&type=2'
+          } else {
+            this.renderInfo.STARTER.price = this.getPacketByPKey('EXPOREG_INVITATION_STARTER_YEAR').price
+            this.renderInfo.STARTER.button = FullBasePacket !== 'EXPOREG_INVITATION_STARTER' ? '立即订购' : '续费'
+            this.renderInfo.STARTER.url = this.payCenterUrl + '/packet/info?app_code=EXPOREG&key=&packet_key=EXPOREG_INVITATION_STARTER_YEAR&type=2'
+            this.renderInfo.PRO.price = this.getPacketByPKey('EXPOREG_INVITATION_PRO_YEAR').price
+            this.renderInfo.PRO.button = FullBasePacket !== 'EXPOREG_INVITATION_PRO' ? '立即订购' : '续费'
+            this.renderInfo.PRO.url = this.payCenterUrl + '/packet/info?app_code=EXPOREG&key=&packet_key=EXPOREG_INVITATION_PRO_YEAR&type=2'
+          }
+        } else {
+          if (this.cycle === 'month') {
+            this.renderInfo.STARTER.price = this.getPacktByKey('EXPOREG_INVITATION_STARTER_MONTH').price
+            this.renderInfo.STARTER.button = FullBasePacket !== 'EXPOREG_INVITATION_STARTER' ? '立即订购' : '续费'
+            this.renderInfo.STARTER.url = this.payCenterUrl + '/packet/info?app_code=EXPOREG&key=EXPOREG_INVITATION_STARTER_MONTH&packet_key=&type=1'
+            this.renderInfo.PRO.price = this.getPacktByKey('EXPOREG_INVITATION_PRO_MONTH').price
+            this.renderInfo.PRO.button = FullBasePacket !== 'EXPOREG_INVITATION_PRO' ? '立即订购' : '续费'
+            this.renderInfo.PRO.url = this.payCenterUrl + '/packet/info?app_code=EXPOREG&key=EXPOREG_INVITATION_PRO_MONTH&packet_key=&type=1'
+          } else {
+            this.renderInfo.STARTER.price = this.getPacktByKey('EXPOREG_INVITATION_STARTER_YEAR').price
+            this.renderInfo.STARTER.button = FullBasePacket !== 'EXPOREG_INVITATION_STARTER' ? '立即订购' : '续费'
+            this.renderInfo.STARTER.url = this.payCenterUrl + '/packet/info?app_code=EXPOREG&key=EXPOREG_INVITATION_STARTER_YEAR&packet_key=&type=1'
+            this.renderInfo.PRO.price = this.getPacktByKey('EXPOREG_INVITATION_PRO_YEAR').price
+            this.renderInfo.PRO.button = FullBasePacket !== 'EXPOREG_INVITATION_PRO' ? '立即订购' : '续费'
+            this.renderInfo.PRO.url = this.payCenterUrl + '/packet/info?app_code=EXPOREG&key=EXPOREG_INVITATION_PRO_YEAR&packet_key=&type=1'
+          }
+        }
+      }
+    },
+    getPacktByKey(key) {
+      return this.verList.find(item => item.ver_key === key)
+    },
+    getPacketByPKey(Key) {
+      return this.packetList.find(item => item.packet_key === Key)
+    },
     changeCycle(cycle) {
       this.cycle = cycle
+      this.computeInfo()
     },
     changeType(type) {
       this.type = type
+      this.computeInfo()
     },
     changeDetail() {
       this.showDetail = !this.showDetail
@@ -35,11 +148,13 @@ export default Vue.extend({
         <div :class="['cycle-item',cycle==='month'?'active':'']" @click="changeCycle('month')">按月支付</div>
         <div :class="['cycle-item',cycle==='year'?'active':'']" @click="changeCycle('year')">按年支付</div>
       </div>
-      <div class="hr"></div>
-      <div class="cycle-tab">
-        <div :class="['cycle-item',type==='expoReg'?'active':'']" @click="changeType('expoReg')">展会预登记</div>
-        <div :class="['cycle-item',type==='invitation'?'active':'']" @click="changeType('invitation')">签证邀请函</div>
-      </div>
+      <template>
+        <div class="hr" />
+        <div class="cycle-tab">
+          <div :class="['cycle-item',type==='expoReg'?'active':'']" @click="changeType('expoReg')">展会预登记</div>
+          <div :class="['cycle-item',type==='invitation'?'active':'']" @click="changeType('invitation')">签证邀请函</div>
+        </div>
+      </template>
     </div>
     <div class="packet-outer">
       <div :class="['packet',showDetail?'':'hide']">
@@ -62,15 +177,15 @@ export default Vue.extend({
           <div class="detail" />
           <div class="price-cont">
             <div class="price">
-              $<span>39</span>/月
+              ¥<span>{{ renderInfo.STARTER.price }}</span>/{{ cycle==='month'?'月':'年' }}
             </div>
-            <div class="button">立即订购</div>
+            <a :href="renderInfo.STARTER.url" target="_blank" class="button">{{ renderInfo.STARTER.button }}</a>
           </div>
           <div class="price-cont">
             <div class="price">
-              $<span>59</span>/月
+              ¥<span>{{ renderInfo.PRO.price }}</span>/{{ cycle==='month'?'月':'年' }}
             </div>
-            <div class="button">立即订购</div>
+            <a :href="renderInfo.PRO.url" target="_blank" class="button">{{ renderInfo.PRO.button }}</a>
           </div>
           <div class="price-cont">
             <div class="price">联系我们获取定制价格</div>
@@ -78,7 +193,7 @@ export default Vue.extend({
           </div>
         </div>
         <div class="list-func list">
-          <div class="detail" >
+          <div class="detail">
             <div class="title">功能介绍</div>
           </div>
           <div class="func-cont">
@@ -92,7 +207,7 @@ export default Vue.extend({
           </div>
         </div>
         <div class="list-func list">
-          <div class="detail" >
+          <div class="detail">
             <div class="text">快速构建高转化率、移动响应式落地页，提升潜在客户、注册量和销售额，无需开发人员。</div>
           </div>
           <div class="func-cont">
@@ -106,7 +221,7 @@ export default Vue.extend({
           </div>
         </div>
         <div class="list-func list">
-          <div class="detail" >
+          <div class="detail">
             <div class="text">您可以将美页易搭落地页发布到任何自定义域名或 URL，并与您现有的广告系列或 URL 结构无缝集成。</div>
           </div>
           <div class="func-cont">
@@ -120,7 +235,7 @@ export default Vue.extend({
           </div>
         </div>
         <div class="list-func list">
-          <div class="detail" >
+          <div class="detail">
             <div class="text">美页易搭不会限制您的增长——每个方案都包含无限流量和转化次数。每次访客完成您的目标（例如，在落地页、网站、弹出窗口或提醒栏上点击号召性用语或提交潜在客户表单）时，都会计为一次转化。</div>
           </div>
           <div class="func-cont">
@@ -134,7 +249,7 @@ export default Vue.extend({
           </div>
         </div>
         <div class="list-func list">
-          <div class="detail" >
+          <div class="detail">
             <div class="text">您可以将美页易搭落地页发布到任何自定义域名或 URL，并与您现有的广告系列或 URL 结构无缝集成。</div>
           </div>
           <div class="func-cont">
@@ -148,7 +263,7 @@ export default Vue.extend({
           </div>
         </div>
         <div class="list-func list">
-          <div class="detail" >
+          <div class="detail">
             <div class="text">您可以将美页易搭落地页发布到任何自定义域名或 URL，并与您现有的广告系列或 URL 结构无缝集成。</div>
           </div>
           <div class="func-cont">
@@ -162,7 +277,7 @@ export default Vue.extend({
           </div>
         </div>
         <div class="list-func list">
-          <div class="detail" >
+          <div class="detail">
             <div class="text">您可以将美页易搭落地页发布到任何自定义域名或 URL，并与您现有的广告系列或 URL 结构无缝集成。</div>
           </div>
           <div class="func-cont">
@@ -176,7 +291,7 @@ export default Vue.extend({
           </div>
         </div>
         <div class="list-func list">
-          <div class="detail" >
+          <div class="detail">
             <div class="text">您可以将美页易搭落地页发布到任何自定义域名或 URL，并与您现有的广告系列或 URL 结构无缝集成。</div>
           </div>
           <div class="func-cont">
@@ -190,7 +305,7 @@ export default Vue.extend({
           </div>
         </div>
         <div class="list-func list">
-          <div class="detail" >
+          <div class="detail">
             <div class="text">您可以将美页易搭落地页发布到任何自定义域名或 URL，并与您现有的广告系列或 URL 结构无缝集成。</div>
           </div>
           <div class="func-cont">
@@ -204,7 +319,7 @@ export default Vue.extend({
           </div>
         </div>
         <div class="list-func list">
-          <div class="detail" >
+          <div class="detail">
             <div class="text">您可以将美页易搭落地页发布到任何自定义域名或 URL，并与您现有的广告系列或 URL 结构无缝集成。</div>
           </div>
           <div class="func-cont">
@@ -218,7 +333,7 @@ export default Vue.extend({
           </div>
         </div>
         <div class="list-func list">
-          <div class="detail" >
+          <div class="detail">
             <div class="text">您可以将美页易搭落地页发布到任何自定义域名或 URL，并与您现有的广告系列或 URL 结构无缝集成。</div>
           </div>
           <div class="func-cont">
@@ -232,7 +347,7 @@ export default Vue.extend({
           </div>
         </div>
         <div class="list-func list">
-          <div class="detail" >
+          <div class="detail">
             <div class="text">识别您的匿名流量——他们是谁、他们来自哪里，以及他们如何与您的网站和落地页互动，这样您就可以了解哪些人访问了您的页面但尚未转化。使用 Audience Insights，您可以定制您的信息传递方式、检查广告定位，并更好地了解您的受众。</div>
           </div>
           <div class="func-cont">
@@ -246,14 +361,14 @@ export default Vue.extend({
           </div>
         </div>
         <div class="list-func list">
-          <div class="detail" >
+          <div class="detail">
             <div class="text">如果您是服务于多个客户的代理机构或顾问，美页易搭可让您轻松通过单个帐户管理多个品牌。您可以对广告系列进行分组，授予客户子帐户访问权限，并在帐户之间复制落地页、网站、弹窗和警报栏。</div>
           </div>
           <div class="func-cont">
-            <div class="text"></div>
+            <div class="text" />
           </div>
           <div class="func-cont">
-            <div class="text"></div>
+            <div class="text" />
           </div>
           <div class="func-cont">
             <div class="text">添加客户子账户</div>
@@ -262,7 +377,7 @@ export default Vue.extend({
       </div>
     </div>
     <div class="button-cont">
-      <div @click="changeDetail" class="button">{{showDetail?'显示更少':'显示更多'}}</div>
+      <div class="button" @click="changeDetail">{{ showDetail?'显示更少':'显示更多' }}</div>
     </div>
   </div>
 </template>
@@ -279,6 +394,7 @@ export default Vue.extend({
     display: grid;
     grid-template-rows: auto 1fr auto;
     .tab-list{
+      margin-top: 36px;
       gap: 24px;
       display: flex;
       align-items: center;
@@ -394,6 +510,8 @@ export default Vue.extend({
             border-left: 2px solid #E3E4E6;
             border-right: 2px solid #E3E4E6;
             .button{
+              color: black;
+              text-decoration: none;
               font-weight: bold;
               border-radius: 4px;
               border: 1px solid black;