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

<template>
	<view class="body">
		<view style="7vh">
			<uniSwiperDot :info="info" :current="current" field="content" mode="default" :dots-styles=dotsStyles>
				<swiper autoplay="true" circular="true" interval="4000" duration="500" class="swiper-box">
					<swiper-item v-for="(item ,index) in userDetial.images" :key="index">
						<image class="imagestyle" :src="item.url" mode=""></image>
					</swiper-item>
				</swiper>
			</uniSwiperDot>
		</view>
		<view>
			<view class="contentcon">
				<p style=" margin-top: 2vw; font-size: 1.3rem; font-weight: 550;">{{userDetial.brand_name}}</p>
				<view style="display: flex; margin-top: 2vw;">
					<view style=" font-size: 1rem; color: #d81e06; font-weight: 550;">￥{{Number(userDetial.sale_price/10000)}}万</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;"> 厂家指导价:
					{{Number(userDetial.guide_price/10000)}}万 </p>
			</view>
		</view>
		<!-- 基本参数 -->
		<view class="parameter">
			<p>基本参数</p>
			<p>
				<image style="width: 5vw; height: 5vw;" src="../../static/youjian.png"></image>
			</p>
		</view>
		<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>{{userDetial.gearbox_name}}</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>{{userDetial.color_name}}</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>{{userDetial.displacement_name}}</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>{{userDetial.address}}</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>{{userDetial.factory_date}}</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>{{userDetial.plate_date}}</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>{{userDetial.emission_name}}</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>{{userDetial.seat_count}}座</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>{{userDetial.oil_type_name}}</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>{{Number(userDetial.mileage/10000)}}万公里</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>{{userDetial.number}}</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>{{userDetial.model}}</span> </p>
			</view>
		</view>
		<view style=" z-index: 999; 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>
	import uniSwiperDot from '../../uni_modules/uni-swiper-dot/components/uni-swiper-dot/uni-swiper-dot.vue'
	export default {
		components: {
			uniSwiperDot
		},
		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'
				},
				info: [{
						imgLink: '../../static/che1.jpg'
					},
					{
						imgLink: '../../static/che2.jpg'
					},
					{
						imgLink: '../../static/che3.jpg'
					}
				],
				userDetial:{}
			}
		},
		onLoad(option) {
			if(option.id){
				this.getDetialInfo(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)
				  }
				})
			},
			getDetialInfo(id){
				this.$api.getUsedCarDetial(id,res=>{
					if(res.code==0){
						this.userDetial=res.data
					}
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	.body {
		width: 100vw;
		height: 100vh;
		margin: 0;
		background-color: #f8f8f8;
		padding: 0;

		.swiper-box {
			height: 80vw;
		}

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

		.contentcon {
			width: 100vw;
			position: absolute;
			top: 77vw;
			background-color: #fff;
			box-sizing: border-box;
			height: 18vh;
			z-index: 99;
			border-radius: 10px 10px 10px 10px;
		}

		.parameter {
			width: 100vw;
			font-size: 1.2rem;
			font-weight: 550;
			line-height: 10vw;
			box-sizing: border-box;
			padding: 0vw 2vw;
			height: 10vw;
			display: flex;
			justify-content: space-between;
			margin-top: 17vh;
			background-color: white;
		}

		.parameterDetial {
			width: 100vw;
			height: 60vh;
			background-color: white;
			display: flex;
			justify-content: center;

			.parameterCon {
				width: 95vw;
				height: 67vh;
				background-color: #f8f8f8;
			}
		}
	}
</style>