Page A Click function A jumps to page B to select coupons. Either single or multiple selections can be saved and then go back to page A
and then click on page A to select coupons from page B.
P.S saves the coupons that have been selected before
how to implement pure front-end vue
coupon structure code
<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>Select the coupon function code
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);
};
}
});
}