image.png
项目中，这里默认选中优惠券类型的函数，我写在mounted中，但是mounted直接执行话，会因为获取不到ajax请求到的数据，从而判断失败而执行失败；
最开始写法：
defaultSelection()函数需要self.couponId、self.haveReduction、self.haveBalance等参数，但是这些参数都是ajax异步请求之后才获得的，但是此时mounted在ajax还未请求成功渲染完数据的时候，就已经执行结束了，所以导致函数判断失败；
这里，最开始的解决思路有两种：
一、是把请求改为同步，但是这里存在几个问题，1是vue-resources我不知道怎么设置为同步请求，2是这样会造成页面在绑定数据时产生阻塞和卡顿，因此这不是最好的解决方法；
二、在mounted函数设置一个时间定时，大概给个执行时间，延后其执行，但是这样的结果是，如果有时候网络不流畅，数据请求慢，mounted这时已经执行完了，所以也会导致函数执行错误；
三、是我后面选择的解决方法，通过数据请求回掉成功之后，设置一个变量，然后通过watch钩子判断这个变量有没有发生变化，如果检测到发生变化了，这样就执行函数，这样就不会报错了；
最开始代码：
mounted:{
// 默认选中优惠（优先级：满减、优惠券、收益金、基金）
/* setTimeout(function(){
self.defaultSelection();
},200)*/
}
defaultSelection:function () {
var self = this;
if(window.sessionStorage.jumpCouponFlag == "hadIn" && checkAddr.selectDiscount != undefined){
console.log("默认选择优惠券传过来的优惠券");
this.coupon.selectFlag = true;
var oldPrice = checkAddr.orderTotal;
var discountPrice = checkAddr.selectDiscount;
console.log(discountPrice);
if (this.coupon.selectFlag) {
// 优惠券
this.coupon.src = iconed;
if (discountPrice != undefined) {
var couponObj={};
this.total.price = parseFloat(oldPrice) - parseFloat(discountPrice);
couponObj['name']='优惠券抵扣';
couponObj['price']=discountPrice;
if(this.details.length>2){//目前需求就只能选择一种优惠
this.details.pop();
this.details.push(couponObj);
}else{
this.details.push(couponObj);
}
}
}
}else if(self.haveReduction){
this.reduction.selectFlag = true;
window.checkAddr = window.localStorage;
var oldPrice = checkAddr.orderTotal;
var reductionObj={};
reductionObj['name']='满减抵扣';
if (this.reduction.selectFlag) {
this.reduction.src = iconed;
var nowPrice = parseFloat(oldPrice) - parseFloat(this.reduction.cutPrice);
this.total.price = parseFloat(nowPrice);
reductionObj['price']=this.reduction.cutPrice;//抵扣金额>实际金额
if(this.details.length>2){
this.details.pop();
this.details.push(reductionObj);
}else{
this.details.push(reductionObj);
}
}
}else if(self.couponId != ''){
this.coupon.selectFlag = true;
var discountPrice = self.couponPrice;
var oldPrice = checkAddr.orderTotal;
if (discountPrice != 0) {
// 优惠券
this.coupon.src = iconed;
if (discountPrice != undefined) {
var couponObj={};
this.total.price = parseFloat(oldPrice) - parseFloat(discountPrice);
couponObj['name']='优惠券抵扣';
couponObj['price']=discountPrice;
if(this.details.length>2){//目前需求就只能选择一种优惠
this.details.pop();
this.details.push(couponObj);
}else{
this.details.push(couponObj);
}
} else {//不存在就是原来的价钱
this.total.price = parseFloat(oldPrice);
};
}
}else if(self.haveBalance){
this.actives.selectFlag = true;
var oldPrice = checkAddr.orderTotal;
if (this.actives.selectFlag) {
this.actives.src = iconed;
var balanceObj={};
balanceObj['name']='收益抵扣';
var nowPrice = parseFloat(oldPrice) - parseFloat(this.actives.content);
if (parseFloat(nowPrice) < 0) {
this.total.price = 0;
balanceObj['price']=oldPrice;//抵扣金额>实际金额
self.fundBalanceOver = 3; //如果完全抵扣，generate接口支付方式payType需要传参2
} else {
this.total.price = parseFloat(nowPrice).toFixed(2); //四舍五入处理，因为
balanceObj['price']=this.actives.content;//抵扣金额<实际金额
};
if(this.details.length>2){
this.details.pop();
this.details.push(balanceObj);
}else{
this.details.push(balanceObj);
}
}
}else if(self.haveFund){
this.fund.selectFlag = true;
var oldPrice = checkAddr.orderTotal;
if (this.fund.selectFlag) {
this.fund.src = iconed;
var fundObj ={};
fundObj ['name']='基金抵扣';
var nowPrice = parseFloat(oldPrice) - parseFloat(this.fund.content);
if (parseFloat(nowPrice) < 0) {
this.total.price = 0;
fundObj ['price']=oldPrice;//抵扣金额>实际金额
self.fundBalanceOver = 2; //如果完全抵扣，generate接口支付方式payType需要传参2
} else {
this.total.price = parseFloat(nowPrice).toFixed(2); //四舍五入处理，因为
fundObj ['price']='-'+this.fund.content;//抵扣金额<实际金额
};
if(this.details.length>2){
this.details.pop();
this.details.push(fundObj );
}else{
this.details.push(fundObj );
}
}
}
}
修改后代码：
watch:{
defaultSelectFlag: 'changeDefaultSelect' //这里设置了一个变量defaultSelectFlag
}
changeDefaultSelect:function(newVal,oldVal){
console.log("改变了，请求默认选中函数");
var self = this;
self.defaultSelection(); //检测到数据加载完了，就执行此函数（代码内容同上）
},
getCouponFlag: function () {//优惠券是否可用
var self = this;
var buyProds = [];
for (var i = 0; i < self.prods.length; i++) {
var buyObj = {}
buyObj["detailId"] = self.prods[i].detailId;
buyObj["buyNum"] = self.prods[i].amount;
buyProds.push(buyObj);
};
console.log(window.JSON.stringify(buyProds));
self.turnbuyPros = buyProds;
console.log(window.JSON.stringify(self.turnbuyPros));
self.$http({
method: 'get',
url: '/mall/coupons/pay',
params: {'prods': window.JSON.stringify(buyProds)},
emulateJSON: true
}).then(function (data) {
var obj = data.data;
if (obj.status == 1) {
var coupons = obj.arrayresult;
var arrCanUse = [];
for (var i = 0; i < coupons.length; i++) {
if (coupons[i].status == 1) {
arrCanUse.push(coupons[i]);
}
};
//从优惠券页面选中优惠券后的显示
if (arrCanUse.length > 0) {
// self.coupon.couponFlag = '可使用';
self.couponId = coupons[0].couponid;
self.couponPrice = coupons[0].discount;
console.log("优惠券");
console.log(self.couponPrice);
console.log(self.couponId);
if(checkAddr.selectDiscount == undefined){
self.appearDiscount = true;
self.coupon.couponFlag = '¥' + self.couponPrice;
}
//
} else {
self.coupon.couponFlag = '不可用';
}
self.defaultSelectFlag = true; // >>>>>数据加载成功，将此变量修改
} else {
// alert(obj.errmsg);
}
}, function (error) {
// window.location.href="http://www.maojimall.com/maojimall/netFail.html";
});
},
