让 Deepseek 写一个尺码计算器

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

1. 项目结构

size-calculator/

├── pages/

│ ├── index/

│ │ ├── index.js

│ │ ├── index.json

│ │ ├── index.wxml

│ │ └── index.wxss

├── app.js

├── app.json

├── app.wxss

2. 代码实现

app.json (全局配置)

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

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

html 复制代码
<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 (页面样式)

css 复制代码
.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 (页面逻辑)

javascript 复制代码
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. 可以根据不同品牌调整尺码标准(不同品牌的尺码可能有差异)

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

相关推荐
AI导出鸭PC端1 小时前
文心怎样生成word文档?一键智能排版,AI导出鸭解决格式错乱痛点
人工智能·ai·word·豆包·deepseek·ai导出鸭
oushaojun21 小时前
vscode中支持deepseek ai辅助编程
vscode·copilot·deepseek
微擎应用1 小时前
小程序抽奖工具
小程序
飞哥数智坊1 小时前
我给 DeepSeek 看了两次截图,才发现 Vision 真正的价值
人工智能·ai编程·deepseek
PHP实战开发录3 小时前
微信小程序多环境配置混用排查记录
微信小程序·php·开发·接口隔离原则
Ai-_Man6 小时前
希望大家能推荐一款软件,可以直接把文心生成的代码变流程图,提高办公效率
人工智能·ai·小程序·流程图
Chengbei1111 小时前
DSH渗透测试插件dsh-pentest全新升级!适配DeepSeek Harness,可视化探索链路,一键搭建轻量化AI渗透测试环境。
人工智能·web安全·网络安全·微信·小程序·系统安全·安全架构
ss27312 小时前
小鲸鱼长眼睛了!DeepSeek Harness v0.1.1-rc.1 正式上线,多模态视觉模型来了
deepseek·deepseekharness
2601_9499506315 小时前
用练题簿小程序把课件做成可以在线刷题的内容
小程序·练习·小程序推荐