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

<template>
	<view class="body">
		<view class="header">
			<view class="headercon">
				<view>
					<p>
						<image style="width: 20vw; height: 20vw;" :src="detial.img_url.url"></image>
					</p>
				</view>
				<view style="margin-left: 4vw;">
					<p style="font-weight: 550; font-size: 1rem;">{{detial.series_name}}</p>
					<p>
						<span>品牌:</span> <span>{{detial.brand_name}}</span> </p>
					<view style="display: flex; margin-top: 2vw;">
					<span>指导价:</span>
					<span style="color: red;">{{Number(detial.sale_price/10000)}}w</span>
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="contentInfo">
				<view style="width: 90vw; height: 12vw; border-bottom: 0.5px solid #f8f8f8; margin-top: 2vw;">
					<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>
							<input type="text"
							placeholder="姓名"
							v-model="name"
							style="font-size: 0.8rem; height: 10vw; line-height: 10vw; margin-left: 9vw; " />
						
					</view>
				</view>
			<!-- 车牌-->
			<view style=" display: flex; width: 85vw; height: 12vw; border-bottom: 0.5px solid #f8f8f8;">
				<p style="display: flex; align-items: center;"><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="phone"
						style="font-size: 0.8rem; height: 10vw; line-height: 10vw; margin-left: 10vw; " /> </p>
			<view style="display: flex; align-items: center;">
			</view>			
			</view>
			<!-- 您的城市 -->
			<view style="width: 90vw; height: 12vw; border-bottom: 0.5px solid #f8f8f8; " @click="city" >
				<view  style="display: flex; align-items: center;"><span style="color: red;  line-height: 11vw;"  >*</span> <span
						<p  style=" margin-left: 1vw;">您的城市</p>
						<p> <input style="margin-left: 8vw;" v-model="citys" type="text" disabled="true" placeholder="请选择省/市/区"> </p>
						<p>
							<image style="width: 5vw; height: 5vw; margin-left: 5vw;" src="../../static/dingwei.png"></image>
						</p>
					
				</view>
			</view>
			<!-- 意向稳门店 -->
			<view style="width: 90vw; height: 12vw; 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: 90vw; 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=" width: 37vw; margin-left: 9vw; display: flex; align-items: center;">
					<u-radio-group v-model="CarRadio"  @change="radioGroupChange">
								<u-radio 
									@change="radioChange" 
									active-color="red"
									v-for="(item, index) in Carlist" :key="index" 
									:name="item.name"
									:disabled="item.disabled"
								>
									{{item.name}}
								</u-radio>
							</u-radio-group>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
			<!-- button -->
			<view class="button" @click="submit">提交</view>
			<u-picker mode="region"  v-model="show" @cancel="cancel" @confirm="confirm"
				:area-code='["13", "1303", "130304"]'></u-picker>
			</view>
		</view>
	</view>
</template>

<script>
	import UniDataSelect from '@/uni_modules/uni-data-select/components/uni-data-select/uni-data-select.vue'
	export default {
		components: {
			UniDataSelect
		},
		data() {
			return {
				value: 0,
				CarNumber:false,
				show:false,
				region:'',
				storeName:'',
				storeId:'',
				name:'匿名',
				phone:'',
				citys:'',
				VehicleSeries:'',
				selectRadio:'先生',
				CarRadio:'否',
				Radios:false,
				detial:{},
				id:'',
				list: [{
						name: '先生',
						disabled: false
					},
					{
						name: '女士',
						disabled: false
					},
				],
				Carlist:[{
						name: '是',
						disabled: false
					},
					{
						name: '否',
						disabled: false
					}],
				range: [{
						value: 0,
						text: "首保"
					},
					{
						value: 1,
						text: "定保"
					},
					{
						value: 2,
						text: "检测"
					},
					{
						value: 3,
						text: "维修"
					},
				],
				chexi: [{
						value: 0,
						text: "首保"
					},
					{
						value: 1,
						text: "定保"
					},
					{
						value: 2,
						text: "检测"
					},
					{
						value: 3,
						text: "维修"
					},
				],
			}
		},
		onShow(object){
			if(object){
				this.storeName=object.name
				this.storeId=object.id
			}
		},
		onLoad(option) {
			if(option.id){
				this.id=option.id
				this.getBuyCarDetialInfo(option.id)
			}
			if(this.$db.get('tel')){
				this.phone=this.$db.get('tel')
			}
		},
		methods: {
			submit(){
			if(!this.$db.get('token')){
				uni.navigateTo({
					url:'/pages/login/login'
				})
				return
			}
				
			if(this.phone!=''){
			this.$api.postAskPrice({model:this.id, shop:this.storeId,name:this.name,tel:this.phone,area:this.citys,displace:this.Radios},res=>{
				if(res.code==0){
					this.successToast('提交成功')
					uni.navigateBack({
						delta: 1
					})
				}else{
					this.errorToast('请输入必填项')
				}
			})	
			}else{
				this.errorToast('请输入必填项')
			}
			
			},
			city() {
				this.show = true
			},
			LikeStore(){
				uni.navigateTo({
					url:'/pages/index/storeList'
				})
			},
			getBuyCarDetialInfo(id){
				this.$api.getBuyCarDetial(id,res=>{
					if(res.code==0){
						this.detial=res.data
					}
				})
			},
			confirm(e) {
				this.citys=e.province.label+'-'+ e.city.label+'-'+e.area.label
				console.log("确认", e)
			},
			cancel(e) {
				this.show=false
				console.log("取消")
			},
			radioChange(e){
			if(e=='是'){
				this.Radios=true
			}else{
					this.Radios=false
			}
			},
			radioGroupChange(e){
				console.log(e)
			},
			checkboxChange(e) {
				if(this.CarNumber==true){
					this.CarNumber = false
				}else{
					this.CarNumber = true
				}
				
			},
			change(e) {
				console.log("e:", e);
			},
			successToast(msg) {
				this.$refs.uToast.show({
					title: msg,
					type: 'success',
					duration: 1000
				})
			},
			errorToast(msg) {
				this.$refs.uToast.show({
					title: msg,
					type: 'error',
					duration: 1000
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.body {
		width: 100vw;
		height: 100vh;
		background-color: #f8f8f8f8;

		.header {
			width: 100vw;
			height: 13vh;
			background-color: white;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			padding: 2vw;

			.headercon {
				width: 96vw;
				height: 13vh;
				display: flex;
				padding: 2vw;
			}

			.headerContent {
				display: flex;
				margin-top: 4vw;
			}
		}

		.content {
			width: 100vw;
			height: 70vh;
			box-sizing: border-box;
			padding: 0 2vw;
			border-radius: 5px;
			overflow: hidden;

			.contentInfo {
				width: 96vw;
				height: 70vh;
				box-sizing: border-box;
				padding: 2vw;
				background-color: white;
				border-radius: 10px;
				margin-top: 2vw;
			}
		}
		.button{
			width: 90vw;
			height: 10vw;
			margin-top: 10vw;
			background-color: red;
			line-height: 10vw;
			border-radius: 5vw;
			color: white;
			text-align: center;
		}

	}
</style>