contract-front/pages/views/dingDanCreate.uvue

<template>
  <view class="container">
    <!-- 顶部标题 -->

    <view class="header">
	 <view class="header_info" >
		 <view class="header_info_icon" @click.native.stop.prevent="toBack" style="display: flex; justify-content: center; align-items: center;">
		 	<uni-icons  type="left" size="30" color="#c2d4de"  > </uni-icons>
		 </view>
		 <text class="header_text">录入订单</text>
	 </view>
    </view>
	<view class="content_container">
		<view class="isshow-header">
			<uni-icons class=" isshow-header-content-icon" type="search" :size="20"></uni-icons>
			<uni-easyinput :inputBorder="false" @input="handleSearch" @clear="clear" class=" isshow-header-content-input" v-model="ServiceName" placeholder="请输入服务名称" :focus="firstFocus"  />
			<text class="isshow-header-content-text" @click="searchName">搜索</text>
		</view>
	</view>
	<!-- 二级分类 -->
	<view class="content_footer">
		<!-- 分类 -->
		          <scroll-view  show-scrollbar="false"  class="content_footer_left">
		            <view v-for="(item,index) in product" :class="['content_footer_left_product', FirstIndex === item.categoryId?'click_color':'']" @click="FirstLevelChange(item.categoryId)">{{item.categoryName}}</view>
		          </scroll-view>
				  
				  <scroll-view  show-scrollbar="false" class="content_footer_right">
				    <view v-for="(item,index) in product_2" class="content_footer_right_content">
					<text class="text" :class="['content_footer_right_content_text', item.name === name?'select_color':'']">{{item.name}}</text>
					<radio class="content_footer_right_content_radio" value="item.id" :checked="item.name == name" activeBackgroundColor="#04517b"  @click="selctRadio(item.name)"></radio>
					</view>
				  </scroll-view>
	</view>
	<!-- 下一步 -->
	<view class="buttun" @click="toNext">下一步</view>
</view>
</template>
<script>
	import {
		getProduct
	} from '@/api.uts'
	export default {
		data() {
			return {
				firstFocus:true,
				ServiceName:'',
				product:[],
				product_2:[],
				product_3:[],
				product_4:[],
				FirstIndex:0,
				name:''
			}
		},
		onLoad() {
			getProduct().then((res)=>{
				this.product= res.result;
				this.product_2 = res.result[0].products;
				for (var index = 1; index < this.product.length; index++) {
					this.product_4.push(this.product[index])
				}
				this.product_3= res.result[0].products;
				
				getApp().productName = res.result[0].products[0].name;
				this.name = res.result[0].products[0].name;
			});

		},
		methods: {
			toBack(){
							  let canNavBack = getCurrentPages()
							  if( canNavBack && canNavBack.length>1) {  
							      uni.navigateBack() 
							  } else {  
							      history.back();  
							  } 
			},
			toNext(){
				console.log(111);
				uni.navigateTo(
				{ url: '/pages/index/PayPal' }
				)
			},
			clear (){
				this.ServiceName = "";
			},
			FirstLevelChange(id){
				this.FirstIndex = id;
				this.product_2 = this.product[id].products;
				
			},
			selctRadio(name){
				getApp().productName = name;
				this.name = name ;
			},
			handleSearch(event) { 
				this.FirstIndex=0
						  if(event){
							  this.product_2 = [];
							  for (var index = 0; index < this.product_4.length; index++) {
								  // console.log('111',JSON.stringify(this.product_4[index].products))
								  this.product_4[index].products.map(item => {
								     if (item.name.indexOf(event) !== -1) {
								       this.product_2.push(item);
								     }
								   });
							  }
							 
						  }else {
						this.product_2=[];
						this.product_2 =  this.product_3;
						  }
			},
			searchName(){
					this.FirstIndex=0
				if(this.ServiceName){
					this.product_2 = [];
					for (var index = 0; index < this.product_4.length; index++) {
													  this.product_4[index].products.map(item => {
													     if (item.name.indexOf(this.ServiceName) !== -1) {
													       this.product_2.push(item);
													     }
													   });
					}
				}else {
								  this.product_2=[];
								  this.product_2 =  this.product_3;
				}
			}
		}
		
	}
</script>

<style>

/* 搜索框 */
.content_container{
	width: 100%;
	height: 10%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center
}
.content_footer{
	width: 100%;
	height: 75%;
	display: flex;
	flex-direction: row;
}
/* 搜索框 */

/* 遮罩层 */
.isshow-header{
	width: 90%;
	height: 100%;
	display: flex; 
	justify-content: center;
	align-items: center;
	flex-direction: row;
	color: #3c7697;
}
.isshow-header-content-icon{
	width: 10%;
	height: 30%;
}
.isshow-header-content-input{
	width: 80%;
	height: 40%;
	margin: 0 1rem 0 1rem;
	border:none;
	outline:none;
}
.isshow-content{
	height: 70%;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow-y:scroll;
}
.isshow-content-text{
	color: #414141;
	height: 1.5rem;
	width: 100%;
	line-height: 1,5rem;
	margin: 1rem 0 1rem 0;
	font-size: 1.5rem;
}
.isshow-content::-webkit-scrollbar {
    display: none;
}
/* 二级分类 */
.content_footer_left{
	width: 20%;
}
.content_footer_left_product{
	width: 100%;
	height: 10%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1rem;
	color: #7f7f7f;
}
.content_footer_right{
	width: 80%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.content_footer_right_content{
	width: 100%;
	height: 10%;
	display: flex;
	flex-direction: row;
	/* background-color: red; */
	align-items: center;
}
.content_footer_right_content_text{
margin-right: auto;
color:#242424;
margin-left: 5%;
font-size: 0.8rem;
}
.content_footer_right_content_radio{
margin-left: auto;
margin-right: 5%;
transform: scale(0.9);
}
/* 点击颜色 */
.click_color{
	background-color: #044f7a;
	color: #f0fcf2;
}
.select_color{
	color: #316b8b;
}
/* 按钮 */
.buttun{
	width: 30%;
	height: 5%;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.3rem;
	border-radius: 1.5rem;
	background-color: #05507c;
	bottom:5%;
	right: 5%;
	color: #fafcff;
	z-index: 99999;
}
</style>