<template>
<div class="detail" v-show="this.$store.state.isFood">
<div class="top">
<i @click="changeFood" class="iconfont icon-left"></i>
<img :src="foodsDetial.image" alt="" />
<p class="name">{{ foodsDetial.name }}</p>
<p class="sell">
<span>月售{{ foodsDetial.sellCount }}份 </span>
<span>好评率{{ foodsDetial.rating }}% </span>
</p>
<p class="prices">
<span class="price">¥{{ foodsDetial.price }}</span>
<span v-if="foodsDetial.oldPrice" class="oldprice"
>¥{{ foodsDetial.oldPrice }}
</span>
<span v-else-if="null"></span>
<span class="soild"></span>
<span class="add" @click="change">加入购物车</span>
</p>
</div>
<div class="infos">
<h3>商品介绍</h3>
<p class="info">
{{
foodsDetial.info === "" ? "很抱歉,该商品暂无介绍" : foodsDetial.info
}}
</p>
</div>
<div class="rating">
<h3>商品评价</h3>
<!-- <div class="select">
<span>全部 57</span>
<span>满意 47</span>
<span>不满意 10</span>
</div>
<div class="confirm">
<i
class="el-icon-circle-check"
:class="{ changeState }"
@click="changeState = !changeState"
></i>
<p>只看有内容的评价</p>
</div> -->
<RatingSelect
:select-type="selectType"
:only-content="onlyContent"
:ratings="foodsDetial.ratings"
@type-select="typeSelect"
@content-toggle="conToggle"
>
</RatingSelect>
<div class="contents">
<div
class="list"
v-for="(item, index) in foodsDetial.ratings"
:key="index"
>
<p class="date">{{ item.rateTime | dateFormat }}</p>
<span class="name">{{ item.username }} </span>
<img src="@/assets/img/tt.jpg" alt="" />
<div class="in">
<span
class="iconfont icon-zan"
:class="{ changeColor }"
@click="changeColor = !changeColor"
></span>
<span class="info">{{
item.text === "" ? "此用户没有填写评价,系统默认好评" : item.text
}}</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import bus from "@/eventBus.js";
import RatingSelect from "@/components/ratingselect.vue";
const ALL = 2;
const ERR_OK = 0;
export default {
name: "food",
data() {
return {
changeColor: false,
changeState: false,
showFlag: false,
selectType: ALL,
onlyContent: true,
totalMony: 0,
};
},
components: {
RatingSelect,
},
props: ["foodsDetial"],
methods: {
change() {
// this.$emit("updateFood", this.foodsDetial);
this.totalMony += this.foodsDetial.price;
bus.$emit("totalMony", this.totalMony);
},
changeFood() {
this.$store.commit("hideFood");
},
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;
},
conToggle(onlyContent) {
this.onlyContent = onlyContent;
},
},
};
</script>
<style lang="less" scoped >
.detail {
overflow-y: scroll;
background-color: #f3f5f7;
position: fixed;
float: left;
bottom: 50px;
right: 0;
width: 100vw;
height: 100%;
z-index: 60;
padding-top: 50px;
box-sizing: border-box;
}
.top {
background-color: #fff;
border-bottom: 2px solid rgba(15, 16, 18, 0.1);
margin-bottom: 16px;
.iconfont {
position: absolute;
top: 70px;
left: 10px;
font-weight: 700;
color: #fff;
font-size: 30px;
}
img {
width: 100%;
height: 375px;
}
p {
margin-left: 18px;
}
.name {
margin-top: 18px;
font-size: 16px;
font-weight: 700;
}
.sell {
font-size: 14px;
color: rgb(147, 153, 159);
height: 20px;
line-height: 10px;
}
.prices {
position: relative;
font-weight: 900;
margin-bottom: 16px;
span {
margin-right: 20px;
}
.price {
font-size: 16px;
color: rgb(240, 20, 20);
}
.oldprice {
font-size: 16px;
color: rgb(147, 153, 159);
}
.soild {
display: inline-block;
position: absolute;
width: 34px;
height: 1px;
top: 20px;
left: 40px;
background-color: rgb(147, 153, 159);
}
.add {
display: inline-block;
width: 74px;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 12px;
color: #fff;
margin-left: 150px;
border-radius: 12px;
font-weight: 400;
background-color: rgb(0, 160, 220);
}
}
}
.infos {
padding-left: 18px;
padding-right: 18px;
height: 150px;
background-color: #fff;
overflow: hidden;
border-bottom: 2px solid rgba(15, 16, 18, 0.1);
border-top: 2px solid rgba(15, 16, 18, 0.1);
h3 {
font-size: 16px;
margin-top: 18px;
}
.info {
color: rgb(77, 85, 93);
line-height: 24px;
font-size: 12px;
}
}
.rating {
border-top: 2px solid rgba(15, 16, 18, 0.1);
margin-top: 18px;
background-color: #fff;
h3 {
font-size: 16px;
margin-left: 18px;
}
.select {
height: 70px;
border-bottom: 1px solid lightgray;
span {
display: inline-block;
width: 70px;
height: 35px;
margin-top: 15px;
border-radius: 5px;
margin-left: 20px;
text-align: center;
line-height: 35px;
font-weight: 700;
font-size: 14px;
color: #666;
}
span:nth-of-type(1) {
color: #fff;
background-color: deepskyblue;
}
span:nth-of-type(2) {
background-color: rgb(139, 218, 244);
}
span:nth-of-type(3) {
background-color: lightgray;
}
}
.confirm {
display: flex;
align-items: center;
height: 50px;
border-bottom: 1px solid lightgray;
color: gray;
font-weight: 700;
font-size: 14px;
i {
margin-left: 20px;
margin-right: 10px;
font-size: 24px;
}
}
.contents {
height: 240px;
overflow-y: scroll;
.list {
position: relative;
border-bottom: 1px solid lightgray;
overflow: hidden;
height: 70px;
padding-bottom: 20px;
img {
float: right;
width: 30px;
position: absolute;
right: 18px;
top: 5px;
border-radius: 50%;
margin-top: 10px;
margin-right: 7px;
}
.name {
float: right;
right: 60px;
top: 10px;
position: absolute;
font-size: 12px;
}
.time {
position: absolute;
font-size: 12px;
left: 140px;
top: 17px;
color: rgb(147, 153, 159);
}
.in {
font-size: 14px;
bottom: 10px;
position: absolute;
font-weight: 700;
left: 18px;
.iconfont {
margin-right: 5px;
}
}
.date {
position: absolute;
left: 18px;
top: 10px;
font-size: 12px;
color: rgb(147, 153, 159);
}
}
}
}
.changeColor {
color: deepskyblue;
}
.changeState {
color: gold;
font-weight: 700;
}
</style>