前言：接着上一篇项目总结，这一篇是学习过程记录的最后一篇，这里会梳理：评论组件、商家组件、优化、打包、相关资料链接。项目github地址：https://github.com/66Web/ljq_eleme，欢迎Star。
 |
 |
| ratings | seller |
| 一、评论组件-ratings |
评论组件主要分为三块
- 评分信息-overview
- 评论选择-ratingselect
- 评论详细信息
评分信息部分
- 左侧评分
- 布局Dom
<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> </div> <split></split> -
CSS样式
View Code.overview display flex padding 18px 0 18px 18px .overview-left padding-bottom 6px 0 flex 0 0 137px width 137px // 防止出现兼容性问题 border-right 1px solid rgba(7,17,27,0.1) text-align center @media only screen and (max-width 320px) flex 0 0 110px width 110px .score margin-bottom 6px line-height 28px font-size 24px color rgb(255, 153, 0) .title margin-bottom 8px line-height 12px font-size 12px color rgb(7, 17, 27) .rank line-height 10px font-size 10px color rgb(147, 153, 159) .overview-right flex 1 padding 6px 0 6px 24px - seller数据：App.vue中的routerview进行传递，在rating组件中使用props进行接收，这样才可以在模板中直接使用seller.XXX数据
props: { seller: { type: Object } }
- 右侧star组件+商品评分+送达时间
- 布局Dom
<div class="overview"> <div class="overview-left"> ... </div> <div class="overview-right"> <div class="score-wrapper"> <span class="title">服务态度</span> <star :size="36" :score="seller.serviceScore"></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="delivery">{{seller.deliveryTime}}分钟</span> </div> </div> </div> -
CSS样式：
View Code.overview-right flex 1 padding 6px 0 6px 24px @media only screen and (max-width 320px) padding-left 6px .score-wrapper line-height 18px margin-top 8px font-size 0 .title display inline-block vertical-align top line-height 18px font-size 12px color rgb(7, 17, 27) .star display inline-block vertical-align top margin 0 12px .score display inline-block vertical-align top line-height 18px font-size 12px color rgb(255, 153, 0) .delivery-wrapper font-size 0 .title //span文字和文字之间默认是垂直居中的，可以不用加display vertical-align display inline-block vertical-align top line-height 18px font-size 12px color rgb(7, 17, 27) .delivery display inline-block margin-left 12px vertical-align top line-height 18px font-size 12px color rgb(147, 153, 159) -
坑：视口宽度不够宽时，右侧部分过长会出现折行。解决：添加一个mediea Query媒体查询
.overview-left padding-bottom: 6px 0 flex: 0 0 137px 137px // 防止出现兼容性问题 border-right: 1px solid rgba(7,17,27,0.1) text-align: center @media only screen and (max-width 320px) flex: 0 0 110px 110px .overview-right flex 1 padding: 6px 0 6px 24px @media only screen and (max-width 320px) padding-left: 6px
- 页面很长，需要引用better-scroll
- 同时，已经做好的分割区split组件、星星star组件、评论选择ratingselect组件、时间戳转换等也都需要引用
import star from '@/components/star/star' import BScroll from 'better-scroll'; import split from '@/components/split/split' import ratingselect from '@/components/ratingselect/ratingselect' import {formatDate} from '@/common/js/date'<template> <div class="ratings" ref="ratings"> <!-- ratings-content大于ratings的时候出现滚动 --> <div class="ratings-content"> -
要实现滚动，像good组件一样，需要固定视口的高度，将其定位绝对定位，top为header组件的高度
.ratings position: absolute top: 174px bottom: 0 left: 0 100% overflow: hidden
评论选择部分
- 使用引用并注册好的split组件和ratingselect组件
<split></split> <ratingselect @increment="incrementTotal" :select-type="selectType" :only-content="onlyContent" :ratings="ratings"> </ratingselect>
- data中添加ratingselect组件中需要维护的值
data () { return { ratings: [], showFlag: false, selectType: ALL, onlyContent: true }; }注意：此时模板中的ratings是所有商品的ratings（针对一个商家），不是food.vue中对某一种食品的评价——food.ratings
- 点击切换评价列表，和商品详情页类似，可参考【饿了么】—— Vue2.0高仿饿了么核心模块&移动端Web App项目爬坑（二）
评论详细信息
- 同商品组件，在created()函数中拿到ratings的API数据,将得到的ratings传到ratings的组件中
const ERR_OK = 0; created () { this.$http.get('/api/ratings') .then((res) => { res = res.body; if (res.errno === ERR_OK) { this.ratings = res.data; // console.log(this.ratings) this.$nextTick(() => { this.scroll = new BScroll(this.$refs.ratings, { click: true }) }); } } ) -
拿到数据之后在raring组件中填充html中的DOM数据
View Code<div class="rating-wrapper"> <ul> <li v-for="rating in ratings" :key="rating.id" class="rating-item" v-show="needShow(rating.rateType, rating.text)"> <div class="avatar"> <img :src="rating.avatar" width="28px" height="28px"> </div> <div class="content"> <h1 class="name">{{rating.username}}</h1> <div class="star-wrapper"> <star :size="24" :score="rating.score"></star> <span class="delivery" v-show="rating.deliveryTime"> {{rating.deliveryTime}} </span> </div> <p class="text">{{rating.text}}</p> <div class="recommend" v-show="rating.recommend && rating.recommend.length"> <!-- 赞或踩和相关推荐 --> <i class="icon-thumb_up"></i> <span class="item" v-for="item in rating.recommend" :key="item.id">{{item}}</span> </div> <div class="time"> {{rating.rateTime | formatDate}} </div> </div> </li> </ul> </div>
-
CSS样式
View Code.rating-wrapper padding 0 18px .rating-item display flex padding 18px 0 border-1px(rgba(1, 17, 27, 0.1)) .avatar flex 0 0 28px width 28px margin-right 12px img border-radius 50% .content position relative flex 1 .name margin-bottom 4px line-height 12px font-weight 700 font-size 10px color rgb(7, 17, 27) .star-wrapper margin-bottom 6px font-size 0 .star display inline-block margin-right 16px vertical-align top .delivery display inline-block vertical-align top font-size 10px line-height 12px color rgb(147, 153, 159) .text line-height 18px color rgb(7, 17, 27) font-size 12px margin-bottom 8px .recommend line-height 16px font-size 0 .icon-thumb_up, .item display inline-block margin 0 8px 4px 0 font-size 9px .icon-thumb_up color rgb(0, 160, 220) .item padding 0 6px border 1px solid rgba(7, 17, 27, 0.1) border-radius 1px color rgb(147, 153, 159) background #fffff .time position absolute top 0 right 0 line-height 12px font-size 10px color rgb(147, 153, 159) -
绑定better-scroll，使评论列表部分可以滚动
- 拿到DOM数据，ref="ratings"，将better-scroll初始化时机写在created函数拿到api数据之后
| 二、商家组件-seller |
基础操作
- 接收传递进来的seller数据
props: { //APP.vue的routerview中已经将seller传进来了，这里只需要接收就好 seller: { type: Object } } -
布局DOM
View Code<div class="overview"> <h1 class="title">{{seller.name}}</h1> <div class="desc border-1px"> <star :size="36" :score="seller.score"></star> <span class="text">({{seller.ratingCount}})</span> <span class="text">月售{{seller.sellCount}}单</span> </div> <ul class="remark"> <li class="block"> <h2>起送价</h2> <div class="content"> <span class="stress">{{seller.minPrice}}</span>元 </div> </li> <li class="block"> <h2>商家配送</h2> <div class="content"> <span class="stress">{{seller.deliveryPrice}}</span>元 </div> </li> <li class="block"> <h2>平均配送时间</h2> <div class="content"> <span class="stress">{{seller.deliveryTime}}</span>元 </div> </li> </ul> <div class="favorite" @click="toggleFavorite($event)"> <i class="icon-favorite" :class="{'active':favorite}"></i> <!-- 对应是否收藏两种样式--> <span>{{favoriteText}}</span> <!-- 有没有选中对应不同的文本，所以这里要绑定一个变量，放到data中 --> </div> </div>
-
CSS样式
View Code.seller position: absolute top: 174px bottom: 0 left: 0 100% overflow: hidden .overview padding: 18px position: relative .title margin-bottom: 8px line-height: 14px color: rgb(7, 17, 27) font-size: 14px .desc padding-bottom: 18px font-size: 0 border-1px(rgba(7, 17, 27, 0.1)) &:before display: none .star display: inline-block vertical-align: top margin-right: 8px .text display: inline-block vertical-align: top margin-right: 12px line-height: 18px // 不能为父元素设置line-heigth，否则组件会被撑高 font-size: 10px color: rgb(77, 85, 93) .remark display: flex padding-top: 18px .block flex: 1 text-align: center border-right: 1px solid rgba(7, 17, 27, 0.1) &:last-child border: none h2 margin-bottom: 4px line-height: 10px font-size: 10px color: rgb(147, 153, 149) .content line-height: 24px font-size: 10px color: rgb(7, 17, 27) .stress font-size: 24px
公告与活动部分
- 先添加一个split组件，再添加内容，同时不要忘记把图片拷贝过来
- 布局DOM
<div class="bulletin"> <h1 class="title">公告与活动</h1> <div class="content-wrapper border-1px"> <p class="content">{{seller.bulletin}}</p> </div> <ul v-if="seller.supports" class="supports"> <li class="support-item border-1px"
v-for="(item,index) in seller.supports"
:key="(item.id,index.id)"> <span class="icon" :class="classMap[seller.supports[index].type]"></span> <span class="text">{{seller.supports[index].description}}</span> </li> </ul> </div> <split></split>其中：图标icon 动态绑定class时，使用classMap，在created()中定义，通过获取索引值一一对应，同header.vue组件中一样
created() { this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']; } - CSS样式
View Code
.bulletin padding: 18px 18px 0 18px .title margin-bottom: 8px line-height: 14px color: rgb(7, 17, 27) font-size: 14px .content-wrapper padding: 0 12px 16px 1px border-1px(rgba(7, 17, 27, 0.1)) .content line-height: 24px font-size: 12px color: rgb(240, 20, 20) .supports .support-item padding: 16px 12px border-1px(rgba(7, 17, 27, 0.1)) font-size 0 &:last-child border-none() .icon display inline-block width 16px height 16px vertical-align top margin-right 6px background-size 16px 16px background-repeat no-repeat &.decrease bg-image('decrease_4') &.discount bg-image('discount_4') &.guarantee bg-image('guarantee_4') &.invoice bg-image('invoice_4') &.special bg-image('special_4') .text display inline-block font-size 12px line-height 16px color rgb(7, 17, 27)
使用BScroll
- 页面很长，需要引用BScroll
- 坑：初始化BScroll语句放在created()中，但是不起作用。
- 原因：seller是异步获取的，但是我们的内容都是靠seller里的数据撑开的，所以一开始内容肯定是小于我我们定义的wrapper的，所以没有被撑开
- 解决：将其放入watch：{} 中可以监测到seller的变化，将初始化语句写成一个方法，在watch中进行调用
methods: { _initScroll() { this.$nextTick(() => { if (!this.scroll) { this.scroll = new BScroll(this.$refs.seller, {click: true}); }else{ this.scroll.refresh(); } }) }watch: { 'seller'() { //观测seller数据的更新，并且执行更新后的操作 this._initScroll(); this._initPics(); } }, created() { this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']; this._initScroll(); this._initPics(); } - 坑：之前的情况是切换之后不能滚动，现在的新问题是一开始（没切换界面之前）就不能滚动了，切换之后就可以滚动了；
-
原因：created()的执行时机要先于watch中的seller，然后我们在执行seller中的initScroll的时候就会发现BScroll已经被初始化了，所以initScroll失效，即使在watch中观察到变化也只能什么都不做
-
解决：一定要为初始化函数_initScroll()和this._initPics()中的nextTick()下的添加if-else语句，对BScroll进行刷新，完成
- 商家实景区块 -- 横向滚动
- 添加图片，设置样式，横向排列
<div class="pics"> <h1 class="title">商家实景</h1> <div class="pic-wrapper" ref="picWrapper"> <ul class="pic-list" ref="picList"> <li class="pic-item" v-for="pic in seller.pics" :key="pic.id"> <img :src="pic" width="120" height="90"> </li> </ul> </div> </div> <split></split>CSS样式：
View Code.pics padding: 18px .title margin-bottom: 12px line-height: 14px color: rgb(7, 17, 27) font-size: 14px .pic-wrapper 100% overflow: hidden white-space: nowrap /*不产生折行*/ .pic-list font-size: 0 .pic-item display: inline-block margin-right: 6px 120px height: 90px &:last-child margin: 0
- 原理： pic-wrapper是固定宽度的视口的大小，当里面的ul超过视口宽度的时候就会出现滚动
- 注意：ul是外层的宽度，并不是真实的li撑开的宽度
- 实现：使用BScroll实现滚动，添加_initPic()方法，并把它添加到watch和create()中
_initPics() { if(this.seller.pics) { let picWidth = 120; let margin = 6; let width = (picWidth + margin)*this.seller.pics.length - margin;//计算ul的宽度 this.$nextTick(() => { this.$refs.picList.style.width = width + 'px';//设置ul宽度，不要忘记单位 if (!this.picScroll) { this.picScroll = new BScroll(this.$refs.picWrapper, { scrollX: true,//表示横向滚动 eventPassthrough:'vertical'//横向滚动图片的时候忽略纵向的滚动 }); }else{ this.scroll.refresh(); } }) } }
收藏商家
- 收藏按钮：设置:active样式（红，白）和字体的变化（收藏和未收藏）
<div class="favorite" @click="toggleFavorite($event)"> <i class="icon-favorite" :class="{'active':favorite}"></i> <!-- 对应是否收藏两种样式--> <span>{{favoriteText}}</span> <!-- 有没有选中对应不同的文本，所以这里要绑定一个变量，放到data中 --> </div> - favorite是一个变量，在data里观测，使用computed定义favoriteText()改变并返回变量
data() { return { // favorite: false, //默认没有被收藏,从localStorge中取读取，不是一个默认值了 favorite: (() => { return loadFromlLocal(this.seller.id, 'favorite', false); })() }; }, computed: { favoriteText() { return this.favorite ? '已收藏' : '收藏'; } } -
CSS样式
View Code.favorite position: absolute right: 11px top: 18px 50px text-align: center .icon-favorite display: block margin-bottom: 4px line-height: 24px font-size: 24px 50px color: #d4d6d9 &.active color: rgb(240,20,20) .text line-height: 10px font-size: 10px color: rgb(77,85,93) -
添加点击事件，methods中定义toggleFavorite()方法
toggleFavorite(event) { if (!event._constructed) { return; } this.favorite = !this.favorite; //这样写取法区分商家id，不同商家的状态一样 //localStorage.favorite = this.favorite; saveToLocal(this.seller.id, 'favorite', this.favorite); }, -
保存收藏状态
- 解析url中商家id数据为Object对象：每一个商家都有一个唯一的id，这个id存在url中，所以创建util.js，封装一个函数，将url解析成对象的模式
/** * 解析url参数 * Created by yi on 2016-12-28. * @return Object {id:12334} */ export function urlParse() { let url = window.location.search; let obj = {}; let reg = /[?&][^?&]+=[^?&]]+/g; let arr = url.match(reg); // ['?id=123454','&a=b'] if (arr) { arr.forEach((item) => { let tempArr = item.substring(1).split('=');// 先分割取到id=123454，之后用=号分开 let key = tempArr[0]; let val = tempArr[1]; obj[key] = val; }); } // return obj; return {id: 123123}; }; - 在App.vue组件中引入urlParse，并在data中获取data，通过扩展对象在data.json文件中存入data
import {urlParse} from './common/js/util.js' data() { return { seller:{ id: (() => { let queryParam = urlParse(); // console.log(queryParam) return queryParam.id; })() } } }, created: function() { this.$http.get('/api/seller?id=' + this.seller.id) .then((res) => { res = res.body; if (res.errno === ERR_OK) { this.seller = res.data; // console.log(this.seller) this.seller = Object.assign({}, this.seller, res.data);//扩展对象 添加其它属性--id } }, (err) => { }) } -
刷新之后，收藏样式就会消失：创建store.js实现数据的存取，专门存取不同商家的id，通过唯一id，将收藏的信息添加到localStorge中
//savaToLocal(this.seller.id, 'favorite', this.favorite);存取 export function saveToLocal(id, key, value) { //存储到localStorge let seller = window.localStorage.__seller__; if (!seller) { //没有seller的时候，初始化，定义一个seller对象，并给他设定一个id seller = {}; seller[id] = {}; // 每个id下都是一个单独的obj } else { seller = JSON.parse(seller); // JSON 字符串转换为对象 if (!seller[id]) { //判断是否有当前这个商家 seller[id] = {}; } } seller[id][key] = value; // 将key和value存到id这个对象的下边 //将一个JavaScript值(对象或者数组)转换为一个 JSON字符串 window.localStorage.__seller__ = JSON.stringify(seller); } //loadFromlLocal(this.seller.id, 'favorite', false);读取 export function loadFromlLocal(id, key, def) { //读取，读不到的时候传入一个default变量 let seller = window.localStorage.__seller__; if (!seller) { return def; } seller = JSON.parse(seller)[id]; // 取到这个商家下所有的对象 if (!seller) { return def; } let ret = seller[key]; return ret || def; } -
seller.vue中引入，并在data和toggleFavorite()中使用这两个方法：
import {saveToLocal, loadFromlLocal} from 'common/js/store.js';data() { return { // favorite: false, //默认没有被收藏,从localStorge中取读取，不是一个默认值了 favorite: (() => { return loadFromlLocal(this.seller.id, 'favorite', false); })() }; }toggleFavorite(event) { if (!event._constructed) { return; } this.favorite = !this.favorite; //这样写取法区分商家id，不同商家的状态一样 //localStorage.favorite = this.favorite; saveToLocal(this.seller.id, 'favorite', this.favorite); },
| 三、优化&打包 |
优化
- 问题：切换界面时会闪现
- 原因：界面被重新渲染了，生命周期函数被重新执行了一遍
- 优化：切换组件的时候，组件之前的状态也能被保留
- 解决：vue中提供 vue-router切换组件保留的功能内置组件<keepalive>，在App.vue中更改为
<keep-alive> <router-view :seller="seller"></router-view> </keep-alive>
打包
- vue-cli 项目打包构建的结果就是根目录下会多出一个dist文件夹：存储编译后的文件
npm run build
| 四、相关资料链接 |
Vue.js官网：https://vuejs.org.cn/
Vue-cli: https://github.com/vuejs/vue-cli
Vue-resource: https://github.com/vuejs/vue-resource
Vue-router: https://github.com/vuejs/vue-router
better-scroll: http://npm.taobao.org/package/better-scroll
webpack官网：https://www.webpackjs.com/
Stylus中文文档：https://www.zhangxinxu.com/jq/stylus/
es6入门学习：http://es6.ruanyifeng.com/
eslint规则：http://eslint.org/docs/rules/
设备像素比：https://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/
Flex布局：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
贝塞尔曲线测试：http://cubic-bezier.com/#.17,.67,.83,.67
注：项目来自慕课网