notarization_applet/pagesHome/picture/index.vue

<template>
	<view class="content">
		<view class="top">
			<view v-for="(item,index) in imageList" :key="index" @tap="swichMenu(index)">
				<text :class="[current == index ? 'border' : '']"
					class="text">{{item.name}}({{item?.url?.length||0}})</text>
			</view>
		</view>
		<view class="info">
			<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage" :scroll-into-view="itemId">
				<view class="list-scroll-view">
					<view class="one" v-for="(item,index) in imageList" :key="index">
						<view class="text" :id="'item' + index">{{item.name}}({{item?.url?.length||0}})</view>
						<u-album :urls="item.url" @albumWidth="width => albumWidth = width"
							multipleSize="110"></u-album>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="foot">
			<view class="foot_1">
				<view class="left" @click="toChat">
					<u-icon color="#ffffff" name="red-packet" 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({});
	const id = ref('');
	const current = ref(0);
	const itemId = ref(''); // 栏目右边scroll-view用于滚动的id
	const imageList = ref([{ name: '外观', url: [] }, { name: '内饰', url: [] }, { name: '空间', url: [] }]);
	// 店铺
	const shop = ref({});
	onLoad(async (options) => {
		id.value = options && options.id
		const shopId = options && options.shop
		await searchConfig();
		await searchOther(shopId);
		await search();
	})
	// 查询其他信息
	const searchOther = async (id) => {
		let res;
		res = await $api(`shop/${id}`, 'GET', {});
		if (res.errcode === 0) {
			shop.value = res.data
		} else {
			uni.showToast({
				title: res.errmsg || '',
				icon: 'error',
			});
		}
	};
	// 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) {
				if (res.data?.file?.length > 0) {
					res.data.file = res.data.file.map((item, index) => {
						return item.url
					})
					var one = res.data.file.slice(0, 9);
					var two = res.data.file.slice(9, 18);
					var thr = res.data.file.slice(18, 21);
					imageList.value = imageList.value.map((item, index) => {
						if (index == 0) item.url = one
						else if (index == 1) item.url = two
						else if (index == 2) item.url = thr
						return item
					})
				}
			} else {
				uni.showToast({
					title: res.errmsg || '',
					icon: 'error',
				});
			}
		}
	};
	// 联系卖家
	const toChat = () => {
		uni.makePhoneCall({
			phoneNumber: shop.value?.tel,
			success: function () {
				console.log('拨打电话成功');
			},
			fail: function () {
				uni.showToast({
					title: '拨打电话失败',
					icon: 'error',
				});
			}
		});
	};
	// 点击切换
	const swichMenu = (index) => {
		if (index == current.value) return;
		current.value = index;
		itemId.value = `item${index}`
	};
</script>
<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;
		color: var(--mainColor);
		background-color: var(--f00Color);

		.top {
			display: flex;
			padding: 2vw;

			.border {
				color: var(--fFFColor);
			}

			.text {
				padding: 2vw;
				font-size: var(--font16Size);
				font-weight: bold;
			}
		}

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

			.one {
				padding: 2vw 4vw;

				.text {
					margin: 0 0 2vw 0;
					font-size: var(--font14Size);
					font-weight: bold;
				}

				.u-album {
					display: flex;
					flex-direction: column;
					align-items: center;
				}
			}
		}

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

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

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

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

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

				.right-btn {
					background-color: var(--fFFColor);
					color: var(--mainColor);
					width: 55vw;
					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>