让 Deepseek 写一个尺码计算器

发布于:2025-05-27 ⋅ 阅读:(16) ⋅ 点赞:(0)

 

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

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. 功能说明

  1. 输入功能

    • 用户可以输入身高(厘米)和体重(公斤)

  2. 计算功能

    • 点击"计算尺码"按钮后,根据身高和体重计算推荐尺码

    • 基本的尺码计算逻辑:

      • 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: 超过以上范围

  3. 显示结果

    • 显示计算出的推荐尺码

    • 提供尺码对照表供用户参考

4. 扩展建议

  1. 可以根据不同性别设置不同的尺码标准

  2. 可以添加不同服装类型(上衣、裤子等)的尺码计算

  3. 可以增加国际尺码(如US、UK、EU等)的转换

  4. 可以保存用户的历史记录

  5. 可以根据不同品牌调整尺码标准(不同品牌的尺码可能有差异)

这个简单的尺码计算器可以作为基础版本,您可以根据实际需求进一步扩展和完善功能。