订阅付费续费升级

src/jfw/front/vipsubscribe.go

@@ -2,8 +2,12 @@ package front
 
 import (
 	"jfw/wx"
+	"log"
+	"qfw/util"
+	"time"
 
 	"github.com/go-xweb/xweb"
+	"gopkg.in/mgo.v2/bson"
 )
 
 type Subscribepay struct {
@@ -31,7 +35,9 @@ type Subscribepay struct {
 	submitEditSub     xweb.Mapper `xweb:"/front/vipsubscribe/submitEditSub"`     //提交订阅收费
 
 	//升级
-	toUpgradePage xweb.Mapper `xweb:"/front/vipsubscribe/toUpgradePage"` //订阅收费升级服务页面
+	toUpgradePage xweb.Mapper `xweb:"/front/vipsubscribe/toUpgradePage"`           //订阅收费升级服务页面
+	addArea       xweb.Mapper `xweb:"/front/vipsubscribe/toChooseAreaUpgrade"`     //订阅收费升级新增区域页面
+	addIndustry   xweb.Mapper `xweb:"/front/vipsubscribe/toChooseIndustryUpgrade"` //订阅收费升级新增行业页面
 
 	//续费
 	renewPage    xweb.Mapper `xweb:"/front/vipsubscribe/renewPage/(.*)"` //订阅到期(will：即将到期，exprie：已到期)
@@ -148,17 +154,109 @@ func (s *Subscribepay) SubmitEditSub() {
 
 //升级订阅服务
 func (s *Subscribepay) ToUpgradePage() {
+	openid := util.ObjToString(s.GetSession("s_m_openid"))
+	if openid != "" {
+		data, ok := mongodb.FindOne("user", bson.M{"s_m_openid": openid})
+		if len(*data) > 0 && ok {
+			vipjy := (*data)["o_vipjy"].(map[string]interface{})
+			area := vipjy["o_area"]
+			buyerclass := vipjy["a_buyerclass"]
+			cycleunit := vipjy["i_cycleunit"]   // 1-年，2-月
+			cyclecount := vipjy["i_cyclecount"] //数量
+			starttime := util.Int64All((*data)["l_vip_starttime"])
+			start := time.Unix(starttime, 0).Format("2006-01-02")
+			endtime := util.Int64All((*data)["l_vip_endtime"])
+			end := time.Unix(endtime, 0).Format("2006-01-02")
+			s.T["area"] = area
+			s.T["buyerclass"] = buyerclass
+			s.T["cycleunit"] = cycleunit
+			s.T["cyclecount"] = cyclecount
+			s.T["starttime"] = start
+			s.T["endtime"] = end
+		}
+	}
 	s.Render("/weixin/vipsubscribe/vip_upgrade.html")
 }
 
+//升级订阅新增区域
+func (s *Subscribepay) AddArea() {
+	openid := util.ObjToString(s.GetSession("s_m_openid"))
+	if openid != "" {
+		data, ok := mongodb.FindOne("user", bson.M{"s_m_openid": openid})
+		if len(*data) > 0 && ok {
+			vipjy := (*data)["o_vipjy"].(map[string]interface{})
+			area := vipjy["o_area"]
+			s.T["area"] = area
+		}
+	}
+	s.Render("/weixin/vipsubscribe/choose_area_upgrade.html")
+}
+
+//升级订阅新增行业
+func (s *Subscribepay) AddIndustry() {
+	openid := util.ObjToString(s.GetSession("s_m_openid"))
+	if openid != "" {
+		data, ok := mongodb.FindOne("user", bson.M{"s_m_openid": openid})
+		if len(*data) > 0 && ok {
+			vipjy := (*data)["o_vipjy"].(map[string]interface{})
+			buyerclass := vipjy["a_buyerclass"]
+			s.T["buyerclass"] = buyerclass
+		}
+	}
+	s.Render("/weixin/vipsubscribe/choose_industry_upgrade.html")
+}
+
 //服务续费(will：即将到期，exprie：已到期)
 func (s *Subscribepay) RenewPage(sign string) {
-	s.T["exprie"] = sign == "exprie" //是否已到期
+	openid := util.ObjToString(s.GetSession("s_m_openid"))
+	if openid != "" {
+		data, ok := mongodb.FindOne("user", bson.M{"s_m_openid": openid})
+		if len(*data) > 0 && ok {
+			vipjy := (*data)["o_vipjy"].(map[string]interface{})
+			area := vipjy["o_area"]
+			buyerclass := vipjy["a_buyerclass"]
+			cycleunit := vipjy["i_cycleunit"]   // 1-年，2-月
+			cyclecount := vipjy["i_cyclecount"] //数量
+			starttime := util.Int64All((*data)["l_vip_starttime"])
+			start := time.Unix(starttime, 0).Format("2006-01-02")
+			endtime := util.Int64All((*data)["l_vip_endtime"])
+			end := time.Unix(endtime, 0).Format("2006-01-02")
+			s.T["area"] = area
+			s.T["buyerclass"] = buyerclass
+			s.T["cycleunit"] = cycleunit
+			s.T["cyclecount"] = cyclecount
+			s.T["starttime"] = start
+			s.T["endtime"] = end
+		}
+	}
+	s.T["exprie"] = sign //是否已到期
 	s.Render("/weixin/vipsubscribe/renew_notice.html", &s.T)
 }
 
 //服务续费(will：即将到期，exprie：已到期)
 func (s *Subscribepay) RenewPayPage() {
+	openid := util.ObjToString(s.GetSession("s_m_openid"))
+	log.Println("openid", openid)
+	if openid != "" {
+		data, ok := mongodb.FindOne("user", bson.M{"s_m_openid": openid})
+		if len(*data) > 0 && ok {
+			vipjy := (*data)["o_vipjy"].(map[string]interface{})
+			area := vipjy["o_area"]
+			buyerclass := vipjy["a_buyerclass"]
+			cycleunit := vipjy["i_cycleunit"]   // 1-年，2-月
+			cyclecount := vipjy["i_cyclecount"] //数量
+			starttime := util.Int64All((*data)["l_vip_starttime"])
+			start := time.Unix(starttime, 0).Format("2006-01-02")
+			endtime := util.Int64All((*data)["l_vip_endtime"])
+			end := time.Unix(endtime, 0).Format("2006-01-02")
+			s.T["area"] = area
+			s.T["buyerclass"] = buyerclass
+			s.T["cycleunit"] = cycleunit
+			s.T["cyclecount"] = cyclecount
+			s.T["starttime"] = start
+			s.T["endtime"] = end
+		}
+	}
 	s.Render("/weixin/vipsubscribe/renew_pay.html")
 }
 

src/web/staticres/vipsubscribe/css/choose_area.css

@@ -521,10 +521,10 @@
   color: #fff;
 }
 
-#choose_area .select-area-box .tab_content .active[disabled] {
+/*#choose_area .select-area-box .tab_content .active[disabled] {
   background: #BFBFC3;
   color: #fff;
-}
+}*/
 
 #choose_area .select-area-box .tab_content .city[disabled] {
   background: #BFBFC3;

src/web/staticres/vipsubscribe/css/vip_update.css

@@ -51,6 +51,91 @@
   opacity: .5;
 }
 
+.public_btn {
+  width: 100%;
+  height: .94rem;
+  line-height: .94rem;
+  text-align: center;
+  background: #2CB7CA;
+  color: #fff;
+  border-radius: 0.06rem;
+  font-size: .34rem;
+}
+
+.tips_btn {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.tips_btn .tips_discount {
+  width: 100%;
+}
+
+.tips_btn .tips_discount .tips_d_money {
+  display: none;
+  position: absolute;
+  left: 50%;
+  top: -.2rem;
+  padding: 0 .4rem;
+  height: .64rem;
+  line-height: .64rem;
+  color: #2CB7CA;
+  font-size: .32rem;
+  background-color: #fff;
+  border-radius: .32rem;
+  transform: translate(-50%, -100%);
+  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+}
+
+.tips_btn .tips_discount .tips_d_text {
+  display: none;
+  height: .72rem;
+  line-height: .72rem;
+  color: #fff;
+  font-size: .28rem;
+  text-align: center;
+  background-color: #FFB901;
+}
+
+.tips_btn .btns {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: .94rem;
+  line-height: .94rem;
+  color: #fff;
+  font-size: .34rem;
+}
+
+.tips_btn .btns .save-btn,
+.tips_btn .btns .reset-btn {
+  flex: 1;
+  width: 50%;
+  text-align: center;
+  height: 100%;
+  font-size: .34rem;
+}
+
+.tips_btn .btns .reset-btn {
+  background: #fff;
+  color: #2cb7ca;
+  border-top: 1px solid #e0e0e0;
+}
+
+.tips_btn .btns .save-btn {
+  background: #2cb7ca;
+  color: #fff;
+  border-top: 1px solid #2cb7ca;
+}
+
+.tips_btn .btns button[disabled] {
+  opacity: .5;
+}
+
 .jy_icon {
   position: relative;
   width: 100%;
@@ -272,6 +357,60 @@
   transform: translateX(20px);
 }
 
+.custom-toast .weui-toast {
+  font-size: .3rem;
+  padding: 0.2rem;
+  width: auto;
+  max-width: 6rem;
+  min-height: 0;
+  height: auto;
+  top: 50%;
+  left: 50%;
+  margin-left: 0;
+  margin-top: -0.47rem;
+  transform: translateX(-50%) translateY(-50%);
+}
+
+.custom-toast .weui-icon_toast {
+  display: none;
+}
+
+.custom-toast .weui-toast__content {
+  margin: 0;
+}
+
+.jymobile-tab-triangle {
+  position: relative;
+}
+
+.jymobile-tab-triangle:after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  right: 0;
+  width: 0;
+  height: 0;
+  font-size: 0;
+  line-height: 0;
+  border-style: solid;
+  border-width: .1rem;
+  border-color: #aaa transparent transparent transparent;
+  transform: translate(140%, -30%);
+}
+
+.jymobile-tab-triangle.active:after {
+  border-color: transparent transparent #2cb7ca transparent;
+  transform: translate(140%, -70%);
+}
+
+.jymobile-tab-triangle.current {
+  color: #2cb7ca;
+}
+
+.jymobile-tab-triangle.current:after {
+  border-color: #2cb7ca transparent transparent transparent;
+}
+
 .radio-form {
   margin: 0;
   padding: .17rem .05rem;
@@ -309,6 +448,10 @@
   background-color: transparent;
 }
 
+.custom-toast .weui-toast {
+  font-size: .27rem;
+}
+
 .vip_update, .vip_renew {
   display: flex;
   height: 100%;
@@ -377,7 +520,7 @@
 .vip_update .choose_condition .pay_mode .choose_item a .label, .vip_renew .choose_condition .chooseList .choose_item a .label,
 .vip_renew .choose_condition .pay_mode .choose_item a .label {
   float: left;
-  width: 1.5rem;
+  width: 2.5rem;
   color: #1d1d1d;
   font-size: .32rem;
 }
@@ -637,6 +780,12 @@
   padding: 0;
 }
 
+.vip_update .time_cycle .box_bd .computed_price, .vip_renew .time_cycle .box_bd .computed_price {
+  padding: .4rem .36rem .24rem;
+  font-size: .4rem;
+  border-bottom: 1px solid #E0E0E0;
+}
+
 .vip_update .time_cycle .box_bd .bd_select, .vip_renew .time_cycle .box_bd .bd_select {
   padding: 0 .3rem;
 }

src/web/templates/weixin/vipsubscribe/choose_area_upgrade.html

@@ -0,0 +1,782 @@
+<!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"}}4">
+</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 src="/vipsubscribe/js/common.js?v={{Msg "seo" "version"}}"></script>
+    <script>
+      var AreaChoose={
+        selectObj:{},//已选择，未购买城市;
+        buyObj:{},//已购买
+        selectedIndustryArr:["一个行业"],//计算价格临时变量
+        timeSelect:[1,2],//计算价格临时变量 timeSelect[0]时长  timeSelect[1] 1:年 2:月
+        vipSubisTrial:false,
+        inintData:function(){
+          //已选择
+          try{
+            let select =sessionStorage.getItem("vipSubSelectArea");
+            if(select){
+              this.selectObj=JSON.parse(select);
+            }
+            if(sessionStorage.getItem("vipSubSelectIndustry")){
+              this.selectedIndustryArr=JSON.parse(sessionStorage.getItem("vipSubSelectIndustry"));
+            }
+            if(sessionStorage.getItem("vipSubSelectTime")){
+              this.timeSelect=JSON.parse(sessionStorage.getItem("vipSubSelectTime"));
+            }
+            //已购买
+            let buy = {{.T.area}};
+            if(buy){
+            	this.buyObj = buy;
+            }
+            //是否试用界面
+            if(sessionStorage.getItem("vipSubisTrial")) this.vipSubisTrial=true;
+          }catch(e){
+            console.log(e);
+            this.selectObj={};
+          }
+        },
+        inintPage:function(){//初始化省份城市选项   
+          $(".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 = AreaChoose.createMoreCity(data.city)
+              box.html(html)
+          })
+        },
+        createMoreCity:function(arr){
+          var tempHtml = arr.map(function (v) {
+                return '<button class="city">' + v.name + '</button>'
+            }).join('')
+            return tempHtml
+        },
+        showSelected:function(canClick){ //回显已选择
+        	var ran = "";
+            if(canClick){
+            	ran = this.selectObj;
+            }else{
+            	ran = this.buyObj;
+            }    
+            for(var province in ran) {
+	            let citys=ran[province]
+	            if(citys.length>0){//地市
+	                this.selectCity(citys,canClick)
+	            }else{//省份
+	                this.selectProvince(province,canClick)
+	            }
+	        }
+        },
+        selectProvince:function(province,canClick){ //设置选中省份 province 省份
+          $($('.tab .province')).each(function (index, dom) {
+            if (province == $.trim($(dom).text())) {
+              if(province!="全国") $(".checkbox.other").attr("checked", false); //取消全国选中
+              $(dom).children('.checkbox').attr({"checked": true,"disabled":!canClick});//选中此省份
+              if(canClick){
+              	$(dom).parents().siblings('.tab_content').find(".city").addClass("active").attr({"disabled":!canClick});
+              }else{
+              	$(dom).parents().siblings('.tab_content').find(".city").attr({"disabled":!canClick});
+              }
+            }
+          })
+        },
+        selectCity:function(citys,canClick){ //设置选中城市
+          citys.forEach(v => {
+            $($('.tab_content .city')).each(function (index, dom) {
+                if (v == $(dom).text()) {
+                    $(".checkbox.other").attr("checked", false); //取消全国选中
+                    if(canClick){
+                    	$(dom).addClass('active').attr('disabled', !canClick).parents().siblings('.tab')
+                        .addClass('selected').children('.province').children('.checkbox').attr({
+                            "checked": true
+                        })
+                    }else{
+                    	$(dom).attr('disabled', !canClick).parents().siblings('.tab')
+                        .addClass('selected').children('.province').children('.checkbox').attr({
+                            "checked": true
+                        })
+                    }
+                }
+            })
+          })
+        },
+        getResult:function(){   /* 选中结果 */
+          //如果选中所有，则转为全国
+          if($(".city").length==$(".city.active").length){
+            $(".checkbox.other").trigger("click");
+            return
+          }
+          this.selectObj = {};
+          $('.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 { 
+                  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
+              }
+          })
+          var html = '';
+          for (var i = 0; i < result.length; i++) {
+              let children = result[i].children;
+              if( children.length >0){
+                  // 判断每个省份下选中的城市长度，当大于等于4的时候 弹出"选择全省更划算的弹窗"
+                  let childrenArr=[];
+                  if (children.length >= 4 && !this.vipSubisTrial) {
+                      $('.tips_btn .tips_d_text').show()
+                  } 
+                  html += `${result[i].name}(`
+                  for(var j = 0;j < children.length;j++){
+                      childrenArr.push(children[j].name)
+                      if (j != children.length - 1) {
+                          html += `${children[j].name}、`
+                      } else {
+                          html += `${children[j].name}`
+                      }
+                  }
+                  if(i !=result.length -1){
+                      html += `)、`
+                  }else{
+                      html += `)`
+                  }
+                  this.selectObj[result[i].name]=childrenArr;//
+              }else{
+                  if(i !=result.length -1){
+                      html += `${result[i].name}、`
+                  }else{
+                      html += `${result[i].name}`
+                  }
+                  this.selectObj[result[i].name]=[];//
+              }
+          }
+          console.log("this.selectObj:",this.selectObj)
+          $('.result_name').append(html)
+          AreaChoose.isOpen()
+          //刷新价格
+          AreaChoose.flushPrice();
+        },
+        submitArea:function(){
+          let addCity = $('.result_name').text(); //新增的城市
+          sessionStorage.setItem("vipSubSelectArea",JSON.stringify(AreaChoose.selectObj));
+          history.go(-1);
+        },
+        isAllSelected:function(){
+          var _f = true
+          $($('.tab_content .city')).each(function (index, dom) {
+              if ($(dom).hasClass('active')) {
+                  _f = false
+                  $('.other').prop('checked', false);
+              }
+          })
+          // 如果循环结束仍为true说明 没有全部都被选中
+          if (_f) {
+              $('.other').prop('checked', true);
+          }
+        },
+        getNationwide:function(){/*默认选中全国 */
+          $('.other').prop('checked', true);
+          $('.tab_content').slideUp(500)
+          $('.tab span i').css({
+              "display":"inline-block",
+              "transform":"rotate(0)"
+          });
+        },
+        isOpen:function(){
+          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){
+              if(length >= 50){
+                  $('.detail').show()
+                  $('.packup').hide()
+              }else{
+                  $('.detail').hide()
+                  $('.packup').hide()
+              }
+          }else if(rows == 2){
+              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()
+          }
+        },
+        inintClick:function(){
+        	$('.tab_content').each(function(){
+          		AreaChoose.showSelected(false);
+        	})
+          $('.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'});
+            })
+          $(".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').removeClass('selected');
+                
+            })
+            $('.checkbox').click(function (e) {  
+                e.stopPropagation();
+            })
+            $('.province .checkbox:not(.other)').on('change', function () {
+                var isCheckded = $(this).is(':checked')
+                if (isCheckded) {
+                    $(this).parents('.tab').siblings('.tab_content').find('.city').addClass('active')
+                    $(this).parents('.tab').siblings('.tab_content').find('.city[disabled]').removeClass('active')
+                    AreaChoose.isAllSelected()
+                    AreaChoose.getResult() 
+                    AreaChoose.showSelected(false);
+                } else {
+                    $(this).parents('.tab').siblings('.tab_content').find('.city').removeClass(
+                        'active')
+                    $(this).parents('.tab').siblings('.tab_content').find('.city').attr('disabled',false);    
+                    AreaChoose.isAllSelected()
+                    AreaChoose.getResult() 
+                    AreaChoose.showSelected(false);
+                }
+            })
+
+            //执行已购买城市函操作dom函数
+            $('.tab_content').on('click', '.city', function () {
+            	AreaChoose.showSelected(false);
+                $(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)
+                    AreaChoose.isAllSelected()
+                    AreaChoose.getResult() 
+                } else {
+                    $(this).parent('div').siblings('.tab').children().children('.checkbox').prop(
+                        'checked', false)
+                    AreaChoose.isAllSelected()
+                    AreaChoose.getResult() 
+                }
+            })
+
+            $('.other').on('change', function () { //选择全国
+              AreaChoose.reset();
+            })
+
+            $('.save-btn').click(function () {  // 提交
+                AreaChoose.submitArea();              
+            })
+            $('.reset-btn').click(function () {  //重置
+              if(!$(".other").is(':checked')){
+                $(".other").trigger("click");
+              }
+            })
+        },
+        reset:function(){
+           var checked = $(".other").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
+                })
+                AreaChoose.getResult() 
+            }else{
+                AreaChoose.getResult()
+                  AreaChoose.showSelected(false);
+            }
+        },
+        flushPrice:function(){
+          if(this.vipSubisTrial){
+            $('.tips_d_money').css("display","none");
+          }else{
+            var price=getsubVipOrderPrice(this.selectObj,this.selectedIndustryArr,this.timeSelect);
+            $('.tips_d_money').text('￥'+price);
+          }
+        }
+      }
+      
+      $(function () {
+            AreaChoose.isOpen()
+            AreaChoose.inintData(); //初始化 已选择和已购买数据
+            AreaChoose.inintPage(); //初始化城市数据
+
+            AreaChoose.getNationwide();//默认选中全国 
+            AreaChoose.showSelected(true);//回显已选择
+            /* 判断已购买的城市 在不在 全部城市里面，在，将按钮置灰，不可点击 */
+
+            AreaChoose.getResult();
+            AreaChoose.inintClick();
+        })
+    </script>
+</body>
+
+</html>

src/web/templates/weixin/vipsubscribe/choose_industry_upgrade.html

@@ -0,0 +1,404 @@
+<!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 active">全部行业</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>
+                            </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>
+                            </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>
+                                <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>
+                            </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>
+                                <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>
+                            </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>
+                            </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>
+                            </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>
+                            </div>
+                        </li>
+                        <li class="list_item" id="P">
+                            <div class="item_label">P</div>
+                            <div class="item_industry_list">
+                                <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>
+                            </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>
+                            </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>
+                                <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>
+                            </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>
+                            </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>
+                            </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>
+                            </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>
+                                <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:;">F</a>
+                <a href="javascript:;">G</a>
+                <a href="javascript:;">H</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:;">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:;">W</a>
+                <a href="javascript:;">X</a>
+                <a href="javascript:;">Y</a>
+                <a href="javascript:;">Z</a>
+            </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 src="/vipsubscribe/js/common.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 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(''))
+            }
+            
+            function findSelectedIndustry () {
+                var buttons = $('.select-area-box .list button')
+                // 找到已选择的数组(有active类的数组)
+                var selectedArr = []
+                buttons.each(function(){
+                    if ($(this).hasClass('active')) {
+                        if($(this).attr("disabled")!="disabled"){
+                          selectedArr.push($(this).text())
+                        }
+                    }
+                })
+                
+                // 显示隐藏优惠tips
+                if (selectedArr.length >= 4 && !vipSubisTrial) {
+                    $('.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');
+                }
+            }
+                      
+            function showSelect(arr,canclick){
+              if(!arr)return
+              arr.forEach(v => {
+                $($('.industry_item')).each(function (index, dom) {
+                	if(canclick){
+                		if (v!="全部行业"){
+	                      $('#all').children().children('button').removeClass('active');
+	                    }
+                		if (v == $(dom).text()) {
+	                       $(dom).addClass("active").attr({"disabled":!canclick})
+	                    }
+                	}else{
+                		if (v == $(dom).text()) {
+	                       $(dom).attr({"disabled":!canclick})
+	                    }
+                	}
+                })
+              })
+            }
+            
+            function flushPrice(){
+              if(vipSubisTrial){
+                $('.tips_d_money').css("display","none");
+              }else{
+                var price=getsubVipOrderPrice(selectedAreaObj,selectedIndustryArr,timeSelect);
+                $('.tips_d_money').text('￥'+price);
+              }
+            }
+            
+            // 每个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()
+                flushPrice()
+            })
+
+            // 重置按钮事件
+            $('.reset-btn').on('click', function () {
+              $("#all .industry_item").trigger("click");
+                showSelect(buyIndustry,false);
+            })
+           
+            //=======================
+             
+
+             // 确认按钮事件
+            $('.save-btn').on('click', function () {
+                console.log(selectedIndustryArr)
+                sessionStorage.setItem("vipSubSelectIndustry",JSON.stringify(selectedIndustryArr));
+                history.go(-1);
+            })
+                       
+            var selectedIndustryArr //已选择行业
+            var selectedAreaObj = {"一个省":["一个市"]} //计算价格临时变量
+            var timeSelect = [1,2]//计算价格临时变量 timeSelect[0]时长  timeSelect[1] 1:年 2:月
+            var vipSubisTrial = false;
+            var buyIndustry
+            $(function(){
+              try{
+                if(sessionStorage.getItem("vipSubSelectIndustry")){
+                  selectedIndustryArr=JSON.parse(sessionStorage.getItem("vipSubSelectIndustry"));
+                }else{
+                  selectedIndustryArr=[];
+                }
+                if(sessionStorage.getItem("vipSubSelectArea")){
+                  selectedAreaObj=JSON.parse(sessionStorage.getItem("vipSubSelectArea"));
+                }
+                if(sessionStorage.getItem("vipSubSelectTime")){
+                  this.timeSelect=JSON.parse(sessionStorage.getItem("vipSubSelectTime"));
+                }
+                //已购买行业
+                let buy = {{.T.buyerclass}};
+	            if(buy){
+	            	buyIndustry = buy;
+	            	console.log(buyIndustry)
+	            }
+                //是否试用界面
+                if(sessionStorage.getItem("vipSubisTrial")) vipSubisTrial=true;
+              }catch(e){
+                console.log(e)
+              }
+              //已选择
+              showSelect(selectedIndustryArr,true);
+              showSelect(buyIndustry,false);
+              findSelectedIndustry();
+              flushPrice();
+            })
+        </script>
+    </body>
+</html>

src/web/templates/weixin/vipsubscribe/renew_notice.html

@@ -16,11 +16,11 @@
                 <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 id="exprie">您的VIP订阅服务，已到期！</div>
                         <!-- <div>VIP订阅服务即将到期,请及时续费！</div> -->
                         <div class="validity_date">
                             <span>有效日期：</span>
-                            <span>2019.07.31-2019.12.31</span>
+                            <span class="date-span"></span>
                         </div>
                     </div>
                 </div>
@@ -31,11 +31,11 @@
                     <div class="recommend_info">
                         <div class="info_area">
                             <span>区域：</span>
-                            <span class="text">河南省、郑州市、洛阳市、淮南市河南省、郑州市、洛阳市、淮南市河南省、郑州市、洛阳市、阳市、洛阳市、洛阳市、洛阳市、洛阳市、淮南市</span>
+                            <span class="text area-list"></span>
                         </div>
                         <div class="info_industry">
                             <span>行业：</span>
-                            <span class="text">保监、城管保监、城管保监、城管保监、城管保监、城管保监、城管保监、城管</span>
+                            <span class="text industry-list"></span>
                         </div>
                     </div>
                 </div>
@@ -45,5 +45,70 @@
                 <button class="free_service">使用免费订阅</button>
             </div>
 		</div>
+		<script src="/vipsubscribe/js/jquery-2.1.4.js"></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 type="text/javascript">
+			
+			//
+	        var area = {{.T.area}};
+		    var buyerclass = {{.T.buyerclass}};
+		    var cycleunit = {{.T.cycleunit}};
+		    var cyclecount = {{.T.cyclecount}};
+		    var startTime = {{.T.starttime}};
+		    var endTime = {{.T.endtime}};
+		    var exprie = {{.T.exprie}}
+		    //
+		    var areaArr = [];
+		    var areaHtml = "";
+		    var buyerclassArr = [];
+		    var buyerclassHtml = "";
+	//	    var dateName = "";
+		    var dateHtml = "";
+		    if (area !== "" && area !== undefined){
+		    	for(var province in area){
+		    		var citys = area[province]
+//		    		console.log(citys);
+		    		if(citys.length===0){
+		    			areaArr.push(province);
+		    		}else{
+		    			for(var i in citys){
+		    				areaArr.push(citys[i]);
+		    			}
+		    		}
+		    	}
+		    	areaHtml = areaArr.toString().replace(/,/g, "、");
+		    	$('.area-list').text(areaHtml);
+		    }
+		    if(buyerclass !== "" && buyerclass !== undefined){
+		    	for(var i in buyerclass){
+		    		var industry = buyerclass[i];
+		    		buyerclassArr.push(industry);
+		    		buyerclassHtml = buyerclassArr.toString().replace(/,/g, " ");
+		    	}
+				$('.industry-list').text(buyerclassHtml);
+		    }
+	//	    if(cycleunit !== "" && cycleunit !== undefined){
+	//	    	if(cycleunit === 1){
+	//	    		dateName = cyclecount + " 年";
+	//	    	}else if(cycleunit === 2){
+	//	    		dateName = cyclecount + " 个月";
+	//	    	}
+	//	    	$(".item_cycle .label_for").text(dateName);
+	//	    }
+		    if(startTime !== "" && endTime !== ""){
+		    	var start = startTime.replace(/-/g, ".");
+		    	var end = endTime.replace(/-/g, ".");
+		    	dateHtml = start + " - " + end;
+		    	$(".date-span").text(dateHtml);
+		    }
+		    if(!exprie){
+		    	$(".free_service").hide();
+		    	$("#exprie").text("VIP订阅服务即将到期，请及时续费")
+		    }else{
+		    	$(".free_service").show();
+		    }
+			
+		</script>
 	</body>
 </html>

src/web/templates/weixin/vipsubscribe/renew_pay.html

@@ -13,7 +13,7 @@
     <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_update.css?v={{Msg "seo" "version"}}">
+    <link rel="stylesheet" href="/vipsubscribe/css/vip_update.css?v={{Msg "seo" "version"}}3">
 </head>
 
 <body class="no-touch">
@@ -51,7 +51,7 @@
                 </li>
                 <li class="choose_item select_cycle">
                     <a href="javascript:;">
-                        <span class="label">订阅周期</span>
+                        <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>
@@ -98,34 +98,30 @@
             </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>
+                    <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" />
+                                        id="monthly" checked />
                                     <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"
+                            <div class="number_box active" 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>
@@ -140,7 +136,7 @@
                             <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" />
+                                        id="yearly"/>
                                     <i class="weui-icon-checked"></i>
                                 </div>
                                 <div class="weui-cell__bd">
@@ -148,15 +144,16 @@
                                 </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>
+                                <span class="year_number" 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" disabled id="enter_period">确认</button>
+                    <!-- <button class="btn enter" disabled id="enter_period">确认</button> -->
+                    <button class="btn enter" id="enter_period">确认</button>
                 </div>
             </div>
         </div>
@@ -173,28 +170,28 @@
                     <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>
+                                <p><img src="/vipsubscribe/image/weixin.png">微信支付</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">
+                        <!--<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>
+                                <p><img src="/vipsubscribe/image/zhifubao.png">支付宝支付</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>
+                        </label>-->
                     </div>
                 </div>
             </div>
         </div>
     </div>
-    <script src="/vipsubscribe/js/jquery-2.1.4.js?v={{Msg "seo" "version"}}"></script>
+    <script src="/vipsubscribe/js/jquery-2.1.4.js"></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?v={{Msg "seo" "version"}}"></script>
     <script>
@@ -206,51 +203,51 @@
         $('.weui-mask').click(hideDialog);
         $('.cancel').click(hideDialog);
 
-        // 选择行业
+        // 选择订阅周期
         $('.select_cycle > a').click(function () {
             $('#time_cycle').show(200);
         })
-        // 对订阅时间选择的input绑定点击事件
+        // 选择支付方式
+//      $('.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')) {
                 // 按月订阅
-                // 显示隐藏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 {
+            } else if ($(e.target).hasClass('yearly')) {
                 // 按年订阅
-                $('#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');
+            } else if ($(e.target).hasClass('prolong')) {
+                $('#number_box_month').removeClass('active');
+                $('#number_box_year span').removeClass('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) {
+            // 点击加减号让input radio选中
+            $("#monthly").prop('checked', true);
+            $('.number_box span').removeClass('active')
+            $('#number_box_month').addClass('active')
+            
+
             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());
@@ -267,17 +264,24 @@
             if ($(e.target).hasClass('add')) {
                 // 点的+
                 // currentNum = currentNum >= 12 ? 12 : currentNum + 1;
-                currentNum = currentNum >= data.numboxMax ? data.numboxMax : currentNum + data.numboxStep;
+                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;
+                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)
@@ -292,34 +296,157 @@
             }
         })
 
-        // 控制年份number_box的事件
+       /* -------- 控制年份number_box的事件  点击1年 2年 3年触发的事件------- */
         $('#number_box_year').on('click', 'span', function (e) {
-            // var $input = $('#time_cycle input:radio[name="time"]');
-            var $yearlyInput = $('#yearly');
+            console.log(e.target.dataset.id)
+            let id = e.target.dataset.id;
+            $('.profit_tips').hide()
+            $('#number_box_month').removeClass('active');
+            $(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)
+        })
 
-            if (!$yearlyInput.prop('checked')) {
-                return
+        /* -------- 选择按月订阅  radio触发的事件------- */
+        $('#monthly').on('change', function (e) {
+            let isChecked = $(this).is(':checked')
+            let val = $('.month_number').text();
+            if (val >= 10) {
+                $('.profit_tips').show()
             }
-            $(this).addClass('active').siblings().removeClass('active')
+            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 + '个月')
-                     })                          
-                }
+            var checked = $('#time_cycle input[name="time"]:checked')
+            // 获取其label的for属性，通过for属性来怕短板
+            // monthly 按月
+            // yearly 按年
+            var flag = checked.parents('label').attr('for')
+            var val = '请选择年、月';
+            var flagVal = 0; //1-年，2-月
+            var flagValLen = 0;
+            if (flag === 'monthly') {
+                val = $('#number_box_month .month_number').text() + '个月'
+                flagVal = 2;
+                flagValLen = Number($('#number_box_month .month_number').text());
+            } else if (flag === 'yearly') {
+                val = $('#number_box_year .year_number.active').text()
+                flagVal = 1;
+                flagValLen = Number($('#number_box_year .year_number.active').text().replace("年",""));
+            }
+            sessionStorage.renew_cycleunit = flagVal;
+            sessionStorage.renew_cyclecount = flagValLen;
+            sessionStorage.renew_price = $(".computed_price").html();
+            $('#time_cycle').hide(function () { 
+                $('.choose_item.select_cycle .info').attr('placeholder', val);
             })
         })
+        
+        //
+        var area = {{.T.area}};
+	    var buyerclass = {{.T.buyerclass}};
+	    var cycleunit = {{.T.cycleunit}};
+	    var cyclecount = {{.T.cyclecount}};
+	    var startTime = {{.T.starttime}};
+	    var endTime = {{.T.endtime}};
+	    //
+	    var areaArr = [];
+	    var areaHtml = "";
+	    var buyerclassArr = [];
+	    var buyerclassHtml = "";
+	    var dateName = "";
+	    var dateHtml = "";
+	    if (area !== "" && area !== undefined){
+	    	for(var province in area){
+	    		var citys = area[province]
+//	    		console.log(citys);
+	    		if(citys.length===0){
+	    			areaArr.push(province);
+	    		}else{
+	    			for(var i in citys){
+	    				areaArr.push(citys[i]);
+	    			}
+	    		}
+	    	}
+	    	areaHtml = areaArr.toString().replace(/,/g, "、");
+	    	$(".item_area .label_for").text(areaHtml);
+	    }
+	    if(buyerclass !== "" && buyerclass !== undefined){
+	    	for(var i in buyerclass){
+	    		var industry = buyerclass[i];
+	    		buyerclassArr.push(industry);
+	    		buyerclassHtml = buyerclassArr.toString().replace(/,/g, "、");
+	    	}
+	    	$(".item_industry .label_for").text(buyerclassHtml);
+	    }
+	    if(cycleunit !== "" && cycleunit !== undefined){
+	    	if(cycleunit === 1){
+	    		dateName = cyclecount + " 年";
+	    	}else if(cycleunit === 2){
+	    		dateName = cyclecount + " 个月";
+	    	}
+	    	$(".item_cycle .label_for").text(dateName);
+	    }
+	    if(startTime !== "" && endTime !== ""){
+	    	var start = startTime.replace(/-/g, ".");
+	    	var end = endTime.replace(/-/g, ".");
+	    	dateHtml = start + " - " + end;
+	    	$(".item_validity .label_for").text(dateHtml);
+	    }
+	 	if(sessionStorage.renew_cyclecount!==""&&sessionStorage.renew_cycleunit!==""){
+	 		var cycleunit = sessionStorage.renew_cycleunit;
+	 		var cyclecount = sessionStorage.renew_cyclecount;
+	 		var dateName = "";
+	 		if(cycleunit === "1"){
+	 			$("#yearly").prop("checked", true);
+	 			$('#number_box_month').removeClass('active');
+	 			$("#number_box_year span").each(function(){
+	 				if($(this).attr("data-id") ===  cyclecount){
+	 					$(this).addClass("active");
+	 				}
+	 			})
+	 			dateName = cyclecount + "年";
+	 			$('.choose_item.select_cycle .info').attr('placeholder', dateName);
+	 		}else if(cycleunit === "2"){
+	 			$("#monthly").prop("checked", true);
+	 			$('#number_box_month').addClass('active');
+                $('#number_box_year span').removeClass('active');
+                $(".month_number").text(cyclecount);
+                dateName = cyclecount + "个月";
+                $('.choose_item.select_cycle .info').attr('placeholder', dateName);
+	 		}
+	 	}
+	 	if(sessionStorage.renew_price!==""&&sessionStorage.renew_price!==undefined){
+	 		$(".computed_price").html(sessionStorage.renew_price);
+	 	}
+	    
     </script>
 </body>
 

src/web/templates/weixin/vipsubscribe/vip_upgrade.html

@@ -14,7 +14,7 @@
     <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"}}">
+    <link rel="stylesheet" href="/vipsubscribe/css/vip_update.css?v={{Msg "seo" "version"}}3">
 </head>
 
 <body class="no-touch">
@@ -23,20 +23,20 @@
             <p class="update_tip">提示：订阅升级可在已购买的服务基础上，增加区域、行业、以及延长订阅周期!</p>
             <ul class="chooseList">
                 <li class="choose_item">
-                    <a href="/front/vipsubscribe/toChooseArea">
+                    <a href="/front/vipsubscribe/toChooseAreaUpgrade">
                         <span class="label">区域</span>
-                        <input type="text" disabled value="" placeholder="选择全国、省份、地市" class="info">
+                        <input type="text" id="area" value="" placeholder="选择全国、省份、地市" class="info">
                         <i class="iconfont icon-arrow"></i>
                     </a>
-                    <p class="add_tips area-list">已新增 1 个省级区域、4 个地市</p>
+                    <p class="add_tips area-list" style="display: none;">已新增 1 个省级区域、4 个地市</p>
                 </li>
                 <li class="choose_item">
-                    <a href="/front/vipsubscribe/toChooseIndustry">
+                    <a href="/front/vipsubscribe/toChooseIndustryUpgrade">
                         <span class="label">行业</span>
-                        <input type="text" disabled value="" placeholder="选择采购单位行业" class="info">
+                        <input type="text" id="buyerclass" disabled value="" placeholder="选择采购单位行业" class="info">
                         <i class="iconfont icon-arrow"></i>
                     </a>
-                    <p class="add_tips industry-list">已新增 2 个行业</p>
+                    <p class="add_tips industry-list" style="display: none;">已新增 2 个行业</p>
                 </li>
                 <!-- <li class="choose_item select_cycle">
                     <a href="javascript:;">
@@ -48,7 +48,16 @@
                 <li class="choose_item choose_effect_date">
                     <a href="javascript:;">
                         <span class="label">生效日期</span>
-                        <span class="info" id="effect_date_name">立即生效，需支付本月费用</span>
+                        <span class="info" id="effect_date_name">立即生效，需支付当月费用差价</span>
+                        <i class="iconfont icon-arrow choose_time"></i>
+                    </a>
+                </li>
+            </ul>
+            <ul class="chooseList">
+                <li class="choose_item lengthen">
+                    <a href="javascript:;">
+                        <span class="label">延长订阅周期</span>
+                        <span class="info">不延长</span>
                         <i class="iconfont icon-arrow choose_time"></i>
                     </a>
                 </li>
@@ -57,7 +66,7 @@
                 <div class="select_payment choose_item">
                     <a href="javascript:;">
                         <span class="label">支付方式</span>
-                        <span class="info choose_way" id="payType">微信支付</span>
+                        <span class="info choose_way">微信支付</span>
                         <i class="iconfont icon-arrow choose_way"></i>
                     </a>
                 </div>
@@ -128,8 +137,8 @@
             <div class="price">
                 <label>需补差价：</label>
                 <p>
-                    <span id="oldPrice">&yen;610.80</span>
-                    <strong id="newPrice">&yen;0.00</strong>
+                    <span>&yen;610.80</span>
+                    <strong>&yen;0.00</strong>
                 </p> 
             </div>
             <div class="form-btn">
@@ -137,22 +146,30 @@
             </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>
+                    <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" style="display: none;">￥58.0</div>
                     <div class="bd_select">
+                        <div class="weui-cells weui-cells_checkbox">
+                            <label class="weui-cell weui-check__label prolong_label" style="padding-left: 0.26rem" for="prolong">
+                                <div class="weui-cell__hd">
+                                    <input type="radio" class="weui-check prolong" name="time" value="prolong"
+                                        id="prolong" checked />
+                                    <i class="weui-icon-checked"></i>
+                                </div>
+                                <div class="weui-cell__bd">
+                                    <p>不延长</p>
+                                </div>
+                            </label>
+                        </div>
                         <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">
@@ -187,15 +204,16 @@
                                 </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>
+                                <span class="year_number" 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" disabled id="enter_period">确认</button>
+                    <!-- <button class="btn enter" disabled id="enter_period">确认</button> -->
+                    <button class="btn enter" id="enter_period">确认</button>
                 </div>
             </div>
         </div>
@@ -212,21 +230,21 @@
                     <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_name now">立即生效，需支付当月费用差价</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 />
+                                <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_name notnow"></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" />
+                                <input type="radio" class="weui-check" name="date" value="" id="nextMonth" />
                                 <i class="weui-icon-checked"></i>
                             </div>
                         </label>
@@ -247,32 +265,42 @@
                     <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>
+                                <p><img src="/vipsubscribe/image/weixin.png">微信支付</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">
+                        <!--<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>
+                                <p><img src="/vipsubscribe/image/zhifubao.png">支付宝支付</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>
+                        </label>-->
                     </div>
                 </div>
             </div>
         </div>
     </div>
-    <script src="/vipsubscribe/js/jquery-2.1.4.js?v={{Msg "seo" "version"}}"></script>
+    <script src="/vipsubscribe/js/jquery-2.1.4.js"></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 src="/vipsubscribe/js/weui.min.js?v={{Msg "seo" "version"}}"></script>
     <script>
-        // 隐藏dialog选择框
+        // 当续费时间 + 当前已经买的时间超过36个月，给出提醒
+//      var overtimeWarning = `最长订阅周期不可超过3年<br />当前订阅周期：16个月`
+//      weui.toast(overtimeWarning, {
+//          duration: 3000,
+//          className: 'custom-toast',
+//          callback: function() {
+//              console.log('close') 
+//          }
+//      })
+
+        // 隐藏dialog选择框事件
         function hideDialog() {
             $('#pay_way').hide(200);
             $('#time_cycle').hide(200);
@@ -280,25 +308,18 @@
         }
         $('.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();
-            $('.pay_way').hide(200);
-            $('.pay_mode .select_payment .choose_way.info').html(checkValue);
-            var payType = "";
-            if(checkValue === "微信支付"){
-            	payType = "wx";
-            }else if(checkValue === "支付宝支付"){
-            	payType = "alipy";
-            }
-            sessionStorage.payType = payType
-        });
+//      $('.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);
@@ -306,51 +327,67 @@
         // 对生效日期方式选择的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);
             var effective = "";
-            if(checkValue === "立即生效，需支付本月费用"){
+            var effectiveName = new Date().getMonth()+1;
+            var effectiveNames = effectiveName+"月1日生效"
+            if(checkValue === "立即生效，需支付当月费用差价"){
             	effective = "now";
-            }else if(checkValue === "9月1日生效"){
+            }else if(checkValue === effectiveNames){
             	effective = "notnow";
             }
             sessionStorage.effectiveDate = effective;
+            $('#effect_date_name').html(checkValue);
         });
+        //
+		var effectiveName = new Date().getMonth()+1;
+		var effectiveNames = effectiveName+"月1日生效"
+		$(".effective_name.notnow").text(effectiveNames);
+		$('#nextMonth').val(effectiveNames);
         
-
-        /* 
-         // 选择周期
-        $('.select_cycle > a').click(function () {
+        // 选择周期
+        $('.lengthen > a').click(function () {
             $('#time_cycle').show(200);
         })
-        // 对订阅时间选择的input绑定点击事件
+        // 对订阅时间选择的 input绑定点击事件
         $('#time_cycle input:radio[name="time"]').on('click', function (e) {
             // 解除确认按钮的锁定
             $('#time_cycle .form-btn button').removeAttr('disabled')
 
             if ($(e.target).hasClass('monthly')) {
                 // 按月订阅
+                $('.computed_price').show()
                 // 显示隐藏tips提示
-                $('#time_cycle .tips.monthly_tips').show();
-                $('#time_cycle .tips.yearly_tips').hide();
+                // $('#time_cycle .tips.monthly_tips').show();
+                // $('#time_cycle .tips.yearly_tips').hide();
 
                 $('#number_box_month').addClass('active');
                 $('#number_box_year span').removeClass('active');
-            } else {
+            } else if($(e.target).hasClass('yearly')){
+                $('.computed_price').show()
                 // 按年订阅
-                $('#time_cycle .tips.yearly_tips').show();
-                $('#time_cycle .tips.monthly_tips').hide();
+                // $('#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');
+            }else{
+                $('.computed_price').hide()
+                $('#number_box_month').removeClass('active');
+                $('#number_box_year span').removeClass('active');
             }
         })
         // 控制月份number_box的事件
+        /* --------控制月份number_box的事件  点击加减号触发的事件------- */
         $('#number_box_month').on('click', 'button', function (e) {
+            // 点击加减号让input radio选中
+            $("#monthly").prop('checked', true);
+            $('#number_box_month').addClass('active')
+            $('.number_box span').removeClass('active')
+
             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());
@@ -367,17 +404,24 @@
             if ($(e.target).hasClass('add')) {
                 // 点的+
                 // currentNum = currentNum >= 12 ? 12 : currentNum + 1;
-                currentNum = currentNum >= data.numboxMax ? data.numboxMax : currentNum + data.numboxStep;
+                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;
+                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)
@@ -392,40 +436,89 @@
             }
         })
 
-        // 控制年份number_box的事件
+        /* -------- 控制年份number_box的事件  点击1年 2年 3年触发的事件------- */
         $('#number_box_year').on('click', 'span', function (e) {
-            // var $input = $('#time_cycle input:radio[name="time"]');
-            var $yearlyInput = $('#yearly');
+            console.log(e.target.dataset.id)
+            let id = e.target.dataset.id;
+            $('.profit_tips').hide()
+            $('#number_box_month').removeClass('active');
+            $(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)
+        })
 
-            if (!$yearlyInput.prop('checked')) {
-                return
+        /* -------- 选择按月订阅  radio触发的事件------- */
+        $('#monthly').on('change', function (e) {
+            let isChecked = $(this).is(':checked')
+            let val = $('.month_number').text();
+            if (val >= 10) {
+                $('.profit_tips').show()
             }
-            $(this).addClass('active').siblings().removeClass('active')
+            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 + '个月')
-                     })                          
-                }
+        $('#enter_period').on('click', function () {
+            var checked = $('#time_cycle input[name="time"]:checked')
+            // 获取其label的for属性，通过for属性来怕短板
+            // prolong 不延长
+            // monthly 按月
+            // yearly 按年
+            var flag = checked.parents('label').attr('for')
+            var val = '不延长';
+            var flagVal = ""; //1-年，2-月
+            var flagValLen = "";
+            if (flag === 'prolong') {
+                val = '不延长'
+            } else if (flag === 'monthly') {
+                val = $('#number_box_month .month_number').text() + '个月'
+                flagVal = 2;
+                flagValLen = Number($('#number_box_month .month_number').text());
+            } else if (flag === 'yearly') {
+                val = $('#number_box_year .year_number.active').text();
+                flagVal = 1;
+                flagValLen = Number($('#number_box_year .year_number.active').text().replace("年",""));
+            }
+            sessionStorage.upgrade_cycleunit = flagVal;
+            sessionStorage.upgrade_cyclecount = flagValLen;
+            sessionStorage.upgrade_price = $(".computed_price").html();
+            $('#time_cycle').hide(function () { 
+                $('.choose_item.lengthen .info').text(val)
             })
-        })*/
+        })
+        
         //新增区域
 	    if(sessionStorage.vipSubSelectArea!==""&&sessionStorage.vipSubSelectArea!==undefined){
 			var vipSubSelectArea = JSON.parse(sessionStorage.vipSubSelectArea);
 			var provinceArr = [];
 			var cityArr = [];
 			var isAll = "";
+			$(".area-list").show();
 			for (var province in vipSubSelectArea){
 				provinceArr.push(province);
 				if(vipSubSelectArea[province].length > 0){
@@ -450,8 +543,9 @@
 	    //新增行业
 	    if(sessionStorage.vipSubSelectIndustry!==""&&sessionStorage.vipSubSelectIndustry!==undefined){
 	    	var vipSubSelectIndustry = JSON.parse(sessionStorage.vipSubSelectIndustry);
-	    	industryArr = [];
+	    	var industryArr = [];
 	    	var isAll = "";
+	    	$(".industry-list").show();
 	    	for(var i in vipSubSelectIndustry){
 	    		var industry = vipSubSelectIndustry[i];
 	    		industryArr.push(industry);
@@ -471,28 +565,118 @@
 	    	var effective = sessionStorage.effectiveDate;
 	    	var effectiveHtml = "";
 	    	if(effective === "now"){
-	    		effectiveHtml = "立即生效，需支付本月费用";
+	    		effectiveHtml = "立即生效，需支付当月费用差价";
 	    	}else if(effective === "notnow"){
-	    		effectiveHtml = "9月1日生效";
+	    		var effectiveName = new Date().getMonth()+1;
+	    		effectiveHtml = effectiveName+"月1日生效";
 	    	}
-	    	$('#effective_date input:radio[name="date"]').val(effectiveHtml);
-	    	$('#effective_date input:radio[name="date"]').prop("checked", true);
-	    	$("#effect_date_name").text(effectiveHtml);
+	    	$(".effective_name").each(function(){
+	    		if($(this).text() === effectiveHtml){
+	    			$(this).parent().next().find("input").prop("checked", true);
+	    		}
+	    	})
+	    	$('#effect_date_name').html(effectiveHtml);
 	    }
-	    //支付方式
-	    if(sessionStorage.payType!==""&&sessionStorage.payType!==undefined){
-	    	var payType = sessionStorage.payType;
-	    	var payHtml = "";
-	    	if(payType === "wx"){
-	    		payHtml = "微信支付";
-	    	}else if(payType === "alipy"){
-	    		payHtml = "支付宝支付";
+//	    //支付方式
+//	    if(sessionStorage.payType!==""&&sessionStorage.payType!==undefined){
+//	    	var payType = sessionStorage.payType;
+//	    	var payHtml = "";
+//	    	if(payType === "wx"){
+//	    		payHtml = "微信支付";
+//	    	}else if(payType === "alipy"){
+//	    		payHtml = "支付宝支付";
+//	    	}
+//	    	$('input:radio[name="way"]').val(payHtml);
+//	    	$('input:radio[name="way"]').prop("checked", true);
+//	    	$("#payType").text(payHtml);
+//	    }
+
+		//
+        var area = {{.T.area}};
+	    var buyerclass = {{.T.buyerclass}};
+	    var cycleunit = {{.T.cycleunit}};
+	    var cyclecount = {{.T.cyclecount}};
+	    var startTime = {{.T.starttime}};
+	    var endTime = {{.T.endtime}};
+	    //
+	    var areaArr = [];
+	    var areaHtml = "";
+	    var buyerclassArr = [];
+	    var buyerclassHtml = "";
+//	    var dateName = "";
+//	    var dateHtml = "";
+	    if (area !== "" && area !== undefined){
+	    	for(var province in area){
+	    		var citys = area[province]
+//	    		console.log(citys);
+	    		if(citys.length===0){
+	    			areaArr.push(province);
+	    		}else{
+	    			for(var i in citys){
+	    				areaArr.push(citys[i]);
+	    			}
+	    		}
+	    	}
+	    	areaHtml = areaArr.toString().replace(/,/g, " ");
+//	    	$(".item_area .label_for").text(areaHtml);
+	    	$('#area').val(areaHtml);
+	    }
+	    if(buyerclass !== "" && buyerclass !== undefined){
+	    	for(var i in buyerclass){
+	    		var industry = buyerclass[i];
+	    		buyerclassArr.push(industry);
+	    		buyerclassHtml = buyerclassArr.toString().replace(/,/g, " ");
 	    	}
-	    	$('input:radio[name="way"]').val(payHtml);
-	    	$('input:radio[name="way"]').prop("checked", true);
-	    	$("#payType").text(payHtml);
+//	    	$(".item_industry .label_for").text(buyerclassHtml);
+			$('#buyerclass').val(buyerclassHtml);
 	    }
-	    
+//	    if(cycleunit !== "" && cycleunit !== undefined){
+//	    	if(cycleunit === 1){
+//	    		dateName = cyclecount + " 年";
+//	    	}else if(cycleunit === 2){
+//	    		dateName = cyclecount + " 个月";
+//	    	}
+//	    	$(".item_cycle .label_for").text(dateName);
+//	    }
+//	    if(startTime !== "" && endTime !== ""){
+//	    	var start = startTime.replace(/-/g, ".");
+//	    	var end = endTime.replace(/-/g, ".");
+//	    	dateHtml = start + " - " + end;
+//	    	$(".item_validity .label_for").text(dateHtml);
+//	    }
+		if(sessionStorage.upgrade_cyclecount!==""&&sessionStorage.upgrade_cycleunit!==""){
+	 		var cycleunit = sessionStorage.upgrade_cycleunit;
+	 		var cyclecount = sessionStorage.upgrade_cyclecount;
+	 		var dateName = "";
+	 		if(cycleunit === "1"){
+	 			$("#yearly").prop("checked", true);
+	 			$('#number_box_month').removeClass('active');
+	 			$("#number_box_year span").each(function(){
+	 				if($(this).attr("data-id") ===  cyclecount){
+	 					$(this).addClass("active");
+	 				}
+	 			})
+	 			dateName = cyclecount + "年";
+	 			$(".computed_price").show();
+	 			$('.choose_item.lengthen .info').text(dateName);
+	 		}else if(cycleunit === "2"){
+	 			$("#monthly").prop("checked", true);
+	 			$('#number_box_month').addClass('active');
+                $('#number_box_year span').removeClass('active');
+                $(".month_number").text(cyclecount);
+                dateName = cyclecount + "个月";
+                $(".computed_price").show();
+                $('.choose_item.lengthen .info').text(dateName);
+	 		}
+	 	}else{
+	 		$("#prolong").prop("checked", true);
+	 		$('.choose_item.lengthen .info').text("不延长");
+	 		$(".computed_price").hide();
+	 	}
+	 	if(sessionStorage.upgrade_price!==""&&sessionStorage.upgrade_price!==undefined){
+	 		$(".computed_price").html(sessionStorage.upgrade_price);
+	 	}
+
     </script>
 </body>