前端实现折扣价格

今天公司有个需求,需要根据购买数量计算折扣后的价格比如 2件打折400 4件打折600等等,折扣数量和价格后台可配置;
discount=
在这里插入图片描述
后台返回的折扣数量和对应折扣价格

我的实现是这样的


```javascript
var num=5;//购买数量
let tempKey=0;
for(var key in discount){
if(num>=key){
tempKey=key;
}
}
let union_discount_price=discount[tempKey];//折扣价格

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先,在前端页面中,需要使用ElementUI提供的下拉框组件来实现下拉选择成色的功能。代码如下: ```html <el-select v-model="selectedCondition" placeholder="请选择成色"> <el-option label="全新" value="new"></el-option> <el-option label="九成新" value="nine"></el-option> <!-- 其他成色选项 --> </el-select> ``` 接着,在表格中,需要使用自定义列来实现销售价格的计算和显示。代码如下: ```html <el-table-column label="销售价格" prop="salePrice"> <template slot-scope="scope"> <div>{{ calculateSalePrice(scope.row.referencePrice, selectedCondition) }}</div> </template> </el-table-column> ``` 其中,`calculateSalePrice`是一个自定义方法,用来计算销售价格。具体实现如下: ```javascript methods: { calculateSalePrice(referencePrice, condition) { let discount = 1.0; switch(condition) { case 'new': discount = 1.0; break; case 'nine': discount = 0.9; break; // 其他成色的折扣 } return referencePrice * discount; } } ``` 最后,在后端代码中,需要使用MyBatisPlus提供的ORM功能来获取数据库表中的书籍价格等信息。具体实现如下: ```java @Service public class BookService { @Autowired private BookMapper bookMapper; public List<Book> getBookList() { return bookMapper.selectList(null); } } ``` 其中,`BookMapper`是一个继承自`BaseMapper`的接口,用来对数据库表进行操作。在`selectList`方法中,传入`null`作为查询条件,表示查询所有的书籍信息。你可以在`Book`实体类中定义参考价和销售价等属性,并且使用注解来映射数据库中的字段。例如: ```java @Data public class Book { @TableId(type = IdType.AUTO) private Long id; private String name; private Double referencePrice; private Double salePrice; // 其他属性 } ``` 以上就是使用SpringBoot+Vue+ElementUI+MyBatisPlus实现获取后端数据库表中书籍价格等,并根据下拉框所选成色自动计算销售价格并在前端表格中显示的具体代码实现

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值