car_applet/pagesHome/car/index.vue

<template>
	<view class="content">
		<view class="main">
			<scroll-view scroll-y="true" class="scroll-view">
				<view class="list-scroll-view">
					<view class="top">
						<u-swiper :list="info.file" height="300px" keyName="url" @change="e => currentNum = e.current"
							:autoplay="false" indicatorStyle="right: 20px" radius="0">
							<template #indicator>
								<view class="indicator-num">
									<text class="indicator-num__text">{{ currentNum + 1 }}/{{ info.file?.length }}</text>
								</view>
							</template>
						</u-swiper>
					</view>
					<view class="bottom">
						<view class="one">
							<view class="left">
								<view class="money">
									<text>{{info.real_pay||'0'}}</text>
									<text>万</text>
								</view>
								<view class="price">
									<text>新车含税价</text>
									<text>{{info.price||'0'}}万</text>
								</view>
							</view>
							<view class="right">
								<button class="button" size="mini" type="default" open-type="getPhoneNumber"
									@getphonenumber="PhoneNumber">聊聊价格</button>
							</view>
						</view>
						<view class="two">
							<view class="two_1 textOver">{{info.series||'暂无'}} {{info.year||'暂无'}}
								{{info.style||'暂无'}}
							</view>
							<view class="two_2">
								<view class="other">
									<span>{{info.series}}</span>&nbsp;
									<u-icon name="arrow-right" size="12"></u-icon>
								</view>
								<view class="other">
									<span>{{info.rank}}·</span>
									<span>第{{info.rankNum}}名</span>&nbsp;
									<u-icon name="arrow-right" size="12"></u-icon>
								</view>
							</view>
							<view class="two_3">
								<view class="left">
									<text>分期购车</text>
									<text>首付{{info.first_pay}}万开回家</text>
								</view>
								<view class="right">
									<u-icon name="arrow-right" size="16"></u-icon>
								</view>
							</view>
						</view>
						<view class="two thr">
							<view class="thr_1">
								<text>档案</text>
								<view class="info">
									<view class="list" v-for="(item, index) in files" :key="index"
										@tap="toCommon(item)">
										<view class="info_1">{{item.content}}</view>
										<view class="info_2">{{item.name}}</view>
									</view>
									<u-icon name="arrow-right" size="16" @tap="toRecord"></u-icon>
								</view>
							</view>
							<view class="thr_1">
								<text>参数</text>
								<view class="info">
									<view class="list" v-for="(item, index) in parameter" :key="index"
										@tap="toCommon(item)">
										<view class="info_1">{{item.content}}</view>
										<view class="info_2">{{item.name}}</view>
									</view>
								</view>
							</view>
						</view>
						<view class="two four">
							<view class="four_1">
								<view class="left">
									<image class="image"
										:src="shop.logo&&shop.logo?.length>0?shop.logo[0].url:'https://cdn.uviewui.com/uview/album/1.jpg'">
									</image>
								</view>
								<view class="right">
									<view class="right_1" @tap="toShop">
										<text>{{shop.name||'暂无'}}</text>
										<u-icon :bold="true" color="#000" name="arrow-right" size="16"></u-icon>
									</view>
									<view class="right_2">
										<text>在售车源: </text>
										<text>{{shop.num||0}}辆</text>
									</view>
								</view>
							</view>
							<view class="four_2">
								<u-button icon="phone" text="咨询卖家车况" size="normal" type="info"
									@click="toChat"></u-button>
							</view>
						</view>
						<view class="two five">
							<view class="name">实拍</view>
							<view class="text">外观漆面</view>
							<view class="five_1">
								<view class="five_1">
									<image class="image"
										:src="info.file&&info.file?.length>0?info.file[0].url:'https://cdn.uviewui.com/uview/album/1.jpg'">
									</image>
								</view>
								<view class="five_2">
									<image class="image"
										:src="info.file&&info.file?.length>1?info.file[1].url:'https://cdn.uviewui.com/uview/album/5.jpg'">
									</image>
									<image class="image"
										:src="info.file&&info.file?.length>2?info.file[2].url:'https://cdn.uviewui.com/uview/album/2.jpg'">
									</image>
								</view>
							</view>
							<view class="text">中控内饰</view>
							<view class="five_2">
								<image class="image"
									:src="info.file&&info.file?.length>3?info.file[3].url:'https://cdn.uviewui.com/uview/album/3.jpg'">
								</image>
								<image class="image"
									:src="info.file&&info.file?.length>4?info.file[4].url:'https://cdn.uviewui.com/uview/album/4.jpg'">
								</image>
							</view>
							<view class="five_3">
								<u-button text="查看更多图片" size="normal" type="info" @click="toMore"></u-button>
							</view>
						</view>
						<view class="six">
							<view class="title">为你推荐</view>
							<view class="listL">
								<view class="list" v-for="(item, index) in list" :key="index" @tap="toView(item)">
									<view class="list_1">
										<view class="left">
											<image class="image"
												:src="item.file&&item.file.length>0?item.file[0].url:''">
											</image>
										</view>
										<view class="right">
											<view class="name textOver">{{item.series||'暂无'}} {{item.year||'暂无'}}款
												{{item.style||'暂无'}}
											</view>
											<view class="other">
												<text v-if="item.year">{{item.year||'暂无'}}年 | </text>
												<text v-if="item.mileage">{{item.mileage||'暂无'}}公里 | </text>
												<text v-if="item.place">{{item.place||'暂无'}}</text>
											</view>
											<view class="money">
												<text>{{item.total_money||'0'}}</text>
												<text>万</text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="foot">
			<view class="foot_1">
				<view class="left" @click="toChat">
					<u-icon color="#000" name="red-packet" size="20"></u-icon>
					<text>分期购车</text>
				</view>
				<view class="left" @click="toCollect">
					<u-icon color="#000" name="heart" size="20"></u-icon>
					<text>收藏</text>
				</view>
			</view>
			<view class="foot_2">
				<button class="left-btn" @click="toChat">联系卖家</button>
				<button class="right-btn" @click="toChat">询底价</button>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { getCurrentInstance, computed, ref } from 'vue';
	//该依赖已内置不需要单独安装
	import { onLoad } from "@dcloudio/uni-app";
	// 请求接口
	const $api = getCurrentInstance()?.appContext.config.globalProperties.$api;
	// openid
	const openid = computed(() => {
		return uni.getStorageSync('openid');
	})
	// 基本信息
	const config = ref({});
	// id
	const id = ref('');
	// 轮播图
	const currentNum = ref(1);
	// 档案
	const files = ref([{ name: '上牌时间', content: '2013-10' }, { name: '表显里程', content: '8.0万公里' }, { name: '排放标准', content: '国六' }, { name: '车源地', content: '长春' }]);
	// 参数
	const parameter = ref([{ name: '发动机', content: '1.8L' }, { name: '轴距', content: '2700mm' }, { name: '变速箱', content: '自动' }, { name: '最大功率', content: '103kW' }]);
	// 详情
	const info = ref({ url: [{ url: 'https://cdn.uviewui.com/uview/album/1.jpg' }, { url: 'https://cdn.uviewui.com/uview/album/2.jpg' }, { url: 'https://cdn.uviewui.com/uview/album/3.jpg' }, { url: 'https://cdn.uviewui.com/uview/album/4.jpg' }, { url: 'https://cdn.uviewui.com/uview/album/5.jpg' }], payment: '2.7', rankNum: '11', rank: '全国紧凑型SUV销售榜', type: '夏朗', name: '夏朗 2013款 1.8TSI 标配型 欧IV', money: '7.80', price: '29.06' });
	// 店铺
	const shop = ref({});
	// 列表
	const list = ref([]);
	onLoad(async (options) => {
		id.value = options && options.id
		await searchConfig();
		await search();
	})
	// config信息
	const searchConfig = async () => {
		config.value = uni.getStorageSync('config');
	};
	// 查询
	const search = async () => {
		if (id.value) {
			const res = await $api(`car/${id.value}`, 'GET', {});
			if (res.errcode === 0) {
				info.value = res.data
				await searchShop(res.data?.shop)
				await searchOther();
			} else {
				uni.showToast({
					title: res.errmsg || '',
					icon: 'error',
				});
			}
		}
	};
	// 店铺信息
	const searchShop = async (e) => {
		if (!e) return
		const res = await $api(`shop/${e}`, 'GET', {});
		if (res.errcode === 0) {
			shop.value = res.data
		} else {
			uni.showToast({
				title: res.errmsg || '',
				icon: 'error',
			});
		}
	};
	// 查询其他信息
	const searchOther = async () => {
		const info = {
			skip: 0,
			limit: 20,
			status: '0',
			shop: shop.value._id
		}
		const res = await $api('car', 'GET', {
			...info,
		});
		if (res.errcode === 0) {
			list.value = res.data
			shop.value.num = res.total
		} else {
			uni.showToast({
				title: res.errmsg || '',
				icon: 'error',
			});
		}
	};
	// 获取手机号
	const PhoneNumber = (e) => {
		console.log(e);
	};
	// 档案
	const toRecord = () => {
		uni.navigateTo({
			url: `/pagesHome/record/index?id=${info.value.id || info.value._id}`
		})
	};
	// 查看详情
	const toView = (item) => {
		uni.navigateTo({
			url: `/pagesHome/car/index?id=${item.id || item._id}`
		})
	};
	// 联系卖家
	const toChat = (item) => {
		uni.makePhoneCall({
			phoneNumber: item?.shop || '110',
			success: function () {
				console.log('拨打电话成功');
			},
			fail: function () {
				console.log('拨打电话失败');
			}
		});
	};
	// 店铺详情
	const toShop = () => {
		uni.navigateTo({
			url: `/pagesHome/shop/index?id=${shop.value.id || shop.value._id}&name=${shop.value.name}`
		})
	};
	// 查看更多图片
	const toMore = () => {
		uni.navigateTo({
			url: `/pagesHome/picture/index?id=${info.value.id || info.value._id}`
		})
	};
	// 收藏
	const toCollect = () => {
		console.log('收藏');
	};
</script>
<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;

		.main {
			position: relative;
			flex-grow: 1;

			.top {
				position: relative;

				.indicator-num {
					padding: 2px 0;
					background-color: rgba(0, 0, 0, 0.35);
					border-radius: 5px;
					width: 35px;
					@include flex;
					justify-content: center;

					&__text {
						color: var(--mainColor);
						font-size: var(--font12Size);
					}
				}
			}

			.bottom {
				background-color: #f1f1f1;

				.one {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 3vw;
					background: linear-gradient(to bottom, #FFE4B5, #f1f1f1);

					.left {
						.money {
							color: var(--fF0Color);
							font-size: var(--font12Size);

							text:first-child {
								font-size: var(--font18Size);
							}
						}

						.price {
							margin: 1vw 0 0 0;
							color: var(--f69Color);
							font-size: var(--font12Size);
						}
					}

					.right {
						.button {
							background-color: var(--fFFColor);
						}
					}
				}

				.two {
					margin: 2vw 3vw;
					padding: 2vw;
					background-color: var(--mainColor);
					border-radius: 5px;

					.two_1 {
						font-size: var(--font16Size);
						font-weight: bold;
					}

					.two_2 {
						display: flex;
						align-items: center;
						margin: 2vw 0 0 0;
						padding: 2vw 0;
						border-bottom: 1px solid var(--f5Color);

						.other {
							display: flex;
							align-items: center;
							color: var(--f828Color);
							font-size: var(--font12Size);
							margin: 0 5px 0 0;
						}
					}

					.two_3 {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 2vw 0;

						.left {
							display: flex;
							justify-content: space-between;
							align-items: center;

							text {
								font-size: var(--font14Size);
								margin: 0 5px 0 0;
							}

							text:first-child {
								background-color: rgba(255, 127, 80, 0.35);
								color: #FF7F50;
								padding: 2px 5px;
								font-size: var(--font12Size);
							}
						}
					}
				}

				.thr {
					.thr_1 {
						display: flex;

						.info {
							display: flex;
							width: 89%;
							margin: 0 0 2vw 0;

							.list {
								font-size: var(--font14Size);
								text-align: center;
								width: 19vw;

								.info_2 {
									color: var(--f828Color);
									margin: 1vw 0 0 0;
								}
							}
						}

						text {
							margin: 0 2vw 0 0;
							color: var(--f828Color);
							font-size: var(--font14Size);
						}
					}
				}

				.four {

					.four_1 {
						display: flex;
						align-items: center;

						.left {
							.image {
								width: 120px;
								height: 80px;
							}
						}

						.right {
							margin: 0 0 0 2vw;

							.right_1 {
								display: flex;
								align-items: center;
								font-size: var(--font16Size);
								font-weight: bold;

								text {
									margin: 0 1vw 1vw 0;
								}
							}

							.right_2 {
								margin: 2vw 0 0 0;
								color: var(--f828Color);
								font-size: var(--font14Size);
							}
						}
					}

					.four_2 {
						margin: 2vw 0 0 0;
					}
				}

				.five {
					.name {
						font-size: var(--font16Size);
					}

					.text {
						padding: 2vw 0;
						color: var(--f69Color);
						font-size: var(--font14Size);
					}

					.five_1 {
						border-radius: 5px;

						.image {
							width: 100%;
							height: 230px;
							border-radius: 5px;
						}
					}

					.five_2 {
						display: flex;
						justify-content: space-between;
						border-radius: 5px;

						.image {
							width: 49%;
							height: 120px;
							border-radius: 5px;
						}
					}

					.five_3 {
						margin: 2vw 0 0 0;
					}
				}

				.six {
					padding: 0 2vw 2vw 2vw;

					.title {
						font-size: var(--font16Size);
						padding: 0 1vw;
					}

					.listL {
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;

						.list {
							width: 47vw;
							margin: 2vw 0 0 0;
							border-radius: 5px;
							border: 1px solid var(--f5Color);
							background-color: var(--mainColor);

							.list_1 {
								.left {
									.image {
										width: 100%;
										height: 120px;
										border-radius: 5px 5px 0 0;
									}
								}

								.right {
									display: flex;
									flex-direction: column;
									justify-content: space-between;
									padding: 0 2vw;

									.name {
										font-size: var(--font14Size);
									}

									.other {
										color: var(--f85Color);
										font-size: var(--font12Size);
									}

									.money {
										color: var(--fF0Color);
										font-size: var(--font12Size);
										margin: 0 0 1vw 0;

										text:first-child {
											font-size: var(--font18Size);
										}
									}
								}
							}
						}
					}
				}
			}
		}

		.foot {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 8vh;
			padding: 2vw 1vw;

			.foot_1 {
				display: flex;
				justify-content: space-between;
				width: 25%;

				.left {
					display: flex;
					flex-direction: column;
					align-items: center;
					font-size: var(--font14Size);
				}
			}

			.foot_2 {
				display: flex;
				justify-content: space-around;
				align-items: center;
				width: 73%;

				.left-btn {
					background-color: var(--fF0Color);
					color: var(--mainColor);
					font-size: var(--font16Size);
				}

				.right-btn {
					background-color: var(--fFFColor);
					color: var(--mainColor);
					width: 45vw;
					font-size: var(--font16Size);
				}
			}
		}
	}

	.scroll-view {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;

		.list-scroll-view {
			display: flex;
			flex-direction: column;
		}
	}
</style>