vue2.0_ hungry--Shopping cart components

Shopping Cart Components: Shopcart.vue

/*

* Edited on December 14, 2017

Refueling

*/

<template> <div class= "Shopcart" > <div class= "Content" > <!--shopping cart left part--> <div C lass= "Content-left" > <!--put the logo part to start--> <div class= "Logo-wrapper" > <!--put the shopping cart icon Div- -> <div class= "logo": class= "{' Highlight ': totalcount>0}" > <span class= "cart" > & lt;! --Using the Fa-shopping-cart in Font-awesome, first NPM install Font-awesome, then main.js introduced Font-awesome.css--> <!--The number of judges is greater than 0 on the binding &.highlight style highlight--> <i class= "fa fa-shopping-cart fa-2x": class= "{' Highlight ': totalcount>0}" >< 
   	 		/i> </span> </div> <!--the number of the upper-left corner of the shopping cart is small, v-show is used to control whether the display, totalcount>0 display this div--> <div class= "num" v-show= "totalcount>0" >{{totalCount}}</div> </div> <!--logo Part of the end--> <!--put the total price of the section, with: class to add a highlight style, the price is greater than 0 o'clock add &.highlight--> <div class= "Prices": class= "{' Highlight ' : totalprice>0} "&Gt;￥{{totalprice}}</div> <!--distribution fee--> <div class= "desc" > Additional distribution fee {{deliveryprice}}</div> </div> <!--shopping cart to the left part of the end--> <!--shopping cart to the right part--> <div class= "Content-right" > & lt;! --Paydesc is divided into 3 cases, corresponding to 2 different styles Payclass--> <div class= "pay": class= "Payclass" > {paydesc}} &LT;/DIV&G
   	 T </div> <!--shopping cart Right section end--> </div>> </div> </template> <script type= "Text/ec Mascript-6 "> Export Default {props: {//Parent component passes data to the word child component//cart status is determined by the Selectfoods array (custom), each value of the array represents the total price of the current item (Price*coun
		T)//selectfoods default value is return:[];

				Selectfoods: {type:array, default () {return [//This is the test data, you can comment out {price:5, count:5}  ]; Array, each value represents the total price of the goods}}, Deliveryprice: {//distribution fee Type:number, default:3}, Minprice: {//Send price T Ype:number, Default:10}}, computed: {//computed properties Totalprice () {//based on selectFoods array to calculate the lump sum = 0; Define Total sum = 0 This.selectFoods.forEach ((food) => {//traverse array, multiply the food.price and food.count of each food by summation sum = food.
			Price * FOOD.COUNT;
			});      return total;
			Returns the Total Price}, TotalCount () {///per Selectfoods array count let count = 0;   This.selectFoods.forEach ((food) => {count + = Food.count;
			Count addition for each food});     return count; Return total Quantity}, Paydesc () {////////////////////////////////////////////////
			: ￥${this.minprice} yuan send return ' ￥${this.minprice} yuan to send ';  else if (This.totalprice < This.minprice) {let diff = this.minprice-this.totalprice;     Calculate the distance from the price of the difference return ' also ￥${diff} yuan to send ';    Return also ￥${diff} yuan send} else {returns ' to settle ';    Meet the starting price condition display to the checkout}, Payclass () {if (This.totalprice < This.minprice) {return ' Not-enough ';    is less than the starting price, returns not-enough,:class= "Not-enough"} else {return ' enough '; Return enough,:class= "Enough"}
		}
	}
}; </script> <style lang= "Stylus" ref= "Stylesheet/stylus" > Shopcart position:fixed z-index:50 left:0 bot tom:0 height:40px background:black width:100%. Content Display:flex Background: #141d27. Content-left FL 
				Ex:1. Logo-wrapper display:inline-block position:relative Top: -10px margin:0 12px padding:6px width:56px height:56px box-sizing:border-box border-radius:50% vertical-align:center Backgrou Nd: #141d27. Logo width:100% height:100% border-radius:50% background: #2b343c &AMP;.HIGHL
						Ight Background:rgb (0, 160,). FA margin-left:4px margin-top:5px color: #898989  &.highlight color: #fff. num position:absolute top:0 left:0 width:24px Height: 16px line-height:16px Text-align:center Background:rgb (A.) Color: #fff font-size:9p X font-weight:700 box-shadow:0px 4px 8px 0px rgba (0, 0, 0, 0.4) border-radius:6px. Price Display:inline-block line-height:24px font-size:12px Color:rgb (255, 255, 255, 0.4) Vertical-align:top padding-right:1 2px Box-sizing:border-box border-right:1px Solid Rgba (255, 255, 255, 0.1) font-weight:700 Padding-top: 8px &.highlight color: #fff font-size:16px desc flex:0 0 100px display:inline-block H eight:50px line-height:24px font-size:12px font-weight:700 text-align:center width:100px Or:rgba (255, 255, 255, 0.4). content-right flex:0 0 110px width:120px. Pay height:48px Line-he ight:48px text-align:center font-size:16px font-weight:700 Color:rgba (255, 255, 255, 0.4) Backgro und: #2b333b &.not-enough background: #2b333b &.enough background: #00b43c color: #fff &L
 T;/style>