notarization_applet/pagesHome/rank/index.vue

<template>
	<view class="content">
		<view class="top">
			<u-swiper :list="url" height="200px" keyName="url" @change="e => currentNum = e.current"
				indicatorStyle="right: 20px" radius="0">
				<template #indicator>
					<view class="indicator-num">
						<text class="indicator-num__text">{{ currentNum + 1 }}/{{ url.length }}</text>
					</view>
				</template>
			</u-swiper>
			<u-subsection mode="subsection" activeColor="#ffbc00" :list="tabList" :current="curNow"
				@change="sectionChange"></u-subsection>
		</view>
		<view class="bottom">
			<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage">
				<view class="list-scroll-view">
					<view class="list" v-for="(item, index) in list" :key="index" @tap="toView(item)">
						<up-badge :absolute="true" :offset="offset" numberType="overflow" shape="horn" max="99"
							:value="index+1"></up-badge>
						<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.name||'暂无'}}</view>
							<view class="other">
								<text v-if="item.year">{{item.year||'暂无'}}| </text>
								<text v-if="item.kilometer">{{item.kilometer||'暂无'}} | </text>
								<text v-if="item.city">{{item.city||'暂无'}}</text>
							</view>
							<view class="right_1">
								<view class="money">
									<text>{{item.money||'0'}}</text>
									<text>万</text>
								</view>
								<view>
									<button @tap.stop="toChat(item)" class="button" size="mini"
										type="default">询底价</button>
								</view>
							</view>
						</view>
					</view>
					<view class="is_bottom" v-if="is_bottom">
						<text>{{config.bottom_title||'没有更多了！'}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { getCurrentInstance, ref } from 'vue';
	//该依赖已内置不需要单独安装
	import { onLoad } from "@dcloudio/uni-app";
	// 请求接口
	const $api = getCurrentInstance()?.appContext.config.globalProperties.$api;
	const $config = getCurrentInstance()?.appContext.config.globalProperties.$config;
	// 偏移
	const offset = ref(['-2px', '355px']);
	const tabList = ref(['销量榜', '保值榜', '店铺规模榜']);
	const curNow = ref(0);
	// 基本信息
	const config = ref({ logoUrl: [] });
	// 轮播图
	const currentNum = ref(1);
	const url = ref([{ 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' }]);
	// 列表
	const list = ref([
		{
			id: '1',
			file: [{ url: 'https://cdn.uviewui.com/uview/album/1.jpg' }],
			name: '夏朗 2013款 1.8TSI 标配型 欧IV',
			year: '2014年 ',
			city: '丹东',
			kilometer: '8万公里',
			money: '7.80'
		},
		{
			id: '1',
			file: [{ url: 'https://cdn.uviewui.com/uview/album/2.jpg' }],
			name: '捷豹XEL 2020款 2.0T 200PS S进取优雅版',
			year: '2014年 ',
			city: '丹东',
			kilometer: '8万公里',
			money: '7.80'
		},
		{
			id: '1',
			file: [{ url: 'https://cdn.uviewui.com/uview/album/3.jpg' }],
			name: '夏朗 2013款 1.8TSI 标配型 欧IV',
			year: '2014年 ',
			city: '丹东',
			kilometer: '8万公里',
			money: '7.80'
		},
		{
			id: '1',
			file: [{ url: 'https://cdn.uviewui.com/uview/album/4.jpg' }],
			name: '夏朗 2013款 1.8TSI 标配型 欧IV',
			year: '2014年 ',
			city: '丹东',
			kilometer: '8万公里',
			money: '7.80'
		},
		{
			id: '1',
			file: [{ url: 'https://cdn.uviewui.com/uview/album/5.jpg' }],
			name: '夏朗 2013款 1.8TSI 标配型 欧IV',
			year: '2014年 ',
			city: '丹东',
			kilometer: '8万公里',
			money: '7.80'
		},
		{
			id: '1',
			file: [{ url: 'https://cdn.uviewui.com/uview/album/6.jpg' }],
			name: '夏朗 2013款 1.8TSI 标配型 欧IV',
			year: '2014年 ',
			city: '丹东',
			kilometer: '8万公里',
			money: '7.80'
		},
		{
			id: '1',
			file: [{ url: 'https://cdn.uviewui.com/uview/album/7.jpg' }],
			name: '夏朗 2013款 1.8TSI 标配型 欧IV',
			year: '2014年 ',
			city: '丹东',
			kilometer: '8万公里',
			money: '7.80'
		},
		{
			id: '1',
			file: [{ url: 'https://cdn.uviewui.com/uview/album/8.jpg' }],
			name: '夏朗 2013款 1.8TSI 标配型 欧IV',
			year: '2014年 ',
			city: '丹东',
			kilometer: '8万公里',
			money: '7.80'
		},
		{
			id: '1',
			file: [{ url: 'https://cdn.uviewui.com/uview/album/9.jpg' }],
			name: '夏朗 2013款 1.8TSI 标配型 欧IV',
			year: '2014年 ',
			city: '丹东',
			kilometer: '8万公里',
			money: '7.80'
		},
		{
			id: '1',
			file: [{ url: 'https://cdn.uviewui.com/uview/album/10.jpg' }],
			name: '夏朗 2013款 1.8TSI 标配型 欧IV',
			year: '2014年 ',
			city: '丹东',
			kilometer: '8万公里',
			money: '7.80'
		}]);
	const total = ref(0);
	const skip = ref(0);
	const limit = ref(6);
	const page = ref(0);
	// 数据是否触底
	const is_bottom = ref(false);
	const scrollTop = ref(0);
	onLoad(async () => {
		await searchConfig();
		await search();
	})
	// config信息
	const searchConfig = async () => {
		config.value = uni.getStorageSync('config');
	};
	// 查询
	const search = async () => {

	};
	const toRoute = (item) => {
		uni.navigateTo({
			url: `/${item.route}`,
		})
	};
	// 跳转
	const sectionChange = (index) => {
		curNow.value = index;
	};
	// 查看详情
	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 toDelete = () => {
		console.log('清空失效数据');
	};
	// 分页
	const toPage = () => {
		if (total.value > list.value.length) {
			uni.showLoading({
				title: '加载中',
				mask: true
			})
			page.value = page.value + 1;
			skip.value = page.value * limit.value;
			search();
			uni.hideLoading();
		} else is_bottom.value = true
	};
	// 清空列表
	const clearPage = () => {
		list.value = []
		skip.value = 0
		limit.value = 6
		page.value = 0
	};
</script>
<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;

		.top {
			.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 {
			position: relative;
			flex-grow: 1;

			.list {
				position: relative;
				display: flex;
				margin: 1vw 0 0 0;
				padding: 1vw;
				height: 100px;

				.left {
					.image {
						width: 130px;
						height: 100px;
						border-radius: 2px;
					}
				}

				.right {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					width: 100%;

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

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

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

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

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

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

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

		.list-scroll-view {
			display: flex;
			flex-direction: column;
		}
	}

	.is_bottom {
		width: 100%;
		text-align: center;

		text {
			padding: 2vw 0;
			display: inline-block;
			color: var(--f85Color);
			font-size: var(--font12Size);
		}
	}
</style>