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

<template>
	<view class="body">
		<view class="hearde">
			<image   style="width: 100%; height: 100%;" :src="detialId.img.url"></image>
		</view>
		<view class="carTitle">
			<view style="display: flex; margin-top: 2vw;"> <p style="font-weight: 550; font-size: 1.2rem;">{{detialId.name}}</p> <p style="width: 20vw; margin-left: 8vw; height: 7vw; text-align: center; line-height: 7vw; font-size: 0.75rem; background-color: #f8f8f8;">{{detialId.brand_name}}</p> </view> 
			<p style="margin-top: 2vw;"> <span style="font-size: 0.8rem; color: grey;">厂商指导价</span> <span style="font-size: 0.9rem; font-size: 550; color: red;">￥{{Number(detialId.min_price/10000)}}万</span> </p>
		</view>
	<!-- 	<view class="carCon">
			<p> <span style="color: grey; font-size: 0.8rem;">发动机</span> <span style="margin-left: 15vw; font-size: 0.8rem;">1.4</span> </p>
			<p> <span style="color: grey; font-size: 0.8rem;">车身结构</span> <span style="margin-left: 12vw; font-size: 0.8rem; ">SUV</span> </p>
			<p> <span style="color: grey; font-size: 0.8rem;">变速箱 </span> <span style="margin-left: 15vw; font-size: 0.8rem;"> 7档干式双离合 </span> </p>
		</view> -->
		<!-- <p style="font-size: 0.85rem; font-weight: 550; margin-top: 2vw; box-sizing: border-box; padding-left: 4vw; "> 2.5L 181马力 L4 </p> -->
		<view class="carList">
			<view class="model" @click="goNewCarDetialInfo(item.id)" v-for=" (item,index) in Detial" :key="index">
				<p style="font-size: 0.9rem; font-weight: 550; margin-top: 2vw;">{{item.name}}</p>
				<p style="font-size: 0.9rem; font-weight: 550; color: red; margin-top: 2vw;">￥{{item.sale_price}}万</p>
				<view style="display: flex; "> 
				<p style="color: grey; font-size: 0.8rem; margin-top: 2vw;">厂家指导价: {{item.price}}万</p>
				  <p style="  margin-left: 2vw;  width: 23vw; height: 7vw; font-size: 0.8rem; text-align: center; line-height: 7vw; border: 1px solid red; color: red; border-radius: 5px;" @click.stop="reservationCar(item.id)"> 预约试驾</p>
				  <p style="  margin-left: 2vw; width: 23vw; height: 7vw; font-size: 0.8rem; text-align: center; line-height: 7vw; border: 1px solid red; color: red; border-radius: 5px;" @click.stop="basePrice(item.id)"> 询底价</p>
				  </view>
			</view>
		</view>
		<view style="position: fixed; display: flex; justify-content: center; align-items: center; top: 65vw; right:-1vw; width: 23vw;height: 9vw; background-color: green; border-radius:20px 10px 0px 20px;" @click="WeCom">
			<view> <image style="width: 6vw; height: 6vw; margin-top: 2vw;" src="../../static/wxchat.png" mode=""></image> </view>
			<view style="color: white; font-size: 0.75rem;">点击咨询</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				detialId:'',
				Detial:[]
			}
		},
		onLoad(option) {
			if(option.DetialInfo){
				this.detialId=JSON.parse(decodeURIComponent(option.DetialInfo))
				console.log(this.detialId)
				this.getBuyCarDetial(this.detialId.id)
			}
		},
		methods:{
			WeCom(){
				console.log('1211')
				uni.openCustomerServiceChat({
				  extInfo: {url: 'https://work.weixin.qq.com/kfid/kfc3e7dfd18c794def3'},
				  corpId: 'wwb8fbacb965f0006c',
				  success(res) {
					  console.log(res)
				  },
				  fail(res){
					  console.log('错误',res)
				  }
				})
			},
			// 询问底价
			basePrice(id){
				uni.navigateTo({
					url:'/pages/index/basePrice?id='+id
				})
			},
			// 获取详情
			getBuyCarDetial(id){
				this.$api.getBuyCar(id,res=>{
					if(res.code==0){
						this.Detial=res.data
					}
				})
			},
			reservationCar(id){
				uni.navigateTo({
					url:'/pages/index/reservationCar?id='+id
				})
			},
			goNewCarDetialInfo(id){
				uni.navigateTo({
					url:'/pages/index/newCarDetialInfo?id='+id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.body{
		width: 100vw;
		height: 100vh;
		background-color: #f8f8f8;
		.hearde{
			width: 100vw;
			height: 30vh;
		}
		.carTitle{
			width: 100vw;
			height: 11vh;
			background-color: white;
			overflow: hidden;
			box-sizing: border-box;
			padding-left: 4vw;
		}
		.carCon{
			width: 100vw;
			height: 10vh;
			background-color: white;
			margin-top: 4vw;
			box-sizing: border-box;
			padding-left: 4vw;
		}
		.carList{
			width: 100vw;
			margin-top: 2vw;
			height: 57vh;
			overflow-y: auto;
			background-color: white;
			.model{
				overflow: hidden;
				width: 100vw;
				height: 25vw;
				box-sizing: border-box;
				padding-left: 4vw;
			}
		}
	}
</style>