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

<template>
	<view class="body">
		<view class="content">
			<!-- 意向品牌 -->
			<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>
				</p>
				<view style="margin-left: 8vw; width: 50vw;">
					<uni-data-select v-model="value" :localdata="range" :clear="false" @change="change"></uni-data-select>
				</view>
			</view>
			<view style="width: 85vw; height: 12vw;  display: flex; border-bottom: 0.5px solid #f8f8f8;" @click="LikeStore">
				<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="请选择意向门店"
						v-model="storeName"
						style="font-size: 0.8rem; height: 10vw; line-height: 10vw; margin-left: 9vw; " /> </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="text"
						placeholder="车型"
						v-model="Vehiclemodel"
						style="font-size: 0.8rem; width: 50vw; height: 10vw; line-height: 10vw; margin-left: 16vw; "
						> </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="text"
						placeholder="联系方式"
						v-model="tel"
						style="font-size: 0.8rem; width: 50vw; height: 10vw; line-height: 10vw; margin-left: 9vw; "
						> </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="text" placeholder="上牌日期"
						style="font-size: 0.8rem; width: 50vw; height: 10vw; line-height: 10vw; margin-left: 9vw; "
						v-model="upcarNumberData" @focus="timeFocus"  />
					<u-picker mode="time" v-model="show" @confirm="confirm" @cancel="cancel"></u-picker>
				</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="Numbber"
						placeholder="行驶里程"
						v-model="Mileagevalue"
						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.8rem; color: gray;">
					万公里
				</p>
			</view>
		
			<!-- 行驶里程 -->
			<view style="width: 85vw; height: 12vw; display: flex; border-bottom: 0.5px solid #f8f8f8;" @click="city">
				<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="所在城市"
						v-model="areaValue"
						style="font-size: 0.8rem; width: 50vw; height: 10vw; line-height: 10vw; margin-left: 9vw; " />
				</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"
						v-model="text"
						placeholder="请输入备注说明"
						style="font-size: 0.8rem; width: 50vw; height: 10vw; line-height: 10vw; margin-left: 6vw; " />
				</p>
			</view>
			<view class="button" @click="submit">提交</view>
			<u-toast ref="uToast" />
			<u-picker mode="region" v-model="showAred" @cancel="cancelAred" @confirm="confirmAred"
				:area-code='["13", "1303", "130304"]'></u-picker>
		</view>
		<!-- <view>
			<image src="../../static/liucheng.png"></image>
		</view> -->

	</view>
</template>

<script>
	import uniDataSelect from "@/uni_modules/uni-data-select/components/uni-data-select/uni-data-select.vue"
	export default {
		data() {
			return {
				value: 0,
				Vehiclemodel:"",
				upcarNumberData:null,
				Mileagevalue:'',
				storeName:'',
				storeId:'',
				areaValue:'',
				range: [],
				showAred: false,
				carList: false,
				ageShow: false,
				time: '',
				tel:'',
				show: false,
				timeValue: Number(new Date()),
				text:'',
				jiantou: '../../static/xiajiantou.png',
				agejiantou: '../../static/xiajiantou.png',

			}
		},
		onLoad() {
			this.getBrandsList()
		},
		onShow(object) {
			if(object){
				this.storeName=object.name
				this.storeId=object.id
			}
			if(this.$db.get('tel')){
				this.tel=this.$db.get('tel')
			}
		},
		methods: {
			LikeStore(){
				uni.navigateTo({
					url:'/pages/index/storeList'
				})
			},
			submit(){
				if(!this.$db.get('token')){
					uni.navigateTo({
						url:'/pages/login/login'
					})
					return
				}
				this.$api.postUserdCar({shop:this.storeId,brand:this.value,tel:this.tel, model:this.Vehiclemodel,plate_date:this.upcarNumberData,area:this.areaValue,mileage:this.Mileagevalue,notes:this.text},res=>{
					if(res.code==0){
					this.successToast('操作成功')
					setTimeout(function(){
					uni.navigateBack({
						url:1
					})
					},1000)
					}else{
						this.errorToast('请输入必填项')
					}
				})
			},
			city() {
				this.showAred = true
			},
			change(e) {
			this.value=e.id
			},
			getBrandsList() {
				this.$api.getBrands(res => {
					if (res.code == 0) {
						this.range = res.data
					}
				})
			},
			confirmAred(e) {
				this.areaValue = e.province.label + e.city.label + e.area.label
			},
			cancelAred(e) {
				this.showAred = false
			},
			successToast(msg) {
				this.$refs.uToast.show({
					title: msg,
					type: 'success',
					duration: 1000
				})
			},
			errorToast(msg) {
				this.$refs.uToast.show({
					title: msg,
					type: 'error',
					duration: 1000
				})
			},
			timeFocus() {
				this.show = true
			},
			// 时间
			confirm(e) {
				this.upcarNumberData=e.year+'-'+e.month+'-'+e.day
			},
			cancel() {
				this.show = false
			},
		
		}
	}
</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: 50vh;
			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: 14vw;
				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>