可以做企业宣传的网站,温州建设小学网站首页,江苏省建设部网站,网站建设企业建站方案本文将介绍一款仿“饿了么”商家页面的App。该案例是基于 Vue2.0 Vue Router webpack ES6 等技术栈实现的一款外卖类App#xff0c;适合初学者进行学习。 项目源码下载链接在文章末尾
1 项目概述
该项目是一款仿“饿了么”商家页面的外卖类App#xff0c;主要有以下功能… 本文将介绍一款仿“饿了么”商家页面的App。该案例是基于 Vue2.0 Vue Router webpack ES6 等技术栈实现的一款外卖类App适合初学者进行学习。 项目源码下载链接在文章末尾
1 项目概述
该项目是一款仿“饿了么”商家页面的外卖类App主要有以下功能。
商品导航。商品列表使用手势上下滑动。购物车中商品的添加和删除操作。点击商品查看详情。商家评价。商家信息。
1.1 开发环境
首先需要安装Node.js 12以上的版本因为Node.js中已经继承了NPM所以无需在单独安装NPM。然后再安装Vue脚手架Vue-CLI以及创建项目。 项目的调试使用Google Chrome浏览器的控制台进行在浏览器中按下F12键然后单击“切换设备工具栏”进入移动端的调试界面可以选择相应的设备进行调试效果如图1 所示。 图 1 项目效果图
1.2 项目结构
项目结构如图2所示其中src文件夹是项目的源文件目录src文件夹下的项目结构如图3所示。 图2 项目结构 图3 src文件夹
项目结构中主要文件说明如下。
dist项目打包后的静态文件存放目录。node_modules项目依赖管理目录。public项目的静态文件存放目录也是本地服务器的根目录。src项目源文件存放目录。package.json项目npm配置文件。
src文件夹目录说明如下。
assets静态资源文件存放目。components公共组件存放目录。router路由配置文件存放目录。store状态管理配置存放目录。views视图组件存放目录。App.vue项目的根组件。main.js项目的入口文件。
2 入口文件
项目的入口文件有 index.html、main.js和App.vue三个文件这些入口文件的具体内容介绍如下。
2.1 项目入口页面
index.html是项目默认的主渲染页面文件主要用于Vue实例挂载点的声明与DOM渲染。代码如下
!DOCTYPE html
html langenheadmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width,initial-scale1.0link relicon href% BASE_URL %favicon.icotitle% htmlWebpackPlugin.options.title %/title/headbodydiv idapp/div/body
/html2.2 程序入口文件
main.js是程序的入口文件主要用于加载各种公共组件和初始化Vue实例。本项目中的路由设置和引用的Vant UI组件库就是在该文件中定义的。代码如下
import Vue from vue
import App from ./App.vue
import ./cube-ui
import ./registerimport common/stylus/index.stylVue.config.productionTip falsenew Vue({render: h h(App)
}).$mount(#app)本项目案例使用了 Cube UI 组件库在项目src目录下创建 cube-ui.js 文件用于引入项目中要用到的组件代码如下
import Vue from vue
import {Style,TabBar,Popup,Dialog,Scroll,Slide,ScrollNav,ScrollNavBar
} from cube-uiVue.use(TabBar)
Vue.use(Popup)
Vue.use(Dialog)
Vue.use(Scroll)
Vue.use(Slide)
Vue.use(ScrollNav)
Vue.use(ScrollNavBar)2.3 组件入口文件
App.vue是项目的根组件所有的页面都是在App.vue下面切换的所有的页面组件都是App.vue的子组件。在App.vue组件内只需要使用 组件作为占位符就可以实现各个页面的引入。代码如下
templatediv idapp touchmove.preventv-header :sellerseller/v-headerdiv classtab-wrappertab :tabstabs/tab/div/div
/templatescriptimport qs from query-stringimport { getSeller } from apiimport VHeader from components/v-header/v-headerimport Goods from components/goods/goodsimport Ratings from components/ratings/ratingsimport Seller from components/seller/sellerimport Tab from components/tab/tabexport default {data() {return {seller: {id: qs.parse(location.search).id}}},computed: {tabs() {return [{label: 商品,component: Goods,data: {seller: this.seller}},{label: 评论,component: Ratings,data: {seller: this.seller}},{label: 商家,component: Seller,data: {seller: this.seller}}]}},created() {this._getSeller()},methods: {_getSeller() {getSeller({id: this.seller.id}).then((seller) {this.seller Object.assign({}, this.seller, seller)})}},components: {Tab,VHeader}}
/scriptstyle langstylus scoped#app.tab-wrapperposition: fixedtop: 136pxleft: 0right: 0bottom: 0
/style3 项目组件
项目中所有页面组件都在views文件夹中定义具体组件内容介绍如下。
3.1 头部组件
头部组件主要展示商家的基本信息如图4所示。 图 4 头部组件效果
代码如下
templatediv classheader clickshowDetaildiv classcontent-wrapperdiv classavatarimg width64 height64 :srcseller.avatar/divdiv classcontentdiv classtitlespan classbrand/spanspan classname{{seller.name}}/span/divdiv classdescription{{seller.description}}/{{seller.deliveryTime}}分钟送达/divdiv v-ifseller.supports classsupportsupport-ico :size1 :typeseller.supports[0].type/support-icospan classtext{{seller.supports[0].description}}/span/div/divdiv v-ifseller.supports classsupport-countspan classcount{{seller.supports.length}}个/spani classicon-keyboard_arrow_right/i/div/divdiv classbulletin-wrapperspan classbulletin-title/spanspan classbulletin-text{{seller.bulletin}}/spani classicon-keyboard_arrow_right/i/divdiv classbackgroundimg :srcseller.avatar width100% height100%/div/div
/templatescript typetext/ecmascript-6import SupportIco from components/support-ico/support-icoexport default {name: v-header,props: {seller: {type: Object,default() {return {}}}},methods: {showDetail() {this.headerDetailComp this.headerDetailComp || this.$createHeaderDetail({$props: {seller: seller}})this.headerDetailComp.show()}},components: {SupportIco}}
/scriptstyle langstylus relstylesheet/stylusimport ~common/stylus/mixinimport ~common/stylus/variable.headerposition: relativeoverflow: hiddencolor: $color-whitebackground: $color-background-ss.content-wrapperposition: relativedisplay: flexalign-items: centerpadding: 24px 12px 18px 24px.avatarflex: 0 0 64pxwidth: 64pxmargin-right: 16pximgborder-radius: 2px.contentflex: 1.titledisplay: flexalign-items: centermargin-bottom: 8px.brandwidth: 30pxheight: 18pxbg-image(brand)background-size: 30px 18pxbackground-repeat: no-repeat.namemargin-left: 6pxfont-size: $fontsize-largefont-weight: bold.descriptionmargin-bottom: 8pxline-height: 12pxfont-size: $fontsize-small.supportdisplay: flexalign-items: center.support-icomargin-right: 4px.textline-height: 12pxfont-size: $fontsize-small-s.support-countposition: absoluteright: 12pxbottom: 14pxdisplay: flexalign-items: centerpadding: 0 8pxheight: 24pxline-height: 24pxtext-align: centerborder-radius: 14pxbackground: $color-background-sss.countfont-size: $fontsize-small-s.icon-keyboard_arrow_rightmargin-left: 2pxline-height: 24pxfont-size: $fontsize-small-s.bulletin-wrapperposition: relativedisplay: flexalign-items: centerheight: 28pxline-height: 28pxpadding: 0 8pxbackground: $color-background-sss.bulletin-titleflex: 0 0 22pxwidth: 22pxheight: 12pxmargin-right: 4pxbg-image(bulletin)background-size: 22px 12pxbackground-repeat: no-repeat.bulletin-textflex: 1white-space: nowrapoverflow: hiddentext-overflow: ellipsisfont-size: $fontsize-small-s.icon-keyboard_arrow_rightflex: 0 0 10pxwidth: 10pxfont-size: $fontsize-small-s.backgroundposition: absolutetop: 0left: 0width: 100%height: 100%z-index: -1filter: blur(10px)
/style3.2 商品标签栏与侧边导航组件
在商家信息下方通过商品标签栏实现商品、评价和商家信息的切换在商品标签中通过侧边导航实现对商品列表的滚动和分类展示等功能。效果如图5所示。 图 5 商品标签栏效果
代码如下
templatediv classtabcube-tab-bar:useTransitionfalse:showSlidertruev-modelselectedLabel:datatabsreftabBarclassborder-bottom-1px/cube-tab-bardiv classslide-wrappercube-slide:loopfalse:auto-playfalse:show-dotsfalse:initial-indexindexrefslide:optionsslideOptionsscrollonScrollchangeonChangecube-slide-item v-for(tab,index) in tabs :keyindexcomponent refcomponent :istab.component :datatab.data/component/cube-slide-item/cube-slide/div/div
/templatescriptexport default {name: tab,props: {tabs: {type: Array,default() {return []}},initialIndex: {type: Number,default: 0}},data() {return {index: this.initialIndex,slideOptions: {listenScroll: true,probeType: 3,directionLockThreshold: 0}}},computed: {selectedLabel: {get() {return this.tabs[this.index].label},set(newVal) {this.index this.tabs.findIndex((value) {return value.label newVal})}}},mounted() {this.onChange(this.index)},methods: {onScroll(pos) {const tabBarWidth this.$refs.tabBar.$el.clientWidthconst slideWidth this.$refs.slide.slide.scrollerWidthconst transform -pos.x / slideWidth * tabBarWidththis.$refs.tabBar.setSliderTransform(transform)},onChange(current) {this.index currentconst instance this.$refs.component[current]if (instance instance.fetch) {instance.fetch()}}}}
/scriptstyle langstylus scopedimport ~common/stylus/variable.tabdisplay: flexflex-direction: columnheight: 100% .cube-tabpadding: 10px 0.slide-wrapperflex: 1overflow: hidden
/style3.3 购物车组件
在购物车组件中当没有任何商品的情况下无法直接选择效果如图6所示。当选择商品后购物车将被激活效果如图7所示。 图 6 购物车默认状态 图 7 选择商品后的状态
当点击购物车图标后将显示用户选中的商品效果如图8所示在购物车商品列表页面中可以对商品进行加减操作也可以直接清空购物车。 图8 购物车商品列表
当点击“去结算”按钮时将弹出购买商品花费的金额提示对话框效果如图9所示。 图9 提示对话框
具体实现的代码如下。 商品购物车组件 shop-cart.vue 文件代码如下
templatedivdiv classshopcartdiv classcontent clicktoggleListdiv classcontent-leftdiv classlogo-wrapperdiv classlogo :class{highlight:totalCount0}i classicon-shopping_cart :class{highlight:totalCount0}/i/divdiv classnum v-showtotalCount0bubble :numtotalCount/bubble/div/divdiv classprice :class{highlight:totalPrice0}{{totalPrice}}/divdiv classdesc另需配送费{{deliveryPrice}}元/div/divdiv classcontent-right clickpaydiv classpay :classpayClass{{payDesc}}/div/div/divdiv classball-containerdiv v-for(ball,index) in balls :keyindextransitionbefore-enterbeforeDropenterdroppingafter-enterafterDropdiv classball v-showball.showdiv classinner inner-hook/div/div/transition/div/div/div/div
/templatescriptimport Bubble from components/bubble/bubbleconst BALL_LEN 10const innerClsHook inner-hookfunction createBalls() {let balls []for (let i 0; i BALL_LEN; i) {balls.push({show: false})}return balls}export default {name: shop-cart,props: {selectFoods: {type: Array,default() {return []}},deliveryPrice: {type: Number,default: 0},minPrice: {type: Number,default: 0},sticky: {type: Boolean,default: false},fold: {type: Boolean,default: true}},data() {return {balls: createBalls(),listFold: this.fold}},created() {this.dropBalls []},computed: {totalPrice() {let total 0this.selectFoods.forEach((food) {total food.price * food.count})return total},totalCount() {let count 0this.selectFoods.forEach((food) {count food.count})return count},payDesc() {if (this.totalPrice 0) {return ${this.minPrice}元起送} else if (this.totalPrice this.minPrice) {let diff this.minPrice - this.totalPricereturn 还差${diff}元起送} else {return 去结算}},payClass() {if (!this.totalCount || this.totalPrice this.minPrice) {return not-enough} else {return enough}}},methods: {toggleList() {if (this.listFold) {if (!this.totalCount) {return}this.listFold falsethis._showShopCartList()this._showShopCartSticky()} else {this.listFold truethis._hideShopCartList()}},pay(e) {if (this.totalPrice this.minPrice) {return}this.$createDialog({title: 支付,content: 您需要支付${this.totalPrice}元}).show()e.stopPropagation()},drop(el) {for (let i 0; i this.balls.length; i) {const ball this.balls[i]if (!ball.show) {ball.show trueball.el elthis.dropBalls.push(ball)return}}},beforeDrop(el) {const ball this.dropBalls[this.dropBalls.length - 1]const rect ball.el.getBoundingClientRect()const x rect.left - 32const y -(window.innerHeight - rect.top - 22)el.style.display el.style.transform el.style.webkitTransform translate3d(0,${y}px,0)const inner el.getElementsByClassName(innerClsHook)[0]inner.style.transform inner.style.webkitTransform translate3d(${x}px,0,0)},dropping(el, done) {this._reflow document.body.offsetHeightel.style.transform el.style.webkitTransform translate3d(0,0,0)const inner el.getElementsByClassName(innerClsHook)[0]inner.style.transform inner.style.webkitTransform translate3d(0,0,0)el.addEventListener(transitionend, done)},afterDrop(el) {const ball this.dropBalls.shift()if (ball) {ball.show falseel.style.display none}},_showShopCartList() {this.shopCartListComp this.shopCartListComp || this.$createShopCartList({$props: {selectFoods: selectFoods},$events: {leave: () {this._hideShopCartSticky()},hide: () {this.listFold true},add: (el) {this.shopCartStickyComp.drop(el)}}})this.shopCartListComp.show()},_showShopCartSticky() {this.shopCartStickyComp this.shopCartStickyComp || this.$createShopCartSticky({$props: {selectFoods: selectFoods,deliveryPrice: deliveryPrice,minPrice: minPrice,fold: listFold,list: this.shopCartListComp}})this.shopCartStickyComp.show()},_hideShopCartList() {const list this.sticky ? this.$parent.list : this.shopCartListComplist.hide list.hide()},_hideShopCartSticky() {this.shopCartStickyComp.hide()}},watch: {fold(newVal) {this.listFold newVal},totalCount(count) {if (!this.fold count 0) {this._hideShopCartList()}}},components: {Bubble}}
/scriptstyle langstylus scopedimport ~common/stylus/mixinimport ~common/stylus/variable.shopcartheight: 100%.contentdisplay: flexbackground: $color-backgroundfont-size: 0color: $color-light-grey.content-leftflex: 1.logo-wrapperdisplay: inline-blockvertical-align: topposition: relativetop: -10pxmargin: 0 12pxpadding: 6pxwidth: 56pxheight: 56pxbox-sizing: border-boxborder-radius: 50%background: $color-background.logowidth: 100%height: 100%border-radius: 50%text-align: centerbackground: $color-dark-grey.highlightbackground: $color-blue.icon-shopping_cartline-height: 44pxfont-size: $fontsize-large-xxxcolor: $color-light-grey.highlightcolor: $color-white.numposition: absolutetop: 0right: 0.pricedisplay: inline-blockvertical-align: topmargin-top: 12pxline-height: 24pxpadding-right: 12pxbox-sizing: border-boxborder-right: 1px solid rgba(255, 255, 255, 0.1)font-weight: 700font-size: $fontsize-large.highlightcolor: $color-white.descdisplay: inline-blockvertical-align: topmargin: 12px 0 0 12pxline-height: 24pxfont-size: $fontsize-small-s.content-rightflex: 0 0 105pxwidth: 105px.payheight: 48pxline-height: 48pxtext-align: centerfont-weight: 700font-size: $fontsize-small.not-enoughbackground: $color-dark-grey.enoughbackground: $color-greencolor: $color-white.ball-container.ballposition: fixedleft: 32pxbottom: 22pxz-index: 200transition: all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41).innerwidth: 16pxheight: 16pxborder-radius: 50%background: $color-bluetransition: all 0.4s linear
/style商品购物车列表组件 shop-cart-list.vue 文件代码如下
templatetransition namefadecube-popup:mask-closabletruev-showvisiblemask-clickmaskClickpositionbottomtypeshop-cart-list:z-index90transitionnamemoveafter-leaveafterLeavediv v-showvisiblediv classlist-headerh1 classtitle购物车/h1span classempty clickempty清空/span/divcube-scroll classlist-content reflistContentulliclassfoodv-for(food,index) in selectFoods:keyindexspan classname{{food.name}}/spandiv classpricespan{{food.price*food.count}}/span/divdiv classcart-control-wrappercart-control addonAdd :foodfood/cart-control/div/li/ul/cube-scroll/div/transition/cube-popup/transition
/templatescriptimport CartControl from components/cart-control/cart-controlimport popupMixin from common/mixins/popupconst EVENT_SHOW showconst EVENT_ADD addconst EVENT_LEAVE leaveexport default {name: shop-cart-list,mixins: [popupMixin],props: {selectFoods: {type: Array,default() {return []}}},created() {this.$on(EVENT_SHOW, () {this.$nextTick(() {this.$refs.listContent.refresh()})})},methods: {onAdd(target) {this.$emit(EVENT_ADD, target)},afterLeave() {this.$emit(EVENT_LEAVE)},maskClick() {this.hide()},empty() {this.dialogComp this.$createDialog({type: confirm,content: 清空购物车,$events: {confirm: () {this.selectFoods.forEach((food) {food.count 0})this.hide()}}})this.dialogComp.show()}},components: {CartControl}}
/scriptstyle langstylus scopedimport ~common/stylus/variable.cube-shop-cart-listbottom: 48px.fade-enter, .fade-leave-activeopacity: 0.fade-enter-active, .fade-leave-activetransition: all .3s ease-in-out.move-enter, .move-leave-activetransform: translate3d(0, 100%, 0).move-enter-active, .move-leave-activetransition: all .3s ease-in-out.list-headerheight: 40pxline-height: 40pxpadding: 0 18pxbackground: $color-background-ssss.titlefloat: leftfont-size: $fontsize-mediumcolor: $color-dark-grey.emptyfloat: rightfont-size: $fontsize-smallcolor: $color-blue.list-contentpadding: 0 18pxmax-height: 217pxoverflow: hiddenbackground: $color-white.foodposition: relativepadding: 12px 0box-sizing: border-box.nameline-height: 24pxfont-size: $fontsize-mediumcolor: $color-dark-grey.priceposition: absoluteright: 90pxbottom: 12pxline-height: 24pxfont-weight: 700font-size: $fontsize-mediumcolor: $color-red.cart-control-wrapperposition: absoluteright: 0bottom: 6px/style3.4 商品列表组件
在商品标签页面中商品列表主要展示所有商品的信息可以点击商品卡片右侧的加号添加购物车。效果如图10所示。 图 10 商品列表效果
代码如下
templatediv classgoodsdiv classscroll-nav-wrappercube-scroll-nav:sidetrue:datagoods:optionsscrollOptionsv-ifgoods.lengthtemplate slotbar slot-scopepropscube-scroll-nav-bardirectionvertical:labelsprops.labels:txtsbarTxts:currentprops.currenttemplate slot-scopepropsdiv classtextsupport-icov-ifprops.txt.type1:size3:typeprops.txt.type/support-icospan{{props.txt.name}}/spanspan classnum v-ifprops.txt.countbubble :numprops.txt.count/bubble/span/div/template/cube-scroll-nav-bar/templatecube-scroll-nav-panelv-forgood in goods:keygood.name:labelgood.name:titlegood.nameulliclickselectFood(food)v-forfood in good.foods:keyfood.nameclassfood-itemdiv classiconimg width57 height57 :srcfood.icon/divdiv classcontenth2 classname{{food.name}}/h2p classdesc{{food.description}}/pdiv classextraspan classcount月售{{food.sellCount}}份/spanspan好评率{{food.rating}}%/span/divdiv classpricespan classnow{{food.price}}/spanspan classold v-showfood.oldPrice{{food.oldPrice}}/span/divdiv classcart-control-wrappercart-control addonAdd :foodfood/cart-control/div/div/li/ul/cube-scroll-nav-panel/cube-scroll-nav/divdiv classshop-cart-wrappershop-cartrefshopCart:select-foodsselectFoods:delivery-priceseller.deliveryPrice:min-priceseller.minPrice/shop-cart/div/div
/templatescriptimport { getGoods } from apiimport CartControl from components/cart-control/cart-controlimport ShopCart from components/shop-cart/shop-cartimport Food from components/food/foodimport SupportIco from components/support-ico/support-icoimport Bubble from components/bubble/bubbleexport default {name: goods,props: {data: {type: Object,default() {return {}}}},data() {return {goods: [],selectedFood: {},scrollOptions: {click: false,directionLockThreshold: 0}}},computed: {seller() {return this.data.seller},selectFoods() {let foods []this.goods.forEach((good) {good.foods.forEach((food) {if (food.count) {foods.push(food)}})})return foods},barTxts() {let ret []this.goods.forEach((good) {const {type, name, foods} goodlet count 0foods.forEach((food) {count food.count || 0})ret.push({type,name,count})})return ret}},methods: {fetch() {if (!this.fetched) {this.fetched truegetGoods({id: this.seller.id}).then((goods) {this.goods goods})}},selectFood(food) {this.selectedFood foodthis._showFood()this._showShopCartSticky()},onAdd(target) {this.$refs.shopCart.drop(target)},_showFood() {this.foodComp this.foodComp || this.$createFood({$props: {food: selectedFood},$events: {add: (target) {this.shopCartStickyComp.drop(target)},leave: () {this._hideShopCartSticky()}}})this.foodComp.show()},_showShopCartSticky() {this.shopCartStickyComp this.shopCartStickyComp || this.$createShopCartSticky({$props: {selectFoods: selectFoods,deliveryPrice: this.seller.deliveryPrice,minPrice: this.seller.minPrice,fold: true}})this.shopCartStickyComp.show()},_hideShopCartSticky() {this.shopCartStickyComp.hide()}},components: {Bubble,SupportIco,CartControl,ShopCart,Food}}
/scriptstyle langstylus scopedimport ~common/stylus/mixinimport ~common/stylus/variable.goodsposition: relativetext-align: leftheight: 100%.scroll-nav-wrapperposition: absolutewidth: 100%top: 0left: 0bottom: 48px .cube-scroll-nav-barwidth: 80pxwhite-space: normaloverflow: hidden .cube-scroll-nav-bar-itempadding: 0 10pxdisplay: flexalign-items: centerheight: 56pxline-height: 14pxfont-size: $fontsize-smallbackground: $color-background-ssss.textflex: 1position: relative.numposition: absoluteright: -8pxtop: -10px.support-icodisplay: inline-blockvertical-align: topmargin-right: 4px .cube-scroll-nav-bar-item_activebackground: $color-whitecolor: $color-dark-grey .cube-scroll-nav-panel-titlepadding-left: 14pxheight: 26pxline-height: 26pxborder-left: 2px solid $color-col-linefont-size: $fontsize-smallcolor: $color-greybackground: $color-background-ssss.food-itemdisplay: flexmargin: 18pxpadding-bottom: 18pxposition: relative:last-childborder-none()margin-bottom: 0.iconflex: 0 0 57pxmargin-right: 10pximgheight: auto.contentflex: 1.namemargin: 2px 0 8px 0height: 14pxline-height: 14pxfont-size: $fontsize-mediumcolor: $color-dark-grey.desc, .extraline-height: 10pxfont-size: $fontsize-small-scolor: $color-light-grey.descline-height: 12pxmargin-bottom: 8px.extra.countmargin-right: 12px.pricefont-weight: 700line-height: 24px.nowmargin-right: 8pxfont-size: $fontsize-mediumcolor: $color-red.oldtext-decoration: line-throughfont-size: $fontsize-small-scolor: $color-light-grey.cart-control-wrapperposition: absoluteright: 0bottom: 12px.shop-cart-wrapperposition: absoluteleft: 0bottom: 0z-index: 50width: 100%height: 48px
/style3.5 商家公告组件
点击头部区域会弹出商家公告的详细内容效果如图11所示。 图11 商家公告内容
代码如下
templatetransition namefadediv v-showvisible classheader-detail touchmove.stop.preventdiv classdetail-wrapper clear-fixdiv classdetail-mainh1 classname{{seller.name}}/h1div classstar-wrapperstar :size48 :scoreseller.score/star/divdiv classtitlediv classline/divdiv classtext优惠信息/divdiv classline/div/divul v-ifseller.supports classsupportsli classsupport-item v-for(item,index) in seller.supports :keyitem.idsupport-ico :size2 :typeseller.supports[index].type/support-icospan classtext{{seller.supports[index].description}}/span/li/uldiv classtitlediv classline/divdiv classtext商家公告/divdiv classline/div/divdiv classbulletinp classcontent{{seller.bulletin}}/p/div/div/divdiv classdetail-close clickhidei classicon-close/i/div/div/transition
/templatescriptimport popupMixin from common/mixins/popupimport Star from components/star/starimport SupportIco from components/support-ico/support-icoexport default {name: header-detail,mixins: [popupMixin],props: {seller: {type: Object,default() {return {}}}},components: {SupportIco,Star}}
/scriptstyle langstylus scopedimport ~common/stylus/mixinimport ~common/stylus/variable.header-detailposition: fixedz-index: 100top: 0left: 0width: 100%height: 100%overflow: autobackdrop-filter: blur(10px)opacity: 1color: $color-whitebackground: $color-background-s.fade-enter-active, .fade-leave-activetransition: all 0.5s.fade-enter, .fade-leave-activeopacity: 0background: $color-background.detail-wrapperdisplay: inline-blockwidth: 100%min-height: 100%.detail-mainmargin-top: 64pxpadding-bottom: 64px.nameline-height: 16pxtext-align: centerfont-size: $fontsize-largefont-weight: 700.star-wrappermargin-top: 18pxpadding: 2px 0text-align: center.titledisplay: flexwidth: 80%margin: 28px auto 24px auto.lineflex: 1position: relativetop: -6pxborder-bottom: 1px solid rgba(255, 255, 255, 0.2).textpadding: 0 12pxfont-weight: 700font-size: $fontsize-medium.supportswidth: 80%margin: 0 auto.support-itemdisplay: flexalign-items: centerpadding: 0 12pxmargin-bottom: 12px:last-childmargin-bottom: 0.support-icomargin-right: 6px.textline-height: 16pxfont-size: $fontsize-small.bulletinwidth: 80%margin: 0 auto.contentpadding: 0 12pxline-height: 24pxfont-size: $fontsize-small.detail-closeposition: relativewidth: 30pxheight: 30pxmargin: -64px auto 0 autoclear: bothfont-size: $fontsize-large-xxxx
/style3.6 评价内容组件
在商家评价内容的组件中共有两个组成部分一个是商家的评分组件效果如图12所示另一个是评价列表内容效果如图13所示。 图 12 评分组件效果 图 13 评价列表效果
商家评分组件 ratings.vue 文件代码如下
templatecube-scroll refscroll classratings :optionsscrollOptionsdiv classratings-contentdiv classoverviewdiv classoverview-lefth1 classscore{{seller.score}}/h1div classtitle综合评分/divdiv classrank高于周边商家{{seller.rankRate}}%/div/divdiv classoverview-rightdiv classscore-wrapperspan classtitle服务态度/spanstar :size36 :scoreseller.serviceScore/starspan classscore{{seller.serviceScore}}/span/divdiv classscore-wrapperspan classtitle商品评分/spanstar :size36 :scoreseller.foodScore/starspan classscore{{seller.foodScore}}/span/divdiv classdelivery-wrapperspan classtitle送达时间/spanspan classdelivery{{seller.deliveryTime}}分钟/span/div/div/divsplit/splitrating-selectselectonSelecttoggleonToggle:selectTypeselectType:onlyContentonlyContent:ratingsratings/rating-selectdiv classrating-wrapperulliv-for(rating,index) in computedRatings:keyindexclassrating-item border-bottom-1pxdiv classavatarimg width28 height28 :srcrating.avatar/divdiv classcontenth1 classname{{rating.username}}/h1div classstar-wrapperstar :size24 :scorerating.score/starspan classdelivery v-showrating.deliveryTime{{rating.deliveryTime}}/span/divp classtext{{rating.text}}/pdiv classrecommend v-showrating.recommend rating.recommend.lengthspan classicon-thumb_up/spanspanclassitemv-for(item,index) in rating.recommend:keyindex{{item}}/span/divdiv classtime{{format(rating.rateTime)}}/div/div/li/ul/div/div/cube-scroll
/templatescriptimport Star from components/star/starimport RatingSelect from components/rating-select/rating-selectimport Split from components/split/splitimport ratingMixin from common/mixins/ratingimport { getRatings } from apiimport moment from momentexport default {name: ratings,mixins: [ratingMixin],props: {data: {type: Object}},data () {return {ratings: [],scrollOptions: {click: false,directionLockThreshold: 0}}},computed: {seller () {return this.data.seller || {}}},methods: {fetch () {if (!this.fetched) {this.fetched truegetRatings({id: this.seller.id}).then((ratings) {this.ratings ratings})}},format (time) {return moment(time).format(YYYY-MM-DD hh:mm)}},components: {Star,Split,RatingSelect},watch: {selectType () {this.$nextTick(() {this.$refs.scroll.refresh()})}}}
/scriptstyle langstylus scopedimport ~common/stylus/variableimport ~common/stylus/mixin.ratingsposition: relativetext-align: leftwhite-space: normalheight: 100%.overviewdisplay: flexpadding: 18px 0.overview-leftflex: 0 0 137pxpadding: 6px 0width: 137pxborder-right: 1px solid $color-col-linetext-align: centermedia only screen and (max-width: 320px)flex: 0 0 120pxwidth: 120px.scoremargin-bottom: 6pxline-height: 28pxfont-size: $fontsize-large-xxxcolor: $color-orange.titlemargin-bottom: 8pxline-height: 12pxfont-size: $fontsize-smallcolor: $color-dark-grey.rankline-height: 10pxfont-size: $fontsize-small-scolor: $color-light-grey.overview-rightflex: 1padding: 6px 0 6px 24pxmedia only screen and (max-width: 320px)padding-left: 6px.score-wrapperdisplay: flexalign-items: centermargin-bottom: 8px.titleline-height: 18pxfont-size: $fontsize-smallcolor: $color-dark-grey.starmargin: 0 12px.scoreline-height: 18pxfont-size: $fontsize-smallcolor: $color-orange.delivery-wrapperdisplay: flexalign-items: center.titleline-height: 18pxfont-size: $fontsize-smallcolor: $color-dark-grey.deliverymargin-left: 12pxfont-size: $fontsize-smallcolor: $color-light-grey.rating-wrapperpadding: 0 18px.rating-itemdisplay: flexpadding: 18px 0:last-childborder-none().avatarflex: 0 0 28pxwidth: 28pxmargin-right: 12pximgheight: autoborder-radius: 50%.contentposition: relativeflex: 1.namemargin-bottom: 4pxline-height: 12pxfont-size: $fontsize-small-scolor: $color-dark-grey.star-wrappermargin-bottom: 6pxdisplay: flexalign-items: center.starmargin-right: 6px.deliveryfont-size: $fontsize-small-scolor: $color-light-grey.textmargin-bottom: 8pxline-height: 18pxcolor: $color-dark-greyfont-size: $fontsize-small.recommenddisplay: flexalign-items: centerflex-wrap: wrapline-height: 16px.icon-thumb_up, .itemmargin: 0 8px 4px 0font-size: $fontsize-small-s.icon-thumb_upcolor: $color-blue.itempadding: 0 6pxborder: 1px solid $color-row-lineborder-radius: 1pxcolor: $color-light-greybackground: $color-white.timeposition: absolutetop: 0right: 0line-height: 12pxfont-size: $fontsize-smallcolor: $color-light-grey
/style评价内容列表组件 rating-select.vue 文件代码如下
templatediv classrating-selectdiv classrating-type border-bottom-1pxspan clickselect(2) classblock positive :class{active:selectType2}{{desc.all}}spanclasscount{{ratings.length}}/span/spanspan clickselect(0) classblock positive :class{active:selectType0}{{desc.positive}}spanclasscount{{positives.length}}/span/spanspan clickselect(1) classblock negative :class{active:selectType1}{{desc.negative}}spanclasscount{{negatives.length}}/span/span/divdiv clicktoggleContent classswitch :class{on:onlyContent}span classicon-check_circle/spanspan classtext只看有内容的评价/span/div/div
/template
scriptconst POSITIVE 0const NEGATIVE 1const ALL 2const EVENT_TOGGLE toggleconst EVENT_SELECT selectexport default {props: {ratings: {type: Array,default() {return []}},selectType: {type: Number,default: ALL},onlyContent: {type: Boolean,default: false},desc: {type: Object,default() {return {all: 全部,positive: 满意,negative: 不满意}}}},computed: {positives() {return this.ratings.filter((rating) {return rating.rateType POSITIVE})},negatives() {return this.ratings.filter((rating) {return rating.rateType NEGATIVE})}},methods: {select(type) {this.$emit(EVENT_SELECT, type)},toggleContent() {this.$emit(EVENT_TOGGLE)}}}
/script
style langstylus relstylesheet/stylusimport ~common/stylus/variable.rating-select.rating-typepadding: 18px 0margin: 0 18px.blockdisplay: inline-blockpadding: 8px 12pxmargin-right: 8pxline-height: 16pxborder-radius: 1pxfont-size: $fontsize-smallcolor: $color-grey.activecolor: $color-white.countmargin-left: 2px.positivebackground: $color-light-blue.activebackground: $color-blue.negativebackground: $color-light-grey-s.activebackground: $color-grey.switchdisplay: flexalign-items: centerpadding: 12px 18pxline-height: 24pxborder-bottom: 1px solid $color-row-linecolor: $color-light-grey.on.icon-check_circlecolor: $color-green.icon-check_circlemargin-right: 4pxfont-size: $fontsize-large-xxx.textfont-size: $fontsize-small
/style3.7 商家信息组件
商家信息组件中设计了商家的星级和服务内容效果如图14所示。 图 14 商家服务信息效果
以及商家的优惠活动和公告内容。效果如图15所示。 图15 商家活动公告内容
代码如下
templatecube-scroll classseller :optionssellerScrollOptionsdiv classseller-contentdiv classoverviewh1 classtitle{{seller.name}}/h1div classdesc border-bottom-1pxstar :size36 :scoreseller.score/starspan classtext({{seller.ratingCount}})/spanspan classtext月售{{seller.sellCount}}单/span/divul classremarkli classblockh2起送价/h2div classcontentspan classstress{{seller.minPrice}}/span元/div/lili classblockh2商家配送/h2div classcontentspan classstress{{seller.deliveryPrice}}/span元/div/lili classblockh2平均配送时间/h2div classcontentspan classstress{{seller.deliveryTime}}/span分钟/div/li/uldiv classfavorite clicktoggleFavoritespan classicon-favorite :class{active:favorite}/spanspan classtext{{favoriteText}}/span/div/divsplit/splitdiv classbulletinh1 classtitle公告与活动/h1div classcontent-wrapper border-bottom-1pxp classcontent{{seller.bulletin}}/p/divul v-ifseller.supports classsupportsliclasssupport-item border-bottom-1pxv-for(item,index) in seller.supports:keyindexsupport-ico :size4 :typeseller.supports[index].type/support-icospan classtext{{seller.supports[index].description}}/span/li/ul/divsplit/splitdiv classpicsh1 classtitle商家实景/h1cube-scroll classpic-wrapper :optionspicScrollOptionsul classpic-listli classpic-itemv-for(pic,index) in seller.pics:keyindeximg :srcpic width120 height90/li/ul/cube-scroll/divsplit/splitdiv classinfoh1 classtitle border-bottom-1px商家信息/h1ulliclassinfo-item border-bottom-1pxv-for(info,index) in seller.infos:keyindex{{info}}/li/ul/div/div/cube-scroll
/templatescriptimport { saveToLocal, loadFromLocal } from common/js/storageimport Star from components/star/starimport Split from components/split/splitimport SupportIco from components/support-ico/support-icoexport default {props: {data: {type: Object,default() {return {}}}},data() {return {favorite: false,sellerScrollOptions: {directionLockThreshold: 0,click: false},picScrollOptions: {scrollX: true,stopPropagation: true,directionLockThreshold: 0}}},computed: {seller() {return this.data.seller || {}},favoriteText() {return this.favorite ? 已收藏 : 收藏}},created() {this.favorite loadFromLocal(this.seller.id, favorite, false)},methods: {toggleFavorite() {this.favorite !this.favoritesaveToLocal(this.seller.id, favorite, this.favorite)}},components: {SupportIco,Star,Split}}
/scriptstyle langstylus scopedimport ~common/stylus/variableimport ~common/stylus/mixin.sellerheight: 100%text-align: left.overviewposition: relativepadding: 18px.titlemargin-bottom: 8pxline-height: 14pxfont-size: $fontsize-mediumcolor: $color-dark-grey.descdisplay: flexalign-items: centerpadding-bottom: 18px.starmargin-right: 8px.textmargin-right: 12pxline-height: 18pxfont-size: $fontsize-small-scolor: $color-grey.remarkdisplay: flexpadding-top: 18px.blockflex: 1text-align: centerborder-right: 1px solid $color-col-line:last-childborder: noneh2margin-bottom: 4pxline-height: 10pxfont-size: $fontsize-small-scolor: $color-light-grey.contentline-height: 24pxfont-size: $fontsize-small-scolor: $color-dark-grey.stressfont-size: $fontsize-large-xxx.favoriteposition: absolutewidth: 50pxright: 11pxtop: 18pxtext-align: center.icon-favoritedisplay: blockmargin-bottom: 4pxline-height: 24pxfont-size: $fontsize-large-xxxcolor: $color-light-grey-s.activecolor: $color-red.textline-height: 10pxfont-size: $fontsize-small-scolor: $color-grey.bulletinpadding: 18px 18px 0 18pxwhite-space: normal.titlemargin-bottom: 8pxline-height: 14pxcolor: $color-dark-greyfont-size: $fontsize-medium.content-wrapperpadding: 0 12px 16px 12px.contentline-height: 24pxfont-size: $fontsize-smallcolor: $color-red.supports.support-itemdisplay: flexalign-items: centerpadding: 16px 12px:last-childborder-none().support-icomargin-right: 6px.textline-height: 16pxfont-size: $fontsize-smallcolor: $color-dark-grey.picspadding: 18px.titlemargin-bottom: 12pxline-height: 14pxcolor: $color-dark-greyfont-size: $fontsize-medium.pic-wrapperdisplay: flexalign-items: center.pic-list.pic-itemdisplay: inline-blockmargin-right: 6pxwidth: 120pxheight: 90px:last-childmargin: 0.infopadding: 18px 18px 0 18pxcolor: $color-dark-grey.titlepadding-bottom: 12pxline-height: 14pxfont-size: $fontsize-medium.info-itempadding: 16px 12pxline-height: 16pxfont-size: $fontsize-small:last-childborder-none()
/style项目源码下载 https://download.csdn.net/download/p445098355/89570496
