让 Deepseek 写一个尺码计算器

news2025/6/2 19:54:19

下面是一个简单的尺码计算器微信小程序的代码实现，包含页面布局、逻辑处理和样式。

1. 项目结构

size-calculator/
├── pages/
│ ├── index/
│ │ ├── index.js
│ │ ├── index.json
│ │ ├── index.wxml
│ │ └── index.wxss
├── app.js
├── app.json
├── app.wxss

2. 代码实现

app.json (全局配置)

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarTitleText": "尺码计算器",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

pages/index/index.wxml (页面结构)

<view class="container">
  <view class="title">尺码计算器</view>
  
  <view class="input-group">
    <text>身高(cm):</text>
    <input type="number" placeholder="请输入身高" bindinput="inputHeight" value="{{height}}"/>
  </view>
  
  <view class="input-group">
    <text>体重(kg):</text>
    <input type="number" placeholder="请输入体重" bindinput="inputWeight" value="{{weight}}"/>
  </view>
  
  <button bindtap="calculateSize" class="calculate-btn">计算尺码</button>
  
  <view class="result" wx:if="{{size}}">
    <text>推荐尺码: </text>
    <text class="size">{{size}}</text>
  </view>
  
  <view class="size-table">
    <text class="table-title">尺码对照表</text>
    <view class="table-row header">
      <text>尺码</text>
      <text>身高(cm)</text>
      <text>体重(kg)</text>
    </view>
    <view class="table-row">
      <text>S</text>
      <text>155-165</text>
      <text>45-55</text>
    </view>
    <view class="table-row">
      <text>M</text>
      <text>165-175</text>
      <text>55-65</text>
    </view>
    <view class="table-row">
      <text>L</text>
      <text>175-185</text>
      <text>65-75</text>
    </view>
    <view class="table-row">
      <text>XL</text>
      <text>185-195</text>
      <text>75-85</text>
    </view>
    <view class="table-row">
      <text>XXL</text>
      <text>195-205</text>
      <text>85-95</text>
    </view>
  </view>
</view>

pages/index/index.wxss (页面样式)

.container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 30px;
}

.input-group {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  width: 80%;
}

.input-group text {
  width: 80px;
}

.input-group input {
  border: 1px solid #ccc;
  padding: 8px;
  border-radius: 5px;
  flex: 1;
}

.calculate-btn {
  background-color: #07C160;
  color: white;
  width: 80%;
  margin-top: 20px;
  margin-bottom: 30px;
}

.result {
  font-size: 18px;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
}

.size {
  font-size: 24px;
  font-weight: bold;
  color: #07C160;
  margin-left: 10px;
}

.size-table {
  width: 90%;
  border: 1px solid #eee;
  border-radius: 5px;
  padding: 10px;
  margin-top: 20px;
}

.table-title {
  font-weight: bold;
  margin-bottom: 10px;
  display: block;
}

.table-row {
  display: flex;
  padding: 8px 0;
  border-bottom: 1px solid #f5f5f5;
}

.table-row text {
  flex: 1;
  text-align: center;
}

.header {
  font-weight: bold;
  background-color: #f5f5f5;
}

pages/index/index.js (页面逻辑)

Page({
  data: {
    height: '',
    weight: '',
    size: ''
  },
  
  // 输入身高
  inputHeight: function(e) {
    this.setData({
      height: e.detail.value
    });
  },
  
  // 输入体重
  inputWeight: function(e) {
    this.setData({
      weight: e.detail.value
    });
  },
  
  // 计算尺码
  calculateSize: function() {
    const height = parseFloat(this.data.height);
    const weight = parseFloat(this.data.weight);
    
    if (!height || !weight) {
      wx.showToast({
        title: '请输入完整信息',
        icon: 'none'
      });
      return;
    }
    
    let size = '';
    
    if (height < 155 || weight < 45) {
      size = 'XS';
    } else if (height <= 165 && weight <= 55) {
      size = 'S';
    } else if (height <= 175 && weight <= 65) {
      size = 'M';
    } else if (height <= 185 && weight <= 75) {
      size = 'L';
    } else if (height <= 195 && weight <= 85) {
      size = 'XL';
    } else if (height <= 205 && weight <= 95) {
      size = 'XXL';
    } else {
      size = 'XXXL';
    }
    
    this.setData({
      size: size
    });
  }
});

3. 功能说明

输入功能：
- 用户可以输入身高（厘米）和体重（公斤）
计算功能：
- 点击"计算尺码"按钮后，根据身高和体重计算推荐尺码
- 基本的尺码计算逻辑：
  - XS: 身高<155cm 或体重<45kg
  - S: 155-165cm & 45-55kg
  - M: 165-175cm & 55-65kg
  - L: 175-185cm & 65-75kg
  - XL: 185-195cm & 75-85kg
  - XXL: 195-205cm & 85-95kg
  - XXXL: 超过以上范围
显示结果：
- 显示计算出的推荐尺码
- 提供尺码对照表供用户参考