记录vue使用vux CheckIcon组件

作为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);
        }
      });
    },

     
        

          

            ×
          
          
选择优惠券
          
  
            

              
{{list.couponName}}
              

                
              
            
          
          确定