vue，根据输入框输入的值动态显示不同的价格区间比例值

不念不忘少年蓝@ 2023-06-20 06:51 168阅读 0赞

![在这里插入图片描述][20191209134758140.png]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTQzMTYz_size_16_color_FFFFFF_t_70]

<template>
        <div>
            <div class="payTotal">
                <div class="pay">
                    <div class="pay-top">
                        <div class="pay-price" style="display: flex;margin: 10px 0;align-items: center">
                            <p style="font-size: 18px">请输入充值的金额</p>  
                            <el-input size="large" style="width:10%" v-model="price"></el-input>   元
                            <p style="color: #f56c6c;margin-left: 10px" v-if="price&&price>0">
                                实际到账{ { parseInt(price)+getExtra}}元</p>
                        </div>
                    </div>
                    <div class="pay-bottom">
                        <el-table :data="tableData" style="width: 100%; margin-top: 20px" border
                                  :cell-style="tableCellStyle">
                            <el-table-column label="充值金额" prop="price" align="center"></el-table-column>
                            <el-table-column label="赠送比例" prop="rate" align="center"></el-table-column>
                            <el-table-column label="实际到账" prop="amount" align="center">
                                <template slot-scope="scope">
                                    { { parseInt(scope.row.amount)}}
                                </template>
                            </el-table-column>
    
                        </el-table>
                    </div>
                </div>
            </div>
    
        </div>
    </template>
    
    <script>
        export default { 
            name: "payCenter",
            data() { 
                return { 
                    tableData: [],
                    resp: { 
                        "100": 10,
                        "150": 15,
                        "500": 20
                    },
                    price: '',
                    rechargeExtra: 0,
                    // 显示折扣比例对象
                    priceRate: { }
                }
            },
            computed: { 
                // 监听计算输入的金额
                getExtra() { 
                    let input = this.price ? Number(this.price) : 0;
                    let ratePrice = 0;
                    let keys = Object.keys(this.priceRate).sort((a, b) => { 
                        Number(a) - Number(b)
                    });
                    for (let index in keys) { 
                        if (input < Number(keys[index])) { 
                            break
                        } else { 
                            ratePrice = Number(keys[index]);
                        }
                    }
                    let rate = this.priceRate[ratePrice] ? this.priceRate[ratePrice] : 0;
                    return parseInt(this.price * rate / 100);
                }
            },
            methods: { 
                //表格背景颜色
                tableCellStyle({ 
                                   rowIndex,
                                   columnIndex
                               }) { 
                    if (columnIndex !== 0) { 
                        if (rowIndex % 2 === 0) { 
                            return 'background-color:#77bdc7';
                        } else { 
                            return 'background-color:#f5fbfe';
                        }
                    }
                },
                init() { 
                    this.priceRate = this.resp;
                    let list = [];
                    Object.keys(this.resp).forEach(k => { 
                        list.push({ 
                            price: k,
                            rate: this.resp[k] + '%',
                            amount: (k * (this.resp[k] / 100)) + parseInt(k)
                        })
                    });
                    this.tableData = list;
                }
            },
            mounted() { 
                this.init();
            }
        }
    </script>
    
    <style scoped lang="scss">
    
        /*表格颜色*/
        .el-table .warning-row { 
            background: oldlace;
        }
    
        .el-table .success-row { 
            background: #f0f9eb;
        }
    </style>

[20191209134758140.png]: https://img-blog.csdnimg.cn/20191209134758140.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTQzMTYz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191209175701556.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTQzMTYz,size_16,color_FFFFFF,t_70