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

<template>
	<view class="body">
		<view class="hearde">
			<image style="width: 96%; height: 100%;" :src="detial.img_url.url"></image>
		</view>
		<view>
			<view class="contentcon">
				<p style=" margin-top: 2vw; font-size: 1.3rem; font-weight: 550;">{{detial.name}}</p>
				<view style="display: flex; margin-top: 2vw;">
					<view style=" font-size: 1rem; color: #d81e06; font-weight: 550;">￥{{detial.sale_price}}万</view>
					<view style="display: flex;">
						<p style="margin-top: 0.5vw;">
							<image style="width: 4vw; height: 4vw;" src="../../static/biaoqian.png"></image>
						</p>
						<p style="font-size: 0.9rem; color: #d81e06;">降价提醒</p>
					</view>
				</view>
				<p style="color: grey; text-decoration: line-through; margin-top: 2vw; font-size: 0.9rem;"> 厂家指导价:
					{{detial.price}}万 </p>
			</view>
		</view>
		<view class="content">
			<u-toast ref="uToast" />
			<u-collapse :item-style="itemStyle" accordion="true" event-type="close" arrow="true" :accordion="accordion">
				<u-collapse-item title="基本参数">
					<view class="collapse-item">
						<view class="parameterDetial">
							<view class="parameterCon">
								<p
									style=" color: grey; display: flex; width: 98vw; height: 10vw; line-height: 10vw; justify-content: space-between; box-sizing: border-box;padding: 0 4vw;">
									<span>变速箱</span> <span>{{detial.transmission}}</span>
								</p>
								<p
									style=" color: grey; display: flex; width: 98vw; height: 10vw; line-height: 10vw; justify-content: space-between; box-sizing: border-box;padding: 0 4vw;">
									<span>发动机</span> <span>{{detial.engine}}</span>
								</p>
								<p
									style=" color: grey; display: flex; width: 98vw; height: 10vw; line-height: 10vw; justify-content: space-between; box-sizing: border-box;padding: 0 4vw;">
									<span>车身结构</span> <span>{{detial.car_body}}</span>
								</p>
								<!-- <p
									style=" color: grey; display: flex; width: 98vw; height: 10vw; line-height: 10vw; justify-content: space-between; box-sizing: border-box;padding: 0 4vw;">
									<span>车辆所在地</span> <span>郑州市</span>
								</p>
								<p
									style=" color: grey; display: flex; width: 98vw; height: 10vw; line-height: 10vw; justify-content: space-between; box-sizing: border-box;padding: 0 4vw;">
									<span>出厂日期</span> <span>2020-12-30</span>
								</p>
								<p
									style=" color: grey; display: flex; width: 98vw; height: 10vw; line-height: 10vw; justify-content: space-between; box-sizing: border-box;padding: 0 4vw;">
									<span>初上牌时间</span> <span>2021年03月上牌</span>
								</p>
								<p
									style=" color: grey; display: flex; width: 98vw; height: 10vw; line-height: 10vw; justify-content: space-between; box-sizing: border-box;padding: 0 4vw;">
									<span>排放标准</span> <span>国六</span>
								</p>
								<p
									style=" color: grey; display: flex; width: 98vw; height: 10vw; line-height: 10vw; justify-content: space-between; box-sizing: border-box;padding: 0 4vw;">
									<span>座位数</span> <span>5座</span>
								</p>
								<p
									style=" color: grey; display: flex; width: 98vw; height: 10vw; line-height: 10vw; justify-content: space-between; box-sizing: border-box;padding: 0 4vw;">
									<span>燃料类型</span> <span></span>
								</p>
								<p
									style=" color: grey; display: flex; width: 98vw; height: 10vw; line-height: 10vw; justify-content: space-between; box-sizing: border-box;padding: 0 4vw;">
									<span>表显里程</span> <span>5.9万公里</span>
								</p>
								<p
									style=" color: grey; display: flex; width: 98vw; height: 10vw; line-height: 10vw; justify-content: space-between; box-sizing: border-box;padding: 0 4vw;">
									<span>车牌号</span> <span>豫A</span>
								</p>
								<p
									style=" color: grey; display: flex; width: 98vw; height: 10vw; line-height: 10vw; justify-content: space-between; box-sizing: border-box;padding: 0 4vw;">
									<span>车源编码</span> <span>DS20230315132096</span>
								</p>
								<p
									style=" color: grey; display: flex; width: 98vw; height: 10vw; line-height: 10vw; justify-content: space-between; box-sizing: border-box;padding: 0 4vw;">
									<span>过户次数</span> <span>0</span>
								</p> -->

							</view>
						</view>
					</view>
				</u-collapse-item>
				<u-collapse-item title="图文介绍">
					<view class="collapse-item">
						<view class="images">
							<image style="width: 96vw; margin-top:margin-top: -2vw;" :src="item.url" v-for="(item,index) in detial.images " :key="index">
							</image>
						</view>
					</view>
				</u-collapse-item>
			</u-collapse>
		</view>
		<!--  -->
		<view class="contentName">
			<view class="PicTile" v-for="(item,index) in detial.stores" :key="index"> 
				<p>
					<image style="width: 25vw; height: 25vw;" :src="item.img"></image>
				</p>
				<view style="margin-left: 3vw;">
					<p
						style=" width: 64vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.9rem; font-weight: 550;">
						{{item.name}} </p>
					<p style="margin-top: 2vw;"> <span> 电话:</span> <span>{{item.tel}}</span> </p>
					<p style=" width: 64vw; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient:vertical; margin-top: 2vw; "> <span>地址:</span> <span
							style=" margin-left: 2vw;">{{item.addr}}</span> </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 {
				dotsStyles: {
					backgroundColor: 'rgba(83, 200, 249,0.3)',
					border: '1px rgba(83, 200, 249,0.3) solid',
					color: '#fff',
					bottom: 2,
					selectedBackgroundColor: 'white',
					selectedBorder: '1px rgba(83, 200, 249,0.9) solid'
				},
				detial:{}
			}

		},
		onLoad(option) {
			console.log(option.id)
			if(option.id){
					this.getBuyCarDetialInfo(option.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)
				  }
				})
			},
		getBuyCarDetialInfo(id){
			this.$api.getBuyCarDetial(id,res=>{
				if(res.code==0){
					this.detial=res.data
				}
			})
		}
		},

	}
</script>

<style scoped lang="scss">
	.body {
		width: 100vw;
		height: 99vh;
		box-sizing: border-box;
		padding: 0 2vw;
		background-color: #f8f8f8;

		.images {
			width: 100vw;
		}

		.hearde {
			width: 100vw;
			height: 30vh;
		}

		.swiper-box {
			height: 80vw;
		}

		.imagestyle {
			margin-top: 0vw;
			width: 100%;
			height: 100%
		}

		.contentName {
			width: 100vw;
			height: 70vh;
			border-radius: 10px 0 10px 0;
			background-color: #f8f8f8;
			overflow: hidden;

			.PicTile {
				width: 96vw;
				height: 17vh;
				background-color: white;
				display: flex;
				box-sizing: border-box;
				border-radius: 5px;
				padding: 3vw;
				
			}
		}

	}
</style>