contract-front/pages/views/dingDanCreate.uvue

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

    <view class="header">
	 <view class="header_info">
		 <uni-icons class="header_info_icon" type="left" size="30" color="#c2d4de" :size="1" @click="toBack"></uni-icons>
		 <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"  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.id?'click_color':'']" @click="FirstLevelChange(item.id)">{{item.name}}</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>
	export default {
		data() {
			return {
				firstFocus:true,
				ServiceName:'',
				product:[
					{
					    id: 1,
					    name: '数码',
					    children: [
					      {
					        id: 12,
					        name: '耳机',
					        children: [
					          { id: 121, name: '漫步者' },
					          { id: 122, name: '倍思' }
					        ]
					      },
					      {
					        id: 13,
					        name: '电脑',
					        children: [
					          { id: 131, name: '联想' },
					          { id: 132, name: '小米' },
					          { id: 133, name: '戴尔' }
					        ]
					      }
					    ]
					  },
					  {
					    id: 2,
					    name: '家用电器',
					    // 类似数码的子结构
						children:[
							{
							  id: 11,
							  name: '手机',
							  children: [
							    { id: 111, name: 'iphone' },
							    { id: 112, name: 'vivo' },
							    { id: 113, name: 'oppo' }
							  ]
							}
						]	
					  }
				],
				product_2:[],
				FirstIndex:0,
				name:''
			}
		},
		onLoad() {
			uni.request(
			{ 
						  url: 'https://gpt.aiym.run/contract/miniapp/product/categories' ,
						  method:'GET',
						  header:{
							  "Content-Type": "application/json",
							  "X-Access-Token":'11'
						  },
						  success:(res)=>{
							  console.log(res.data.result)
						  }
			}
			);
			
		},
		methods: {
			toBack(){
				uni.navigateBack({
					delta: 1
				});
			},
			toNext(){
				console.log(111);
				uni.navigateTo(
				{ url: '/pages/views/payment' }
				)
			},
			nameClick (){
				
			},
			FirstLevelChange(id){
				this.FirstIndex = id;
				this.product_2 = this.product[id-1].children;
			},
			selctRadio(name){
				console.log(name);
				this.name = name;
			}
		},
		searchName(){
			console.log('1');
		}
	}
</script>

<style>

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
  position: relative;
}
/* 头部 */
.header {
  width: 100%;
  height: 15%;
  background-color: #044f7a;
  color: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.header_info{
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	color: #e0e9ef;
	justify-content: center;
	align-items: center;
	flex: 15;
}
.header_info_icon{
	margin-right: auto;
	flex: 1;
}
.header_text{
	flex: 14;
	display: flex;
	/* justify-content: center; */
	left:35%;
	align-items: center;
}
/* 搜索框 */
.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 20rem 0 20rem;
	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: 30rem;
	width: 100%;
	line-height: 30rem;
	margin: 20rem 0 20rem 0;
	font-size: 30rem;
}
.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: 27rem;
	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%;
}
.content_footer_right_content_radio{
margin-left: auto;
margin-right: 5%;
}
/* 点击颜色 */
.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: 25rem;
	border-radius: 30rem;
	background-color: #05507c;
	bottom:5%;
	right: 5%;
	color: #fafcff;
	z-index: 99999;
}
</style>