饿了么食品页

 

<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>