vue 餓了麼學習筆記
阿新 • • 發佈:2019-01-25
詳情頁主要程式碼
<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學習,否則不予通過哦