Merge remote-tracking branch 'origin/master'

pages/order/channel.vue

@@ -1,6 +1,14 @@
 <!-- 订单列表2 -->
 <template>
-	<u-navbar :is-back="false" title="订单查询"></u-navbar>
+	<view class="as-layout-horizontal as-gravity-center-start search-layout">
+		<view class="search-box">
+			<image :src="`${$imgUrl}service/icon-search.png`" class="icon" mode="aspectFill"></image>
+			<view class="column-input" @click="showSearch">
+				<text class="column-value" v-if="phone">{{ phone }}</text>
+				<text class="column-placeholder" v-else>请输入手机号</text>
+			</view>
+		</view>
+	</view>
 	
 	<view class="order-list" v-if="state.list && state.list.length > 0">
 		<view class="order-item" v-for="item in state.list">
@@ -9,19 +17,19 @@
 		<uni-load-more :status="state.status" iconType="snow" :icon-size="16" :content-text="state.contentTxt" v-if="state.list.length > 0" />
 	</view>
 	
-	<NoDataView v-else></NoDataView>
+	<NoDataView v-else style="margin-top: 34rpx;"></NoDataView>
 	
-	<FixedFooter>
+	<!-- <FixedFooter>
 		<button
 			type="default"
 			class="ui-btn"
 			@click="searchShow">
 			查询
 		</button>
-	</FixedFooter>
+	</FixedFooter> -->
 	
 	<!--填写手机号 start-->
-	<u-popup v-model="state.inputPhonePopup" mode="center">
+	<u-popup v-model="state.inputPhonePopup" mode="center" @close="popupClose">
 		<view class="input-phone">
 			<view class="title">订单查询</view>
 			<view class="tips">请输入手机号进行订单查询</view>
@@ -29,8 +37,8 @@
 				<view class="input-phone-from">
 					<u-form-item prop="phone">
 						<view class="from_item">
-							<text><text style="color: red"></text>手机号：</text>
-							<u-input v-model="phone" class="input" placeholder="请输出查询手机号"/>
+							<!-- <text><text style="color: red"></text>手机号：</text> -->
+							<u-input v-model="phone" class="input" placeholder="请输出查询手机号" :focus="state.isFocus"/>
 						</view>
 					</u-form-item>
 					<!-- <u-form-item prop="code">
@@ -82,7 +90,8 @@
 			contentrefresh: '努力加载中...',
 			contentnomore: '-- 我是有底线的 --'
 		},
-		inputPhonePopup: true
+		inputPhonePopup: true,
+		isFocus: false
 	});
 	
 	const getList = () => {
@@ -117,10 +126,20 @@
 		getList();
 	}
 	
+	const showSearch = () => {
+		state.inputPhonePopup = true
+		state.isFocus = true
+		console.log(state.isFocus)
+	}
+	
 	const searchShow = () => {
 		state.inputPhonePopup = true
 	}
 	
+	const popupClose = () => {
+		state.isFocus = false
+	}
+	
 	//倒计时时常
 	const codeDuration = ref(0);
 	const phone = ref("");
@@ -212,4 +231,66 @@
 		width: 520rpx;
 		margin: 32rpx auto 0;
 	}
+	.toggle-phone{
+		margin: 20rpx 30rpx;
+		padding: 18rpx 30rpx 18px;
+		background: linear-gradient(to right, #CCB375 0%, #E7D398 100%);
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		color: #FFFFFF;
+		border-radius: 12rpx;
+	}
+
+	.search-layout {
+
+		.search-box {
+			margin: 30rpx 30rpx 0rpx 30rpx;
+			height: 80rpx;
+			background: #FFFFFF;
+			border: 1px solid #DCDCDC;
+			border-radius: 40rpx;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			box-sizing: border-box;
+			flex: 1;
+		}
+
+		.search-box .icon {
+			width: 48rpx;
+			height: 48rpx;
+			margin: 0 20rpx;
+		}
+
+		.search-box .search {
+			flex: 1;
+			margin-right: 20rpx;
+			height: 100%;
+			padding: 0 10rpx;
+			font-size: 28rpx;
+			color: #00b38b;
+		}
+
+		.search-btn {
+			color: white;
+			background-color: #00B38B;
+			width: 140rpx;
+			height: 75rpx;
+			line-height: 75rpx;
+			font-size: 32rpx;
+			border-radius: 40rpx;
+			text-align: center;
+			margin-right: 30rpx;
+			margin-top: 30rpx;
+		}
+		.column-input{
+			flex: 1;
+			font-size: 28rpx;
+			color: #333333;
+		}
+		.column-placeholder{
+			color: #c0c4cc;
+		}
+	}
 </style>