【页面案例汇总】微信小程序美食点评页面

美食点评页面：

1. 创建一个uniapp项目并打开pages文件夹。
2. 在pages文件夹中创建一个新页面，命名为food-review。
3. 在food-review文件夹中创建三个文件：food-review.vue、food-review.js、food-review.json。
4. 在food-review.vue中编写页面结构和样式，如下所示：

<template>
  <view class="container">
    <view class="header">
      <text class="title">美食点评</text>
    </view>
    <view class="form">
      <view class="form-item">
        <text class="label">店名：</text>
        <input class="input" type="text" placeholder="请输入店名" v-model="name"/>
      </view>
      <view class="form-item">
        <text class="label">口味评分：</text>
        <view class="stars">
          <image :src="item.icon" v-for="(item, index) in stars" :key="index" @tap="tapStar(index)"/>
        </view>
      </view>
      <view class="form-item">
        <text class="label">环境评分：</text>
        <view class="stars">
          <image :src="item.icon" v-for="(item, index) in stars" :key="index" @tap="tapStar(index)"/>
        </view>
      </view>
      <view class="form-item">
        <text class="label">服务评分：</text>
        <view class="stars">
          <image :src="item.icon" v-for="(item, index) in stars" :key="index" @tap="tapStar(index)"/>
        </view>
      </view>
      <view class="form-item">
        <text class="label">评价内容：</text>
        <textarea class="textarea" placeholder="请输入评价内容" v-model="content"/>
      </view>
      <button class="submit-btn" @tap="submitReview">提交</button>
    </view>
  </view>
</template>

<style>
  .container {
    width: 100%;
  }
  .header {
    height: 80rpx;
    background-color: #007aff;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .title {
    font-size: 36rpx;
  }
  .form {
    padding: 40rpx;
  }
  .form-item {
    display: flex;
    align-items: center;
    margin-bottom: 40rpx;
  }
  .label {
    font-size: 30rpx;
    margin-right: 20rpx;
    width: 200rpx;
    text-align: right;
  }
  .input {
    flex: 1;
    border: 1px solid #ccc;
    height: 60rpx;
    padding-left: 20rpx;
    font-size: 28rpx;
  }
  .stars {
    display: flex;
    align-items: center;
  }
  .stars image {
    width: 60rpx;
    height: 60rpx;
    margin-right: 10rpx;
  }
  .textarea {
    width: 100%;
    height: 400rpx;
    border: 1px solid #ccc;
    padding: 20rpx;
    font-size: 28rpx;
    resize: none;
  }
  .submit-btn {
    width: 100%;
    height: 100rpx;
    background-color: #007aff;
    color: #fff;
    font-size: 30rpx;
    border: none;
    border-radius: 10rpx;
    margin-top: 40rpx;
  }
</style>

5. 在food-review.js中添加页面逻辑，如下所示：

export default {
  data() {
    return {
      name: "",
      stars: [
        {
          icon: "/static/star-empty.png",
          activeIcon: "/static/star-full.png",
          active: false
        },
        {
          icon: "/static/star-empty.png",
          activeIcon: "/static/star-full.png",
          active: false
        },
        {
          icon: "/static/star-empty.png",
          activeIcon: "/static/star-full.png",
          active: false
        },
        {
          icon: "/static/star-empty.png",
          activeIcon: "/static/star-full.png",
          active: false
        },
        {
          icon: "/static/star-empty.png",
          activeIcon: "/static/star-full.png",
          active: false
        }
      ],
      content: ""
    };
  },
  methods: {
    tapStar(index) {
      for (let i = 0; i <= index; i++) {
        this.$set(this.stars[i], "active", true);
      }
      for (let i = index + 1; i < this.stars.length; i++) {
        this.$set(this.stars[i], "active", false);
      }
    },
    submitReview() {
      // 将评分和评价内容提交到服务器
      // ...
      // 提交成功后跳转到列表页
      uni.navigateTo({
        url: "/pages/food-review-list/food-review-list"
      });
    }
  }
};

6. 在food-review.json中配置页面标题，如下所示：

{
  "navigationBarTitleText": "美食点评"
}

7. 创建一个星星的空图标和满图标，放在static文件夹下，命名为star-empty.png和star-full.png。

这样就完成了一个简单的美食点评页面了，用户可以在页面上输入店名、评分和评价内容，并提交到服务器。