html:
<el-badge :is-dot="couponList.length > 0 && (couponList.length - 1) != 0">
<el-select v-model="coupon_id" placeholder="请选择优惠券"
class="couponSelect" @change="couponChange">
<div slot="prefix" class="selectPrice el-input__icon">
<i class="iconfont icon-youhuiquan-01"></i>
<span class="selectPrice-price" v-if="couponObj.price">
-¥{{ couponObj.price }}
</span>
</div>
<el-option v-for="item in couponList" :key="item.id"
:label="item.title" :value="item.id">
<div class="optionPrice">
<span class="optionPrice-price" v-if="item.price">
¥{{ item.price }}
</span>
<span>{{ item.title }}</span>
</div>
</el-option>
</el-select>
</el-badge>
js变量:
data () {
return {
// 优惠券id
coupon_id: 0,
// 优惠券列表
couponList: [],
// 优惠券对象
couponObj: {
id: 0,
price: 0,
title: "不使用优惠券"
}
}
},
js方法:
/**
* 获取优惠券列表
*/
async getCouponList() {
let obj = {
id: 0,
price: 0,
title: "不使用优惠券"
};
this.coupon_id = 0;
this.couponList = [];
this.couponObj = JSON.parse(JSON.stringify(obj));
let params = {
number: this.price
};
let res = await coupon.getCouponAllList(params);
if (res.code == 200) {
res.data.push(obj);
this.couponList = res.data;
this.couponInit();
};
},
/**
* 优惠券进来时的回显
*/
couponInit() {
let couponObjTemp = JSON.parse(window.localStorage.getItem("couponObj"));
if (couponObjTemp) {
window.localStorage.removeItem("couponObj");
if ((couponObjTemp.price - 0) > (this.price - 0)) {
this.clientWidth > 750 ? this.$message.warning("当前优惠券不可使用") : this.$toast("当前优惠券不可使用");
Object.keys(this.couponObj).forEach(key => {
this.couponObj[key] = this.couponList[this.couponList.length - 1][key];
});
this.coupon_id = this.couponList[this.couponList.length - 1].id;
} else {
Object.keys(this.couponObj).forEach(key => {
this.couponObj[key] = couponObjTemp[key];
});
this.coupon_id = couponObjTemp.id;
};
} else {
Object.keys(this.couponObj).forEach(key => {
this.couponObj[key] = this.couponList[this.couponList.length - 1][key];
});
this.coupon_id = this.couponList[this.couponList.length - 1].id;
};
},
/**
* 优惠券切换
*/
couponChange() {
let obj = this.couponList.find(item => item.id == this.coupon_id);
if (obj) {
Object.keys(this.couponObj).forEach(key => {
this.couponObj[key] = obj[key];
});
};
},
css:
/deep/.el-badge, /deep/.couponSelect {
width: 343px;
height: 40px;
}
/deep/.el-badge {
.el-badge__content.is-dot {
width: 10px;
height: 10px;
}
}
/deep/.couponSelect {
.iconfont {
color: #FF5F59;
}
.el-input__inner {
background-color: #F3F8FE;
border: none;
font-weight: bold;
}
.el-input {
height: 100%;
order: 2;
display: flex;
align-items: center;
.el-input__prefix {
width: auto;
position: unset;
background-color: #F3F8FE;
.el-input__icon {
width: auto;
padding-right: 5px;
font-weight: bold;
display: flex;
align-items: center;
line-height: unset;
.iconfont {
width: 20px;
height: 20px;
font-size: 20px;
margin: 0 10px 0 12px;
display: flex;
align-items: center;
}
}
}
.el-input__inner {
padding-left: 0;
flex: 1;
order: 1;
}
}
}
.optionPrice {
display: flex;
font-weight: bold;
font-size: 14px;
&-price {
color: #FF3224;
margin-right: 5px;
}
}
.selectPrice {
&-price {
color: #FF3224;
}
}
效果图: