账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue 纯前端如何实现存储优惠券的选中状态来显示
    22
    0

    页面A 点击功能A 跳转到 页面B 可以选择优惠券,单选,多选都可以 保存之后 回到页面A
    再通过页面A点击功能A 到页面B选择优惠券的时候 显示之前操作已经选择的优惠券
    P.S 保存功能 没有走接口

    纯前端 vue应该怎么实现

    优惠券结构代码

     <el-col :span="3" v-for="item in tableData" class="item" :key="item.id">
            <div @click="handleItemClick(item)">
              <div class="selected" v-if="item.isSelected">√</div>
              <div class="header">{{item.name}}</div>
              <div class="left-circle"></div>
              <div class="left"></div>
              <div class="middle">
                <div class="price text" v-if="item.groupGoodsVO">{{item.groupGoodsVO.goodsName}}</div>
                <div class="price" v-else>
                  <span>¥</span>{{item.price | money}}
                </div>
                <div class="condition">
                  {{item.money === -1 ? '无金额门槛' : `满${(item.money / 100).toFixed(0)}元可用`}}
                </div>
                <div class="date">
                  {{getValidDate(item)}}
                </div>
              </div>
              <div class="right-circle"></div>
              <div class="right"></div>
              <div class="bottom">
                <div class="bottom-text">
                  <span class="label">限品类:</span>
                  <span class="value">{{item.groupRuleGoodsVO ? '限部分商品' : '不限'}}</span>
                  <span class="label">限平台:</span>
                  <span class="value">{{item.groupRuleGoodsVO ? '限部分平台' : '不限'}}</span>
                  <span class="label">券编号:</span>
                  <span class="value">{{item.codeRule}}</span>
                </div>
                <!--<div>-->
                  <!--<span class="label">限平台:</span>-->
                  <!--<span class="value">{{item.groupRuleScopeVO ? '限部分门店' : '不限'}}</span>-->
                <!--</div>-->
                <!--<div>-->
                  <!--<span class="label">券编号:</span>-->
                  <!--<span class="value">{{item.codeRule}}</span>-->
                <!--</div>-->
              </div>
            </div>
          </el-col>

    选择优惠券功能代码

     handleItemClick (item) {
            console.log(item);
            this.tableData.map((data) => { 
              if (item.id === data.id) {
                // this.$set(data, 'isSelected', item.id === data.id);
                if (item.isSelected){
                  this.$set(data, 'isSelected',false);
                } else {
                  this.$set(data, 'isSelected',true);
                };
              }
            });
          }
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部