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

美食点评页面:

  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>
  1. 在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"
      });
    }
  }
};
  1. 在food-review.json中配置页面标题,如下所示:
{
  "navigationBarTitleText": "美食点评"
}
  1. 创建一个星星的空图标和满图标,放在static文件夹下,命名为star-empty.png和star-full.png。

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值