如何使用 Deepseek 写的uniapp油耗计算器
下面是一个基于 Uniapp 的油耗计算器实现,包含 Vue 组件和页面代码。
1. 创建页面文件
在 pages
目录下创建 fuel-calculator
页面:
<!-- pages/fuel-calculator/fuel-calculator.vue --> <template> <view class="container"> <view class="calculator"> <view class="header"> <text class="title">油耗计算器</text> </view> <view class="input-group"> <text class="label">当前油价 (元/升)</text> <input type="number" v-model="price" placeholder="例如:7.85" class="input" @input="validateInput('price')" /> </view> <view class="input-group"> <text class="label">加油金额 (元)</text> <input type="number" v-model="money" placeholder="例如:300" class="input" @input="validateInput('money')" /> </view> <view class="input-group"> <text class="label">行驶里程 (公里)</text> <input type="number" v-model="distance" placeholder="例如:450" class="input" @input="validateInput('distance')" /> </view> <button class="calculate-btn" @click="calculate">计算油耗</button> <view class="result" v-if="showResult"> <view class="result-header"> <text class="result-title">计算结果</text> </view> <view class="result-item"> <text>加油量:</text> <text class="result-value">{{ fuel.toFixed(2) }} 升</text> </view> <view class="result-item"> <text>百公里油耗:</text> <text class="result-value">{{ consumption.toFixed(2) }} 升/百公里</text> </view> <view class="result-item"> <text>每公里油费:</text> <text class="result-value">{{ costPerKm.toFixed(2) }} 元</text> </view> </view> </view> </view> </template> <script> export default { data() { return { price: '', money: '', distance: '', fuel: 0, consumption: 0, costPerKm: 0, showResult: false } }, methods: { validateInput(field) { // 确保输入是正数 if (this[field] < 0) { this[field] = '' } }, calculate() { // 验证输入 if (!this.price || !this.money || !this.distance) { uni.showToast({ title: '请填写完整信息', icon: 'none' }) return } if (this.price <= 0 || this.money <= 0 || this.distance <= 0) { uni.showToast({ title: '请输入大于0的数值', icon: 'none' }) return } // 计算 this.fuel = this.money / this.price this.consumption = (this.fuel / this.distance) * 100 this.costPerKm = this.money / this.distance this.showResult = true // 隐藏键盘 uni.hideKeyboard() } } } </script> <style> .container { padding: 20px; background-color: #f5f5f5; min-height: 100vh; } .calculator { background-color: #ffffff; border-radius: 10px; padding: 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .header { margin-bottom: 25px; } .title { font-size: 22px; font-weight: bold; color: #333; text-align: center; display: block; } .input-group { margin-bottom: 20px; } .label { font-size: 16px; color: #555; font-weight: bold; display: block; margin-bottom: 8px; } .input { border: 1px solid #ddd; border-radius: 5px; padding: 12px; font-size: 16px; width: 100%; box-sizing: border-box; } .calculate-btn { background-color: #4CAF50; color: white; border: none; border-radius: 5px; padding: 12px; font-size: 16px; margin-top: 10px; width: 100%; } .calculate-btn:active { background-color: #45a049; } .result { margin-top: 25px; padding: 15px; background-color: #f9f9f9; border-radius: 8px; } .result-header { margin-bottom: 15px; } .result-title { font-size: 18px; font-weight: bold; color: #333; } .result-item { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 16px; } .result-value { font-weight: bold; color: #2196F3; } </style>
2. 配置页面路由
在 pages.json
中添加页面路由配置:
3. 功能说明
这个 Uniapp 油耗计算器具有以下特点:
- 响应式设计:适配各种屏幕尺寸
- 输入验证:确保输入值为正数
- 计算结果:
- 加油量(升)
- 百公里油耗(升/百公里)
- 每公里油费(元)
- 用户体验优化:
- 计算后自动隐藏键盘
- 错误输入提示
- 清晰的结果展示
4. 使用方法
- 将代码添加到您的 Uniapp 项目中
- 通过路由跳转或导航栏访问油耗计算器页面
- 输入油价、加油金额和行驶里程
- 点击"计算油耗"按钮查看结果
5. 扩展建议
如果需要进一步增强功能,可以考虑:
- 添加历史记录功能,保存每次计算结果
- 实现多车管理,比较不同车辆的油耗
- 增加图表展示,可视化油耗变化趋势
- 添加分享功能,方便分享计算结果
上一篇:JavaScript其他类型的值转换为布尔值的规则详解
栏 目:JavaScript
本文标题:如何使用 Deepseek 写的uniapp油耗计算器
本文地址:https://fushidao.cc/wangluobiancheng/23799.html
您可能感兴趣的文章
- 07-25如何使用 Deepseek 写的uniapp油耗计算器
- 07-25JavaScript其他类型的值转换为布尔值的规则详解
- 07-25JavaScript实现给浮点数添加千分位逗号的多种方法
- 07-25ReactNative环境搭建的教程
- 07-25JavaScript获取和操作时间戳的用法详解
- 07-25通过Vue实现Excel文件的上传和预览功能
- 07-25Node使用Puppeteer监听并打印网页的接口请求
- 07-25在Node.js中设置响应的MIME类型的代码详解
- 07-25Vue3解决Mockjs引入后并访问404(Not Found) 的页面报错问题
- 07-25如何利用SpringBoot与Vue3构建前后端分离项目


阅读排行
推荐教程
- 04-23JavaScript Array实例方法flat的实现
- 04-23Vue3使用v-if指令进行条件渲染的实例代码
- 04-23THREE.JS使用TransformControls对模型拖拽的代码实例
- 07-21JavaScript判断数据类型的四种方式总结
- 07-22JavaScript随机数生成各种技巧及实例代码
- 04-23vue3+ts项目搭建的实现示例
- 07-21JavaScript检查变量类型的常用方法
- 07-21基于vue3与supabase系统认证机制详解
- 07-22使用Node.js实现GitHub登录功能
- 07-21JavaScript双问号操作符(??)的惊人用法总结大全