From 6111092e894ad2e4dd850b0b9b6a6d4f49149e8c Mon Sep 17 00:00:00 2001
From: BigBoss <2280520255@qq.com>
Date: Sun, 10 May 2020 22:46:31 +0800
Subject: [PATCH] update cart

---
 src/pages.json                      |  14 +--
 src/pages/addArddess/addArddess.vue |   2 +-
 src/pages/cart/cart.vue             | 232 ++++++++++++++++++++++++++++++++----
 src/pages/index/index.vue           |   2 +-
 src/pages/myOrder/myOrder.vue       |   2 +-
 5 files changed, 216 insertions(+), 36 deletions(-)

diff --git a/src/pages.json b/src/pages.json
index e09b1ea..f1a30d4 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -1,6 +1,12 @@
 {
 	"pages": [ 
 		{
+			"path": "pages/cart/cart",
+			"style": {
+				"navigationBarTitleText": "购物车"
+			}
+		},
+		{
 			"path": "pages/index/index",
 			"style": {
 				"navigationBarTitleText": "商城一览"
@@ -47,12 +53,6 @@
 				"navigationBarTitleText": "确认订单"}
         },
 		{
-			"path": "pages/cart/cart",
-			"style": {
-				"navigationBarTitleText": "购物车"
-			}
-		},
-		{
 			"path": "pages/user/user",
 			"style": {
 				"navigationBarTitleText": "我的"
@@ -65,7 +65,7 @@
 			"path": "pages/refundment/refundment"
 		},
 		{
-			"path": "pages/Predelivery/Predelivery"
+			"path": "pages/predelivery/predelivery"
 		},
 		{
 			"path": "pages/customerService/customerService"
diff --git a/src/pages/addArddess/addArddess.vue b/src/pages/addArddess/addArddess.vue
index 1a1847e..565c241 100644
--- a/src/pages/addArddess/addArddess.vue
+++ b/src/pages/addArddess/addArddess.vue
@@ -30,7 +30,7 @@
 </template>
 
 <script>
-	import SimpleAddress from '@/components/Simple-address/simple-address.vue';
+	import SimpleAddress from '@/components/Simple-address/Simple-address.vue';
 	export default {
 		data() {
 			return {
diff --git a/src/pages/cart/cart.vue b/src/pages/cart/cart.vue
index 4ca2b92..2d75583 100644
--- a/src/pages/cart/cart.vue
+++ b/src/pages/cart/cart.vue
@@ -1,8 +1,46 @@
 <template>
 	<view class="content">
-		<image class="logo" src="/static/logo.png"></image>
-		<view class="text-area">
-			<text class="title">{{title}}</text>
+		<checkbox-group name="">
+			<label>
+				<view class="card">
+					<view class="cardHeader">
+						<checkbox color="#FF6B4A" :value="totalPrice"  style="transform:scale(0.7)"/>
+						<image src="../../static/customerService-btn.png" mode="aspectFill"></image>
+						<text>非常戴镜</text>
+					</view>
+					<view class="cardBody">
+						<checkbox color="#FF6B4A" :value="totalPrice" style="transform:scale(0.7)" />
+						<view class="goodInfo">
+							<view class="imageWrap">
+								<image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image>
+							</view>
+							<view class="infoRight">
+								<text class="goodName">商品名称商品名称商品名称名称名称商品名称名商品名称名</text>
+								<view class="describ"><text>支持7天无理由退货 顺丰发货支持7天无理由退货 顺丰发货支持7天无理由退货 顺丰发货</text>
+								<!-- <text class="icon">></text> -->
+								</view>
+								<view class="priceBox">
+									<view class="price">￥198</view>
+									<text>(限购{{maxCount}}副)</text>
+									<view class="counter">
+										<view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view>
+										<text>{{count}}</text>
+										<view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view>
+									</view>
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</label>
+		</checkbox-group>
+		
+		
+		<view class="footer">
+			<view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view>
+			<view class="footerRight">
+				<view class="paybtn">立即支付</view>
+			</view>
 		</view>
 	</view>
 </template>
@@ -11,42 +49,184 @@
 	export default {
 		data() {
 			return {
-				title: 'Hello'
+				totalPrice: 360,
+				count:1,
+				maxCount:20,
 			}
 		},
 		onLoad() {
 
 		},
 		methods: {
-
+			counter(isadd){
+				if(isadd){
+					this.count >= this.maxCount? this.addDisabled = true:this.count++;
+				}else{
+					this.count <= 1? this.desDisabled = true:this.count--;
+				}
+			},
 		}
 	}
 </script>
 
-<style>
+<style lang="scss">
 	.content {
+		min-height: 100vh;
+		background-color: #F7F6F6;
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		justify-content: center;
-	}
-
-	.logo {
-		height: 200rpx;
-		width: 200rpx;
-		margin-top: 200rpx;
-		margin-left: auto;
-		margin-right: auto;
-		margin-bottom: 50rpx;
-	}
-
-	.text-area {
-		display: flex;
-		justify-content: center;
-	}
-
-	.title {
-		font-size: 36rpx;
-		color: #8f8f94;
+		justify-content: space-between;
+		padding: 20rpx 40rpx;
+		box-sizing: border-box;
+		
+		.card{
+			background-color: #FFFFFF;
+			border-radius: 16rpx;
+			box-sizing: border-box;
+			padding: 36rpx 36rpx 36rpx 18rpx;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: space-between;
+			.cardHeader{
+				width: 100%;
+				height: 36rpx;
+				display: flex;
+				align-items: center;
+				justify-content: flex-start;
+				image{
+					height: 32rpx;
+					width: 32rpx;
+				}
+			}
+			.cardBody{
+				width: 100%;
+				height: 300rpx;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				.goodInfo{
+					width: 95%;
+					display: flex;
+					flex-direction: row;
+					justify-content: flex-start;
+					.imageWrap{
+						height: 188rpx;
+						width: 188rpx;
+							margin-right: 28rpx;
+						image{
+							height: 188rpx;
+							width: 188rpx;
+						}
+					}
+					.infoRight{
+						display: flex;
+						flex-direction: column;
+						align-items: flex-start;
+						justify-content: space-between;
+						height: 220rpx;
+						.goodName{
+							font-size: 28rpx;
+							color: #333333;
+						}
+						.describ{
+							width: 100%;
+							height: 80rpx;
+							box-sizing: border-box;
+							padding: 10rpx;
+							font-size: 20rpx;
+							color: #999999;
+							background: #F2F2F2;
+							text{
+								 text-overflow: -o-ellipsis-lastline;
+								  overflow: hidden;
+								  text-overflow: ellipsis;
+								  display: -webkit-box;
+								  -webkit-line-clamp: 2;
+								  line-clamp: 2;
+								  -webkit-box-orient: vertical;
+							}
+							// .icon{
+							// 	transform: rotate(90deg);
+							// }
+						}
+						.priceBox{
+							display: flex;
+							justify-content: space-between;
+							align-items: center;
+							width: 100%;
+							font-size: 14px;
+							color: #999999;
+							.price{
+								color: #FF6B4A;
+								font-size: 28rpx;
+							}
+							.counter{
+								display: flex;
+								flex-direction: row;
+								justify-content: space-between;
+								align-items: center;
+								font-size: 28rpx;
+								color: #333333;
+								width: 122rpx;
+								.btn{
+									display: flex;
+									justify-content: center;
+									line-height: 32rpx;
+									height: 32rpx;
+									width: 32rpx;
+									background-color: #F2F2F2;
+									color: #CFCFCF;
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+		
+		.footer{
+			position: fixed;
+			left: 0;
+			bottom: 0;
+			height: 112rpx;
+			width: 100%;
+			background-color: #FFFFFF;
+			font-size: 16px;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			.footerLeft{
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				width: 50%;
+				color: #333333;
+				text{
+					color: #FF6B4A;
+				}
+			}
+			.footerRight{
+				display: flex;
+				justify-content: flex-end;
+				align-items: center;
+				width: 50%;
+				margin-right: 26rpx;
+				.paybtn{
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					background: #FF6B4A;
+					border-radius: 20px;
+					border-radius: 20px;
+					color: #FFFFFF;
+					width: 204rpx;
+					height: 80rpx;
+				}
+			}
+				
+		}
 	}
+	
 </style>
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 8326cb2..7d979c5 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -77,7 +77,7 @@
 </template>
 
 <script>
-import UniDrawer from "../../components/uni-drawer/uni-drawer.vue";
+import UniDrawer from "../../components/Uni-drawer/Uni-drawer.vue";
 import Card from "../../components/Card/Card.vue";
 import HMfilterDropdown from "../../components/HM-filterDropdown/HM-filterDropdown.vue";
 import data from "@/common/data.js"; //筛选菜单数据
diff --git a/src/pages/myOrder/myOrder.vue b/src/pages/myOrder/myOrder.vue
index b81acdc..f55255d 100644
--- a/src/pages/myOrder/myOrder.vue
+++ b/src/pages/myOrder/myOrder.vue
@@ -21,7 +21,7 @@
 	</view>
 </template>
 <script>
-	import OrderCard from './orderCard.vue'
+	import OrderCard from './OrderCard.vue'
 	export default {
 		components:{
 			'OrderCard':OrderCard
-- 
2.0.0