提交

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/views/common/vipsubscribeRights.vue

@@ -0,0 +1,29 @@
+<template>
+  <div id="app">
+    <h1>{{ message }}</h1>
+    <button @click="changeMessage">Change Message</button>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      message: 'Hello Vue!'
+    };
+  },
+  methods: {
+    changeMessage() {
+      this.message = 'Message changed!';
+    }
+  }
+};
+</script>
+
+<style>
+#app {
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  text-align: center;
+  color: #2c3e50;
+}
+</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
       }
     }
   },
@@ -907,6 +912,7 @@ export default {
           // 调用 mixin 中的 pushState
           // 没有买过省份订阅包的用户，购买超级订阅返回时候需要弹窗
           this.pushHistoryState()
+          this.popup.descShow = true
         }
       }
       return redirect
@@ -955,6 +961,9 @@ export default {
     },
     onTipConfirm() {
       this.popupTipShow(false)
+    },
+    buyAreapack() {
+      this.popupTipShow(false)
       this.$router.push('/common/order/create/areapack')
     },
     onTipCancel() {
@@ -983,6 +992,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>