记录vue使用vux CheckIcon组件
作为vue移动端ui开源框架vux。用的不太6,开发优惠券选择时遇到一个问题。选择当前优惠券,单选某个点击确定。离开当前页面,再返回到优惠券页面,之前选择的优惠券状态仍存在。可能大家觉得这个用v-model很容易处理。但是用CheckIcon半天没捣鼓出来。后来把当前选中的某优惠券的唯一标识code缓存起来。再次进入页面判断code是否一致,如果是,则将当前的checked属性设置为true。何.
·
作为vue移动端ui开源框架vux。用的不太6,开发优惠券选择时遇到一个问题。选择当前优惠券,单选某个点击确定。离开当前页面,再返回到优惠券页面,之前选择的优惠券状态仍存在。可能大家觉得这个用v-model很容易处理。但是用CheckIcon半天没捣鼓出来。后来把当前选中的某优惠券的唯一标识code缓存起来。再次进入页面判断code是否一致,如果是,则将当前的checked属性设置为true。何时remove掉缓存的code。看你的项目需求,这里是在提交当前订单时触发。其次,如果我再次从首页进入,也要remove掉缓存的code。
不断切换选择优惠券,再跳到其他页面,如某宝,选择优惠券后,可以更换默认地址,或者跳转开发票页面,再回到订单详情页优惠券状态仍存在。当提交订单时,怕出错(缓存内的code没有随之优惠券切换的话,最好打印一下看看)
下面,上代码啦:
// 优惠券选中状态事件
checkBtn(item,index) {
var _this = this;
// 用于判断点击的是否为当前的,true为再次点击当前的,false表示点击其他
var flag = false;
if (!item.checked) {
flag = true;
this.curName = '';
}
this.cardLists.forEach(element => {
this.$set(element, "checked", false);
});
if (flag) {
this.$set(item, "checked", false);
this.curName = '';
} else {
const name = this.$route.name;
this.$set(item, "checked", true);
this.curName = item.couponName;
// 存储当前选中的优惠券
this.DATA.setOrderParam("couponName", item.couponName);
this.DATA.setOrderParam("code", item.code);
}
// 获取缓存内的code
mounted: function(){
this.code = this.DATA.getOrderParam().code;
this.couponName = this.DATA.getOrderParam().couponName;
},
// 获取优惠券列表数据
getCardList(totalAmount) {
var _this = this;
var totalAmount = _this.totalAmount.toFixed(2);
_this.DATA.getCardList(totalAmount).then(function(res) {
_this.cardLists = res.data;
_this.defaultCheck();
});
},
// 判断当前从缓存内获取的code是否存在,如果存在则将checkIcon设置为true
defaultCheck() {
if (!this.code) {
return;
}
this.cardLists.forEach(element => {
if (element.code == this.code) {
this.$set(element, "checked", true);
}
});
},
<popup v-model="showCard" position="bottom">
<div class="service">
<div class="service-close" @click="showCard=false">
×
</div>
<p class="title">选择优惠券</p>
<ul class="boxY">
<li class="li-second pl" v-for="(list,index) in cardLists" :key="index">
<p class="db pr">{{list.couponName}}</p>
<div class="db " @click="checkBtn(list,index)">
<CheckIcon :value.sync="list.checked"></CheckIcon>
</div>
</li>
</ul>
<button class="submitBtn" @click="saveCardInfo()">确定</button>
</div>
</popup>
更多推荐
已为社区贡献3条内容
所有评论(0)