|
|
@@ -13,6 +13,8 @@
|
|
|
<link rel="stylesheet" href="/vipsubscribe/iconfont/iconfont.css?v={{Msg "seo" "version"}}">
|
|
|
<link rel="stylesheet" href="{{Msg "seo" "cdn"}}/css/wxbutton.css?v={{Msg "seo" "version"}}">
|
|
|
<link rel="stylesheet" href="/vipsubscribe/css/vip_purchase.css?v={{Msg "seo" "version"}}">
|
|
|
+ <link rel="stylesheet" href='{{Msg "seo" "cdn"}}/common-module/vipsubscribe/css/vip-size-template.css?v={{Msg "seo" "version"}}' />
|
|
|
+ <link rel="stylesheet" href='{{Msg "seo" "cdn"}}/common-module/vipsubscribe/css/vip-coupon-template.css?v={{Msg "seo" "version"}}' />
|
|
|
<link rel="stylesheet" href='{{Msg "seo" "cdn"}}/common-module/coupon/css/pay-order-template.css?v={{Msg "seo" "version"}}' />
|
|
|
<!--S-手机号输入样式-->
|
|
|
<style>
|
|
|
@@ -58,6 +60,20 @@
|
|
|
text-align: left;
|
|
|
margin-top: 2px;
|
|
|
}
|
|
|
+ .area-result{
|
|
|
+ /* width:1.2rem; */
|
|
|
+ height: .38rem;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: #2abed1;
|
|
|
+ border-radius: 41px;
|
|
|
+ font-size: .22rem;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .area-result-text{
|
|
|
+ padding: 0 .16rem;
|
|
|
+ }
|
|
|
</style>
|
|
|
<!--E-手机号输入样式-->
|
|
|
|
|
|
@@ -91,15 +107,23 @@
|
|
|
<div class="choose_condition">
|
|
|
<ul class="chooseList">
|
|
|
<li class="choose_item">
|
|
|
- <a href="/front/vipsubscribe/toChooseArea">
|
|
|
+ <a href="javascript:;" onclick="toChooseArea()">
|
|
|
+ <div style="display: flex;align-items: center;flex: 1;">
|
|
|
<span class="label">省份数量</span>
|
|
|
- {{if not .T.isTrial }}
|
|
|
- <input type="text" disabled value="" placeholder="1个省"
|
|
|
- class="info choose_area">
|
|
|
- {{else}}
|
|
|
- <input type="text" disabled value="" placeholder="选择全国、省份、地市" class="info choose_area">
|
|
|
- {{end}}
|
|
|
+ <div class="area-result">
|
|
|
+ {{if not .T.isTrial }}
|
|
|
+ <input type="hidden" disabled value="" placeholder="1个省" class="info choose_area">
|
|
|
+ <span class="area-result-text"></span>
|
|
|
+ {{else}}
|
|
|
+ <input type="hidden" disabled value="" placeholder="选择全国、省份、地市" class="info choose_area">
|
|
|
+ <span class="area-result-text"></span>
|
|
|
+ {{end}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;align-items: center;">
|
|
|
+ <em style="color: #9B9CA3;font-size: .28rem;">选择</em>
|
|
|
<i class="iconfont icon-arrow"></i>
|
|
|
+ </div>
|
|
|
</a>
|
|
|
<p class="add_tips area_warn" style="display: none;">请选择区域</p>
|
|
|
<!-- 无选择时不显示 -->
|
|
|
@@ -121,7 +145,7 @@
|
|
|
<p class="add_tips industry_warn" style="display: none;">请选择行业</p>
|
|
|
<p class="add_tips industry" style="display:none">已选择 0 个行业</p>
|
|
|
</li>
|
|
|
- <li class="choose_item select_cycle">
|
|
|
+ <li class="choose_item select_cycle" style="display: none;">
|
|
|
<!-- 需要选择订阅周期就用a标签，div.class="free-7day"隐藏 opacity: 1 !important; -->
|
|
|
<!-- 需要选择试用就用div标签，a标签隐藏 -->
|
|
|
{{if not .T.isTrial }}
|
|
|
@@ -141,8 +165,16 @@
|
|
|
|
|
|
</li>
|
|
|
</ul>
|
|
|
+ <!-- 商品规格 -->
|
|
|
+ <div id="goods-size-vue">
|
|
|
+ <goods-size-template ref="goodsSize" :config="props" @select-vip-size="getGoodSize"></goods-size-template>
|
|
|
+ </div>
|
|
|
+ <!-- 商品优惠券 -->
|
|
|
+ <div id="goods-coupon-vue">
|
|
|
+ <goods-coupon-template ref="goodsCoupon" @update-coupon="updateCoupon"></goods-coupon-template>
|
|
|
+ </div>
|
|
|
<!--S-手机号输入-->
|
|
|
- <div class='order-phone-group'>
|
|
|
+ <div class='order-phone-group' style="margin: .24rem;border-radius: 8px;">
|
|
|
<label for='order_phone'>手机号码</label>
|
|
|
<input id='order_phone' autocomplete='off' placeholder='请输入手机号码' maxlength='11' type='tel' />
|
|
|
<p>手机号码输入错误</p>
|
|
|
@@ -210,7 +242,7 @@
|
|
|
<td><span>3880</span>元 年/全国/全行业</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
- <dl class="tips">
|
|
|
+ <dl class="tips" style="display: none;">
|
|
|
<dt class="b-line">购买须知</dt>
|
|
|
<dd>套餐周期内，不支持套餐降级；</dd>
|
|
|
<dd>用户最多购买/续费3年套餐；</dd>
|
|
|
@@ -443,6 +475,8 @@
|
|
|
<!--<script src='{{Msg "seo" "cdn"}}/js/check-bind-phone.js?v={{Msg "seo" "version"}}'></script>-->
|
|
|
<script src="/vipsubscribe/js/price.js?v={{Msg "seo" "version"}}"></script>
|
|
|
<script src=//cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js></script>
|
|
|
+ <script src='{{Msg "seo" "cdn"}}/common-module/vipsubscribe/js/vip-size-template.js?v={{Msg "seo" "version"}}'></script>
|
|
|
+ <script src='{{Msg "seo" "cdn"}}/common-module/vipsubscribe/js/vip-coupon-template.js?v={{Msg "seo" "version"}}'></script>
|
|
|
<script src='{{Msg "seo" "cdn"}}/common-module/coupon/js/pay-order-template.js?v={{Msg "seo" "version"}}'></script>
|
|
|
{{include "/common/weixin.html"}}
|
|
|
<script>
|
|
|
@@ -602,9 +636,95 @@
|
|
|
sessionStorage.setItem("vipSubisTrial", "1");//试用界面
|
|
|
//试用用户
|
|
|
{{end}}
|
|
|
-
|
|
|
- console.log({{.T.isTrial }}, '22222')
|
|
|
+ // 跳转区域选择清除商品规格及优惠券选择
|
|
|
+ function toChooseArea() {
|
|
|
+ sessionStorage.removeItem('vip-cur-select-coupon')
|
|
|
+ sessionStorage.removeItem('vip-cur-select-size')
|
|
|
+ location.href = '/jyapp/vipsubscribe/toChooseArea'
|
|
|
+ }
|
|
|
/* vue 代码 start */
|
|
|
+ // vip商品规格
|
|
|
+ var goodsSize = new Vue({
|
|
|
+ el:'#goods-size-vue',
|
|
|
+ data: function() {
|
|
|
+ return {
|
|
|
+ props: {
|
|
|
+ defaultSize: {},
|
|
|
+ areaCount: 1,
|
|
|
+ priceInfo: {}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ this.getAreaCount()
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ this.getSizeStorage()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 父组件传省份数量至子组件
|
|
|
+ getAreaCount: function() {
|
|
|
+ var areaStorage = JSON.parse(sessionStorage.getItem('vipSubSelectArea'))
|
|
|
+ if (areaStorage) {
|
|
|
+ var count = 0
|
|
|
+ for (var key in areaStorage) {
|
|
|
+ if (key.indexOf('全国') > -1) {
|
|
|
+ count = 16
|
|
|
+ } else {
|
|
|
+ count++
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.props.areaCount = count
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getSizeStorage: function() {
|
|
|
+ // 恢复商品规格选择
|
|
|
+ var size = JSON.parse(sessionStorage.getItem('vip-cur-select-size'))
|
|
|
+ if (size) {
|
|
|
+ this.$refs.goodsSize.goodsActive = size.index
|
|
|
+ this.defaultSize = size
|
|
|
+ this.$nextTick(function(){
|
|
|
+ console.log(size.price, 'size.price')
|
|
|
+ coupon.updatePrice(size.price/100)
|
|
|
+ goodsCoupon.updatePrice(size.price/100)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getGoodSize: function(data) {
|
|
|
+ console.log(data, '父组件接收子组件传来的商品规格')
|
|
|
+ this.defaultSize = data
|
|
|
+ coupon.updatePrice(data.price/100)
|
|
|
+ goodsCoupon.updatePrice(data.price/100)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // vip优惠券
|
|
|
+ var goodsCoupon = new Vue({
|
|
|
+ el:'#goods-coupon-vue',
|
|
|
+ data: function() {
|
|
|
+ return {
|
|
|
+ curSelectCoupon: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted () {},
|
|
|
+ methods: {
|
|
|
+ updatePrice: function(data){
|
|
|
+ this.$refs.goodsCoupon.getCoupon(data)
|
|
|
+ },
|
|
|
+ updateCoupon: function(data) {
|
|
|
+ console.log(data, '更新优惠券选择')
|
|
|
+ this.curSelectCoupon = data
|
|
|
+ var curSize = JSON.parse(sessionStorage.getItem('vip-cur-select-size'))
|
|
|
+ // 更新优惠券选择同时更新订单组件的价格及优惠金额
|
|
|
+ if (curSize) {
|
|
|
+ coupon.updatePrice(curSize.price/100)
|
|
|
+ } else {
|
|
|
+ coupon.updatePrice(coupon.initPrice)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // 订单提交组件
|
|
|
var coupon = new Vue({
|
|
|
el: '#coupon-vue',
|
|
|
data: function () {
|
|
|
@@ -625,6 +745,7 @@
|
|
|
buttons: {
|
|
|
submit: this.submitOrder
|
|
|
},
|
|
|
+ hideCoupon: true //超级订阅购买隐藏订单提交组件的优惠券部分
|
|
|
}
|
|
|
},
|
|
|
mounted () {
|
|
|
@@ -634,11 +755,17 @@
|
|
|
// 更新价格相关
|
|
|
updatePrice: function (before) {
|
|
|
console.log( '原价：' + before)
|
|
|
- console.log('是否是试用',{{.T.isTrial }})
|
|
|
+ var curCoupon = JSON.parse(sessionStorage.getItem('vip-cur-select-coupon'))
|
|
|
+ console.log(curCoupon, '当前选择的优惠券')
|
|
|
+ if (curCoupon) {
|
|
|
+ this.$refs.couponRef.coupon.value = curCoupon.reduce
|
|
|
+ } else {
|
|
|
+ this.$refs.couponRef.coupon.value = 0
|
|
|
+ }
|
|
|
this.initPrice = before;
|
|
|
// 调用子组件查询最优卡券 vip试用用户不调用优惠券
|
|
|
if (!{{.T.isTrial }}) {
|
|
|
- this.$refs.couponRef.getCoupon();
|
|
|
+ // this.$refs.couponRef.getCoupon();
|
|
|
}
|
|
|
},
|
|
|
// 初始化及回显相关
|
|
|
@@ -646,7 +773,7 @@
|
|
|
var areaStorage = sessionStorage.getItem('vipSubSelectArea');
|
|
|
var industryStorage = sessionStorage.getItem('vipSubSelectIndustry');
|
|
|
var readStorage = sessionStorage.getItem('vipSub_read') == 'true' ? true : false;
|
|
|
- console.log(areaStorage, industryStorage, readStorage)
|
|
|
+ // console.log(areaStorage, industryStorage, readStorage)
|
|
|
if(readStorage) {
|
|
|
this.checkboxStatus = true
|
|
|
}
|
|
|
@@ -772,6 +899,8 @@
|
|
|
// showGiveStatus(false)
|
|
|
// }
|
|
|
Calculation.Init(false, undefined, [], 0)
|
|
|
+ // 将价格列表传至商品规格组件
|
|
|
+ goodsSize.props.priceInfo = r.new
|
|
|
}
|
|
|
}, false)
|
|
|
} catch (e) {
|
|
|
@@ -783,22 +912,25 @@
|
|
|
if (!$.isEmptyObject(this.areaSelect) && !this.areaSelect["一个省"]) { //有选择
|
|
|
if (this.nowBuyset.areacount === -1) {
|
|
|
$(".choose_area").val("全国");
|
|
|
+ $(".area-result-text").show().text("已选: 全国");
|
|
|
} else {
|
|
|
- var tipTxt = "已选择 ";
|
|
|
- if (this.nowBuyset.areacount > 0) tipTxt += this.nowBuyset.areacount + " 个省";
|
|
|
+ var tipTxt = "已选: ";
|
|
|
+ if (this.nowBuyset.areacount > 0) tipTxt += this.nowBuyset.areacount + "";
|
|
|
var count = 0;
|
|
|
this.nowBuyset.citys.forEach(function (item, index) {
|
|
|
count += item;
|
|
|
});
|
|
|
- if (count > 0) {
|
|
|
- if (this.nowBuyset.areacount > 0) tipTxt += "、";
|
|
|
- tipTxt += count + " 个市";
|
|
|
- if (this.nowBuyset.citys.length > 1) tipTxt += "(分布在" + this.nowBuyset.citys.length + "个省内)"
|
|
|
- }
|
|
|
+ // if (count > 0) {
|
|
|
+ // if (this.nowBuyset.areacount > 0) tipTxt += "、";
|
|
|
+ // tipTxt += count + " 个市";
|
|
|
+ // if (this.nowBuyset.citys.length > 1) tipTxt += "(分布在" + this.nowBuyset.citys.length + "个省内)"
|
|
|
+ // }
|
|
|
$(".choose_area").val(tipTxt);
|
|
|
+ $(".area-result-text").show().text(tipTxt);
|
|
|
}
|
|
|
} else {
|
|
|
$(".choose_area").val("");
|
|
|
+ $(".area-result-text").hide().text("");
|
|
|
//是否勾选已阅读
|
|
|
if (sessionStorage.getItem("vipSub_read") === "true") {
|
|
|
$(".area_warn").css("display", "");
|
|
|
@@ -898,7 +1030,13 @@
|
|
|
$('.computed_price').html(showPrice);
|
|
|
$('.discount-price .dis-price').text(formatMoney(givePrice))
|
|
|
}
|
|
|
- coupon.updatePrice(price)
|
|
|
+ // coupon.updatePrice(price)
|
|
|
+ var size = JSON.parse(sessionStorage.getItem('vip-cur-select-size'))
|
|
|
+ // 首次进入没有选择商品规格 默认
|
|
|
+ if (!size) {
|
|
|
+ coupon.updatePrice(price)
|
|
|
+ goodsCoupon.updatePrice(price)
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
@@ -1118,12 +1256,22 @@
|
|
|
if (activeCode.toLowerCase() === couponInfo.code && $('.coupon-code-tx .info').text() === couponInfo.successTip) {
|
|
|
activeCodes = couponInfo.code;
|
|
|
}
|
|
|
+ var size = goodsSize.defaultSize
|
|
|
+ if (size && size.period) {
|
|
|
+ if(size.period.indexOf('月') > -1) {
|
|
|
+ size.period = size.period.replace('月', '个月')
|
|
|
+ }
|
|
|
+ sizeTime = size.period
|
|
|
+ } else {
|
|
|
+ sizeTime = '1个月'
|
|
|
+ }
|
|
|
+ console.log(sizeTime, '选择的周期')
|
|
|
var param = {
|
|
|
- "userLotteryId":coupon.$refs.couponRef.coupon.userLotteryId,
|
|
|
- "lotteryId": coupon.$refs.couponRef.coupon.lotteryId,
|
|
|
+ "userLotteryId":goodsCoupon.curSelectCoupon.userLotteryId,
|
|
|
+ "lotteryId": goodsCoupon.curSelectCoupon.lotteryId,
|
|
|
"area": JSON.stringify(area),
|
|
|
// "industry": industry.join(","),
|
|
|
- "time": $(".info:eq(2)").val().trim(),
|
|
|
+ "time": sizeTime,
|
|
|
"price": Number((coupon.initPrice*100).toFixed(2)),
|
|
|
"orderType":{{.T.orderType}},
|
|
|
"activeCode": activeCodes,
|
|
|
@@ -1211,6 +1359,10 @@
|
|
|
sessionStorage.removeItem("vip_index_read");
|
|
|
sessionStorage.removeItem("vip_change_time");
|
|
|
sessionStorage.removeItem("liveActiveCode_purchase");
|
|
|
+ // 清除商品规格当前选择
|
|
|
+ sessionStorage.removeItem("vip-cur-select-size")
|
|
|
+ // 清除商品优惠券当前选择
|
|
|
+ sessionStorage.removeItem("vip-cur-select-coupon")
|
|
|
}
|
|
|
|
|
|
/******* 获取url参数（正则）********/
|
