Vue ( 五 ) food 组件开发

一、父组件调用子组件的方法

思路：用户点击商品时商品详情页出现，所以需要 父组件中点击商品时调用子组件一个方法来控制 商品详情页的 显示 隐藏。

<template>
<div class="food" v-show="foodtoShow">
</div>
</template>

<script>
export default{
props: {
selcurfood: { //  用户选择的商品
type: Object
}
},
data(){
return {
foodtoShow :false //  定义商品详情页的初始状态   开始 隐藏
}
},
methods:{
foodinforshow(){   //  待父组件 触发了点击事件，调用 foodinforshow 方法，显示商品详情页
this.foodtoShow = true
}
}

}
</script>

<li @click='selectFood(food,$event)' v-for="food in item.foods" class="food-item">...

<food :selcurfood='selectedfoods' ref="food"></food>

data (){
return {
goods: [],//  goods json  数组
listHeight: [],// 存放 foods 内部的每一块的高度
scrollY:0,
selectedfoods:{} // 接收用户点击的商品
}
},

selectFood(food,event){
if (!event._constructed) {// 阻止浏览器的原生 click 事件
return;
}
this.selectedfoods=food// 传入用户选择的商品，存在selectedfoods 对象里
this.$refs.food.foodinforshow() //利用 ref 属性 来调用 子组件的方法
}

二、实现详情页内容的滚动

<template>
<transition name="move">
<!-- v-show 控制显示详情页 ref 实现dom 绑定-->
<div class="food" v-show="foodtoShow" ref='foodDetail'>
</div>
</transition>
</template>

import BScroll from 'better-scroll';
export default {
props: {
selcurfood: { //  用户选择的商品
type: Object
}
},
data(){
return {
foodtoShow :false, //  定义商品详情页的初始状态   开始 隐藏
}
},
methods: {
show(){
this.showFlag = true;
this.$nextTick( () => { //  接口   保证dom 渲染完毕    异步添加滚动绑定
if(!this.scroll){
this.scroll=new BScroll(this.$refs.foodDetail,{
click:true
})
}else{
this.scroll.refresh()
}
})
},
foodtoHide(){ // 点击返回 图标   商品详情消失
this.foodtoShow = false
},
}

<div class="food" v-show="foodtoShow" ref='foodDetail'>
<div class="foodcontent">
<div class="image-header">
<img :src="selcurfood.image" alt="" />
<div class="back" @click="foodtoHide">
<i class="icon-arrow_lift"></i>
</div>
</div>
<div class="content">
<h1 class="title">{{selcurfood.name}}</h1>
<div class="detail">
<span class="sell-count">月售{{selcurfood.sellCount}}</span>
<span class="rating">好评率{{selcurfood.rating}}</span>
</div>
<div class="price">
<span class="newPrice">￥{{selcurfood.price}}</span>
<span  class="oldPrice"v-show='selcurfood.oldPrice'>￥{{selcurfood.oldPrice}}</span>
</div>
<!--引入cartcontrol组件,并且用一个div包裹他-->
<div class="cartcontrol-wrapper">
<cart-control :foodsele='selcurfood' @add="addFood"></cart-control>
</div>
<transition name='fade'>
<!--使用.stop.prevent阻止冒泡和默认事件,避免穿透-->
<div class="buy" v-show="!selcurfood.count || selcurfood.count===0" @click.stop.prevent="ballshow">
加入购物车
</div>
</transition>
</div>
<split-line v-show="selcurfood.info"></split-line>
<div class="info" v-show="selcurfood.info">
<h1 class="title">商品信息</h1>
<p class="text">{{selcurfood.info}}</p>
</div>
<split-line ></split-line>
<div class="rating">
<h1 class="title">商品评价</h1>
<ratingselect
:selectType="selectType"
:onlyContent="onlyContent" :desc="desc"
:ratings="selcurfood.ratings" >

</ratingselect>
</div>
</div>
</div>

三、购物车按钮问题

<transition name='fade'>
<!--使用.stop.prevent阻止冒泡和默认事件,避免穿透-->
<div class="buy" v-show="!selcurfood.count || selcurfood.count===0" @click.stop.prevent="ballshow">
加入购物车
</div>
</transition>

<!--引入cartcontrol组件,并且用一个div包裹他-->
<div class="cartcontrol-wrapper">
<cart-control :foodsele='selcurfood' @add="addFood"></cart-control>
</div>

ballshow(event){ //  点击加入购物车按钮,传入事件，小球出现
if (!event._constructed) {// pc 点击    因为购物车按钮在bscroll里面,所以需要处理掉bscroll的事件类型
return;
}
// 抛物线小球动画
this.$emit('add', event.target); //触发当前实例food上的事件add(在goods组件上绑定在food组件的add方法)
Vue.set(this.selcurfood, 'count', 1);
},
addFood(target) { //跟add关联的addFood方法
this.$emit('add', event.target); // 触发当前实例food上的事件add(在goods组件上绑定在food组件的add方法)
}

四、商品评价

(1) 评价类型选择

<ratingselect
:selectType="usrseleType"
:onlyContent="isonlyContent"
:curdesc="foodDesc"
:ratings="selcurfood.ratings"
@usrselect='usrseleRating'
@toggleSwitch='toggleContent' >
</ratingselect>

data(){
return {
foodtoShow :false,   //  定义商品详情页的初始状态   开始 隐藏
usrseleType: ALL,    //  默认类型
isonlyContent: true, //  是否只看有内容的评价 默认 不看
foodDesc: {          //  类型  对象
all: '全部',
positive: '推荐',
negative: '吐槽'
}
}
}

usrseleRating (type){ // 子组件 传过来的事件
this.usrseleType = type
this.$nextTick(() => { // 每更改一次类型，dom 异步刷新一次
this.scroll.refresh();
});
},
toggleContent(){ //  切换显示是否有内容的评价
this.isonlyContent=!this.isonlyContent
this.$nextTick(() => { //切换的时候需要重新刷新bscroll
this.scroll.refresh();
});
},
needShow(type,txt) {
if (this.isonlyContent && !txt) { // //只显示有内容的 并且 没有内容就返回false
return false;
}
if (this.usrseleType === ALL) { //显示全部类型的评价
return true;
} else { // 显示对应的类型的评价
return type === this.usrseleType;
}
}

(2) 评价时间转换

<div class="time">{{rating.time | formatDate}}</div>

filters: {
formatDate(time) {
let date = new Date(time);
//调用curTime模块的formatDate函数来解析时间
return formatDate(date, 'yyyy-MM-dd hh:mm');
}
}

//在es6下,export 函数function的导入需要这样写
import { formatDate } from '../../common/js/date'; //导入自定义的date模块

export function formatDate(date, fmt) { //在es6下导出一个函数
//对一个或多个y进行匹配,匹配到就进行年的替换(年有四位,所以需要特殊处理)
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
}
let o = {
'M+': date.getMonth() + 1, //js的月是从0开始算,所以要加1
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()
};
//对月,日,时,分,秒进行匹配替换(这些都是两位,可以一起处理)
for (let k in o) {
if (new RegExp(`(${k})`).test(fmt)) { //匹配到key例如MM
let str = o[k] + ''; //然后o['MM'] 就是date.getMonth() + 1

//如果匹配到的时间是1位数,例如是M,那么就直接使用date.getMonth() + 1的值,
//如果是两位数,那么就在前面补0,使用padLeftZero函数
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
}
}
return fmt;
};

//先加两个0,然后再根据长度截取(因为最长也就2个0的长度)
function padLeftZero(str) {
return ('00' + str).substr(str.length);
}

food组件到此差不多了。