Adam / gulu-vue

Browse Code »

Commit 987972474c72fbc1e3705207bb2b48dfbd8e0c18

Authored by BigBoss 2020-05-02 22:59:44 +0800

1 parent 1dbed037e6

Exists in master

订单页card组件提取

Showing 3 changed files with 62 additions and 14 deletions Show diff stats

src/pages.json

Diff comments View file @9879724

 {
 	"pages": [
-		{
-			"path": "pages/index/index",
-			"style": {
-				"navigationBarTitleText": "商城一览"
-				// "enablePullDownRefresh":true
-			}
-		},
         {
             "path" : "pages/myOrder/myOrder",
             "style" : {
 				"navigationBarTitleText": "我的订单"}
         },
 		{
 			"path": "pages/index/index",
 			"style": {
 				"navigationBarTitleText": "商城一览"
 				// "enablePullDownRefresh":true
 			}
 		},
 		{
 			"path": "pages/addArddess/addArddess",
 			"style": {
 				"navigationBarTitleText": "新增地址"
 			}
 		},
         {
             "path" : "pages/confirmOrder/confirmOrder",
             "style" : {
 				"navigationBarTitleText": "确认订单"}
         },
 		{
 			"path": "pages/cart/cart",
 			"style": {
 				"navigationBarTitleText": "购物车"
 			}
 		},
 		{
 			"path": "pages/user/user",
 			"style": {
 				"navigationBarTitleText": "我的"
 			}
 		},
 		{
 			"path": "pages/details-3/details-3"
 		},
 		{
 			"path": "pages/detail/detail"
 		}
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "uni-app",
 		"navigationBarBackgroundColor": "#F8F8F8",
 		"backgroundColor": "#F8F8F8"
 	},
 	"tabBar": {
 		"color": "#C0C4CC",
 		"selectedColor": "#fa436a",
 		"borderStyle": "black",
 		"backgroundColor": "#ffffff",
 		"list": [{
 				"pagePath": "pages/index/index",
 				"iconPath": "static/tab-home.png",
 				"selectedIconPath": "static/tab-home-current.png",
 				"text": "首页"
 			},
 			{
 				"pagePath": "pages/cart/cart",
 				"iconPath": "static/tab-cart.png",
 				"selectedIconPath": "static/tab-cart-current.png",
 				"text": "购物车"
 			},
 			{
 				"pagePath": "pages/user/user",
 				"iconPath": "static/tab-my.png",
 				"selectedIconPath": "static/tab-my-current.png",
 				"text": "我的"
 			}
 		]
 	}
 }

src/pages/myOrder/myOrder.vue

Diff comments View file @9879724

 <template>
 	<view class="content">
 		<view class="header">
 			<!-- 搜索-->
 			<view class="searchBar">
 				<icon class="searchIcon" type="search" size="14"></icon>
-				<input class="searchIpt" placeholder="老花镜" confirm-type="search"/>
+				<input class="searchIpt" placeholder="搜索订单关键字..." confirm-type="search"/>
+			</view>
+			<view class="screenBar">
+				<view  v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)"  >
+						<view class="screenItem"  v-bind:class="{ active: current === item.current }">{{ item.text }}</view>
+				</view>
 			</view>
 		</view>
+		<OrderCard></OrderCard>
 	</view>
 </template>
 <script>
-	export default {
+	import OrderCard from './OrderCard.vue'
+	export default {
+		components:{
+			'OrderCard':OrderCard
+		},
 		data() {
 			return {
+				screenItems: [
+					{current:0,text:'全部'},
+					{current:1,text:'待付款'},
+					{current:2,text:'待发货'},
+					{current:3,text:'待收货'},
+					{current:4,text:'退款售后'},
+					],
+				current: 0,
 			};
+		},
+		methods:{
+			onClickItem(e) {
+				if (this.current !== e) {
+					this.current = e;
+				}
+			}
 		}
 	}
 </script>
 <style lang="scss">
 	.content {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		background-color: #F7F6F6;
 		height: 100vh;
 	}
 	.header{
 		background-color: #ffffff;
 		width: 100%;
 		height: 232rpx;
 		padding: 40rpx 40rpx 36rpx 40rpx;
 		box-sizing: border-box;
 		.searchBar {
 			width: 670rpx;
 			display: flex;
 			justify-content: center;
 			align-items: center;
 			box-sizing: border-box;
 			padding: 0rpx 16rpx;
 			border: 1px solid #FF6B4A;
 			border-radius: 8rpx;
 			background-color: #ffffff;
 		}
+		.screenBar{
+			width: 670rpx;
+			height: 110rpx;
+			display: flex;
+			flex-direction: row;
+			justify-content: space-between;
+			align-items: center;
+			color: #333333;
+			font-size: 32rpx;
+		}
+		.screenItem{
+			height: 50rpx;
+			font-size: 32rpx;
+			color: #333333;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			transition:all 0.2s;
+		}
+		.active{
+			// font-size: 34rpx;
+			color: #EC5D3B;
+		}
 		.searchIpt {
 			height: 68rpx;
 			width: 670rpx;
 			padding: 16rpx;
 			font-size: 28rpx;
 			box-sizing: border-box;
 		}
 	}
 </style>

src/pages/myOrder/orderCard.vue

Diff comments View file @9879724

1	<template>	1	<template>
2	<view>	2	<view class="card">
3		3
4	</view>	4	</view>
5	</template>	5	</template>
6		6
7	<script>	7	<script>
8	export default {	8	export default {
9	data() {	9	data() {
10	return {	10	return {
11		11
12	};	12	};
13	}	13	}
14	}	14	}
15	</script>	15	</script>
16		16
17	<style lang="scss">	17	<style lang="scss">
18		18	.card{
		19	width: 670rpx;
		20	height: 478rpx;
		21	background: #FFFFFF;
		22	box-shadow: 0 0 10px 0 rgba(177,128,128,0.06);
		23	border-radius: 8px;
		24	border-radius: 8px;
		25	margin-top: 20rpx;
		26	}
19	</style>	27	</style>
20		28