防饿了么和apk打包

1：打包ok

防饿了么和apk打包

2；创建移动app

防饿了么和apk打包

3复制

dist：下的这两个文件防饿了么和apk打包

4删除除了mainfest.json

之外的所有文件。并且。把staic和index.html加入到件夹下

防饿了么和apk打包

.打包上线基本就完了。

下面是项目代码

项目：文件夹

防饿了么和apk打包

1：主页面：

<template>
  <div >
    <v-head :seller="seller"></v-head>
    <div class="hand">
        <div class="hand-item">
          <router-link to="/goods">商品</router-link>
        </div>
        <div class="hand-item">
          <router-link to="/ratings">评价</router-link>
        </div>
        <div class="hand-item">
          <router-link to="/seller">商家</router-link>
        </div>
    </div>
    <router-view :seller="seller" :goods="goods"></router-view><!--记得先传参/-->
    <shopcar :deliveryPrice="seller.deliveryPrice" :minPrice="seller.minPrice"  :good="goods" class="boxmain"></shopcar>
  </div>
</template>
<script>
import vHead from './components/header/header.vue'
import shopcar from './components/shopcar/shopcar.vue'
export default {
  name: 'App',
  data () {
    return {
      seller: '',
      goods: ''
    }
  },
  components: {
    vHead,
    shopcar
  },
  created () {
    console.log(1234)
    this.axios.get('static/data.json')
      .then((res) => {
        this.seller = res.data.seller
        this.goods = res.data.goods
      })
  }
}
</script>
<style>
.boxmain{
  width: 100%;
  position:absolute;
  height:1.16rem;
  bottom:0;
}
.hand{
  width:100%;
  height:0.8rem;
  display:flex;
  justify-content:space-around;
  border:0.01rem solid rgba(7,17,27,0.1)
}
.hand-item{
  flex:1;
  text-align:center;
  height:0.8rem;
  font-size:0.28rem;
  color:rgb(77,85,93);
  line-height: 0.8rem;
}
a:hover{
  color:red;
  text-decoration: none;
}
</style>

2：index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>baoge</title>
    <link rel="stylesheet" href="static/css/reset.css">
    <link rel="stylesheet" href="static/css/demo.css">
    <link rel="stylesheet" href="static/css/iconfont.css">
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
  <script>
    refresh();
    window.onresize = function(){
      setTimeout(function(){
        refresh();
      },10)
    };
    function refresh() {
      let deviceWidth = document.documentElement.clientWidth;
      if (deviceWidth > 1200) {
        document.documentElement.style.fontSize = 1200 / 12 + "px";
      } else {
        document.documentElement.style.fontSize = deviceWidth / 7.5 + "px";
        console.log(deviceWidth / 7.5+ "px");
      }
    }
  </script>

</html>

3:main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Axios from 'axios'

Vue.prototype.axios = Axios

Vue.config.productionTip = false
// eslint-disable no-new
// new Vue({
//   el: '#app',
//   router,
//   components: { App },
//   template: '<App/>'
// })
let vRouter = new Vue({
  router,
  el: '#app',
  render: h => h(App)
})
Vue.use({
  vRouter
})

4:组件

（1）：cartcontrol
<template>
    <div class="cartcontrol">
      <transition name="gg"><div class="decrease icon iconfont icon-jiajian1" v-show="food[i].count>0" @click="decreaseCart"></div></transition>
      <div class="cart-count" v-show="food[i].count>0">{{food[i].count}}</div>
      <div class="add icon iconfont icon-jiajian" @click="addCart"></div>
    </div>
</template>
<script>
import Vue from 'vue'
export default {
  props: ['food', 'i'],
  methods: {
    addCart () { // 两种办法.可以自己用 this.$set
      // console.log(this.food[this.i])
      // console.log(this.i)
      if (!this.food[this.i].count) {
        Vue.set(this.food[this.i], 'count', 1)
      } else {
        this.food[this.i].count++
      }
      this.$emit('balls', event.target)
    },
    decreaseCart () {
      if (this.food[this.i].count) {
        this.food[this.i].count--
      }
    }
  }
}
</script>

<style scoped>
.cartcontrol{
  font-size:0;
  height:0.95rem;
  width:1.75rem;
  line-height:0.95rem;
  position:relative;
}
.icon{
  font-size:0.48rem;
}
.decrease{
  color: #00A0DC;
  height:0.5rem;
  width:0.5rem;
  position:absolute;
  right:1.0rem;
  z-index:1 ;
  transform:rotateY(180deg);
  transition:all 0.4s ;
}
.add{
  color: #00A0DC;
  height:0.5rem;
  width:0.5rem;
  position:absolute;
  right:0.0rem;
  z-index:1;
}
.gg-enter-active,.gg-leave-active{
opacity: 1;
transform:translate3d(0,0,0);
}
.gg-enter,.gog-leave-to{
  opacity: 0;
  transform:translate3d(0.5rem,0,0) rotate(180deg);
}
.cart-count{
  height:0.95rem;
  width:0.50rem;
  line-height:0.95rem;
  color:red;
  font-weight:700;
  text-align:center;
  font-size:0.2rem;
  position:absolute;
  right:0.5rem;
  z-index:0;
  transition:all 0.4s ;
}
.totalprice{
  height:0.95rem;
  width:0.50rem;
  line-height:0.95rem;
  color:red;
  text-align:center;
  font-size:0.2rem;
  position:absolute;
  right:1.75rem;
  z-index:1;
  font-weight:700;
}
</style>

（2）：food

<template>
  <transition name="go-left">
    <div class="classic" ref="classic" v-show="false">
      <div><img src="" class="big-pic"></div>
      <div class="classic-middle">
        <p class="classic-one">好评率</p>
        <p class="classic-two">
          <span></span>
          <span class="span-two"></span>
        </p>
        <div class="classic-three">
          <div>
            <span class="three-one">￥</span>
            <span class="three-two"><del>￥</del></span>
          </div>
          <div class="three-car">加入购物车</div>
        </div>
      </div>
      <div class="classic-title-before"></div>
      <div class="classic-title">
        <p>商品介绍</p>
        <div></div>
      </div>
      <div class="classic-title-before"></div>
      <div class="classic-main">
        <p>商品评价</p>
        <div class="classic-all">
          <div>全部 57</div>
          <div>推荐 47</div>
          <div>吐槽 10</div>
        </div>
        <div class="classic-ok">
          <div>
            <i class="icon iconfont icon-gou"></i>
            <span class="ok-one">只看有内容的评价</span>
          </div>
        </div>
        <div class="classic-ratings">
          <div class="ratings-items">
            <div class="ratings-one">
              <div></div>
              <div></div>
            </div>
            <div class="ratings-two"></div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  props: ['foods']
}
</script>

<style scoped>

</style>

(3):goods

<template >
  <div>
     <div class="goods" >
       <div class="goods-l" ref="goodlwrapper">
         <ul>
           <!--https://blog.csdn.net/qq_36457584/article/details/80856158-->
           <!--https://blog.csdn.net/tangxiujiang/article/details/80175231-->
           <!--currentIndex()在computed里面定义，当计算出来的索引等于index的时候就显示高亮的样式.current-->
           <li class="goods-name" v-for="(items,index) in goods"  :key="index" @click="selectMenu(index,$event)" :class="{'current': currentIndex === index}" >
             <!--selectMenu(index,$event)实现点击左边的menu，右边滚动到相应的区间，index就是区间索引，$event属性表示原生DOM事件-->
             <span class="text-name">
              <!--<img :src="'./'+'classMap[items.type]'+'[email protected]'"  v-show="items.type>0" class="theonly">-->
               <span  v-show="items.type>1" class="theonly"><img src="./[email protected]"></span>
               {{items.name}}</span>
           </li>
         </ul>
       </div>
       <div class="goods-r"  ref="goodrwrapper">
         <ul>
           <li class="food-list food-list-hook" v-for="(item,inde) in goods" :key="inde">
             <section><span class="top-name" >{{item.name}}</span></section>
             <ul>
               <li class="food-item" v-for="(food,sindex) in item.foods" :key="sindex" >
                     <div ><img :src="food.icon" class="pic-left" @click="selectFoods(inde,sindex)"></div>
                     <div class="pic-right">
                       <p>{{food.name}}</p>
                       <p>{{food.description}}</p>
                       <p>月售{{food.sellCount}}份<span class="greats">好评率{{food.rating}}%</span></p>
                       <p><span class="money">￥{{food.price}}</span><span v-show="food.oldPrice" class="oldmoney"><del>￥{{food.oldPrice}}</del></span></p>
                     </div>
                     <div class="cartControl-wrapper">
                       <cartcontrol :food="item.foods" :i="sindex"></cartcontrol>
                     </div>
               </li>
             </ul>
           </li>
         </ul>
       </div>
    </div>
    <transition name="go-left">
      <div class="classic" ref="classic" v-show="showout&&goods" >
        <div>
        <div v-for="(items,index) in goods" :key="index">
        <div v-for="(food,inde) in items.foods" :key="inde" v-show="food.select">
          <div class="big-pic">
          <img src="./删除.png"   @click="delthing(index,inde)" class="most">
          <img  class="big-pic"  :src="food.image" v-show="food.select">
        </div>
        <div class="classic-middle">
          <p class="classic-one">{{food.name}}</p>
          <p class="classic-two">
            <span>月售{{food.sellCount}}</span>
            <span class="span-two">好评率{{food.rating}}</span>
          </p>
          <div class="classic-three">
            <div>
              <span class="three-one">￥{{food.price}}</span>
              <span class="three-two" v-show="food.oldPrice"><del>￥{{food.oldPrice}}</del></span>
            </div>
            <div class="three-car">加入购物车</div>
          </div>
        </div>
        <div class="classic-title-before"></div>
        <div class="classic-title">
          <p>商品介绍</p>
          <div>{{food.info}}</div>
        </div>
        <div class="classic-title-before"></div>
        <div class="classic-main">
          <p class="main-one">商品评价</p>
          <div class="classic-all">
            <div class="classic-box">
            <div class="all-one">全部 24</div>
            <div class="all-two">推荐 18</div>
            <div class="all-three">吐槽 6</div>
            </div>
          </div>
          <div class="classic-ok">
            <div>
              <span class="ok-left"><i class="icon iconfont icon-gou"></i></span>
              <span class="ok-one">只看有内容的评价</span>
            </div>
          </div>
          <div class="classic-ratings"  v-for="(one,inse) in food.ratings" :key="inse">
            <div class="ratings-items">
              <div class="ratings-one">
                <div>{{one.rateTime | forDate}}</div>
                <div>{{one.username}} <img :src="one.avatar" class="small-image"></div>
              </div>
              <div class="ratings-two">
                <span><i class="icon iconfont icon-bad" v-show="!one.text"></i></span>
                <span> <i class="icon iconfont icon-good" style="color:deepskyblue;" v-show="one.text"></i></span>
                <span>{{one.text}}</span>
              </div>
            </div>
          </div>
        </div>
        </div>
      </div>
      </div>
      </div>
    </transition>
  </div>
</template>
<script   >
import BScroll from 'better-scroll'
import Vue from 'vue'
import cartcontrol from '../cartcontrol/cartcontrol.vue'
export default {
  components: {
    cartcontrol
    // shopcar
  },
  filters: {
    forDate (val) { // 自动把标准时间转发
      var value = new Date(val)
      var year = value.getFullYear()
      var month = value.getMonth() + 1
      var day = value.getDate()
      var hour = value.getHours()
      var minutes = value.getMinutes()
      var seconds = value.getSeconds()
      return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds
    }
  },
  props: ['goods', 'seller'],
  data () {
    return {
      // goods: [], // 用来接收从后台返回的数据
      // seller: [],
      listHeight: [], // 存放右边每一个li的高度
      scrollY: 0, // 实时滚动的y轴大小，利用better-scroll的onScroll事件监听这个值
      showout: false
    }
  },
  created () { // 在这个时刻向后台请求数据
    console.log(this.goods)// 为什么不出来先不出来.因为app先执行。在goods执行。app在思考需要时间。但并不妨碍。goods出现.app传数据需要时间
    this.axios.get('static/data.json')
      .then((res) => {
        // DOM未更新完成
        // this.goods = res.data.goods
        // this.seller = res.data.seller
        this.$nextTick(() => { // better-scroll的实例初始化要放在vm.$nextTick()里面才生效
          // DOM已经更新完成.应用数据变dom.时间才有用
          // 实例化better-scroll
          // console.log(this.$refs.classic.offsetHeight)
          this._initScroll()
          // 计算右边.foods-wrapper的每个li的累加的高度，存放在listHeight中
          this._calculateHeight()
        })
      })
  },
  computed: {
    currentIndex () {
      // 利用vue中的计算属性computed实时计算，对listHeight遍历，返回当前的左边mune-wrapper的li
      // 对应的index，从而让其显示高亮的属性.current
      for (let i = 0; i < this.listHeight.length; i++) {
        let height1 = this.listHeight[i]
        let height2 = this.listHeight[i + 1]
        // 当遍历到listHeight最后一个元素的时候，height2的值为undefined,如果是
        // 最后一个元素的话!height2为真，后面就不需要判断了
        if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
          // this.currentIndex = i
          // console.log(i)
          return i
        }
      }
      // 默认情况下是返回第一个元素
      return 0
    }
  },
  methods: {
    delthing (index, inde) { // 作用地域链。要搞清楚  delthing和selectFoods作用地域链不同。记得要用参数就要传参
      this.showout = false
      this.goods[index].foods[inde].select = false
      // console.log(inde)
      // console.log(index)
    },
    selectFoods (inde, sindex) { // vue forEach循环数组拿到自己想要的数据 https://blog.csdn.net/qq_36947128/article/details/79078611
      this.showout = true
      if (!this.goods[inde].foods[sindex].select) { // 节点大概传播不下来.用两次索引
        Vue.set(this.goods[inde].foods[sindex], 'select', true)
      }
      setTimeout(() => {
        this._initScroll()
      }, 200)
    },
    selectMenu (index, event) { // 点击左边的menu，跳到右边相应的li
      let foodList = this.$refs.goodrwrapper.getElementsByClassName('food-list-hook')// 获取到右边li对象
      let el = foodList[index] // 根据index，获取到右边具体滚动到的
      this.foodsScroll.scrollToElement(el, 300) // 要滑动到右边的对象，300完成动作的时间
      // this.currentIndex = index
    },
    _initScroll () {
      // 在methods属性里面定义一个better-scroll的实例初始化函数；在created()函数里面用vm.$nextTick()中初始化这个实例
      // 初始化需要滚动的对象,通过vm.$refs可以获取到在<template>中设置ref=goodlwrapper属性的元素节点
      this.leftScroll = new BScroll(this.$refs.goodlwrapper, {
        click: true
      })
      this.foodsScroll = new BScroll(this.$refs.goodrwrapper, {
        // 最好不用驼峰
        probeType: 3,
        click: true
      })
      this.classicScroll = new BScroll(this.$refs.classic, {
        probeType: 3,
        click: true
      })
      this.foodsScroll.on('scroll', (pos) => {
        this.scrollY = Math.abs(Math.round(pos.y))
      })
    },
    _calculateHeight () { // 将右侧的.foods-wrapper里面的每个li的高度进行累加，存放到数组listHeight里面
      let foodList = this.$refs.goodrwrapper.getElementsByClassName('food-list-hook')// 获取到所有的ref='foodList'的DOM元素
      let height = 0
      this.listHeight.push(height) // 第一个元素的高度是0
      for (let i = 0; i < foodList.length; i++) {
        let item = foodList[i]
        height += item.clientHeight // 通过原生DOM中的js获取到li的高度，并且累加
        this.listHeight.push(height)
      }
    }
  }
}
</script>
<style >
  /*<!--详情页-->*/
.go-left-active,.go-left-leave-active{
  transition:all 0.2s linear;
  opacity:1.0;
  transform:translate3d(-100%,0,0);
}
.go-left-enter,.go-left-leave-active{
  opacity:0;
  transform:translate3d(100%,0,0);
}
.small-image{
  height:0.24rem;
  width:0.24rem;
  border-radius:50%;
}
.most{
  height:0.5rem;
  width:0.5rem;
  left:0.2rem;
  top:0.2rem;
  position:absolute;
  z-index:10000;
}
.classic-ratings{
  width:90.4%;
  padding:0 0.36rem;
}
.ratings-items{
  height:0.56rem;
  width:100%;
  padding:0.32rem 0;
}
.ratings-one{
 font-size:0.23rem;
 color:rgb(147,153,159);
 display:flex;
 justify-content: space-between;
}
.classic-ok{
  border-bottom:0.03rem solid rgba(7,17,27,0.1);
  height:0.8rem;
  line-height:0.8rem;
  font-size:0.24rem;
  color:rgb(147,153,159);
}
.ok-left{
  font-size:0.3rem;
  margin-left:0.36rem;
}
.classic-one div{
  margin-left:0.06rem;
}
.classic-all{
  height:0.75rem;
  width:90.4%;
  margin-left:0.36rem;
  margin-right:0.36rem;
  border-bottom:0.02rem solid rgba(7,17,27,0.1);
}
.classic-box{
  width:4.0rem;
  height:0.5rem;
  display:flex;
  justify-content: space-between;
}
.all-one{
  line-height:0.5rem;
  color:white;
  height:0.5rem;
  width:1.3rem;
  font-size:0.25rem;
  text-align:center;
  border-radius: 0.02rem;
  background-color:rgb(0,160,220);
}
.all-two{
  line-height:0.5rem;
  color:rgb(77,85,93);
  height:0.5rem;
  width:1.3rem;
  text-align:center;
  font-size:0.25rem;
  border-radius: 0.02rem;
  background-color:rgba(0,160,220,0.2);
}
.all-three{
  line-height:0.5rem;
  color:rgb(77,85,93);
  height:0.5rem;
  width:1.3rem;
  text-align:center;
  font-size:0.25rem;
  border-radius: 0.02rem;
  background-color:rgba(77,85,93,0.2);
}
.main-one{
  font-size:0.28rem;
  color:black;
  font-weight:700;
  height:0.28rem;
  left:0.36rem;
  margin-top:0.36rem;
  margin-left:0.36rem;
  padding-bottom:0.24rem;
}
.ratings-two{
  font-size:0.25rem;
  color:rgb(7,17,27);
  margin-top:0.12rem;
}
.classic-title-before{
  height:0.32rem;
  width:100%;
  background-color: #f3f5f7;
  border-top:0.03rem solid rgba(7,17,27,0.1);
  border-bottom:0.03rem solid rgba(7,17,27,0.1);
}
.classic-title{
    width:90.4%;
    padding:0.36rem 0.36rem;
}
.classic-title>p{
  font-size:0.28rem;
  font-weight:600;
  color:black;
  text-align:left;
}
.classic-title>div{
  font-size:0.24rem;
  font-weight:200;
  color:rgb(77,85,93);
  margin-top:0.3rem;
}
.classic{
  top:0;
  bottom:0;
  width:100%;
  position:absolute;
  z-index:100;
  overflow:hidden;
  background-color: #fff;
}
.big-pic{
  height:7.5rem;
  width:100%;
}
.classic-middle{
  height:2rem;
  width:90.4%;
  padding:0.36rem 0.36rem;
}
.classic-one{
  font-size:0.28rem;
  font-weight:700;
  color:rgb(7,17,27)
}
.classic-two{
  font-size:0.20rem;
  margin-top:0.16rem;
  color:rgb(147,153,159)
}
.span-two{
  margin-left:0.24rem;
}
.classic-three{
  margin-top:0.36rem;
  height:0.5rem;
  display:flex;
  line-height:0.5rem;
  justify-content: space-between;
}
.three-one{
  font-size:0.25rem;
  font-weight:normal;
  color:rgb(240,20,20);
}
.three-two{
  font-size:0.20rem;
  font-weight:normal;
  color:rgb(147,153,159);
}
.three-car{
  height:0.5rem;
  width:1.48rem;
  border-radius: 0.24rem;
  line-height:0.5rem;
  text-align:center;
  font-size:0.20rem;
  color:rgb(255,255,255);
  background-color:rgb(0,160,220);
}
/*<!--详情页-->*/
.goods{
  position:fixed;
  display:flex;
  top:3.48rem;
  width:100%;
  bottom:1.16rem;
  overflow:hidden;
}
.goods-l{
  width:1.6rem;
  line-height:0.28rem;
  background-color:#f3f5f7;
}
.goods-name{
  display:table;
  padding:0 0.24rem;
  line-height:0.28rem;
  width:1.12rem;
  height:1.08rem;
  font-size:0.24rem;
}
.text-name{
  display:table-cell;
  vertical-align:middle;
  color:black;
  width:1.12rem;
  font-weight:200;
  border-bottom:0.03rem solid rgba(7,17,27,0.1);
  background-color: #f3f5f7;
}
.theonly img{

  height:0.24rem;
  width:0.24rem;
}
.current{
  background-color:white;
  position: relative;
  font-weight:800;
  margin-top:-0.01rem;
}
.goods-r{
  width:100%;
}
.food-list{
  width:100%;
}
.food-list section{
  height:0.54rem;
  width:100%;
  font-size:0.30rem;
  line-height:0.54rem;
  border-left:0.03rem solid #d9dde1;
  background-color:#F3F5F7;
}
.food-item{
  height:2.52rem;
  margin-bottom:0.36rem;
  top:0.36rem;
  position: relative;
  border-bottom:0.02rem solid rgba(7,17,27,0.1);
}
.cartControl-wrapper{
   position:absolute;
   right:0.36rem;
   top:0.8rem;
 }
.top-name{
  margin-left:0.36rem;
}
.food-item div{float:left}
.pic-left{
  height:1rem;
  width:1rem;
  margin-left:0.36rem;
}
.pic-right{
  width:70%;
  margin-left:0.20rem;
}
.pic-right p:nth-of-type(1){
  font-size:0.3rem;
  color:black;
  margin-top:0.04rem;
}
.pic-right p:nth-of-type(2){
  font-size:0.2rem;
  color:gray;
  margin-top:0.16rem;
}
.money{
  color:red;
  font-weight:800;
}
.oldmoney{
   color:gray;
   font-weight:800;
  margin-left:0.16rem;
 }
.pic-right p:nth-of-type(3){
  font-size:0.2rem;
  color:gray;
  margin-top:0.16rem;
}
.pic-right p:nth-of-type(4){
  font-size:0.2rem;
  color:gray;
  margin-top:0.16rem;
}
.greats{
  margin-left:0.24rem;
}
</style>

(4):header

<template>
    <div  class="moster"  >
      <div :class="[detailshow == false?'one':'one1']">
        <img class="tu-b" :src="seller.avatar">
        <div class="header">
          <div class="main">
            <div><img  class="tu" :src="seller.avatar"></div>
            <div class="tu1">
              <p class="p1"><img src="./[email protected]"><span>{{seller.name}}</span></p>
              <p class="p2">{{seller.description}}</p>
              <p class="p3" v-if="seller.supports"><img src="./[email protected]"><span>{{seller.supports[0].description}}</span></p>
            </div>
            <div class="tu2" @click="showDetails">
              <span class="wu">5个<img src="./右箭头小圆角.png"></span>
            </div>
          </div>
          <div class="tu3" @click="showDetails">
            <img src="./[email protected]" class="tu4">
            <span>{{seller.bulletin}}</span>
          </div>
          <div class="tu5" @click="showDetails">
             <span><img src="./右箭头小圆角.png"></span>
          </div>
          </div>
      </div>  <!--<star :size="48" :score="seller.score"></star>-->
      <transition  name="gray">
      <div class="fade-box" v-show="detailshow" >
          <div class="fade-top">
             <div class="nametop">{{seller.name}}</div>
             <div class="star">
                <xing></xing>
             </div>
            <div class="mainbox">
             <div class="title">
               <div class="line"></div>
               <div class="text">商家优惠</div>
               <div class="line1"></div>
             </div>
             <ul class="ulcor">
               <li class="support-item">
                 <span class="icon"><img src="./[email protected]"></span>
                 <span class="text" v-if="seller.supports">在线支付满28减5,满50减10</span>
               </li>
               <li class="support-item">
                 <span class="icon"><img src="./[email protected]"></span>
                 <span class="text" v-if="seller.supports">单人精彩赛</span>
               </li>
               <li class="support-item">
                 <span class="icon"><img src="./[email protected]"></span>
                 <span class="text" v-if="seller.supports">清肺雪梨汤8折抢购</span>
               </li>
               <li class="support-item">
                 <span class="icon"><img src="./[email protected]"></span>
                 <span class="text" v-if="seller.supports">特价饮品八折抢购</span>
               </li>
               <li class="support-item">
                 <span class="icon"><img src="./[email protected]"></span>
                 <span class="text" v-if="seller.supports">单人特色套餐</span>
               </li>
             </ul>
          <div class="title">
            <div class="line"></div>
            <div class="text">商家公告</div>
            <div class="line1"></div>
          </div>
          <div class="fade-bottom">
             <p>{{seller.bulletin}}</p>
             </div>
            </div>
         </div>
        <div class="del" @click="hideDetails">
          <img src="./删除.png">
        </div>
      </div>
      </transition>
      </div>
</template>

<script>
import xing from '../star/star.vue'
export default {
  props: ['seller'],
  components: {
    xing
  },
  data () {
    return {
      detailshow: false
    }
  },
  methods: {
    showDetails () {
      this.detailshow = true
    },
    hideDetails () {
      this.detailshow = false
    }
  }
}
</script>

<style scoped>
.moster{
  position:relative;
}
.one{
  width:100%;
  height:2.68rem;
  overflow:hidden;
}
.one1{
  width:100%;
  height:2.68rem;
  overflow:hidden;
  filter: blur(2px);
}
.header{
  background:rgba(7,17,27,0.5);
  width:100%;
  height:2.68rem;
  position:absolute;
  top:0.0rem;
}
.tu-b{
  width:100%;
  height:2.68rem;
  filter: blur(10px);
}
.header span{
  font-size:0.32rem;
}
.tu{
  position:absolute;
  left:0.48rem;
  top:0.48rem;
  width:1.28rem;
  height:1.28rem;
  border-radius:0.04rem;
}
.main{
  width:100%;
  height:2.12rem;
  position:relative;
}
.tu1{
  height:1.28rem;
  width:4.5rem;
  position: absolute;
  left:2.08rem;
  top:0.48rem;
}
.p1 img{
  position: absolute;
  height:0.36rem;
  width:0.6rem;
  top:0.05rem;
}
.p1 span{
  margin-left:0.72rem;
}
.p1{
  height:0.46rem;
  position: relative;
  color:rgb(255,255,255);
  font-size:0.32rem;
  font-weight:bold;
  line-height:0.46rem;
}
.p2{
  height:0.36rem;
  color:rgb(255,255,255);
  font-size:0.24rem;
  font-weight:200;
  line-height:0.36rem;
}
.p3{
  height:0.36rem;
  color:rgb(255,255,255);
  position:relative;
}
.p3 img{
  height:0.3rem;
  width:0.3rem;
  position:absolute;
  top:0.03rem;
}
.p3 span{
  left:0.38rem;
  top:0.08rem;
  font-size:0.2rem;
  font-weight:200;
  position: absolute;
}
.tu2{
  position: absolute;
  text-align:center;
  bottom:0.36rem;
  right:0.24rem;
  height:0.48rem;
  width:0.9rem;
  font-size:0.3rem;
  background-color:rgba(0,0,0,0.2);
  color:rgb(255,255,255);
  line-height:0.48rem;
  border-radius: 0.5rem;
}
.tu2 span{
  margin-left:0.04rem;
}
.tu2 img{
  height:0.3rem;
  width:0.3rem;
}
.tu5 img{
  height:0.3rem;
  width:0.3rem;
}
.tu3{
  position: absolute;
  height:0.56rem;
  width:95%;
  font-weight:200;
  font-size:0.2rem;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  line-height:0.56rem;
  background-color:rgba(7,17,27,0.2);
  color:rgb(255,255,255);
}
.tu3 span{
  margin-left:0.82rem;
  font-size:0.2rem;
}
.tu4{
  position:absolute;
  left:0.24rem;
  top:0.16rem;
  height:0.25rem;
  width:0.50rem;
}
.tu5{
  position:absolute;
  left:95%;
  height:0.56rem;
  width:5%;
  font-weight:200;
  font-size:0.3rem;
  line-height:0.56rem;
  background-color:rgba(7,17,27,0.2);
  color:rgb(255,255,255);
}
.gray-enter-active,.gray-leave-active{
  opacity:1.0;
  background:rgba(7,17,27,0.8);
}
.gray-enter,.gray-leave-to{
  opacity:0.0;
  background:rgba(7,17,27,0.0);
}
.fade-box{
  position:fixed;
  z-index:1000000;
  width:100%;
  height:100%;
  top:0;
  left:0;
  transition:1s;
  overflow:auto;
  background-color:rgba(7,17,27,0.8);
  backdrop-filter:blur(100px);
}
.fade-top{
  min-height:100%;
  width:100%;
  margin-top:1.28rem;
  margin-bottom:1.28rem;
}
.nametop{
  font-size:0.50rem;
  font-weight:800;
  width:80%;
  margin:0 auto;
  text-align:center;
  color:rgb(255,255,255);
  line-height:0.50rem;
}
.star{
height:0.48rem;
width:70%;
margin-left:7%;
margin-top:0.32rem;
}
.mainbox{
  padding-left:0.72rem;
  padding-right:0.72rem;
}
.title{
  height:1.28rem;
  width:100%;
  line-height:1.28rem;
  display:flex;
  position: relative;
  justify-content:space-around;
}
.line{
position: absolute;
width:2.24rem;
height:0.03rem;
top:50%;
left:0%;
background-color:rgba(255,255,255,0.2);
}
.line1{
position: absolute;
width:2.24rem;
height:0.03rem;
top:50%;
right:0%;
background-color:rgba(255,255,255,0.2);
}
.text{
font-size:0.35rem;
font-weight:800;
color:white;
}
.ulcor{
height:5.0rem;
padding-left:0.24rem;
padding-right:0.24rem;
}
.support-item .icon{
position:absolute;
top:-0.1rem;
left:0.0rem;
height:0.35rem;
width:0.35rem;
}
.support-item{
position: relative;
height:0.5rem;
line-height:0.5rem;
margin-top:0.44rem;
}
.support-item .text{
margin-left:0.87rem;
font-size:0.35rem;
font-weight:200;
color:white;
}
.fade-bottom{
line-height: 0.75rem;
font-size:0.35rem;
font-weight:200;
color:white;
}
.del{
  position:relative;
  width:0.68rem;
  height:0.68rem;
  text-align:center;
  line-height: 0.68rem;
  margin:-0.64rem auto 0 auto;
  clear:both;
}
.del>img{
  width:0.68rem;
  height:0.68rem;
}
</style>

(5):ratings

<template >
  <div class="rating-all"  ref="ratings">
    <!--里面满足一个div 就行-->
    <div>
    <div>
    <div class="rating-main">
    <div class="top-title">
    <div class="score-left">
      <div class="score">{{seller.score}}</div>
      <div>综合评分</div>
      <div>高于周边商家{{seller.rankRate}}</div>
    </div>
    <div class="score-right">
      <div>服务态度 <xing class="xing-one"></xing> <span>{{seller.foodScore}}</span></div>
      <div>服务态度 <xing class="xing-one1"></xing> <span>{{seller.serviceScore}}</span></div>
      <div>送达时间 <span id="score-right-color">{{seller.deliveryTime}}分钟</span></div>
    </div>
    </div>
    <div class="classic-title-before"></div>
      <div class="classic-main">
      <p class="main-one">商品评价</p>
      <div class="classic-all">
        <div class="classic-box">
          <div class="all-one" @click="coose()">全部 24</div>
          <div class="all-two" @click="xlose()">推荐 18</div>
          <div class="all-three" @click="zlose()">吐槽 6</div>
        </div>
      </div>
      <div class="classic-ok">
        <div>
          <span class="ok-left" @click="allcome()">
            <span><i class="icon iconfont icon-gou" v-show="!aain"></i></span>
              <span><i class="icon iconfont icon-gou" style="color:lawngreen" v-show="aain"></i></span>
          </span>
          <span class="ok-one" >只看有内容的评价</span>
        </div>
      </div>
      <div class="classic-ratings" v-for="(one,inse) in rating" :key="inse" v-show="one.nicefood">
              <div class="ratings-one">
                <div><img :src="one.avatar" class="one-pic"></div>
                <div class="one-two">
                  <p>{{one.username}}</p>
                  <p class="send-to"><xing class="xing-two"></xing>{{one.deliveryTime}}送达</p>
                </div>
                <div class="timer">{{one.rateTime | forDate}}</div>
              </div>
              <div class="ratings-two">
                <span>{{one.text}}</span>
                <div class="icon-go">
              <i class="icon iconfont icon-bad" v-show="one.score<=3" style="color:gray"></i>
              <i class="icon iconfont icon-good" style="color:deepskyblue;" v-show="one.score>3"></i>
              <div class="car-info"><div class="car-rec" v-for="(kk,icess) in one.recommend" :key="icess">{{kk}}</div></div>
            </div>
          </div>
      </div>
    </div>
  </div>
    </div>
  </div>
  </div>
</template>
<script>
import Vue from 'vue'
import BScroll from 'better-scroll'
import xing from '../star/star.vue'
export default {
  components: {
    xing
  },
  data () {
    return {
      goods: [],
      seller: [],
      rating: [],
      aain: false
    }
  },
  filters: {
    forDate (val) { // 自动把标准时间转发
      var value = new Date(val)
      var year = value.getFullYear()
      var month = value.getMonth() + 1
      var day = value.getDate()
      var hour = value.getHours()
      var minutes = value.getMinutes()
      var seconds = value.getSeconds()
      return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds
    }
  },
  created () { // 在这个时刻向后台请求数据
    this.axios.get('static/data.json')
      .then((res) => {
        // DOM未更新完成
        this.goods = res.data.goods
        this.seller = res.data.seller
        this.rating = res.data.ratings
        this.$nextTick(() => {
          this._initScroll()
        })
      })
    setTimeout(() => {
      for (let i = 0; i < this.rating.length; i++) {
        if (!this.rating[i].nicefood) {
          Vue.set(this.rating[i], 'nicefood', true)
        }
      }
      //  可以在app页面吧数据绑定
    }, 200)
  },
  methods: {
    coose () {
      for (let i = 0; i < this.rating.length; i++) {
        this.rating[i].nicefood = true
      }
      this.success = 0
      if (this.aain) {
        this.aain = !this.aain
        for (let i = 0; i < this.rating.length; i++) {
          if (this.rating[i].text) {
            this.rating[i].nicefood = true
          } else {
            this.rating[i].nicefood = false
          }
        }
      }
    },
    xlose () {
      for (let i = 0; i < this.rating.length; i++) {
        if (this.rating[i].rateType === 0) {
          this.rating[i].nicefood = true
        } else {
          this.rating[i].nicefood = false
        }
      }
      this.success = 1
      if (this.aain) {
        this.aain = !this.aain
        for (let i = 0; i < this.rating.length; i++) {
          if (this.rating[i].text) {
            this.rating[i].nicefood = true
          } else {
            this.rating[i].nicefood = false
          }
        }
      }
    },
    zlose () {
      for (let i = 0; i < this.rating.length; i++) {
        if (this.rating[i].rateType === 1) {
          this.rating[i].nicefood = true
        } else {
          this.rating[i].nicefood = false
        }
      }
      this.success = 2
      if (this.aain) {
        this.aain = !this.aain
        for (let i = 0; i < this.rating.length; i++) {
          if (this.rating[i].text) {
            this.rating[i].nicefood = true
          } else {
            this.rating[i].nicefood = false
          }
        }
      }
    },
    allcome () {
      this.aain = !this.aain
      for (let i = 0; i < this.rating.length; i++) {
        if (this.rating[i].text) {
          this.rating[i].nicefood = true
        } else {
          this.rating[i].nicefood = false
        }
      }
      if (this.success === 0) {
        this.coose()
        this.aain = !this.aain
      }
      if (this.success === 1) {
        this.xlose()
        this.aain = !this.aain
      }
      if (this.success === 2) {
        this.zlose()
        // alert(2)
        this.aain = !this.aain
      }
    },
    _initScroll () {
      this.rat = new BScroll(this.$refs.ratings, {
        probeType: 3,
        click: true
      })
    }
  }
}
</script>
<style scoped>
.icon-go{
 margin-top:0.16rem;
}
.car-info{
  margin-left:0.3rem;
  margin-top:-0.4rem;
}
.car-rec{
  display:inline-block;
  width:1rem;
  margin-left:0.16rem;
  background-color:#fff;
  border:0.01rem solid rgba(7,17,27,0.1);
  height:0.32rem;
  font-size:0.18rem;
  line-height: 0.32rem;
  text-align:center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.one-two{
 margin-left: 0.24rem;
}
.send-to{
  width:2rem;
  height:0.3rem;
  margin-top:-0.1rem;
  font-size:0.2rem;
  margin-left:1.7rem;
  position: relative;
}
.timer{
  font-size:0.2rem;
  font-weight:200;
  width:3.5rem;
  text-align:right;
  color:rgb(147,153,159)
}
.xing-two{
  transform:scale(0.4);
  position:absolute;
  left:-3.15rem;
  top:-0.35rem;
}
.one-pic{
 height:0.56rem;
 width:0.56rem;
 border-radius:50%;
}
.rating-all{
  position:fixed;
  top:3.48rem;
  bottom:1.16rem;
  width:100%;
  overflow:hidden;
}
.top-title{
  width:100%;
  height:2.42rem;
  display:flex;
  background-color: #fff;
}
.score-left{
  width:2.75rem;
  height:1.5rem;
  margin-top:0.36rem;
  text-align:center;
  border-right:0.01rem solid rgb(147,157,159)
}
.score-left div:nth-of-type(1){
  font-size:0.4rem;
  color:rgb(255,153,0)
}
.score-left div:nth-of-type(2){
  font-size:0.24rem;
  color:rgb(7,17,27);
  margin-top:0.06rem;
}
.score-left div:nth-of-type(3){
  font-size:0.24rem;
  margin-top:0.1rem;
  color:rgb(147,153,159)
}
.score-right{
   width:4.74rem;
   height:1.5rem;
   position: relative;
   padding:0.36rem 0.48rem;
   border-right:rgb(7,17,27)
 }
.score-right div{
  font-size:0.24rem;
  color:rgb(7,17,27);
}
#score-right-color{
  color:rgb(147,153,159);
  margin-left:0.24rem;
}
.score-right div span{
  font-size:0.24rem;
  color:rgb(255,253,0);
  margin-left:2.64rem;
}
.score-right div:nth-of-type(2){
  margin-top:0.16rem;
}
.score-right div:nth-of-type(3){
  margin-top:0.16rem;
}
.xing-one{
   transform:scale(0.6);
   position: absolute;
   top:0rem;
}
.xing-one1{
  transform:scale(0.6);
  position: absolute;
  top:0.5rem;
}
.classic-title-before{
  height:0.32rem;
  width:100%;
  background-color: #f3f5f7;
  border-top:0.03rem solid rgba(7,17,27,0.1);
  border-bottom:0.03rem solid rgba(7,17,27,0.1);
}
.main-one{
  font-size:0.28rem;
  color:black;
  font-weight:700;
  height:0.28rem;
  left:0.36rem;
  margin-top:0.36rem;
  margin-left:0.36rem;
  padding-bottom:0.24rem;
}
.classic-all{
  height:0.75rem;
  width:90.4%;
  margin-left:0.36rem;
  margin-right:0.36rem;
  border-bottom:0.02rem solid rgba(7,17,27,0.1);
}
.classic-box{
  width:4.0rem;
  height:0.5rem;
  display:flex;
  justify-content: space-between;
}
.all-one{
  line-height:0.5rem;
  color:white;
  height:0.5rem;
  width:1.3rem;
  font-size:0.25rem;
  text-align:center;
  border-radius: 0.02rem;
  background-color:rgb(0,160,220);
}
.all-two{
  line-height:0.5rem;
  color:rgb(77,85,93);
  height:0.5rem;
  width:1.3rem;
  text-align:center;
  font-size:0.25rem;
  border-radius: 0.02rem;
  background-color:rgba(0,160,220,0.2);
}
.all-three{
  line-height:0.5rem;
  color:rgb(77,85,93);
  height:0.5rem;
  width:1.3rem;
  text-align:center;
  font-size:0.25rem;
  border-radius: 0.02rem;
  background-color:rgba(77,85,93,0.2);
}
.classic-ok{
  border-bottom:0.03rem solid rgba(7,17,27,0.1);
  height:0.8rem;
  line-height:0.8rem;
  font-size:0.24rem;
  color:rgb(147,153,159);
}
.ok-left{
  font-size:0.3rem;
  margin-left:0.36rem;
}
.classic-ratings{
  width:90.4%;
  padding:0.36rem;
}
.ratings-one{
  font-size:0.23rem;
  color:rgb(147,153,159);
  display:flex;
  justify-content: space-between;
}
.ratings-two{
  font-size:0.25rem;
  color:rgb(7,17,27);
  margin-top:0.12rem;
  padding:0.12rem 0.0rem 0.16rem 0.76rem;
}
</style>

(6):seller

<template >
  <div ref="tong" class="seller-main">
    <div>
      <div class="title-one">
        <p class="first-p">{{seller.name}}</p>
        <p class="second-p"><xing class="xing-one"></xing><span class="wenzi-one">（{{seller.ratingCount}}）</span><span class="wenzi-two">月售{{seller.sellCount}}单</span></p>
        <div class="love-heart" @click="bian()">
          <p>
            <i class="icon iconfont icon-aixin" v-show="classmain"></i>
            <i class="icon iconfont icon-aixin" style="color:red" v-show="!classmain"></i>
          </p>
          <p >
            <span v-show="classmain">&nbsp;收藏</span>
            <span v-show="!classmain">已收藏</span>
          </p>
        </div>
      </div>
      <div class="title-two">
        <div class="box-same">
          <p>起送价</p>
          <p>{{seller.minPrice}}<span class="yuan">元</span></p>
        </div>
        <div class="box-same">
          <p>商家配送</p>
          <p>{{seller.deliveryPrice}}<span class="yuan">元</span></p>
        </div>
        <div class="box-same1">
          <p>平均配送时间</p>
          <p>{{seller.deliveryTime}}<span class="yuan">分钟</span></p>
        </div>
      </div>
      <div class="classic-title-before"></div>
      <div class="one-cup">
        <p id="only-one">公告与活动</p>
        <p class="purple-color">{{seller.bulletin}}</p>
        <p><img src="./[email protected]"><span>在线支付满28减5，满50减10</span></p>
        <p><img src="./[email protected]"><span>单人精彩赛</span></p>
        <p><img src="./[email protected]"><span>清肺雪梨汤8折抢购</span></p>
        <p><img src="./[email protected]"><span>特价饮品八折抢购</span></p>
        <p><img src="./[email protected]"><span>单人精彩套餐</span></p>
        <p><img src="./[email protected]"><span>该商家支持发票,请下单写好发票抬头</span></p>
        <p><img src="./[email protected]"><span>已加入“外卖保”计划,食品安全保障</span></p>
      </div>
      <div class="classic-title-before"></div>
      <div class="rel-seller">
        <p class="same-mess">商家实景</p>
       <div ref="ation">
         <div class="pic-main">
           <div class="pic-onemore">
             <img :src="seller.pics[0]" v-if="seller.pics">
             <img :src="seller.pics[1]" v-if="seller.pics">
             <img :src="seller.pics[2]" v-if="seller.pics">
             <img :src="seller.pics[3]" v-if="seller.pics">
           </div>
         </div>
       </div>
      </div>
      <div class="classic-title-before"></div>
      <div>
        <p class="same-mess">商家信息</p>
        <p v-if="seller.infos" class="left-pad">{{seller.infos[0]}}</p>
        <p v-if="seller.infos" class="left-pad">{{seller.infos[1]}}</p>
        <p v-if="seller.infos" class="left-pad">{{seller.infos[2]}}</p>
        <p v-if="seller.infos" class="left-pad">{{seller.infos[3]}}</p>
      </div>
    </div>
  </div>
</template>
<script>
import BScroll from 'better-scroll'
import xing from '../star/star.vue'
export default {
  components: {
    xing
  },
  data () {
    return {
      goods: [],
      seller: [],
      rating: [],
      classmain: false
    }
  },
  created () { // 在这个时刻向后台请求数据
    this.axios.get('static/data.json')
      .then((res) => {
        // DOM未更新完成
        this.goods = res.data.goods
        this.seller = res.data.seller
        this.$nextTick(() => {
          this._initScroll()
        })
      })
  },
  methods: {
    bian () {
      this.classmain = !this.classmain
    },
    _initScroll () {
      this.rat = new BScroll(this.$refs.tong, {
        probeType: 3,
        click: true
      })
      this.rats = new BScroll(this.$refs.ation, {
        startX: 0,
        scrollX: true,
        click: true,
        eventPassthrough: 'vertical'
      })
    }
  }
}
</script>

<style scoped>
.one-cup p img{
  height:0.32rem;
  position: absolute;
  top:0.15rem;
}
.left-pad{
  width:85.4%;
  border-bottom:0.01rem solid rgba(7,17,27,0.1);;
  margin-left:0.36rem;
  height:0.24rem;
  font-size:0.24rem;
  color:rgb(7,17,27);
  padding:0.32rem 0.2rem;

}
.one-cup{
  width:90.4%;
  margin-left:0.36rem;
  padding-top:0.36rem;
}
#only-one{
  font-size:0.28rem;
  color:black;
  font-weight:700;
}
.same-mess{
  font-size:0.28rem;
  color:black;
  font-weight:700;
  margin-top:0.36rem;
  margin-left:0.36rem
}
.one-cup p:nth-of-type(2){
  font-size:0.24rem;
  color:rgb(240,20,20);
  padding:0.16rem 0.24rem 0.32rem 0.24rem;
  border-bottom:0.01rem solid rgba(7,17,27,0.1);
}
.one-cup p{
  position: relative;
  font-size:0.24rem;
  color:rgb(7,17,27);
  line-height:0.32rem;
  padding:0.16rem 0.24rem 0.32rem 0.24rem;
  border-bottom:0.01rem solid rgba(7,17,27,0.1);
}
.one-cup p span{
  margin-left:0.5rem;
}
.title-two{
  height:0.78rem;
  display:flex;
  padding:0.36rem 0;
}
.box-same{
  height:0.78rem;
  width:33.3%;
  text-align:center;
  border-right:0.01rem solid rgba(7,17,27,0.1);
}
.box-same p:nth-of-type(1){
  font-size:0.2rem;
  color:rgb(77,85,93)
}
.box-same1 p:nth-of-type(1){
  font-size:0.2rem;
  color:rgb(77,85,93)
}
.box-same p:nth-of-type(2){
  margin-top:0.08rem;
  font-size:0.48rem;
  color:black;
  font-weight:200;
}
.box-same1 p:nth-of-type(2){
  margin-top:0.08rem;
  font-size:0.48rem;
  color:black;
  font-weight:200;
}
.box-same span{
  font-size:0.2rem;
 }
.box-same1 span{
  font-size:0.2rem;
}
.box-same1{
  height:0.78rem;
  width:33.3%;
  text-align:center;
}
.love-heart{
  position: absolute;
  right:0;
  height:0.8rem;
  top:0.36rem;
  text-align:center;
}
.xing-one{
  position: absolute;
  transform:scale(0.4);
  left:-1.45rem;
  top:-0.35rem;
}
.first-p{
  font-size:0.28rem;
  color:black;
  font-weight:700;
}
.second-p{
  font-size:0.20rem;
  margin-top:0.16rem;
  color:black;
  position: relative;
}
.wenzi-one{
  margin-left:1.56rem;
}
.wenzi-two{
  margin-left:0.15rem;
}
.title-one{
  height:1.26rem;
  width:90.4%;
  position: relative;
  margin-left:0.36rem;
  padding-top:0.36rem;
  border-bottom:0.01rem solid  rgba(7,17,27,0.1);
}
.pic-main{
 width:100%;
 height:1.8rem;
 padding:0.24rem 0 0.24rem  0.36rem;
}
.pic-onemore{
  display:flex;
  width:9rem;
}
.pic-onemore img{
 width:2.4rem;
 height:1.8rem;
 display:block;
 margin-left:0.12rem;
}
.seller-main{
  position:fixed;
  top:3.48rem;
  bottom:1.16rem;
  width:100%;
  overflow:hidden;
}
.classic-title-before{
  height:0.32rem;
  width:100%;
  background-color: #f3f5f7;
  border-top:0.03rem solid rgba(7,17,27,0.1);
  border-bottom:0.03rem solid rgba(7,17,27,0.1);
}
</style>

(7):shopcar

<template>
  <div>
      <div class="big-bottom">
        <!--<div class="main-pic" v-show="obq"><img src="./QQ图片20180830134745.jpg" class="center-pic"></div>-->
        <div class="bottom-left"></div>
          <div class="big-circle"></div>
          <!--<div class="small-circle" :class="{'highlights':totalPrice()>0}" @click="toggleList">-->
            <!--<i class="icon iconfont icon-gouwuche" :class="{'highlight':totalPrice()>0}"></i>-->
          <!--</div>-->
          <!--<div class="num" v-show="totalCount()>0">{{totalCount()}}</div>-->
          <!--<div class="total-price" :class="{'hightlight':totalPrice()>0}">￥<span>{{totalPrice()}}</span></div>-->
          <!--<div class="send" >另需配送费￥{{deliveryPrice}}元</div>-->
          <!--<div class="bottom-right" :class="{'payfor':totalPrice()>minPrice}" @click="pay">-->
            <!--{{payDesc()}}-->
          <!--</div>-->
          <div class="small-circle"  @click="toggleList()" >
            <i class="icon iconfont icon-gouwuche" :class="{'highlights':totalPrice>0}"></i>
          </div>
            <div class="num"  v-show="totalCount>0">{{totalCount}}</div>
          <div class="total-price">￥<span class="lastone">{{totalPrice}}</span></div>
          <div class="send" >另需配送费￥{{deliveryPrice}}元</div>
          <div class="bottom-right" :class="{'payfor':totalPrice>minPrice}">
          <span v-show="totalPrice=0">￥&nbsp;{{minPrice + deliveryPrice}}元起送</span>
          <span v-show="totalPrice<minPrice">还差￥&nbsp;{{minPrice - totalPrice + deliveryPrice}}元起送</span>
          <span v-show="totalPrice>0 | totalPrice>minPrice" @click="pay" >￥ &nbsp;{{totalPrice + deliveryPrice}}去结算</span>
          </div>
        <!--滚动小球-->
        <!--<div class="ball=container">-->
            <!--<div v-for="ball in balls" :key="ball">-->
              <!--<transition name="drop" @before-enter="beforeDrop" @enter="dropping" @after-enter="afterDrop">-->
                <!--<div class="ball" v-show="ball.show">-->
                  <!--<div class="inner inner-hook"></div>-->
                <!--</div>-->
              <!--</transition>-->
            <!--</div>-->
        <!--</div>-->
        <div class="shortcar-list" v-show="listShow">
          <div class="header">
            <div class="title">购物车</div>
            <div class="empty" @click="empty">清空</div>
          </div>
          <div class="list-content" ref="listcontent">
            <div>
              <div v-for="(fods,index) in  good" :key="index" class="abc">
                <div v-for="(food,inde) in fods.foods" :key="inde" class="food" v-if="food.count">
                  <div class="name">{{food.name}}</div>
                  <div class="price">￥{{food.price}}</div>
                  <div class="cartcontrol-wrapper">
                    <cartcontrol :food="fods.foods" :i="inde"></cartcontrol>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <transition name="fade">
          <div class="list-mask" v-show="listShow"></div>
        </transition>
      </div>
  </div>
</template>
<script>
import BScroll from 'better-scroll'
import cartcontrol from '../cartcontrol/cartcontrol.vue'
// https://blog.csdn.net/qq_22317389/article/details/80391336
export default {
  components: {
    cartcontrol
  },
  data () {
    return {
      //   ball: [
      //     {
      //       show: false
      //     },
      //     {
      //       show: false
      //     },
      //     {
      //       show: false
      //     },
      //     {
      //       show: false
      //     },
      //     {
      //       show: false
      //     }
      //   ],
      //   dropBalls: [],
      listShow: false
    }
  },
  props: ['good', 'deliveryPrice', 'minPrice'],
  // props: {
  //   selectFoods: {
  //     type: Array,
  //     default () {
  //       return [{
  //         price: 10,
  //         count: 1
  //       }
  //       ]
  //     }
  //   },
  //   deliveryPrice: {
  //     type: Number,
  //     dafault: 0
  //   },
  //   minPrice: {
  //     type: Number,
  //     dafault: 0
  //   }
  // },
  computed: {
    totalPrice () {
      let yy = 0
      if (this.good !== '') { // 判断不为空。
        // console.log(this.good)
        for (let i = 0; i < this.good.length; i++) {
          // console.log(this.good[i])
          for (let k = 0; k < this.good[i].foods.length; k++) { // 要判断count是否
            if (this.good[i].foods[k].count) {
              yy += this.good[i].foods[k].price * this.good[i].foods[k].count
            } else {
              this.$set(this.good[i].foods[k], 'count', 0)
              yy += this.good[i].foods[k].price * this.good[i].foods[k].count
            }
          }
        }
        return yy
      } else {
        return 0
      }
    },
    totalCount () {
      let xx = 0
      for (let i = 0; i < this.good.length; i++) {
        // console.log(this.good[i])
        for (let k = 0; k < this.good[i].foods.length; k++) { // 要判断count是否
          if (this.good[i].foods[k].count) {
            xx += this.good[i].foods[k].count
          }
        }
      }
      return xx
    }
  },
  // payDesc () {
  //   let text = ' '
  //   if (this.totalCount > 0) {
  //     if (this.totalPrice() === 0) {
  //       // console.log(this.totalPrice)
  //       return text === '￥' + this.minPrice + '元起送'
  //     } else if (this.totalPrice() < this.minPrice) {
  //       let diff = this.minPrice - this.totalPrice()
  //       return text === '还差' + diff + '元起送'
  //     } else {
  //       return text === '去结算'
  //     }
  //   }
  //   return text
  // }
  // },
  //   listShow () { // https://coding.imooc.com/learn/questiondetail/72321.html这是新版 Vue.js 的报警，不要在计算属性中做赋值操作， 可以尝试用 watch 来实现类似的逻辑
  //     if (!this.totalCount) { // 因为这样是只读的，要更改，就报错了，想更改，就要用get和set方法
  //       this.fold = true
  //       return false
  //       // listShow将fold的状态传回给shoplist的v-show，通过v-show来决定购物车详情的展开或折叠，同时listShow还设置没有商品时是不可展开的（ this.fold = true）。
  //     }
  //     let show = !this.fold
  //     if (show) {
  //       this.$nextTick(() => { // 有列表有表项的时候才会有滚动，取到列表DOM，listContent
  //         if (!this.scroll) {
  //           this.scroll = new BScroll(this.$refs.listContent, {
  //             click: true
  //           })
  //         } else {
  //           this.scroll.refresh()
  //         }
  //       })
  //     }
  //     return show
  //   }
  // },
  // created () {
  //   setTimeout(() => {
  //     this._initScroll()
  //   }, 200)
  // },
  methods: {
    //   // drop (el) {
    //   //   for (let i = 0; i < this.balls.length; i++) {
    //   //     let ball = this.balls[i]
    //   //     if (!ball.show) {
    //   //       balls.show = true
    //   //       balls.el = el
    //   //     }
    //   //   }
    //   // },
    // totalPrice () {
    //   let yy = 0
    //   console.log(yy)
    //   if (this.good !== '') { // 判断不为空。
    //     // console.log(this.good)
    //     for (let i = 0; i < this.good.length; i++) {
    //       // console.log(this.good[i])
    //       for (let k = 0; k < this.good[i].foods.length; k++) { // 要判断count是否
    //         if (this.good[i].foods[k].count) {
    //           yy += this.good[i].foods[k].price * this.good[i].foods[k].count
    //         } else {
    //           this.$set(this.good[i].foods[k], 'count', 0)
    //           yy += this.good[i].foods[k].price * this.good[i].foods[k].count
    //         }
    //       }
    //     }
    //     return yy
    //   } else {
    //     return 0
    //   }
    // },
    // totalCount () {
    //   let xx = 0
    //   for (let i = 0; i < this.good.length; i++) {
    //     // console.log(this.good[i])
    //     for (let k = 0; k < this.good[i].foods.length; k++) { // 要判断count是否
    //       if (this.good[i].foods[k].count) {
    //         xx += this.good[i].foods[k].count
    //       }
    //     }
    //   }
    //   return xx
    // },
    _initScroll () {
      // 在methods属性里面定义一个better-scroll的实例初始化函数；在created()函数里面用vm.$nextTick()中初始化这个实例
      // 初始化需要滚动的对象,通过vm.$refs可以获取到在<template>中设置ref=goodlwrapper属性的元素节点
      if (!this.leScroll) { // 这一步是为了实时更新购物车里的数据，这样子不会出现购物车栏目里点击加减数量不对
        this.leScroll = new BScroll(this.$refs.listcontent, {
          probeType: 3,
          click: true
        })
      } else {
        this.leScroll.refresh()
      }
    },
    toggleList () {
      // if (!this.totalCount) {
      //   return
      //   // 购物车没有商品的时候不可点击
      // }
      setTimeout(() => {
        this._initScroll()
      }, 200)
      this.listShow = !this.listShow
      // 当前是收起状态就展开，展开状态就收起
    },
    //   pay () {
    //     if (this.totalPrice < this.minPrice) {
    //       return
    //     }
    //     window.alert('￥支付{this.totalPrice}元')
    //   },
    // hideList () {
    //   this.fold = true // 点击mark层，购物车详情列表被收回
    // }
    empty () {
      this.toggleList()
      for (let i = 0; i < this.good.length; i++) {
        // console.log(this.good[i])
        for (let k = 0; k < this.good[i].foods.length; k++) {
          if (this.good[i].foods[k].count) {
            this.$delete(this.good[i].foods[k], 'count')
          }
        }
      }
    },
    pay () {
      alert('购买成功')
    }
  }
}
</script>
<style scoped>
.fade-enter-active,.fade-leave-active{
  transform: translate3d(0,0,0);
}
.fade-enter-leave,.fade-leave-active{
  transform: translate3d(0,-1000%,0) ;
}
.center-pic{
  position: absolute;
  transform: translate3d(-50%,-50%,0);
  left:50%;
  top:50%;
  width: 50%;
  height:50%;
}
.main-pic{
  position: absolute;
  z-index:10000;
  background-color: red;
  width: 100%;
  height:100vh;
  top:-91vh;
}
.lastone{
  color:red;
  font-weight: 700;
  margin-left:0.1rem;
}
.shortcar-list{
  width:100%;
  height:5rem;
  background-color:#fff;
  position:absolute;
  top:-5rem;
  transition:1s;
  z-index:-1;
}
.header{
  height:0.8rem;
  width:100%;
  display:flex;
  justify-content: space-between;
  background-color:#f3f5f7;
  border-bottom:0.03rem solid rgba(7,17,27,0.1)
}
.title,.empty{
  height:0.8rem;
  line-height:0.8rem;
  width:15%;
}
.food{
  position:relative;
  height:0.96rem;
  width:90%;
  padding:0 5% 0 5%;
  border-bottom:0.01rem solid rgba(7,17,27,0.1);
}
.name{
  height:0.96rem;
  line-height:0.96rem;
  text-align:left;
  width:50%;
  font-size:0.28rem;
  color:rgb(7,17,27);
}
.price{
  position: absolute;
  right:2rem;
  height:0.96rem;
  line-height:0.96rem;
  text-align:center;
  width:1rem;
  font-weight:700;
  top:0rem;
  font-size:0.48rem;
  color:rgb(240,20,20);
}
.cartcontrol-wrapper{
  position:absolute;
  right:0.26rem;
  top:0.05rem;
}
.empty{
  text-align:right;
  margin-right:0.36rem;
  font-size:0.24rem;
  color:rgb(0,160,220);
  cursor:pointer;
  width:10%;
}
.list-content{
  width:100%;
  background-color:#fff;
  height:4rem;
  overflow: hidden;
}

.title{
  text-align:left;
  margin-left:0.36rem;
  font-size:0.28rem;
  font-weight:200;
  color:rgb(7,17,27);
}
.list-mask{
  width:100%;
  height:100vh;
  top:-1100%;
  background-color:rgba(7,17,27,0.6);
  filter:blur(10px);
  position:absolute;
  transition:1s;
  z-index:-2;
}
.icon{
  font-size:0.6rem;
  color:gray;
}
.highlights{
  color:#00A0DC;
  transition:0.1s;
}
.highlight{
  background-color:white;
  transition:0.1s;
}
.payfor{
  background-color:forestgreen !important;
  color:white !important;
}
.big-bottom{
  position:absolute;
  width:100%;
  display:flex;
  z-index:200;
  height:1.16rem;
}
.bottom-left{
  width:72%;
  position:relative;
  height:1.16rem;
  background-color: #141d27;
}
.bottom-right{
  width:28%;
  background-color:#2B333B;
  font-size:0.24rem;
  height:1.16rem;
  color:#979A9C;
  line-height:1.16rem;
  font-weight:700;
  text-align:center;
}
.big-circle{
  height:1.36rem;
  width:1.36rem;
  border-radius:50%;
  position:absolute;
  background-color:#141d27;
  left:0.24rem;
  top:-0.2rem;
}
.small-circle{
  height:1.12rem;
  width:1.12rem;
  border-radius:50%;
  position:absolute;
  background-color:#2B343C;
  left:0.36rem;
  top:-0.08rem;
  line-height:1.12rem;
  text-align:center;
}
.total-price{
  width:1.44rem;
  height:0.70rem;
  top:0.24rem;
  color:#979A9C;
  position: absolute;
  left:1.2rem;
  font-weight:700;
  text-align:center;
  font-size:0.30rem;
  line-height: 0.70rem;
  border-right:0.02rem  solid #283039;
}
.send{
  width:1.95rem;
  height:0.70rem;
  top:0.24rem;
  color:#979A9C;
  position: absolute;
  left:40%;
  text-align:center;
  line-height: 0.70rem;
}
.num{
  position: absolute;
  left:0.88rem;
  top:-0.12rem;
  background-color: red;
  text-align:center;
  height:0.32rem;
  width:0.48rem;
  border-radius:0.1rem;
  font-size:0.18rem;
  font-weight:700;
  color:white;
  line-height:0.32rem;
  box-shadow:0 0.04rem 0.08rem 0 rgba(0,0,0,0.4);
}
</style>

(8):star

<template>
  <div class="evaStar">
    <ul class="star">
      <li v-for="(itemClass,index) in itemClasses" :class="itemClass" class="star-item" :key="index"></li>
    </ul>
  </div>
</template>
<script>
export default{
  data () {
    return {
      score: 4
    }
  },
  computed: {
    itemClasses () {
      let result = []
      let score = Math.floor(this.score * 2) / 2
      let hasDecimal = score % 1 !== 0
      let integer = Math.floor(score)
      for (let i = 0; i < integer; i++) {
        result.push('on')
      }
      if (hasDecimal) {
        result.push('half')
      }
      while (result.length < 5) {
        result.push('off')
      }
      return result
    }
  }
}
</script>
<style>
  .evaStar{
    float: right;
    padding-top: .34rem;
  }
  .star{
    font-size: 0;
  }
  .star-item{
    display: inline-block;
    background-repeat: no-repeat;
    width: .6rem;
    height: .6rem;
    margin-left: .27rem;
    background-size: 100%;
  }
  .star-item.on{
    background-image: url('./[email protected]');
  }
  .star-item.half{
    background-image: url('./[email protected]');
  }
  .star-item.off{
    background-image: url('./[email protected]');
  }
</style>