Эхлэл Бүгдийг харах Тусламж
Нэвтрэх
qmx
/
jy
14
0
Салаа 0
Файлууд Асуудлууд 2 Хуулах хүсэлтүүд 0 Мэдлэгийн сан
Эх сурвалжийг харах

页面提交

wangkaiyue 5 жил өмнө
parent
294d8115ba
commit
e99f1f763d
20 өөрчлөгдсөн 5072 нэмэгдсэн , 1 устгасан
Өөрчлөлтийг ялгаж харах Өөрчлөлтийн статистик харах
  1. 76 1
      src/jfw/front/vipsubscribe.go
  2. 718 0
      src/web/templates/weixin/vipsubscribe/choose_area.html
  3. 464 0
      src/web/templates/weixin/vipsubscribe/choose_industry.html
  4. 63 0
      src/web/templates/weixin/vipsubscribe/edit_subscribe.html
  5. 547 0
      src/web/templates/weixin/vipsubscribe/edit_subscribe_city.html
  6. 406 0
      src/web/templates/weixin/vipsubscribe/edit_subscribe_industry.html
  7. 431 0
      src/web/templates/weixin/vipsubscribe/edit_subscribe_province.html
  8. 46 0
      src/web/templates/weixin/vipsubscribe/edit_subscribe_success.html
  9. 142 0
      src/web/templates/weixin/vipsubscribe/keyWord.html
  10. 110 0
      src/web/templates/weixin/vipsubscribe/tmp/personal_info.html
  11. 256 0
      src/web/templates/weixin/vipsubscribe/tmp/subscribe.html
  12. 192 0
      src/web/templates/weixin/vipsubscribe/tmp/vip_index.html
  13. 326 0
      src/web/templates/weixin/vipsubscribe/tmp/vip_renew.html
  14. 49 0
      src/web/templates/weixin/vipsubscribe/tmp/vip_service_expire.html
  15. 109 0
      src/web/templates/weixin/vipsubscribe/tmp/vip_sub_detail.html
  16. 414 0
      src/web/templates/weixin/vipsubscribe/tmp/vip_update.html
  17. 141 0
      src/web/templates/weixin/vipsubscribe/vip_introduce.html
  18. 99 0
      src/web/templates/weixin/vipsubscribe/vip_order_detail.html
  19. 41 0
      src/web/templates/weixin/vipsubscribe/vip_pay_success.html
  20. 442 0
      src/web/templates/weixin/vipsubscribe/vip_purchase.html

+ 76 - 1
src/jfw/front/vipsubscribe.go
Файл харах 

@@ -9,12 +9,87 @@ import (
 
 
 type Subscribepay struct {
 
 	*xweb.Action
 
-	tailInfo xweb.Mapper `xweb:"/front/vipsubscribe/tailInfo"` //vip订阅服务-用户信息录入页面
 
+	tailInfo          xweb.Mapper `xweb:"/front/vipsubscribe/tailInfo"`          //vip订阅服务-用户信息录入页面
 
+	introduce         xweb.Mapper `xweb:"/front/vipsubscribe/introducePage"`     //订阅收费介绍页
 
+	toPurchasePage    xweb.Mapper `xweb:"/front/vipsubscribe/toPurchasePage"`    //订阅收费购买页面
 
+	toChooseArea      xweb.Mapper `xweb:"/front/vipsubscribe/toChooseArea"`      //订阅收费地区筛选
 
+	toChooseIndustry  xweb.Mapper `xweb:"/front/vipsubscribe/toChooseIndustry"`  //订阅收费行业筛选
 
+	toPaySuccessPage  xweb.Mapper `xweb:"/front/vipsubscribe/toPaySuccessPage"`  //订阅支付完成页面
 
+	toOrderDetailPage xweb.Mapper `xweb:"/front/vipsubscribe/toOrderDetailPage"` //订阅收费支付订单详情页面
 
+	toSetKeyWordPage  xweb.Mapper `xweb:"/front/vipsubscribe/toSetKeyWordPage"`  //订阅收费设置关键词
 
+
 
+	toEditSubPage     xweb.Mapper `xweb:"/front/vipsubscribe/toEditSubPage"`     //订阅收费修改页面
 
+	toEditSubProvPage xweb.Mapper `xweb:"/front/vipsubscribe/toEditSubProvPage"` //订阅收费修改省份
 
+	toEditSubCityPage xweb.Mapper `xweb:"/front/vipsubscribe/toEditSubCityPage"` //订阅收费修改城市
 
+	toEditSubInduPage xweb.Mapper `xweb:"/front/vipsubscribe/toEditSubInduPage"` //订阅收费修改行业
 
+	submitEditSub     xweb.Mapper `xweb:"/front/vipsubscribe/submitEditSub"`     //提交订阅收费
 
 }
 
 
 func init() {
 
 	xweb.AddAction(&Subscribepay{})
 
 }
 
+
 
+//订阅收费介绍页
 
+func (s *Subscribepay) Introduce() {
 
+	s.Render("/weixin/vipsubscribe/vip_introduce.html")
 
+}
 
+
 
+//订阅收费购买页面
 
+func (s *Subscribepay) ToPurchasePage() {
 
+	s.Render("/weixin/vipsubscribe/vip_purchase.html")
 
+}
 
+
 
+//订阅收费地区筛选
 
+func (s *Subscribepay) ToChooseArea() {
 
+	s.Render("/weixin/vipsubscribe/choose_area.html")
 
+}
 
+
 
+//订阅收费地区筛选
 
+func (s *Subscribepay) ToChooseIndustry() {
 
+	s.Render("/weixin/vipsubscribe/choose_industry.html")
 
+}
 
+
 
+//订阅收费支付完成页面
 
+func (s *Subscribepay) ToPaySuccessPage() {
 
+	s.Render("/weixin/vipsubscribe/vip_pay_success.html")
 
+}
 
+
 
+//订阅收费支付订单详情页面
 
+func (s *Subscribepay) ToOrderDetailPage() {
 
+	s.Render("/weixin/vipsubscribe/vip_order_detail.html")
 
+}
 
+
 
+//订阅收费设置关键词
 
+func (s *Subscribepay) ToSetKeyWordPage() {
 
+	s.Render("/weixin/vipsubscribe/keyWord.html")
 
+}
 
+
 
+//修改订阅页面
 
+func (s *Subscribepay) ToEditSubPage() {
 
+	s.Render("/weixin/vipsubscribe/edit_subscribe.html")
 
+}
 
+
 
+//修改订阅省份
 
+func (s *Subscribepay) ToEditSubProvPage() {
 
+	s.Render("/weixin/vipsubscribe/edit_subscribe_province.html")
 
+}
 
+
 
+//修改订阅城市
 
+func (s *Subscribepay) ToEditSubCityPage() {
 
+	s.Render("/weixin/vipsubscribe/edit_subscribe_city.html")
 
+}
 
+
 
+//修改订阅行业
 
+func (s *Subscribepay) ToEditSubInduPage() {
 
+	s.Render("/weixin/vipsubscribe/edit_subscribe_industry.html")
 
+}
 
+
 
+//提交订阅修改
 
+func (s *Subscribepay) SubmitEditSub() {
 
+	s.Render("/weixin/vipsubscribe/edit_subscribe_success.html")
 
+}
 
+
 
+//
 
 func (s *Subscribepay) TailInfo() error {
 
 	defer util.Catch()
 
 	userId := util.ObjToString(s.GetSession("userId"))

+ 718 - 0
src/web/templates/weixin/vipsubscribe/choose_area.html
Файл харах 

@@ -0,0 +1,718 @@
 
+<!DOCTYPE html>
 
+<html>
 
+
 
+<head>
 
+    <meta charset="utf-8">
 
+    <title>区域选择</title>
 
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
 
+    <meta name="apple-mobile-web-app-capable" content="yes">
 
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
+    <script src="/vipsubscribe/js/rem.js?v={{Msg "seo" "version"}}"></script>
 
+    <link rel="stylesheet" href="/vipsubscribe/css/weui.min.css?v={{Msg "seo" "version"}}">
 
+    <link rel="stylesheet" type="text/css" href="/vipsubscribe/css/base.css?v={{Msg "seo" "version"}}" />
 
+    <link rel="stylesheet" type="text/css" href="/vipsubscribe/iconfont/iconfont.css?v={{Msg "seo" "version"}}" />
 
+    <link rel="stylesheet" href="/vipsubscribe/css/public.css?v={{Msg "seo" "version"}}">
 
+    <link rel="stylesheet" href="/vipsubscribe/css/choose_area.css?v={{Msg "seo" "version"}}">
 
+</head>
 
+
 
+<body>
 
+    <div id="choose_area" >
 
+        <div class="result">
 
+            <!-- 首次购买 显示"已选择" -----  升级订阅显示"已新增" -->
 
+            <p class="result_text line_two"> 已选择：<span class="result_name"></span>
 
+                <a href="javascript:;" class="detail">详情</a>
 
+            </p>
 
+            <a href="javascript:;" class="packup" style="display: none;">收起</a>
 
+        </div>
 
+        <div class="form">
 
+            <div class="select-area-box">
 
+                <ul class="area-list">
 
+                    <li>
 
+                        <div class="tab whole">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox other">全国
 
+                            </div>
 
+                        </div>
 
+                    </li>
 
+                    <li class="index" id="A">A</li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">安徽
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab municipality">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">澳门
 
+                            </div>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li class="index" id="B">B</li>
 
+                    <li>
 
+                        <div class="tab municipality">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">北京
 
+                            </div>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li class="index" id="C">C</li>
 
+                    <li>
 
+                        <div class="tab municipality">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">重庆
 
+                            </div>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li class="index" id="F">F</li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">福建
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li class="index" id="G">G</li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">广东
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">广西
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">贵州
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">甘肃
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li class="index" id="H">H</li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">河北
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">湖北
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">黑龙江
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">海南
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">河南
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">湖南
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <p class="index" id="J">J</p>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">吉林
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">江苏
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">江西
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li class="index" id="L">L</li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">辽宁
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li class="index" id="N">N</li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">内蒙古
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">宁夏
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li class="index" id="Q">Q</li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">青海
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li class="index" id="S">S</li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">山西
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">陕西
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab municipality">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">上海
 
+                            </div>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">山东
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">四川
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li class="index" id="T">T</li>
 
+                    <li>
 
+                        <div class="tab municipality">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">天津
 
+                            </div>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab municipality">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">台湾
 
+                            </div>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li class="index" id="X">X</li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">西藏
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">新疆
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab municipality">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">香港
 
+                            </div>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li class="index" id="Y">Y</li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">云南
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li class="index" id="Z">Z</li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">浙江
 
+                            </div>
 
+                            <span class="down-icon"><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                </ul>
 
+                
+            </div>
 
+        </div>
 
+        <div class="tips_btn">
 
+            <div class="tips_discount">
 
+                <div class="tips_d_money" style="display: block">&yen;38</div>
 
+                <div class="tips_d_text">已选择4个市，建议购买“全省”更划算哦~</div>
 
+            </div>
 
+            <div class="btns">
 
+                <button class="reset-btn">重置</button>
 
+                <button class="save-btn">确认</button>
 
+            </div>
 
+        </div>
 
+        <div class="slide">
 
+            <a href="javascript:;">#</a>
 
+            <a href="javascript:;">A</a>
 
+            <a href="javascript:;">B</a>
 
+            <a href="javascript:;">C</a>
 
+            <a href="javascript:;">F</a>
 
+            <a href="javascript:;">G</a>
 
+            <a href="javascript:;">H</a>
 
+            <a href="javascript:;">J</a>
 
+            <a href="javascript:;">L</a>
 
+            <a href="javascript:;">N</a>
 
+            <a href="javascript:;">Q</a>
 
+            <a href="javascript:;">S</a>
 
+            <a href="javascript:;">T</a>
 
+            <a href="javascript:;">X</a>
 
+            <a href="javascript:;">Y</a>
 
+            <a href="javascript:;">Z</a>
 
+        </div>
 
+    </div>
 
+    <script src="/vipsubscribe/js/jquery-2.1.4.js?v={{Msg "seo" "version"}}"></script>
 
+    <script src="/vipsubscribe/js/fastclick.js?v={{Msg "seo" "version"}}"></script>
 
+    <script src="/vipsubscribe/js/mapJSON.js?v={{Msg "seo" "version"}}"></script>
 
+    <script>
 
+        var hasCity = []; //定义已购买的城市数组
 
+        
+        // 获取url传参
 
+        function getParam(name) {
 
+            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
 
+            var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
 
+            var context = "";
 
+            if (r != null)
 
+                context = r[2];
 
+            reg = null;
 
+            r = null;
 
+            return context == null || context == "" || context == "undefined" ? "" : context;
 
+        }
 
+
 
+        function createMoreCity(arr) {
 
+            var tempHtml = arr.map(function (v) {
 
+                // v.name.replace(/市$/g, '')
 
+                return '<button class="city">' + v.name + '</button>'
 
+            }).join('')
 
+            return tempHtml
 
+        }
 
+
 
+        function isAllSelected() {
 
+            var _f = true
 
+            $($('.tab_content .city')).each(function (index, dom) {
 
+                // 如果有所有被选中，就设置标记为true
 
+                // 有一个没被选中，就设置标记为false
 
+                if ($(dom).hasClass('active')) {
 
+                    _f = false
 
+                    $('.other').prop('checked', false);
 
+                }
 
+            })
 
+            // 如果循环结束仍为true说明 没有全部都被选中
 
+            if (_f) {
 
+                $('.other').prop('checked', true);
 
+            }
 
+        }
 
+        /* 判断已购买的城市 在不在 全部城市里面，在，将按钮置灰，不可点击 */
 
+        function hasBuyCity() {
 
+            hasCity.forEach(v => {
 
+                $($('.tab_content .city')).each(function (index, dom) {
 
+                    if (v == $(dom).text()) {
 
+                        $(".checkbox .other").attr("checked", false); //取消全国选中
 
+                        $(dom).addClass('active').attr('disabled', true).parents().siblings('.tab')
 
+                            .addClass('selected').children('.province').children('input').attr({
 
+                                'disabled': true,
 
+                                "checked": true
 
+                            })
 
+                    }
 
+                })
 
+            })
 
+        }
 
+        /* 判断有无购买过的城市，无购买或首次进入默认选中全国 */
 
+        function getNationwide() {
 
+            console.log(hasCity.length)
 
+            if (hasCity.length == 0) {
 
+                $('.other').prop('checked', true);
 
+                $('.tab_content').slideUp(500)
 
+                $('.tab span i').css({
 
+                    "display":"inline-block",
 
+                    "transform":"rotate(0)"
 
+                })
 
+                getResult() 
+            }
 
+        }
 
+        /* 选中结果 */
 
+        function getResult() {
 
+            $('.result_name').empty()
 
+            var data = []; //定义一个总数组
 
+            var cityArr =[]; //定义一个选中城市数组
 
+            var val = $('.other').parents('.province').text().trim();
 
+            if ($('.other').is(':checked')) {
 
+                // data.push(val)
 
+                data =[{name:val,children:[]}] //全国
 
+            }
 
+            
+            $(".tab_content").find(".city.active:not('[disabled]')").each(function () {
 
+                var length = $(this).parent('.tab_content').find('.city').length; //省份下城市的length
 
+                var activeLeng = $(this).parent('.tab_content').find('.city.active').length; //省份下选中城市的length
 
+                let arr =[];
 
+                // 判断省份下的城市是否等于选中的城市长度,相等就是全部选中
 
+                if (length == activeLeng) {
 
+                    $('.tips_btn .tips_d_text').hide()
 
+                    // data.push($(this).parent('.tab_content').siblings('.tab:not(.whole)').children('.province').text().trim())
 
+                    let province = $(this).parent('.tab_content').siblings('.tab:not(.whole)').children('.province').text().trim();
 
+                    data.push({
 
+                        name:province,
 
+                        children:[]
 
+                    })
 
+                } else {
 
+                    // data.push($(this).parent('.tab_content').siblings('.tab:not(.whole)').children('.province').text().trim())
 
+                    // data.push($(this).html())
 
+                    // console.log($(this).parent('.tab_content').find('.city.active').text().trim())
 
+                    
+                    let province = $(this).parent('.tab_content').siblings('.tab:not(.whole)').children('.province').text().trim();
 
+                    let city = $(this).html()
 
+                    arr.push({name:city,parent:province})
 
+                    for(let i =0;i<arr.length;i++){
 
+                        let obj ={};
 
+                        obj.name = arr[i].name;
 
+                        obj.parent = arr[i].parent;
 
+                        cityArr.push(obj)
 
+                    }
 
+                    data.push({
 
+                        name:province,
 
+                        children:cityArr
 
+                    })
 
+                }
 
+            })
 
+            //数组对象去重
 
+            let obj = {};
 
+            data = data.reduce((cur,next) =>{
 
+                obj[next.name] ? "" : obj[next.name] = true && cur.push(next);
 
+                return cur
 
+            },[]) 
+            // 数组筛选
 
+            let result = data.map(v =>{
 
+                let filterArr = v.children.filter(s =>{
 
+                   return s.parent === v.name
 
+                })
 
+                return {
 
+                    name:v.name,
 
+                    children:filterArr
 
+                }
 
+            })
 
+            // console.log(result)
 
+            var html = '';
 
+            for (var i = 0; i < result.length; i++) {
 
+                let children = result[i].children;
 
+                if( children.length >0){
 
+                    // 判断每个省份下选中的城市长度，当大于等于4的时候 弹出"选择全省更划算的弹窗"
 
+                    if (children.length >= 4) {
 
+                        $('.tips_btn .tips_d_text').show()
 
+                    } 
+                    html += `${result[i].name}(`
 
+                    for(var j = 0;j < children.length;j++){
 
+                        if (j != children.length - 1) {
 
+                            html += `${children[j].name}、`
 
+                        } else {
 
+                            html += `${children[j].name}`
 
+                        }
 
+                    }
 
+                    if(i !=result.length -1){
 
+                        html += `)、`
 
+                    }else{
 
+                        html += `)`
 
+                    }
 
+                   
+                }else{
 
+                    if(i !=result.length -1){
 
+                        html += `${result[i].name}、`
 
+                    }else{
 
+                        html += `${result[i].name}`
 
+                    }
 
+                }
 
+            }
 
+            $('.result_name').append(html)
 
+            isOpen()
 
+            
+        }
 
+        // 判断选中结果是展开还是收起
 
+        function isOpen(){
 
+            let pHeight = $('.result_text').height()
 
+            let minHeight = $('.result_text').css('min-height')
 
+            let rows = Math.round(Math.round(pHeight)/ parseFloat(minHeight));
 
+            console.log("高度："+ pHeight,"最小高度"+ minHeight,"行数：" + rows)
 
+            if(rows == 1){
 
+                $('.packup').hide()
 
+                $('.detail').hide()
 
+            }else if(rows == 2){
 
+                // $('.result_text').addClass('line_two')
 
+                console.log($('.result_name').html().trim().length)
 
+                let length = $('.result_name').html().trim().length;
 
+                if(length >= 50){
 
+                    $('.detail').show()
 
+                    $('.packup').hide()
 
+                }else{
 
+                    $('.detail').hide()
 
+                    $('.packup').hide()
 
+                }
 
+                
+            } else{
 
+                $('.packup').show()
 
+                $('.detail').hide()
 
+            }
 
+        }
 
+        $(function () {
 
+            isOpen()
 
+            // 展开收起事件
 
+            $('.detail').click(function () {  
+                $('.result_text').removeClass('line_two')
 
+                $(".result").css("padding-bottom","0.3rem")
 
+                $(this).hide();
 
+                $('.packup').show()
 
+            })
 
+            $('.packup').click(function () { 
+                $(".result").css("padding-bottom","0.2rem")
 
+                $('.result_text').addClass('line_two')
 
+                $(this).hide();
 
+                $('.detail').show()
 
+            })
 
+            $("body").on('click','.slide a',function(){
 
+                var s = $(this).html()
 
+                if(s == '#'){
 
+                    return;
 
+                }
 
+                document.querySelector('#' + s).scrollIntoView({block:'center'});
 
+            })
 
+
 
+            //取上个页面url参数，中文解码）
 
+            let strCity = decodeURIComponent(getParam('city'))
 
+            // console.log(strCity)
 
+            // 判断有无购买过的区域城市
 
+            if (strCity) {
 
+                //将已购买过的城市,由字符串转数组
 
+                hasCity = decodeURIComponent(getParam('city')).split('、');
 
+                console.log(hasCity)
 
+            }
 
+            $(".select-area-box ul li:not('.index')").each(function () {
 
+                var text = $(this).find(".province").text().trim()
 
+                var data = null
 
+                chinaMapJSON.some(function (v) {
 
+                    data = v
 
+                    return v.name.indexOf(text) !== -1
 
+                })
 
+                var box = $(this).find('div.tab_content')
 
+                var html = createMoreCity(data.city)
 
+                box.html(html)
 
+            })
 
+
 
+            //用户首次购买 默认选中全国 
+            getNationwide();
 
+            
+            $(".select-area-box .tab:not(.municipality)").on('click', function (event) {
 
+                if($(this).next('.tab_content:not(:animated)').css("display") == "block"){
 
+                    $(this).children().children('i').css({
 
+                        "display":"inline-block",
 
+                        "transform":"rotate(0)"
 
+                    })
 
+                }else{
 
+                    $(this).children().children('i').css({
 
+                        "display":"inline-block",
 
+                        "transform":"rotate(-180deg)"
 
+                    })
 
+                }
 
+                $(this).toggleClass('selected').next('.tab_content:not(:animated)').stop(true, true).slideToggle()
 
+                // $(this).parent().siblings().children('.tab_content').slideUp(500)
 
+                $(this).parent().siblings().children('.tab').removeClass('selected');
 
+                
+            })
 
+            $('.province .checkbox:not(.other)').on('change', function () {
 
+                hasBuyCity();
 
+                var isCheckded = $(this).is(':checked')
 
+                if (isCheckded) {
 
+                    $(this).parents('.tab').siblings('.tab_content').find('.city').addClass(
 
+                        'active')
 
+                    isAllSelected()
 
+                    getResult() 
+                } else {
 
+                    $(this).parents('.tab').siblings('.tab_content').find('.city').removeClass(
 
+                        'active')
 
+                    isAllSelected()
 
+                    getResult() 
+                }
 
+            })
 
+
 
+            /* 判断已购买的城市 在不在 全部城市里面，在，将按钮置灰，不可点击 */
 
+            hasBuyCity(); 
+            //执行已购买城市函操作dom函数
 
+            $('.tab_content').on('click', '.city', function () {
 
+                hasBuyCity()
 
+                $(this).toggleClass('active')
 
+                var isActive = $(this).parent().find('.city.active').length
 
+                if (isActive) {
 
+                    var input = $(this).parents('li').find('input.checkbox')
 
+                    window.input = input
 
+                    input.prop('checked', true)
 
+                    isAllSelected()
 
+                    getResult() 
+                } else {
 
+                    $(this).parent('div').siblings('.tab').children().children('.checkbox').prop(
 
+                        'checked', false)
 
+                    isAllSelected()
 
+                    getResult() 
+                }
 
+            })
 
+            /* 用户选择全国*/
 
+            $('.other').on('change', function () {
 
+                var checked = $(this).is(':checked');
 
+                if (checked) {
 
+                    $('.tab_content').slideUp(500)
 
+                    $('.tab span i').css({
 
+                        "display":"inline-block",
 
+                        "transform":"rotate(0)"
 
+                    })
 
+                    $('.tab:not(.whole)').removeClass('selected').children('.province').find(
 
+                        'input').prop({
 
+                        'checked': false,
 
+                        "disabled": false
 
+                    });
 
+                    $('.tab_content').find('.city').removeClass('active').attr({
 
+                        "disabled": false,
 
+                        "checked": false
 
+                    })
 
+                    getResult() 
+                }else{
 
+                    getResult() 
+                }
 
+            })
 
+
 
+            $('.save-btn').click(function () {
 
+                // 提交
 
+                let addCity = $('.result_name').text(); //新增的城市
 
+                let oldCity = decodeURIComponent(getParam('city'));
 
+                console.log(`新增城市:${addCity} ----- 已购买过的城市:${oldCity}`)
 
+            })
 
+            $('.reset-btn').click(function () {
 
+                hasBuyCity();
 
+                $('.tips_d_text').hide(200)
 
+                $('input[type="checkbox"]:not("[disabled]")').attr("checked", false)
 
+                $('.tab_content .city:not("[disabled]")').removeClass('active')
 
+                $('.result_name').empty()
 
+                getNationwide();
 
+                
+                // $('.result_name').html(decodeURIComponent(getParam('city')));  //重置已购买过的城市
 
+            })
 
+        })
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 464 - 0
src/web/templates/weixin/vipsubscribe/choose_industry.html
Файл харах 

@@ -0,0 +1,464 @@
 
+<!DOCTYPE html>
 
+<html>
 
+    <head>
 
+        <meta charset="utf-8">
 
+        <title>行业选择</title>
 
+        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 
+        <meta name="apple-mobile-web-app-capable" content="yes">
 
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
+        <script src="/vipsubscribe/js/rem.js?v={{Msg "seo" "version"}}"></script>
 
+        <link rel="stylesheet" href="/vipsubscribe/css/weui.min.css?v={{Msg "seo" "version"}}">
 
+        <link rel="stylesheet" type="text/css" href="/vipsubscribe/css/base.css?v={{Msg "seo" "version"}}" />
 
+        <link rel="stylesheet" type="text/css" href="/vipsubscribe/iconfont/iconfont.css?v={{Msg "seo" "version"}}" />
 
+        <link rel="stylesheet" href="/vipsubscribe/css/choose_industry.css?v={{Msg "seo" "version"}}">
 
+    </head>
 
+    <body>
 
+        <main class="choose_industry main">
 
+            <div class="result">
 
+                <span class="label">已选择：</span>
 
+                <span class="result_name">全部行业</span>
 
+            </div>
 
+            <div class="form">
 
+                <div class="select-area-box">
 
+                    <ul class="list">
 
+                        <li class="list_item" id="all">
 
+                            <div class="item_label"></div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">全部行业</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item" id="A">
 
+                            <div class="item_label">A</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">安监</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item" id="B">
 
+                            <div class="item_label">B</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">保监</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item" id="C">
 
+                            <div class="item_label">C</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">财政</button>
 
+                                <button class="industry_item">出版广电</button>
 
+                                <button class="industry_item">传媒</button>
 
+                                <button class="industry_item">城管</button>
 
+                                <button class="industry_item">采矿业</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item" id="D">
 
+                            <div class="item_label">D</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">电力</button>
 
+                                <button class="industry_item">广电</button>
 
+                                <button class="industry_item">传媒</button>
 
+                                <button class="industry_item">城管</button>
 
+                                <button class="industry_item">采矿业</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item" id="E">
 
+                            <div class="item_label">E</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">电力</button>
 
+                                <button class="industry_item">广电</button>
 
+                                <button class="industry_item">传媒</button>
 
+                                <button class="industry_item">城管</button>
 
+                                <button class="industry_item">采矿业</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item" id="F">
 
+                            <div class="item_label">F</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">电力</button>
 
+                                <button class="industry_item">广电</button>
 
+                                <button class="industry_item">传媒</button>
 
+                                <button class="industry_item">城管</button>
 
+                                <button class="industry_item">采矿业</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item" id="G">
 
+                            <div class="item_label">G</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">电力</button>
 
+                                <button class="industry_item">广电</button>
 
+                                <button class="industry_item">传媒</button>
 
+                                <button class="industry_item">城管</button>
 
+                                <button class="industry_item">采矿业</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item" id="H">
 
+                            <div class="item_label">H</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">电力</button>
 
+                                <button class="industry_item">广电</button>
 
+                                <button class="industry_item">传媒</button>
 
+                                <button class="industry_item">城管</button>
 
+                                <button class="industry_item">采矿业</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item" id="I">
 
+                            <div class="item_label">I</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">电力</button>
 
+                                <button class="industry_item">广电</button>
 
+                                <button class="industry_item">传媒</button>
 
+                                <button class="industry_item">城管</button>
 
+                                <button class="industry_item">采矿业</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item" id="J">
 
+                            <div class="item_label">J</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">电力</button>
 
+                                <button class="industry_item">广电</button>
 
+                                <button class="industry_item">传媒</button>
 
+                                <button class="industry_item">城管</button>
 
+                                <button class="industry_item">采矿业</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item"  id="K">
 
+                            <div class="item_label">K</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">电力</button>
 
+                                <button class="industry_item">广电</button>
 
+                                <button class="industry_item">传媒</button>
 
+                                <button class="industry_item">城管</button>
 
+                                <button class="industry_item">采矿业</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item" id="L">
 
+                            <div class="item_label">L</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">电力</button>
 
+                                <button class="industry_item">广电</button>
 
+                                <button class="industry_item">传媒</button>
 
+                                <button class="industry_item">城管</button>
 
+                                <button class="industry_item">采矿业</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item" id="M">
 
+                            <div class="item_label">M</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">电力</button>
 
+                                <button class="industry_item">广电</button>
 
+                                <button class="industry_item">传媒</button>
 
+                                <button class="industry_item">城管</button>
 
+                                <button class="industry_item">采矿业</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item" id="N">
 
+                            <div class="item_label">N</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">电力</button>
 
+                                <button class="industry_item">广电</button>
 
+                                <button class="industry_item">传媒</button>
 
+                                <button class="industry_item">城管</button>
 
+                                <button class="industry_item">采矿业</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item" id="O">
 
+                            <div class="item_label">O</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">电力</button>
 
+                                <button class="industry_item">广电</button>
 
+                                <button class="industry_item">传媒</button>
 
+                                <button class="industry_item">城管</button>
 
+                                <button class="industry_item">采矿业</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item" id="P">
 
+                            <div class="item_label">P</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">电力</button>
 
+                                <button class="industry_item">广电</button>
 
+                                <button class="industry_item">传媒</button>
 
+                                <button class="industry_item">城管</button>
 
+                                <button class="industry_item">采矿业</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item" id="Q">
 
+                            <div class="item_label">Q</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">电力</button>
 
+                                <button class="industry_item">广电</button>
 
+                                <button class="industry_item">传媒</button>
 
+                                <button class="industry_item">城管</button>
 
+                                <button class="industry_item">采矿业</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item" id="R">
 
+                            <div class="item_label">R</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">电力</button>
 
+                                <button class="industry_item">广电</button>
 
+                                <button class="industry_item">传媒</button>
 
+                                <button class="industry_item">城管</button>
 
+                                <button class="industry_item">采矿业</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item" id="S">
 
+                            <div class="item_label">S</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">电力</button>
 
+                                <button class="industry_item">广电</button>
 
+                                <button class="industry_item">传媒</button>
 
+                                <button class="industry_item">城管</button>
 
+                                <button class="industry_item">采矿业</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item" id="T">
 
+                            <div class="item_label">T</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">电力</button>
 
+                                <button class="industry_item">广电</button>
 
+                                <button class="industry_item">传媒</button>
 
+                                <button class="industry_item">城管</button>
 
+                                <button class="industry_item">采矿业</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item" id="U">
 
+                            <div class="item_label">U</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">电力</button>
 
+                                <button class="industry_item">广电</button>
 
+                                <button class="industry_item">传媒</button>
 
+                                <button class="industry_item">城管</button>
 
+                                <button class="industry_item">采矿业</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item" id="V">
 
+                            <div class="item_label">V</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">电力</button>
 
+                                <button class="industry_item">广电</button>
 
+                                <button class="industry_item">传媒</button>
 
+                                <button class="industry_item">城管</button>
 
+                                <button class="industry_item">采矿业</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item" id="W">
 
+                            <div class="item_label">W</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">电力</button>
 
+                                <button class="industry_item">广电</button>
 
+                                <button class="industry_item">传媒</button>
 
+                                <button class="industry_item">城管</button>
 
+                                <button class="industry_item">采矿业</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item" id="X">
 
+                            <div class="item_label">X</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">电力</button>
 
+                                <button class="industry_item">广电</button>
 
+                                <button class="industry_item">传媒</button>
 
+                                <button class="industry_item">城管</button>
 
+                                <button class="industry_item">采矿业</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item" id="Y">
 
+                            <div class="item_label">Y</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">电力</button>
 
+                                <button class="industry_item">广电</button>
 
+                                <button class="industry_item">传媒</button>
 
+                                <button class="industry_item">城管</button>
 
+                                <button class="industry_item">采矿业</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item" id="Z">
 
+                            <div class="item_label">Z</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">电力</button>
 
+                                <button class="industry_item">广电</button>
 
+                                <button class="industry_item">传媒</button>
 
+                                <button class="industry_item">城管</button>
 
+                                <button class="industry_item">采矿业</button>
 
+                            </div>
 
+                        </li>
 
+                    </ul>
 
+                </div>
 
+            </div>
 
+            <div class="slide">
 
+                <a href="javascript:;">#</a>
 
+                <a href="javascript:;">A</a>
 
+                <a href="javascript:;">B</a>
 
+                <a href="javascript:;">C</a>
 
+                <a href="javascript:;">D</a>
 
+                <a href="javascript:;">E</a>
 
+                <a href="javascript:;">F</a>
 
+                <a href="javascript:;">G</a>
 
+                <a href="javascript:;">H</a>
 
+                <a href="javascript:;">I</a>
 
+                <a href="javascript:;">J</a>
 
+                <a href="javascript:;">K</a>
 
+                <a href="javascript:;">L</a>
 
+                <a href="javascript:;">M</a>
 
+                <a href="javascript:;">N</a>
 
+                <a href="javascript:;">O</a>
 
+                <a href="javascript:;">P</a>
 
+                <a href="javascript:;">Q</a>
 
+                <a href="javascript:;">R</a>
 
+                <a href="javascript:;">S</a>
 
+                <a href="javascript:;">T</a>
 
+                <a href="javascript:;">U</a>
 
+                <a href="javascript:;">V</a>
 
+                <a href="javascript:;">W</a>
 
+                <a href="javascript:;">X</a>
 
+                <a href="javascript:;">Y</a>
 
+                <a href="javascript:;">Z</a>
 
+            </div>
 
+            <!-- <div class="bottom_button">
 
+                <button class="reset-btn left_btn" disabled>重置</button>
 
+                <button class="save-btn right_btn" disabled>确认</button>
 
+            </div> -->
 
+            <div class="tips_btn">
 
+                <div class="tips_discount">
 
+                    <div class="tips_d_money" style="display: block">&yen;38</div>
 
+                    <div class="tips_d_text">已选择4个行业，建议购买“全部行业”更划算哦~</div>
 
+                </div>
 
+                <div class="btns">
 
+                    <button class="reset-btn">重置</button>
 
+                    <button class="save-btn">确认</button>
 
+                </div>
 
+            </div>
 
+        </main>
 
+        <script src="/vipsubscribe/js/jquery-2.1.4.js?v={{Msg "seo" "version"}}"></script>
 
+        <script src="/vipsubscribe/js/fastclick.js?v={{Msg "seo" "version"}}"></script>
 
+        <script src="/vipsubscribe/js/weui.min.js?v={{Msg "seo" "version"}}"></script>
 
+        <script>
 
+            // 点击导航跳转
 
+            $("body").on('click','.slide a',function(){
 
+                var s = $(this).html()
 
+                if(s == '#'){
 
+                    return;
 
+                }
 
+                document.querySelector('#' + s).scrollIntoView({block:'center'});
 
+            })
 
+            // 是否选中全国
 
+            function checkedAll(){
 
+                // 判断全部行业以外有没有被选中
 
+                $('.list_item:not(#all)').each(function () { 
+                    let isActive = $(this).children().children('button').hasClass('active')
 
+                    if(!isActive){
 
+                        $('#all').children().children('button').addClass('active')
 
+                    }else{
 
+                        $('#all').children().children('button').removeClass('active')
 
+                    }
 
+                })
 
+            }
 
+            // 在续订里，要保存已经选中的数组并置灰，按需要拼接上选中的行业数组
 
+
 
+            // button一共有以下几个操作属性
 
+            // 1. class中有active，表示当前被选中
 
+            // 2. button具有自定义属性disabled，此时button不能触发click事件，可以在续订中用来表示不可选的按钮
 
+
 
+            // var slideLetters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
 
+
 
+            // 参数: (用数据创建行业的DOM)
 
+            // letter: 为首字母，大写
 
+            // industryArr: 该首字母下的行业数组，默认为[]/
 
+            // 格式类似：disabled为true则按钮置灰，不能被点击
 
+            // [
 
+            //     { name: '电力', disabled: true },
 
+            //     { name: '采矿业', disabled: true }
 
+            // ]
 
+            function insertIndustryItem (letter, industryArr = []) {
 
+                if (!letter) return
 
+                var query = `#${letter[0].toUpperCase()} .item_industry_list`
 
+                var industryItemContainer = $(query)
 
+                var buttonArr = []
 
+
 
+                for (var i = 0; i < industryArr.length; i++) {
 
+                    buttonArr.push(`<button class="industry_item" ${industryArr[i].disabled ? 'disabled': ''}>${industryArr[i].name}</button>`)
 
+                }
 
+                industryItemContainer.html(buttonArr.join(''))
 
+            }
 
+            // 例子
 
+            var insertArr = [
 
+                { name: '医疗1', disabled: true },
 
+                { name: '医疗2', disabled: false },
 
+                { name: '医疗3', disabled: true }
 
+            ]
 
+            insertIndustryItem('E', insertArr)
 
+
 
+
 
+            // 选中行业在已选择提示中显示
 
+            var selectedIndustryArr = null
 
+            function findSelectedIndustry () {
 
+                var buttons = $('.select-area-box .list button')
 
+                // 找到已选择的数组(有active类的数组)
 
+                var selectedArr = []
 
+                buttons.each(function(){
 
+                    if ($(this).hasClass('active')) {
 
+                        selectedArr.push($(this).text())
 
+                    }
 
+                })
 
+                
+                // 显示隐藏优惠tips
 
+                if (selectedArr.length >= 4) {
 
+                    $('.tips_btn .tips_d_text').slideDown()
 
+                } else {
 
+                    $('.tips_btn .tips_d_text').slideUp()
 
+                }
 
+
 
+                selectedIndustryArr = selectedArr
 
+                
+                var selectedStr = selectedArr.join('、')
 
+                $('.result .result_name').text(selectedStr)
 
+
 
+                if (selectedArr.length === 0) {
 
+                    var allButton = $('#all button')
 
+                    allButton.trigger('click')
 
+                    $('.result .result_name').text(allButton.text())
 
+                }
 
+                if (selectedArr.length === buttons.length - 1) {
 
+                    // 除全部行业外所有按钮都被选中了
 
+                    $('#all button').trigger('click')
 
+                }
 
+            }
 
+            findDisabledIndustry()
 
+            // 找disabled的button函数
 
+            var disabledIndustryArr = null
 
+            function findDisabledIndustry () {
 
+                var $disabledButton = $('.select-area-box .list button:disabled')
 
+                var arr = []
 
+                $disabledButton.each(function (index, dom) {
 
+                    arr.push($(dom).text())
 
+                })
 
+                disabledIndustryArr = arr
 
+            }
 
+            checkedAll()
 
+            // 每个button的点击事件
 
+            $('.select-area-box .list').on('click', 'button', function (e) {
 
+                $('.tips_btn .btns button').removeAttr('disabled')
 
+
 
+                $(this).toggleClass('active')
 
+                // 如果点击全部行业，则其他所有按钮都取消active
 
+                if ($(this).parents('li')[0].id === 'all') {
 
+                    $('.select-area-box .list button').removeClass('active')
 
+                    $('#all button').addClass('active')
 
+                } else {
 
+                    $('#all button').removeClass('active')
 
+                }
 
+
 
+                findSelectedIndustry()
 
+            })
 
+
 
+            // 重置按钮事件
 
+            $('.reset-btn').on('click', function () {
 
+                $('.tips_btn .btns button').attr('disabled', true)
 
+                $('.choose_industry .result').slideUp(200)
 
+                $('.select-area-box .list button').removeClass('active');
 
+                $('.tips_d_text').hide(200)
 
+            })
 
+            // 确认按钮事件
 
+            $('.save-btn').on('click', function () {
 
+                console.log(selectedIndustryArr)
 
+            })
 
+        </script>
 
+    </body>
 
+</html>

+ 63 - 0
src/web/templates/weixin/vipsubscribe/edit_subscribe.html
Файл харах 

@@ -0,0 +1,63 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
+    <title>VIP订阅修改</title>
 
+    <meta name="apple-mobile-web-app-capable" content="yes">
 
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
+    <script src="/vipsubscribe/js/rem.js?v={{Msg "seo" "version"}}"></script>
 
+    <link rel="stylesheet" type="text/css" href="/vipsubscribe/css/weui.min.css?v={{Msg "seo" "version"}}"/>
 
+    <link rel="stylesheet" type="text/css" href="/vipsubscribe/css/base.css?v={{Msg "seo" "version"}}" />
 
+    <link rel="stylesheet" type="text/css" href="/vipsubscribe/iconfont/iconfont.css?v={{Msg "seo" "version"}}" />
 
+    <link rel="stylesheet" href="/vipsubscribe/css/vip_subscribe_edit.css?v={{Msg "seo" "version"}}">
 
+</head>
 
+<body>
 
+    <div class="vip_subscribe_edit">
 
+       <div class="edit_content">
 
+           <!-- 购买的全国则不显示可修改区域 -->
 
+           <div class="title">可修改区域</div>
 
+           <a href="/front/vipsubscribe/toEditSubProvPage" class="edit_item">
 
+               <div class="item_top">
 
+                   <span>2个省</span>
 
+                   <i class="iconfont icon-arrow"></i>
 
+               </div>
 
+               <div class="item_bottom">河南省、安徽省</div>
 
+           </a>
 
+           <a href="/front/vipsubscribe/toEditSubCityPage" class="edit_item">
 
+                <div class="item_top">
 
+                    <span>11个市</span>
 
+                    <i class="iconfont icon-arrow"></i>
 
+                </div>
 
+                <div class="item_bottom">郑州市、洛阳市、淮南市、洛阳市、淮南市、洛阳市、淮南市、洛阳市、淮南市、洛阳市、淮南市</div>
 
+           </a>
 
+           <!-- 购买的全行业则不显示可修改行业 -->
 
+           <div class="title">可修改行业</div>
 
+           <a href="/front/vipsubscribe/toEditSubInduPage" class="edit_item">
 
+                <div class="item_top">
 
+                    <span>2个行业</span>
 
+                    <i class="iconfont icon-arrow"></i>
 
+                </div>
 
+                <div class="item_bottom">保监、城管</div>
 
+           </a>
 
+       </div>
 
+       <div class="edit_tips">
 
+           <div class="edit_count">总共可修改次数：<em>3</em> / 3</div>
 
+       </div>
 
+    </div>
 
+    <script src="/vipsubscribe/js/jquery-2.1.4.js?v={{Msg "seo" "version"}}"></script>
 
+    <script src="/vipsubscribe/js/fastclick.js?v={{Msg "seo" "version"}}"></script>
 
+    <script src="/vipsubscribe/js/weui.min.js?v={{Msg "seo" "version"}}"></script>
 
+    <script>
 
+        $(function(){
 
+            // 如果要用toast提示 语法为
 
+            // weui.toast('已超过修改次数，不可再做修改',{
 
+            //     duration: 2000,
 
+            //     className: 'custom-toast',
 
+            // })
 
+        })
 
+        
+    </script>
 
+</body>
 
+</html>

+ 547 - 0
src/web/templates/weixin/vipsubscribe/edit_subscribe_city.html
Файл харах 

@@ -0,0 +1,547 @@
 
+<!DOCTYPE html>
 
+<html>
 
+
 
+<head>
 
+    <meta charset="utf-8">
 
+    <title>区域修改</title>
 
+    <meta name="viewport"
 
+        content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
+    <meta name="apple-mobile-web-app-capable" content="yes">
 
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
+    <script src="/vipsubscribe/js/rem.js?v={{Msg "seo" "version"}}"></script>
 
+    <link rel="stylesheet" href="/vipsubscribe/css/weui.min.css?v={{Msg "seo" "version"}}">
 
+    <link rel="stylesheet" type="text/css" href="/vipsubscribe/css/base.css?v={{Msg "seo" "version"}}" />
 
+    <link rel="stylesheet" type="text/css" href="/vipsubscribe/iconfont/iconfont.css?v={{Msg "seo" "version"}}" />
 
+    <!-- <link rel="stylesheet" href="/vipsubscribe/css/public.css?v={{Msg "seo" "version"}}"> -->
 
+    <link rel="stylesheet" href="/vipsubscribe/css/choose_area.css?v={{Msg "seo" "version"}}">
 
+    <style>
 
+        .checkbox[disabled]{background: none no-repeat center center #eee!important;}
 
+        .city[disabled]{background: #F4F4F9;color: #1D1D1D;}
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <div id="choose_area">
 
+        <p class="optional_count"> 可选择市数量：<em class="count"></em> / <span class="total">11</span></p>
 
+        <div class="result">
 
+            <!-- 首次购买 显示"已选择" -----  升级订阅显示"已新增" -->
 
+
 
+            <p>已选择：<span class="result_name">郑州市、洛阳市、淮南市、洛阳市、淮南市、洛阳市、淮南市、洛阳市、淮南市、洛阳市、淮南市</span></p>
 
+        </div>
 
+        <div class="form">
 
+            <div class="select-area-box" style="padding-bottom: 0;">
 
+                <ul class="area-list">
 
+                    <!-- <li>
 
+                        <div class="tab whole">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox other">全国
 
+                            </div>
 
+                        </div>
 
+                    </li> -->
 
+                    <li class="index" id="A">A</li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">安徽
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <!-- <li>
 
+                        <div class="tab municipality">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">澳门
 
+                            </div>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li> -->
 
+                    <!-- <li class="index" id="B">B</li> -->
 
+                    <!-- <li>
 
+                        <div class="tab municipality">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">北京
 
+                            </div>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li> -->
 
+                    <!-- <li class="index" id="C">C</li> -->
 
+                    <!-- <li>
 
+                        <div class="tab municipality">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">重庆
 
+                            </div>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li> -->
 
+                    <li class="index" id="F">F</li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">福建
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li class="index" id="G">G</li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">广东
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">广西
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">贵州
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">甘肃
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li class="index" id="H">H</li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">河北
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">湖北
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">黑龙江
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">海南
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">河南
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">湖南
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <p class="index" id="J">J</p>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">吉林
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">江苏
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">江西
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li class="index" id="L">L</li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">辽宁
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li class="index" id="N">N</li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">内蒙古
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">宁夏
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li class="index" id="Q">Q</li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">青海
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li class="index" id="S">S</li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">山西
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">陕西
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <!-- <li>
 
+                        <div class="tab municipality">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">上海
 
+                            </div>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li> -->
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">山东
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">四川
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <!-- <li class="index" id="T">T</li> -->
 
+                    <!-- <li>
 
+                        <div class="tab municipality">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">天津
 
+                            </div>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li> -->
 
+                    <!-- <li>
 
+                        <div class="tab municipality">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">台湾
 
+                            </div>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li> -->
 
+                    <li class="index" id="X">X</li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">西藏
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">新疆
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <!-- <li>
 
+                        <div class="tab municipality">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">香港
 
+                            </div>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li> -->
 
+                    <li class="index" id="Y">Y</li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">云南
 
+                            </div>
 
+                            <span><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li class="index" id="Z">Z</li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">浙江
 
+                            </div>
 
+                            <span class="down-icon"><i class="icon iconfont">&#xe600;</i></span>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                </ul>
 
+            </div>
 
+        </div>
 
+        <div class="tips_btn">
 
+            <div class="btns">
 
+                <button class="reset-btn" id="cancel">取消</button>
 
+                <button disabled class="save-btn" id="enter">确认修改</button>
 
+            </div>
 
+        </div>
 
+        <div class="slide">
 
+            <a href="javascript:;">#</a>
 
+            <a href="javascript:;">A</a>
 
+            <a href="javascript:;">B</a>
 
+            <a href="javascript:;">C</a>
 
+            <a href="javascript:;">F</a>
 
+            <a href="javascript:;">G</a>
 
+            <a href="javascript:;">H</a>
 
+            <a href="javascript:;">J</a>
 
+            <a href="javascript:;">L</a>
 
+            <a href="javascript:;">N</a>
 
+            <a href="javascript:;">Q</a>
 
+            <a href="javascript:;">S</a>
 
+            <a href="javascript:;">T</a>
 
+            <a href="javascript:;">X</a>
 
+            <a href="javascript:;">Y</a>
 
+            <a href="javascript:;">Z</a>
 
+        </div>
 
+    </div>
 
+    <script src="/vipsubscribe/js/jquery-2.1.4.js?v={{Msg "seo" "version"}}"></script>
 
+    <script src="/vipsubscribe/js/fastclick.js?v={{Msg "seo" "version"}}"></script>
 
+    <script src="/vipsubscribe/js/weui.min.js?v={{Msg "seo" "version"}}"></script>
 
+    <script src="/vipsubscribe/js/mapJSON.js?v={{Msg "seo" "version"}}"></script>
 
+    <script>
 
+        var oldCity = ["合肥市", "商丘市", "郑州市", "安阳市", "平顶山市", "信阳市", "南阳市", "开封市", "洛阳市", "三门峡市"];//模拟上一页传来的城市数组
 
+        // 渲染城市
 
+        function createMoreCity(arr) {
 
+            var tempHtml = arr.map(function (v) {
 
+                // v.name.replace(/市$/g, '')
 
+                return '<button class="city">' + v.name + '</button>'
 
+            }).join('')
 
+            return tempHtml
 
+        }
 
+        function isSelected() { 
+            $('.city:not(.active)').parent('.tab_content').siblings('.tab').find('input').attr('disabled','disabled')
 
+            $('.city').each(function () {  
+               let isActive = $(this).is('.active');
 
+                if(isActive){
 
+                    // console.log($(this).text(),'----')
 
+                    $(this).parent('.tab_content').siblings('.tab').find('input').removeAttr('disabled')
 
+                }
 
+            })
 
+         }
 
+        // 选择结果
 
+        function getResult() {
 
+            var data = [];
 
+            $('.result_name').empty()
 
+            $(".tab_content").find(".city.active").each(function () {
 
+                data.push($(this).html())
 
+            })
 
+            data = Array.from(new Set(data)); //数组去重
 
+            console.log(data,data.length)
 
+            $('.count').html(data.length)
 
+            if (data.length >= oldCity.length) {
 
+                weui.toast(`<p>只可选择${oldCity.length}个城市<br/><span style="white-space: nowrap;">您只购买了${oldCity.length}个城市，如需更多请升级<span></p>`,{
 
+                    duration: 2000,
 
+                    className: 'custom-toast',
 
+                })
 
+                $(".tab_content .city:not(.active)").attr('disabled', 'disabled')
 
+                for(let i in oldCity){
 
+                    if(oldCity[i] != data[i]){
 
+                        $('#enter').removeAttr('disabled')
 
+                    }
 
+                }
 
+            }else{
 
+                $(".tab_content .city:not(.active)").removeAttr('disabled');
 
+                $('#enter').attr('disabled', 'disabled')
 
+            }
 
+             // 可选择数量
 
+            $('.count').html(data.length)
 
+            var html = '';
 
+            for (var i = 0; i < data.length; i++) {
 
+                if (i != data.length - 1) {
 
+                    html += '<span>' + data[i] + '、' + '</span>'
 
+                } else {
 
+                    html += '<span>' + data[i] + '</span>'
 
+                }
 
+            }
 
+            $('.result_name').append(html)
 
+        }
 
+        $(function () {
 
+            // 渲染可选择城市总数
 
+            $('.total').html(oldCity.length)
 
+            $('.count').html(oldCity.length)
 
+            // 初次渲染城市选择结果
 
+            $('.result_name').html(oldCity.join('、'))
 
+            // 锚点跳转
 
+            $("body").on('click', '.slide a', function () {
 
+                var s = $(this).html()
 
+                if (s == '#') {
 
+                    return;
 
+                }
 
+                document.querySelector('#' + s).scrollIntoView({
 
+                    block: 'center'
 
+                });
 
+            })
 
+            // 渲染城市
 
+            $(".select-area-box ul li:not('.index')").each(function () {
 
+                var text = $(this).find(".province").text().trim()
 
+                var data = null
 
+                chinaMapJSON.some(function (v) {
 
+                    data = v
 
+                    return v.name.indexOf(text) !== -1
 
+                })
 
+                var box = $(this).find('div.tab_content')
 
+                var html = createMoreCity(data.city)
 
+                box.html(html)
 
+            })
 
+            
+            // 将上一页带来的城市 选中
 
+            $('.city').each(function () {  
+                let text = $(this).text().trim();
 
+                oldCity.forEach(v =>{
 
+                    if(v == text){
 
+                        // console.log(v,text)
 
+                        $(this).addClass('active').parent().siblings('.tab').find('input').prop('checked',true);
 
+                    }
 
+                })
 
+            })
 
+            $('.city:not(.active)').attr('disabled',true)
 
+        
+            isSelected()
 
+            // 阻止input checkbox选中取消 触发父元素下拉事件
 
+            $('.checkbox').click(function (e) {  
+                e.stopPropagation();
 
+            })
 
+            $('.tab .checkbox').on('change',function () {  
+                if($(this).is(':checked') == false){
 
+                    $(this).attr('disabled',true)
 
+                    $(this).parent().parent().siblings('.tab_content').children('.city').removeClass('active');
 
+                    getResult()
 
+                }
 
+            })
 
+            // 省下拉市
 
+            $(".select-area-box .tab:not(.municipality)").on('click', function (event) {
 
+                
+                if ($(this).next('.tab_content:not(:animated)').css("display") == "block") {
 
+                    $(this).children().children('i').css({
 
+                        "display": "inline-block",
 
+                        "transform": "rotate(0)"
 
+                    })
 
+                } else {
 
+                    $(this).children().children('i').css({
 
+                        "display": "inline-block",
 
+                        "transform": "rotate(-180deg)"
 
+                    })
 
+                }
 
+                $(this).toggleClass('selected').next('.tab_content:not(:animated)').slideToggle(500)
 
+                $(this).parent().siblings().children('.tab').removeClass('selected');
 
+
 
+            })
 
+            $('.tab_content').on('click', '.city', function () {
 
+                $(this).toggleClass('active')
 
+                var isActive = $(this).parent().find('.city.active').length
 
+                if (isActive) {
 
+                    var input = $(this).parents('li').find('input.checkbox')
 
+                    window.input = input
 
+                    input.prop('checked', true)
 
+                    getResult()
 
+                    isSelected()
 
+                } else {
 
+                    $(this).parent('div').siblings('.tab').children().children('.checkbox').prop(
 
+                        'checked', false)
 
+                        
+                    getResult()
 
+                    isSelected()
 
+                }
 
+            })
 
+            // 取消按钮事件 返回上一页
 
+            $('#cancel').click(function(){
 
+                window.history.go(-1)
 
+            })
 
+            // 确定修改事件
 
+            $('#enter').click(function(){
 
+                // $.ajax({
 
+                    window.location.href='/front/vipsubscribe/submitEditSub'
 
+                // })
 
+            })
 
+        })
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 406 - 0
src/web/templates/weixin/vipsubscribe/edit_subscribe_industry.html
Файл харах 

@@ -0,0 +1,406 @@
 
+<!DOCTYPE html>
 
+<html>
 
+    <head>
 
+        <meta charset="utf-8">
 
+        <title>行业选择</title>
 
+        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 
+        <meta name="apple-mobile-web-app-capable" content="yes">
 
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
+        <script src="/vipsubscribe/js/rem.js?v={{Msg "seo" "version"}}"></script>
 
+        <link rel="stylesheet" href="/vipsubscribe/css/weui.min.css?v={{Msg "seo" "version"}}">
 
+        <link rel="stylesheet" type="text/css" href="/vipsubscribe/css/base.css?v={{Msg "seo" "version"}}" />
 
+        <link rel="stylesheet" type="text/css" href="/vipsubscribe/iconfont/iconfont.css?v={{Msg "seo" "version"}}" />
 
+        <link rel="stylesheet" href="/vipsubscribe/css/choose_industry.css?v={{Msg "seo" "version"}}">
 
+    </head>
 
+    <body>
 
+        <main class="choose_industry main">
 
+            <p class="optional_count"> 可选择行业数量： <em class="count"></em> / <span class="total"></span></p>
 
+            <div class="result"  style="display: block;">
 
+                <span class="label">已选择：</span>
 
+                <span class="result_name">全部行业</span>
 
+            </div>
 
+            <div class="form">
 
+                <div class="select-area-box">
 
+                    <ul class="list">
 
+                        <!-- <li class="list_item" id="all">
 
+                            <div class="item_label"></div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">全部行业</button>
 
+                            </div>
 
+                        </li> -->
 
+                        <li class="list_item" id="A">
 
+                            <div class="item_label">A</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">安监</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item" id="B">
 
+                            <div class="item_label">B</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">保监</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item" id="C">
 
+                            <div class="item_label">C</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">财政</button>
 
+                                <button class="industry_item">出版广电</button>
 
+                                <button class="industry_item">传媒</button>
 
+                                <button class="industry_item">城管</button>
 
+                                <button class="industry_item">采矿业</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item" id="D">
 
+                            <div class="item_label">D</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">电力</button>
 
+                                <button class="industry_item">广电</button>
 
+                                <button class="industry_item">传媒</button>
 
+                                <button class="industry_item">城管</button>
 
+                                <button class="industry_item">采矿业</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item" id="E">
 
+                            <div class="item_label">E</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">电力</button>
 
+                                <button class="industry_item">广电</button>
 
+                                <button class="industry_item">传媒</button>
 
+                                <button class="industry_item">城管</button>
 
+                                <button class="industry_item">采矿业</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item" id="F">
 
+                            <div class="item_label">F</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">电力</button>
 
+                                <button class="industry_item">广电</button>
 
+                                <button class="industry_item">传媒</button>
 
+                                <button class="industry_item">城管</button>
 
+                                <button class="industry_item">采矿业</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item" id="G">
 
+                            <div class="item_label">G</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">电力</button>
 
+                                <button class="industry_item">广电</button>
 
+                                <button class="industry_item">传媒</button>
 
+                                <button class="industry_item">城管</button>
 
+                                <button class="industry_item">采矿业</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item" id="H">
 
+                            <div class="item_label">H</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">电力</button>
 
+                                <button class="industry_item">广电</button>
 
+                                <button class="industry_item">传媒</button>
 
+                                <button class="industry_item">城管</button>
 
+                                <button class="industry_item">采矿业</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item" id="I">
 
+                            <div class="item_label">I</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">电力</button>
 
+                                <button class="industry_item">广电</button>
 
+                                <button class="industry_item">传媒</button>
 
+                                <button class="industry_item">城管</button>
 
+                                <button class="industry_item">采矿业</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item" id="J">
 
+                            <div class="item_label">J</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">电力</button>
 
+                                <button class="industry_item">广电</button>
 
+                                <button class="industry_item">传媒</button>
 
+                                <button class="industry_item">城管</button>
 
+                                <button class="industry_item">采矿业</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item"  id="K">
 
+                            <div class="item_label">K</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">电力</button>
 
+                                <button class="industry_item">广电</button>
 
+                                <button class="industry_item">传媒</button>
 
+                                <button class="industry_item">城管</button>
 
+                                <button class="industry_item">采矿业</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item" id="L">
 
+                            <div class="item_label">L</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">电力</button>
 
+                                <button class="industry_item">广电</button>
 
+                                <button class="industry_item">传媒</button>
 
+                                <button class="industry_item">城管</button>
 
+                                <button class="industry_item">采矿业</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item" id="M">
 
+                            <div class="item_label">M</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">电力</button>
 
+                                <button class="industry_item">广电</button>
 
+                                <button class="industry_item">传媒</button>
 
+                                <button class="industry_item">城管</button>
 
+                                <button class="industry_item">采矿业</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item" id="N">
 
+                            <div class="item_label">N</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">电力</button>
 
+                                <button class="industry_item">广电</button>
 
+                                <button class="industry_item">传媒</button>
 
+                                <button class="industry_item">城管</button>
 
+                                <button class="industry_item">采矿业</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item" id="O">
 
+                            <div class="item_label">O</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">电力</button>
 
+                                <button class="industry_item">广电</button>
 
+                                <button class="industry_item">传媒</button>
 
+                                <button class="industry_item">城管</button>
 
+                                <button class="industry_item">采矿业</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item" id="P">
 
+                            <div class="item_label">P</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">电力</button>
 
+                                <button class="industry_item">广电</button>
 
+                                <button class="industry_item">传媒</button>
 
+                                <button class="industry_item">城管</button>
 
+                                <button class="industry_item">采矿业</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item" id="Q">
 
+                            <div class="item_label">Q</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">电力</button>
 
+                                <button class="industry_item">广电</button>
 
+                                <button class="industry_item">传媒</button>
 
+                                <button class="industry_item">城管</button>
 
+                                <button class="industry_item">采矿业</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item" id="R">
 
+                            <div class="item_label">R</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">电力</button>
 
+                                <button class="industry_item">广电</button>
 
+                                <button class="industry_item">传媒</button>
 
+                                <button class="industry_item">城管</button>
 
+                                <button class="industry_item">采矿业</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item" id="S">
 
+                            <div class="item_label">S</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">电力</button>
 
+                                <button class="industry_item">广电</button>
 
+                                <button class="industry_item">传媒</button>
 
+                                <button class="industry_item">城管</button>
 
+                                <button class="industry_item">采矿业</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item" id="T">
 
+                            <div class="item_label">T</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">电力</button>
 
+                                <button class="industry_item">广电</button>
 
+                                <button class="industry_item">传媒</button>
 
+                                <button class="industry_item">城管</button>
 
+                                <button class="industry_item">采矿业</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item" id="U">
 
+                            <div class="item_label">U</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">电力</button>
 
+                                <button class="industry_item">广电</button>
 
+                                <button class="industry_item">传媒</button>
 
+                                <button class="industry_item">城管</button>
 
+                                <button class="industry_item">采矿业</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item" id="V">
 
+                            <div class="item_label">V</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">电力</button>
 
+                                <button class="industry_item">广电</button>
 
+                                <button class="industry_item">传媒</button>
 
+                                <button class="industry_item">城管</button>
 
+                                <button class="industry_item">采矿业</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item" id="W">
 
+                            <div class="item_label">W</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">电力</button>
 
+                                <button class="industry_item">广电</button>
 
+                                <button class="industry_item">传媒</button>
 
+                                <button class="industry_item">城管</button>
 
+                                <button class="industry_item">采矿业</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item" id="X">
 
+                            <div class="item_label">X</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">电力</button>
 
+                                <button class="industry_item">广电</button>
 
+                                <button class="industry_item">传媒</button>
 
+                                <button class="industry_item">城管</button>
 
+                                <button class="industry_item">采矿业</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item" id="Y">
 
+                            <div class="item_label">Y</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">电力</button>
 
+                                <button class="industry_item">广电</button>
 
+                                <button class="industry_item">传媒</button>
 
+                                <button class="industry_item">城管</button>
 
+                                <button class="industry_item">采矿业</button>
 
+                            </div>
 
+                        </li>
 
+                        <li class="list_item" id="Z">
 
+                            <div class="item_label">Z</div>
 
+                            <div class="item_industry_list">
 
+                                <button class="industry_item">电力</button>
 
+                                <button class="industry_item">广电</button>
 
+                                <button class="industry_item">传媒</button>
 
+                                <button class="industry_item">城管</button>
 
+                                <button class="industry_item">采矿业</button>
 
+                            </div>
 
+                        </li>
 
+                    </ul>
 
+                </div>
 
+            </div>
 
+            <div class="slide">
 
+                <a href="javascript:;">#</a>
 
+                <a href="javascript:;">A</a>
 
+                <a href="javascript:;">B</a>
 
+                <a href="javascript:;">C</a>
 
+                <a href="javascript:;">D</a>
 
+                <a href="javascript:;">E</a>
 
+                <a href="javascript:;">F</a>
 
+                <a href="javascript:;">G</a>
 
+                <a href="javascript:;">H</a>
 
+                <a href="javascript:;">I</a>
 
+                <a href="javascript:;">J</a>
 
+                <a href="javascript:;">K</a>
 
+                <a href="javascript:;">L</a>
 
+                <a href="javascript:;">M</a>
 
+                <a href="javascript:;">N</a>
 
+                <a href="javascript:;">O</a>
 
+                <a href="javascript:;">P</a>
 
+                <a href="javascript:;">Q</a>
 
+                <a href="javascript:;">R</a>
 
+                <a href="javascript:;">S</a>
 
+                <a href="javascript:;">T</a>
 
+                <a href="javascript:;">U</a>
 
+                <a href="javascript:;">V</a>
 
+                <a href="javascript:;">W</a>
 
+                <a href="javascript:;">X</a>
 
+                <a href="javascript:;">Y</a>
 
+                <a href="javascript:;">Z</a>
 
+            </div>
 
+            <!-- <div class="bottom_button">
 
+                <button class="reset-btn left_btn" disabled>重置</button>
 
+                <button class="save-btn right_btn" disabled>确认</button>
 
+            </div> -->
 
+            <div class="tips_btn">
 
+                <div class="btns">
 
+                    <button class="reset-btn" id="cancel">取消</button>
 
+                    <button disabled class="save-btn" id="enter">确认修改</button>
 
+                </div>
 
+            </div>
 
+        </main>
 
+        <script src="/vipsubscribe/js/jquery-2.1.4.js?v={{Msg "seo" "version"}}"></script>
 
+        <script src="/vipsubscribe/js/fastclick.js?v={{Msg "seo" "version"}}"></script>
 
+        <script src="/vipsubscribe/js/weui.min.js?v={{Msg "seo" "version"}}"></script>
 
+        <script>
 
+            let oldIndustry = ["安监","保监"];
 
+            $('.total').html(oldIndustry.length)
 
+            $('.count').html(oldIndustry.length)
 
+            $('.result .result_name').html(oldIndustry.join('、'))
 
+            $('.list_item').each(function () {  
+                let text = $(this).find('.industry_item').text();
 
+                oldIndustry.forEach(v =>{
 
+                    if(v == text){
 
+                        $(this).find('.industry_item').addClass('active')
 
+                    }
 
+                    
+                })
 
+            })
 
+            $('.industry_item:not(.active)').attr('disabled',true)
 
+            // 点击导航跳转
 
+            $("body").on('click','.slide a',function(){
 
+                var s = $(this).html()
 
+                if(s == '#'){
 
+                    return;
 
+                }
 
+                document.querySelector('#' + s).scrollIntoView({block:'center'});
 
+            })
 
+            // 选中行业在已选择提示中显示
 
+            var selectedIndustryArr = null
 
+            function findSelectedIndustry () {
 
+                var buttons = $('.select-area-box .list button')
 
+                // 找到已选择的数组(有active类的数组)
 
+                var selectedArr = []
 
+                buttons.each(function(){
 
+                    if ($(this).hasClass('active')) {
 
+                        selectedArr.push($(this).text())
 
+                    }
 
+                })
 
+                $('.count').html(selectedArr.length)
 
+                // 显示隐藏优惠tips
 
+                if (selectedArr.length >= 2) {
 
+                    weui.toast(`<p>只可选择${oldIndustry.length}个行业<br/><span style="white-space: nowrap;">您只购买了${oldIndustry.length}个行业，如需更多请升级<span></p>`,{
 
+                        duration: 1000,
 
+                        className: 'custom-toast',
 
+                    })
 
+                    $('.industry_item:not(.active)').attr('disabled','disabled')
 
+                    for(let i in oldIndustry){
 
+                        console.log(oldIndustry[i],selectedArr[i])
 
+                        if(oldIndustry[i] != selectedArr[i]){
 
+                            $('#enter').removeAttr('disabled')
 
+                        }
 
+                    }
 
+                } else {
 
+                    $('.industry_item:not(.active)').removeAttr('disabled')
 
+                    $('#enter').attr('disabled', 'disabled')
 
+                }
 
+
 
+                selectedIndustryArr = selectedArr
 
+                
+                var selectedStr = selectedArr.join('、')
 
+                $('.result .result_name').text(selectedStr)
 
+            }
 
+
 
+            // 每个button的点击事件
 
+            $('.select-area-box .list').on('click', 'button', function (e) {
 
+                $(this).toggleClass('active')
 
+                findSelectedIndustry()
 
+            })
 
+
 
+            // 取消按钮事件 返回上一页
 
+            $('#cancel').click(function(){
 
+                window.history.go(-1)
 
+            })
 
+            // 确定修改事件
 
+            $('#enter').click(function(){
 
+                // $.ajax({
 
+                    window.location.href='/front/vipsubscribe/submitEditSub'
 
+                // })
 
+            })
 
+        </script>
 
+    </body>
 
+</html>

+ 431 - 0
src/web/templates/weixin/vipsubscribe/edit_subscribe_province.html
Файл харах 

@@ -0,0 +1,431 @@
 
+<!DOCTYPE html>
 
+<html>
 
+
 
+<head>
 
+    <meta charset="utf-8">
 
+    <title>区域修改</title>
 
+    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
+    <meta name="apple-mobile-web-app-capable" content="yes">
 
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
+    <script src="/vipsubscribe/js/rem.js?v={{Msg "seo" "version"}}"></script>
 
+    <link rel="stylesheet" href="/vipsubscribe/css/weui.min.css?v={{Msg "seo" "version"}}">
 
+    <link rel="stylesheet" type="text/css" href="/vipsubscribe/css/base.css?v={{Msg "seo" "version"}}" />
 
+    <link rel="stylesheet" type="text/css" href="/vipsubscribe/iconfont/iconfont.css?v={{Msg "seo" "version"}}" />
 
+    <!-- <link rel="stylesheet" href="/vipsubscribe/css/public.css?v={{Msg "seo" "version"}}"> -->
 
+    <link rel="stylesheet" href="/vipsubscribe/css/choose_area.css?v={{Msg "seo" "version"}}">
 
+    <style>
 
+        .checkbox[disabled]{background: none no-repeat center center #eee!important;}
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <div id="choose_area" >
 
+        <p class="optional_count"> 可选择省数量：<em class="count"></em> / <span class="total"></span></p>
 
+        <div class="result">
 
+            <!-- 首次购买 显示"已选择" -----  升级订阅显示"已新增" -->
 
+            
+            <p>已选择：<span class="result_name">安徽、河南</span></p>
 
+        </div>
 
+        <div class="form">
 
+            <div class="select-area-box" style="padding-bottom: 0;">
 
+                <ul class="area-list">
 
+                    <!-- <li>
 
+                        <div class="tab whole">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox other">全国
 
+                            </div>
 
+                        </div>
 
+                    </li> -->
 
+                    <li class="index" id="A">A</li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">安徽
 
+                            </div>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab municipality">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">澳门
 
+                            </div>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li class="index" id="B">B</li>
 
+                    <li>
 
+                        <div class="tab municipality">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">北京
 
+                            </div>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li class="index" id="C">C</li>
 
+                    <li>
 
+                        <div class="tab municipality">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">重庆
 
+                            </div>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li class="index" id="F">F</li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">福建
 
+                            </div>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li class="index" id="G">G</li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">广东
 
+                            </div>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">广西
 
+                            </div>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">贵州
 
+                            </div>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">甘肃
 
+                            </div>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li class="index" id="H">H</li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">河北
 
+                            </div>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">湖北
 
+                            </div>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">黑龙江
 
+                            </div>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">海南
 
+                            </div>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">河南
 
+                            </div>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">湖南
 
+                            </div>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <p class="index" id="J">J</p>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">吉林
 
+                            </div>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">江苏
 
+                            </div>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">江西
 
+                            </div>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li class="index" id="L">L</li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">辽宁
 
+                            </div>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li class="index" id="N">N</li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">内蒙古
 
+                            </div>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">宁夏
 
+                            </div>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li class="index" id="Q">Q</li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">青海
 
+                            </div>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li class="index" id="S">S</li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">山西
 
+                            </div>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">陕西
 
+                            </div>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab municipality">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">上海
 
+                            </div>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">山东
 
+                            </div>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">四川
 
+                            </div>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li class="index" id="T">T</li>
 
+                    <li>
 
+                        <div class="tab municipality">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">天津
 
+                            </div>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab municipality">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">台湾
 
+                            </div>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li class="index" id="X">X</li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">西藏
 
+                            </div>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">新疆
 
+                            </div>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li>
 
+                        <div class="tab municipality">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">香港
 
+                            </div>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li class="index" id="Y">Y</li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">云南
 
+                            </div>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                    <li class="index" id="Z">Z</li>
 
+                    <li>
 
+                        <div class="tab">
 
+                            <div class="province">
 
+                                <input type="checkbox" class="checkbox">浙江
 
+                            </div>
 
+                        </div>
 
+                        <div class="tab_content clearfix"></div>
 
+                    </li>
 
+                </ul>
 
+            </div>
 
+        </div>
 
+        <div class="tips_btn">
 
+            <div class="btns">
 
+                <button class="reset-btn" id="cancel">取消</button>
 
+                <button disabled class="save-btn" id="enter">确认修改</button>
 
+            </div>
 
+        </div>
 
+        <div class="slide">
 
+            <a href="javascript:;">#</a>
 
+            <a href="javascript:;">A</a>
 
+            <a href="javascript:;">B</a>
 
+            <a href="javascript:;">C</a>
 
+            <a href="javascript:;">F</a>
 
+            <a href="javascript:;">G</a>
 
+            <a href="javascript:;">H</a>
 
+            <a href="javascript:;">J</a>
 
+            <a href="javascript:;">L</a>
 
+            <a href="javascript:;">N</a>
 
+            <a href="javascript:;">Q</a>
 
+            <a href="javascript:;">S</a>
 
+            <a href="javascript:;">T</a>
 
+            <a href="javascript:;">X</a>
 
+            <a href="javascript:;">Y</a>
 
+            <a href="javascript:;">Z</a>
 
+        </div>
 
+    </div>
 
+    <script src="/vipsubscribe/js/jquery-2.1.4.js?v={{Msg "seo" "version"}}"></script>
 
+    <script src="/vipsubscribe/js/fastclick.js?v={{Msg "seo" "version"}}"></script>
 
+    <script>
 
+        var params = ["安徽","河南"]; //模拟上一页传来的省份数组
 
+        $(function () { 
+            $('.total').html(params.length)
 
+            // 锚点跳转 
+            $("body").on('click','.slide a',function(){
 
+                var s = $(this).html()
 
+                if(s == '#'){
 
+                    return;
 
+                }
 
+                document.querySelector('#' + s).scrollIntoView({block:'center'});
 
+            })
 
+            // 可选择省份的总数
 
+            $('.toatl').html(params.length)
 
+            // 将上一页选择的省份 选中
 
+            $(".select-area-box ul li:not('.index')").each(function () {
 
+                var text = $(this).find(".province").text().trim();
 
+                params.forEach(v =>{
 
+                    if(v == text){
 
+                        $(this).children().children('.province').children('input').prop('checked',true)
 
+                    }
 
+                })
 
+            })
 
+            getResult();
 
+            // 选中取消事件
 
+            $('.province .checkbox').on('change', function () {
 
+                getResult()
 
+            })
 
+            // 取消按钮事件 返回上一页
 
+            $('#cancel').click(function(){
 
+                window.history.go(-1)
 
+            })
 
+            // 确定修改事件
 
+            $('#enter').click(function(){
 
+                // $.ajax({
 
+                    window.location.href='/front/vipsubscribe/submitEditSub'
 
+                // })
 
+            })
 
+        })
 
+        function  getResult() {
 
+            var selectedArr = []; //选中的省份数组
 
+            $('.result_name').empty()  
+            $(".province").find(".checkbox:checked").each(function () {
 
+                selectedArr.push($(this).parent().text().trim())
 
+            })
 
+            // 判断选中省份数组长度是否等于可选择的省份数组长度，等于  则 禁用选择其他省份
 
+            if(selectedArr.length >= params.length){
 
+                $(".province .checkbox:not(:checked)").attr('disabled', 'disabled')
 
+                // 判断重新选择的省份与之前的是否相同，相同的话禁止修改，不同才能修改
 
+                for(let i in params){
 
+                    if(params[i] != selectedArr[i]){
 
+                        $('#enter').removeAttr('disabled')
 
+                    }
 
+                }
 
+            }else{
 
+                $(".province .checkbox:not(:checked)").removeAttr('disabled')
 
+                $('#enter').attr('disabled','disabled')
 
+            }
 
+            // 可选择数量
 
+            $('.count').html(selectedArr.length)
 
+            // 渲染选择结果
 
+            var html = '';
 
+            for (var i = 0; i < selectedArr.length; i++) {
 
+                if (i != selectedArr.length - 1) {
 
+                    html += '<span>' + selectedArr[i] + '、' + '</span>'
 
+                } else {
 
+                    html += '<span>' + selectedArr[i] + '</span>'
 
+                }
 
+            }
 
+            $('.result_name').append(html)
 
+        }
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 46 - 0
src/web/templates/weixin/vipsubscribe/edit_subscribe_success.html
Файл харах 

@@ -0,0 +1,46 @@
 
+<!DOCTYPE html>
 
+<html>
 
+    <head>
 
+        <meta charset="utf-8">
 
+        <title>VIP订阅修改</title>
 
+        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 
+        <meta name="apple-mobile-web-app-capable" content="yes">
 
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
+        <script src="/vipsubscribe/js/rem.js?v={{Msg "seo" "version"}}"></script>
 
+        <link rel="stylesheet" type="text/css" href="/vipsubscribe/css/base.css?v={{Msg "seo" "version"}}" />
 
+        <link rel="stylesheet" type="text/css" href="/vipsubscribe/iconfont/iconfont.css?v={{Msg "seo" "version"}}" />
 
+        <link rel="stylesheet" href="/vipsubscribe/css/public.css?v={{Msg "seo" "version"}}">
 
+        <link rel="stylesheet" href="/vipsubscribe/css/edit_success.css?v={{Msg "seo" "version"}}">
 
+    </head>
 
+    <body>
 
+        <div class="edit_success">
 
+            <div><i class="icon iconfont success">&#xe612;</i></div>
 
+            <p>修改成功</p>
 
+            <button class="public_btn" id="back">返回(<em class="time">5</em>)</button>
 
+        </div>
 
+        <script src="/vipsubscribe/js/jquery-2.1.4.js?v={{Msg "seo" "version"}}"></script>
 
+        <script src="/vipsubscribe/js/fastclick.js?v={{Msg "seo" "version"}}"></script>
 
+        <script>
 
+            function timer(obj,callback) { 
+                let t = 5; 
+                let timer = setInterval(() => {
 
+                    t--;
 
+                    obj.html(t)
 
+                    if(t == 0){
 
+                        callback()
 
+                    }
 
+                }, 1000);
 
+            }
 
+            $(function(){
 
+                timer($('.time'),()=>{
 
+                    // window.location.href="vip_subscribe_edit.html"
 
+                    window.location.replace('/front/vipsubscribe/toEditSubPage');
 
+                })
 
+                $('#back').click(function () {  
+                    // window.location.href="vip_subscribe_edit.html"
 
+                    window.location.replace('/front/vipsubscribe/toEditSubPage');
 
+                })
 
+            })
 
+        </script>
 
+    </body>
 
+</html>

+ 142 - 0
src/web/templates/weixin/vipsubscribe/keyWord.html
Файл харах 

@@ -0,0 +1,142 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
+    <title>关键词</title>
 
+    <script src="/vipsubscribe/js/rem.js?v={{Msg "seo" "version"}}"></script>
 
+    <link rel="stylesheet" href="/vipsubscribe/css/base.css?v={{Msg "seo" "version"}}">
 
+    <link rel="stylesheet" href="/vipsubscribe/iconfont/iconfont.css?v={{Msg "seo" "version"}}">
 
+    <link rel="stylesheet" href="/vipsubscribe/css/weui.min.css?v={{Msg "seo" "version"}}">
 
+    <link rel="stylesheet" href="/vipsubscribe/css/keyWord.css?v={{Msg "seo" "version"}}">
 
+    <style>
 
+        .ios-user-select {
 
+            -webkit-user-select: text;
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+
 
+    <div class="keyWord">
 
+        <section class="content">
 
+            <p class="title">示例：软件系统(关键词); 开发(附加词); 运维(排除词)</p>
 
+            <!-- 添加关键词 -->
 
+            <div class="enter addkeyWord">
 
+                <input type="text" class="enterOne" placeholder="请输入关键词" maxlength="100"/>
 
+                <!-- <textarea style="resize:none;" rows="1"  class="enterOne" name="" id=""  placeholder="请输入关键词" maxlength="100"></textarea> -->
 
+                <div class="btnChoose" style="display:none;">
 
+                    <button onclick="window.location.href='additionWord.html'">添加 附加词</button>
 
+                    <button onclick="window.location.href='exclusiveWord.html'">添加 排除词</button>
 
+                </div>
 
+                <div class="btn">
 
+                    <button disabled>确认</button>
 
+                </div>
 
+            </div>
 
+
 
+            <!-- 添加排除词 -->
 
+            <!-- <div class="enter exclusion" style="display:none;">
 
+            <input type="text" placeholder="请输入排除词" class="enterOne">
 
+            <div class="btn">
 
+                <button disabled>确认</button>
 
+            </div>
 
+        </div> -->
 
+
 
+
 
+            <!-- 添加关键词显示列表 -->
 
+            <div class="showKeyWord">
 
+                <ul>
 
+                    <li>
 
+                        <div class="one">
 
+                            <div>
 
+                                <span>
 
+                                    <strong> 关键词：</strong>
 
+                                    <p class="key">信息化</p>
 
+                                </span>
 
+                            </div>
 
+                            <button class="editKeyWord"><i class="iconfont icon-xiugai"></i> 修改</button>
 
+                        </div>
 
+                        <div class="modify">
 
+                            <textarea  name=""  rows="1"  placeholder="" maxlength="20" >信息化</textarea>
 
+                            <button class="addAdjunctWord">编辑 附加词</button>
 
+                            <button class="addExclusion">添加 排除词</button>
 
+                            <button class="deleteKey">删除</button>
 
+                            <button class="ascertainKey">确定</button>
 
+                        </div>
 
+                    </li>
 
+
 
+                    <li>
 
+                        <div class="one">
 
+                            <div>
 
+                                <span>
 
+                                    <strong> 关键词：</strong>
 
+                                    <p class="key">信息化二</p>
 
+                                </span>
 
+                                <span>
 
+                                    <strong> 附加词：</strong>
 
+                                    <p class="addition">工程 招标项目 科技产品 农业 电子产品</p>
 
+                                </span>
 
+                                <span>
 
+                                    <strong> 排除词：</strong>
 
+                                    <p class="exclusion">办公 教育</p>
 
+                                </span>
 
+                            </div>
 
+                            <button class="editKeyWord"><i class="iconfont icon-xiugai"></i> 修改</button>
 
+                        </div>
 
+                        <div class="modify">
 
+                            <textarea  name=""  rows="1"  placeholder="" maxlength="20" >信息化二</textarea>
 
+                            <button class="addAdjunctWord">编辑 附加词</button>
 
+                            <button class="addExclusion ">添加 排除词</button>
 
+                            <button class="deleteKey">删除</button>
 
+                            <button class="ascertainKey">确定</button>
 
+                        </div>
 
+                    </li>
 
+                </ul>
 
+
 
+            </div>
 
+
 
+
 
+
 
+            <div class="problem">
 
+                疑问解答 <i class="iconfont icon-wenhao"></i>
 
+            </div>
 
+
 
+            
+        </section>
 
+        <div class="addKeyWord">
 
+            <div style=""><i class="iconfont icon-tianjia"></i></div>
 
+            <p> 关键词添加数量：<em style="color: #2cb7ca;">2 </em>/ 300</p>
 
+        </div>
 
+        <!-- 疑难问题弹窗 -->
 
+        <div class="problemPop">
 
+            <div class="problemPopContent">
 
+                <h3>疑问解答</h3>
 
+                <ul>
 
+                    <li>
 
+                        <p>例：某公司主营业务为软件系统开发</p>
 
+                    </li>
 
+                    <li>
 
+                        <h4>关键词:</h4>
 
+                        <p>目标信息中的关键性词语，如“软件系统”</p>
 
+                    </li>
 
+                    <li>
 
+                        <h4>附加词:</h4>
 
+                        <p>与关键词形成一体/组合，便于查找准确信息，如“开发”</p>
 
+                    </li>
 
+                    <li>
 
+                        <h4>排除词:</h4>
 
+                        <p>与关键词互斥，可排除一部分非目标信息，如“运维”</p>
 
+                    </li>
 
+                </ul>
 
+                <button class="knowBtn">我知道了</button>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    <script src="/vipsubscribe/js/zepto.js?v={{Msg "seo" "version"}}"></script>
 
+    <script src="/vipsubscribe/js/weui.min.js?v={{Msg "seo" "version"}}"></script>
 
+    <script src="/vipsubscribe/js/keyWord.js?v={{Msg "seo" "version"}}"></script>
 
+</body>
 
+
 
+</html>

+ 110 - 0
src/web/templates/weixin/vipsubscribe/tmp/personal_info.html
Файл харах 

@@ -0,0 +1,110 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="utf-8">
 
+    <title>个人信息</title>
 
+    <meta name="viewport"
 
+        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 
+    <meta name="apple-mobile-web-app-capable" content="yes">
 
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
+    <script src="/vipsubscribe/js/rem.js?v={{Msg "seo" "version"}}"></script>
 
+    <link rel="stylesheet" type="text/css" href="/vipsubscribe/css/base.css?v={{Msg "seo" "version"}}" />
 
+    <link rel="stylesheet" type="text/css" href="/vipsubscribe/iconfont/iconfont.css?v={{Msg "seo" "version"}}" />
 
+    <link rel="stylesheet" href="/vipsubscribe/css/weui.min.css?v={{Msg "seo" "version"}}">
 
+    <link rel="stylesheet" href="/vipsubscribe/css/personal_info.css?v={{Msg "seo" "version"}}">
 
+</head>
 
+
 
+<body>
 
+    <div class="personal_info">
 
+        <div class="get_toast">
 
+            <div>
 
+                <i class="icon iconfont" id="close">&#xe61a;</i>
 
+                <span>您完善了个人信息,可领取VIP订阅7天试用</span>
 
+                <a href="#">去领取</a>
 
+            </div>
 
+        </div>
 
+        <form class="form" id="formInfo">
 
+            <div class="form_top">
 
+                <div class="form_item form_item_line">
 
+                    <label>姓名</label>
 
+                    <input class="form-control name" type="text" placeholder="输入姓名" value=""  onchange="check_name($(this))">
 
+                </div>
 
+                <div class="form_item form_item_line">
 
+                    <label>手机号</label>
 
+                    <input class="form-control phone" type="number" placeholder="输入手机号" value="" maxlength="11" onchange="check_tel($(this),$('.code_btn'))">
 
+                </div>
 
+                <div class="form_item">
 
+                    <label>验证码</label>
 
+                    <div class="code_input">
 
+                        <input type="number" placeholder="验证码" value="" class="code" maxlength="6" onchange="check_code($(this))">
 
+                        <button class="code_btn" type="button">获取验证码</button>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <div class="form_bottom">
 
+                <div class="form-item-textarea">
 
+                    <label>公司名称</label>
 
+                    <textarea name="" id="" rows="1" placeholder="输入公司名称" class="company" onchange="check_company($(this))"></textarea>
 
+                </div>
 
+                <div class="form_item">
 
+                    <label>职位(非必填)</label>
 
+                    <input class="form-control job" type="text" placeholder="输入职位">
 
+                </div>
 
+            </div>
 
+            <div class="save">
 
+                <button disabled type="submit" class="btn save_btn">保存</button>
 
+            </div>
 
+        </form>
 
+    </div>
 
+    <script src="/vipsubscribe/js/jquery-2.1.4.js?v={{Msg "seo" "version"}}"></script>
 
+    <script src="/vipsubscribe/js/fastclick.js?v={{Msg "seo" "version"}}"></script>
 
+    <script src="/vipsubscribe/js/weui.min.js?v={{Msg "seo" "version"}}"></script>
 
+    <script src="/vipsubscribe/js/personal_info.js?v={{Msg "seo" "version"}}"></script>
 
+    <script>
 
+        $(function () {
 
+            // textarea自适应高度
 
+            $(".form-item-textarea textarea")[0].style.height = $(".form-item-textarea textarea")[0]
 
+                .scrollHeight + 'px';
 
+            $(".form-item-textarea textarea").on("input", function () {
 
+                this.style.height = 'auto';
 
+                this.style.height = this.scrollHeight + "px";
 
+            })
 
+            // 倒计时
 
+            $('.code_btn').click(function (e) {
 
+                e.stopPropagation();
 
+                let phone = $('.phone').val();
 
+                if(/^1[3456789]\d{9}$/.test(phone)){
 
+                    count($(this),"获取验证码");
 
+                }
 
+            })
 
+            // 表单提交
 
+            $('#formInfo').submit(function (e) { 
+                var name = $('.name').val();
 
+                var tel = $('.phone').val();
 
+                var code = $('.code').val();
 
+                var company = $('.company').val();
 
+                var job = $('.job').val();
 
+                var post_data = {
 
+                    name: name,
 
+                    tel: tel,
 
+                    code: code,
 
+                    company: company,
 
+                    job:job
 
+                }
 
+                // $.ajax({
 
+                    weui.toast('保存成功',{
 
+                        duration: 2000,
 
+                        className: 'custom-toast',
 
+                    })
 
+                // });
 
+                return false; //一定要加return false 否则form表单提交会刷新页面
 
+            });
 
+            $('#close').on('click',() =>{
 
+                $('.get_toast').hide()
 
+            })
 
+        })
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 256 - 0
src/web/templates/weixin/vipsubscribe/tmp/subscribe.html
Файл харах 

@@ -0,0 +1,256 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
+    <title>招标订阅</title>
 
+    <meta name="apple-mobile-web-app-capable" content="yes">
 
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
+    <script src="/vipsubscribe/js/rem.js?v={{Msg "seo" "version"}}"></script>
 
+    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.css?v={{Msg "seo" "version"}}"/>
 
+    <link rel="stylesheet" type="text/css" href="/vipsubscribe/css/base.css?v={{Msg "seo" "version"}}" />
 
+    <link rel="stylesheet" type="text/css" href="/vipsubscribe/iconfont/iconfont.css?v={{Msg "seo" "version"}}" />
 
+    <link rel="stylesheet" href="/vipsubscribe/css/public.css?v={{Msg "seo" "version"}}">
 
+    <link rel="stylesheet" href="/vipsubscribe/css/subscribe_list.css?v={{Msg "seo" "version"}}">
 
+</head>
 
+<body>
 
+    <div class="subscribe">
 
+        <!-- banner -->
 
+        <div class="vip_banner">
 
+            <div class="box">
 
+                <div class="left">
 
+                    <img src="/vipsubscribe/image/v.png?v={{Msg "seo" "version"}}" alt="v">
 
+                    <h4>剑鱼标讯 VIP订阅</h4>
 
+                </div>
 
+                <a href="vip_introduce.html" class="right">了解详情 > </a>
 
+            </div>
 
+        </div>
 
+        <!-- 筛选条件 -->
 
+        <div class="filter_tab">
 
+            <div class="tab_left">
 
+                <div class="time">
 
+                    <p class="time_box" id="showDatePicker">
 
+                        <span class="time_result">时间</span>
 
+                        <i class="icon iconfont">&#xe636;</i>
 
+                    </p>
 
+                </div>
 
+                <div class="area" style="display: block;">
 
+                    <p class="area_box"  id="showArea">
 
+                        <span>地区</span>
 
+                        <i class="icon iconfont">&#xe636;</i>
 
+                    </p>
 
+                </div>
 
+            </div>
 
+            <div class="tab_right">
 
+                <!-- <div class="normal_set">
 
+                  <div class="normal_set_box">
 
+                        <i class="icon iconfont">&#xe633;</i>
 
+                        <span>订阅设置</span>
 
+                  </div>
 
+                </div> -->
 
+                <div class="vip_set" style="display: block;">
 
+                    <a href="vip_index.html" class="vip_set_box">
 
+                        <span class="free7days_pic"></span>
 
+                        <span>VIP订阅设置</span>
 
+                    </a>
 
+                </div>
 
+            </div>
 
+            <div class="screen"></div>
 
+            <div class="area_container">
 
+                <section class="area_wrap">
 
+                    <div class="area_data">
 
+                        <div class="province">
 
+                            <p class="p_item">安徽</p>
 
+                            <p class="p_item">河南</p>
 
+                        </div>
 
+                        <div class="city" >
 
+                            <div class="" data-id="ah">
 
+                                <p class="c_item">
 
+                                    <input type="checkbox" class="checkbox">
 
+                                    <span>合肥</span>    
+                                </p>
 
+                                <p class="c_item">
 
+                                    <input type="checkbox" class="checkbox">
 
+                                    <span>蚌埠</span>
 
+                                </p>
 
+                                <p class="c_item">
 
+                                    <input type="checkbox" class="checkbox">
 
+                                    <span>铜陵</span>
 
+                                </p>
 
+                                <p class="c_item">
 
+                                    <input type="checkbox" class="checkbox">
 
+                                    <span>黄山</span>
 
+                                </p>
 
+                                <p class="c_item">
 
+                                    <input type="checkbox" class="checkbox">
 
+                                    <span>阜阳</span>
 
+                                </p>
 
+                            </div>
 
+                            <div class="" style="display: none;">
 
+                                <p class="c_item">
 
+                                    <input type="checkbox" class="checkbox">
 
+                                    <span>郑州</span>
 
+                                </p>
 
+                                <p class="c_item">
 
+                                    <input type="checkbox" class="checkbox">
 
+                                    <span>洛阳</span>
 
+                                </p>
 
+                                <p class="c_item">
 
+                                    <input type="checkbox" class="checkbox">
 
+                                    <span>信阳</span>
 
+                                </p>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                    <div class="handle_menu">
 
+                        <button class="reset_btn">重置</button>
 
+                        <button class="enter_btn">确认</button>
 
+                    </div>
 
+                </section>
 
+            </div>
 
+        </div>
 
+        <!-- 列表 -->
 
+        <div class="list">
 
+            <div class="list_item">
 
+                <p class="item_title"> 1.普通订阅设置显示列表分类颜色<i style="color: #25C78C;">#25C78C</i>,普通订阅设置显示列表内容颜色<i style="color: #25C78C">#25C78C</i>,普通订阅设置显示列表内容颜色</p>
 
+                <p class="item_type">
 
+                    <span class="area">江苏</span>
 
+                    <span class="type">招标</span>
 
+                    <span class="industry">建筑工程</span>
 
+                    <span class="time">
 
+                         <i class="icon iconfont">&#xe62a;</i>3小时前
 
+                    </span>
 
+                </p>
 
+            </div>
 
+            <div class="list_item">
 
+                <p class="item_title">2.VIP订阅设置显示列表分类颜色<i style="color: #CFAD89;opacity: 0.72;">#CFAD89</i>,VIP订阅设置显示列表内容颜色<i style="color: #CFAD89">#CFAD89</i>，VIP订阅设置显示列表内容颜色</p>
 
+                <p class="item_type">
 
+                    <span class="area">江苏</span>
 
+                    <span class="type">招标</span>
 
+                    <!-- <span class="industry">建筑工程</span> -->
 
+                    <span class="v_industry">出版广电</span>
 
+                    <span class="time">
 
+                        <i class="icon iconfont">&#xe62a;</i>2019-08-25
 
+                    </span>
 
+                </p>
 
+            </div>
 
+        </div>
 
+        <!-- 推送消息--设置关键词 -->
 
+        <div class="msg_alert">
 
+            <!-- 开通vip提醒 -->
 
+            <div class="open_remind">
 
+                <div class="remind_box">
 
+                    <div class="remind_text">
 
+                        本次推送已达50条信息上限！开通VIP订阅，支持每天最多推送2000条信息
 
+                    </div>
 
+                    <a href="vip_introduce.html" class="remind_btn">了解详情</a>
 
+                </div>
 
+            </div>
 
+            <!-- 推送 -->
 
+            <div class="push">尊贵的VIP，已为您推送 260 条最新数据</div>
 
+            <!-- 续费提醒 -->
 
+            <div class="renew_toast">
 
+                <div>
 
+                    <i class="icon iconfont" id="close_renew">&#xe61a;</i>
 
+                    <span>VIP订阅服务还有 3 天到期，请及时续费！</span>
 
+                    <a href="vip_renew.html">去续费</a>
 
+                </div>
 
+            </div>
 
+            <!-- 设置关键词 -->
 
+            <div class="set_keyword">
 
+                <div>
 
+                    <i class="icon iconfont" id="close_set">&#xe61a;</i>
 
+                    <span>您未设置关键词，设置后接收信息更精准！</span>
 
+                    <a href="#">去设置</a>
 
+                </div>
 
+            </div>
 
+           
+        </div>
 
+    </div>
 
+    <script src="/vipsubscribe/js/jquery-2.1.4.js?v={{Msg "seo" "version"}}"></script>
 
+    <script src="https://res.wx.qq.com/open/libs/weuijs/1.1.4/weui.min.js"></script>
 
+    <script type="text/javascript" charset="UTF-8">
 
+        //获取当前时间
 
+        var date = (function(){
 
+            var date = new Date();
 
+            var year = date.getFullYear();
 
+            var month = date.getMonth() + 1;
 
+            var day = date.getDate();
 
+            month = month < 10 ? '0' + month : month;
 
+            day = day < 10 ? '0' + day : day;
 
+            return year + '-' + month + '-' + day;
 
+        })();
 
+        $(function () { 
+            // 选择时间
 
+            $('#showDatePicker').on('click', function () {
 
+                $(this).children().css("color","#2CB7CA")
 
+                weui.datePicker({
 
+                    id:1,
 
+                    start: 1990,
 
+                    end: new Date().getFullYear(),
 
+                    defaultValue:date.split('-'),
 
+                    onChange: function (result) {
 
+                        // console.log(result);
 
+                    },
 
+                    onConfirm: function (result) {
 
+                        let year = result[0].value;
 
+                        let month = result[1].value < 10 ? '0' + result[1].value : result[1].value;
 
+                        let day = result[2].value < 10 ? '0' + result[2].value:result[2].value;
 
+                        console.log(year + '-' + month + '-' + day)
 
+                        let time_result = year + '/' + month + '/' + day;
 
+                        $('.time_result').html(time_result)
 
+                    },
 
+                    title: '选择时间'
 
+                });
 
+            });
 
+            // 选择地区
 
+            $('#showArea').on('click', function (){
 
+                $('.area_container').slideToggle();
 
+                $('.screen').toggle()
 
+            })
 
+            $('.province .p_item').click(function(){
 
+                var i = $(this).index();
 
+                $(this).addClass('active').siblings().removeClass('active');
 
+                $('.city div').eq(i).show().siblings().hide().children().children('input').prop('checked',false);
 
+            })
 
+            $('.c_item input[type="checkbox"]').on('change',function () { 
+                var i = $(this).parents().parents().index();
 
+                if($(this).is(':checked')){
 
+                    $('.province .p_item').eq(i).addClass('active').siblings().removeClass('active')
 
+                }
 
+            })
 
+            $('.enter_btn').click(function (){
 
+                let province = $('.province .p_item.active').html();
 
+                let city = [];
 
+                $('.area_container').slideUp();
 
+                $('.screen').hide()
 
+                if(province == undefined || province == ''){
 
+                    return
 
+                }
 
+                
+                $('.c_item input[type="checkbox"]').each(function (i,dom) { 
+                    if($(dom).is(':checked')){
 
+                        city.push($(this).siblings('span').text().trim())
 
+                    }
 
+                 })
 
+                console.log('选择的省:'+ province,'选择的市:'+ city)
 
+                $('.area_box').children().css('color','#2CB7CA');
 
+                $('.area_box').children('span').html(province);
 
+            })
 
+            $('.reset_btn').click(function (){
 
+                $('.province .p_item').removeClass('active');
 
+                $('.c_item input[type="checkbox"]').prop('checked',false)
 
+            })
 
+            // 关闭设置弹窗
 
+            $('#close_set').on('click',() =>{
 
+                $('.set_keyword').hide()
 
+            })
 
+            $('#close_renew').on('click',() =>{
 
+                $('.renew_toast').hide()
 
+            })
 
+            
+        })
 
+    </script>
 
+</body>
 
+</html>

+ 192 - 0
src/web/templates/weixin/vipsubscribe/tmp/vip_index.html
Файл харах 

@@ -0,0 +1,192 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport"
 
+        content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
 
+    <meta name="apple-mobile-web-app-status-bar-style" content="#34355A" />
 
+    <meta name="theme-color" content="#34355A">
 
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
+    <title>VIP订阅首页</title>
 
+    <meta name="apple-mobile-web-app-capable" content="yes">
 
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
+    <script src="/vipsubscribe/js/rem.js?v={{Msg "seo" "version"}}"></script>
 
+    <link rel="stylesheet" type="text/css" href="/vipsubscribe/css/weui.min.css?v={{Msg "seo" "version"}}" />
 
+    <link rel="stylesheet" type="text/css" href="/vipsubscribe/css/base.css?v={{Msg "seo" "version"}}" />
 
+    <link rel="stylesheet" type="text/css" href="/vipsubscribe/iconfont/iconfont.css?v={{Msg "seo" "version"}}" />
 
+    <link rel="stylesheet" href="/vipsubscribe/css/public.css?v={{Msg "seo" "version"}}">
 
+    <link rel="stylesheet" href="/vipsubscribe/css/vip_index.css?v={{Msg "seo" "version"}}">
 
+</head>
 
+
 
+<body>
 
+    <div class="vip_index">
 
+        <div class="header">
 
+            <img class="header_left" src="/vipsubscribe/image/left.png?v={{Msg "seo" "version"}}" alt="" onclick="javascript:history.back(-1);">
 
+            <h3 class="header_title">VIP订阅</h3>
 
+            <span class="header_right"></span>
 
+        </div>
 
+        <div class="content">
 
+            <div class="vip_info">
 
+                <div class="service">
 
+                    <div class="s_left">
 
+                        <span class="free7days_pic">已开通VIP订阅服务</span>
 
+                        <!-- <div class="already">
 
+                            <img src="/vipsubscribe/image/v.png?v={{Msg "seo" "version"}}" alt="">
 
+                            <h4>已开通VIP订阅服务</h4>
 
+                        </div> -->
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <div class="subscribe_info">
 
+                <div class="s_info_top">
 
+                    <p class="s_i_item">
 
+                        <label>已购买区域：</label>
 
+                        <span>河南省、郑州市、洛阳市、淮南市、河南省、郑州市、洛阳市、淮南市、洛阳市</span>
 
+                    </p>
 
+                    <p class="s_i_item">
 
+                        <label>已购买行业：</label>
 
+                        <span>保监、城管</span>
 
+                    </p>
 
+                    <p class="s_i_item">
 
+                        <label>订阅周期：</label>
 
+                        <span>3个月</span>
 
+                    </p>
 
+                    <p class="s_i_item">
 
+                        <label>有效日期：</label>
 
+                        <span>2019.07.31 - 2019.10.31</span>
 
+                    </p>
 
+                    <div class="to_expired">
 
+                        <div class="e_circle">即将到期</div>
 
+                    </div>
 
+                </div>
 
+                <!-- 如果用户同时购买全国和全行业 则隐藏修改功能 -->
 
+                <div class="s_info_bottom">
 
+                    <span onclick="window.location.href='vip_subscribe_edit.html'">修改</span>
 
+                    <i class="iconfont icon-arrow"></i>
 
+                </div>
 
+            </div>
 
+            <div class="panel">
 
+                <div class="media">
 
+                    <div class="media_list">
 
+                        <div class="media_left">
 
+                            <img src="/vipsubscribe/image/keyword.png?v={{Msg "seo" "version"}}" alt="">
 
+                            <span>关键词</span>
 
+                        </div>
 
+                        <a href="keyWord.html" class="media_right">
 
+                            安保、监察、监管、安保、监察、安保、监察、监管、安保、监察
 
+                        </a>
 
+                    </div>
 
+                    <div class="media_list">
 
+                        <div class="media_left">
 
+                            <img src="/vipsubscribe/image/type.png?v={{Msg "seo" "version"}}" alt="">
 
+                            <span>信息类型</span>
 
+                        </div>
 
+                        <a href="messageType.html" class="media_right">全部类型</a>
 
+                    </div>
 
+                    <div class="media_list">
 
+                        <div class="media_left">
 
+                            <img src="/vipsubscribe/image/set.png?v={{Msg "seo" "version"}}" alt="">
 
+                            <span>推送设置</span>
 
+                        </div>
 
+                        <a href="#" class="media_right">实时推送</a>
 
+                    </div>
 
+                    <div class="media_list" style="margin-top:.2rem;" id="auto_renew">
 
+                        <div class="media_left">
 
+                            <img src="/vipsubscribe/image/renew.png?v={{Msg "seo" "version"}}" alt="">
 
+                            <span>自动续费</span>
 
+                        </div>
 
+                        <div class="media_switch">
 
+                            <div class="weui-cell__ft">
 
+                                <button class="custom-switch switch"></button>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                    <div class="media_list" style="margin-top:.2rem;margin-bottom: .98rem;">
 
+                        <div class="media_left">
 
+                            <img src="/vipsubscribe/image/data.png?v={{Msg "seo" "version"}}" alt="">
 
+                            <span>数据报告</span>
 
+                        </div>
 
+                        <a href="#" class="media_right">
 
+                            <span class="weui-badge">2</span>
 
+                        </a>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+        <div class="footer">
 
+            <!-- 续费提醒 -->
 
+            <div class="renew_toast">
 
+                <div>
 
+                    <i class="icon iconfont" id="close_renew">&#xe61a;</i>
 
+                    <span>VIP订阅服务还有 3 天到期，请及时续费！</span>
 
+                    <a href="vip_renew.html">去续费</a>
 
+                </div>
 
+            </div>
 
+            <!-- 升级 续费 -->
 
+            <div class="tabbar">
 
+                <a href="vip_update.html" class="update_btn">升级</a>
 
+                <a href="./vip_renew.html" class="renew_btn">续费</a>
 
+            </div>
 
+        </div>
 
+        <!-- 自动续费关闭提醒 -->
 
+        <div class="custom-dialog" style="display: none;">
 
+            <div class="weui-mask weui-animate-fade-in"></div>
 
+            <div class="weui-dialog weui-animate-fade-in">
 
+                <div class="weui-dialog__hd"><strong class="weui-dialog__title">提示信息</strong></div>
 
+                <div class="weui-dialog__bd">请您确定是否关闭自动续费</div>
 
+                <div class="weui-dialog__ft"> 
+                    <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">确定</a> 
+                    <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">取消</a> 
+                </div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    <script src="/vipsubscribe/js/jquery-2.1.4.js?v={{Msg "seo" "version"}}"></script>
 
+    <script src="/vipsubscribe/js/fastclick.js?v={{Msg "seo" "version"}}"></script>
 
+    <script src="/vipsubscribe/js/weui.min.js?v={{Msg "seo" "version"}}"></script>
 
+    <script>
 
+        $(function () {
 
+            let isChecked = true; //默认是否开通自动续费
 
+            if (isChecked === true) {
 
+                $('.switch').addClass('checked')
 
+                $('.switch').removeAttr('disabled','disabled')
 
+            } else {
 
+                $('.switch').removeClass('checked')
 
+                $('.switch').attr('disabled','disabled')
 
+            }
 
+            $('.switch:not(:disabled)').on('click', function (e) {
 
+                
+                console.log($(this).hasClass('checked'))
 
+                let that = this;
 
+                let hasChecked = $(this).hasClass('checked');
 
+                if (hasChecked == false) {
 
+                    isChecked = true;
 
+                    $(that).addClass('checked');
 
+                } else {
 
+                    $('.custom-dialog').show()
 
+                    $('.weui-dialog__btn_primary').on('click', function () {
 
+                        isChecked = false;
 
+                        $(that).removeClass('checked');
 
+                        $('.custom-dialog').hide()
 
+                        // $('#auto_renew').hide(500);
 
+                        weui.toast('自动续费已关闭',{
 
+                            duration: 3000,
 
+                            className: 'custom-toast',
 
+                        })
 
+                        $('.switch').attr('disabled','disabled')
 
+                    })
 
+                    $('.weui-dialog__btn_default').on('click',function() {
 
+                        $('.custom-dialog').hide()
 
+                    })
 
+                }
 
+            })
 
+            
+            $('#close_renew').on('click', () => {
 
+                $('.renew_toast').hide()
 
+            })
 
+        })
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 326 - 0
src/web/templates/weixin/vipsubscribe/tmp/vip_renew.html
Файл харах 

@@ -0,0 +1,326 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport"
 
+        content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
+    <title>VIP订阅续费</title>
 
+    <meta name="apple-mobile-web-app-capable" content="yes">
 
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
+    <script src="../js/rem.js"></script>
 
+    <link rel="stylesheet" type="text/css" href="../css/weui.min.css" />
 
+    <link rel="stylesheet" type="text/css" href="../css/base.css" />
 
+    <link rel="stylesheet" type="text/css" href="../iconfont/iconfont.css" />
 
+    <link rel="stylesheet" href="../css/vip_update.css">
 
+</head>
 
+
 
+<body class="no-touch">
 
+    <div class="vip_renew">
 
+        <div class="choose_condition">
 
+             <!-- 正常点击vip首页续费进入显示下列提示 -->
 
+            <p class="update_tip">提示：订阅续费可在已购买的服务基础上,延长订阅服务周期</p>
 
+             <!-- 即将到期点击vip首页续费显示下列提示 -->
 
+            <p class="expire_tip">提示：您的VIP订阅服务即将到期，为不影响您的使用。请立即续费</p>
 
+            <ul class="chooseList">
 
+                <li class="detail_item">
 
+                        <div class="item_info item_area">
 
+                            <span class="label">已订阅区域：</span>
 
+                            <span class="label_for">河南省、郑州市、洛阳市、淮南市</span>
 
+                        </div>
 
+                        <div class="item_info item_industry">
 
+                            <span class="label">已订阅行业：</span>
 
+                            <span class="label_for">保监、城管保监</span>
 
+                        </div>
 
+                        <div class="item_info item_cycle">
 
+                            <span class="label">订阅周期：</span>
 
+                            <span class="label_for">10个月</span>
 
+                        </div>
 
+                        <div class="item_info item_validity">
 
+                            <p>
 
+                                <span class="label">有效日期：</span>
 
+                                <span class="label_for">2020.01.31 - 2020.10.31</span>
 
+                            </p>
 
+                            <p>
 
+                                <!-- 正常点击vip首页续费进入显示去升级，即将到期点击vip首页续费显示订阅修改 -->
 
+                                <a href="vip_update.html" class="go_update">去升级</a>
 
+                                <a href="vip_subscribe_edit.html" class="go_update">订阅修改</a>
 
+                            </p>
 
+                        </div>
 
+                </li>
 
+                <li class="choose_item select_cycle">
 
+                    <a href="javascript:;">
 
+                        <span class="label">订阅周期</span>
 
+                        <input type="text" disabled value="" placeholder="选择年、月" class="info choose_time">
 
+                        <!-- <span class="info choose_time">选择年、月</span> -->
 
+                        <i class="iconfont icon-arrow choose_time"></i>
 
+                    </a>
 
+                </li>
 
+            </ul>
 
+            <div class="pay_mode">
 
+                <div class="select_payment choose_item">
 
+                    <a href="javascript:;">
 
+                        <span class="label">支付方式</span>
 
+                        <span class="info choose_way">微信支付</span>
 
+                        <i class="iconfont icon-arrow choose_way"></i>
 
+                    </a>
 
+                </div>
 
+            </div>
 
+        </div>
 
+        <div class="fixed-bottom-box">
 
+            <div class="weui-cells weui-cells_checkbox radio-form">
 
+                <label class="weui-cell weui-check__label" for="buy">
 
+                    <div class="weui-cell__hd">
 
+                        <input type="checkbox" class="weui-check" name="buyService" id="buy" checked />
 
+                        <i class="weui-icon-checked"></i>
 
+                    </div>
 
+                    <div class="weui-cell__bd read">
 
+                        <p>
 
+                            我已阅读，理解并接受
 
+                            <a href="abc.html">
 
+                                《剑鱼标讯线上购买与服务条款》
 
+                            </a>
 
+                        </p>
 
+                    </div>
 
+                </label>
 
+            </div>
 
+            <div class="price">
 
+                <label></label>
 
+                <p>
 
+                    <span>&yen;610.80</span>
 
+                    <strong>&yen;0.00</strong>
 
+                </p> 
+            </div>
 
+            <div class="form-btn">
 
+                <!-- 支付 -->
 
+                <button class="btn enter" disabled>立即续费</button>
 
+            </div>
 
+        </div>
 
+
 
+        <!-- 选择行业 -->
 
+        <div class="js_dialog time_cycle" id="time_cycle" style="display: none;">
 
+            <div class="weui-mask"></div>
 
+            <div class="box">
 
+                <div class="box_hd">
 
+                    <h3>订阅周期</h3>
 
+                    <span class="cancel">取消</span>
 
+                </div>
 
+                <div class="box_bd">
 
+                    <div class="tips monthly_tips" style="display: none">
 
+                        3-6个月6折，大于6个月5折
 
+                    </div>
 
+                    <div class="tips yearly_tips" style="display: none">
 
+                        1-2年5折，3年4折
 
+                    </div>
 
+                    <div class="bd_select">
 
+                        <div class="weui-cells weui-cells_checkbox choose-form">
 
+                            <label class="weui-cell weui-check__label monthly_label" for="monthly">
 
+                                <div class="weui-cell__hd">
 
+                                    <input type="radio" class="weui-check monthly" name="time" value="month"
 
+                                        id="monthly" />
 
+                                    <i class="weui-icon-checked"></i>
 
+                                </div>
 
+                                <div class="weui-cell__bd">
 
+                                    <p>按月订阅</p>
 
+                                </div>
 
+                            </label>
 
+                            <div class="number_box" id="number_box_month" data-numbox-step="1" data-numbox-min="1"
 
+                                data-numbox-max="12">
 
+                                <button class="weui-btn weui-btn_plain-default" type="button">
 
+                                    <div class="jy_icon decrease"></div>
 
+                                </button>
 
+                                <span class="month_number">6</span>
 
+                                <button class="weui-btn weui-btn_plain-default add" type="button">
 
+                                    <div class="jy_icon increase"></div>
 
+                                </button>
 
+                            </div>
 
+                        </div>
 
+                        <div class="weui-cells weui-cells_checkbox choose-form">
 
+                            <label class="weui-cell weui-check__label yearly_label" for="yearly">
 
+                                <div class="weui-cell__hd">
 
+                                    <input type="radio" class="weui-check yearly" name="time" value="year"
 
+                                        id="yearly" />
 
+                                    <i class="weui-icon-checked"></i>
 
+                                </div>
 
+                                <div class="weui-cell__bd">
 
+                                    <p>按年订阅</p>
 
+                                </div>
 
+                            </label>
 
+                            <div class="number_box" id="number_box_year">
 
+                                <span class="year_number">1年</span>
 
+                                <span class="year_number">2年</span>
 
+                                <span class="year_number">3年</span>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                <div class="form-btn">
 
+                    <button class="btn enter" disabled id="enter_period">确认</button>
 
+                </div>
 
+            </div>
 
+        </div>
 
+        <!-- 选择支付方式 -->
 
+        <div class="js_dialog pay_way" id="pay_way" style="display: none;">
 
+            <div class="weui-mask"></div>
 
+            <div class="box">
 
+                <div class="box_hd">
 
+                    <span></span>
 
+                    <h3>支付方式</h3>
 
+                    <span class="cancel">取消</span>
 
+                </div>
 
+                <div class="box_bd">
 
+                    <div class="weui-cells weui-cells_checkbox choose-form">
 
+                        <label class="weui-cell weui-check__label wx_label" for="wx">
 
+                            <div class="weui-cell__bd read">
 
+                                <p><img src="../image/weixin.png?v={{Msg "seo" "version"}}">微信支付</p>
 
+                            </div>
 
+                            <div class="weui-cell__hd">
 
+                                <input type="radio" class="weui-check" name="way" value="微信支付" id="wx" checked />
 
+                                <i class="weui-icon-checked"></i>
 
+                            </div>
 
+                        </label>
 
+                        <label class="weui-cell weui-check__label zfb_label" for="zfb">
 
+                            <div class="weui-cell__bd read">
 
+                                <p><img src="../image/zhifubao.png?v={{Msg "seo" "version"}}">支付宝支付</p>
 
+                            </div>
 
+                            <div class="weui-cell__hd">
 
+                                <input type="radio" class="weui-check" name="way" value="支付宝支付" id="zfb" />
 
+                                <i class="weui-icon-checked"></i>
 
+                            </div>
 
+                        </label>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    <script src="../js/jquery-2.1.4.js"></script>
 
+    <script src="../js/fastclick.js"></script>
 
+    <script src="https://res.wx.qq.com/open/libs/weuijs/1.1.4/weui.min.js"></script>
 
+    <script>
 
+        // 隐藏dialog选择框
 
+        function hideDialog() {
 
+            $('#pay_way').hide(200);
 
+            $('#time_cycle').hide(200);
 
+        }
 
+        $('.weui-mask').click(hideDialog);
 
+        $('.cancel').click(hideDialog);
 
+
 
+        // 选择行业
 
+        $('.select_cycle > a').click(function () {
 
+            $('#time_cycle').show(200);
 
+        })
 
+        // 对订阅时间选择的input绑定点击事件
 
+        $('#time_cycle input:radio[name="time"]').on('click', function (e) {
 
+            // 解除确认按钮的锁定
 
+            $('#time_cycle .form-btn button').removeAttr('disabled')
 
+
 
+            if ($(e.target).hasClass('monthly')) {
 
+                // 按月订阅
 
+                // 显示隐藏tips提示
 
+                $('#time_cycle .tips.monthly_tips').show();
 
+                $('#time_cycle .tips.yearly_tips').hide();
 
+
 
+                $('#number_box_month').addClass('active');
 
+                $('#number_box_year span').removeClass('active');
 
+            } else {
 
+                // 按年订阅
 
+                $('#time_cycle .tips.yearly_tips').show();
 
+                $('#time_cycle .tips.monthly_tips').hide();
 
+
 
+                $('#number_box_month').removeClass('active');
 
+                $('#number_box_year span:eq(0)').addClass('active');
 
+            }
 
+        })
 
+
 
+        // 选择支付方式
 
+        $('.select_payment .choose_way').click(function () {
 
+            $('#pay_way').show(200);
 
+        })
 
+        // 对支付方式选择的input绑定点击事件
 
+        $('#pay_way input:radio[name="way"]').click(function () {
 
+            var checkValue = $('input:radio[name="way"]:checked').val();
 
+            console.log(checkValue);
 
+            $('.pay_way').hide(200);
 
+            $('.pay_mode .select_payment .choose_way.info').html(checkValue);
 
+        });
 
+
 
+        // 控制月份number_box的事件
 
+        $('#number_box_month').on('click', 'button', function (e) {
 
+            var $number = $('#number_box_month span.month_number');
 
+            // var $input = $('#time_cycle input:radio[name="time"]');
 
+            var $monthlyInput = $('#monthly');
 
+
 
+            // 未整理的data数组，里面的值都是字符串
 
+            var preData = e.delegateTarget.dataset
 
+            var currentNum = parseInt($number.text());
 
+            var data = {};
 
+            // 把字符串转换成数字
 
+            for (var i in preData) {
 
+                data[i] = preData[i] - 0
 
+            }
 
+
 
+            if (!$monthlyInput.prop('checked')) {
 
+                return
 
+            }
 
+            // 判断是点击的是+ 还是-
 
+            if ($(e.target).hasClass('add')) {
 
+                // 点的+
 
+                // currentNum = currentNum >= 12 ? 12 : currentNum + 1;
 
+                currentNum = currentNum >= data.numboxMax ? data.numboxMax : currentNum + data.numboxStep;
 
+            } else {
 
+                // 点的-
 
+                // currentNum = currentNum <= 1 ? 1 : currentNum - 1;
 
+                currentNum = currentNum <= data.numboxMin ? data.numboxMin : currentNum - data.numboxStep;
 
+            }
 
+            $number.text(currentNum)
 
+
 
+            var firstButton = $('#number_box_month button:first')
 
+            var lastButton = $('#number_box_month button:last')
 
+
 
+            // 如果为操作后的结果为1，则锁定减号按钮
 
+            if (currentNum === data.numboxMin) {
 
+                firstButton.attr('disabled', true)
 
+            } else {
 
+                firstButton.removeAttr('disabled')
 
+            }
 
+            // 如果为操作后的结果为12，则锁定加号按钮
 
+            if (currentNum === data.numboxMax) {
 
+                lastButton.attr('disabled', true)
 
+            } else {
 
+                lastButton.removeAttr('disabled')
 
+            }
 
+        })
 
+
 
+        // 控制年份number_box的事件
 
+        $('#number_box_year').on('click', 'span', function (e) {
 
+            // var $input = $('#time_cycle input:radio[name="time"]');
 
+            var $yearlyInput = $('#yearly');
 
+
 
+            if (!$yearlyInput.prop('checked')) {
 
+                return
 
+            }
 
+            $(this).addClass('active').siblings().removeClass('active')
 
+        })
 
+        // 确认订阅周期
 
+        $('#enter_period').on('click',function(){
 
+            var val;
 
+            $('input[name="time"]').each(function (i,v) { 
+                let isChecked = $(v).is(':checked')
 
+                if($(v).is(':checked') === true && $('.year_number').hasClass('active')){
 
+                    val = $('.active').html()
 
+                    $('#time_cycle').hide(function () { 
+                        $('.choose_time').val(val)
 
+                     })
 
+                }else if($(v).is(':checked') === true){
 
+                    val = $('.month_number').html();
 
+                    $('#time_cycle').hide(function () { 
+                        $('.choose_time').val(val + '个月')
 
+                     })                          
+                }
 
+            })
 
+        })
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 49 - 0
src/web/templates/weixin/vipsubscribe/tmp/vip_service_expire.html
Файл харах 

@@ -0,0 +1,49 @@
 
+<!DOCTYPE html>
 
+<html>
 
+	<head>
 
+		<meta charset="utf-8">
 
+		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 
+		<title>VIP订阅</title>
 
+		<script src="/vipsubscribe/js/rem.js?v={{Msg "seo" "version"}}"></script>
 
+		<link rel="stylesheet" type="text/css" href="/vipsubscribe/css/base.css?v={{Msg "seo" "version"}}"/>
 
+		<link rel="stylesheet" href="/vipsubscribe/css/weui.min.css?v={{Msg "seo" "version"}}">
 
+		<link rel="stylesheet" href="/vipsubscribe/iconfont/iconfont.css?v={{Msg "seo" "version"}}">
 
+		<link rel="stylesheet" href="/vipsubscribe/css/vip_service_expire.css?v={{Msg "seo" "version"}}">
 
+	</head>
 
+	<body>
 
+		<div class="vip_service_expire layout_top-bottom">
 
+			<div class="service_expire_tip layou_top">
 
+                <div class="tip_title_box">
 
+                    <img class="nothing" src="/vipsubscribe/image/nothing.png?v={{Msg "seo" "version"}}" alt="">
 
+                    <div class="tip">
 
+                        <div>您的VIP订阅服务,已到期！</div>
 
+                        <!-- <div>VIP订阅服务即将到期,请及时续费！</div> -->
 
+                        <div class="validity_date">
 
+                            <span>有效日期：</span>
 
+                            <span>2019.07.31-2019.12.31</span>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                <div class="recommend_box">
 
+                    <div class="recommend_title">
 
+                        以下区域、行业的订阅推送已停止，为了不影响您的使用，请立即续费！
 
+                    </div>
 
+                    <div class="recommend_info">
 
+                        <div class="info_area">
 
+                            <span>区域：</span>
 
+                            <span class="text">河南省、郑州市、洛阳市、淮南市河南省、郑州市、洛阳市、淮南市河南省、郑州市、洛阳市、阳市、洛阳市、洛阳市、洛阳市、洛阳市、淮南市</span>
 
+                        </div>
 
+                        <div class="info_industry">
 
+                            <span>行业：</span>
 
+                            <span class="text">保监、城管保监、城管保监、城管保监、城管保监、城管保监、城管保监、城管</span>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+			<div class="renew_box">
 
+                <button class="renew_service" onclick="window.location.href='vip_renew.html'">续费</button>
 
+                <button class="free_service">使用免费订阅</button>
 
+            </div>
 
+		</div>
 
+	</body>
 
+</html>

+ 109 - 0
src/web/templates/weixin/vipsubscribe/tmp/vip_sub_detail.html
Файл харах 

@@ -0,0 +1,109 @@
 
+<!DOCTYPE html>
 
+<html>
 
+	<head>
 
+		<meta charset="utf-8">
 
+		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 
+		<title>VIP订阅</title>
 
+		<script src="/vipsubscribe/js/rem.js?v={{Msg "seo" "version"}}"></script>
 
+		<link rel="stylesheet" type="text/css" href="/vipsubscribe/css/base.css?v={{Msg "seo" "version"}}"/>
 
+		<link rel="stylesheet" href="/vipsubscribe/css/weui.min.css?v={{Msg "seo" "version"}}">
 
+		<link rel="stylesheet" href="/vipsubscribe/iconfont/iconfont.css?v={{Msg "seo" "version"}}">
 
+		<link rel="stylesheet" href="/vipsubscribe/css/vip_sub_detail.css?v={{Msg "seo" "version"}}">
 
+	</head>
 
+	<body>
 
+		<div class="vip_sub_detail">
 
+			<ul class="detail_container">
 
+                <li class="detail_item">
 
+                    <div class="item_info item_area">
 
+                        <span class="label">已购买区域：</span>
 
+                        <span class="label_for">河南省、郑州市、洛阳市、淮南市/河南省、郑州市、洛阳市、淮南市河南省、郑州市、洛阳市、淮南市</span>
 
+                    </div>
 
+                    <div class="item_info item_industry">
 
+                        <span class="label">已购买行业：</span>
 
+                        <span class="label_for">保监、城管保监、城管保监、城管保监、城管保监、城管保监、城管</span>
 
+                    </div>
 
+                    <div class="item_info item_cycle">
 
+                        <span class="label">订阅周期：</span>
 
+                        <span class="label_for">10个月</span>
 
+                    </div>
 
+                    <div class="item_info item_validity">
 
+                        <span class="label">有效日期：</span>
 
+                        <span class="label_for">2020.01.31 - 2020.10.31</span>
 
+                    </div>
 
+                </li>
 
+                <li class="detail_item">
 
+                    <div class="item_info item_area">
 
+                        <span class="label">已购买区域：</span>
 
+                        <span class="label_for">河南省、郑州市、洛阳市、淮南市/河南省、郑州市、洛阳市、淮南市河南省、郑州市、洛阳市、淮南市</span>
 
+                    </div>
 
+                    <div class="item_info item_industry">
 
+                        <span class="label">已购买行业：</span>
 
+                        <span class="label_for">保监、城管保监、城管保监、城管保监、城管保监、城管保监、城管</span>
 
+                    </div>
 
+                    <div class="item_info item_cycle">
 
+                        <span class="label">订阅周期：</span>
 
+                        <span class="label_for">10个月</span>
 
+                    </div>
 
+                    <div class="item_info item_validity">
 
+                        <span class="label">有效日期：</span>
 
+                        <span class="label_for">2020.01.31 - 2020.10.31</span>
 
+                    </div>
 
+                </li>
 
+                <li class="detail_item">
 
+                    <div class="item_info item_area">
 
+                        <span class="label">已购买区域：</span>
 
+                        <span class="label_for">河南省、郑州市、洛阳市、淮南市/河南省、郑州市、洛阳市、淮南市河南省、郑州市、洛阳市、淮南市</span>
 
+                    </div>
 
+                    <div class="item_info item_industry">
 
+                        <span class="label">已购买行业：</span>
 
+                        <span class="label_for">保监、城管保监、城管保监、城管保监、城管保监、城管保监、城管</span>
 
+                    </div>
 
+                    <div class="item_info item_cycle">
 
+                        <span class="label">订阅周期：</span>
 
+                        <span class="label_for">10个月</span>
 
+                    </div>
 
+                    <div class="item_info item_validity">
 
+                        <span class="label">有效日期：</span>
 
+                        <span class="label_for">2020.01.31 - 2020.10.31</span>
 
+                    </div>
 
+                </li>
 
+                <li class="detail_item">
 
+                    <div class="item_info item_area">
 
+                        <span class="label">已购买区域：</span>
 
+                        <span class="label_for">河南省、郑州市、洛阳市、淮南市/河南省、郑州市、洛阳市、淮南市河南省、郑州市、洛阳市、淮南市</span>
 
+                    </div>
 
+                    <div class="item_info item_industry">
 
+                        <span class="label">已购买行业：</span>
 
+                        <span class="label_for">保监、城管保监、城管保监、城管保监、城管保监、城管保监、城管</span>
 
+                    </div>
 
+                    <div class="item_info item_cycle">
 
+                        <span class="label">订阅周期：</span>
 
+                        <span class="label_for">10个月</span>
 
+                    </div>
 
+                    <div class="item_info item_validity">
 
+                        <span class="label">有效日期：</span>
 
+                        <span class="label_for">2020.01.31 - 2020.10.31</span>
 
+                    </div>
 
+                </li>
 
+                <li class="detail_item">
 
+                    <div class="item_info item_area">
 
+                        <span class="label">已购买区域：</span>
 
+                        <span class="label_for">河南省、郑州市、洛阳市、淮南市/河南省、郑州市、洛阳市、淮南市河南省、郑州市、洛阳市、淮南市</span>
 
+                    </div>
 
+                    <div class="item_info item_industry">
 
+                        <span class="label">已购买行业：</span>
 
+                        <span class="label_for">保监、城管保监、城管保监、城管保监、城管保监、城管保监、城管</span>
 
+                    </div>
 
+                    <div class="item_info item_cycle">
 
+                        <span class="label">订阅周期：</span>
 
+                        <span class="label_for">10个月</span>
 
+                    </div>
 
+                    <div class="item_info item_validity">
 
+                        <span class="label">有效日期：</span>
 
+                        <span class="label_for">2020.01.31 - 2020.10.31</span>
 
+                    </div>
 
+                </li>
 
+            </ul>
 
+		</div>
 
+	</body>
 
+</html>

+ 414 - 0
src/web/templates/weixin/vipsubscribe/tmp/vip_update.html
Файл харах 

@@ -0,0 +1,414 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport"
 
+        content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
+    <title>VIP订阅升级</title>
 
+    <meta name="apple-mobile-web-app-capable" content="yes">
 
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
+    <script src="/vipsubscribe/js/rem.js?v={{Msg "seo" "version"}}"></script>
 
+    <link rel="stylesheet" type="text/css" href="/vipsubscribe/css/weui.min.css?v={{Msg "seo" "version"}}" />
 
+    <link rel="stylesheet" type="text/css" href="/vipsubscribe/css/base.css?v={{Msg "seo" "version"}}" />
 
+    <link rel="stylesheet" type="text/css" href="/vipsubscribe/iconfont/iconfont.css?v={{Msg "seo" "version"}}" />
 
+    <link rel="stylesheet" href="/vipsubscribe/css/public.css?v={{Msg "seo" "version"}}">
 
+    <link rel="stylesheet" href="/vipsubscribe/css/vip_update.css?v={{Msg "seo" "version"}}">
 
+</head>
 
+
 
+<body class="no-touch">
 
+    <div class="vip_update">
 
+        <div class="choose_condition">
 
+            <p class="update_tip">提示：订阅升级可在已购买的服务基础上，增加区域、行业、以及延长订阅周期!</p>
 
+            <ul class="chooseList">
 
+                <li class="choose_item">
 
+                    <a href="choose_area.html?city=北京市、上海市、广州市">
 
+                        <span class="label">区域</span>
 
+                        <input type="text" disabled value="" placeholder="选择全国、省份、地市" class="info">
 
+                        <i class="iconfont icon-arrow"></i>
 
+                    </a>
 
+                    <p class="add_tips">已新增 1 个省级区域、4 个地市</p>
 
+                </li>
 
+                <li class="choose_item">
 
+                    <a href="choose_industry.html">
 
+                        <span class="label">行业</span>
 
+                        <input type="text" disabled value="" placeholder="选择采购单位行业" class="info">
 
+                        <i class="iconfont icon-arrow"></i>
 
+                    </a>
 
+                    <p class="add_tips">已新增 2 个行业</p>
 
+                </li>
 
+                <!-- <li class="choose_item select_cycle">
 
+                    <a href="javascript:;">
 
+                        <span class="label">订阅周期</span>
 
+                        <input type="text" disabled value="" placeholder="选择年、月" class="info choose_time">
 
+                        <i class="iconfont icon-arrow choose_time"></i>
 
+                    </a>
 
+                </li> -->
 
+                <li class="choose_item choose_effect_date">
 
+                    <a href="javascript:;">
 
+                        <span class="label">生效日期</span>
 
+                        <span class="info" id="effect_date_name">立即生效，需支付本月费用</span>
 
+                        <i class="iconfont icon-arrow choose_time"></i>
 
+                    </a>
 
+                </li>
 
+            </ul>
 
+            <div class="pay_mode">
 
+                <div class="select_payment choose_item">
 
+                    <a href="javascript:;">
 
+                        <span class="label">支付方式</span>
 
+                        <span class="info choose_way">微信支付</span>
 
+                        <i class="iconfont icon-arrow choose_way"></i>
 
+                    </a>
 
+                </div>
 
+                <div class="vip_rules">
 
+                    <div class="vip_prise_table">
 
+                        <table class="monthly">
 
+                            <caption class="table_title">- VIP订阅价格 -</caption>
 
+                            <tr>
 
+                                <td colspan="2">按月购买</td>
 
+                            </tr>
 
+                            <tr>
 
+                                <td>5.8元 月/市/行业</td>
 
+                                <td>18元 月/市/全行业</td>
 
+                            </tr>
 
+                            <tr>
 
+                                <td>11.8元 月/省/行业</td>
 
+                                <td>38元 月/省/全行业</td>
 
+                            </tr>
 
+                            <tr>
 
+                                <td>118元 月/全国/行业</td>
 
+                                <td>388元 月/全国/全行业</td>
 
+                            </tr>
 
+                        </table>
 
+                        <table class="yearly">
 
+                            <tr>
 
+                                <td colspan="2">按年购买</td>
 
+                            </tr>
 
+                            <tr>
 
+                                <td>58元 年/市/行业</td>
 
+                                <td>180元 年/市/全行业</td>
 
+                            </tr>
 
+                            <tr>
 
+                                <td>118元 年/省/行业</td>
 
+                                <td>380元 年/省/全行业</td>
 
+                            </tr>
 
+                            <tr>
 
+                                <td>1180元 年/全国/行业</td>
 
+                                <td>3880元 年/全国/全行业</td>
 
+                            </tr>
 
+                        </table>
 
+                        <dl class="tips">
 
+                            <dt>购买须知：</dt>
 
+                            <dd>套餐周期内，不支持套餐降级，续费可降级；</dd>
 
+                            <dd>用户最多购买/续费3年套餐；</dd>
 
+                            <dd>支持套餐升级，补差价（按月进行补差价，不足一个月按一个月计算)。</dd>
 
+                        </dl>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+        <div class="fixed-bottom-box">
 
+            <div class="weui-cells weui-cells_checkbox radio-form">
 
+                <label class="weui-cell weui-check__label" for="buy">
 
+                    <div class="weui-cell__hd">
 
+                        <input type="checkbox" class="weui-check" name="buyService" id="buy" checked />
 
+                        <i class="weui-icon-checked"></i>
 
+                    </div>
 
+                    <div class="weui-cell__bd read">
 
+                        <p>
 
+                            我已阅读，理解并接受
 
+                            <a href="abc.html">
 
+                                《剑鱼标讯线上购买与服务条款》
 
+                            </a>
 
+                        </p>
 
+                    </div>
 
+                </label>
 
+            </div>
 
+            <div class="price">
 
+                <label>需补差价：</label>
 
+                <p>
 
+                    <span>&yen;610.80</span>
 
+                    <strong>&yen;0.00</strong>
 
+                </p> 
+            </div>
 
+            <div class="form-btn">
 
+                <button class="btn enter" disabled>立即升级</button>
 
+            </div>
 
+        </div>
 
+
 
+        <!-- 选择周期  暂时不加 -->
 
+        <div class="js_dialog time_cycle" id="time_cycle" style="display: none;">
 
+            <div class="weui-mask"></div>
 
+            <div class="box">
 
+                <div class="box_hd">
 
+                    <h3>订阅周期</h3>
 
+                    <span class="cancel">取消</span>
 
+                </div>
 
+                <div class="box_bd">
 
+                    <div class="tips monthly_tips" style="display: none">
 
+                        3-6个月6折，大于6个月5折
 
+                    </div>
 
+                    <div class="tips yearly_tips" style="display: none">
 
+                        1-2年5折，3年4折
 
+                    </div>
 
+                    <div class="bd_select">
 
+                        <div class="weui-cells weui-cells_checkbox choose-form">
 
+                            <label class="weui-cell weui-check__label monthly_label" for="monthly">
 
+                                <div class="weui-cell__hd">
 
+                                    <input type="radio" class="weui-check monthly" name="time" value="month"
 
+                                        id="monthly" />
 
+                                    <i class="weui-icon-checked"></i>
 
+                                </div>
 
+                                <div class="weui-cell__bd">
 
+                                    <p>按月订阅</p>
 
+                                </div>
 
+                            </label>
 
+                            <div class="number_box" id="number_box_month" data-numbox-step="1" data-numbox-min="1"
 
+                                data-numbox-max="12">
 
+                                <button class="weui-btn weui-btn_plain-default" type="button">
 
+                                    <div class="jy_icon decrease"></div>
 
+                                </button>
 
+                                <span class="month_number">6</span>
 
+                                <button class="weui-btn weui-btn_plain-default add" type="button">
 
+                                    <div class="jy_icon increase"></div>
 
+                                </button>
 
+                            </div>
 
+                        </div>
 
+                        <div class="weui-cells weui-cells_checkbox choose-form">
 
+                            <label class="weui-cell weui-check__label yearly_label" for="yearly">
 
+                                <div class="weui-cell__hd">
 
+                                    <input type="radio" class="weui-check yearly" name="time" value="year"
 
+                                        id="yearly" />
 
+                                    <i class="weui-icon-checked"></i>
 
+                                </div>
 
+                                <div class="weui-cell__bd">
 
+                                    <p>按年订阅</p>
 
+                                </div>
 
+                            </label>
 
+                            <div class="number_box" id="number_box_year">
 
+                                <span class="year_number">1年</span>
 
+                                <span class="year_number">2年</span>
 
+                                <span class="year_number">3年</span>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                <div class="form-btn">
 
+                    <button class="btn enter" disabled id="enter_period">确认</button>
 
+                </div>
 
+            </div>
 
+        </div>
 
+        <!-- 选择生效日期 -->
 
+        <div class="js_dialog effective_date" id="effective_date" style="display: none;">
 
+            <div class="weui-mask"></div>
 
+            <div class="box">
 
+                <div class="box_hd">
 
+                    <span style="font-size:0.32rem;">生效日期</span>
 
+                    <h3></h3>
 
+                    <span class="cancel">取消</span>
 
+                </div>
 
+                <div class="box_bd">
 
+                    <div class="weui-cells weui-cells_checkbox choose-form">
 
+                        <label class="weui-cell weui-check__label now_label" for="nowTime">
 
+                            <div class="weui-cell__bd read">
 
+                                <p class="effective_name">立即生效，需支付本月费用</p>
 
+                                <p class="effective_time">2019.08.23 - 2020.06.06</p>
 
+                            </div>
 
+                            <div class="weui-cell__hd">
 
+                                <input type="radio" class="weui-check" name="date" value="立即生效，需支付本月费用" id="nowTime" checked />
 
+                                <i class="weui-icon-checked"></i>
 
+                            </div>
 
+                        </label>
 
+                        <label class="weui-cell weui-check__label next_label" for="nextMonth">
 
+                            <div class="weui-cell__bd read">
 
+                                <p class="effective_name">9月1日生效</p>
 
+                                <p class="effective_time">2019.09.01 - 2020.06.06</p>
 
+                            </div>
 
+                            <div class="weui-cell__hd">
 
+                                <input type="radio" class="weui-check" name="date" value="9月1日生效" id="nextMonth" />
 
+                                <i class="weui-icon-checked"></i>
 
+                            </div>
 
+                        </label>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+        <!-- 选择支付方式 -->
 
+        <div class="js_dialog pay_way" id="pay_way" style="display: none;">
 
+            <div class="weui-mask"></div>
 
+            <div class="box">
 
+                <div class="box_hd">
 
+                    <span></span>
 
+                    <h3>支付方式</h3>
 
+                    <span class="cancel">取消</span>
 
+                </div>
 
+                <div class="box_bd">
 
+                    <div class="weui-cells weui-cells_checkbox choose-form">
 
+                        <label class="weui-cell weui-check__label wx_label" for="wx">
 
+                            <div class="weui-cell__bd read">
 
+                                <p><img src="/vipsubscribe/image/weixin.png?v={{Msg "seo" "version"}}">微信支付</p>
 
+                            </div>
 
+                            <div class="weui-cell__hd">
 
+                                <input type="radio" class="weui-check" name="way" value="微信支付" id="wx" checked />
 
+                                <i class="weui-icon-checked"></i>
 
+                            </div>
 
+                        </label>
 
+                        <label class="weui-cell weui-check__label zfb_label" for="zfb">
 
+                            <div class="weui-cell__bd read">
 
+                                <p><img src="/vipsubscribe/image/zhifubao.png?v={{Msg "seo" "version"}}">支付宝支付</p>
 
+                            </div>
 
+                            <div class="weui-cell__hd">
 
+                                <input type="radio" class="weui-check" name="way" value="支付宝支付" id="zfb" />
 
+                                <i class="weui-icon-checked"></i>
 
+                            </div>
 
+                        </label>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    <script src="/vipsubscribe/js/jquery-2.1.4.js?v={{Msg "seo" "version"}}"></script>
 
+    <script src="/vipsubscribe/js/fastclick.js?v={{Msg "seo" "version"}}"></script>
 
+    <script src="https://res.wx.qq.com/open/libs/weuijs/1.1.4/weui.min.js"></script>
 
+    <script>
 
+        // 隐藏dialog选择框
 
+        function hideDialog() {
 
+            $('#pay_way').hide(200);
 
+            $('#time_cycle').hide(200);
 
+            $('#effective_date').hide(200);
 
+        }
 
+        $('.weui-mask').click(hideDialog);
 
+        $('.cancel').click(hideDialog);
 
+
 
+       
+        // 选择支付方式
 
+        $('.select_payment .choose_way').click(function () {
 
+            $('#pay_way').show(200);
 
+        })
 
+        // 对支付方式选择的input绑定点击事件
 
+        $('#pay_way input:radio[name="way"]').click(function () {
 
+            var checkValue = $('input:radio[name="way"]:checked').val();
 
+            console.log(checkValue);
 
+            $('.pay_way').hide(200);
 
+            $('.pay_mode .select_payment .choose_way.info').html(checkValue);
 
+        });
 
+         // 选择生效日期
 
+        $('.choose_effect_date > a').click(function () {
 
+            $('#effective_date').show(200);
 
+        })
 
+        // 对生效日期方式选择的input绑定点击事件
 
+        $('#effective_date input:radio[name="date"]').click(function () {
 
+            var checkValue = $('input:radio[name="date"]:checked').val();
 
+            console.log(checkValue);
 
+            $('#effective_date').hide(200);
 
+            $('#effect_date_name').html(checkValue);
 
+        });
 
+        
+
 
+        /* 
+         // 选择周期
 
+        $('.select_cycle > a').click(function () {
 
+            $('#time_cycle').show(200);
 
+        })
 
+        // 对订阅时间选择的input绑定点击事件
 
+        $('#time_cycle input:radio[name="time"]').on('click', function (e) {
 
+            // 解除确认按钮的锁定
 
+            $('#time_cycle .form-btn button').removeAttr('disabled')
 
+
 
+            if ($(e.target).hasClass('monthly')) {
 
+                // 按月订阅
 
+                // 显示隐藏tips提示
 
+                $('#time_cycle .tips.monthly_tips').show();
 
+                $('#time_cycle .tips.yearly_tips').hide();
 
+
 
+                $('#number_box_month').addClass('active');
 
+                $('#number_box_year span').removeClass('active');
 
+            } else {
 
+                // 按年订阅
 
+                $('#time_cycle .tips.yearly_tips').show();
 
+                $('#time_cycle .tips.monthly_tips').hide();
 
+
 
+                $('#number_box_month').removeClass('active');
 
+                $('#number_box_year span:eq(0)').addClass('active');
 
+            }
 
+        })
 
+        // 控制月份number_box的事件
 
+        $('#number_box_month').on('click', 'button', function (e) {
 
+            var $number = $('#number_box_month span.month_number');
 
+            // var $input = $('#time_cycle input:radio[name="time"]');
 
+            var $monthlyInput = $('#monthly');
 
+
 
+            // 未整理的data数组，里面的值都是字符串
 
+            var preData = e.delegateTarget.dataset
 
+            var currentNum = parseInt($number.text());
 
+            var data = {};
 
+            // 把字符串转换成数字
 
+            for (var i in preData) {
 
+                data[i] = preData[i] - 0
 
+            }
 
+
 
+            if (!$monthlyInput.prop('checked')) {
 
+                return
 
+            }
 
+            // 判断是点击的是+ 还是-
 
+            if ($(e.target).hasClass('add')) {
 
+                // 点的+
 
+                // currentNum = currentNum >= 12 ? 12 : currentNum + 1;
 
+                currentNum = currentNum >= data.numboxMax ? data.numboxMax : currentNum + data.numboxStep;
 
+            } else {
 
+                // 点的-
 
+                // currentNum = currentNum <= 1 ? 1 : currentNum - 1;
 
+                currentNum = currentNum <= data.numboxMin ? data.numboxMin : currentNum - data.numboxStep;
 
+            }
 
+            $number.text(currentNum)
 
+
 
+            var firstButton = $('#number_box_month button:first')
 
+            var lastButton = $('#number_box_month button:last')
 
+
 
+            // 如果为操作后的结果为1，则锁定减号按钮
 
+            if (currentNum === data.numboxMin) {
 
+                firstButton.attr('disabled', true)
 
+            } else {
 
+                firstButton.removeAttr('disabled')
 
+            }
 
+            // 如果为操作后的结果为12，则锁定加号按钮
 
+            if (currentNum === data.numboxMax) {
 
+                lastButton.attr('disabled', true)
 
+            } else {
 
+                lastButton.removeAttr('disabled')
 
+            }
 
+        })
 
+
 
+        // 控制年份number_box的事件
 
+        $('#number_box_year').on('click', 'span', function (e) {
 
+            // var $input = $('#time_cycle input:radio[name="time"]');
 
+            var $yearlyInput = $('#yearly');
 
+
 
+            if (!$yearlyInput.prop('checked')) {
 
+                return
 
+            }
 
+            $(this).addClass('active').siblings().removeClass('active')
 
+        })
 
+        // 确认订阅周期
 
+        $('#enter_period').on('click',function(){
 
+            var val;
 
+            $('input[name="time"]').each(function (i,v) { 
+                let isChecked = $(v).is(':checked')
 
+                if($(v).is(':checked') === true && $('.year_number').hasClass('active')){
 
+                    val = $('.active').html()
 
+                    $('#time_cycle').hide(function () { 
+                        $('.choose_time').val(val)
 
+                     })
 
+                }else if($(v).is(':checked') === true){
 
+                    val = $('.month_number').html();
 
+                    $('#time_cycle').hide(function () { 
+                        $('.choose_time').val(val + '个月')
 
+                     })                          
+                }
 
+            })
 
+        })*/
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 141 - 0
src/web/templates/weixin/vipsubscribe/vip_introduce.html
Файл харах 

@@ -0,0 +1,141 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
+    <title>VIP订阅</title>
 
+    <meta name="apple-mobile-web-app-capable" content="yes">
 
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
+    <script src="/vipsubscribe/js/rem.js?v={{Msg "seo" "version"}}"></script>
 
+    <link rel="stylesheet" type="text/css" href="/vipsubscribe/css/base.css?v={{Msg "seo" "version"}}" />
 
+    <link rel="stylesheet" type="text/css" href="/vipsubscribe/iconfont/iconfont.css?v={{Msg "seo" "version"}}" />
 
+    <link rel="stylesheet" href="/vipsubscribe/css/public.css?v={{Msg "seo" "version"}}">
 
+    <link rel="stylesheet" href="/vipsubscribe/css/vip_introduce.css?v={{Msg "seo" "version"}}">
 
+</head>
 
+<body>
 
+    <div class="vip_introduce">
 
+        <div class="main">
 
+            <div class="banner">
 
+                <div class="banner_screen">
 
+                    <h3 class="name">VIP 订阅专属服务</h3>
 
+                    <p class="introduce">VIP subscription service</p>
 
+                </div>
 
+            </div>
 
+            <div class="group">
 
+                <div class="group_title">
 
+                    <img src="/vipsubscribe/image/group_title.png?v={{Msg "seo" "version"}}" alt="">
 
+                    <span>VIP订阅服务特权</span>
 
+                    <img src="/vipsubscribe/image/group_title.png?v={{Msg "seo" "version"}}" class="pic_mark" alt="">
 
+                </div>
 
+                <div class="group_cont">
 
+                    <div class="grid">
 
+                        <div class="grid_item">
 
+                            <img src="/vipsubscribe/image/group_1.png?v={{Msg "seo" "version"}}" alt="">
 
+                            <p>最多 300 组关键词</p>
 
+                        </div>
 
+                        <div class="grid_item">
 
+                            <img src="/vipsubscribe/image/group_2.png?v={{Msg "seo" "version"}}" alt="">
 
+                            <p>每天最多接收 2000 条</p>
 
+                        </div>
 
+                        <div class="grid_item">
 
+                            <img src="/vipsubscribe/image/group_3.png?v={{Msg "seo" "version"}}" alt="">
 
+                            <p>数据周报、月报</p>
 
+                        </div>
 
+                        <div class="grid_item">
 
+                            <img src="/vipsubscribe/image/group_4.png?v={{Msg "seo" "version"}}" alt="">
 
+                            <p>订阅区域精确到市</p>
 
+                        </div>
 
+                    </div>  
+                </div>
 
+            </div>
 
+            <div class="group">
 
+                    <div class="group_title">
 
+                        <img src="/vipsubscribe/image/group_title.png?v={{Msg "seo" "version"}}" alt="">
 
+                        <span>整体服务对比</span>
 
+                        <img src="/vipsubscribe/image/group_title.png?v={{Msg "seo" "version"}}" class="pic_mark" alt="">
 
+                    </div>
 
+                    <div class="group_cont">
 
+                        <table class="table"  cellpadding="0" cellspacing="0">
 
+                            <thead>
 
+                                <tr>
 
+                                    <th class="free">免费版</th>
 
+                                    <th class="prop">VIP订阅专属服务</th>
 
+                                </tr>
 
+                            </thead>
 
+                            <tbody>
 
+                                <tr>
 
+                                    <td>
 
+                                        <p class="miantitle">最多<em style="color: #2CB7CA">10</em>组关键词</p>
 
+                                    </td>
 
+                                    <td>
 
+                                        <p class="miantitle">最多<em style="color: #2CB7CA">300</em>组关键词</p>
 
+                                        <p class="subtitle">更多关键词，招标信息更全面</p>
 
+                                    </td>  
+                                </tr>
 
+                                <tr>
 
+                                    <td>
 
+                                        <p class="miantitle">每天最多接收<em style="color: #2CB7CA">150</em>条</p>
 
+                                    </td>
 
+                                    <td>
 
+                                        <p class="miantitle">每天最多接收<em style="color: #2CB7CA">2000</em>条</p>
 
+                                        <p class="subtitle">更多招标信息，重要项目不遗漏</p>
 
+                                    </td>  
+                                </tr>
 
+                                <tr>
 
+                                    <td>
 
+                                        <p class="miantitle">-</p>
 
+                                    </td>
 
+                                    <td>
 
+                                        <p class="miantitle">数据周报、月报</p>
 
+                                        <p class="subtitle">每周、每月推送你的订阅数据统计报告，帮助你全面掌握行业市场动态</p>
 
+                                    </td>  
+                                </tr>
 
+                                <tr>
 
+                                    <td>
 
+                                        <p class="miantitle">订阅区域精确到省</p>
 
+                                    </td>
 
+                                    <td>
 
+                                        <p class="miantitle">订阅区域精确到市</p>
 
+                                        <p class="subtitle">只看你最关注的招标信息</p>
 
+                                    </td>  
+                                </tr>
 
+                                <tr>
 
+                                    <td>
 
+                                        <p class="miantitle">-</p>
 
+                                    </td>
 
+                                    <td>
 
+                                        <p class="miantitle">按行业订阅</p>
 
+                                        <p class="subtitle">不知道如何设置关键词的时候，也可以按行业订阅</p>
 
+                                    </td>  
+                                </tr>
 
+                                <tr>
 
+                                    <td>
 
+                                        <p class="miantitle">仅支持标题匹配</p>
 
+                                    </td>
 
+                                    <td>
 
+                                        <p class="miantitle">支持标题匹配+全文匹配</p>
 
+                                        <p class="subtitle">关键词匹配标题或全文 任你选</p>
 
+                                    </td>  
+                                </tr>
 
+                                <tr>
 
+                                    <td>
 
+                                        <p class="miantitle">匹配单次公告信息</p>
 
+                                    </td>
 
+                                    <td>
 
+                                        <p class="miantitle">匹配项目信息</p>
 
+                                        <p class="subtitle">根据你的订阅，为你推送所匹配项目后续的全部动态</p>
 
+                                    </td>  
+                                </tr>
 
+                            </tbody>
 
+                        </table>
 
+                    </div>
 
+                </div>
 
+        </div>
 
+        <div class="menu">
 
+            <a href="vip_purchase.html" class="try_btn">试用7天</a>
 
+            <a href="/front/vipsubscribe/toPurchasePage" class="subscribe_btn">去订阅</a>
 
+        </div>
 
+    </div>
 
+</body>
 
+</html>

+ 99 - 0
src/web/templates/weixin/vipsubscribe/vip_order_detail.html
Файл харах 

@@ -0,0 +1,99 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
+    <title>我的订单</title>
 
+    <meta name="apple-mobile-web-app-capable" content="yes">
 
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
+    <script src="/vipsubscribe/js/rem.js?v={{Msg "seo" "version"}}"></script>
 
+    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.css" />
 
+    <link rel="stylesheet" type="text/css" href="/vipsubscribe/css/base.css?v={{Msg "seo" "version"}}" />
 
+    <link rel="stylesheet" type="text/css" href="/vipsubscribe/iconfont/iconfont.css?v={{Msg "seo" "version"}}" />
 
+    <link rel="stylesheet" href="/vipsubscribe/css/public.css?v={{Msg "seo" "version"}}">
 
+    <link rel="stylesheet" href="/vipsubscribe/css/vip_order_detail.css?v={{Msg "seo" "version"}}">
 
+</head>
 
+
 
+<body>
 
+    <div class="vip_order_detail">
 
+        <main class="main">
 
+            <div class="lists">
 
+                <div class="card">
 
+                    <div class="card-header">
 
+                        <img src="/vipsubscribe/image/line.png?v={{Msg "seo" "version"}}">
 
+                        <h3>已完成</h3>
 
+                        <!-- <h3>待付款</h3> -->
 
+                        <img src="/vipsubscribe/image/line.png?v={{Msg "seo" "version"}}">
 
+                    </div>
 
+                    <div class="card-content">
 
+                        <p class="text ellipsis">订单编号：000000001</p>
 
+                        <p class="text ellipsis">下单时间：2018.11.04 11:42:57</p>
 
+                        <!-- 订单状态为已完成时显示支付时间、自动续费、支付方式和订单号，状态为待付款时不显示 -->
 
+                        <p class="text ellipsis">支付时间：2018.11.04 11:50:34</p>
 
+                        <p class="text ellipsis">自动续费：未开通</p>
 
+                        <p class="text ellipsis">支付方式：支付宝</p>
 
+                        <p class="text ellipsis">支付单号：20190807200040011100700017263554</p>
 
+                        <p class="text ellipsis">产品类型：VIP订阅</p>
 
+                        <p class="text ellipsis">价格：105.10元</p>
 
+                        <!----- 未开发票状态 ----->
 
+                        <p class="text ellipsis">发票：<a href="invoice.html" class="invoicing">开发票</a></p>
 
+                        <!----- 已开发飘状态 ----->
 
+                        <!--  单位发票-->
 
+                        <div class="unit" style="display: none;">
 
+                            <p><span>发票类型：</span><span>普通发票（电子发票）</span></p>
 
+                            <p><span>发票内容:</span><span>明细</span></p>
 
+                            <p><span>发票抬头：</span><span>单位</span></p>
 
+                            <p><span>单位名称：</span><span>某某网络科技有限公司某某网络科技有限公司某某网络科技有限公司某某网络科技有</span></p>
 
+                            <p><span>纳税人识别号：</span><span>97632813007812341T</span></p>
 
+                        </div>
 
+                        <!-- 个人发票 -->
 
+                        <div class="person" style="display: none;">
 
+                            <p><span>发票类型：</span><span>普通发票（电子发票）</span></p>
 
+                            <p><span>发票内容：</span><span>明细</span></p>
 
+                            <p><span>发票抬头：</span><span>个人</span></p>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                <div class="card">
 
+                    <div class="card-header">
 
+                        <img src="/vipsubscribe/image/line.png?v={{Msg "seo" "version"}}">
 
+                        <h3>订阅条件</h3>
 
+                        <img src="/vipsubscribe/image/line.png?v={{Msg "seo" "version"}}">
 
+                    </div>
 
+                    <div class="card-content">
 
+                        <div class="item-list">
 
+                            <label>订阅区域：</label>
 
+                            <ul class="item-list-parents">
 
+                                <li>1个省级区域、4个地市</li>
 
+                            </ul>
 
+                        </div>
 
+                        <div class="item-list">
 
+                            <label>订阅行业：</label>
 
+                            <ul class="item-list-parents">
 
+                                <li>3个行业</li>
 
+                            </ul>
 
+                        </div>
 
+                        <div class="item-list">
 
+                            <label>订阅周期：</label>
 
+                            <ul class="item-list-parents">
 
+                                <li>3个月</li>
 
+                            </ul>
 
+                        </div>
 
+                        <div class="item-list">
 
+                            <label>有效日期：</label>
 
+                            <ul class="item-list-parents">
 
+                                <li>2019.07.30 - 2019.10.31</li>
 
+                            </ul>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </main>
 
+        <!-- 当状态为待付款时显示去支付按钮 -->
 
+        <a href="#" class="button align">去支付</a>
 
+    </div>
 
+</body>
 
+
 
+</html>

+ 41 - 0
src/web/templates/weixin/vipsubscribe/vip_pay_success.html
Файл харах 

@@ -0,0 +1,41 @@
 
+<!DOCTYPE html>
 
+<html>
 
+	<head>
 
+		<meta charset="utf-8">
 
+		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 
+		<title>VIP订阅</title>
 
+		<script src="/vipsubscribe/js/rem.js?v={{Msg "seo" "version"}}"></script>
 
+		<link rel="stylesheet" type="text/css" href="/vipsubscribe/css/base.css?v={{Msg "seo" "version"}}"/>
 
+		<link rel="stylesheet" href="/vipsubscribe/css/weui.min.css?v={{Msg "seo" "version"}}">
 
+		<link rel="stylesheet" href="/vipsubscribe/iconfont/iconfont.css?v={{Msg "seo" "version"}}">
 
+		<link rel="stylesheet" href="/vipsubscribe/css/vip_pay_success.css?v={{Msg "seo" "version"}}">
 
+	</head>
 
+	<body>
 
+		<div class="vip_pay_success layout_top-bottom">
 
+			<div class="layou_top">
 
+                <div class="icon_box">
 
+                    <i class="icon iconfont">&#xe612;</i>
 
+                    <p>支付成功</p>
 
+                </div>
 
+				<div class="info_box">
 
+                    <div class="pay_mode">
 
+                        <span>支付方式</span>
 
+                        <span>支付宝支付</span>
 
+                    </div>
 
+                    <div class="pay_time">
 
+                        <span>支付时间</span>
 
+                        <span>2019/07/31 16:29:57</span>
 
+                    </div>
 
+                    <div class="pay_id">
 
+                        <span>订单编号</span>
 
+                        <span>6278781990899909</span>
 
+                    </div>
 
+                </div>
 
+			</div>
 
+			<div class="bottom_button">
 
+        <button class="left_btn" onclick="window.location.href ='/front/vipsubscribe/toOrderDetailPage'">查看订单</button>
 
+        <button class="right_btn" onclick="window.location.href ='/front/vipsubscribe/toSetKeyWordPage'">设置关键词</button>
 
+			</div>
 
+		</div>
 
+	</body>
 
+</html>

+ 442 - 0
src/web/templates/weixin/vipsubscribe/vip_purchase.html
Файл харах 

@@ -0,0 +1,442 @@
 
+<!DOCTYPE html>
 
+<html>
 
+
 
+<head>
 
+    <meta charset="utf-8">
 
+    <meta name="viewport"
 
+        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 
+    <title>VIP订阅</title>
 
+    <script src="/vipsubscribe/js/rem.js?v={{Msg "seo" "version"}}"></script>
 
+    <link rel="stylesheet" type="text/css" href="/vipsubscribe/css/base.css?v={{Msg "seo" "version"}}" />
 
+    <link rel="stylesheet" href="/vipsubscribe/css/weui.min.css?v={{Msg "seo" "version"}}">
 
+    <link rel="stylesheet" href="/vipsubscribe/iconfont/iconfont.css?v={{Msg "seo" "version"}}">
 
+    <link rel="stylesheet" href="/vipsubscribe/css/vip_purchase.css?v={{Msg "seo" "version"}}">
 
+</head>
 
+
 
+<body>
 
+    <div class="vip_purchase">
 
+        <div class="choose_condition">
 
+            <ul class="chooseList">
 
+                <li class="choose_item">
 
+                    <a href="/front/vipsubscribe/toChooseArea">
 
+                        <span class="label">区域</span>
 
+                        <!-- <input type="text" disabled value="" placeholder="选择全国、省份、地市" class="info"> -->
 
+                        <input type="text" disabled value="郑州市" placeholder="1个市" class="info">
 
+                        <i class="iconfont icon-arrow"></i>
 
+                    </a>
 
+                    <!-- 无选择时不显示 -->
 
+                    <p class="add_tips">已选择 0 个省级区域、0 个地市</p>
 
+                </li>
 
+                <li class="choose_item">
 
+                    <a href="/front/vipsubscribe/toChooseIndustry">
 
+                        <span class="label">行业</span>
 
+                        <!-- <input type="text" disabled value="" placeholder="选择采购单位行业" class="info"> -->
 
+                        <input type="text" disabled value="安监" placeholder="1个行业" class="info">
 
+                        <i class="iconfont icon-arrow"></i>
 
+                    </a>
 
+                    <!-- 无选择时不显示 -->
 
+                    <p class="add_tips">已选择 0 个行业</p>
 
+                </li>
 
+                <li class="choose_item select_cycle">
 
+                    <!-- 需要选择订阅周期就用a标签，div.class="free-7day"隐藏 -->
 
+                    <!-- 需要选择试用就用div标签，a标签隐藏 -->
 
+                    <a href="javascript:;">
 
+                        <span class="label">订阅周期</span>
 
+                        <input type="text" disabled value="1年" placeholder="1个月" class="info choose_time">
 
+                        <i class="iconfont icon-arrow choose_time"></i>
 
+                    </a>
 
+                    <!-- <div class="free-7day" style="display: none">
 
+                            <span class="label">订阅周期</span>   
+                            <i class="info">免费试用7天</i>
 
+                        </div> -->
 
+                </li>
 
+            </ul>
 
+            <div class="pay_mode">
 
+                <div class="select_payment choose_item">
 
+                    <a href="javascript:;">
 
+                        <span class="label">支付方式</span>
 
+                        <span class="info choose_way">微信支付</span>
 
+                        <i class="iconfont icon-arrow choose_way"></i>
 
+                    </a>
 
+                </div>
 
+                <div class="vip_rules">
 
+                    <div class="auto_renew weui-cells_checkbox radio-form">
 
+                        <label class="weui-cell weui-check__label" for="auto-renew">
 
+                            <div class="weui-cell__hd">
 
+                                <input type="checkbox" class="weui-check" name="autoRenewService" id="auto-renew" />
 
+                                <i class="weui-icon-checked"></i>
 
+                            </div>
 
+                            <div class="weui-cell__bd read">
 
+                                <p>开通自动续费，根据当前订阅条件，服务到期时系统将为您自动续费</p>
 
+                            </div>
 
+                        </label>
 
+                    </div>
 
+                    <div class="vip_prise_table">
 
+                        <table class="monthly">
 
+                            <caption class="table_title">- VIP订阅价格 -</caption>
 
+                            <tr>
 
+                                <td colspan="2">按月购买</td>
 
+                            </tr>
 
+                            <tr>
 
+                                <td>5.8元 月/市/行业</td>
 
+                                <td>18元 月/市/全行业</td>
 
+                            </tr>
 
+                            <tr>
 
+                                <td>11.8元 月/省/行业</td>
 
+                                <td>38元 月/省/全行业</td>
 
+                            </tr>
 
+                            <tr>
 
+                                <td>118元 月/全国/行业</td>
 
+                                <td>388元 月/全国/全行业</td>
 
+                            </tr>
 
+                        </table>
 
+                        <table class="yearly">
 
+                            <tr>
 
+                                <td colspan="2">按年购买</td>
 
+                            </tr>
 
+                            <tr>
 
+                                <td>58元 年/市/行业</td>
 
+                                <td>180元 年/市/全行业</td>
 
+                            </tr>
 
+                            <tr>
 
+                                <td>118元 年/省/行业</td>
 
+                                <td>380元 年/省/全行业</td>
 
+                            </tr>
 
+                            <tr>
 
+                                <td>1180元 年/全国/行业</td>
 
+                                <td>3880元 年/全国/全行业</td>
 
+                            </tr>
 
+                        </table>
 
+                        <dl class="tips">
 
+                            <dt>购买须知：</dt>
 
+                            <dd>套餐周期内，不支持套餐降级，续费可降级；</dd>
 
+                            <dd>用户最多购买/续费3年套餐；</dd>
 
+                            <dd>支持套餐升级，补差价（按月进行补差价，不足一个月按一个月计算)。</dd>
 
+                        </dl>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+        <div class="fixed-bottom-box">
 
+            <div class="weui-cells weui-cells_checkbox radio-form">
 
+                <label class="weui-cell weui-check__label" for="buy">
 
+                    <div class="weui-cell__hd">
 
+                        <input type="checkbox" class="weui-check" name="buyService" id="buy" />
 
+                        <i class="weui-icon-checked"></i>
 
+                    </div>
 
+                    <div class="weui-cell__bd read">
 
+                        <p>
 
+                            我已阅读，理解并接受
 
+                            <a href="abc.html">
 
+                                《剑鱼标讯线上购买与服务条款》
 
+                            </a>
 
+                        </p>
 
+                    </div>
 
+                </label>
 
+            </div>
 
+            <div class="price">
 
+                <!-- <strong>&yen;1,300.00</strong> -->
 
+                <strong>&yen;5.80</strong>
 
+            </div>
 
+            <div class="form-btn">
 
+                <button class="btn enter" disabled id="payHandle">去支付</button>
 
+            </div>
 
+        </div>
 
+
 
+        <!-- 选择行业 -->
 
+        <div class="js_dialog time_cycle" id="time_cycle" style="display: none;">
 
+            <div class="weui-mask"></div>
 
+            <div class="box">
 
+                <div class="box_hd">
 
+                    <h3>订阅周期</h3>
 
+                    <span class="cancel">取消</span>
 
+                </div>
 
+                <div class="box_bd">
 
+                    <!-- <div class="tips monthly_tips" style="display: none">
 
+                            3-6个月6折，大于6个月5折
 
+                        </div>
 
+                        <div class="tips yearly_tips" style="display: none">
 
+                            1-2年5折，3年4折
 
+                        </div> -->
 
+                    <div class="tips profit_tips" style="display: none">已选择10个月，建议“按年订阅”更换算哦~</div>
 
+                    <div class="computed_price">￥58.0</div>
 
+                    <div class="bd_select">
 
+                        <div class="weui-cells weui-cells_checkbox choose-form">
 
+                            <label class="weui-cell weui-check__label monthly_label" for="monthly">
 
+                                <div class="weui-cell__hd">
 
+                                    <input type="radio" class="weui-check monthly" name="time" value="month"
 
+                                        id="monthly" />
 
+                                    <i class="weui-icon-checked"></i>
 
+                                </div>
 
+                                <div class="weui-cell__bd">
 
+                                    <p>按月订阅</p>
 
+                                </div>
 
+                            </label>
 
+                            <div class="number_box" id="number_box_month" data-numbox-step="1" data-numbox-min="1"
 
+                                data-numbox-max="12">
 
+                                <button class="weui-btn weui-btn_plain-default" type="button">
 
+                                    <div class="jy_icon decrease"></div>
 
+                                </button>
 
+                                <span class="month_number">1</span>
 
+                                <button class="weui-btn weui-btn_plain-default add" type="button">
 
+                                    <div class="jy_icon increase"></div>
 
+                                </button>
 
+                            </div>
 
+                        </div>
 
+                        <div class="weui-cells weui-cells_checkbox choose-form">
 
+                            <label class="weui-cell weui-check__label yearly_label" for="yearly">
 
+                                <div class="weui-cell__hd">
 
+                                    <input type="radio" class="weui-check yearly" name="time" value="year"
 
+                                        id="yearly" checked/>
 
+                                    <i class="weui-icon-checked"></i>
 
+                                </div>
 
+                                <div class="weui-cell__bd">
 
+                                    <p>按年订阅</p>
 
+                                </div>
 
+                            </label>
 
+                            <div class="number_box" id="number_box_year" style="border: 0;">
 
+                                <span class="year_number active" data-id="1">1年</span>
 
+                                <span class="year_number" data-id="2">2年</span>
 
+                                <span class="year_number" data-id="3">3年</span>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                <div class="form-btn">
 
+                    <button class="btn enter" id="enter_period">确认</button>
 
+                </div>
 
+            </div>
 
+        </div>
 
+        <!-- 选择支付方式 -->
 
+        <div class="js_dialog pay_way" id="pay_way" style="display: none;">
 
+            <div class="weui-mask"></div>
 
+            <div class="box">
 
+                <div class="box_hd">
 
+                    <span></span>
 
+                    <h3>支付方式</h3>
 
+                    <span class="cancel">取消</span>
 
+                </div>
 
+                <div class="box_bd">
 
+                    <div class="weui-cells weui-cells_checkbox choose-form">
 
+                        <label class="weui-cell weui-check__label wx_label" for="wx">
 
+                            <div class="weui-cell__bd read">
 
+                                <p><img src="/vipsubscribe/image/weixin.png?v={{Msg "seo" "version"}}">微信支付</p>
 
+                            </div>
 
+                            <div class="weui-cell__hd">
 
+                                <input type="radio" class="weui-check" name="way" value="微信支付" id="wx" checked />
 
+                                <i class="weui-icon-checked"></i>
 
+                            </div>
 
+                        </label>
 
+                        <label class="weui-cell weui-check__label zfb_label" for="zfb">
 
+                            <div class="weui-cell__bd read">
 
+                                <p><img src="/vipsubscribe/image/zhifubao.png?v={{Msg "seo" "version"}}">支付宝支付</p>
 
+                            </div>
 
+                            <div class="weui-cell__hd">
 
+                                <input type="radio" class="weui-check" name="way" value="支付宝支付" id="zfb" />
 
+                                <i class="weui-icon-checked"></i>
 
+                            </div>
 
+                        </label>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    <script src="/vipsubscribe/js/jquery-2.1.4.js?v={{Msg "seo" "version"}}"></script>
 
+    <script src="/vipsubscribe/js/fastclick.js?v={{Msg "seo" "version"}}"></script>
 
+    <script src="/vipsubscribe/js/weui.min.js?v={{Msg "seo" "version"}}"></script>
 
+    <script>
 
+        // 隐藏dialog选择框
 
+        function hideDialog() {
 
+            $('#pay_way').hide(200);
 
+            $('#time_cycle').hide(200);
 
+        }
 
+        $(function () {
 
+
 
+            var time_limit;//定义一个周期变量
 
+
 
+            /*------ 关闭弹窗事件  点击取消或遮罩层 -----*/
 
+            $('.weui-mask').click(hideDialog);
 
+            $('.cancel').click(hideDialog);
 
+
 
+            /* -----  订阅周期、支付方式弹窗弹出事件 -------*/
 
+            // 选择订阅周期
 
+            $('.select_cycle a').click(function (e) {
 
+                $('#time_cycle').show(200);
 
+            })
 
+            // 选择支付方式
 
+            $('.select_payment .choose_way').click(function () {
 
+                $('#pay_way').show(200);
 
+            })
 
+
 
+
 
+
 
+            /* -----  选择完支付方式、订阅周期 回显到页面 -------*/
 
+            // 对支付方式选择的input绑定点击事件
 
+            $('#pay_way input:radio[name="way"]').click(function () {
 
+                var checkValue = $('input:radio[name="way"]:checked').val();
 
+                console.log(checkValue);
 
+                $('.pay_way').hide(200);
 
+                $('.pay_mode .select_payment .choose_way.info').html(checkValue);
 
+            });
 
+            // 对订阅时间选择的input绑定点击事件
 
+            $('#time_cycle input:radio[name="time"]').on('click', function (e) {
 
+                // 解除确认按钮的锁定
 
+                $('#time_cycle .form-btn button').removeAttr('disabled')
 
+                if ($(e.target).hasClass('monthly')) {
 
+                    // 按月订阅
 
+                    $('#number_box_month').addClass('active');
 
+                    $('#number_box_year span').removeClass('active');
 
+                } else {
 
+                    // 按年订阅
 
+                    $('#number_box_month').removeClass('active');
 
+                    // $('#number_box_year span:eq(0)').addClass('active').siblings().removeClass('active');
 
+                }
 
+            })
 
+
 
+            /* --------控制月份number_box的事件  点击加减号触发的事件------- */
 
+            $('#number_box_month').on('click', 'button', function (e) {
 
+                // 点击加减号让input radio选中
 
+                $("#monthly").prop('checked', true);
 
+                $('#yearly').prop('checked', false);
 
+                $('.number_box span').removeClass('active')
 
+
 
+                var $number = $('#number_box_month span.month_number');
 
+                var $monthlyInput = $('#monthly');
 
+                // 未整理的data数组，里面的值都是字符串
 
+                var preData = e.delegateTarget.dataset
 
+                var currentNum = parseInt($number.text());
 
+                var data = {};
 
+                // 把字符串转换成数字
 
+                for (var i in preData) {
 
+                    data[i] = preData[i] - 0
 
+                }
 
+
 
+                if (!$monthlyInput.prop('checked')) {
 
+                    return
 
+                }
 
+                // 判断是点击的是+ 还是-
 
+                if ($(e.target).hasClass('add')) {
 
+                    // 点的+
 
+                    // currentNum = currentNum >= 12 ? 12 : currentNum + 1;
 
+                    currentNum = currentNum >= data.numboxMax ? data.numboxMax : currentNum + data
 
+                        .numboxStep;
 
+                } else {
 
+                    // 点的-
 
+                    // currentNum = currentNum <= 1 ? 1 : currentNum - 1;
 
+                    currentNum = currentNum <= data.numboxMin ? data.numboxMin : currentNum - data
 
+                        .numboxStep;
 
+                }
 
+                $number.text(currentNum)
 
+                var price = (5.8 * currentNum).toFixed(1);
 
+                $('.computed_price').html('￥' + price)
 
+                var firstButton = $('#number_box_month button:first')
 
+                var lastButton = $('#number_box_month button:last')
 
+                if (currentNum >= 10) {
 
+                    $('.profit_tips').show()
 
+                } else {
 
+                    $('.profit_tips').hide()
 
+                }
 
+                // 如果为操作后的结果为1，则锁定减号按钮
 
+                if (currentNum === data.numboxMin) {
 
+                    firstButton.attr('disabled', true)
 
+                } else {
 
+                    firstButton.removeAttr('disabled')
 
+                }
 
+                // 如果为操作后的结果为12，则锁定加号按钮
 
+                if (currentNum === data.numboxMax) {
 
+                    lastButton.attr('disabled', true)
 
+                } else {
 
+                    lastButton.removeAttr('disabled')
 
+                }
 
+            })
 
+
 
+            /* -------- 控制年份number_box的事件  点击1年 2年 3年触发的事件------- */
 
+            $('#number_box_year').on('click', 'span', function (e) {
 
+                console.log(e.target.dataset.id)
 
+                let id = e.target.dataset.id;
 
+                $('.profit_tips').hide()
 
+                $(this).addClass('active').siblings().removeClass('active')
 
+                $('#yearly').prop('checked', true);
 
+                $("#monthly").prop('checked', false);
 
+                // 渲染结果 保留一位小数
 
+                let result = (Number(id) * 58).toFixed(1);
 
+                $('.computed_price').html('￥' + result)
 
+            })
 
+
 
+            /* -------- 选择按月订阅  radio触发的事件------- */
 
+            $('#monthly').on('change', function (e) {
 
+                let isChecked = $(this).is(':checked')
 
+                let val = $('.month_number').text();
 
+                if (val >= 10) {
 
+                    $('.profit_tips').show()
 
+                }
 
+                console.log(val)
 
+                if (!isChecked) {
 
+                    $('#number_box_month button').attr('disabled', true)
 
+                } else {
 
+                    $('#number_box_month button').removeAttr('disabled')
 
+                }
 
+                let result = (Number(val) * 5.8).toFixed(1);
 
+                $('.computed_price').html('￥' + result)
 
+
 
+            })
 
+            /* -------- 选择按年订阅  radio触发的事件------- */
 
+            $('#yearly').on('change', function (e) {
 
+                $('.profit_tips').hide()
 
+                // console.log($(this).is(':checked'))
 
+                let isChecked = $(this).is(':checked')
 
+                // 按年订阅默认选择1年 
+                let val = 1;
 
+                $('.computed_price').html('￥' + Number(val) * 58)
 
+                if (isChecked) {
 
+                    $('#number_box_year span:eq(0)').addClass('active').siblings().removeClass('active')
 
+
 
+                }
 
+
 
+            })
 
+
 
+            // 确认订阅周期
 
+            $('#enter_period').on('click', function () {
 
+                var val;
 
+                $('input[name="time"]').each(function (i, v) {
 
+                    let isChecked = $(v).is(':checked')
 
+                    if ($(v).is(':checked') === true && $('.year_number').hasClass('active')) {
 
+                        val = $('.active').html()
 
+                        $('#time_cycle').hide(function () {
 
+                            $('.choose_time').val(val)
 
+
 
+                        })
 
+                    } else if ($(v).is(':checked') === true) {
 
+                        val = $('.month_number').html();
 
+                        $('#time_cycle').hide(function () {
 
+                            $('.choose_time').val(val + '个月')
 
+                        })
 
+                    }
 
+                })
 
+            })
 
+            $("input").bind("input propertychange change", function (event) {
 
+                var area = $(".info:eq(0)").val().trim();
 
+                var industry = $(".info:eq(1)").val().trim();
 
+                var checked = $('#buy').prop('checked');
 
+                // console.log(area,industry,checked)
 
+                if (area != '' && industry != '' && checked == true) {
 
+                    // console.info("所有输入框都有值")
 
+                    $(".enter").removeAttr('disabled');
 
+                } else {
 
+
 
+                    $(".submit").attr({
 
+                        'disabled': 'true'
 
+                    });
 
+                    // console.info("有输入框没有输入")
 
+                }
 
+            });
 
+            $('#payHandle').click(function () {
 
+                // alert("支付成功")
 
+                window.location.href = "/front/vipsubscribe/toPaySuccessPage"
 
+            })
 
+
 
+        })
 
+    </script>
 
+</body>
 
+
 
+</html>