cfc/xiaofat-miniprogram/pages/diet/food-query.vue

<template>
  <view class="query-page">
    <view class="title">食物热量查询</view>
    <view class="search-box">
      <input class="input" v-model="keyword" placeholder="搜索食物（示例功能）" />
      <button class="btn" size="mini" @click="search">搜索</button>
    </view>
    <view class="tip">* 此页为占位页，后续可接入公共食物库 API</view>
    <view class="list" v-if="result.length > 0">
      <view class="item" v-for="(item, idx) in result" :key="idx">
        <text class="name">{{ item.name }}</text>
        <text class="cal">{{ item.cal }} kcal/100g</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      result: []
    }
  },
  methods: {
    search() {
      if (!this.keyword.trim()) return
      this.result = [
        { name: this.keyword.trim(), cal: 100 }
      ]
    }
  }
}
</script>

<style>
.query-page { padding: 30rpx; }
.title { font-size: 36rpx; font-weight: 600; margin-bottom: 30rpx; }
.search-box { display: flex; margin-bottom: 30rpx; }
.input { flex: 1; height: 80rpx; padding: 0 20rpx; background: #fff; border-radius: 40rpx; margin-right: 20rpx; }
.btn { background: #F97316; color: #fff; border-radius: 40rpx; }
.tip { font-size: 24rpx; color: #999; margin-bottom: 30rpx; }
.list { background: #fff; border-radius: 16rpx; }
.item { display: flex; justify-content: space-between; padding: 30rpx; border-bottom: 1rpx solid #f5f5f5; }
.name { font-weight: 600; }
.cal { color: #F97316; }
</style>