Vue.js仿饿了么外卖App--(5)评价列表页实现

最新推荐文章于 2023-01-29 12:50:43 发布
原创 最新推荐文章于 2023-01-29 12:50:43 发布 · 1.3k 阅读 · 14 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一个评价列表组件的实现过程，包括数据获取、布局设计、星星评分和筛选组件的复用。通过Vue和Better-scroll实现了滚动加载和动态展示功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

一、内容介绍

1、内容

本篇文章主要介绍的是评价列表的实现。由于评价列表中包含的内容在前面的学习过程中我们都开发过其中的组件，例如星星组件和评价筛选组件。因此在这一部分我们只需要对组件进行复用，然后稍作改动即可。

2、效果

在这里插入图片描述

二、具体实现

1、数据的获取

在评价列表展示页实现过程中我们要从服务器端获取评价信息，并且评价列表展示页是可以滚动的，因此使用better-scroll

  created () {
     axios.get('/api/ratings').then((response) => {
      response = response.data
      // console.log(response)
      if (response.errno === ERR_OK) {
        this.ratings = response.data
        // console.log(this.ratings)
        this.$nextTick(() => {
          this.scroll = new BScroll(this.$refs.ratings, {
            click: true
          })
        })
      }
    })
  },

2、具体布局

template>
  <div class="ratings" ref="ratings">
    <div class="ratings-content">
      <div class="overview">
        <div class="overview-left">
          <h1 class="score">{{seller.score}}</h1>
          <div class="title">综合评价</div>
          <div class="rank">高于周边商家{{seller.rankRate}}</div>
        </div>
        <div class="overview-right">
          <div class="score-wrapper">
            <span class="title">服务态度</span>
            <Star :size="36" :score="seller.serviceScore" class="star"></Star>
            <span class="score">{{seller.serviceScore}}</span>
          </div>
          <div class="score-wrapper">
            <span class="title">商品评分</span>
            <Star :size="36" :score="seller.foodScore"></Star>
            <span class="score">{{seller.foodScore}}</span>
          </div>
          <div class="delivery-wrapper">
            <span class="title">送达时间</span>
            <span class="time">{{seller.deliveryTime}}分钟</span>
          </div>
        </div>
      </div>
      <Split></Split>
      <RatingSelect
           :select-type="selectType"
           :only-content="onlyContent"
           :ratings="ratings"
           @type-select="typeSelect"
           @content-toggle="conToggle">
      </RatingSelect>
      <div class="ratings-wapper">
        <ul>
          <li
           v-for="(rating, index) in ratings" :key="index"
           class="rating-item"
           v-show="needShow(rating.rateType,rating.text)">
            <div class="avatar">
              <img :src="rating.avatar" width="28" height="28" alt="">
            </div>
            <div class="content">
              <h1 class="name">{{rating.username}}</h1>
              <div class="star-wrapper">
                <Star :score="rating.score" class="star"></Star>
                <span class="time" v-show="rating.deliveryTime">{{rating.deliveryTime}}</span>
              </div>
              <p class="text">{{rating.text}}</p>
              <div class="recommend" v-show="rating.recommend">
                <span class="iconfont icon-dianzan"></span>
                <span class="item" v-for="(item, index) in rating.recommend" :key="index">{{item}}</span>
              </div>
              <div class="time">{{rating.rateTime | formatDate}}</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

3、star组件

<template>
  <div class="star">
    <span
     v-for="(item,index) in item"
      :key="index"
       :class="item"
       class="star-item"></span>
  </div>
</template>

定义总的星星的数量和状态

// 定义总的星星的数量和状态
  const LENGTH = 5
  const CLS_ON = 'on'
  const CLS_OFF = 'off'
  const CLS_HALF = 'half'

通过计算属性根据获取的分数来计算出星星的数量和状态

 computed: {
    item () {
      let result = []
      let score = Math.floor(this.score * 2) / 2
      let hasDecimal = score % 1 !== 0
      let integer = Math.floor(score)
      for (let i = 0; i < integer; i++) {
        result.push(CLS_ON)
      }
      if (hasDecimal) {
        result.push(CLS_HALF)
      }
      while (result.length < LENGTH) {
        result.push(CLS_OFF)
      }
      return result
    }
  }

4、ratingSelect组件

      <RatingSelect
           :select-type="selectType"
           :only-content="onlyContent"
           :ratings="ratings"
           @type-select="typeSelect"
           @content-toggle="conToggle">
      </RatingSelect>

其中的方法和函数跟（4）的实现一样，在这里不详细介绍

 methods: {
    needShow (type, text) {
      // 判断是否要显示内容
      if (this.onlyContent && !text) {
        return false
      }
      // 判断选择的类型
      if (this.selectType === ALL) {
        return true
      } else {
        return (type === this.selectType)
      }
    },
    typeSelect (type) {
      this.selectType = type
      // 由于改变selectType的时候DOM是没有更新的，因此还是需要异步更新
      this.$nextTick(() => {
        this.scroll.refresh()
      })
    },
    // 有无内容展示
    conToggle (onlyContent) {
      this.onlyContent = onlyContent
      this.$nextTick(() => {
        this.scroll.refresh()
      })
    }
  },
  filters: {
    formatDate (time) {
      let date = new Date(time)
      return formatDates(date, 'yyyy-MM-dd hh:mm')
    }
  }

三、源码

ratings.vue

<template>
  <div class="ratings" ref="ratings">
    <div class="ratings-content">
      <div class="overview">
        <div class="overview-left">
          <h1 class="score">{{seller.score}}</h1>
          <div class="title">综合评价</div>
          <div class="rank">高于周边商家{{seller.rankRate}}</div>
        </div>
        <div class="overview-right">
          <div class="score-wrapper">
            <span class="title">服务态度</span>
            <Star :size="36" :score="seller.serviceScore" class="star"></Star>
            <span class="score">{{seller.serviceScore}}</span>
          </div>
          <div class="score-wrapper">
            <span class="title">商品评分</span>
            <Star :size="36" :score="seller.foodScore"></Star>
            <span class="score">{{seller.foodScore}}</span>
          </div>
          <div class="delivery-wrapper">
            <span class="title">送达时间</span>
            <span class="time">{{seller.deliveryTime}}分钟</span>
          </div>
        </div>
      </div>
      <Split></Split>
      <RatingSelect
           :select-type="selectType"
           :only-content="onlyContent"
           :ratings="ratings"
           @type-select="typeSelect"
           @content-toggle="conToggle">
      </RatingSelect>
      <div class="ratings-wapper">
        <ul>
          <li
           v-for="(rating, index) in ratings" :key="index"
           class="rating-item"
           v-show="needShow(rating.rateType,rating.text)">
            <div class="avatar">
              <img :src="rating.avatar" width="28" height="28" alt="">
            </div>
            <div class="content">
              <h1 class="name">{{rating.username}}</h1>
              <div class="star-wrapper">
                <Star :score="rating.score" class="star"></Star>
                <span class="time" v-show="rating.deliveryTime">{{rating.deliveryTime}}</span>
              </div>
              <p class="text">{{rating.text}}</p>
              <div class="recommend" v-show="rating.recommend">
                <span class="iconfont icon-dianzan"></span>
                <span class="item" v-for="(item, index) in rating.recommend" :key="index">{{item}}</span>
              </div>
              <div class="time">{{rating.rateTime | formatDate}}</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import Star from '@/components/Star/star'
import Split from '@/components/split/split'
import RatingSelect from '@/components/ratingSelect/ratingSelect'
import axios from 'axios'
import {formatDates} from '@/common/js/date.js'
const ALL = 2
const ERR_OK = 0
export default {
  props: {
    seller: {
      type: Object
    }
  },
  components: {
    Star,
    Split,
    RatingSelect
  },
  data () {
    return {
      showFlag: false,
      selectType: ALL,
      ratings: [],
      onlyContent: true
    }
  },
  created () {
     axios.get('/api/ratings').then((response) => {
      response = response.data
      // console.log(response)
      if (response.errno === ERR_OK) {
        this.ratings = response.data
        // console.log(this.ratings)
        this.$nextTick(() => {
          this.scroll = new BScroll(this.$refs.ratings, {
            click: true
          })
        })
      }
    })
  },
  methods: {
    needShow (type, text) {
      // 判断是否要显示内容
      if (this.onlyContent && !text) {
        return false
      }
      // 判断选择的类型
      if (this.selectType === ALL) {
        return true
      } else {
        return (type === this.selectType)
      }
    },
    typeSelect (type) {
      this.selectType = type
      // 由于改变selectType的时候DOM是没有更新的，因此还是需要异步更新
      this.$nextTick(() => {
        this.scroll.refresh()
      })
    },
    // 有无内容展示
    conToggle (onlyContent) {
      this.onlyContent = onlyContent
      this.$nextTick(() => {
        this.scroll.refresh()
      })
    }
  },
  filters: {
    formatDate (time) {
      let date = new Date(time)
      return formatDates(date, 'yyyy-MM-dd hh:mm')
    }
  }
}
</script>
<style>
.ratings{
  position: absolute;
  top: 174px;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
}
.ratings .overview{
  display: flex;
  padding: 18px 0;
}
.ratings .overview .overview-left{
  flex: 0 0 137px;
  border-right: 1px solid rgba(7, 17, 27, 0.1);
  text-align: center;
  padding: 6px 0;
}
.ratings .overview .overview-left .score{
  line-height: 28px;
  font-size: 24px;
  color: rgb(255,153,0);
  margin-bottom: 6px;
}
.ratings .overview .overview-left .title{
  font-size: 12px;
  line-height: 12px;
  color: rgb(7, 17, 27);
  margin-bottom: 8px;
}
.ratings .overview .overview-left .rank{
  font-size: 10px;
  line-height: 10px;
  color: rgb(147,153,159);
}
.ratings .overview .overview-right{
  flex: 1;
  padding: 6px 0 6px 24px;
}
.ratings .overview .overview-right .score-wrapper{
  margin-bottom: 8px;
  font-size: 0;
}
.ratings .overview .overview-right .score-wrapper .title{
  display: inline-block;
  vertical-align: top;
  font-size: 12px;
  line-height: 18px;
  color: rgb(7, 17, 27);
}
.ratings .overview .overview-right .score-wrapper .star{
  display: inline-block;
  vertical-align: top;
  margin: 0 12px;
}
.ratings .overview .overview-right .score-wrapper  .score{
  display: inline-block;
  line-height: 18px;
  vertical-align: top;
  font-size: 12px;
  color: rgb(255,153,0);
}
.ratings .overview .overview-right .delivery-wrapper{
  font-size: 0;
}
.ratings .overview .overview-right .delivery-wrapper .title{
  font-size: 12px;
  line-height: 18px;
  color: rgb(7, 17, 27);
}
.ratings .overview .overview-right .delivery-wrapper .time{
  font-size: 12px;
  margin-left: 12px;
  color: rgb(147,153,159);
}
.ratings .ratings-wapper{
  padding: 0 18px;
}
.ratings .ratings-wapper .rating-item{
  display: flex;
  padding: 18px 0;
  border-bottom: 1px solid rgba(7, 17, 27, 0.1);
}
.ratings .ratings-wapper .rating-item .avatar{
  flex: 0 0 28px;
  width: 28px;
  margin-right: 12px;
}
.ratings .ratings-wapper .rating-item .avatar img{
  border-radius: 50%;
}
.ratings .ratings-wapper .rating-item .content{
  position: relative;
  flex: 1;
}
.ratings .ratings-wapper .rating-item .content .name{
  margin-bottom: 4px;
  line-height: 12px;
  font-size: 10px;
  color: rgb(7, 17, 27);
}
.ratings .ratings-wapper .rating-item .content .star-wrapper{
  margin-bottom: 6px;
  font-size: 0;
}
.ratings .ratings-wapper .rating-item .content .star-wrapper .star{
  display: inline-block;
  margin-right: 6px;
  vertical-align: top;
  font-size: 10px;
}
.ratings .ratings-wapper .rating-item .content .star-wrapper .time{
  position: relative;
  display: inline-block;
  vertical-align: top;
  color: rgb(147,153,159);
  font-size: 12px;
  margin-top: 5px;
  line-height: 12px;
}
.ratings .ratings-wapper .rating-item .content .text{
  line-height: 18px;
  color: rgb(7, 17, 27);
  font-size: 12px;
  margin-bottom: 8px;
}
.ratings .ratings-wapper .rating-item .content .recommend{
  line-height: 16px;
  font-size: 0;
}
.ratings .ratings-wapper .rating-item .content .recommend .iconfont,
.ratings .ratings-wapper .rating-item .content .recommend .item{
  display: inline-block;
  margin: 0 8px 4px 0;
  font-size: 9px;
}
.ratings .ratings-wapper .rating-item .content .recommend .iconfont{
  color: rgb(0,160,220);
}
.ratings .ratings-wapper .rating-item .content .recommend .item{
  padding: 0 6px;
  border:  1px solid rgba(7, 17, 27, 0.1);
  border-radius: 1px;
  color: rgb(147,153,159);
  background: #fff;
}
.ratings .ratings-wapper .rating-item .content .time{
  position: absolute;
  top: 0;
  right: 0;
  line-height: 12px;
  font-size: 10px;
  color: rgb(147,153,159);
}
</style>

star.vue

<template>
  <div class="star">
    <span
     v-for="(item,index) in item"
      :key="index"
       :class="item"
       class="star-item"></span>
  </div>
</template>

<script>
// 定义总的星星的数量和状态
  const LENGTH = 5
  const CLS_ON = 'on'
  const CLS_OFF = 'off'
  const CLS_HALF = 'half'
export default {
  props: {
    seller: {
      type: Object
    },
    score: {
      type: Number
    }
  },
  computed: {
    item () {
      let result = []
      let score = Math.floor(this.score * 2) / 2
      let hasDecimal = score % 1 !== 0
      let integer = Math.floor(score)
      for (let i = 0; i < integer; i++) {
        result.push(CLS_ON)
      }
      if (hasDecimal) {
        result.push(CLS_HALF)
      }
      while (result.length < LENGTH) {
        result.push(CLS_OFF)
      }
      return result
    }
  }
}
</script>

<style scoped>
.star{
  font-size: 0;
}
.star .star-item{
  display: inline-block;
  width:15px;
  height: 15px;
  margin-right: 6px;
  background-size: 15px 15px;
  background-repeat: no-repeat;
}
.star .on{
  background-image: url('./star36_on@2x.png');
}
.star .half{
  background-image: url('./star36_half@2x.png');
}
.star .off{
  background-image: url('./star36_off@2x.png');
}
</style>
vue实现评论列表功能
10-16
本文通过实例代码给大家介绍了vue实现评论列表功能，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
vue外卖二十一：商家详情-评价列表-条件过滤显示评价：只显示好评/差评+显示只带内容评价、用getters生成好评数量新状态
*
12-15 725
一、基本数据标识设计shop/ratings/ratings.vue 1）data数据设计 data(){ return{ showText:true, //条件1：只显示带文字的评价 ratingType:2, //条件2：评价显示类型：0满意，1不满意，2全部 } } 2）事件及样式类设计 知识点： 绑定样式可写成：:class="{on:showText}其中on为样式，showText为数据 也可写成：:class="showT
5.goods商品列表页开发
weixin_30367873的博客
08-01 326
goods组件显示的区域是固定的，也没有滚动条，所以是采用绝对布局的，左右分为menu栏和foods栏，左边固定布局，右边自适应布局，采用flex布局。 写CSS样式的时候，尽量用class，少用tag，因为class的查找效率优于tag，尤其是嵌套层级比较多的时候。左边的menu栏有些是一行有些是多行，要做到不管单行还是多行都是垂直是居中，可以用display：table，table布局是...
项目总结：vue.js2.5饿了么APP（6）主要组件实现 - 评价页+商家页部分
Sabrina_cc的博客
06-30 1946
说明：本总结来源于慕课网 @ustbhuangyi老师的课程《Vue.js2.5+cube-ui重构饿了么App》课程，本博客做了项目总结梳理便于回顾，需要学习的伙伴可以移步学习。与君共勉！ 之前章节传送： 项目总结：vue.js2.5饿了么APP（1）概述+项目准备 项目总结：vue.js2.5饿了么APP（2）主要组件实现 - 头部相关组件 项目总结：vue.js2.5饿了么APP（3）主要组件实现 - 购物车相关组件（上） 项目总结：vue.js2.5饿了么APP（4）主要组件实现 ...
饿了么评价页面
m0_69422950的博客
06-27 485
{{ seller.score }} 综合评价 高于周边商家{{
vue-sell：Vue.js高仿饿了么外卖App课程原始码http：//coding.imooc.comclass74.html
02-28
Vue.js高仿饿了么外卖App课程原型，课程地址： ://coding.imooc.com/class/74.html 本原始代码基于GPL协议，仅用于Vue实战项目的学习，不可作为商业用途。 你可以学到什么 我们可以通过一张图来认识一下本课程的知识...
Vue.js 高仿饿了么外卖项目源码
最新发布
10-17
使用vue.js vue是当前最火的MVVM框架，（优点：轻量、简洁、高效、数据驱动、组件化） 本项目做的是：高仿上线外卖APP商家模块 开发过程：需求分析-脚手架工具-数据mock-架构设计-代码编写-自测-编译打包 以线上生产...
Vue.js高仿饿了么外卖App.txt
04-10
第1章 课程导学 ...第5章 项目实战-页面骨架开发 ... 共 12章 项目技术架构 vue-cli（脚手架工具） vue vue-resource vue-router（路由） vue-infinite-scorll stylus webpack（打包工具）
Vue.js 高仿饿了么外卖APP 1.0到2.0版本完美升级
03-09
这是一个高仿饿了么外卖WebApp，现已完成商品预览、商品详情、商家预览、添加购物、查看评论等功能。 部分截图 路由展示 商品分类及添加购物 商品详情及购物车 项目预览 源码地址 点击预览（请尽量使用手机预览...
VUE.js高仿饿了么商城实战项目源码（未打包文件）
11-09
5. **Vue.js组件**：组件是Vue.js的基石，项目中会包含多个自定义组件，如商品列表、购物车、订单详情等。每个组件都封装了特定的功能和视图，可以通过props传递数据，使用事件进行通信。 6. **JavaScript基础**：...
vue项目仿美团点餐、评论、选项卡、
06-23
最近项目需要实现评论功能，此代码实现vue仿美团点餐、评论、选项卡等功能
用jq来实现外卖等评价的样式（五星好评）
06-23
模仿评论的五星好评，比较简单，大家可以下载来多练习练习 1、获得鼠标离开事件 2、鼠标前面数据赋值，后面的数据赋值即可
html+js 实现五星评价
07-12
基于H5以及js实现的五星评价脚本，可兼容PC以及移动设备
【vue评论列表】
m0_67969470的博客
11-06 333
【vue评论列表】
vue外卖二十：商家详情-评价列表：评价列表接口模拟-vuex获取完整数据链流程、滑动better-scroll
*
12-14 338
一、评价列表接口模拟-获取完整数据链流程 1）数据模拟mockjs src/mock/mockServer.js /* 使用mockjs提供mock数据接口 */ import Mock from 'mockjs' import data from './data.json' // 返回goods的接口 Mock.mock('/shop_goods', {code:0, data: data.goods}) // 【1】返回ratings的ajax请求接口，为0表示成功，data.ratings,在da
添加评论功能的简单实现
m0_53602804的博客
01-29 695
评论功能简单实现
【第二十篇】Vue组件专题-评论列表案例
热门推荐
波波烤鸭的博客
07-30 2万+
  前面给大家介绍了Vue的组件功能，本文我们通过一个评论列表的案例来巩固下组件的内容，具体效果如下: Vue组件案例 1.基本页面   我们先来整理下基础的页面如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="view...
ReactJS实现一个简单的评论列表
JavaEdge全是干货的技术号
03-16 1285
class CmtList extends React.Component { constructor() { super(); this.state = { CommentList: [ {id:1, user: 'sss', content: 'java'}, {id:2, user: 'sss', content: 'java'}, {id:3
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值