第一次上传

.svn/pristine/7c/7c170f6f7cde283465816b4633bd2c51ea1744f2.svn-base

@@ -0,0 +1,994 @@
+<template>
+	<view class="category-page">
+		<!-- 页面加载中 - 显示骨架屏 -->
+		<view v-if="shopLoading" class="page-loading-wrapper">
+			<!-- 顶部导航栏骨架屏 -->
+			<view class="nav-bar">
+				<view class="nav-content">
+					<view class="skeleton-nav-back"></view>
+					<view class="skeleton-nav-title"></view>
+				</view>
+			</view>
+
+			<!-- 搜索框骨架屏 -->
+			<view class="search-section">
+				<view class="search-box-skeleton"></view>
+			</view>
+
+			<!-- 分类标签栏骨架屏 -->
+			<view class="category-tabs">
+				<view class="skeleton-tabs-list">
+					<view class="skeleton-tab-item" v-for="i in 5" :key="i">
+						<view class="skeleton-tab-icon"></view>
+						<view class="skeleton-tab-text"></view>
+					</view>
+				</view>
+			</view>
+
+			<!-- 筛选栏骨架屏 -->
+			<view class="filter-section">
+				<view class="skeleton-filter-row">
+					<view class="skeleton-filter-sort"></view>
+					<view class="skeleton-filter-all"></view>
+				</view>
+				<view class="skeleton-quick-filters">
+					<view class="skeleton-quick-filter-item" v-for="i in 4" :key="i"></view>
+				</view>
+			</view>
+
+			<!-- 商家列表骨架屏 -->
+			<view class="shop-list">
+				<SkeletonShopCardHorizontal v-for="i in 5" :key="i" />
+			</view>
+		</view>
+
+		<!-- 页面加载完成 - 显示实际内容 -->
+		<view v-else>
+			<!-- 顶部导航栏 - 橙色背景 -->
+			<view class="nav-bar">
+				<view class="nav-content">
+					<view class="nav-back" @click="Service.GoPageBack()">
+						<image class="back-icon" src="/static/icons/back.svg" mode="aspectFit" />
+					</view>
+					<text class="nav-title">{{ pageTitle }}</text>
+					<view class="" style="width: 64rpx; height: 64rpx;">
+
+					</view>
+				</view>
+			</view>
+
+			<!-- 搜索框及内容区域 -->
+			<view class="content-wrapper">
+				<!-- 固定搜索框 -->
+				<view class="search-fixed" :class="{ show: isSearchFixed }">
+					<view class="search-box">
+						<image class="search-icon" src="https://img.icons8.com/ios-glyphs/30/999999/search--v1.png"
+							mode="aspectFit" />
+						<input v-model="search" @blur="getdata()" class="search-input" placeholder="请输入商家或商品名称"
+							placeholder-class="search-placeholder" />
+					</view>
+				</view>
+
+				<!-- 原搜索框占位 -->
+				<view class="search-section">
+					<view class="search-box">
+						<image class="search-icon" src="https://img.icons8.com/ios-glyphs/30/999999/search--v1.png"
+							mode="aspectFit" />
+						<input @confirm="getdata()" v-model="search" class="search-input" placeholder="请输入商家或商品名称"
+							placeholder-class="search-placeholder" />
+					</view>
+				</view>
+
+				<!-- 筛选栏 -->
+				<view class="filter-section">
+					<!-- 排序选项 -->
+					<view class="filter-row">
+						<view class="filter-sort" @click="toggleSortDropdown">
+							<text class="filter-label">{{ currentSort }}</text>
+							<text class="ri-arrow-down-s-line arrow-icon" :class="{ rotate: showSortDropdown }"></text>
+							<!-- 排序下拉菜单 -->
+							<view v-if="showSortDropdown" class="dropdown-menu sort-dropdown">
+								<view v-for="(option, index) in sortOptions" :key="index" class="dropdown-item"
+									@click.stop="selectSort(index)">
+									<text class="dropdown-text">{{ option }}</text>
+								</view>
+							</view>
+						</view>
+						<view class="filter-all" @click="toggleFilterDropdown">
+							<text class="filter-all-text">{{ currentFilter }}</text>
+							<text class="ri-arrow-down-s-line filter-all-arrow"
+								:class="{ rotate: showFilterDropdown }"></text>
+							<!-- 筛选下拉菜单 -->
+							<view v-if="showFilterDropdown" class="dropdown-menu filter-dropdown">
+								<view v-for="(option, index) in filterOptions" :key="index" class="dropdown-item"
+									@click.stop="selectFilter(index)">
+									<text class="dropdown-text">{{ option }}</text>
+								</view>
+							</view>
+						</view>
+					</view>
+
+					<!-- 快捷筛选按钮 -->
+					<!-- <scroll-view scroll-x class="quick-filters" show-scrollbar="false">
+						<view class="quick-filter-list">
+							<view v-for="(filter, index) in quickFilters" :key="index" class="quick-filter-item"
+								:class="{ active: filter.active }" @click="toggleFilter(index)">
+								<text class="filter-text">{{ filter.name }}</text>
+							</view>
+						</view>
+					</scroll-view> -->
+				</view>
+
+				<!-- 商家列表 -->
+				<view class="shop-list">
+					<view v-for="shop in merchList" :key="shop.merchId" class="shop-card"
+						@click="Service.GoPage('/pages/community/merchantDetail?merchId='+shop.merchId)">
+						<!-- 左侧图片 -->
+						<image class="shop-image" :src="Service.GetMateUrlByImg(shop.logo)" mode="aspectFill" />
+
+						<!-- 右侧信息 -->
+						<view class="shop-info">
+							<!-- 店名 -->
+							<view class="shop-header">
+								<text class="shop-name">{{ shop.name }}</text>
+							</view>
+
+							<!-- 评分和销量 -->
+							<view class="shop-info-left">
+								<view class="shop-rating">
+									<text class="rating-score">{{ Number(shop.score).toFixed(1) }}</text>
+									<text class="rating-unit">分</text>
+								</view>
+								<text class="shop-type">堂食店</text>
+								<text class="shop-sales">月售{{ shop.sale }}</text>
+							</view>
+
+							<!-- 距离、用时、人均价格 - 同一行 -->
+							<view class="shop-info-row">
+								<!-- 距离和用时 - 左侧 -->
+								<view class="shop-info-left">
+									<view class="distance-wrapper">
+										<text class="ri-map-pin-2-line location-icon"></text>
+										<text class="distance-text">{{ formatDistance(shop.distance)  }}</text>
+									</view>
+								</view>
+								<!-- 人均价格 - 右侧 -->
+								<view v-if="shop.avgPrice" class="shop-avg-price-inline">
+									<text class="avg-price-small">¥</text>
+									<text class="avg-price-value-small">{{ shop.price }}</text>
+									<text class="avg-price-text-small">人均</text>
+								</view>
+							</view>
+
+							<!-- 底部标签 -->
+							<view class="shop-bottom-tags">
+								<text v-for="(tag, index) in shop.tips" :key="index" class="shop-tag"
+									style="font-size: 24rpx;" :class="getTagClass(tag)">
+									{{ tag }}
+								</text>
+							</view>
+
+							<!-- 右上角标签 -->
+							<view class="shop-badges" style="top: 24rpx;">
+								<text v-if="shop.code=='Discounts'" class="badge-partner"
+									style="font-size: 24rpx;">联盟商家</text>
+								<text v-else class="badge-coop" style="font-size: 24rpx;">合作商家</text>
+							</view>
+						</view>
+					</view>
+				</view>
+				<!-- 空状态 -->
+				<view v-if="merchList.length== 0" class="no-results" style="text-align: center;">
+					<text class="no-results-text">未找到相关结果</text>
+					<text class="no-results-hint">换个关键词试试吧</text>
+				</view>
+				<up-loadmore v-else :status="status" />
+			</view>
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	import {
+		ref,
+		computed
+	} from 'vue'
+	import {
+		onLoad,
+		onPageScroll,
+		onReachBottom
+	} from '@dcloudio/uni-app'
+	import SkeletonShopCardHorizontal from '../../components/skeleton/skeleton-shop-card-horizontal.vue'
+	import { Service } from "@/Service/Service"
+	import { vpMerchService } from '@/Service/vp/vpMerchService'
+
+	// 页面数据
+	const pageTitle = ref('')
+
+	// 固定搜索框状态
+	const isSearchFixed = ref(false)
+	const categoryType = ref('food')
+	const shops = ref<any>([])
+	const currentCategory = ref(0)
+
+	// 加载状态
+	const shopLoading = ref(true)
+
+	// 下拉菜单状态
+	const showSortDropdown = ref(false)
+	const showFilterDropdown = ref(false)
+
+	// 当前选择的排序和筛选
+	let currentSort = ref('距离最近')
+	let sortIndex = ref(0)
+	let currentFilter = ref('全部')
+	let filterIndex = ref(0)
+
+	// 排序选项
+	const sortOptions = ['距离最近', '销量最高', '评分最高']
+
+	// 筛选选项
+	const filterOptions = ['全部', '联盟商家', '可用积分', '可用券', '合作商家']
+
+
+
+	// 快捷筛选
+	const quickFilters = ref([{
+		name: '15分钟',
+		active: false
+	},
+	{
+		name: '品质必点',
+		active: false
+	},
+	{
+		name: '堂食店',
+		active: false
+	},
+	{
+		name: '联盟商家',
+		active: true
+	}
+	])
+
+	let search = ref('')
+	let longitude = ref(0)
+	let latitude = ref(0)
+	let merchList = ref<Array<any>>([])
+	let status = ref('nomore')
+	let page = ref(1)
+	// 页面加载
+	onLoad((options : any) => {
+		// 接收从首页传递的分类类型
+		if (options.name) {
+			pageTitle.value = options.name
+			categoryType.value = options.type
+			getLocation()
+		}
+	})
+
+	onReachBottom(() => {
+		getList()
+	})
+
+	// 页面滚动监听 - 控制固定搜索框显示
+	onPageScroll((e) => {
+		// 当滚动超过100px时显示固定搜索框
+		isSearchFixed.value = e.scrollTop > 100
+	})
+
+	const getLocation = () => {
+		uni.getLocation({
+			type: 'wgs84',
+			success: function (res) {
+				longitude.value = res.longitude
+				latitude.value = res.latitude
+				getdata()
+			},
+			fail: function (e) {
+				console.log(e);
+			}
+		});
+	}
+
+
+	const getdata = () => {
+		merchList.value = []
+		status.value = 'loadmore'
+		page.value = 1
+		getList()
+	}
+
+	const getList = () => {
+
+		if (status.value !== 'loadmore') {
+			return
+		}
+		status.value = 'loading'
+		vpMerchService.GetMerchList(categoryType.value, search.value, longitude.value, latitude.value, sortIndex.value, filterIndex.value, page.value).then(res => {
+			if (res.code == 0) {
+				shopLoading.value = false
+				merchList.value = [...merchList.value, ...res.data.merchList]
+				status.value = res.data.merchList.length == 10 ? 'loadmore' : 'nomore'
+				page.value++
+			}
+		})
+	}
+
+
+
+	// 获取标签样式类
+	const getTagClass = (tagText) => {
+		const tagMap = {
+			'12%积分': 'tag-points',
+			'15%积分': 'tag-points',
+			'可用积分': 'tag-points-available',
+			'可用券': 'tag-coupon'
+		}
+		return tagMap[tagText] || 'tag-points'
+	}
+
+
+
+	// 切换筛选
+	const toggleFilter = (index) => {
+		quickFilters.value[index].active = !quickFilters.value[index].active
+	}
+
+	// 切换排序下拉菜单
+	const toggleSortDropdown = () => {
+		showSortDropdown.value = !showSortDropdown.value
+		showFilterDropdown.value = false
+	}
+
+	// 切换筛选下拉菜单
+	const toggleFilterDropdown = () => {
+		showFilterDropdown.value = !showFilterDropdown.value
+		showSortDropdown.value = false
+	}
+
+	// 选择排序方式
+	const selectSort = (index : number) => {
+		currentSort.value = sortOptions[index]
+		sortIndex.value = index
+		showSortDropdown.value = false
+		getdata()
+	}
+
+	// 选择筛选条件
+	const selectFilter = (index : number) => {
+		currentFilter.value = filterOptions[index]
+		showFilterDropdown.value = false
+		if (index > 0 && index <= 3) {
+			filterIndex.value = 1
+		}
+		if (index == 0) {
+			filterIndex.value = index
+		}
+		if(index==4){
+			filterIndex.value = 2
+		}
+		getdata()
+	}
+
+	// 点击其他地方关闭下拉菜单
+	const closeDropdowns = () => {
+		showSortDropdown.value = false
+		showFilterDropdown.value = false
+	}
+
+	// 格式化距离
+	const formatDistance = (distance) => {
+		if (distance < 1000) {
+			return `${distance}m`
+		}
+		return `${(distance / 1000).toFixed(1)}km`
+	}
+
+	// 返回首页
+	const goBackHome = () => {
+
+	}
+</script>
+
+<style lang="scss" scoped>
+	.category-page {
+		min-height: 100vh;
+		background: #F5F5F5;
+		padding-bottom: 60px;
+	}
+
+	/* 顶部导航栏 */
+	.nav-bar {
+		background: linear-gradient(135deg, #FF6B00, #FF9500);
+		height: calc(var(--status-bar-height) + 320rpx);
+		position: relative;
+		z-index: 1;
+	}
+
+	/* 导航内容区域 - 固定位置 */
+	.nav-content {
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 80rpx;
+		height: 88rpx;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.nav-back {
+		margin-left: 20rpx;
+		width: 64rpx;
+		height: 64rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.back-icon {
+		width: 48rpx;
+		height: 48rpx;
+		padding: 8rpx;
+	}
+
+	.nav-title {
+		font-size: 18px;
+		font-weight: 600;
+		color: #FFFFFF;
+	}
+
+	/* 搜索框及内容区域 */
+	.content-wrapper {
+		position: relative;
+		z-index: 2;
+		margin-top: -85px;
+		background: #FAFAFA;
+		border-top-left-radius: 25px;
+		border-top-right-radius: 25px;
+		padding-top: 16px;
+	}
+
+	/* 搜索框 */
+	.search-section {
+		background: transparent;
+		padding: 8px 16px 12px;
+	}
+
+	.search-box {
+		background: #F5F5F5;
+		border-radius: 10px;
+		height: 40px;
+		display: flex;
+		align-items: center;
+		padding: 0 12px;
+	}
+
+	.search-icon {
+		width: 16px;
+		height: 16px;
+		margin-right: 8px;
+	}
+
+	.search-input {
+		flex: 1;
+		font-size: 14px;
+		color: #222222;
+		height: 40px;
+	}
+
+	.search-placeholder {
+		color: #999999;
+	}
+
+	/* 固定搜索框 - 滚动时显示在顶部 */
+	.search-fixed {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		z-index: 999;
+		background: #FAFAFA;
+		padding: 8px 16px 12px;
+		transform: translateY(-100%);
+		transition: transform 0.3s ease;
+	}
+
+	.search-fixed.show {
+		transform: translateY(0);
+	}
+
+	/* 分类标签栏 */
+	.category-tabs {
+		background: #FFFFFF;
+		padding: 16px 0;
+		margin-bottom: 10px;
+	}
+
+	.tabs-scroll {
+		white-space: nowrap;
+		/* 隐藏滚动条 - 兼容不同平台 */
+		-ms-overflow-style: none;
+		/* IE and Edge */
+		scrollbar-width: none;
+		/* Firefox */
+	}
+
+	/* 隐藏滚动条 - Webkit浏览器 */
+	.tabs-scroll ::-webkit-scrollbar {
+		display: none;
+		width: 0;
+		height: 0;
+		background: transparent;
+	}
+
+	.tabs-list {
+		display: inline-flex;
+		padding: 0 16px;
+	}
+
+	.tab-item {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		margin-right: 12px;
+		flex-shrink: 0;
+		min-width: 70px;
+		height: auto;
+		min-height: 70px;
+	}
+
+	.tab-item.active .tab-text {
+		color: #FF5722;
+		font-weight: 600;
+	}
+
+	.tab-item.active {
+		background: transparent;
+	}
+
+	.tab-icon {
+		width: 48px;
+		height: 48px;
+		margin-bottom: 6px;
+	}
+
+	.tab-item.active .tab-icon {
+		filter: none;
+	}
+
+	.tab-text {
+		font-size: 14px;
+		color: #333333;
+	}
+
+	/* 筛选栏 */
+	.filter-section {
+		background: #FFFFFF;
+		padding: 10px 16px;
+		margin-bottom: 10px;
+	}
+
+	.filter-row {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		// margin-bottom: 10px;
+	}
+
+	.filter-sort {
+		display: flex;
+		align-items: center;
+		position: relative;
+	}
+
+	.filter-label {
+		font-size: 14px;
+		color: #333333;
+		font-weight: 500;
+	}
+
+	.arrow-icon {
+		font-size: 12px;
+		color: #333333;
+		margin-left: 4px;
+		transition: transform 0.3s;
+	}
+
+	.arrow-icon.rotate {
+		transform: rotate(180deg);
+	}
+
+	.filter-all {
+		display: flex;
+		align-items: center;
+		padding: 4px 10px;
+		background: transparent;
+		border-radius: 4px;
+		position: relative;
+	}
+
+	.filter-all-text {
+		font-size: 14px;
+		color: #333333;
+		margin-right: 4px;
+	}
+
+	.filter-all-arrow {
+		font-size: 12px;
+		color: #333333;
+		transition: transform 0.3s;
+	}
+
+	.filter-all-arrow.rotate {
+		transform: rotate(180deg);
+	}
+
+	/* 下拉菜单 */
+	.dropdown-menu {
+		position: absolute;
+		top: 100%;
+		left: 0;
+		background: #FFFFFF;
+		border-radius: 8px;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+		z-index: 10;
+		overflow: hidden;
+		animation: dropdownSlide 0.2s ease-out;
+	}
+
+	@keyframes dropdownSlide {
+		from {
+			opacity: 0;
+			transform: translateY(-10px);
+		}
+
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	.dropdown-item {
+		padding: 12px 16px;
+		border-bottom: 1px solid #F0F0F0;
+	}
+
+	.dropdown-item:last-child {
+		border-bottom: none;
+	}
+
+	.dropdown-text {
+		font-size: 14px;
+		color: #333333;
+		display: block;
+	}
+
+	.sort-dropdown {
+		min-width: 120px;
+	}
+
+	.filter-dropdown {
+		min-width: 120px;
+		left: auto;
+		right: 0;
+	}
+
+	.quick-filters {
+		white-space: nowrap;
+		/* 隐藏滚动条 - 兼容不同平台 */
+		-ms-overflow-style: none;
+		/* IE and Edge */
+		scrollbar-width: none;
+		/* Firefox */
+	}
+
+	/* 隐藏滚动条 - Webkit浏览器 */
+	.quick-filters ::-webkit-scrollbar {
+		display: none;
+		width: 0;
+		height: 0;
+		background: transparent;
+	}
+
+	.quick-filter-list {
+		display: inline-flex;
+		gap: 8px;
+	}
+
+	.quick-filter-item {
+		padding: 4px 10px;
+		background: #F5F5F5;
+		border-radius: 4px;
+		flex-shrink: 0;
+		font-size: 12px;
+	}
+
+	.quick-filter-item.active {
+		background: #FFFFFF;
+		border: 1px solid #FF6B00;
+		position: relative;
+	}
+
+	.quick-filter-item.active::after {
+		content: '';
+		position: absolute;
+		bottom: -2px;
+		left: 0;
+		right: 0;
+		height: 2px;
+		background: #FF6B00;
+	}
+
+	.filter-text {
+		font-size: 12px;
+		color: #333333;
+	}
+
+	.quick-filter-item.active .filter-text {
+		color: #FF6B00;
+	}
+
+	/* 商家列表 */
+	.shop-list {
+		padding: 0 10px;
+	}
+
+	.shop-card {
+		background: #FFFFFF;
+		border: 1px solid #E0E0E0;
+		border-radius: 8px;
+		padding: 12px;
+		margin-bottom: 10px;
+		display: flex;
+		gap: 12px;
+		position: relative;
+	}
+
+	/* 商家图片 */
+	.shop-image {
+		width: 100px;
+		height: 100px;
+		border-radius: 6px;
+		flex-shrink: 0;
+		background: #F5F5F5;
+	}
+
+	/* 商家信息 */
+	.shop-info {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+	}
+
+	/* 店名 */
+	.shop-header {
+		margin-bottom: 6px;
+		padding-right: 60px;
+	}
+
+	.shop-name {
+		font-size: 16px;
+		font-weight: 600;
+		color: #333333;
+		word-wrap: break-word;
+		word-break: break-all;
+		line-height: 1.4;
+	}
+
+	/* 左侧信息：评分、类型、销量 */
+	.shop-info-left {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		margin-bottom: 4px;
+	}
+
+	.shop-rating {
+		display: flex;
+		align-items: baseline;
+	}
+
+	.rating-score {
+		font-size: 14px;
+		font-weight: 600;
+		color: #FF9800;
+	}
+
+	.rating-unit {
+		font-size: 10px;
+		color: #FF9800;
+		margin-left: 2px;
+	}
+
+	.shop-info-left .shop-type {
+		font-size: 12px;
+		color: #4CAF50;
+		font-weight: 500;
+	}
+
+	.shop-info-left .shop-sales {
+		font-size: 12px;
+		color: #666666;
+	}
+
+	/* 距离、用时、人均价格 - 同一行 */
+	.shop-info-row {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-bottom: 4px;
+	}
+
+	.distance-wrapper {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+	}
+
+	.location-icon {
+		font-size: 12px;
+		color: #999999;
+	}
+
+	.distance-text {
+		font-size: 12px;
+		color: #666666;
+	}
+
+	.time-text {
+		font-size: 12px;
+		color: #666666;
+		margin-left: 8px;
+	}
+
+	/* 人均价格 - 小号内联样式 */
+	.shop-avg-price-inline {
+		display: inline-flex;
+		align-items: baseline;
+	}
+
+	.avg-price-small {
+		font-size: 11px;
+		color: #FF6B00;
+		font-weight: 600;
+	}
+
+	.avg-price-value-small {
+		font-size: 15px;
+		color: #FF6B00;
+		font-weight: 700;
+		line-height: 1;
+	}
+
+	.avg-price-text-small {
+		font-size: 11px;
+		color: #FF6B00;
+		margin-left: 2px;
+	}
+
+	/* 底部标签 */
+	.shop-bottom-tags {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 4px;
+	}
+
+	/* 分类页头部骨架屏样式 */
+	.page-loading-wrapper {
+		min-height: 100vh;
+		background: #F5F5F5;
+	}
+
+	.skeleton-nav-back {
+		width: 48rpx;
+		height: 48rpx;
+		border-radius: 8rpx;
+		background: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 25%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.3) 75%);
+		background-size: 200% 100%;
+		animation: loading-white 1.5s ease-in-out infinite;
+	}
+
+	.skeleton-nav-title {
+		flex: 1;
+		height: 36rpx;
+		border-radius: 4rpx;
+		background: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 25%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.3) 75%);
+		background-size: 200% 100%;
+		animation: loading-white 1.5s ease-in-out infinite;
+		margin-left: 16rpx;
+	}
+
+	.search-box-skeleton {
+		background: #F5F5F5;
+		border-radius: 10px;
+		height: 40px;
+		width: 100%;
+	}
+
+	.skeleton-tabs-list {
+		display: inline-flex;
+		padding: 0 16px;
+		gap: 12px;
+	}
+
+	.skeleton-tab-item {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 6px;
+	}
+
+	.skeleton-tab-icon {
+		width: 48px;
+		height: 48px;
+		border-radius: 8rpx;
+		background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+		background-size: 200% 100%;
+		animation: loading 1.5s ease-in-out infinite;
+	}
+
+	.skeleton-tab-text {
+		width: 60rpx;
+		height: 24rpx;
+		border-radius: 4rpx;
+		background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+		background-size: 200% 100%;
+		animation: loading 1.5s ease-in-out infinite;
+	}
+
+	.skeleton-filter-row {
+		display: flex;
+		justify-content: space-between;
+		margin-bottom: 10px;
+	}
+
+	.skeleton-filter-sort,
+	.skeleton-filter-all {
+		height: 32rpx;
+		width: 140rpx;
+		border-radius: 4rpx;
+		background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+		background-size: 200% 100%;
+		animation: loading 1.5s ease-in-out infinite;
+	}
+
+	.skeleton-quick-filters {
+		display: inline-flex;
+		gap: 8px;
+	}
+
+	.skeleton-quick-filter-item {
+		padding: 4px 10px;
+		background: #F5F5F5;
+		border-radius: 4px;
+		width: 100rpx;
+		height: 32rpx;
+		background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+		background-size: 200% 100%;
+		animation: loading 1.5s ease-in-out infinite;
+	}
+
+	@keyframes loading {
+		0% {
+			background-position: 200% 0;
+		}
+
+		100% {
+			background-position: -200% 0;
+		}
+	}
+
+	@keyframes loading-white {
+		0% {
+			background-position: 200% 0;
+		}
+
+		100% {
+			background-position: -200% 0;
+		}
+	}
+</style>

.svn/pristine/7c/7c415e1c2652fb004669eb8b35b9c98a93a33eb5.svn-base

@@ -0,0 +1,40 @@
+import { Service } from '@/Service/Service';
+
+
+class vpCommunityService {
+	private static GetCommunityListPath: string = '/Community/GetCommunityList';
+	/*****获取全部社区*****/
+	static GetCommunityList() {
+		var result = Service.Request(this.GetCommunityListPath, 'GET', {});
+		return result;
+	}
+	
+	
+	private static GetCommunityMerchListPath: string = '/Community/GetCommunityMerchList';
+	/*****获取社区商家列表*****/
+	static GetCommunityMerchList(comId:string,assId:string,lat:number,lon:number,page:number) {
+		var result = Service.Request(this.GetCommunityMerchListPath, 'GET', {comId,assId,lat,lon,page});
+		return result;
+	}
+	
+	private static GetCommunityNoticeInfoPath: string = '/Community/GetCommunityNoticeInfo';
+	/*****获取社区公告详情*****/
+	static GetCommunityNoticeInfo(noticeId:string) {
+		var result = Service.Request(this.GetCommunityNoticeInfoPath, 'GET', {noticeId});
+		return result;
+	}
+	
+	
+	private static GetCommunityNoticeListPath: string = '/Community/GetCommunityNoticeList';
+	/*****获取社区公告列表*****/
+	static GetCommunityNoticeList(comId:string,page:number) {
+		var result = Service.Request(this.GetCommunityNoticeListPath, 'GET', {comId,page});
+		return result;
+	}
+
+	
+}
+
+
+
+export { vpCommunityService }

.svn/pristine/7c/7cca50a5cd2af5d5a2e18764b45b8599b7d1ca9a.svn-base

@@ -0,0 +1,9 @@
+export class BaseConfig {
+	protected static servesUrl: string = "http://192.168.0.142:5002";//线下
+	
+	// protected static servesUrl: string = "https://vp.xypays.cn";
+	protected static imgUrl: string = "http://vp.cloud.xypays.cn";
+	protected static mediaUrl: string = "http://byc1.xypays.cn/";
+	protected static uploadUrl: string = "/TencentCos/GetUpLoadInfo";
+	protected static payuploadUrl: string = "http://pay.xypays.cn";
+}

.svn/pristine/7c/7ceccfa5feccf83545460643a4ca1f13af536696.svn-base

@@ -0,0 +1,27 @@
+import { Service } from '@/Service/Service';
+/*****用户订单*****/
+class vpOrderService {
+	private static GetUserOrderListPath : string = '/Order/GetUserOrderList';
+	/*****获取用户订单列表*****/
+	static GetUserOrderList(page:number) {
+		var result = Service.Request(this.GetUserOrderListPath, 'GET', {page});
+		return result;
+	}
+	
+	private static GetOrderInfoPath : string = '/Order/GetOrderInfo';
+	/*****获取用户订单详情*****/
+	static GetOrderInfo(orderId:string) {
+		var result = Service.Request(this.GetOrderInfoPath, 'GET', {orderId});
+		return result;
+	}
+	
+	
+	private static CancalPayPath : string = '/Order/CancalPay';
+	/*****取消支付*****/
+	static CancalPay(merchId:string) {
+		var result = Service.Request(this.CancalPayPath, 'GET', {merchId});
+		return result;
+	}
+	
+}
+export { Service, vpOrderService };