購物車元件：shopcart.vue

/*

*編輯於２０１７年１２月１４日

*加油！

*/

<template>
  <div class="shopcart">
   <div class="content">
   	<!-- 購物車左側部分開始 -->
   	 <div class="content-left">
   	 	<!-- 放ｌｏｇｏ的部分開始 -->
   	 	<div class="logo-wrapper">
   	 		<!-- 放購物車圖示的div -->
   	 		<div class="logo" :class="{'highlight':totalCount>0}">
   	 			<span class="cart" >
   	 				<!-- 使用font-awesome裡面的fa-shopping-cart,要先npm install font-awesome,再在main.js引入font-awesome.css -->
   	 				<!-- 判斷數量大於０就繫結＆.highLight樣式高亮 -->
   	 				<i class="fa fa-shopping-cart fa-2x" :class="{'highlight':totalCount>0}"></i>
   	 			</span>
   	 		</div>
   	 		<!-- 購物車左上角的數量小表示，v-show用來控制是否顯示，totalCount>0時顯示這個div -->
   	 		<div class="num" v-show="totalCount>0">{{totalCount}}</div>
   	 	</div>
   	 	<!-- 放ｌｏｇｏ的部分結束 -->
		<!-- 放總價的部分，用:class新增高亮樣式，價格大於０時新增&.highlight -->
   	 	<div class="price" :class="{'highlight':totalPrice>0}">￥{{totalPrice}}</div>
   	 	<!-- 配送費 -->
   	 	<div class="desc">另需配送費{{deliveryPrice}}</div>
   	 </div>
   	 <!-- 購物車左側部分結束 -->
   	 <!-- 購物車右側部分開始 -->
   	 <div class="content-right">
   	 	<!-- payDesc分３種情況，對應２不同樣式payClass -->
   	 	<div class="pay" :class="payClass">
   	 		{{payDesc}}
   	 	</div>
   	 </div>
   	  <!-- 購物車右側部分結束 -->
   </div>>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
	props: {    // 父元件向字子元件傳遞資料
		// 購物車狀態由selectFoods這個陣列決定(自定義)，陣列每個值表示當前該商品的總價（price*count）
		// selectFoods預設值為return:[];
		selectFoods: {
			type: Array,
			default() {
				return [  // 這個是測試資料，可以註釋掉
				{
					price: 5,
					count: 5
				}

				];  // 陣列，每個值表示商品總價
			}
		},
		deliveryPrice: {   // 配送費
			type: Number,
			default: 3
		},
		minPrice: {       // 起送價錢
			type: Number,
			default: 10
		}
	},
	computed: {				// 計算屬性
		totalPrice() {      // 根據selectFoods陣列計算總價
			let total = 0;   // 定義總價total = 0 
			this.selectFoods.forEach((food) => {  // 遍歷陣列，對每個food的food.price和food.count相乘求和
				total += food.price * food.count;
			});
			return total;      //  返回總價
		},
		totalCount() {       // 根據selectFoods陣列計算數量
			let count = 0;
			this.selectFoods.forEach((food) => {
				count += food.count;   // 每種food的count相加
			});
			return count;     // 返回總數量
		},
		payDesc() {   // 購物車右側描述詳情
			// 用反引號（波浪線下面）不用拼接字串，返回{}
			if (this.totalPrice === 0) {       // 當前總價為0顯示：￥${this.minPrice}元起送
				return `￥${this.minPrice}元起送`;
			} else if (this.totalPrice < this.minPrice) {
				let diff = this.minPrice - this.totalPrice;  // 計算距離起送價的差價
				return `還差￥${diff}元起送`;     // 返回還差￥${diff}元起送
			} else {
				return `去結算`;    // 滿足起送價格條件顯示去結算
			}
		},
		payClass() {
			if (this.totalPrice < this.minPrice) {
				return 'not-enough';    // 小於起送價，返回not-enough,:class="not-enough"
			} else {
				return 'enough';    // 返回enough,:class="enough"
			}
		}
	}
};
</script>

<style lang="stylus" ref="stylesheet/stylus">
.shopcart
	position: fixed
	z-index: 50
	left: 0
	bottom: 0
	height: 40px
	background: black
	width: 100%
	.content
		display: flex
		background: #141d27
		.content-left
			flex: 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
				background: #141d27
				.logo
					width: 100%
					height: 100%
					border-radius: 50%
					background: #2b343c
					&.highlight
						background: rgb(0, 160, 220)
					.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(240, 20, 20)
					color: #fff
					font-size: 9px
					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: 12px
				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
				height: 50px
				line-height: 24px
				font-size: 12px
				font-weight: 700
				text-align: center
				width: 100px
				color: rgba(255, 255, 255, 0.4)
				
		.content-right
			flex: 0 0 110px
			width: 120px
			.pay
				height: 48px
				line-height: 48px
				text-align: center
				font-size: 16px
				font-weight: 700
				color: rgba(255, 255, 255, 0.4)
				background: #2b333b
				&.not-enough
					background: #2b333b
				&.enough
					background: #00b43c
					color: #fff


</style>