|
|
@@ -36,7 +36,6 @@
|
|
|
font-weight: 500;
|
|
|
color: #FA483C;
|
|
|
box-sizing: border-box;
|
|
|
- display: none;
|
|
|
}
|
|
|
.selectChange {
|
|
|
font-size: 0.24rem;
|
|
|
@@ -119,191 +118,215 @@
|
|
|
<div id="set-header-template" v-cloak>
|
|
|
<div class="wrapper-header" id="thisAreaTips">
|
|
|
<div class="content">
|
|
|
- <div class="selectNumMax">可选择<span class="numColor" id="canSelect">1个省</span></div>
|
|
|
+ <div class="selectNumMax">可选择<span class="numColor" id="canSelect">${ maxSelectText }</span></div>
|
|
|
<div class="string"></div>
|
|
|
<div class="selectNumList">
|
|
|
- <span>已选择<span class="numColor" id="thisSelect">1个省</span></span>
|
|
|
- <span class="moreTips">超出可订阅省份数量，前往购买省份订阅包 ></span>
|
|
|
+ <span>已选择<span class="numColor" id="thisSelect">${ selectedAreaText }</span></span>
|
|
|
+ <span class="moreTips" v-show="moreThanSubCount">超出可订阅省份数量，前往${ buyType }省份订阅包 ></span>
|
|
|
</div>
|
|
|
<div class="selectChange"></div>
|
|
|
</div>
|
|
|
- <div class="popup-wrap" v-show="popupType">
|
|
|
+ <div class="popup-wrap" v-show="popupTip">
|
|
|
<div class="popup-content">
|
|
|
- <div class="popup-text" id="tips-text">您当前仅可订阅1个省，如需增加请购买【省份订阅包】</div>
|
|
|
+ <div class="popup-text" id="tips-text">您当前仅可订阅${ maxSelectText }，如需增加请${ buyType }【省份订阅包】</div>
|
|
|
<div class="popup-btnWrap">
|
|
|
- <div class="popup-btn" id="cancel" @click="hiddenTips">取消</div>
|
|
|
+ <div class="popup-btn" id="cancel" @click="hideTips">取消</div>
|
|
|
<div class="popup-line"></div>
|
|
|
- <div class="popup-btn levelUp" id="btn-text" @click="toPay">去购买</div>
|
|
|
+ <div class="popup-btn levelUp" id="btn-text" @click="toPay">去${ buyType }</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<script>
|
|
|
- var setAreaFn = {
|
|
|
- conf: {
|
|
|
- sKey: 'sub_free_state'
|
|
|
- },
|
|
|
- buyPageInfo: {},
|
|
|
- init: function () {
|
|
|
- // 恢复页面状态
|
|
|
- var pageInfo = sessionStorage.getItem(this.conf.sKey)
|
|
|
- if (pageInfo) {
|
|
|
- this.buyPageInfo = JSON.parse(pageInfo)
|
|
|
- var areaInfo = this.buyPageInfo.area
|
|
|
- if (this.buyPageInfo && areaInfo && Object.keys(areaInfo).length !== 0) {
|
|
|
- vNode.data.initCityMap = areaInfo
|
|
|
- vueComponent.setCitySelected(areaInfo)
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- saveToSessionStorage: function (data) {
|
|
|
- sessionStorage.setItem(this.conf.sKey, JSON.stringify(data))
|
|
|
- }
|
|
|
- }
|
|
|
- setAreaFn.init()
|
|
|
var vm = new Vue({
|
|
|
delimiters: ['${', '}'],
|
|
|
el: '#set-header',
|
|
|
template: '#set-header-template',
|
|
|
data: {
|
|
|
- popupType: false,
|
|
|
- popupText: '您当前仅可订阅1个省，如需增加请购买【省份订阅包】',
|
|
|
- popupPayBtn: '去购买'
|
|
|
+ sessKey: 'sub_free_set_area',
|
|
|
+ selectedArea: '',
|
|
|
+ userSubInfo: {
|
|
|
+ area: '',
|
|
|
+ areanum: 0, // 可修改次数
|
|
|
+ basenum: 1,
|
|
|
+ provincenum: 0, // 购买的省份数量
|
|
|
+ },
|
|
|
+ popupTip: false
|
|
|
},
|
|
|
- created: function () {},
|
|
|
- methods: {
|
|
|
- hiddenTips: function () {
|
|
|
- this.popupType = false
|
|
|
+ computed: {
|
|
|
+ moreThanSubCount: function () {
|
|
|
+ var max = this.maxSelectCount
|
|
|
+ var sel = this.selectedAreaCount
|
|
|
+ if (max === -1) return false
|
|
|
+ if (sel === -1) return true
|
|
|
+ if (sel > max) return true
|
|
|
},
|
|
|
- toPay: function () {
|
|
|
- this.popupType = false
|
|
|
- if (userType) {
|
|
|
- // /jyapp/areaPack/page/buy?type=buy&area= + encodeURIComponent(JSON.stringify())
|
|
|
- location.href = '/jyapp/areaPack/page/buy?type=renew&area=' + encodeURIComponent(JSON.stringify(thisData))
|
|
|
+ maxSelectCount: function () {
|
|
|
+ var baseNum = this.userSubInfo.basenum || 1
|
|
|
+ var provincenum = this.userSubInfo.provincenum
|
|
|
+ if (provincenum === -1) {
|
|
|
+ return provincenum
|
|
|
} else {
|
|
|
- location.href = '/jyapp/areaPack/page/buy?type=buy&area=' + encodeURIComponent(JSON.stringify(thisData))
|
|
|
+ return provincenum + baseNum
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
- }
|
|
|
- })
|
|
|
- var maxSelect = 1
|
|
|
- var thisSelectNum = 0
|
|
|
- var userType = true // 用户是否购买过省份包
|
|
|
- var vSwitch = 'f' // 用户版本,''免费版,m大会员,v超级订阅
|
|
|
- // 获取用户权限
|
|
|
- function getUserMsg() {
|
|
|
- $.ajax({
|
|
|
- url: '/bigmember/use/isAdd',
|
|
|
- type: 'POST',
|
|
|
- success: function (res) {
|
|
|
- if (res.data.memberStatus > 0 && res.data.vipStatus <= 0) {
|
|
|
- vSwitch = 'm'
|
|
|
- $('#thisAreaTips').hide()
|
|
|
- } else if (res.data.memberStatus <= 0 && res.data.vipStatus > 0) {
|
|
|
- vSwitch = 'v'
|
|
|
- $('#thisAreaTips').hide()
|
|
|
- } else if (res.data.memberStatus <= 0 && res.data.vipStatus <= 0) {
|
|
|
- vSwitch = 'f'
|
|
|
- $('#thisAreaTips').show()
|
|
|
+ maxSelectText: function () {
|
|
|
+ if (this.maxSelectCount === -1) {
|
|
|
+ return '全国'
|
|
|
+ } else {
|
|
|
+ return this.maxSelectCount + '个省'
|
|
|
}
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- getUserMsg()
|
|
|
- // 获取用户购买省份包信息
|
|
|
- function getUserSubscribe() {
|
|
|
- $.ajax({
|
|
|
- url: '/publicapply/free/subscribe',
|
|
|
- type: 'POST',
|
|
|
- success: function (res) {
|
|
|
- let freeArea = JSON.stringify(res.data)
|
|
|
- sessionStorage.setItem('sub_free_state', freeArea)
|
|
|
- setAreaFn.init()
|
|
|
- onChange(res.data.area)
|
|
|
- userType = res.data.provincenum === 0 ? false : true
|
|
|
- maxSelect = res.data.provincenum + res.data.basenum
|
|
|
- // _this.$emit('UserSubscribe',res)
|
|
|
- if (maxSelect === -1) {
|
|
|
- $('#canSelect').text(`全国`)
|
|
|
- } else if (res.data.provincenum === 0 && res.data.areanum === 1) {
|
|
|
- vueComponent.provinceListMap['#'][0].selectedState = ''
|
|
|
+ },
|
|
|
+ selectedAreaCount: function () {
|
|
|
+ var area = this.selectedArea
|
|
|
+ if (area) {
|
|
|
+ var keys = Object.keys(area)
|
|
|
+ if (keys.length === 0) {
|
|
|
+ return -1
|
|
|
+ } else {
|
|
|
+ return keys.length
|
|
|
+ }
|
|
|
} else {
|
|
|
- $('#canSelect').text(`${maxSelect}个省`)
|
|
|
+ return 0
|
|
|
}
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- getUserSubscribe()
|
|
|
- function userUpdate(obj) {
|
|
|
- let _this = this
|
|
|
- $.ajax({
|
|
|
- url: '/publicapply/subscribe/update',
|
|
|
- type: 'POST',
|
|
|
- data: {
|
|
|
- vSwitch: vSwitch,
|
|
|
- area:obj
|
|
|
},
|
|
|
- success: function (res) {
|
|
|
- console.info(res)
|
|
|
- window.history.back()
|
|
|
+ selectedAreaText: function () {
|
|
|
+ if (this.selectedAreaCount === -1) {
|
|
|
+ return '全国'
|
|
|
+ } else {
|
|
|
+ return this.selectedAreaCount + '个省'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 是否购买了省份订阅包
|
|
|
+ userType: function () {
|
|
|
+ if (this.userSubInfo.provincenum === -1) return true
|
|
|
+ return this.userSubInfo.provincenum !== 0
|
|
|
+ },
|
|
|
+ buyType: function () {
|
|
|
+ return this.userType ? '升级' : '购买'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted: function () {
|
|
|
+ var type = utils.getParam('type')
|
|
|
+ var restore = this.restoreState()
|
|
|
+
|
|
|
+ if (restore) {
|
|
|
+
|
|
|
+ } else {
|
|
|
+ if (type === 'new') {
|
|
|
+ this.setAreaAllNotSelected()
|
|
|
+ } else {
|
|
|
+ this.getUserSubscribe()
|
|
|
+ }
|
|
|
}
|
|
|
- })
|
|
|
- }
|
|
|
- $('#thisSelect').text(`${thisSelectNum}个省`)
|
|
|
- $('#canSelect').text(`${maxSelect}个省`)
|
|
|
- // 以下均为示例：具体使用时候请删除
|
|
|
- // 定义重置方法：方法名必须为onReset/onConfirm
|
|
|
- // 参数，是被初始化的数据
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ setAreaAllNotSelected: function () {
|
|
|
+ vueComponent.setCitySelected()
|
|
|
+ vueComponent.provinceListMap['#'][0].selectedState = ''
|
|
|
+ $('#set-area .j-button-confirm').prop('disabled', true)
|
|
|
+ },
|
|
|
+ // 获取用户订阅信息
|
|
|
+ getUserSubscribe: function () {
|
|
|
+ var _this = this
|
|
|
+ $.ajax({
|
|
|
+ url: '/publicapply/free/subscribe',
|
|
|
+ type: 'POST',
|
|
|
+ success: function (res) {
|
|
|
+ if (res && res.error_code === 0) {
|
|
|
+ if (res.data) {
|
|
|
+ if (res.data.area === null || res.data.area === undefined) {
|
|
|
+ _this.setAreaAllNotSelected()
|
|
|
+ } else {
|
|
|
+ Object.assign(_this.userSubInfo, res.data)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (res.error_msg) {
|
|
|
+ _this.$toast(res.error_msg)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ userUpdate: function (area) {
|
|
|
+ var _this = this
|
|
|
+ $.ajax({
|
|
|
+ url: '/publicapply/subscribe/update',
|
|
|
+ type: 'POST',
|
|
|
+ data: {
|
|
|
+ vSwitch: 'f',
|
|
|
+ area: JSON.stringify(area)
|
|
|
+ },
|
|
|
+ success: function (res) {
|
|
|
+ if (res && res.success) {
|
|
|
+ history.back()
|
|
|
+ } else {
|
|
|
+ if (res.errMsg) {
|
|
|
+ _this.$toast(res.errMsg)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ setAreaSelected: function (area) {
|
|
|
+ this.$set(this, 'selectedArea', area)
|
|
|
+ },
|
|
|
+ confirmed: function (area) {
|
|
|
+ this.setAreaSelected(area)
|
|
|
+ if (this.moreThanSubCount) {
|
|
|
+ this.popupTip = true
|
|
|
+ } else {
|
|
|
+ this.userUpdate(area)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ hideTips: function () {
|
|
|
+ this.popupTip = false
|
|
|
+ },
|
|
|
+ toPay: function () {
|
|
|
+ this.popupTip = false
|
|
|
+ var area = this.selectedArea
|
|
|
+ var urlBase = '/jyapp/areaPack/page/buy'
|
|
|
+ var areaJSON = encodeURIComponent(JSON.stringify(area))
|
|
|
+ this.savePageState()
|
|
|
+ if (this.userType) {
|
|
|
+ location.href = urlBase + '?type=upgrade&area=' + areaJSON
|
|
|
+ } else {
|
|
|
+ location.href = urlBase + '?type=buy&area=' + areaJSON
|
|
|
+ }
|
|
|
+ },
|
|
|
+ restoreState: function () {
|
|
|
+ var $data = sessionStorage.getItem(this.sessKey)
|
|
|
+ if ($data) {
|
|
|
+ $data = JSON.parse($data)
|
|
|
+
|
|
|
+ for (var key in $data) {
|
|
|
+ Object.assign(this.$data[key], $data[key])
|
|
|
+ }
|
|
|
+
|
|
|
+ sessionStorage.removeItem(this.sessKey)
|
|
|
+ }
|
|
|
+ return !!$data
|
|
|
+ },
|
|
|
+ savePageState: function () {
|
|
|
+ var data = JSON.stringify(this.$data)
|
|
|
+ sessionStorage.setItem(this.sessKey, JSON.stringify(data))
|
|
|
+ },
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
function onReset (initData) {
|
|
|
- $('.selectChange').text('')
|
|
|
- $('#thisSelect').text(`${thisSelectNum}个省`)
|
|
|
- $('.moreTips').hide()
|
|
|
+ vm.setAreaSelected(initData)
|
|
|
}
|
|
|
// 被选中的数据
|
|
|
function onConfirm (selectedData) {
|
|
|
- var selectDataList = []
|
|
|
- for (const key in selectedData) {
|
|
|
- selectDataList.push(key)
|
|
|
- }
|
|
|
- if (selectDataList.length > maxSelect && maxSelect !== -1 && vSwitch === 'f') {
|
|
|
- vm.popupType = true
|
|
|
- if (!userType) {
|
|
|
- $('#tips-text').text('您当前仅可订阅1个省，如需增加请购买【省份订阅包】')
|
|
|
- $('#btn-text').text('去购买')
|
|
|
- } else {
|
|
|
- $('#tips-text').text('已超出您可订阅的省份数量，是否升级【省份订阅包】')
|
|
|
- $('#btn-text').text('去升级')
|
|
|
- }
|
|
|
- } else {
|
|
|
- var areaData = {}
|
|
|
- selectDataList.forEach(function (item, index) {
|
|
|
- areaData[item] = []
|
|
|
- })
|
|
|
- areaData = JSON.stringify(areaData)
|
|
|
- userUpdate(areaData)
|
|
|
- sessionStorage.setItem('sub_vip_state', areaData)
|
|
|
-
|
|
|
- }
|
|
|
+ vm.confirmed(selectedData)
|
|
|
}
|
|
|
- var thisData = []
|
|
|
// 页面选中状态改变时触发
|
|
|
function onChange (selectedData) {
|
|
|
- thisData = selectedData
|
|
|
- var selectDataList = []
|
|
|
- for (const key in selectedData) {
|
|
|
- selectDataList.push(key)
|
|
|
- }
|
|
|
- var arr = selectDataList.join('、')
|
|
|
- $('.selectChange').text(`${arr}`)
|
|
|
- thisSelectNum = selectDataList.length
|
|
|
- $('#thisSelect').text(`${selectDataList.length}个省`)
|
|
|
- if (thisSelectNum > maxSelect) {
|
|
|
- $('.moreTips').show()
|
|
|
- } else {
|
|
|
- $('.moreTips').hide()
|
|
|
- }
|
|
|
+ vm.setAreaSelected(selectedData)
|
|
|
+ $('#set-area .j-button-confirm').prop('disabled', false)
|
|
|
}
|
|
|
</script>
|
|
|
</body>
|
