vue从创建到完整的饿了么（14）shop.vue

头像
你的前端
    阅读 46 分钟
    5

    说明

    1.上一章--饿了么loading图、
    2.苍渡大神源码--项目源码地址
    3.UI框架--Mint UI
    4.数据接口--接口API
    5.下一章--组件动画

    开始

    1.UI图如下
    图片描述

    2.shop.vue页面代码修改如下

    <template>
  <div id="shop" class="bgfff">
        <div class="topbg">
                <img class="topbgimg" :src="imgpath+shopinfo.image_path">
        </div>
        <div class="shoptop">
            <div class="toptop ih30">
              <icon class="backicon" name="back"></icon>
              <span class="right">
                  <icon class="backicon2" name="cart"></icon>
                  <icon class="backicon2" name="more"></icon> 
              </span>
            </div>
            <div class="topfoot">
                <div class="topleft">
                    <img src="">
                </div>
                <div class="topright nowarp">
                    <div class="foota">
                        <div class="footamain fs1-2 nowarp">超出回音长么哈哈哈哈哈音长么</div>
                        <icon name="right" class=" icon3"></icon>
                    </div>
                    <div class="footb nowarp">
                        <div class="nowarp">公告:这是一条公司拟水电费可死定了房价酸辣粉机</div>
                    </div>
                    <div class="footc">
                        <span class="footcmain"><span>蜂鸟专送</span>•<span>约31分钟</span></span>
                    </div>
                </div>
            </div>
        </div>

        <div class="shopmid mgtop10">
            <div class="midtop"><span class="te">特</span><span>16元特价秒杀</span><span class="right">3个活动 <icon name="down" class="icon4"></icon></span></div>
            <div class="mytab">
                <div class="on">商品</div>
                <div>评价4.8分</div>
            </div>
        </div>

    <div class="shopmain">
        <div class="mianleft">
            <div class="leftdiv on">
                <div >
                    <icon class="icon5" name="hot"></icon>
                    <span>热销</span>
                </div>
            </div>
            <div class="leftdiv">
              <div>
                 <icon class="icon5" name="discount"></icon>
                  <span>优惠</span>
              </div>
            </div>
            <div class="leftdiv">
              <div> 
                <span>很长的蔡明</span>
              </div>  
            </div>
            <div class="leftdiv">
              <div>
                <span>段蔡明</span>
              </div>
            </div>
             <div class="leftdiv">
              <div>
                <span>菜名</span>
              </div>
            </div>
             <div class="leftdiv">
               <div>
                <span>菜名</span>
              </div>
            </div>
             <div class="leftdiv">
              <div>
                <span>菜名</span>
              </div>
            </div>
        </div>
        <div class="mainright">
            <div class="item">
                <div class="itemtop ih30 after">
                    <span class="fs15">热销</span>
                    <span class="fs0-8 col9f">大家都爱吃才是真的好吃</span>
                </div>
                <div class="itemmain">
                    <div class="iteminfo after">
                        <div class="infoimgbox">
                            <img src="">
                        </div>
                        <div class="inforight">
                            <div class="fs15 ih20">宫保鸡丁</div>
                            <div class="ih15 col9f"><span class="fs10 mgl">月售857份</span><span class="fs10 mgl">好评率97%</span></div>
                            <div class="ih15"><span class="fs10 mgl"><span class="zk">7折</span><span class="yh">每单限1份优惠</span></span></div>
                            <div class="ih20"><span class="colred fs12">￥</span><span class="colred mgr5">25</span><span class="fs12 col9f midline">￥56</span><icon name="add" class="addicon right" ></icon></div>
                        </div>
                    </div>
                    <div class="iteminfo after">
                        <div class="infoimgbox">
                            <img src="">
                        </div>
                        <div class="inforight">
                            <div class="fs15 ih20">宫保鸡丁</div>
                            <div class="ih15 col9f"><span class="fs10 mgl">月售857份</span><span class="fs10 mgl">好评率97%</span></div>
                            <div class="ih15"><span class="fs10 mgl"><span class="zk">7折</span><span class="yh">每单限1份优惠</span></span></div>
                            <div class="ih20"><span class="colred fs12">￥</span><span class="colred mgr5">25</span><span class="fs12 col9f midline">￥56</span><icon name="add" class="addicon right" ></icon></div>
                        </div>
                    </div>
                    <div class="iteminfo after">
                        <div class="infoimgbox">
                            <img src="">
                        </div>
                        <div class="inforight">
                            <div class="fs15 ih20">宫保鸡丁</div>
                            <div class="ih15 col9f"><span class="fs10 mgl">月售857份</span><span class="fs10 mgl">好评率97%</span></div>
                            <div class="ih15"><span class="fs10 mgl"><span class="zk">7折</span><span class="yh">每单限1份优惠</span></span></div>
                            <div class="ih20"><span class="colred fs12">￥</span><span class="colred mgr5">25</span><span class="fs12 col9f midline">￥56</span><icon name="add" class="addicon right" ></icon></div>
                        </div>
                    </div>
                    <div class="iteminfo after">
                        <div class="infoimgbox">
                            <img src="">
                        </div>
                        <div class="inforight">
                            <div class="fs15 ih20">宫保鸡丁</div>
                            <div class="ih15 col9f"><span class="fs10 mgl">月售857份</span><span class="fs10 mgl">好评率97%</span></div>
                            <div class="ih15"><span class="fs10 mgl"><span class="zk">7折</span><span class="yh">每单限1份优惠</span></span></div>
                            <div class="ih20"><span class="colred fs12">￥</span><span class="colred mgr5">25</span><span class="fs12 col9f midline">￥56</span><icon name="add" class="addicon right" ></icon></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="foot">
      <div class="footleft">
          <div class="footlogo"><icon name="footcar" class="footicon"></icon></div>
          <div class="footmain">未选购商品</div>
      </div>
      <div class="footright">
          ￥20起送
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      
    }
  },
  components:{
  //注册组件

  },
  mounted:function(){
  //生命周期
    
  },
  computed:{
  //计算属性

  },
  methods:{
  //函数

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.shoptop{
  height:120px;
  background-color: rgba(119,103,137,.43);
  box-sizing:border-box;
  padding:10px 10px 0px 10px;
  position: relative;
}
.topbg{
  position: absolute;
  width:100%;
  height:120px;
  left:0px;
  right:0px;
  overflow:hidden;
}
.topbgimg{
  width:100%;
  filter: blur(10px);
}
.backicon{
  height:30px;
  width:30px;
}
.backicon2{
  height:25px;
  width:25px;
}
.toptop{
  margin-bottom:10px;
}
.topfoot{
  height:70px;
  display:flex;
}
.topleft{
  height:80px;
  width:80px;
  background-color:#3c3c3c;
  margin-right:10px;
  border-radius:3px;
  box-shadow:0 0 5px #3c3c3c;  
}
.topleft>img{
  max-width:100%;
  max-height:100%;
}
.topright,.topleft{
  float:left;
}
.topright{
  height:100%;
  flex:1;
}
.foota{
  height:30px;
  color:white;
  line-height:30px;
  display:flex;
}
.icon3{
  width:20px;
  height:20px;
  margin-top:5px;
}
.footc{
  height:20px;
  line-height:20px;
  font-size:12px;
}
.footb{
  font-size:12px;
  color:white;
}
.footcmain{
  background-color:#0097FF;
  color:white;
  padding:0px 5px; 
}
.shopmid{
  padding:10px 10px 0px 10px;
  margin-bottom:10px;
  border-bottom:2px solid #F8F8F8;
}
.midtop{
  font-size:12px;
}
.te{
  background-color:#F08449;
  padding:0px 1px;
  color:white;
}
.mytab{
  overflow:hidden;
  margin-top:10px;
}
.mytab>div{
  float:left;
  padding-bottom:10px;
  margin-right:10px;
  border-bottom:2px solid white;
}
.mytab>div.on{
  color:#0B89FF;
  border-color:#0B89FF;
}
.leftdiv{
  width:60px;
  padding:0px 10px;
  color:#727272;
  background-color:#F8F8F8;
}
.leftdiv>div{
  padding:15px 0px;
  border-bottom:1px solid #F1F1F1;
}
.leftdiv.on{
  background-color:white;
  color:#080808;
}
.leftdiv.on>div{
  border:0px;
}
.icon5{
  width:15px;
  height:15px;
}
.mianleft{
  width:80px;
  box-sizing:border-box;
  overflow:scroll;
}
#shop{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  height:100vh;
}
.shopmain{
  -webkit-box-flex:1;
  display:-webkit-box;
  overflow:hidden;
}
.mainright{
  -webkit-box-flex:1;
  overflow:scroll;
  padding-left:10px;
}
.foot{
  height:50px;
  line-height:50px;
  background-color:#594C46;
  display:flex;
}
.footleft{
  flex:2;
  display:flex;
}
.footright{
  flex:1;
  text-align:center;
  color:#B7B7B7;
  background-color:#61686A;
}
.footlogo{
  text-align:center;
  width:50px;
  height:50px;
  border-radius:50%;
  background-color:#515151;
  margin:0px 10px;
  border:3px solid #444446;
  transform:translatey(-15px)
}
.footicon{
  width:40px;
  height:40px;
  margin-top:7px;
}
.footmain{
  height:50px;
  color:#ADADAD;
  font-size:0.8rem;
}
.itemmain{
  padding-right:10px;
 
}
.iteminfo{
   height:70px;
   display:flex;
   padding:10px 0px;
}
.infoimgbox{
  width:70px;
  height:70px;
  margin-right:5px;
  background-color:red;
}
.infoimgbox>img{
  width:100%;
  height:100%;
}
.inforight{
  flex:1;
}
.ih20{
  height:20px;
  line-height:20px;
}
.ih15{
  height:15px;
  line-height:15px;
}
.addicon{
  width:20px;
  height:20px;
}
.zk{
  background-color:#FF5F15;
  padding:0px 3px;
  color:white;
  border:1px solid #FF5F15;

}
.yh{
  padding:0px 3px;
  color:#FF5F15;
  border:1px solid #FF5F15;
}
</style>

    3.页面如下
    图片描述

    4.请求数据
    先请求一个固定餐馆的数据，参数写死，api如下
    图片描述
    4.1在data中命名变量shopinfo来存放餐馆信息
    4.2在mounted中写餐馆数据的请求

     mounted:function(){
  //生命周期
      //餐馆详情
      this.$http.get('http://cangdu.org:8001/shopping/restaurant/1').then(response => {
        console.log(response);
        this.shopinfo=response.body;
      }, response => {
        console.log(response);
      });
  },

    结果如下
    图片描述

    ok！数据请求成功！

    4.3渲染餐馆数据
    渲染后页面如下
    图片描述

    这里有两个问题
    （1）不能获取配送时间，这个是API没有给，但是在商家列表有配送时间，点击列表进入商家详情时可以传过来，先不 管。
    （2）图片是有域名地址的，API返回图片地址不完全，所以我们先设置一个变量imgpath来存放图片域名，再加上API返回的图片地址就能显示了，data修改如下

    data () {
    return {
      imgpath:'http://cangdu.org:8001/img/',    //商家头像的路径地址path
      shopinfo:""
    }
  },

    html修改如下

    <template>
  <div id="shop" class="bgfff">
        <div class="topbg">
                <img class="topbgimg" :src="imgpath+shopinfo.image_path">
        </div>
        <div class="shoptop">
            <div class="toptop ih30">
              <icon class="backicon" name="back"></icon>
              <span class="right">
                  <icon class="backicon2" name="cart"></icon>
                  <icon class="backicon2" name="more"></icon> 
              </span>
            </div>
            <div class="topfoot">
                <div class="topleft">
                    <img :src="imgpath+shopinfo.image_path">
                </div>
                <div class="topright nowarp">
                    <div class="foota">
                        <div class="footamain fs1-2 nowarp">{{shopinfo.name}}</div>
                        <icon name="right" class=" icon3"></icon>
                    </div>
                    <div class="footb nowarp">
                        <div class="nowarp">公告:{{shopinfo.promotion_info}}</div>
                    </div>
                    <div class="footc">
                        <span class="footcmain"><span v-if="shopinfo.delivery_mode">{{shopinfo.delivery_mode.text}}•</span><span>约{{shopinfo.order_lead_time}}</span></span>
                    </div>
                </div>
            </div>
            
        </div>

        <div class="shopmid mgtop10">
            <div v-if="shopinfo.activities" class="midtop"><span class="te mgr5">{{shopinfo.activities[0].icon_name}}</span><span>{{shopinfo.activities[0].description}}</span><span class="right">{{shopinfo.activities.length}}个活动 <icon name="down" class="icon4"></icon></span></div>
            <div class="mytab">
                <div class="on">商品</div>
                <div>评价{{shopinfo.rating}}分</div>
            </div>
        </div>

    <div class="shopmain">
        <div class="mianleft">
            <div class="leftdiv on">
                <div >
                    <icon class="icon5" name="hot"></icon>
                    <span>热销</span>
                </div>
            </div>
            <div class="leftdiv">
              <div>
                 <icon class="icon5" name="discount"></icon>
                  <span>优惠</span>
              </div>
            </div>
            <div class="leftdiv">
              <div> 
                <span>很长的蔡明</span>
              </div>  
            </div>
            <div class="leftdiv">
              <div>
                <span>段蔡明</span>
              </div>
            </div>
             <div class="leftdiv">
              <div>
                <span>菜名</span>
              </div>
            </div>
             <div class="leftdiv">
               <div>
                <span>菜名</span>
              </div>
            </div>
             <div class="leftdiv">
              <div>
                <span>菜名</span>
              </div>
            </div>
        </div>
        <div class="mainright">
            <div class="item">
                <div class="itemtop ih30 after">
                    <span class="fs15">热销</span>
                    <span class="fs0-8 col9f">大家都爱吃才是真的好吃</span>
                </div>
                <div class="itemmain">
                    <div class="iteminfo after">
                        <div class="infoimgbox">
                            <img src="">
                        </div>
                        <div class="inforight">
                            <div class="fs15 ih20">宫保鸡丁</div>
                            <div class="ih15 col9f"><span class="fs10 mgl">月售857份</span><span class="fs10 mgl">好评率97%</span></div>
                            <div class="ih15"><span class="fs10 mgl"><span class="zk">7折</span><span class="yh">每单限1份优惠</span></span></div>
                            <div class="ih20"><span class="colred fs12">￥</span><span class="colred mgr5">25</span><span class="fs12 col9f midline">￥56</span><icon name="add" class="addicon right" ></icon></div>
                        </div>
                    </div>
                    <div class="iteminfo after">
                        <div class="infoimgbox">
                            <img src="">
                        </div>
                        <div class="inforight">
                            <div class="fs15 ih20">宫保鸡丁</div>
                            <div class="ih15 col9f"><span class="fs10 mgl">月售857份</span><span class="fs10 mgl">好评率97%</span></div>
                            <div class="ih15"><span class="fs10 mgl"><span class="zk">7折</span><span class="yh">每单限1份优惠</span></span></div>
                            <div class="ih20"><span class="colred fs12">￥</span><span class="colred mgr5">25</span><span class="fs12 col9f midline">￥56</span><icon name="add" class="addicon right" ></icon></div>
                        </div>
                    </div>
                    <div class="iteminfo after">
                        <div class="infoimgbox">
                            <img src="">
                        </div>
                        <div class="inforight">
                            <div class="fs15 ih20">宫保鸡丁</div>
                            <div class="ih15 col9f"><span class="fs10 mgl">月售857份</span><span class="fs10 mgl">好评率97%</span></div>
                            <div class="ih15"><span class="fs10 mgl"><span class="zk">7折</span><span class="yh">每单限1份优惠</span></span></div>
                            <div class="ih20"><span class="colred fs12">￥</span><span class="colred mgr5">25</span><span class="fs12 col9f midline">￥56</span><icon name="add" class="addicon right" ></icon></div>
                        </div>
                    </div>
                    <div class="iteminfo after">
                        <div class="infoimgbox">
                            <img src="">
                        </div>
                        <div class="inforight">
                            <div class="fs15 ih20">宫保鸡丁</div>
                            <div class="ih15 col9f"><span class="fs10 mgl">月售857份</span><span class="fs10 mgl">好评率97%</span></div>
                            <div class="ih15"><span class="fs10 mgl"><span class="zk">7折</span><span class="yh">每单限1份优惠</span></span></div>
                            <div class="ih20"><span class="colred fs12">￥</span><span class="colred mgr5">25</span><span class="fs12 col9f midline">￥56</span><icon name="add" class="addicon right" ></icon></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="foot">
      <div class="footleft">
          <div class="footlogo"><icon name="footcar" class="footicon"></icon></div>
          <div class="footmain">未选购商品</div>
      </div>
      <div class="footright">
          ￥20起送
      </div>
    </div>
  </div>
</template>

    4.4请求餐馆的菜品信息，API如下
    图片描述
    在data中设置shopmean来存放食品信息

    data () {
    return {
      imgpath:'http://cangdu.org:8001/img/',    //商家头像的路径地址path
      shopinfo:"",                              //商家信息
      shopmean:""                               //食品信息
    }
  },

    在mounted添加请求

     //食品详情
      this.$http.get('http://cangdu.org:8001/shopping/v2/menu?restaurant_id=1').then(response => {
        console.log(response);
        this.shopmean=response.body;
      }, response => {
        console.log(response);
      });

    结果如下
    图片描述
    请求成功！

    4.5渲染食品页面
    页面如下
    图片描述

    注意
    （1）热销榜和优惠API貌似返回icon图片了，但是我用一直报错，还是用咱们的svg吧，写死就行了。
    （2）多了一个功能就是有的商品可以选择样式。
    （3）灰色的价格与折扣API并没有返回，咱们直接v-if="false"隐藏了就行，万一后面又加了呢

    页面html代码修改如下

    <template>
  <div id="shop" class="bgfff">
        <div class="topbg">
                <img class="topbgimg" :src="imgpath+shopinfo.image_path">
        </div>
        <div class="shoptop">
            <div class="toptop ih30">
              <icon class="backicon" name="back"></icon>
              <span class="right">
                  <icon class="backicon2" name="cart"></icon>
                  <icon class="backicon2" name="more"></icon> 
              </span>
            </div>
            <div class="topfoot">
                <div class="topleft">
                    <img :src="imgpath+shopinfo.image_path">
                </div>
                <div class="topright nowarp">
                    <div class="foota">
                        <div class="footamain fs1-2 nowarp">{{shopinfo.name}}</div>
                        <icon name="right" class=" icon3"></icon>
                    </div>
                    <div class="footb nowarp">
                        <div class="nowarp">公告:{{shopinfo.promotion_info}}</div>
                    </div>
                    <div class="footc">
                        <span class="footcmain"><span v-if="shopinfo.delivery_mode">{{shopinfo.delivery_mode.text}}•</span><span>约{{shopinfo.order_lead_time}}</span></span>
                    </div>
                </div>
            </div>
            
        </div>

        <div class="shopmid mgtop10">
            <div v-if="shopinfo.activities" class="midtop"><span class="te mgr5">{{shopinfo.activities[0].icon_name}}</span><span>{{shopinfo.activities[0].description}}</span><span class="right">{{shopinfo.activities.length}}个活动 <icon name="down" class="icon4"></icon></span></div>
            <div class="mytab">
                <div class="on">商品</div>
                <div>评价{{shopinfo.rating}}分</div>
            </div>
        </div>

    <div class="shopmain">
        <div class="mianleft">
            <div v-for="(item,index) in shopmean" class="leftdiv on">
                <div >
                    <icon v-if="index==0" class="icon5" name="hot"></icon>
                    <icon v-if="index==1" class="icon5" name="discount"></icon>
                    <span class="fs0-8">{{item.name}}</span>
                </div>
            </div>
        </div>
        <div class="mainright">
            <div class="item" v-for="item in shopmean">
                <div class="itemtop ih30 after">
                    <span class="fs15">{{item.name}}</span>
                    <span class="fs0-8 col9f">{{item.description}}</span>
                </div>
                <div class="itemmain">
                    <div v-for="items in item.foods" class="iteminfo after">
                        <div class="infoimgbox">
                            <img :src="imgpath+items.image_path">
                        </div>
                        <div class="inforight">
                            <div class="fs15 ih20">{{items.name}}</div>
                            <div class="ih15 col9f"><span class="fs10 mgl">{{items.tips}}</span></div>
                            <div class="ih15"><span v-if="false" class="fs10 mgl"><span class="zk">7折</span><span class="yh">每单限1份优惠</span></span></div>
                            <div class="ih20">
                              <span class="colred fs12">￥</span>
                              <span class="colred mgr5">{{items.specfoods[0].price}}</span>
                              <span v-if="false" class="fs12 col9f midline">￥56</span>
                              <icon v-if="items.specfoods.length==1" name="add" class="addicon right" ></icon>
                              <span class="fs12 right gz" v-if="items.specfoods.length>1">选规则</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="foot">
      <div class="footleft">
          <div class="footlogo"><icon name="footcar" class="footicon"></icon></div>
          <div class="footmain">未选购商品</div>
      </div>
      <div class="footright">
          ￥20起送
      </div>
    </div>
  </div>
</template>

    商品与评价切换

    咱们商家评价页面还没有写
    1.在data中新建变量shoporscore来控制显示商品还是评价（true显示商品false显示评价）

     data () {
    return {
      imgpath:'http://cangdu.org:8001/img/',    //商家头像的路径地址path
      shopinfo:"",                              //商家信息
      shopmean:"",                              //食品信息
      shoporscore:true                               //商家还是评价
    }
  },

    2.将数据绑定到元素上来控制显示隐藏
    在shopmain，footdiv上添加判断
    v-if="shoporscore"
    在footdiv下新建评价div

     <div v-if="!shoporscore">
        评价div
 </div>

    3.点击事件来改变shoporscore的值，同时绑定classon来改变元素的样式

    <div class="mytab">
                <div @click="shoporscore=true" :class="{ on:shoporscore }">商品</div>
                <div @click="shoporscore=false" :class="{ on:!shoporscore }" >评价{{shopinfo.rating}}分</div>
</div>

    4.结果如下
    图片描述图片描述

    ok！转换成功，下面就来写评价的样式。

    4.1UI图
    图片描述

    4.2样式
    评论div的html如下

    <div class="score" v-if="!shoporscore">
        <div class="scoretop">
          <div class="scoretopleft">
              <div class="fs1-2 colf60">4.4</div>
              <div class="fs15 col9f">综合评价</div>
              <div class="fs0-8 col9f">高于周边商家76.9%</div>
          </div>
          <div class="scoretopright">
              <div><span class="fs15 col9f">评价服务</span></div>
              <div><span class="fs15 col9f">菜品评价</span></div>
              <div><span class="fs15 col9f">送达时间</span></div>
          </div>
        </div>
        <div class="scoremain">
              <div class="scoremaintop after">
                <div class="ih30 fs0-8 sty1 on">全部(759)</div>
                <div class="ih30 fs0-8 sty1">很好啊的(759)</div><div class="ih30 fs0-8 sty1">很好啊的(759)</div>
                <div class="ih30 fs0-8 sty1">很好啊的(759)</div><div class="ih30 fs0-8 sty1">很好啊的(759)</div>
                <div class="ih30 fs0-8 sty2">差评(759)</div>
              </div>
              <div class="scoremaininfo">
                  <div class="scoreitem after">
                      <div class="scoreitemleft">
                          <img >
                      </div>
                      <div class="scoreitemright fs12 col9f">
                          <div>
                              <span>姓名</span>
                              <span class="right">2017-02-06</span>
                          </div>
                          <div>
                              星星
                          </div>
                          <div>
                              很好吃的评论
                          </div>
                          <div class="scoreimgbox">
                            <img><img>
                          </div>
                          <div class="namebox">
                              <div>炒鸡好吃煲</div>
                              <div>无敌辣鸡翅</div>
                          </div>

                      </div>
                  </div>
                  <div class="scoreitem">
                      <div class="scoreitemleft">
                          <img >
                      </div>
                      <div class="scoreitemright fs12 col9f">
                          <div>
                              <span>姓名</span>
                              <span class="right">2017-02-06</span>
                          </div>
                          <div>
                              星星
                          </div>
                          <div>
                              很好吃的评论
                          </div>
                          <div>
                            <img><img>
                          </div>
                          <div class="namebox">
                              <div>炒鸡好吃煲</div>
                              <div>无敌辣鸡翅</div>
                          </div>

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

    css如下

    .scoretop{
  display:flex;
  padding:0px 10px 10px 10px;
  border-bottom:10px solid #F5F5F5;
}
.scoretopleft{
  flex:1;
  text-align:center;
}
.scoretopright{
  flex:1;
}
.scoremain{
  padding:0px 10px;
}
.scoremaintop{
  padding:10px 0px 5px 0px;
  display:flex;
  flex-wrap:wrap;
}
.scoremaintop>div{
  padding:0px 8px;
  border-radius:5px;
  margin-right:5px;
  margin-bottom:5px;
}
.sty1{
  background-color:#EBF5FF;
  color:#9f9f9f;
}
.sty1.on{
  background-color:#3190E8;
  color:#fff;
}
.sty2{
  background-color:#F5F5F5;
  color:#AFAFAF;
}
.scoreitem{
  display:flex;
  margin-top:10px;
}
.scoreitemleft{
  width:50px;
  height:50px;
  margin-right:10px;
  background-color:red;
}
.scoreitemleft>img{
  width:100%;
  border-radius:50%; 
}
.scoreitemright{
  flex:1;
}
.namebox{
  display:flex;
  flex-wrap: wrap;
}
.namebox>div{
  border:1px solid;
  padding:3px 3px;
  margin-right:5px;
  border-radius:3px;
  margin-bottom:5px;
}
.score{
  padding-top:10px;
  flex:1;
  overflow: scroll;
}
.scoreimgbox>img{
  width:4rem;
  height:4rem;
  background-color:red;
  margin-right:10px;
}

    页面如下

    （星星没有写是因为在miste.vue里咱们已经写过了）

    5.请求评价数据
    在data中创建变量score,scorerating,scoretags,来存放评价数据

    data () {
    return {
      imgpath:'http://cangdu.org:8001/img/',    //商家头像的路径地址path
      shopinfo:"",                              //商家信息
      shopmean:"",                              //食品信息
      shoporscore:true,                         //商家还是评价
      score:"",                                 //评价信息
      scorerating:"",                           //评价分数  
      scoretags:"",                             //评价分类
      scoreindex:0                              //选中第几个评价分类
    }
  },

    接口API如图（参数先传个死值）
    图片描述

    在mounted中写请求

     //评论详情
      this.$http.get('http://cangdu.org:8001/ugc/v2/restaurants/1/ratings?offset=0&limit=10').then(response => {
        console.log(response);
        this.score=response.body;
      }, response => {
        console.log(response);
      });
      //评论分数
      this.$http.get('http://cangdu.org:8001/ugc/v2/restaurants/1/ratings/scores').then(response => {
        console.log(response);
        this.scorerating=response.body;
      }, response => {
        console.log(response);
      });
       //评论分类
      this.$http.get('http://cangdu.org:8001/ugc/v2/restaurants/1/ratings/tags').then(response => {
        console.log(response);
        this.scoretags=response.body;
      }, response => {
        console.log(response);
      });

    结果如图
    图片描述

    ok！请求成功

    渲染评论页面

    1.写评价星星的组件
    在src文件夹下的的 components下新建stars/stars.vue，页面代码如下（在miste.vue一章中咱们写过）

    <template>
  <div>
      <div class="xxbox fs10 mgl">
            <span v-for="(itemxx,index) in 5" class="xxspan1"><icon v-if="index+1<=num" name="xx" class="xx"></icon><icon v-if="index+1>num" name="xx2" class="xx"></icon><span v-if="num-(index)>0&&num-(index)<1" :class="xxclass+(num*10-index*10)"><icon name="xx" class="xx"></icon></span></span>
      </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
       xxclass:"xxspan2 w",     //星星的class
    }
  },
  props:[
    "num"
  ]
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.xxdiv{
  height:25px;
  line-height:25px;
}
.xxbox{
  display:inline-block;
  height:25px;
  box-sizing:border-box;
}
.xxbox>span{
    margin-right:-2px;
}
.xxspan1{
  position:relative;
  display:inline-block;
  margin-right:1px !important;
}
.xxspan2{
  display:inline-block;
  position:absolute;
  left:0px;
  overflow: hidden;
}
.w1{
  width:10%;
}
.w2{
  width:20%;
}
.w3{
  width:30%;
}
.w4{
  width:40%;
}
.w5{
  width:50%;
}
.w6{
  width:60%;
}
.w7{
  width:70%;
}
.w8{
  width:80%;
}
.w9{
  width:90%;
}
.xx{
  width:10px;
  height:10px; 
}
</style>

    这里注意，props是父组件传递给子组件的值，在子组件直接调用即可。这里的num代表评分的等级如4.8,3.2等
    在shop.vue中引入并注册

    import stars from '../../components/stars/stars'

    在components中注册组件

     components:{
  //注册组件
      stars
  },

    在代码中直接调用

    <stars num="你要传递给子组件的值"></stars>

    2.评价div代码修改如下

    <div class="score" v-if="!shoporscore">
        <div class="scoretop">
          <div class="scoretopleft">
              <div class="fs1-2 colf60">{{shopinfo.rating}}</div>
              <div class="fs15 col9f">综合评价</div>
              <div class="fs0-8 col9f">高于周边商家{{parseInt(scorerating.compare_rating*100)}}%</div>
          </div>
          <div class="scoretopright">
              <div><span class="fs15 col9f mgr5">评价服务</span><stars :num="scorerating.service_score.toFixed(1)"></stars><span class="colf60 right">{{scorerating.service_score.toFixed(1)}}</span></div>
              <div><span class="fs15 col9f mgr5">菜品评价</span><stars :num="scorerating.food_score.toFixed(1)"></stars><span class="colf60 right">{{scorerating.food_score.toFixed(1)}}</span></div>
              <div><span class="fs15 col9f mgr5">送达时间</span><span class="fs15 colf60">{{scorerating.deliver_time}}分钟</span></div>
          </div>
        </div>
        <div class="scoremain">
              <div class="scoremaintop after">
                <div v-for="(item,index) in scoretags" class="ih30 fs0-8" :class="{sty2:item.unsatisfied,sty1:!(item.unsatisfied),on:index==scoreindex}">{{item.name}}({{item.count}})</div>
              </div>
              <div class="scoremaininfo">
                  <div v-for="item in score" class="scoreitem after">
                      <div class="scoreitemleft">
                          <img :src="imgaddpath(item.avatar)" >
                      </div>
                      <div class="scoreitemright fs12 col9f">
                          <div>
                              <span>{{item.username}}</span>
                              <span class="right">{{item.rated_at}}</span>
                          </div>
                          <div>
                              <stars :num="item.rating_star"></stars>
                          </div>
                          <div>
                              {{item.time_spent_desc}}
                          </div>
                          <div class="scoreimgbox">
                            <img v-for="itema in item.item_ratings" :src="imgaddpath(itema.image_hash)">
                          </div>
                          <div class="namebox">
                              <div v-for="itemb in item.item_ratings">{{itemb.food_name}}</div>
                          </div>

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

    页面如图
    图片描述

    不显示图片我看了看是API没有返回数据
    shop.vue最终修改如下

    <template>
  <div id="shop" class="bgfff">
        <div class="topbg">
                <img class="topbgimg" :src="imgpath+shopinfo.image_path">
        </div>
        <div class="shoptop">
            <div class="toptop ih30">
              <icon class="backicon" name="back"></icon>
              <span class="right">
                  <icon class="backicon2" name="cart"></icon>
                  <icon class="backicon2" name="more"></icon> 
              </span>
            </div>
            <div class="topfoot">
                <div class="topleft">
                    <img :src="imgpath+shopinfo.image_path">
                </div>
                <div class="topright nowarp">
                    <div class="foota">
                        <div class="footamain fs1-2 nowarp">{{shopinfo.name}}</div>
                        <icon name="right" class=" icon3"></icon>
                    </div>
                    <div class="footb nowarp">
                        <div class="nowarp">公告:{{shopinfo.promotion_info}}</div>
                    </div>
                    <div class="footc">
                        <span class="footcmain"><span v-if="shopinfo.delivery_mode">{{shopinfo.delivery_mode.text}}•</span><span>约{{shopinfo.order_lead_time}}</span></span>
                    </div>
                </div>
            </div>
            
        </div>

        <div class="shopmid mgtop10">
            <div v-if="shopinfo.activities" class="midtop"><span class="te mgr5">{{shopinfo.activities[0].icon_name}}</span><span>{{shopinfo.activities[0].description}}</span><span class="right">{{shopinfo.activities.length}}个活动 <icon name="down" class="icon4"></icon></span></div>
            <div class="mytab">
                <div @click="shoporscore=true" :class="{ on:shoporscore }">商品</div>
                <div @click="shoporscore=false" :class="{ on:!shoporscore }" >评价{{shopinfo.rating}}分</div>
            </div>
        </div>

    <div v-if="shoporscore" class="shopmain">
        <div class="mianleft">
            <div v-for="(item,index) in shopmean" class="leftdiv">
                <div >
                    <icon v-if="index==0" class="icon5" name="hot"></icon>
                    <icon v-if="index==1" class="icon5" name="discount"></icon>
                    <span class="fs0-8">{{item.name}}</span>
                </div>
            </div>
        </div>
        <div class="mainright">
            <div class="item" v-for="item in shopmean">
                <div class="itemtop padtop10 ih30 after">
                    <span class="fs15">{{item.name}}</span>
                    <span class="fs0-8 col9f">{{item.description}}</span>
                </div>
                <div class="itemmain">
                    <div v-for="items in item.foods" class="iteminfo after">
                        <div class="infoimgbox">
                            <img :src="imgpath+items.image_path">
                        </div>
                        <div class="inforight">
                            <div class="fs15 ih20">{{items.name}}</div>
                            <div class="ih15 col9f"><span class="fs10 mgl">{{items.tips}}</span></div>
                            <div class="ih15"><span v-if="false" class="fs10 mgl"><span class="zk">包装费</span><span class="yh">{{}}</span></span></div>
                            <div class="ih20">
                              <span class="colred fs12">￥</span>
                              <span class="colred mgr5">{{items.specfoods[0].price}}</span>
                              <span v-if="items.specfoods[0].original_price" class="fs12 col9f midline">￥56</span>
                              <icon v-if="items.specfoods.length==1" name="add" class="addicon right" ></icon>
                              <span class="fs12 right gz" v-if="items.specfoods.length>1">选规则</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div v-if="shoporscore" class="foot">
      <div class="footleft">
          <div class="footlogo"><icon name="footcar" class="footicon"></icon></div>
          <div class="footmain">未选购商品</div>
      </div>
      <div class="footright">
          ￥20起送
      </div>
    </div>
    <div class="score" v-if="!shoporscore">
        <div class="scoretop">
          <div class="scoretopleft">
              <div class="fs1-2 colf60">{{shopinfo.rating}}</div>
              <div class="fs15 col9f">综合评价</div>
              <div class="fs0-8 col9f">高于周边商家{{parseInt(scorerating.compare_rating*100)}}%</div>
          </div>
          <div class="scoretopright">
              <div><span class="fs15 col9f mgr5">评价服务</span><stars :num="scorerating.service_score.toFixed(1)"></stars><span class="colf60 right">{{scorerating.service_score.toFixed(1)}}</span></div>
              <div><span class="fs15 col9f mgr5">菜品评价</span><stars :num="scorerating.food_score.toFixed(1)"></stars><span class="colf60 right">{{scorerating.food_score.toFixed(1)}}</span></div>
              <div><span class="fs15 col9f mgr5">送达时间</span><span class="fs15 colf60">{{scorerating.deliver_time}}分钟</span></div>
          </div>
        </div>
        <div class="scoremain">
              <div class="scoremaintop after">
                <div v-for="(item,index) in scoretags" class="ih30 fs0-8" :class="{sty2:item.unsatisfied,sty1:!(item.unsatisfied),on:index==scoreindex}">{{item.name}}({{item.count}})</div>
              </div>
              <div class="scoremaininfo">
                  <div v-for="item in score" class="scoreitem after">
                      <div class="scoreitemleft">
                          <img :src="imgaddpath(item.avatar)" >
                      </div>
                      <div class="scoreitemright fs12 col9f">
                          <div>
                              <span>{{item.username}}</span>
                              <span class="right">{{item.rated_at}}</span>
                          </div>
                          <div>
                              <stars :num="item.rating_star"></stars>
                          </div>
                          <div>
                              {{item.time_spent_desc}}
                          </div>
                          <div class="scoreimgbox">
                            <img v-for="itema in item.item_ratings" :src="imgaddpath(itema.image_hash)">
                          </div>
                          <div class="namebox">
                              <div v-for="itemb in item.item_ratings">{{itemb.food_name}}</div>
                          </div>

                      </div>
                  </div>
                
              </div>
        </div>
    </div>
  </div>
</template>

<script>
import stars from '../../components/stars/stars'


export default {
  data () {
    return {
      imgpath:'http://cangdu.org:8001/img/',    //商家头像的路径地址path
      shopinfo:"",                              //商家信息
      shopmean:"",                              //食品信息
      shoporscore:true,                         //商家还是评价
      score:"",                                 //评价信息
      scorerating:"",                           //评价分数  
      scoretags:"",                             //评价分类
      scoreindex:0                              //选中第几个评价分类
    }
  },
  components:{
  //注册组件
      stars
  },
  mounted:function(){
  //生命周期
      //餐馆详情
      this.$http.get('http://cangdu.org:8001/shopping/restaurant/1').then(response => {
        console.log(response);
        this.shopinfo=response.body;
      }, response => {
        console.log(response);
      });
      //食品详情
      this.$http.get('http://cangdu.org:8001/shopping/v2/menu?restaurant_id=1').then(response => {
        console.log(response);
        this.shopmean=response.body;
      }, response => {
        console.log(response);
      });
      //评论详情
      this.$http.get('http://cangdu.org:8001/ugc/v2/restaurants/1/ratings?offset=0&limit=10').then(response => {
        console.log(response);
        this.score=response.body;
      }, response => {
        console.log(response);
      });
      //评论分数
      this.$http.get('http://cangdu.org:8001/ugc/v2/restaurants/1/ratings/scores').then(response => {
        console.log(response);
        this.scorerating=response.body;
      }, response => {
        console.log(response);
      });
       //评论分类
      this.$http.get('http://cangdu.org:8001/ugc/v2/restaurants/1/ratings/tags').then(response => {
        console.log(response);
        this.scoretags=response.body;
      }, response => {
        console.log(response);
      });
  },
  computed:{
  //计算属性

  },
  methods:{
  //函数
      imgaddpath:function(e){
        return "https://fuss10.elemecdn.com/"+e+".jpeg"
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.shoptop{
  height:120px;
  background-color: rgba(119,103,137,.43);
  box-sizing:border-box;
  padding:10px 10px 0px 10px;
  position: relative;
}
.topbg{
  position: absolute;
  width:100%;
  height:120px;
  left:0px;
  right:0px;
  overflow:hidden;
}
.topbgimg{
  width:100%;
  filter: blur(10px);
}
.backicon{
  height:30px;
  width:30px;
}
.backicon2{
  height:25px;
  width:25px;
}
.toptop{
  margin-bottom:10px;
}
.topfoot{
  height:70px;
  display:flex;
}
.topleft{
  height:80px;
  width:80px;
  background-color:#3c3c3c;
  margin-right:10px;
  border-radius:3px;
  box-shadow:0 0 5px #3c3c3c;  
}
.topleft>img{
  max-width:100%;
  max-height:100%;
  border-radius:3px;
}
.topright,.topleft{
  float:left;
}
.topright{
  height:100%;
  flex:1;
}
.foota{
  height:30px;
  color:white;
  line-height:30px;
  display:flex;
}
.icon3{
  width:20px;
  height:20px;
  margin-top:5px;
}
.footc{
  height:20px;
  line-height:20px;
  font-size:12px;
}
.footb{
  font-size:12px;
  color:white;
}
.footcmain{
  background-color:#0097FF;
  color:white;
  padding:0px 5px; 
}
.shopmid{
  padding:10px 10px 0px 10px;
  border-bottom:2px solid #F8F8F8;
}
.midtop{
  font-size:12px;
}
.te{
  background-color:#F08449;
  padding:0px 1px;
  color:white;
}
.mytab{
  overflow:hidden;
  margin-top:10px;
}
.mytab>div{
  float:left;
  padding-bottom:10px;
  margin-right:10px;
  border-bottom:2px solid white;
}
.mytab>div.on{
  color:#0B89FF;
  border-color:#0B89FF;
}
.leftdiv{
  width:60px;
  padding:0px 10px;
  color:#727272;
  background-color:#F8F8F8;
}
.leftdiv>div{
  padding:15px 0px;
  border-bottom:1px solid #F1F1F1;
}
.leftdiv.on{
  background-color:white;
  color:#080808;
}
.leftdiv.on>div{
  border:0px;
}
.icon5{
  width:15px;
  height:15px;
}
.mianleft{
  width:80px;
  box-sizing:border-box;
  overflow:scroll;
}
#shop{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  height:100vh;
}
.shopmain{
  -webkit-box-flex:1;
  display:-webkit-box;
  overflow:hidden;
}
.mainright{
  -webkit-box-flex:1;
  overflow:scroll;
  padding-left:10px;
}
.foot{
  height:50px;
  line-height:50px;
  background-color:#594C46;
  display:flex;
}
.footleft{
  flex:2;
  display:flex;
}
.footright{
  flex:1;
  text-align:center;
  color:#B7B7B7;
  background-color:#61686A;
}
.footlogo{
  text-align:center;
  width:50px;
  height:50px;
  border-radius:50%;
  background-color:#515151;
  margin:0px 10px;
  border:3px solid #444446;
  transform:translatey(-15px)
}
.footicon{
  width:40px;
  height:40px;
  margin-top:7px;
}
.footmain{
  height:50px;
  color:#ADADAD;
  font-size:0.8rem;
}
.itemmain{
  padding-right:10px;
 
}
.iteminfo{
   height:70px;
   display:flex;
   padding:10px 0px;
}
.infoimgbox{
  width:70px;
  height:70px;
  margin-right:5px;
  background-color:red;
}
.infoimgbox>img{
  width:100%;
  height:100%;
}
.inforight{
  flex:1;
}
.ih20{
  height:20px;
  line-height:20px;
}
.ih15{
  height:15px;
  line-height:15px;
}
.addicon{
  width:20px;
  height:20px;
}
.zk{
  background-color:#FF5F15;
  padding:0px 3px;
  color:white;
  border:1px solid #FF5F15;
}
.yh{
  padding:0px 3px;
  color:#FF5F15;
  border:1px solid #FF5F15;
}
.gz{
  display:inline-block;
  background-color:#3190E8;
  color:white;
  padding:0px 2px;
  border-radius:2px;
}

.scoretop{
  display:flex;
  padding:0px 10px 10px 10px;
  border-bottom:10px solid #F5F5F5;
}
.scoretopleft{
  flex:2;
  text-align:center;
}
.scoretopright{
  flex:3;
}
.scoretopright>div{
  display:flex;
}
.scoremain{
  padding:0px 10px;
}
.scoremaintop{
  padding:10px 0px 5px 0px;
  display:flex;
  flex-wrap:wrap;
}
.scoremaintop>div{
  padding:0px 8px;
  border-radius:5px;
  margin-right:5px;
  margin-bottom:5px;
}
.sty1{
  background-color:#EBF5FF;
  color:#9f9f9f;
}
.sty1.on{
  background-color:#3190E8;
  color:#fff;
}
.sty2{
  background-color:#F5F5F5;
  color:#AFAFAF;
}
.scoreitem{
  display:flex;
  margin-top:10px;
}
.scoreitemleft{
  width:50px;
  height:50px;
  margin-right:10px;
}
.scoreitemleft>img{
  width:100%;
  border-radius:50%; 
}
.scoreitemright{
  flex:1;
}
.namebox{
  display:flex;
  flex-wrap: wrap;
}
.namebox>div{
  border:1px solid;
  padding:3px 3px;
  margin-right:5px;
  border-radius:3px;
  margin-bottom:5px;
}
.score{
  padding-top:10px;
  flex:1;
  overflow: scroll;
}
.scoreimgbox>img{
  width:4rem;
  height:4rem;
  margin-right:10px;
}
</style>
    vue.js
    你的前端
    132 声望93 粉丝

    你的前端

    « 上一篇
    vue从创建到完整的饿了么（13）饿了么loading图及多个请求时显示与隐藏
    下一篇 »
    vue从创建到完整的饿了么（15）组件动画

    引用和评论

    被 2 篇内容引用
    推荐阅读
    头像
    vue从创建到完整的饿了么（19）阻止事件冒泡

    你的前端赞 6阅读 3.2k评论 4

    头像
    前端开发工具

    寒青赞 16阅读 4.8k

    头像
    开发插件集合

    寒青赞 12阅读 3.2k

    头像
    2024最全ECharts 实战大全（速记版+资源）

    程序员海军赞 7阅读 642

    头像
    Vue.js-方法与事件

    寒青赞 6阅读 3.7k

    头像
    Vue使用mixins

    一念赞 4阅读 2.7k

    头像
    这个前端神器，竟让滴滴、美团都爱不释手？！

    白水赞 4阅读 1k评论 1

    0 条评论
    得票最新