zhywpt-sp/pages/order/channel.vue

<!-- 订单列表2 -->
<template>
	<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">
			<orderListItemNew :item="item"></orderListItemNew>
		</view>
		<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 style="margin-top: 34rpx;"></NoDataView>
	
	<!-- <FixedFooter>
		<button
			type="default"
			class="ui-btn"
			@click="searchShow">
			查询
		</button>
	</FixedFooter> -->
	
	<!--填写手机号 start-->
	<u-popup v-model="state.inputPhonePopup" mode="center" @close="popupClose">
		<view class="input-phone">
			<view class="title">订单查询</view>
			<view class="tips">请输入手机号进行订单查询</view>
			<u-form ref="myForm">
				<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="请输出查询手机号" :focus="state.isFocus"/>
						</view>
					</u-form-item>
					<!-- <u-form-item prop="code">
						<view class="from_item">
							<text><text style="color: red"></text>验证码：</text>
							<u-input v-model="code" placeholder="请输入验证码" class="input" />
							<view class="hint2">
								<view class="green">{{ codeDuration === 0 ? "" : codeDuration }}</view>
								<view class="grey" @click="sendRegisterCode">{{ codeDuration === 0 ? "发送验证码" : "秒后可重发"
						  }}</view>
							</view>
						</view>
					</u-form-item> -->
				</view>
			</u-form>
			
			<button type="default" class="ui-btn search-btn" @click="search">
				查询
			</button>
		</view>
	</u-popup>
	<!--填写手机号 end-->
</template>

<script setup lang="ts">
	import { msg, navTo, confirm, checkStr } from "@/utils/utils";
	import orderTabbar from "./components/order-tabbar.vue";
	import orderListItem from "./components/order-list-item";
	import useOrderList from "@/composables/order/useOrderList";
	import filter from '@/components/filter/filter.vue';
	import {onUnload, onLoad} from '@dcloudio/uni-app'
	import { reactive } from "vue";
	import NoDataView from "@/components/no-data-view/no-data-view.vue";
	import orderListItemNew from "./components/order-list-item-new.vue";
	import { requestNew } from "@/utils/network/request";
	import { sendMessage, getChannleOrder} from "@/utils/network/api.js";
	import { ref } from "vue";
	import FixedFooter from '@/components/common/FixedFooter.vue'
	
	onLoad((option : any) => {
		console.log(option)
	})
	
	const state = reactive({
		list: [],
		status: 'nomore',
		contentTxt: {
			contentdown: '~上拉加载更多~',
			contentrefresh: '努力加载中...',
			contentnomore: '-- 我是有底线的 --'
		},
		inputPhonePopup: true,
		isFocus: false
	});
	
	const getList = () => {
		let options = {
			type: 2,
			data: { mobile: phone.value },
			method: "POST",
			showLoading: true,
		}
		console.log(phone.value)
		requestNew(getChannleOrder, options).then((res) => {
			console.log(res)
			let list = res.orderList || []
			state.list = list
			if (list.length > 0) {
				state.inputPhonePopup = false
			} else {
				msg("该手机号暂无相关订单")
			}
		});
	}
	
	const search = () => {
		if (!phone.value) {
			msg("请输入手机号");
			return;
		} if (!checkStr(phone.value, 'mobile')) {
			msg("请输入正确的手机号");
			return;
		}
		
		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("");
	let interval = null;
	
	/* 验证码倒计时 */
	const codeInterval = () => {
		codeDuration.value = 60;
		interval = setInterval(() => {
			codeDuration.value--;
			if (codeDuration.value === 0) {
				if (interval) {
					clearInterval(interval);
					interval = null;
				}
			}
		}, 1000);
	};
	
	/* 发送验证码 */
	const sendRegisterCode = () => {
		if (codeDuration.value !== 0) {
			return;
		}
		const options = {
			type: 2,
			data: { mobile: phone.value },
			method: "POST",
			showLoading: true,
		};
		requestNew(sendMessage, options).then((res) => {
			msg("验证码发送成功！");
			codeInterval();
		});
	};
	
	
</script>

<style lang="scss">
	page {
		background:  #E9EDF0;
	}

	:deep(.u-mode-center-box) {
		border-radius: 20rpx;
	}
</style>
<style lang="scss" scoped>

	.hint2 {
		margin-top: 40rpx;
		display: flex;

		.green {
			font-size: 28rpx;
			color: #00b38b;
		}

		.grey {
			font-size: 24rpx;
			color: #999999;
			margin-left: 16rpx;
		}
	}
	.input-phone{
		width: 600rpx;
		padding: 32rpx ;
		.title{
			padding: 12rpx 0;
			text-align: center;
			font-weight: bold;
			font-size: 32rpx;
		}
		.tips{
			color: #CCB375;
			font-size: 26rpx;
			line-height: 1.5;
			text-align: center;
			margin-bottom: 24rpx;
		}
	}
	.input-phone-from{
		padding: 12rpx 24rpx;
		background-color: #f7f7f7;
		border-radius: 12rpx;
	}
	.search-btn{
		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>