目录结构调整
This commit is contained in:
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"usingComponents": {},
|
||||
"navigationBarTitleText": "单位换算"
|
||||
}
|
||||
@@ -0,0 +1,171 @@
|
||||
|
||||
Page({
|
||||
data: {
|
||||
categories: ['长度', '面积', '体积', '重量', '温度'],
|
||||
categoryIndex: 0,
|
||||
|
||||
units: {
|
||||
'长度': [
|
||||
{ name: '米', factor: 1 },
|
||||
{ name: '千米', factor: 1000 },
|
||||
{ name: '分米', factor: 0.1 },
|
||||
{ name: '厘米', factor: 0.01 },
|
||||
{ name: '毫米', factor: 0.001 },
|
||||
{ name: '微米', factor: 0.000001 },
|
||||
{ name: '纳米', factor: 0.000000001 },
|
||||
{ name: '英里', factor: 1609.344 },
|
||||
{ name: '海里', factor: 1852 },
|
||||
{ name: '码', factor: 0.9144 },
|
||||
{ name: '英尺', factor: 0.3048 },
|
||||
{ name: '英寸', factor: 0.0254 }
|
||||
],
|
||||
'面积': [
|
||||
{ name: '平方米', factor: 1 },
|
||||
{ name: '平方千米', factor: 1000000 },
|
||||
{ name: '公顷', factor: 10000 },
|
||||
{ name: '公亩', factor: 100 },
|
||||
{ name: '平方英里', factor: 2589988.11 },
|
||||
{ name: '英亩', factor: 4046.8564 },
|
||||
{ name: '平方码', factor: 0.836127 },
|
||||
{ name: '平方英尺', factor: 0.092903 },
|
||||
{ name: '平方英寸', factor: 0.000645 }
|
||||
],
|
||||
'体积': [
|
||||
{ name: '立方米', factor: 1 },
|
||||
{ name: '立方分米', factor: 0.001 },
|
||||
{ name: '立方厘米', factor: 0.000001 },
|
||||
{ name: '升', factor: 0.001 },
|
||||
{ name: '分升', factor: 0.0001 },
|
||||
{ name: '毫升', factor: 0.000001 },
|
||||
{ name: '立方英尺', factor: 0.028317 },
|
||||
{ name: '立方英寸', factor: 0.000016 },
|
||||
{ name: '立方码', factor: 0.764555 }
|
||||
],
|
||||
'重量': [
|
||||
{ name: '千克', factor: 1 },
|
||||
{ name: '克', factor: 0.001 },
|
||||
{ name: '毫克', factor: 0.000001 },
|
||||
{ name: '吨', factor: 1000 },
|
||||
{ name: '磅', factor: 0.453592 },
|
||||
{ name: '盎司', factor: 0.02835 },
|
||||
{ name: '克拉', factor: 0.0002 }
|
||||
],
|
||||
'温度': [
|
||||
{ name: '摄氏度', type: 'C' },
|
||||
{ name: '华氏度', type: 'F' },
|
||||
{ name: '开氏度', type: 'K' }
|
||||
]
|
||||
},
|
||||
|
||||
currentUnits: [] as any[],
|
||||
fromIndex: 0,
|
||||
toIndex: 1,
|
||||
inputValue: '',
|
||||
outputValue: ''
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.updateCurrentUnits();
|
||||
},
|
||||
|
||||
updateCurrentUnits() {
|
||||
const category = this.data.categories[this.data.categoryIndex];
|
||||
// @ts-ignore
|
||||
const units = this.data.units[category];
|
||||
this.setData({
|
||||
currentUnits: units,
|
||||
fromIndex: 0,
|
||||
toIndex: 1,
|
||||
inputValue: '',
|
||||
outputValue: ''
|
||||
});
|
||||
},
|
||||
|
||||
bindCategoryChange(e: any) {
|
||||
this.setData({
|
||||
categoryIndex: e.detail.value
|
||||
});
|
||||
this.updateCurrentUnits();
|
||||
},
|
||||
|
||||
bindFromUnitChange(e: any) {
|
||||
this.setData({
|
||||
fromIndex: e.detail.value
|
||||
});
|
||||
this.calculate();
|
||||
},
|
||||
|
||||
bindToUnitChange(e: any) {
|
||||
this.setData({
|
||||
toIndex: e.detail.value
|
||||
});
|
||||
this.calculate();
|
||||
},
|
||||
|
||||
bindInput(e: any) {
|
||||
this.setData({
|
||||
inputValue: e.detail.value
|
||||
});
|
||||
this.calculate();
|
||||
},
|
||||
|
||||
calculate() {
|
||||
const val = parseFloat(this.data.inputValue);
|
||||
if (isNaN(val)) {
|
||||
this.setData({ outputValue: '' });
|
||||
return;
|
||||
}
|
||||
|
||||
const category = this.data.categories[this.data.categoryIndex];
|
||||
if (category === '温度') {
|
||||
this.calculateTemperature(val);
|
||||
} else {
|
||||
this.calculateStandard(val);
|
||||
}
|
||||
},
|
||||
|
||||
calculateStandard(val: number) {
|
||||
const fromUnit = this.data.currentUnits[this.data.fromIndex];
|
||||
const toUnit = this.data.currentUnits[this.data.toIndex];
|
||||
|
||||
// Convert to base unit then to target unit
|
||||
const baseVal = val * fromUnit.factor;
|
||||
const result = baseVal / toUnit.factor;
|
||||
|
||||
this.setData({
|
||||
outputValue: this.formatResult(result)
|
||||
});
|
||||
},
|
||||
|
||||
calculateTemperature(val: number) {
|
||||
const fromUnit = this.data.currentUnits[this.data.fromIndex];
|
||||
const toUnit = this.data.currentUnits[this.data.toIndex];
|
||||
|
||||
let celsius = val;
|
||||
// Convert to Celsius first
|
||||
if (fromUnit.type === 'F') {
|
||||
celsius = (val - 32) * 5 / 9;
|
||||
} else if (fromUnit.type === 'K') {
|
||||
celsius = val - 273.15;
|
||||
}
|
||||
|
||||
// Convert from Celsius to target
|
||||
let result = celsius;
|
||||
if (toUnit.type === 'F') {
|
||||
result = celsius * 9 / 5 + 32;
|
||||
} else if (toUnit.type === 'K') {
|
||||
result = celsius + 273.15;
|
||||
}
|
||||
|
||||
this.setData({
|
||||
outputValue: this.formatResult(result)
|
||||
});
|
||||
},
|
||||
|
||||
formatResult(val: number): string {
|
||||
if (Math.abs(val) < 0.000001 || Math.abs(val) > 10000000) {
|
||||
return val.toExponential(4);
|
||||
}
|
||||
return parseFloat(val.toPrecision(6)).toString();
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,49 @@
|
||||
<view class="container">
|
||||
<!-- 顶部类型选择 -->
|
||||
<view class="header-section">
|
||||
<picker bindchange="bindCategoryChange" value="{{categoryIndex}}" range="{{categories}}">
|
||||
<view class="category-picker">
|
||||
<text class="label">当前换算</text>
|
||||
<text class="value">{{categories[categoryIndex]}}</text>
|
||||
<text class="arrow">▼</text>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="converter-card">
|
||||
<!-- 输入区域 -->
|
||||
<view class="conversion-row input-row">
|
||||
<view class="row-label">输入</view>
|
||||
<view class="row-content">
|
||||
<input class="value-input" type="digit" placeholder="0" bindinput="bindInput" value="{{inputValue}}" />
|
||||
<picker class="unit-selector" bindchange="bindFromUnitChange" value="{{fromIndex}}" range="{{currentUnits}}" range-key="name">
|
||||
<view class="unit-text">
|
||||
{{currentUnits[fromIndex].name}} <text class="unit-arrow">▼</text>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 分割线/转换图标 -->
|
||||
<view class="divider">
|
||||
<view class="icon-transfer">⇅</view>
|
||||
</view>
|
||||
|
||||
<!-- 输出区域 -->
|
||||
<view class="conversion-row output-row">
|
||||
<view class="row-label">结果</view>
|
||||
<view class="row-content">
|
||||
<view class="value-display">{{outputValue || '0'}}</view>
|
||||
<picker class="unit-selector" bindchange="bindToUnitChange" value="{{toIndex}}" range="{{currentUnits}}" range-key="name">
|
||||
<view class="unit-text">
|
||||
{{currentUnits[toIndex].name}} <text class="unit-arrow">▼</text>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tips">
|
||||
点击单位或数字进行修改
|
||||
</view>
|
||||
</view>
|
||||
@@ -0,0 +1,151 @@
|
||||
page {
|
||||
background-color: #f7f8fa;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 20px;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* 顶部选择区 */
|
||||
.header-section {
|
||||
margin-bottom: 24px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.category-picker {
|
||||
background: #ffffff;
|
||||
padding: 10px 24px;
|
||||
border-radius: 50px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.category-picker .label {
|
||||
font-size: 14px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.category-picker .value {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #007aff;
|
||||
}
|
||||
|
||||
.category-picker .arrow {
|
||||
font-size: 12px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
/* 核心转换卡片 */
|
||||
.converter-card {
|
||||
background: #ffffff;
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.conversion-row {
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.input-row {
|
||||
background-color: #fff;
|
||||
border-radius: 16px 16px 4px 4px;
|
||||
}
|
||||
|
||||
.output-row {
|
||||
background-color: #f9fbfd; /* 稍微不同的背景色区分输入输出 */
|
||||
border-radius: 4px 4px 16px 16px;
|
||||
}
|
||||
|
||||
.row-label {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-bottom: 8px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.row-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.value-input, .value-display {
|
||||
flex: 1;
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
min-width: 0; /* 防止flex子项溢出 */
|
||||
}
|
||||
|
||||
.value-display {
|
||||
color: #007aff; /* 结果颜色高亮 */
|
||||
}
|
||||
|
||||
/* 单位选择器 */
|
||||
.unit-selector {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.unit-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 16px;
|
||||
background-color: #f0f2f5;
|
||||
border-radius: 12px;
|
||||
font-size: 16px;
|
||||
color: #444;
|
||||
font-weight: 500;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.unit-text:active {
|
||||
background-color: #e1e4e8;
|
||||
}
|
||||
|
||||
.unit-arrow {
|
||||
font-size: 10px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
/* 分割线和图标 */
|
||||
.divider {
|
||||
height: 1px;
|
||||
background-color: #eee;
|
||||
margin: 0 20px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.icon-transfer {
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
color: #ccc;
|
||||
font-size: 20px;
|
||||
padding: 0 10px;
|
||||
top: -14px;
|
||||
}
|
||||
|
||||
.tips {
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
font-size: 13px;
|
||||
color: #ccc;
|
||||
}
|
||||
Reference in New Issue
Block a user