Merge branch 'dev2.8.5' of http://192.168.3.207:10080/qmx/jy into dev2.8.5

src/jfw/front/vipsubscribe.go

@@ -27,9 +27,7 @@ type Subscribepay struct {
 
 	//修改
 	toEditSubPage       xweb.Mapper `xweb:"/front/vipsubscribe/toEditSubPage"`       //订阅收费修改页面
-	toEditSubProvPage   xweb.Mapper `xweb:"/front/vipsubscribe/toEditSubProvPage"`   //订阅收费修改省份
-	toEditSubAllArea    xweb.Mapper `xweb:"/front/vipsubscribe/toEditSubAllArea"`    //订阅收费全国修改
-	toEditSubCityPage   xweb.Mapper `xweb:"/front/vipsubscribe/toEditSubCityPage"`   //订阅收费修改城市
+	toEditSubAreaPage   xweb.Mapper `xweb:"/front/vipsubscribe/toEditSubAreaPage"`   //订阅收费修改地区
 	toEditSubInduPage   xweb.Mapper `xweb:"/front/vipsubscribe/toEditSubInduPage"`   //订阅收费修改行业
 	submitEditSubFinish xweb.Mapper `xweb:"/front/vipsubscribe/submitEditSubFinish"` //订阅收费修改成功
 
@@ -199,19 +197,9 @@ func (s *Subscribepay) ToEditSubPage() {
 	s.Render("/weixin/vipsubscribe/edit_subscribe.html")
 }
 
-//修改订阅省份
-func (s *Subscribepay) ToEditSubProvPage() {
-	s.Render("/weixin/vipsubscribe/edit_subscribe_province.html")
-}
-
-//修改订阅城市
-func (s *Subscribepay) ToEditSubCityPage() {
-	s.Render("/weixin/vipsubscribe/edit_subscribe_city.html")
-}
-
-//购买全国修改
-func (s *Subscribepay) ToEditSubAllArea() {
-	s.Render("/weixin/vipsubscribe/edit_subscribe_allArea.html")
+//合并后修改地区
+func (s *Subscribepay) ToEditSubAreaPage() {
+	s.Render("/weixin/vipsubscribe/edit_city_new.html")
 }
 
 //修改订阅行业

src/jfw/modules/app/src/web/templates/vipsubscribe/choose_area.html

@@ -471,7 +471,7 @@
                 })
             })
         },
-        getResult: function () {   /* 选中结果 */
+        getResult: function (changeCity) {   /* 选中结果 */
             //如果选中所有，则转为全国
             if ($(".city").length == $(".city.active").length) {
                 $(".checkbox.other").trigger("click");
@@ -539,7 +539,8 @@
                 if (children.length > 0) {
                     // 判断每个省份下选中的城市长度，当大于等于4的时候 弹出"选择全省更划算的弹窗"
                     let childrenArr = [];
-                    if (children.length > selectCityMax) {
+                    //判断操作城市省份下城市的数量
+                    if (result[i].name === $.trim(changeCity)) {
                         selectCityMax = children.length;
                     }
                     html += `${result[i].name}(`
@@ -571,11 +572,11 @@
 
             //提示
             if (!this.vipSubisTrial) {
-                if (selectProvince > 9) {
-                    $('.tips_btn .tips_d_text').text("已选择" + selectProvince + "个省，建议购买“全国”更划算哦~").slideDown()
+                if (selectCityMax > 2) {
+                    $('.tips_btn .tips_d_text').text("已选择" + selectCityMax + "个市，建议购买“全省”更划算哦~").slideDown();
                 } else {
-                    if (selectCityMax > 2) {
-                        $('.tips_btn .tips_d_text').text("已选择" + selectCityMax + "个市，建议购买“全省”更划算哦~").slideDown();
+                    if (selectProvince > 9) {
+                        $('.tips_btn .tips_d_text').text("已选择" + selectProvince + "个省，建议购买“全国”更划算哦~").slideDown()
                     } else {
                         $(".tips_d_text").slideUp();
                     }

src/jfw/modules/subscribepay/src/entity/subscribeVip.go

@@ -339,17 +339,19 @@ func (this *vipSubscribeStruct) OrderCheck(userId string, orderType int) (bool,
 
 //获取省份，城市，行业购买内容
 //[省份，城市，行业]
-func (this *vipSubscribeStruct) GetBuySet(userId string) (*SubvipBuySet, error) {
-	mData, ok := util.MQFW.FindById("user", userId, `{"o_vipjy":1}`)
+func (this *vipSubscribeStruct) GetBuySet(userId string) (*SubvipBuySet, bool, error) {
+	mData, ok := util.MQFW.FindById("user", userId, `{"o_vipjy":1,"i_vip_status":1}`)
 	if !ok || len(*mData) == 0 || mData == nil {
-		return nil, errors.New("查询出错")
+		return nil, false, errors.New("查询出错")
 	}
+	//是否处于vip状态
+	vipStatus := qutil.IntAll((*mData)["i_vip_status"])
 	tmp := qutil.ObjToMap((*qutil.ObjToMap((*mData)["o_vipjy"]))["o_buyset"])
 	return &SubvipBuySet{
 		qutil.IntAll((*tmp)["areacount"]),
 		(*qutil.ObjToMap((*tmp)["citys"])),
 		qutil.IntAll((*tmp)["buyerclasscount"]),
-	}, nil
+	}, vipStatus == 1 || vipStatus == 2, nil
 }
 
 //订阅修改校验
@@ -368,9 +370,6 @@ func (this *vipSubscribeStruct) SubEditCheckArea(area *map[string]interface{}, b
 				return false
 			}
 		} else {
-			if _, ok := buySet.Citys[k]; ok { //不能选中购买单个城市的省份
-				return false
-			}
 			pCount++
 		}
 	}

src/jfw/modules/subscribepay/src/service/vipSubscribeEdit.go

@@ -67,10 +67,13 @@ func (this *EditSub) SaveSubEdit() {
 	userId := qutil.ObjToString(this.GetSession("userId"))
 	r := func() *editSubResult {
 		//获取购买数量
-		buyset, err := entity.JyVipSubStruct.GetBuySet(userId)
+		buyset, isVip, err := entity.JyVipSubStruct.GetBuySet(userId)
 		if err != nil {
 			return &editSubResult{false, errors.New("查询出错"), nil}
 		}
+		if !isVip {
+			return &editSubResult{false, errors.New("非vip状态"), nil}
+		}
 		switch doType {
 		case "area":
 			areaNew := map[string]interface{}{}

src/web/staticres/vipsubscribe/css/choose_area_new.css

@@ -0,0 +1,609 @@
+@charset "UTF-8";
+.main {
+  width: 100%;
+  overflow: scroll;
+}
+
+.main::-webkit-scrollbar {
+  display: none;
+}
+
+.layout_top-bottom {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+}
+
+.layout_top-bottom .layou_top {
+  flex: 1;
+  overflow: scroll;
+}
+
+.bottom_button {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: .94rem;
+}
+
+.bottom_button .left_btn,
+.bottom_button .right_btn {
+  flex: 1;
+  height: 100%;
+  font-size: .34rem;
+}
+
+.bottom_button .left_btn {
+  color: #2cb7ca;
+  background-color: #fff;
+  border-top: 1px solid #e0e0e0;
+}
+
+.bottom_button .right_btn {
+  color: #fff;
+  background-color: #2cb7ca;
+  border-top: 1px solid #2cb7ca;
+}
+
+.bottom_button button[disabled] {
+  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%;
+  height: 100%;
+}
+
+.jy_icon.decrease:before,
+.jy_icon.increase:before,
+.jy_icon.increase:after {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  content: '';
+  width: 0.4rem;
+  height: 0.04rem;
+  background-color: #686868;
+  transform: translate(-50%, -50%);
+}
+
+.jy_icon.increase:after {
+  transform: translate(-50%, -50%) rotate(90deg);
+}
+
+/*禁止长按复制 加给body*/
+.no-touch {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+/* 弹性盒子布局 */
+.flex_alginC {
+  display: flex;
+  align-items: center;
+}
+
+.flex_alginC_justB {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.flex_alginC_justC {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.flex_column {
+  display: flex;
+  flex-direction: column;
+}
+
+.flex_column_alignC {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* 自定义弹窗*/
+@-webkit-keyframes c {
+  0% {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes c {
+  0% {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.custom-dialog .weui-animate-fade-in {
+  -webkit-animation: c ease 0s forwards;
+  animation: c ease 0s forwards;
+}
+
+@-webkit-keyframes d {
+  0% {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes d {
+  0% {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+.custom-dialog .weui-animate-fade-out {
+  -webkit-animation: d ease 0s forwards;
+  animation: d ease 0s forwards;
+}
+
+.custom-dialog .weui-dialog__hd {
+  background: #F5F4F9;
+  padding: .17rem 0;
+  color: #000;
+  font-size: .34rem;
+  text-align: center;
+}
+
+.custom-dialog .weui-dialog__bd {
+  padding: .37rem 0;
+  color: #1D1D1D;
+  font-size: .32rem;
+  text-align: center;
+}
+
+.custom-dialog .weui-dialog__ft:after {
+  border: 0;
+}
+
+.custom-dialog .weui-dialog__btn:after {
+  border: 0;
+}
+
+.custom-dialog .weui-dialog__ft {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-bottom: .38rem;
+  box-sizing: border-box;
+  text-align: center;
+}
+
+.custom-dialog .weui-dialog__btn {
+  display: block;
+  width: 1.72rem;
+  height: .72rem;
+  line-height: .72rem;
+  color: #fff;
+  padding: 0;
+  flex: none;
+  text-align: center;
+  border-radius: 3px;
+}
+
+.custom-dialog .weui-dialog__btn_primary {
+  background-color: #2CB7CA;
+  margin-right: 1rem;
+}
+
+.custom-dialog .weui-dialog__btn_default {
+  background-color: #BFBFC3;
+}
+
+/* 自定义switch按钮 */
+.custom-switch {
+  position: relative;
+  width: 52px;
+  height: 32px;
+  border: 1px solid #dfdfdf;
+  outline: 0;
+  border-radius: 16px;
+  box-sizing: border-box;
+  background-color: #dfdfdf;
+  -webkit-transition: background-color .1s,border .1s;
+  transition: background-color .1s,border .1s;
+  -webkit-appearance: none;
+}
+
+.custom-switch:before {
+  content: " ";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 50px;
+  height: 30px;
+  border-radius: 15px;
+  background-color: #fdfdfd;
+  -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
+  transition: -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
+  transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
+  transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1), -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
+}
+
+.custom-switch:after {
+  content: " ";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 30px;
+  height: 30px;
+  border-radius: 15px;
+  background-color: #fff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+  -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
+  transition: -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
+  transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
+  transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35), -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
+}
+
+.custom-switch.checked {
+  border-color: #04be02;
+  background-color: #04be02;
+}
+
+.custom-switch.checked:before {
+  transform: scale(0);
+}
+
+.custom-switch.checked:after {
+  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;
+}
+
+#choose_area {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  overflow: hidden;
+  height: 100%;
+}
+
+#choose_area .form {
+  flex: 1;
+  overflow-y: scroll;
+}
+
+#choose_area .optional_count, #choose_area .all_area {
+  background: #fff;
+  height: .88rem;
+  line-height: .88rem;
+  padding: 0 .3rem;
+  font-size: .3rem;
+  color: #1d1d1d;
+}
+
+#choose_area .optional_count em, #choose_area .all_area em {
+  color: #2cb7ca;
+}
+
+#choose_area .result {
+  position: relative;
+  padding: .2rem .3rem;
+  font-size: .26rem;
+  text-align: justify;
+}
+
+#choose_area .result .result_text {
+  position: relative;
+  min-height: 19px;
+}
+
+#choose_area .result .line_two {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+#choose_area .result .detail, #choose_area .result .packup {
+  display: inline-block;
+  width: 1.5rem;
+  padding-right: 0.1rem;
+  text-align: right;
+  color: #2cb7ca;
+  font-size: .26rem;
+  z-index: 999;
+}
+
+#choose_area .result .detail {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(90deg, rgba(245, 244, 249, 0) 0%, rgba(245, 244, 249, 0.96) 36%, #f5f4f9 100%);
+}
+
+#choose_area .result .packup {
+  position: absolute;
+  right: 0.3rem;
+  bottom: 0;
+  margin-top: .1rem;
+}
+
+#choose_area .select-area-box {
+  padding-bottom: .94rem;
+}
+
+#choose_area .select-area-box .tab {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #1d1d1d;
+  background: #fff;
+  font-size: .3rem;
+  padding: .2rem .5rem;
+  border-bottom: 1px solid #e0e0e0;
+  box-sizing: border-box;
+}
+
+#choose_area .select-area-box .tab .province {
+  display: flex;
+  align-items: center;
+}
+
+#choose_area .select-area-box .tab .province .checkbox {
+  width: .4rem;
+  height: .4rem;
+  border: 1px solid #ddd;
+  border-radius: 50%;
+  margin-right: .2rem;
+  -webkit-appearance: none;
+  background: #fff;
+}
+
+#choose_area .select-area-box .tab .province .checkbox:checked {
+  border: 0;
+  background: url(/vipsubscribe/image/xuanzhong.png) no-repeat center center;
+  background-size: 100% 100%;
+}
+
+#choose_area .select-area-box .tab .province .checkbox[disabled] {
+  border: 0;
+  background: url(/vipsubscribe/image/active_disabled.png) no-repeat center center;
+  background-size: 100% 100%;
+}
+
+#choose_area .select-area-box .tab .province .checkbox.half {
+  border: 0 !important;
+  background: url(/vipsubscribe/image/banxuan.png) no-repeat center center !important;
+  background-size: cover !important;
+}
+
+#choose_area .select-area-box .tab .province .checkbox.half[disabled] {
+  border: 0 !important;
+  background: url(/vipsubscribe/image/banxuan.png) no-repeat center center !important;
+  background-size: cover !important;
+}
+
+#choose_area .select-area-box .tab .optional {
+  color: #2CB7CA;
+  font-size: 0.28rem;
+  margin-left: -2.8rem;
+}
+
+#choose_area .select-area-box label::after {
+  font-size: 14px;
+  float: right;
+  margin-right: 15px;
+}
+
+#choose_area .select-area-box .tab_content {
+  display: none;
+  font-size: .28rem;
+  padding: .1rem .3rem;
+  text-align: center;
+}
+
+#choose_area .select-area-box .tab_content .city {
+  float: left;
+  padding: .1rem .2rem;
+  background: #fff;
+  margin: .1rem 0 .1rem .1rem;
+  border-radius: 0.04rem;
+  font-size: .28rem;
+}
+
+#choose_area .select-area-box .tab_content .active {
+  background: #2cb7ca;
+  color: #fff;
+}
+
+#choose_area .select-area-box .tab_content .active[disabled] {
+  background: #BFBFC3;
+  color: #fff;
+}
+
+#choose_area .select-area-box .tab_content .city[disabled] {
+  background: #BFBFC3;
+  color: #fff;
+}
+
+#choose_area .select-area-box .index {
+  padding: .3rem .3rem .1rem .3rem;
+  font-size: .32rem;
+}
+
+#choose_area .slide {
+  background: transparent;
+  position: fixed;
+  right: 0;
+  top: 50%;
+  height: 8.5rem;
+  width: .4rem;
+  font-size: .26rem;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: .1rem 0;
+  align-items: center;
+  margin-top: -4.25rem;
+  z-index: 9999;
+}
+
+#choose_area .slide a {
+  margin-bottom: .1rem;
+}

src/web/staticres/vipsubscribe/css/vip_subscribe_edit.css

@@ -393,19 +393,10 @@
   position: relative;
   background: #fff;
   padding: .32rem .3rem;
+  border-top: .01rem solid #CECECE;
+  border-bottom: .01rem solid #CECECE;
 }
 
-.vip_subscribe_edit .edit_content .edit_item:after {
-  position: absolute;
-  content: '';
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  height: 1px;
-  background-color: #CECECE;
-  transform-origin: 0 0;
-  transform: scaleY(0.5);
-}
 
 .vip_subscribe_edit .edit_content .edit_item .item_top {
   display: flex;
@@ -426,6 +417,9 @@
 .vip_subscribe_edit .edit_content .edit_item .item_bottom {
   color: #686868;
   font-size: .26rem;
+  flex: 1;
+  text-align: right;
+  padding-right: .2rem;
 }
 
 .vip_subscribe_edit .edit_tips {

src/web/staticres/vipsubscribe/js/common.js

@@ -11,9 +11,9 @@ function $DoPost(url,param={},callback,async=true){
 			if(r.error||r.errMsg){
 				var errTip = r.error||r.errMsg;
 				weui.toast(errTip,{
-		          duration: 2000,
-		          className: 'custom-toast',
-		        });
+					duration: 2000,
+					className: 'custom-toast',
+				});
 			}
 		}
 	})
@@ -21,57 +21,57 @@ function $DoPost(url,param={},callback,async=true){
 
 //获取url参数
 function getParam(name) {
-  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
-  var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
-  var context = "";
-  if (r != null)
-      context = r[2];
-  reg = null;
-  r = null;
-  return context == null || context == "" || context == "undefined" ? "" : context;
+	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
+	var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
+	var context = "";
+	if (r != null)
+		context = r[2];
+	reg = null;
+	r = null;
+	return context == null || context == "" || context == "undefined" ? "" : context;
 }
 
 //省份 城市 分类
 function getAreaClassArr_index(area){
 	let cityArr=[];//城市
-    let provinceArr=[];//省份
-    for(var i in area) {
-      let citys=area[i]
-      if(citys.length>0){
-        cityArr = cityArr.concat(citys);
-        provinceArr.push(i+"("+cityArr.join("、")+")")
-      }else{
-    	if(i=="全国"){
-			continue
+	let provinceArr=[];//省份
+	for(var i in area) {
+		let citys=area[i]
+		if(citys.length>0){
+			cityArr = cityArr.concat(citys);
+			provinceArr.push(i+"("+cityArr.join("、")+")")
+		}else{
+			if(i=="全国"){
+				continue
+			}
+			provinceArr.push(i)
 		}
-        provinceArr.push(i)
-      }
-    }
-    return SortArr(provinceArr)
+	}
+	return SortArr(provinceArr)
 }
 
 //省份 城市 分类
 function getAreaClassArr(area){
 	let cityArr=[];//城市
-    let provinceArr=[];//省份
-    for(var i in area) {
-      let citys=area[i]
-      if(citys.length>0){
-        cityArr = cityArr.concat(citys);
-      }else{
-    	if(i=="全国"){
-			continue
+	let provinceArr=[];//省份
+	for(var i in area) {
+		let citys=area[i]
+		if(citys.length>0){
+			cityArr = cityArr.concat(citys);
+		}else{
+			if(i=="全国"){
+				continue
+			}
+			provinceArr.push(i)
 		}
-        provinceArr.push(i)
-      }
-    }
-    return [SortArr(provinceArr),SortArr(cityArr)]
+	}
+	return [SortArr(provinceArr),SortArr(cityArr)]
 }
 
 //对数组进行排序（拼音）
 function SortArr(arr){
 	arr = arr.sort(function compareFunction(item1, item2) {
-	    return item1.localeCompare(item2);
+		return item1.localeCompare(item2);
 	});
 	return arr
 }
@@ -91,18 +91,18 @@ function getsubVipOrderPrice(area,industry,t,price){
 			price=priceData
 		}else{
 			$DoPost("/subscribepay/vipsubscribe/getPrice",{},function(r){
-	          if(r){
-	            price=r;
-	            priceData=price;
-	          }else{
-	        	weui.toast("加载价格异常",{
-		          duration: 2000,
-		          className: 'custom-toast',
-		        });
-	          }
-	        },false)
+				if(r){
+					price=r;
+					priceData=price;
+				}else{
+					weui.toast("加载价格异常",{
+						duration: 2000,
+						className: 'custom-toast',
+					});
+				}
+			},false)
 		}
-	}	
+	}
 	if(industry[0] == "全部行业")industry= []
 	if(area["全国"]) area={}
 	//当行业数量大于最大值price.BuyerClassMaxCount 按照全行业计算
@@ -113,7 +113,7 @@ function getsubVipOrderPrice(area,industry,t,price){
 	//计算地区数量
 	var pCount = -1         //省份数量
 	var citysCountMap = {} //购买省份中城市数量
-	
+
 	if(!$.isEmptyObject(area)){
 		pCount=0
 		for(var i in area) {
@@ -124,35 +124,35 @@ function getsubVipOrderPrice(area,industry,t,price){
 				if(citys.length > price.cityMaxCount){
 					pCount++
 				}else{
-					citysCountMap[i]= citys.length 
+					citysCountMap[i]= citys.length
 				}
 			}
-	    }
+		}
 	}
-	
+
 	//当省份数量大于price.ProvinceMaxCount 按照全国计算
 	if (pCount > price.provinceMaxCount) {
 		pCount = -1
 	}
-	
+
 	if(t[0]>price.monthMaxCount&&t[1]==2) t[0]=10 //月份十个月以上价格一样
-	
+
 	if(pCount == -1){//计算全国套餐价格
 		if(industryNum==1) return getSetMealPrice(0,1,t[1],price)*t[0]/100 //全国1行业套餐
 		if(industryNum==0) return getSetMealPrice(0,0,t[1],price)*t[0]/100 //全国全行业套餐
 		return	getSetMealPrice(0,industryNum,t[1],price) * t[0] / 100 //全国多行业套餐
 	}
-	
+
 	var final_price	= pCount*getSetMealPrice(1,industryNum,t[1],price)*t[0];//计算省份价格
-	
+
 	for(var i in citysCountMap) {
-		var thisPrice = 0;	
+		var thisPrice = 0;
 		var citys = area[i]
 		if(citysCountMap[i]==1){//单城市
 			thisPrice = getSetMealPrice(2,industryNum,t[1],price)*t[0];
 		}else{//多城市
 			if(industryNum==0||industryNum==1){//多城市 单行业
-				thisPrice = citysCountMap[i] * getSetMealPrice(2,industryNum,t[1],price) * t[0];	
+				thisPrice = citysCountMap[i] * getSetMealPrice(2,industryNum,t[1],price) * t[0];
 			}else{//多城市 多行业
 				var industry_Price= price.buyerClassPrice  * industryNum;
 				var city_Price = price.cityPrice *citysCountMap[i];
@@ -160,40 +160,40 @@ function getsubVipOrderPrice(area,industry,t,price){
 				if(t[1]==1) thisPrice *= 10 //年的价格是月价格的10倍
 			}
 		}
-    	final_price += thisPrice;
-    }
-    return final_price/100
+		final_price += thisPrice;
+	}
+	return final_price/100
 }
 //获取套餐价格
-//c(city) 全国:0 省:1 市:2 
+//c(city) 全国:0 省:1 市:2
 //iCount(industry) 全行业:0 行业:1 其他:多个行业
 //u(unit) 年:1 月:2
 function getSetMealPrice(c,iCount,u,price){
 	var t = u==2 //是否是月单位
 	switch(c){
-	case 0:
-		if(iCount==0){
-			if(t)return price.month.allProvince_allBuyerClass  //1月全国全行业
-			return price.year.allProvince_allBuyerClass //1年全国全行业
-		}else{
-			if(t)return price.month.allProvince_oneBuyerClass * iCount //1月全国icount个行业
-			return price.year.allProvince_oneBuyerClass * iCount	//1年全国icount个行业
-		}
-	case 1:
-		if(iCount==0){
-			if(t)return price.month.oneProvince_allBuyerClass  //1月1省全行业
-			return price.year.oneProvince_allBuyerClass	//1年1省全行业
-		}else{
-			if(t)return price.month.oneProvince_oneBuyerClass * iCount //1月1省icount个行业
-			return price.year.oneProvince_oneBuyerClass * iCount	//1年1省icount个行业
-		}
-	default:
-		if(iCount==0){
-			if(t)return price.month.oneCity_allBuyerClass  //1月1市全行业
-			return price.year.oneCity_allBuyerClass	//1年1市全行业
-		}else{
-			if(t)return price.month.oneCity_oneBuyerClass * iCount //1月1市icount个行业
-			return price.year.oneCity_oneBuyerClass * iCount	//1年1市icount个行业
-		}
+		case 0:
+			if(iCount==0){
+				if(t)return price.month.allProvince_allBuyerClass  //1月全国全行业
+				return price.year.allProvince_allBuyerClass //1年全国全行业
+			}else{
+				if(t)return price.month.allProvince_oneBuyerClass * iCount //1月全国icount个行业
+				return price.year.allProvince_oneBuyerClass * iCount	//1年全国icount个行业
+			}
+		case 1:
+			if(iCount==0){
+				if(t)return price.month.oneProvince_allBuyerClass  //1月1省全行业
+				return price.year.oneProvince_allBuyerClass	//1年1省全行业
+			}else{
+				if(t)return price.month.oneProvince_oneBuyerClass * iCount //1月1省icount个行业
+				return price.year.oneProvince_oneBuyerClass * iCount	//1年1省icount个行业
+			}
+		default:
+			if(iCount==0){
+				if(t)return price.month.oneCity_allBuyerClass  //1月1市全行业
+				return price.year.oneCity_allBuyerClass	//1年1市全行业
+			}else{
+				if(t)return price.month.oneCity_oneBuyerClass * iCount //1月1市icount个行业
+				return price.year.oneCity_oneBuyerClass * iCount	//1年1市icount个行业
+			}
 	}
 }

src/web/staticres/vipsubscribe/js/editArea.js

@@ -0,0 +1,345 @@
+// 后端数据结构
+var areaData = {
+    "data": {
+        "area": {
+            "北京": [],
+            "河南": [
+                "商丘市",
+                "安阳市",
+                "新乡市",
+                "郑州市"
+            ],
+            "澳门": [],
+            "甘肃": []
+        },
+        "buyset": {
+            "areacount": 4,
+            "buyerclasscount": 11,
+            "citys": {
+                "河南": 4
+            }
+        },
+        "industry": [
+            "党委办",
+            "公共资源交易",
+            "公安",
+            "出版广电",
+            "国资委",
+            "地震",
+            "安监",
+            "工商",
+            "法院",
+            "电信行业",
+            "财政"
+        ]
+    },
+    "errMsg": "",
+    "success": true
+}
+
+
+//加载数据
+function getData() {
+    $DoPost("/subscribepay/editSub/getSubBuyMsg", {}, function (r) {
+        if (r.success) {
+            areaData = r;
+        }
+    }, false);
+}
+
+// 渲染城市方法
+function createMoreCity(arr) {
+    var tempHtml = arr.map(function (v) {
+        return '<button class="city">' + v.name + '</button>'
+    }).join('')
+    return tempHtml
+}
+
+// 省下拉市事件
+function slideFun(obj) {
+    if (obj.next('.tab_content:not(:animated)').css("display") == "block") {
+        obj.children().children('i').css({
+            "display": "inline-block",
+            "transform": "rotate(0)"
+        })
+    } else {
+        obj.children().children('i').css({
+            "display": "inline-block",
+            "transform": "rotate(-180deg)"
+        })
+    }
+    obj.toggleClass('selected').next('.tab_content:not(:animated)').slideToggle(500)
+    obj.parent().siblings().children('.tab').removeClass('selected');
+}
+
+var obj
+
+// 改变选择结果方法
+function getResult() {
+    var data = '';
+    obj = {};
+    $('.result_name').empty();
+    $('.province').each(function () {
+        let provinceText = $(this).text().trim();//省份名称
+        let isChecked = $(this).children('.checkbox').is(':checked');
+        let isHalf = $(this).children('.checkbox').hasClass('half');
+        let arr = [];
+        if (isChecked) {
+            data += provinceText + '、';
+            obj[provinceText] = [];
+        } else if (isHalf && !isChecked) {
+            let $that = $(this);
+            obj[$that.text().trim()] = [];
+            $that.parent().siblings().find('.city').each(function () {
+                let parent = $(this).parent().siblings().find('.province').text().trim();
+                if ($(this).is('.active') && parent == $that.text().trim()) {
+                    arr.push($(this).text().trim())
+                }
+            })
+            obj[$that.text().trim()] = arr
+            data += `${$that.text().trim()}(${arr.join('、')})、`
+        }
+    })
+    $('count').html($('.checkbox:not(.other):checked').length);
+    $('.result_name').append(data.substring(0, data.length - 1));
+    //校验是否修改
+    if (theSameAs(obj)) {
+        $('#enter').attr("disabled", "disabled");
+    } else {
+        $('#enter').removeAttr("disabled");
+    }
+}
+
+// 初始化页面方法
+function init() {
+    let p = areaData.data.area;
+    let count = areaData.data.buyset.citys;
+    var ht = '';
+    // 1.渲染城市列表
+    $(".select-area-box ul li:not('.index')").each(function () {
+        var text = $(this).find(".province").text().trim()
+        var data = null
+        chinaMapJSON.some(function (v) {
+            data = v
+            return v.name.indexOf(text) !== -1
+        })
+        var box = $(this).find('div.tab_content')
+        var html = createMoreCity(data.city)
+        box.html(html)
+    })
+    // 2.当areacount == -1时，全国为选中状态，为正数时为选中的省份数目，全国选项不显示
+    if (areaData.data.buyset.areacount == -1) {
+        // 选中全国
+        // $('.optional_count').html("可选择全部区域")
+        $('.all_area').show()
+        $('.optional_count').hide()
+        $('.total').html('34')
+        $('.count').html('34')
+        $('.tab.whole').parent('li').show();
+        $('.checkbox.other').prop('checked', true);
+        $('.checkbox:not(.other)').attr('disabled', true)
+        ht += `<span>全国</span>`
+    } else {
+        $('.all_area').hide()
+        $('.optional_count').show()
+        $('.total').html(areaData.data.buyset.areacount)
+        $('.tab.whole').parent('li').hide();
+        $('.checkbox.other').attr('disabled', true);
+        // 渲染已选择结果
+        for (const k in p) {
+            console.log(p[k], k)
+            if (p[k].length == 0) {
+                ht += k + '、';
+                $('.province').each(function () {
+                    let t = $(this).text().trim();
+                    if (k == t && p[k].length == 0) {
+                        // 如果购买的是全省，则不可点击下拉事件（不可修改城市）
+                        // $(this).parent('.tab').unbind("click").parent('li').siblings().find('.tab').unbind("click");
+                        $(this).parent().siblings().children('.city').addClass('active').attr('disabled', true);
+                        $(this).children('.checkbox').prop('checked', true)
+                    }
+                })
+            } else {
+                console.log(k, p[k])
+                ht += `${k}( ${p[k].join('、')} )、`;
+                $('.city').each(function () {
+                    let t = $(this).text().trim();
+                    p[k].forEach(v => {
+                        // console.log(v,t)
+                        if (v == t) {
+                            let that = $(this).parents('li').find('.tab:not(.municipality)');
+                            console.log("v==t")
+                            // 如果是可修改城市的省份，则可以进行下拉展示
+                            that.bind('click', function () {
+                                slideFun($(this));
+                            });
+                            $(this).addClass('active').parent().siblings('.tab').find('input').addClass('half');
+                            return;
+                        }
+                    })
+                })
+                for (const c in count) {
+                    if (p[k].length >= count[c]) {
+                        $('.city:not(.active)').attr('disabled', true)
+                    }
+                }
+            }
+        }
+        // 添加可选择城市文字 和自定义属性值
+        for (const c in count) {
+            $('.province').each(function () {
+                let t = $(this).text().trim();
+                if (c == t) {
+                    $(this).attr("data-count", count[c]);
+                    $(this).after(`<em class="optional">可选择 ${count[c]} 个市</em>`)
+                    $(this).parent().bind('click', function () {
+                        slideFun($(this));
+                    })
+                }
+            })
+        }
+        $('.result_name').append(ht.substring(0, ht.length - 1));
+        $('.count').html($('.checkbox:not(.other):checked').length)
+        //$('.city:not(.active)').attr('disabled', true)
+        // 如果选中的省份数量等于购买的省份数量，则将其他未选中的省份禁用
+        if ($('.checkbox:not(.other):checked').length == $('.total').html()) {
+            $('.checkbox:not(:checked)').attr('disabled', true)
+        }
+    }
+    $('#enter').attr("disabled", "disabled");
+}
+
+$(function () {
+    getData();
+    // 初始化
+    init();
+    /**** 点击checkbox实现onchange事件 *****/
+    // 1.点击全国按钮onchange事件；
+    $('.checkbox.other').on('change', function () {
+        let isChecked = $(this).is(':checked');
+        if (isChecked) {
+            $('.count').html('34')
+            $('.checkbox:not(.other)').prop('checked', false).attr('disabled', true).removeClass('half')
+            $('.city').removeClass('active').attr('disabled', true)
+            $('.tab').unbind("click").siblings().slideUp()
+            getResult()
+        } else {
+            // $('.count').html($('.checkbox:not(.other):checked').length)
+            $('.checkbox:not(.other)').removeAttr('disabled')
+            $('.city').removeAttr('disabled')
+            $('.tab:not(.municipality)').on('click', function () {
+                slideFun($(this));
+            });
+            getResult()
+        }
+    })
+    // 2.点击非全国按钮onchange事件；
+    $('.checkbox:not(.other)').on('change', function () {
+        let checkedLength = $('.checkbox:checked').length;
+        let totalLength = $('.total').text();
+        // console.log(checkedLength,totalLength)
+        $('.count').html(checkedLength)
+        if (checkedLength < totalLength) {
+            $('.checkbox:not(.other)').removeAttr('disabled')
+            getResult()
+        } else {
+            $('.checkbox:not(:checked)').attr('disabled', true)
+            getResult()
+        }
+        if ($(this).is(':checked')) {
+            $(this).prop('checked', true).removeClass('half').parent().parent().siblings().find('.city').addClass('active').attr('disabled', true)
+            getResult()
+        } else {
+            $(this).prop('checked', false).removeClass('half').parent().parent().siblings().find('.city').removeClass('active').removeAttr('disabled')
+            getResult()
+        }
+
+    })
+    // 3.点击半选按钮触发的事件
+    $('.checkbox.half').on('change', function () {
+        console.log($(this).is(':checked'))
+        if ($(this).is(':checked')) {
+            $(this).prop('checked', true).removeClass('half');
+            $(this).removeClass('half').parent().parent().siblings().find('.city').addClass('active').attr('disabled', true);
+            $(this).parent().parent().siblings().children('.city').addClass('active');
+            //$(this).parent().siblings('.optional').hide();
+            getResult()
+        } else {
+            $(this).prop('checked', false);
+            $(this).parent().parent().siblings().find('.city').removeClass('active').removeAttr('disabled');
+            $(this).parent().siblings('.optional').show();
+            getResult()
+        }
+    })
+    // 4.点击城市按钮触发的事件
+    $('.tab_content').on('click', '.city', function () {
+        let count = $(this).parent().siblings().find('.province').attr('data-count');
+        $(this).toggleClass('active')
+        var isActive = $(this).parent().find('.city.active').length
+        let cityLength = $(this).parent().find('.city').length
+
+        if (isActive === cityLength) {//当选中的城市数量等于该省下所有城市总数时，即为全选
+            var oInput = $(this).parents('li').find('input.checkbox')
+            oInput.removeClass('half').prop('checked', true)
+            getResult()
+        } else {//半选
+            $(this).parents('li').find('input.checkbox').addClass('half').prop("checked", false)
+            if (isActive > 0 && isActive != count) {
+                $(this).parents('li').find('input.checkbox').addClass('half');
+                $(this).parent('div').find('.city:not(.active)').removeAttr('disabled')
+                getResult()
+            } else if (isActive > 0 && isActive == count) {
+                $(this).parents('li').find('input.checkbox').addClass('half');
+                $(this).parent('div').find('.city:not(.active)').attr('disabled', true)
+                getResult()
+            } else {
+                $(this).parent('div').find('.city:not(.active)').removeAttr('disabled')
+                $(this).parents('li').find('input.checkbox').removeClass('half').prop('checked', false)
+                getResult()
+            }
+        }
+    })
+    // 阻止input checkbox选中取消 触发父元素下拉事件
+    $('.checkbox').click(function (e) {
+        e.stopPropagation();
+    })
+    // 锚点跳转
+    $("body").on('click', '.slide a', function () {
+        var s = $(this).html()
+        if (s == '#') {
+            return;
+        }
+        document.querySelector('#' + s).scrollIntoView({
+            block: 'center'
+        });
+    })
+    // 取消按钮事件 返回上一页
+    $('#cancel').click(function () {
+        // window.history.go(-1)
+        $('.result_name').empty()
+        $('.checkbox').prop('checked', false).removeAttr('disabled');
+        $('.city').removeClass('active');
+        $('.tab_content').slideUp();
+        $('.optional').remove()
+        init();
+    })
+    // 确定修改事件
+    $('#enter').click(function () {
+        $('#enter').attr("disabled", "disabled");
+        $DoPost("/subscribepay/editSub/submit", {
+            "type": "area",
+            "value": JSON.stringify(obj)
+        }, function (r) {
+            if (r.success) {
+                window.location.replace('/front/vipsubscribe/submitEditSubFinish');
+            }
+            $('#enter').removeAttr("disabled");
+        }, false);
+    })
+});
+
+function theSameAs(select) {
+    let tmp1 = getAreaClassArr(select);
+    let tmp2 = getAreaClassArr(areaData.data.area);
+    return (JSON.stringify(tmp1[0].sort()) === JSON.stringify(tmp2[0].sort())) && (JSON.stringify(tmp1[1].sort()) === JSON.stringify(tmp2[1].sort()));
+}

src/web/templates/weixin/vipsubscribe/edit_subscribe_province.html → src/web/templates/weixin/vipsubscribe/edit_city_new.html

@@ -13,39 +13,44 @@
     <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"}}">
+    <!-- <link rel="stylesheet" href="/vipsubscribe/css/public.css"> -->
+    <link rel="stylesheet" href="/vipsubscribe/css/choose_area_new.css?v={{Msg "seo" "version"}}">
     <style>
+        html,body{
+            height: 100%;
+        }
         .checkbox[disabled] {
-            background: none no-repeat center center #eee !important;
+            background: none no-repeat center center #E0E0E0 !important;
         }
     </style>
 </head>
 
 <body>
 <div id="choose_area">
+    <p class="all_area" style="display: none;"> 可选择全部区域</p>
     <p class="optional_count"> 可选择省数量：<em class="count"></em> / <span class="total"></span></p>
-    <div class="result" style="top: .88rem">
+    <div class="result">
         <!-- 首次购买 显示"已选择" -----  升级订阅显示"已新增" -->
 
-        <p>已选择：<span class="result_name">安徽、河南</span></p>
+        <p>已选择：<span class="result_name"></span></p>
     </div>
     <div class="form">
-        <div class="select-area-box">
+        <div class="select-area-box" style="padding-bottom: 0;">
             <ul class="area-list">
-                <!--<li>
-                    <div class="tab whole" style="display:none">
+                <li>
+                    <div class="tab whole">
                         <div class="province">
                             <input type="checkbox" class="checkbox other">全国
                         </div>
                     </div>
-                </li>-->
+                </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>
@@ -81,6 +86,7 @@
                         <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>
@@ -90,6 +96,7 @@
                         <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>
@@ -98,6 +105,7 @@
                         <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>
@@ -106,6 +114,7 @@
                         <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>
@@ -114,6 +123,7 @@
                         <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>
@@ -123,6 +133,7 @@
                         <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>
@@ -131,6 +142,7 @@
                         <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>
@@ -139,6 +151,7 @@
                         <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>
@@ -147,6 +160,7 @@
                         <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>
@@ -155,6 +169,7 @@
                         <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>
@@ -163,6 +178,7 @@
                         <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>
@@ -172,6 +188,7 @@
                         <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>
@@ -180,6 +197,7 @@
                         <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>
@@ -188,6 +206,7 @@
                         <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>
@@ -197,6 +216,7 @@
                         <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>
@@ -206,6 +226,7 @@
                         <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>
@@ -214,6 +235,7 @@
                         <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>
@@ -223,6 +245,7 @@
                         <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>
@@ -232,6 +255,7 @@
                         <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>
@@ -240,6 +264,7 @@
                         <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>
@@ -256,6 +281,7 @@
                         <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>
@@ -264,6 +290,7 @@
                         <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>
@@ -290,6 +317,7 @@
                         <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>
@@ -298,6 +326,7 @@
                         <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>
@@ -315,6 +344,7 @@
                         <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>
@@ -324,6 +354,7 @@
                         <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>
@@ -332,8 +363,8 @@
     </div>
     <div class="tips_btn">
         <div class="btns">
-            <button class="reset-btn" id="cancel">取消</button>
-            <button disabled class="save-btn" id="enter">确认修改</button>
+            <button class="reset-btn" id="cancel">重置</button>
+            <button class="save-btn" id="enter">确认修改</button>
         </div>
     </div>
     <div class="slide">
@@ -356,168 +387,11 @@
     </div>
 </div>
 <script src="/vipsubscribe/js/jquery-2.1.4.js?v={{Msg "seo" "version"}}"></script>
-<script src="/vipsubscribe/js/common.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>
-    //加载数据
-    var EditProvince = {
-        reqData: {},
-        selectlast: [],//上次修改的省份
-        selectedArr: [],//当前选择的省份
-        init: function () {
-            this.getData();
-            this.showData();//初始化页面展示
-            this.initClick();//初始化点击事件
-        },
-        getData: function () {
-            //加载数据
-            $DoPost("/subscribepay/editSub/getSubBuyMsg", {}, function (r) {
-                if (r.success) {
-                    EditProvince.reqData = r.data;
-                }
-            }, false);
-            console.log(EditProvince.reqData);
-        },
-        showData: function () {
-
-            $(".total").text(this.reqData.buyerclasscount);
-            var num = getAreaClassArr(EditProvince.reqData.area);//已选择多少省份
-            $(".select-area-box ul li:not('.index')").each(function () {
-                var text = $(this).find(".province").text().trim();
-                num[0].forEach(v => {
-                    if (v == text) {
-                        $(this).children().children('.province').children('input').prop('checked', true);
-                    }
-                });
-                //不能选中单独购买的城市的省份
-                Object.keys(EditProvince.reqData.buyset.citys).forEach(v => {
-                    if (v == text) {
-                        if (($(this).prev().hasClass("index") && $(this).next().hasClass("index")) || !$(this).next().html()) {
-                            var zimu = $(this).prev().text().trim();
-                            $('.slide a').each(function () {
-                                if (zimu == $(this).text().trim()) {
-                                    $(this).remove();
-                                }
-                            });
-                            $(this).prev().remove();
-                        }
-                        $(this).remove();
-                    }
-                })
-            });
-            EditProvince.selectlast = num[0];
-            $(".count").text(num[0].length);
-            $(".total").text(EditProvince.reqData.buyset.areacount);
-        },
-        initClick: function () {
-            // 锚点跳转
-            $("body").on('click', '.slide a', function () {
-                var s = $(this).html();
-                if (s == '#') {
-                    return;
-                }
-                document.querySelector('#' + s).scrollIntoView({block: 'center'});
-            });
-
-            $('.province .checkbox').on('change', function () {
-                EditProvince.getResult(true);
-            });
-
-            // 取消按钮事件 返回上一页
-            $('#cancel').click(function () {
-                window.history.go(-1)
-            });
-            // 确定修改事件
-            $('#enter').click(function () {
-                $("#enter").attr("disabled", "disabled");
-                //删除所选省份
-                for (var i in EditProvince.reqData.area) {
-                    let citys = EditProvince.reqData.area[i];
-                    if (citys.length == 0) {
-                        if (i == "全国") {
-                            continue
-                        }
-                        delete EditProvince.reqData.area[i];
-                    }
-                }
-                //添加所选省份
-                for (var i in EditProvince.selectedArr) {
-                    EditProvince.reqData.area[EditProvince.selectedArr[i]] = [];
-                }
-
-                $DoPost("/subscribepay/editSub/submit", {
-                    "type": "area",
-                    "value": JSON.stringify(EditProvince.reqData.area)
-                }, function (r) {
-                    if (r.success) {
-                        window.location.replace('/front/vipsubscribe/submitEditSubFinish');
-                    }
-                }, false);
-                $("#enter").removeAttr("disabled");
-            });
-            this.getResult();
-        },
-        getResult: function (showTip) {
-            EditProvince.selectedArr = []; //选中的省份数组
-            $('.result_name').empty();
-            $(".province").find(".checkbox:checked").each(function () {
-                EditProvince.selectedArr.push($(this).parent().text().trim());
-            });
-
-            if (EditProvince.selectedArr.length == $(".province .checkbox").length - 1) {//选中了全部省份
-                $('.checkbox.other').trigger('click');
-                return
-            }
-
-            if (EditProvince.selectedArr[0] == "全国") {
-                $(".count").text("all");
-            } else {
-                $(".count").text(EditProvince.selectedArr.length);
-            }
-
-            //是否还能继续选择
-            if (EditProvince.selectedArr.length >= EditProvince.reqData.buyset.areacount) {
-                if (showTip) {
-                    this.showTip(`<span style="white-space: nowrap;">您只购买了${EditProvince.reqData.buyset.areacount}个省份，如需更多请升级<span></p>`);
-                }
-                $(".province .checkbox:not(:checked)").attr('disabled', 'disabled');
-            } else {
-                $(".province .checkbox:not(:checked)").removeAttr('disabled');
-            }
-
-            // 渲染选择结果
-            console.log(EditProvince.selectedArr);
-            var html = '';
-            for (var i = 0; i < EditProvince.selectedArr.length; i++) {
-                if (i != EditProvince.selectedArr.length - 1) {
-                    html += '<span>' + EditProvince.selectedArr[i] + '、' + '</span>'
-                } else {
-                    html += '<span>' + EditProvince.selectedArr[i] + '</span>'
-                }
-            }
-            $('.result_name').append(html);
-            $('.form').css("margin-top", $(".optional_count").height() + $(".result").height() + 20);
-            //是否提交
-            if (EditProvince.noChange(EditProvince.selectlast, EditProvince.selectedArr) || EditProvince.selectedArr.length == 0) {
-                $('#enter').attr('disabled', 'disabled')
-            } else {
-                $('#enter').removeAttr('disabled')
-            }
-        },
-        noChange: function (arr1, arr2) {
-            return JSON.stringify(arr1.sort()) === JSON.stringify(arr2.sort());
-        },
-        showTip: function (msg) {
-            weui.toast(msg, {
-                duration: 2000,
-                className: 'custom-toast',
-            });
-        }
-    };
-    $(function () {
-        EditProvince.init();
-    })
-</script>
+<script src="/vipsubscribe/js/mapJSON.js?v={{Msg "seo" "version"}}"></script>
+<script src="/vipsubscribe/js/common.js?v={{Msg "seo" "version"}}"></script>
+<script src="/vipsubscribe/js/editArea.js?v={{Msg "seo" "version"}}"></script>
 </body>
 
 </html>

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

@@ -18,36 +18,22 @@
 <div class="vip_subscribe_edit">
     <div class="edit_content">
         <!-- 购买的全国则不显示可修改区域 -->
-        <div class="title">可修改区域</div>
-        <a data_href="/front/vipsubscribe/toEditSubAllArea" class="edit_item allArea" style="display:none">
+        <div class="title"></div>
+        <a data_href="/front/vipsubscribe/toEditSubAreaPage" class="edit_item area">
             <div class="item_top">
-                <span>全国</span>
+                <span>区域</span>
+                <div class="item_bottom"></div>
                 <i class="iconfont icon-arrow"></i>
             </div>
-            <div class="item_bottom"></div>
-        </a>
-        <a data_href="/front/vipsubscribe/toEditSubProvPage" class="edit_item province" style="display:none">
-            <div class="item_top">
-                <span></span>
-                <i class="iconfont icon-arrow"></i>
-            </div>
-            <div class="item_bottom"></div>
-        </a>
-        <a data_href="/front/vipsubscribe/toEditSubCityPage" class="edit_item city" style="display:none">
-            <div class="item_top">
-                <span></span>
-                <i class="iconfont icon-arrow"></i>
-            </div>
-            <div class="item_bottom"></div>
         </a>
         <!-- 购买的全行业则不显示可修改行业 -->
-        <div class="title">可修改行业</div>
+        <div class="title"></div>
         <a data_href="/front/vipsubscribe/toEditSubInduPage" class="edit_item industry">
             <div class="item_top">
-                <span></span>
+                <span>行业</span>
+                <div class="item_bottom"></div>
                 <i class="iconfont icon-arrow"></i>
             </div>
-            <div class="item_bottom"></div>
         </a>
     </div>
     <!--
@@ -80,40 +66,37 @@
             }, false)
         },
         showData: function () {
-            //展示已选择省份 和 城市
-            var area = this.reqData.area;
-            var num = getAreaClassArr(area);
-
             //判断是否可编辑
-            if (this.reqData.buyset.areacount == -1) { //显示编辑全国
-                $(".allArea").css("display", "");
-                var tmpArr = num[0].concat(num[1]);
-                $(".edit_item.allArea .item_bottom").text(tmpArr.join("、"));
+            if (this.reqData.buyset.areacount === -1) { //显示编辑全国
+                $(".edit_item.area .item_bottom").text("已购买全国");
             } else {
-                if (this.reqData.buyset.areacount > 0) { //显示编辑省
-                    $(".province").css("display", "");
-                    $(".edit_item.province span").text(this.reqData.buyset.areacount + "个省");
-                    $(".edit_item.province .item_bottom").text(num[0].join("、"));
-                }
+                //展示已选择省份 和 城市
+                let cityCount = 0;
                 if (!$.isEmptyObject(this.reqData.buyset.citys)) { //显示编辑市
-                    var cityCount = 0
                     for (var i in this.reqData.buyset.citys) {
                         cityCount += this.reqData.buyset.citys[i]
                     }
                     $(".city").css("display", "");
                     $(".edit_item.city span").text(cityCount + "个市");
-                    $(".edit_item.city .item_bottom").text(num[1].join("、"));
                 }
+                let descText = "";
+                if (this.reqData.buyset.areacount > 0) {
+                    descText = "已购买" + this.reqData.buyset.areacount + "个省级区域"
+                }
+                if (cityCount > 0) {
+                    if (this.reqData.buyset.areacount > 0) {
+                        descText += "、"
+                    }
+                    descText += cityCount + "个地级市"
+                }
+                $(".edit_item.area .item_bottom").text(descText);
             }
 
             //行业展示                 
-            if (this.reqData.buyset.buyerclasscount == -1) {
-                $(".edit_item.industry span").text("全部行业");
+            if (this.reqData.buyset.buyerclasscount === -1) {
+                $(".edit_item.industry .item_bottom").text("已购买全国");
             } else {
-                $(".edit_item.industry span").text(this.reqData.buyset.buyerclasscount + "个行业");
-            }
-            if (this.reqData.industry.length > 0) {
-                $(".edit_item.industry .item_bottom").text(SortArr(this.reqData.industry).join("、"));
+                $(".edit_item.industry .item_bottom").text("已购买" + this.reqData.buyset.buyerclasscount + "个行业");
             }
 
         },

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

@@ -1,712 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-    <meta charset="utf-8">
-    <title>区域修改</title>
-    <meta name="viewport"
-        content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black">
-    <script src="/vipsubscribe/js/rem.js?v={{Msg "seo" "version"}}"></script>
-    <link rel="stylesheet" href="/vipsubscribe/css/weui.min.css?v={{Msg "seo" "version"}}">
-    <link rel="stylesheet" type="text/css" href="/vipsubscribe/css/base.css?v={{Msg "seo" "version"}}" />
-    <link rel="stylesheet" type="text/css" href="/vipsubscribe/iconfont/iconfont.css?v={{Msg "seo" "version"}}" />
-    <!-- <link rel="stylesheet" href="/vipsubscribe/css/public.css?v={{Msg "seo" "version"}}"> -->
-    <link rel="stylesheet" href="/vipsubscribe/css/choose_area.css?v={{Msg "seo" "version"}}">
-    <style>
-        .checkbox[disabled]{background: none no-repeat center center #eee!important;}
-        .city[disabled]{background: #F4F4F9;color: #1D1D1D;}
-    </style>
-</head>
-
-<body>
-    <div id="choose_area">
-        <!--<p class="optional_count"> 可选择市数量：<em class="count"></em> / <span class="total">11</span></p>-->
-        <div class="result">
-            <p 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="btns">
-                <button class="reset-btn" id="cancel">取消</button>
-                <button disabled class="save-btn" id="enter">确认修改</button>
-            </div>
-        </div>
-        <div class="slide">
-            <a href="javascript:;">#</a>
-            <a href="javascript:;">A</a>
-            <a href="javascript:;">B</a>
-            <a href="javascript:;">C</a>
-            <a href="javascript:;">F</a>
-            <a href="javascript:;">G</a>
-            <a href="javascript:;">H</a>
-            <a href="javascript:;">J</a>
-            <a href="javascript:;">L</a>
-            <a href="javascript:;">N</a>
-            <a href="javascript:;">Q</a>
-            <a href="javascript:;">S</a>
-            <a href="javascript:;">T</a>
-            <a href="javascript:;">X</a>
-            <a href="javascript:;">Y</a>
-            <a href="javascript:;">Z</a>
-        </div>
-    </div>
-    <script src="/vipsubscribe/js/jquery-2.1.4.js?v={{Msg "seo" "version"}}"></script>
-    <script src="/vipsubscribe/js/weui.min.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 EditArea={
-          reqData:{},
-          lastSelectObj:{},
-          init:function(){
-            this.getData();
-            this.showData();//初始化页面展示
-            this.initClick();//初始化点击事件
-          },
-          getData:function(){
-            //加载数据
-            $DoPost("/subscribepay/editSub/getSubBuyMsg",{},function(r){
-              if(r.success){
-                EditArea.reqData=r.data;
-              }
-            },false)
-            if($.isEmptyObject(EditArea.reqData.area)&&this.reqData.buyset.areacount==-1){
-              EditArea.reqData.area={"全国":[]};
-            }
-            console.log(EditArea.reqData);
-          },
-          showData:function(){
-            this.lastSelectObj = this.reqData.area;
-           
-            // 渲染城市
-            $(".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 = EditArea.createMoreCity(data.city);
-                box.html(html)
-            })
-            
-            if(this.reqData.area["全国"]){
-              $('.result_name').html('全国');
-              $(".checkbox.other").prop('checked', true);
-            }else{
-              var num= getAreaClassArr(this.reqData.area);//已选择多少省份
-              // 初次渲染城市选择结果
-              $('.result_name').html(num[0].concat(num[1]).join('、'));              
-              // 将上一页带来的城市 选中
-              $('.city').each(function () {  
-                let text = $(this).text().trim();
-                num[1].forEach(v =>{
-                    if(v == text){
-                        $(this).addClass('active').parent().siblings('.tab').find('input').prop('checked',true);
-                    }
-                })
-              })
-              $('.province').each(function(){
-                let text = $(this).text().trim();
-                num[0].forEach(v =>{
-                  if(v == text){
-                    $(this).find('input').prop('checked',true).parents("li").find('.city').addClass('active');
-                  }
-                })
-              })    
-            }
-            this.getResult();
-          },
-          initClick:function(){
-            $('.detail').click(function () {  
-                $('.result_text').removeClass('line_two')
-                $(".result").css("padding-bottom","0.3rem")
-                $(this).hide();
-                $('.packup').show()
-                $(".select-area-box .area-list").css("margin-top",$('.result_text').height()+25);
-            })
-            $('.packup').click(function () { 
-                $(".result").css("padding-bottom","0.2rem")
-                $('.result_text').addClass('line_two')
-                $(this).hide();
-                $('.detail').show()
-                $(".select-area-box .area-list").css("margin-top",$('.result_text').height()+25);
-            })
-            // 锚点跳转
-            $("body").on('click', '.slide a', function () {
-                var s = $(this).html()
-                if (s == '#') {
-                    return;
-                }
-                document.querySelector('#' + s).scrollIntoView({
-                    block: 'center'
-                });
-            })
-            // 阻止input checkbox选中取消 触发父元素下拉事件
-            $('.checkbox').click(function (e) {  
-                e.stopPropagation();
-            })
-            //省份点击事件
-            $('.tab .checkbox').on('click',function () {
-                if($(this).hasClass("other")){//点击全国
-                  $(".province input").prop('checked', false);
-                  $(".city").removeClass('active');
-                  $(this).prop('checked', true);
-                } else{
-                  $(".checkbox.other").prop('checked', false);
-                  if($(this).is(':checked') == false){
-                    $(this).parent().parent().siblings('.tab_content').children('.city').removeClass('active');
-                    if($(".province .checkbox:checked").length==0){//若没有省份被选中 则选中全国
-                      $(".checkbox.other").prop('checked', true);
-                    } 
-                  }else{                   
-                    $(this).parent().parent().siblings('.tab_content').children('.city').addClass('active');                    
-                  }
-                } 
-                EditArea.getResult()
-            })
-            // 省下拉市
-            $(".select-area-box .tab:not(.municipality)").on('click', function (event) {
-                if ($(this).next('.tab_content:not(:animated)').css("display") == "block") {
-                    $(this).children().children('i').css({
-                        "display": "inline-block",
-                        "transform": "rotate(0)"
-                    })
-                } else {
-                    $(this).children().children('i').css({
-                        "display": "inline-block",
-                        "transform": "rotate(-180deg)"
-                    })
-                }
-                $(this).toggleClass('selected').next('.tab_content:not(:animated)').slideToggle(500)
-                $(this).parent().siblings().children('.tab').removeClass('selected');                 
-            })
-            //城市点击事件
-            $('.tab_content').on('click', '.city', function () {
-                $(".checkbox.other").prop('checked', 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)
-                    EditArea.getResult()
-                } else {
-                    $(this).parent('div').siblings('.tab').children().children('.checkbox').prop(
-                        'checked', false)
-                    if($(".province .checkbox:checked").length==0){//若没有省份被选中 则选中全国
-                      $(".checkbox.other").prop('checked', true);
-                    }    
-                    EditArea.getResult()
-                }
-            })
-            // 取消按钮事件 返回上一页
-            $('#cancel').click(function(){
-                window.history.go(-1)
-            })
-            // 确定修改事件
-            $('#enter').click(function(){
-              $("#enter").attr("disabled","disabled");
-              //提交修改
-              if(EditArea.reqData.area["全国"]){
-                EditArea.reqData.area={}
-              }
-              console.log("final select ",EditArea.reqData.area)
-              $DoPost("/subscribepay/editSub/submit",{"type":"area","value":JSON.stringify(EditArea.reqData.area)},function(r){
-                if(r.success){
-                  window.location.replace('/front/vipsubscribe/submitEditSubFinish');
-                }
-              },false)
-              $("#enter").removeAttr("disabled");  
-            })
-          },
-          createMoreCity:function(arr){
-            var tempHtml = arr.map(function (v) {
-              return '<button class="city">' + v.name + '</button>'
-            }).join('')
-            return tempHtml
-          },
-          showTip:function(msg){
-            weui.toast(msg,{
-              duration: 2000,
-              className: 'custom-toast',
-            });
-          },
-          noChange:function(arr1,arr2){//选择是否改变
-            return JSON.stringify(arr1.sort()) === JSON.stringify(arr2.sort());
-          },
-          getResult:function(){
-            this.reqData.area={};
-            if($('.city.active').length == $('.city').length){//若每个城市都选中 则显示全国
-              $('.province input').prop('checked', false);
-              $('.city').removeClass('active');
-              $('.other').prop('checked', true);
-            }
-            
-            $('.result_name').empty();
-            var data = []; //定义一个总数组
-            var cityArr =[]; //定义一个选中城市数组
-
-            if ($('.other').is(':checked')) {
-              data =[{name:"全国",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()
-                    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) {
-                        $('.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.reqData.area[result[i].name]=childrenArr;//
-                }else{
-                    if(i !=result.length -1){
-                        html += `${result[i].name}、`
-                    }else{
-                        html += `${result[i].name}`
-                    }
-                    this.reqData.area[result[i].name]=[];//
-                }
-            }
-            $('.result_name').append(html);
-            $(".select-area-box .area-list").css("margin-top",$('.result').height()+25);
-            this.isOpen();
-            if(this.noChange(this.lastSelectObj,this.reqData.area)){
-              $("#enter").attr("disabled","disabled");  
-            }else{
-              $("#enter").removeAttr("disabled");  
-            }
-            console.log(this.reqData.area)
-          },
-          noChange:function(obj1,oj2){
-            var tmp1 = getAreaClassArr(obj1);
-            var tmp2 = getAreaClassArr(oj2);
-            return (JSON.stringify(tmp1[0].sort()) === JSON.stringify(tmp2[0].sort()))&&(JSON.stringify(tmp1[1].sort()) === JSON.stringify(tmp2[1].sort()));
-          },
-          isOpen:function(){
-            let pHeight = $('.result_text').height()
-            let minHeight = $('.result_text').css('min-height')
-            let rows = Math.round(Math.round(pHeight)/ parseFloat(minHeight));
-            $(".select-area-box .area-list").css("margin-top",$('.result_text').height()+25);
-            console.log("高度："+ pHeight,"最小高度"+ minHeight,"行数：" + rows)
-            if(rows == 1){
-                $('.packup').hide()
-                $('.detail').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()
-            }
-          }
-        }
-        $(function(){
-          EditArea.init();
-        })
-   
-    </script>
-</body>
-
-</html>

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

@@ -1,686 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-    <meta charset="utf-8">
-    <title>区域修改</title>
-    <meta name="viewport"
-          content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black">
-    <script src="/vipsubscribe/js/rem.js?v={{Msg "seo" "version"}}"></script>
-    <link rel="stylesheet" href="/vipsubscribe/css/weui.min.css?v={{Msg "seo" "version"}}">
-    <link rel="stylesheet" type="text/css" href="/vipsubscribe/css/base.css?v={{Msg "seo" "version"}}"/>
-    <link rel="stylesheet" type="text/css" href="/vipsubscribe/iconfont/iconfont.css?v={{Msg "seo" "version"}}"/>
-    <!-- <link rel="stylesheet" href="/vipsubscribe/css/public.css?v={{Msg "seo" "version"}}"> -->
-    <link rel="stylesheet" href="/vipsubscribe/css/choose_area.css?v={{Msg "seo" "version"}}">
-    <style>
-        .checkbox[disabled] {
-            background: none no-repeat center center #eee !important;
-        }
-
-        .city[disabled] {
-            background: #F4F4F9;
-            color: #1D1D1D;
-        }
-    </style>
-</head>
-
-<body>
-<div id="choose_area">
-    <p class="optional_count" style="position: fixed;width: 100%;top: 0px;"> 可选择市数量：<em class="count"></em> / <span
-                class="total">11</span></p>
-    <div class="result" style="top:0.88rem">
-        <!-- 首次购买 显示"已选择" -----  升级订阅显示"已新增" -->
-        <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="btns">
-            <button class="reset-btn" id="cancel">取消</button>
-            <button disabled class="save-btn" id="enter">确认修改</button>
-        </div>
-    </div>
-    <div class="slide">
-        <a href="javascript:;">#</a>
-        <a href="javascript:;">A</a>
-        <!--<a href="javascript:;">B</a>
-        <a href="javascript:;">C</a>-->
-        <a href="javascript:;">F</a>
-        <a href="javascript:;">G</a>
-        <a href="javascript:;">H</a>
-        <a href="javascript:;">J</a>
-        <a href="javascript:;">L</a>
-        <a href="javascript:;">N</a>
-        <a href="javascript:;">Q</a>
-        <a href="javascript:;">S</a>
-        <!--<a href="javascript:;">T</a>-->
-        <a href="javascript:;">X</a>
-        <a href="javascript:;">Y</a>
-        <a href="javascript:;">Z</a>
-    </div>
-</div>
-<script src="/vipsubscribe/js/jquery-2.1.4.js?v={{Msg "seo" "version"}}"></script>
-<script src="/vipsubscribe/js/weui.min.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 EditCity = {
-        reqData: {},
-        selectObj: {},//上次修改的地区
-        init: function () {
-            this.getData();
-            this.showData();//初始化页面展示
-            this.initClick();//初始化点击事件
-        },
-        getData: function () {
-            //加载数据
-            $DoPost("/subscribepay/editSub/getSubBuyMsg", {}, function (r) {
-                if (r.success) {
-                    EditCity.reqData = r.data;
-                }
-            }, false);
-            console.log(EditCity.reqData);
-        },
-        showData: function () {
-            var num = getAreaClassArr(this.reqData.area);//已选择多少省市
-            var cityCount = 0;
-            for (var i in this.reqData.buyset.citys) {
-                cityCount += this.reqData.buyset.citys[i];
-            }
-            // 渲染可选择城市总数
-            $('.total').html(cityCount);
-            $('.count').html(num[1].length);
-            // 初次渲染城市选择结果
-            $('.result_name').html(num[1].join('、'));
-            // 渲染城市
-            $(".select-area-box ul li:not('.index')").each(function () {
-                var text = $(this).find(".province").text().trim();
-                //只显示购买城市的省份
-                if (EditCity.reqData.buyset.citys[text]) {
-                    var data = null;
-                    chinaMapJSON.some(function (v) {
-                        data = v;
-                        return v.name.indexOf(text) !== -1
-                    });
-                    var box = $(this).find('div.tab_content');
-                    var html = EditCity.createMoreCity(data.city);
-                    box.attr("count", EditCity.reqData.buyset.citys[text]).html(html);
-                    box.prev().find(".checkbox").attr("disabled", "disabled");
-                }
-            });
-
-            //删除其他城市
-            $(".tab_content").each(function () {
-                if (!$(this).attr("count")) {
-                    if (($(this).parents("li").prev().hasClass("index") && $(this).parents("li").next().hasClass("index")) || !$(this).parents("li").next().html()) {
-                        var zimu = $(this).parents("li").prev().text().trim();
-                        $('.slide a').each(function () {
-                            if (zimu == $(this).text().trim()) {
-                                $(this).remove();
-                            }
-                        });
-                        $(this).parents("li").prev().remove();
-                    }
-                    $(this).parents("li").remove();
-                }
-            });
-
-            //选中已选择城市
-            $('.city').each(function () {
-                let text = $(this).text().trim();
-                num[1].forEach(v => {
-                    if (v == text) {
-                        $(this).addClass('active');
-                    }
-                });
-                EditCity.checkFull($(this))
-            });
-            this.getSelectAreaObj();
-        },
-        checkFull: function (obj, showtip) {//该省份下 是否选择满
-            let count = obj.parent().attr("count");
-            let selected = obj.parent().find(".city.active").length;
-            if (selected >= count) {
-                obj.parent().find(".city:not(.active)").attr("disabled", "disabled");
-                if (showtip) {
-                    this.showTip(`<span style="white-space: nowrap;">您只购买了${count}个城市，如需更多请升级<span></p>`)
-                }
-            } else {
-                obj.parent().find(".city:not(.active)").removeAttr("disabled", "disabled");
-            }
-        },
-        initClick: function () {
-            $('.detail').click(function () {
-                $('.result_text').removeClass('line_two');
-                $(".result").css("padding-bottom", "0.3rem");
-                $(this).hide();
-                $('.packup').show();
-                $('.select-area-box').css("margin-top", $(".optional_count").height() + $('.result_text').height() + 25);
-            });
-            $('.packup').click(function () {
-                $(".result").css("padding-bottom", "0.2rem");
-                $('.result_text').addClass('line_two');
-                $(this).hide();
-                $('.detail').show();
-                $('.select-area-box').css("margin-top", $(".optional_count").height() + $('.result_text').height() + 25);
-            });
-            // 锚点跳转
-            $("body").on('click', '.slide a', function () {
-                var s = $(this).html();
-                if (s == '#') {
-                    return;
-                }
-                document.querySelector('#' + s).scrollIntoView({
-                    block: 'center'
-                });
-            });
-            // 阻止input checkbox选中取消 触发父元素下拉事件
-            $('.checkbox').click(function (e) {
-                e.stopPropagation();
-            });
-            // 省下拉市
-            $(".select-area-box .tab:not(.municipality)").on('click', function (event) {
-                if ($(this).next('.tab_content:not(:animated)').css("display") == "block") {
-                    $(this).children().children('i').css({
-                        "display": "inline-block",
-                        "transform": "rotate(0)"
-                    })
-                } else {
-                    $(this).children().children('i').css({
-                        "display": "inline-block",
-                        "transform": "rotate(-180deg)"
-                    })
-                }
-                $(this).toggleClass('selected').next('.tab_content:not(:animated)').slideToggle(500);
-                $(this).parent().siblings().children('.tab').removeClass('selected');
-            });
-            //点击城市            
-            $('.tab_content').on('click', '.city', function () {
-                $(this).toggleClass('active');
-                EditCity.checkFull($(this), true);
-                EditCity.getSelectAreaObj()
-            });
-            // 取消按钮事件 返回上一页
-            $('#cancel').click(function () {
-                window.history.go(-1)
-            });
-            // 确定修改事件
-            $('#enter').click(function () {
-                $("#enter").attr("disabled", "disabled");
-                //更新 reqData.areaSelect
-                for (var i in EditCity.selectObj) {
-                    EditCity.reqData.area[i] = EditCity.selectObj[i];
-                }
-                //提交修改
-                console.log("final select ", EditCity.reqData.area);
-                $DoPost("/subscribepay/editSub/submit", {
-                    "type": "area",
-                    "value": JSON.stringify(EditCity.reqData.area)
-                }, function (r) {
-                    if (r.success) {
-                        window.location.replace('/front/vipsubscribe/submitEditSubFinish');
-                    }
-                }, false);
-                $("#enter").removeAttr("disabled");
-            })
-        },
-        createMoreCity: function (arr) {
-            var tempHtml = arr.map(function (v) {
-                // v.name.replace(/市$/g, '')
-                return '<button class="city">' + v.name + '</button>'
-            }).join('');
-            return tempHtml
-        },
-        showTip: function (msg) {
-            weui.toast(msg, {
-                duration: 2000,
-                className: 'custom-toast',
-            });
-        },
-        getSelectAreaObj: function () {
-            $('.result_name').empty();
-            var selectObj = {};
-            var data = []; //定义一个总数组
-            var cityArr = []; //定义一个选中城市数组
-            $(".tab_content").find(".city.active:not('[disabled]')").each(function () {
-                var length = $(this).parent('.tab_content').find('.city').length; //省份下城市的length
-                let arr = [];
-                // 判断省份下的城市是否等于选中的城市长度,相等就是全部选中
-                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 = '';
-            var cityCount = 0;
-            for (var i = 0; i < result.length; i++) {
-                let children = result[i].children;
-                let childrenArr = [];
-                for (var j = 0; j < children.length; j++) {
-                    childrenArr.push(children[j].name)
-                }
-                selectObj[result[i].name] = childrenArr;//
-                html += result[i].name + "(" + childrenArr.join(",") + ") ";
-                cityCount += childrenArr.length;
-            }
-            this.selectObj = selectObj;
-            $('.count').text(cityCount);
-            $('.result_name').append(html);
-            $('.select-area-box').css("margin-top", $(".optional_count").height() + $(".result").height() + 25);
-            this.isOpen();
-            if (this.noChange(this.selectObj, EditCity.reqData.area) || !this.compareArr(Object.keys(this.selectObj), Object.keys(this.reqData.buyset.citys))) {
-                $("#enter").attr("disabled", "disabled")
-            } else {
-                $("#enter").removeAttr("disabled");
-            }
-        },
-        noChange: function (obj1, obj2) {//选择是否改变
-            for (var i in obj1) {
-                if (!obj1[i] || !obj2[i]) return false;
-                if (this.compareArr(obj1[i], obj2[i])) {
-                    continue
-                } else {
-                    return false
-                }
-            }
-            return true
-        },
-        compareArr: function (arr1, arr2) {
-            return JSON.stringify(arr1.sort()) === JSON.stringify(arr2.sort());
-        },
-        isOpen: function () {
-            let pHeight = $('.result_text').height();
-            let minHeight = $('.result_text').css('min-height');
-            let rows = Math.round(Math.round(pHeight) / parseFloat(minHeight));
-            $('.select-area-box').css("margin-top", $(".optional_count").height() + $('.result_text').height() + 25);
-            if (rows == 1) {
-                $('.packup').hide();
-                $('.detail').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();
-            }
-        },
-        showTip: function (msg) {
-            weui.toast(msg, {
-                duration: 2000,
-                className: 'custom-toast',
-            });
-        }
-    };
-    $(function () {
-        EditCity.init();
-    })
-</script>
-</body>
-
-</html>

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

@@ -126,8 +126,7 @@
                         </table>
                         <dl class="tips">
                             <dt>购买须知：</dt>
-                            <dd>套餐周期内，不支持套餐降级，续费可降级；</dd>
-                            <dd>用户最多购买/续费3年套餐；</dd>
+                            <dd>套餐周期内，不支持套餐降级，即将到期时续费可降级；</dd>
                             <dd>支持套餐升级，补差价（按月进行补差价，不足一个月按一个月计算)。</dd>
                         </dl>
                     </div>