lhyt_shop_applet/XCX-Shop/pages/index/buyUsedCar.vue

<template>
	<view class="body">
		<view class="content">
			<view style="width: 85vw; height: 12vw; border-bottom: 0.5px solid #f8f8f8;">
				<p style="display: flex;"><span style="color: red;  line-height: 11vw;">*</span> <span
						style="font-size: 0.8rem; line-height: 10vw; margin-left: 1vw;">您的姓名</span> <input type="text"
						placeholder="请输入姓名"
						style="font-size: 0.8rem; height: 10vw; line-height: 10vw; margin-left: 10vw; " /> </p>
			</view>
			<view style="width: 85vw; height: 12vw; border-bottom: 0.5px solid #f8f8f8;">
				<view style="display: flex;"><span style="color: red;  line-height: 11vw;">*</span> <span
						style="font-size: 0.8rem; line-height: 10vw; margin-left: 1vw;">您的性别</span>
					<view style="display: flex; align-items: center; margin-left: 4vw;">
						<u-radio-group v-model="selectRadio"  @change="radioGroupChange">
									<u-radio 
										@change="radioChange" 
										active-color="red"
										v-for="(item, index) in list" :key="index" 
										:name="item.name"
										:disabled="item.disabled"
									>
										{{item.name}}
									</u-radio>
								</u-radio-group>
					</view>
				</view>
			</view>
			<!-- 意向品牌 -->
			<view style="width: 85vw; height: 12vw; display: flex; border-bottom: 0.5px solid #f8f8f8;">
				<p style="display: flex;"><span style="color: red;  line-height: 11vw;">*</span> <span
						style="font-size: 0.8rem; line-height: 10vw; margin-left: 1vw;">意向品牌</span> <input type="text"
						placeholder="请选择你的意向品牌"
						style="font-size: 0.8rem; width: 50vw; height: 10vw; line-height: 10vw; margin-left: 9vw; "
						@focus="searchList" @blur="LoseBlur" /> </p>
				<p style="display: flex; align-items: center;">
					<image style="width: 5vw; height: 5vw;" :src="jiantou"> </image>
				</p>
				<view style="position: absolute;" class="carModel" v-if="carList">
					<p  class="carList"> 奥迪A6 </p>
				</view>
			</view>
			<!-- 车龄 -->
			<view style="width: 85vw; height: 12vw; display: flex; border-bottom: 0.5px solid #f8f8f8;">
				<p style="display: flex;"><span style="color: red;  line-height: 11vw;">*</span> <span
						style="font-size: 0.8rem; line-height: 10vw; margin-left: 1vw;">车龄</span> <input type="text"
						placeholder="请选择你的车龄"
						style="font-size: 0.8rem; width: 50vw; height: 10vw; line-height: 10vw; margin-left: 16vw; "
						@focus="ageList" @blur="ageBlur" /> </p>
				<p style="display: flex; align-items: center;">
					<image style="width: 5vw; height: 5vw;" :src="agejiantou"> </image>
				</p>
				<view style="position: absolute;" class="ageModel" v-if="ageShow">
					<p class="carList" v-for="(item,index) in carage" :key="index" > {{item.age}} </p>
				</view>
			</view>
			<!-- 行驶里程 -->
			<view style="width: 85vw; height: 12vw; display: flex; border-bottom: 0.5px solid #f8f8f8;">
				<p style="display: flex;"><span style="color: red;  line-height: 11vw;">*</span> <span
						style="font-size: 0.8rem; line-height: 10vw; margin-left: 1vw;">行驶里程</span> <input type="number"
						placeholder="请输入行驶里程"
						style="font-size: 0.8rem; width: 48vw; height: 10vw; line-height: 10vw; margin-left: 9vw; " />
				</p>
				<p style="display: flex; align-items: center; font-size: 0.85rem;">
					公里
				</p>
			</view>
			<!-- 行驶里程 -->
			<view style="width: 85vw; height: 12vw; display: flex; border-bottom: 0.5px solid #f8f8f8;">
				<p style="display: flex;"><span style="color: red;  line-height: 11vw;">*</span> <span
						style="font-size: 0.8rem; line-height: 10vw; margin-left: 1vw;">车辆所在地</span> <input type="number"
						placeholder="请输入车辆所在地"
						style="font-size: 0.8rem; width: 50vw; height: 10vw; line-height: 10vw; margin-left: 5vw; " />
				</p>
			</view>
			<!-- 备注说明 -->
			<view style="width: 85vw; height: 12vw; display: flex; border-bottom: 0.5px solid #f8f8f8;">
				<p style="display: flex;"><span style="color: red;  line-height: 11vw;">*</span> <span
						style="font-size: 0.8rem; line-height: 10vw; margin-left: 1vw;">备注说明</span> <input type="number"
						placeholder="留言备注,我们将尽量安排"
						style="font-size: 0.8rem; width: 50vw; height: 10vw; line-height: 10vw; margin-left: 8vw; " />
				</p>
			</view>
			<view class="button" @click="submit">提交</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectRadio: '先生',
				carList: false,
				ageShow:false,
				carage:[
					{age:'1年内'},
					{age:'1-3年'},
					{age:'3-5年'},
					{age:'5-8年'},
					{age:'8-10年'},
					{age:'10年以上'}
				],
				jiantou:'../../static/xiajiantou.png',
				agejiantou:'../../static/xiajiantou.png',
				list: [{
						name: '先生',
						disabled: false
					},
					{
						name: '女士',
						disabled: false
					},
				]
			}
		},
		methods: {
			// submit(){
			// 	this.postUserdCar({},res=>{
			// 		if(res.code==0){
						
			// 		}
			// 	})
			// },
			radioGroupChange(e){
				console.log(e)
			},
			ageList(){
				this.ageShow=true
				this.agejiantou='../../static/shangjiantou.png'
			},
			ageBlur(){
				this.ageShow = false
				this.agejiantou='../../static/xiajiantou.png'
				
			},
			searchList() {
				this.carList = true
				this.jiantou='../../static/shangjiantou.png'
			},
			LoseBlur(){
				this.carList = false
				this.jiantou='../../static/xiajiantou.png'
				
			},
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				console.log(e);
			},
		}
	}
</script>

<style scoped lang="scss">
	.body {
		width: 100vw;
		height: 100vh;
		background-color: #f8f8f8;
		display: flex;
		// flex-direction: column;
		justify-content: center;

		.content {
			width: 90vw;
			height: 65vh;
			background-color: white;
			border-radius: 15px;
			box-sizing: border-box;
			padding: 2vw;

			.carModel {
				width: 87vw;
				height: 80vw;
				border-radius: 5vw;
				background-color: white;
				border: 0.5px solid #dbddbd;
				top: 33vw;
				left: 5vw;
				overflow: auto;
				z-index: 99;
			}

			.carList {
				width: 85vw;
				line-height: 10vw;
				font-size: 0.85rem;
				height: 10vw;
				border-bottom: 0.5px solid #f8f8f8;
				color: grey;
				box-sizing: border-box;
				padding: 0 4vw;
			}
			.ageModel{
				width: 87vw;
				height: 80vw;
				border-radius: 5vw;
				z-index: 99;
				background-color: white;
				border: 0.5px solid #dbddbd;
				top: 43vw;
				left: 5vw;
				text-align: center;
				overflow: auto;
			}
		}
		.button{
			width: 85vw;
			height: 10vw;
			margin-top: 10vw;
			background-color: red;
			line-height: 10vw;
			border-radius: 5vw;
			color: white;
			text-align: center;
		}
	}
</style>