记录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);
        }
      });
    },

     <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>