vue 饿了么学习笔记
程序员文章站
2023-12-31 18:58:04
...
详情页主要代码
<template>
<transition name="move">
<div v-show="showFlag" class="food" ref="food">
<div class="food-content">
<div class="image-header">
<img :src="food.image">
<div class="back">
<i class="icon-arrow_lift" @click="hide"></i>
</div>
</div>
<div class="content">
<h1 class="title">{{food.name}}</h1>
<div class="detail">
<span class="sell-count">月售{{food.sellCount}}份</span>
<span class="rating">好评率{{food.rating}}%</span>
</div>
<div class="price">
<span class="now">¥{{food.price}}</span><span class="old" v-show="food.oldPrice">¥{{food.oldPrice}}</span>
</div>
<div class="cartcontrol-wrapper">
<cartcontrol :food="food"></cartcontrol>
</div>
<transition name="fade">
<div class="buy" @click.stop.prevent="addFirst" v-show="!food.count || food.count === 0">加入购物车</div>
</transition>
</div>
<split v-show="food.info"></split>
<div class="info" v-show="food.info">
<h1 class="title">商品信息</h1>
<p class="text">{{food.info}}</p>
</div>
<split></split>
<div class="ratings">
<h1 class="title">商品评价</h1>
<ratingselect @changeselect="selectChange" :only-content="onlyContent" :desc="desc" :ratings="food.ratings"></ratingselect>
<div class="rating-wrapper">
<ul v-show="food.ratings &&food.ratings.length">
<li class="rating-item" v-show="needShow(rating.rateType,rating.text)" v-for="rating in food.ratings">
<div class="user">
<span class="name">{{rating.username}}</span>
<img class="avatar" width="12" height="12" :src="rating.avatar">
</div>
<div class="time">{{rating.rateTime | formatDate}}</div>
<p class="text">
<span :class="{'icon-thumb_up': rating.rateType === 0, 'icon-thumb_down':rating.rateType === 1}"></span>{{rating.text}}
</p>
</li>
</ul>
<div class="no-rating" v-show="!food.ratings || !food.ratings.length">暂无评价</div>
</div>
</div>
</div>
</div>
</transition>
</template>
<script>
import BScroll from 'better-scroll'
import {formatDate} from '../../common/js/common'
import Vue from 'vue'
import cartcontrol from 'components/cartcontrol/cartcontrol'
import split from 'components/split/split'
import ratingselect from 'components/ratingselect/ratingselect'
/* const POSITIVE = 0
const NEGATIVE = 1 */
const ALL = 2
export default {
props: {
food: {
type: Object
}
},
data () {
return {
showFlag: false,
selectType: ALL,
onlyContent: true,
desc: {
all: '全部',
positive: '推荐',
negative: '吐槽'
}
}
},
computed: {
},
methods: {
show: function () {
this.showFlag = true
this.selectType = ALL
this.onlyContent = true
this.$nextTick(() => {
if (!this.scroll) {
this.scroll = new BScroll(this.$refs.food, {
click: true
})
} else {
this.scroll.refresh()
}
})
},
hide: function () {
this.showFlag = false
},
addFirst: function (event) {
if (event._contructed) {
return
}
Vue.set(this.food, 'count', 1)
},
needShow: function (type, text) {
if (this.onlyContent && !text) {
return false
}
if (this.selectType === ALL) {
return true
} else {
return type === this.selectType
}
},
selectChange: function (type, data) {
this[type] = data
this.$nextTick(() => {
this.scroll.refresh()
})
}
},
filters: {
formatDate: function (time) {
let date = new Date(time)
return formatDate(date, 'yyyy-MM-dd hh:mm')
}
},
components: {
cartcontrol,
split,
ratingselect
}
}
</script>
想交流更多学习课程信息,请加qq,要备注vue学习,否则不予通过哦