feat: 免费用户关键词推荐模块修改

src/jfw/modules/app/src/web/staticres/jyapp/vipsubscribe/css/keyset-detail.css

@@ -58,6 +58,32 @@ input::-webkit-input-placeholder {
   }
 }
 
+@keyframes rcmdRotateloading {
+  0% {
+    transform: rotateY(180deg) rotateZ(0);
+  }
+
+  100% {
+    transform: rotateY(180deg) rotateZ(1turn);
+  }
+}
+
+/* vant-reset */
+.j-confirm-dialog {
+  border-radius: 8px;
+}
+.j-confirm-dialog .van-dialog__message {
+  font-size: .32rem;
+  color: #171826;
+  line-height: .48rem;
+  text-align: left;
+}
+.j-confirm-dialog .van-button {
+  font-size: .36rem;
+  color: #171826;
+  line-height: .52rem;
+}
+
 #easy-alert {
   display: none;
 }
@@ -254,13 +280,6 @@ input::-webkit-input-placeholder {
   background-color: #2cb7ca;
 }
 
-.j-button-group.single .j-button-cancel {
-  display: none;
-}
-.j-button-group.single button {
-  height: .92rem;
-}
-
 button[disabled] {
   opacity: 0.5;
 }
@@ -510,6 +529,18 @@ button[disabled] {
 .j-cells.key {
   margin-top: .36rem;
 }
+
+.tag {
+  font-size: .24rem;
+  line-height: .36rem;
+  color: #5F5E64;
+  background-color: #F5F6F7;
+  border-radius: .08rem;
+  white-space: nowrap;
+  word-break: break-all;
+  text-align: center;
+}
+
 .recommend .recommend-tags {
   position: relative;
   display: flex;
@@ -522,18 +553,57 @@ button[disabled] {
 .recommend-tags .tag {
   padding: .08rem .3rem;
   margin-right: .16rem;
-  font-size: .24rem;
-  line-height: .36rem;
-  color: #5F5E64;
-  background-color: #F5F6F7;
-  border-radius: .08rem;
-  white-space: nowrap;
-  word-break: break-all;
 }
 .recommend-tags .tag:last-of-type {
   margin-right: 0;
 }
 
+/* recommend-cards */
+.rec-cells .j-cell.rec-header {
+  flex-direction: row;
+}
+.rec-cells .rec-title {
+  font-size: .28rem;
+  color: #5f5e64;
+  line-height: .48rem;
+}
+.rec-cells .rec-change {
+  display: flex;
+  align-items: center;
+  color: #2abed1;
+}
+.rec-cells .rec-change:active {
+  opacity: 0.7;
+}
+.rec-cells .rec-change .text {
+  margin-left: .1rem;
+}
+.rec-cells .van-icon-replay {
+  font-size: .32rem;
+  transform: rotateY(180deg);
+}
+.rec-tags {
+  display: flex;
+  width: 100%;
+  flex-wrap: wrap;
+}
+.rec-tags .tag {
+  padding: .12rem .2rem;
+  margin: .08rem;
+  min-width: 30%;
+}
+
+.rec-change .van-icon-replay.active {
+  animation: rcmdRotateloading .5s linear infinite running;
+}
+
+.j-button-group.add .j-button-cancel {
+  flex: 1;
+}
+.j-button-group.add .j-button-confirm {
+  flex: 3;
+}
+
 /* picker */
 .key-picker .weui-picker {
   display: flex;

src/jfw/modules/app/src/web/staticres/jyapp/vipsubscribe/css/public_.css

@@ -3,6 +3,12 @@
   display: none;
 }
 
+html,
+body {
+  width: 100%;
+  height: 100%;
+}
+
 body {
   color: #171826;
   line-height: 1.6;
@@ -19,6 +25,10 @@ textarea {
   font-size: .24rem;
 }
 
+[v-cloak] {
+  display: none!important;
+}
+
 /*禁止长按复制 加给body*/
 .no-touch {
   -webkit-touch-callout: none;
@@ -101,7 +111,9 @@ textarea {
   font-size: 0.3rem;
 }
 
+.j-main,
 .j-body {
+  position: relative;
   flex: 1;
   overflow-y: scroll;
   overflow-x: hidden;

src/jfw/modules/app/src/web/staticres/jyapp/vipsubscribe/js/keyset-detail.js

@@ -323,7 +323,7 @@ var keySetDetail = new Vue({
     // 限制数组最大长度
     conf: {
       maxKeyLength: 10,
-      recommendTagsCount: 10
+      recommendTagsCount: 6
     },
     // 是编辑(查看详情)还是添加
     modeType: 'add',
@@ -335,8 +335,18 @@ var keySetDetail = new Vue({
     showAreaPicker: false,
     // 是否显示选择类型picker
     showInfoTypePicker: false,
-    // 新增时的关键词推荐
+    // 新增时的关键词推荐(关键词输入框下方的，只显示一行，超出不显示)
     recommendTags: [],
+    // 关键词刷新状态保存(类似前端分页)
+    recListState: {
+      loading: false, // 是否刷新中?
+      loaded: false, // 请求是否完成
+      pageNum: 1,
+      pageSize: 6,
+      total: 0, // 一共多少条数据
+      list: [],
+      listAll: [] // 后端返回的全部推荐关键词
+    },
     // 当前关键词索引(如果为add状态，索引会加一)
     currentIndex: 0,
     // 当前关键词展示详情
@@ -409,7 +419,25 @@ var keySetDetail = new Vue({
         desc: '包括合同公告、验收公告、违规处理等'
       },
     ],
-    infoTypeMapArr: []
+    infoTypeMapArr: [],
+    noSpaceDialog: {
+      // 触发提示的次数
+      count: 0
+    }
+  },
+  watch: {
+    // 禁止输入空格
+    'currentInfo.key': function (newVal, oldVal) {
+      var spaceReg = /\s+/g
+      var hasSpace = spaceReg.test(newVal)
+      if (hasSpace) {
+        this.noSpaceDialog.count++
+        if (this.noSpaceDialog.count <= 1) {
+          this.showSpaceDialog()
+        }
+        this.currentInfo.key = this.currentInfo.key.replace(spaceReg, '')
+      }
+    }
   },
   computed: {
     typeConf: function () {
@@ -481,6 +509,30 @@ var keySetDetail = new Vue({
     }, 100)
   },
   methods: {
+    showDialog: function (conf) {
+      var defaultConf = {
+        title: '提示',
+        message: 'message',
+        className: 'j-confirm-dialog',
+        showConfirmButton: true,
+        showCancelButton: true,
+        confirmButtonColor: '#2abed1'
+      }
+      if (conf) {
+        Object.assign(defaultConf, conf)
+      }
+      return this.$dialog.confirm(defaultConf)
+    },
+    showSpaceDialog: function () {
+      this.showDialog({
+        title: '',
+        message: '免费订阅关键词不可输入空格键，如需添加多个关键词，请前往购买超级订阅',
+        confirmButtonText: '立即购买'
+      }).then(function () {
+        this.toVipPage()
+      }.bind(this))
+      .catch(function () {})
+    },
     // 获取关键词数据
     getKeyList: function () {
       var _this = this
@@ -579,6 +631,10 @@ var keySetDetail = new Vue({
       var afterFilterArr = this.filterKeyRecommend(list)
       this.recommendTags = afterFilterArr.slice(0, this.conf.recommendTagsCount)
 
+      this.recListState.listAll = afterFilterArr
+      this.recListState.count = afterFilterArr.length
+      this.nextPageRec()
+
       // 超出隐藏判断
       this.$nextTick(function () {
         var recommendTagsDOM = _this.$refs.recommendTags
@@ -648,6 +704,33 @@ var keySetDetail = new Vue({
 
       return afterTile
     },
+    getRecListTags: function () {
+      var listAll = this.recListState.listAll
+      this.recListState.total = listAll.length
+
+      var startIndex = ((this.recListState.pageNum - 1) * this.recListState.pageSize)
+      var endIndex = (this.recListState.pageNum * this.recListState.pageSize)
+
+      return listAll.slice(startIndex, endIndex)
+    },
+    nextPageRec: function () {
+      if (this.recListState.loading) return
+      this.recListState.loading = true
+      this.recListState.list = this.getRecListTags()
+
+      setTimeout(function () {
+        this.recListState.loading = false
+      }.bind(this), 500)
+
+      // 最后一页，则重置页码
+      if (this.recListState.pageNum * this.recListState.pageSize >= this.recListState.total) {
+        this.recListState.pageNum = 1
+      } else {
+        this.recListState.pageNum++
+      }
+
+      return this.recListState.list
+    },
     clickTag: function (item) {
       this.currentInfo.key = item
       this.checkUpdate()
@@ -864,6 +947,9 @@ var keySetDetail = new Vue({
         }]
       })
     },
+    toVipPage: function () {
+      location.href = '/jyapp/vipsubscribe/introducePage'
+    },
     // 显示关键词输入提示
     showKeyWordRegErrorToast: function (type) {
       var conf = {

src/jfw/modules/app/src/web/templates/weixin/wxkeyset/filterset.html

@@ -7,6 +7,9 @@
     <link rel="stylesheet" href="{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/local/layout.css">
     <link rel="stylesheet" href="{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/local/weui.min.css">
     <link rel="stylesheet" href="{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/css/font.css?v={{Msg "seo" "version"}}">
+
+    <link rel="stylesheet" href="//cdn-common.jianyu360.com/cdn/lib/vant/2.12.24/lib/index.css" />
+    <link rel="stylesheet" href="//cdn-common.jianyu360.com/cdn/lib/vant/2.12.24/lib/icon/local.css" />
     <link rel="stylesheet" href="{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/vipsubscribe/css/keyset-detail.css?v={{Msg "seo" "mod_version"}}">
 
     <script src="https://cdn-common.jianyu360.com/cdn/lib/jquery/3.6.0/jquery.min.js"></script>
@@ -25,12 +28,26 @@
                 <div class="j-cell border-line-b">
                     <input type="text" class="content-key item-label" @input="onKeyInput" v-model="currentInfo.key" placeholder="请输入关键词">
                 </div>
-                <div class="j-cell recommend" v-if="recommendTags.length">
+                <div class="j-cell recommend" v-if="recommendTags.length" style="display: none;">
                     <div class="recommend-tags" ref="recommendTags">
                         <span class="tag" v-for="(item,index) in recommendTags" :key="index" v-text="item" @click="clickTag(item)">筛选</span>
                     </div>
                 </div>
             </div>
+            <div class="j-cells with-sub-info rec-cells" v-if="recListState.listAll.length">
+                <div class="j-cell rec-header">
+                    <div class="rec-title">相似订阅条件推荐</div>
+                    <div class="rec-change" @click="nextPageRec">
+                        <van-icon :class="recListState.loading ? 'active' : ''" name="replay"></van-icon>
+                        <span class="text">换一批</span>
+                    </div>
+                </div>
+                <div class="j-cell rec-content">
+                    <div class="rec-tags">
+                        <div class="tag" v-for="(item,index) in recListState.list" :key="index" v-text="item" @click="clickTag(item)">筛选</div>
+                    </div>
+                </div>
+            </div>
             <div class="filter-title">筛选条件</div>
             <div class="j-cells with-sub-info filters">
                 <div class="j-cell" @click="setKeyDetail('area')">
@@ -68,8 +85,12 @@
             </div>
         </div>
         <div class="j-footer">
-            <div class="j-button-group" :class="typeConf.bottomButtonGroupClass">
-                <button class="j-button-cancel" v-if="modeType==='edit'" @click="delThisKeyTip">删除</button>
+            <div class="j-button-group add" v-if="modeType==='add'">
+                <button class="j-button-cancel sub" :disabled="confirmButtonDisabled" @click="onConfirm">订阅</button>
+                <button class="j-button-confirm to-vip" @click="toVipPage">体验超级订阅</button>
+            </div>
+            <div class="j-button-group edit" v-if="modeType==='edit'">
+                <button class="j-button-cancel" @click="delThisKeyTip">删除</button>
                 <button class="j-button-confirm" :disabled="confirmButtonDisabled" @click="onConfirm">订阅</button>
             </div>
         </div>
@@ -170,7 +191,8 @@
         </span>
     </div>
 
-    <script src="https://cdn-common.jianyu360.com/cdn/lib/vue/2.6.11/vue.min.js"></script>
+    <script src="//cdn-common.jianyu360.com/cdn/lib/vue/2.6.11/vue.min.js"></script>
+    <script src="//cdn-common.jianyu360.com/cdn/lib/vant/2.12.24/lib/vant.min.js"></script>
     <script src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/local/weui.min.js"></script>
     <script src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/local/fastclick.min.js"></script>
     <script src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/vipsubscribe/js/keyset-detail.js?v={{Msg "seo" "mod_version"}}"></script>

src/web/staticres/vipsubscribe/css/keyset-detail.css

@@ -55,6 +55,32 @@ input::-webkit-input-placeholder {
   }
 }
 
+@keyframes rcmdRotateloading {
+  0% {
+    transform: rotateY(180deg) rotateZ(0);
+  }
+
+  100% {
+    transform: rotateY(180deg) rotateZ(1turn);
+  }
+}
+
+/* vant-reset */
+.j-confirm-dialog {
+  border-radius: 8px;
+}
+.j-confirm-dialog .van-dialog__message {
+  font-size: .32rem;
+  color: #171826;
+  line-height: .48rem;
+  text-align: left;
+}
+.j-confirm-dialog .van-button {
+  font-size: .36rem;
+  color: #171826;
+  line-height: .52rem;
+}
+
 #easy-alert {
   display: none;
 }
@@ -251,13 +277,6 @@ input::-webkit-input-placeholder {
   background-color: #2cb7ca;
 }
 
-.j-button-group.single .j-button-cancel {
-  display: none;
-}
-.j-button-group.single button {
-  height: .92rem;
-}
-
 button[disabled] {
   opacity: 0.5;
 }
@@ -514,6 +533,18 @@ button[disabled] {
   padding: .16rem 0;
   min-height: unset;
 }
+
+.tag {
+  font-size: .24rem;
+  line-height: .36rem;
+  color: #5F5E64;
+  background-color: #F5F6F7;
+  border-radius: .08rem;
+  white-space: nowrap;
+  word-break: break-all;
+  text-align: center;
+}
+
 .recommend .recommend-tags {
   position: relative;
   display: flex;
@@ -526,18 +557,57 @@ button[disabled] {
 .recommend-tags .tag {
   padding: .08rem .3rem;
   margin-right: .16rem;
-  font-size: .24rem;
-  line-height: .36rem;
-  color: #5F5E64;
-  background-color: #F5F6F7;
-  border-radius: .08rem;
-  white-space: nowrap;
-  word-break: break-all;
 }
 .recommend-tags .tag:last-of-type {
   margin-right: 0;
 }
 
+/* recommend-cards */
+.rec-cells .j-cell.rec-header {
+  flex-direction: row;
+}
+.rec-cells .rec-title {
+  font-size: .28rem;
+  color: #5f5e64;
+  line-height: .48rem;
+}
+.rec-cells .rec-change {
+  display: flex;
+  align-items: center;
+  color: #2abed1;
+}
+.rec-cells .rec-change:active {
+  opacity: 0.7;
+}
+.rec-cells .rec-change .text {
+  margin-left: .1rem;
+}
+.rec-cells .van-icon-replay {
+  font-size: .32rem;
+  transform: rotateY(180deg);
+}
+.rec-tags {
+  display: flex;
+  width: 100%;
+  flex-wrap: wrap;
+}
+.rec-tags .tag {
+  padding: .12rem .2rem;
+  margin: .08rem;
+  min-width: 30%;
+}
+
+.rec-change .van-icon-replay.active {
+  animation: rcmdRotateloading .5s linear infinite running;
+}
+
+.j-button-group.add .j-button-cancel {
+  flex: 1;
+}
+.j-button-group.add .j-button-confirm {
+  flex: 3;
+}
+
 /* picker */
 .key-picker .weui-picker {
   display: flex;

src/web/staticres/vipsubscribe/css/public.css

@@ -3,6 +3,12 @@
   display: none;
 }
 
+html,
+body {
+  width: 100%;
+  height: 100%;
+}
+
 body {
   color: #171826;
   line-height: 1.6;
@@ -101,7 +107,9 @@ textarea {
   font-size: 0.3rem;
 }
 
+.j-main,
 .j-body {
+  position: relative;
   flex: 1;
   overflow-y: scroll;
   overflow-x: hidden;

src/web/staticres/vipsubscribe/js/keyset-detail.js

@@ -323,7 +323,7 @@ var keySetDetail = new Vue({
     // 限制数组最大长度
     conf: {
       maxKeyLength: 10,
-      recommendTagsCount: 10
+      recommendTagsCount: 6
     },
     // 是编辑(查看详情)还是添加
     modeType: 'add',
@@ -335,8 +335,18 @@ var keySetDetail = new Vue({
     showAreaPicker: false,
     // 是否显示选择类型picker
     showInfoTypePicker: false,
-    // 新增时的关键词推荐
+    // 新增时的关键词推荐(关键词输入框下方的，只显示一行，超出不显示)
     recommendTags: [],
+    // 关键词刷新状态保存(类似前端分页)
+    recListState: {
+      loading: false, // 是否刷新中?
+      loaded: false, // 请求是否完成
+      pageNum: 1,
+      pageSize: 6,
+      total: 0, // 一共多少条数据
+      list: [],
+      listAll: [] // 后端返回的全部推荐关键词
+    },
     // 当前关键词索引(如果为add状态，索引会加一)
     currentIndex: 0,
     // 有此项时。说明不是从列表页进入的
@@ -409,7 +419,25 @@ var keySetDetail = new Vue({
         desc: '包括合同公告、验收公告、违规处理等'
       },
     ],
-    infoTypeMapArr: []
+    infoTypeMapArr: [],
+    noSpaceDialog: {
+      // 触发提示的次数
+      count: 0
+    }
+  },
+  watch: {
+    // 禁止输入空格
+    'currentInfo.key': function (newVal, oldVal) {
+      var spaceReg = /\s+/g
+      var hasSpace = spaceReg.test(newVal)
+      if (hasSpace) {
+        this.noSpaceDialog.count++
+        if (this.noSpaceDialog.count <= 1) {
+          this.showSpaceDialog()
+        }
+        this.currentInfo.key = this.currentInfo.key.replace(spaceReg, '')
+      }
+    }
   },
   computed: {
     typeConf: function () {
@@ -483,6 +511,30 @@ var keySetDetail = new Vue({
     }, 100)
   },
   methods: {
+    showDialog: function (conf) {
+      var defaultConf = {
+        title: '提示',
+        message: 'message',
+        className: 'j-confirm-dialog',
+        showConfirmButton: true,
+        showCancelButton: true,
+        confirmButtonColor: '#2abed1'
+      }
+      if (conf) {
+        Object.assign(defaultConf, conf)
+      }
+      return this.$dialog.confirm(defaultConf)
+    },
+    showSpaceDialog: function () {
+      this.showDialog({
+        title: '',
+        message: '免费订阅关键词不可输入空格键，如需添加多个关键词，请前往购买超级订阅',
+        confirmButtonText: '立即购买'
+      }).then(function () {
+        this.toVipPage()
+      }.bind(this))
+      .catch(function () {})
+    },
     bindEvents: function () {
       var _this = this
       // 点击链接离开时，保存数据后在跳转
@@ -591,6 +643,10 @@ var keySetDetail = new Vue({
       var afterFilterArr = this.filterKeyRecommend(list)
       this.recommendTags = afterFilterArr.slice(0, this.conf.recommendTagsCount)
 
+      this.recListState.listAll = afterFilterArr
+      this.recListState.count = afterFilterArr.length
+      this.nextPageRec()
+
       // 超出隐藏判断
       this.$nextTick(function () {
         var recommendTagsDOM = _this.$refs.recommendTags
@@ -660,6 +716,33 @@ var keySetDetail = new Vue({
 
       return afterTile
     },
+    getRecListTags: function () {
+      var listAll = this.recListState.listAll
+      this.recListState.total = listAll.length
+
+      var startIndex = ((this.recListState.pageNum - 1) * this.recListState.pageSize)
+      var endIndex = (this.recListState.pageNum * this.recListState.pageSize)
+
+      return listAll.slice(startIndex, endIndex)
+    },
+    nextPageRec: function () {
+      if (this.recListState.loading) return
+      this.recListState.loading = true
+      this.recListState.list = this.getRecListTags()
+
+      setTimeout(function () {
+        this.recListState.loading = false
+      }.bind(this), 500)
+
+      // 最后一页，则重置页码
+      if (this.recListState.pageNum * this.recListState.pageSize >= this.recListState.total) {
+        this.recListState.pageNum = 1
+      } else {
+        this.recListState.pageNum++
+      }
+
+      return this.recListState.list
+    },
     clickTag: function (item) {
       this.currentInfo.key = item
       this.checkUpdate()
@@ -876,6 +959,9 @@ var keySetDetail = new Vue({
         }]
       })
     },
+    toVipPage: function () {
+      location.href = '/front/vipsubscribe/introducePage'
+    },
     // 显示关键词输入提示
     showKeyWordRegErrorToast: function (type) {
       var conf = {

src/web/templates/weixin/wxkeyset/filterset.html

@@ -6,6 +6,8 @@
     <link href="{{Msg "seo" "cdn"}}/vipsubscribe/css/base.css?v={{Msg "seo" "version"}}" rel="stylesheet">
     <link href="{{Msg "seo" "cdn"}}/css/animate.css?v={{Msg "seo" "version"}}" rel="stylesheet">
     <link href="{{Msg "seo" "cdn"}}/css/weui.min.css?v={{Msg "seo" "version"}}" rel="stylesheet">
+    <link rel="stylesheet" href="//cdn-common.jianyu360.com/cdn/lib/vant/2.12.24/lib/index.css" />
+    <link rel="stylesheet" href="//cdn-common.jianyu360.com/cdn/lib/vant/2.12.24/lib/icon/local.css" />
     <link href="{{Msg "seo" "cdn"}}/vipsubscribe/css/keyset-detail.css?v={{Msg "seo" "version"}}" rel="stylesheet">
     {{include "/common/weixin.html"}}
     <script src="https://cdn-common.jianyu360.com/cdn/lib/jquery/3.6.0/jquery.min.js"></script>
@@ -25,12 +27,26 @@
                 <div class="j-cell border-line-b">
                     <input type="text" class="content-key item-label" @input="onKeyInput" v-model="currentInfo.key" placeholder="请输入关键词">
                 </div>
-                <div class="j-cell recommend" v-if="recommendTags.length">
+                <div class="j-cell recommend" v-if="recommendTags.length" style="display: none;">
                     <div class="recommend-tags" ref="recommendTags">
                         <span class="tag" v-for="(item,index) in recommendTags" :key="index" v-text="item" @click="clickTag(item)">筛选</span>
                     </div>
                 </div>
             </div>
+            <div class="j-cells with-sub-info rec-cells" v-if="recListState.listAll.length">
+                <div class="j-cell rec-header">
+                    <div class="rec-title">相似订阅条件推荐</div>
+                    <div class="rec-change" @click="nextPageRec">
+                        <van-icon :class="recListState.loading ? 'active' : ''" name="replay"></van-icon>
+                        <span class="text">换一批</span>
+                    </div>
+                </div>
+                <div class="j-cell rec-content">
+                    <div class="rec-tags">
+                        <div class="tag" v-for="(item,index) in recListState.list" :key="index" v-text="item" @click="clickTag(item)">筛选</div>
+                    </div>
+                </div>
+            </div>
             <div class="filter-title">筛选条件</div>
             <div class="j-cells with-sub-info filters">
                 <div class="j-cell" @click="setKeyDetail('area')">
@@ -68,8 +84,12 @@
             </div>
         </div>
         <div class="j-footer">
-            <div class="j-button-group" :class="typeConf.bottomButtonGroupClass">
-                <button class="j-button-cancel" v-if="modeType==='edit'" @click="delThisKeyTip">删除</button>
+            <div class="j-button-group add" v-if="modeType==='add'">
+                <button class="j-button-cancel sub" :disabled="confirmButtonDisabled" @click="onConfirm">订阅</button>
+                <button class="j-button-confirm to-vip" @click="toVipPage">体验超级订阅</button>
+            </div>
+            <div class="j-button-group edit" v-if="modeType==='edit'">
+                <button class="j-button-cancel" @click="delThisKeyTip">删除</button>
                 <button class="j-button-confirm" :disabled="confirmButtonDisabled" @click="onConfirm">订阅</button>
             </div>
         </div>
@@ -170,7 +190,8 @@
         </span>
     </div>
 
-    <script src="https://cdn-common.jianyu360.com/cdn/lib/vue/2.6.11/vue.min.js"></script>
+    <script src="//cdn-common.jianyu360.com/cdn/lib/vue/2.6.11/vue.min.js"></script>
+    <script src="//cdn-common.jianyu360.com/cdn/lib/vant/2.12.24/lib/vant.min.js"></script>
     <script src="{{Msg "seo" "cdn"}}/vipsubscribe/js/weui.min.js"></script>
     <script src="{{Msg "seo" "cdn"}}/js/fastclick.js?v={{Msg "seo" "version"}}"></script>
     <script src="{{Msg "seo" "cdn"}}/vipsubscribe/js/keyset-detail.js?v={{Msg "seo" "version"}}"></script>