1:打包ok
2;创建移动app
3复制
dist:下的这两个文件
4删除除了mainfest.json
之外的所有文件。并且。把staic和index.html加入到件夹下
.打包上线基本就完了。
下面是项目代码
项目:文件夹
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]'+'_4@2x.png'" v-show="items.type>0" class="theonly">--> <span v-show="items.type>1" class="theonly"><img src="./special_4@2x.png"></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="./brand@2x.png"><span>{{seller.name}}</span></p> <p class="p2">{{seller.description}}</p> <p class="p3" v-if="seller.supports"><img src="./decrease_2@2x.png"><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="./bulletin@3x.png" 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="./decrease_2@2x.png"></span> <span class="text" v-if="seller.supports">在线支付满28减5,满50减10</span> </li> <li class="support-item"> <span class="icon"><img src="./discount_2@2x.png"></span> <span class="text" v-if="seller.supports">单人精彩赛</span> </li> <li class="support-item"> <span class="icon"><img src="./discount_2@2x.png"></span> <span class="text" v-if="seller.supports">清肺雪梨汤8折抢购</span> </li> <li class="support-item"> <span class="icon"><img src="./special_2@2x.png"></span> <span class="text" v-if="seller.supports">特价饮品八折抢购</span> </li> <li class="support-item"> <span class="icon"><img src="./special_2@2x.png"></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"> 收藏</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="./decrease_3@2x.png"><span>在线支付满28减5,满50减10</span></p> <p><img src="./discount_3@2x.png"><span>单人精彩赛</span></p> <p><img src="./discount_3@2x.png"><span>清肺雪梨汤8折抢购</span></p> <p><img src="./special_3@2x.png"><span>特价饮品八折抢购</span></p> <p><img src="./special_3@2x.png"><span>单人精彩套餐</span></p> <p><img src="./invoice_1@2x.png"><span>该商家支持发票,请下单写好发票抬头</span></p> <p><img src="./guarantee_1@2x.png"><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">¥ {{minPrice + deliveryPrice}}元起送</span> <span v-show="totalPrice<minPrice">还差¥ {{minPrice - totalPrice + deliveryPrice}}元起送</span> <span v-show="totalPrice>0 | totalPrice>minPrice" @click="pay" >¥ {{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('./star36_on@3x.png'); } .star-item.half{ background-image: url('./star36_half@3x.png'); } .star-item.off{ background-image: url('./star36_off@3x.png'); } </style>