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

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

相关推荐
文 丰5 小时前
【centos7】部署ollama+deepseek
centos·deepseek
じòぴé南冸じょうげん7 小时前
小程序的project.private.config.json是无依赖文件,那可以删除吗?
前端·小程序·json
2501_916013748 小时前
HTTPS 抓包难点分析,从端口到工具的实战应对
网络协议·http·ios·小程序·https·uni-app·iphone
2501_9159184110 小时前
uni-app 项目 iOS 上架效率优化 从工具选择到流程改进的实战经验
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张10 小时前
如何在不同 iOS 设备上测试和上架 uni-app 应用 实战全流程解析
android·ios·小程序·https·uni-app·iphone·webview
微三云-轩11 小时前
区块链:重构企业数字化的信任核心与创新动力
人工智能·小程序·区块链·生活·我店
阿隆_趣编程13 小时前
为了方便相亲,我用AI写了一款小程序
前端·javascript·微信小程序
文 丰13 小时前
【openEuler 24.03 LTS SP2】真实实验部署ollama0.11.6+deepseekR1:1.5b+open-webUI
centos·deepseek
2501_915918411 天前
iOS 开发全流程实战 基于 uni-app 的 iOS 应用开发、打包、测试与上架流程详解
android·ios·小程序·https·uni-app·iphone·webview
黑马源码库miui520861 天前
JAVA同城打车小程序APP打车顺风车滴滴车跑腿源码微信小程序打车源码
java·微信·微信小程序·小程序·uni-app