第一次上传
This commit is contained in:
@@ -0,0 +1,684 @@
|
||||
<template>
|
||||
<view class="search-page">
|
||||
<!-- 顶部导航栏 - 橙色背景 -->
|
||||
<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>
|
||||
<view class="search-input-wrapper" >
|
||||
<image class="search-icon" src="https://img.icons8.com/ios-glyphs/30/999999/search--v1.png"
|
||||
mode="aspectFit" />
|
||||
<input class="search-input" v-model="searchKeyword" placeholder="搜索商家或商品"
|
||||
placeholder-class="search-placeholder" @input="onSearchInput" @confirm="onSearch" focus />
|
||||
<!-- <image v-if="searchKeyword" class="clear-icon"
|
||||
src="https://img.icons8.com/ios-glyphs/30/999999/close-window--v1.png" mode="aspectFit"
|
||||
@click="clearSearch" /> -->
|
||||
</view>
|
||||
<!-- <text class="search-btn" @click="onSearch">搜索</text> -->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 搜索内容区域 -->
|
||||
<view class="content-wrapper">
|
||||
<!-- 搜索历史 - 无搜索内容时显示 -->
|
||||
<view v-if="hasSearched" class="search-history-section">
|
||||
<!-- 搜索历史 -->
|
||||
<view v-if="searchHistory.length > 0" class="history-section">
|
||||
<view class="section-header">
|
||||
<text class="section-title">搜索历史</text>
|
||||
<image class="delete-icon" src="https://img.icons8.com/ios-glyphs/30/999999/delete--v1.png"
|
||||
mode="aspectFit" @click="clearHistory" />
|
||||
</view>
|
||||
<view class="history-tags">
|
||||
<view v-for="(item, index) in searchHistory" :key="index" class="history-tag"
|
||||
@click="searchFromHistory(item)">
|
||||
<text class="history-tag-text">{{ item }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 热门搜索 -->
|
||||
<view class="hot-section">
|
||||
<view class="section-header">
|
||||
<text class="section-title">热门搜索</text>
|
||||
</view>
|
||||
<view class="hot-tags">
|
||||
<view v-for="(item, index) in hotSearches" :key="index" class="hot-tag"
|
||||
@click="searchFromHistory(item)">
|
||||
<text class="hot-tag-text" :class="{ 'top-tag': index < 3 }">{{ item }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 搜索结果 - 有搜索内容时显示 -->
|
||||
<view class="search-results-section">
|
||||
<!-- 搜索建议 - 输入时显示 -->
|
||||
<!-- <view class="suggestions-section">
|
||||
<view v-for="(item, index) in searchSuggestions" :key="index" class="suggestion-item"
|
||||
@click="searchFromHistory(item)">
|
||||
<image class="suggestion-icon" src="https://img.icons8.com/ios-glyphs/30/999999/search--v1.png"
|
||||
mode="aspectFit" />
|
||||
<text class="suggestion-text">{{ item }}</text>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<!-- 搜索结果列表 -->
|
||||
<view class="results-list">
|
||||
<!-- 商家列表 -->
|
||||
<view class="shop-list">
|
||||
<view v-for="shop in goodsList" :key="shop.merchId" class="shop-card" @click="Service.GoPage('/pages/goods/goodsDetail?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">{{ shop.score }}</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 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>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<up-loadmore :status="status" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
ref
|
||||
} from 'vue'
|
||||
import {
|
||||
onLoad
|
||||
} from '@dcloudio/uni-app'
|
||||
import { Service } from "@/Service/Service"
|
||||
import { vpMerchService } from '@/Service/vp/vpMerchService'
|
||||
|
||||
|
||||
// 搜索关键词
|
||||
const searchKeyword = ref('')
|
||||
|
||||
// 是否已搜索
|
||||
const hasSearched = ref(false)
|
||||
|
||||
// 是否显示搜索结果
|
||||
const showResults = ref(false)
|
||||
|
||||
// 搜索结果
|
||||
const searchResults = ref([])
|
||||
|
||||
// 搜索历史
|
||||
const searchHistory = ref(['汉堡', '奶茶', '炸鸡', '披萨'])
|
||||
|
||||
// 热门搜索
|
||||
const hotSearches = ref(['汉堡王', '肯德基', '麦当劳', '星巴克', '必胜客', '喜茶', '奈雪的茶', '瑞幸咖啡'])
|
||||
|
||||
// 模拟商家数据
|
||||
const mockShops = [{
|
||||
id: 1,
|
||||
name: '河南省许昌市汉堡王(宏安店)',
|
||||
cover: 'https://img.icons8.com/color/96/000000/burger.png',
|
||||
rating: '4.8',
|
||||
sales: '2000+',
|
||||
distance: '500m',
|
||||
time: '25分钟',
|
||||
avgPrice: '25.0',
|
||||
coupons: ['12%积分', '可用券'],
|
||||
badgeType: 'partner' // 只使用一个类型标签
|
||||
}
|
||||
]
|
||||
|
||||
let longitude=ref(0)
|
||||
let latitude=ref(0)
|
||||
|
||||
let status=ref('nomore')
|
||||
let goodsList=ref<Array<any>>([])
|
||||
let page=ref(1)
|
||||
|
||||
// 页面加载
|
||||
onLoad((data : any) => {
|
||||
searchKeyword.value = data.search
|
||||
getLocation()
|
||||
})
|
||||
|
||||
// 搜索建议
|
||||
const searchSuggestions = ref([])
|
||||
|
||||
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 = () => {
|
||||
goodsList.value=[]
|
||||
status.value = 'loadmore'
|
||||
page.value = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
const getList = () => {
|
||||
|
||||
if (status.value !== 'loadmore') {
|
||||
return
|
||||
}
|
||||
status.value = 'loading'
|
||||
|
||||
|
||||
vpMerchService.GetMerchList('', searchKeyword.value, longitude.value, latitude.value, page.value).then(res => {
|
||||
goodsList.value=[...goodsList.value,...res.data.merchList]
|
||||
status.value = res.data.merchList.length == 10 ? 'loadmore' : 'nomore'
|
||||
page.value++
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 输入搜索关键词
|
||||
const onSearchInput = () => {
|
||||
if (searchKeyword.value.trim()) {
|
||||
// 模拟搜索建议
|
||||
searchSuggestions.value = hotSearches.value.filter(item =>
|
||||
item.toLowerCase().includes(searchKeyword.value.toLowerCase())
|
||||
).slice(0, 5)
|
||||
} else {
|
||||
searchSuggestions.value = []
|
||||
}
|
||||
}
|
||||
|
||||
// 执行搜索
|
||||
const onSearch = () => {
|
||||
const keyword = searchKeyword.value.trim()
|
||||
|
||||
if (!keyword) {
|
||||
uni.showToast({
|
||||
title: '请输入搜索关键词',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// 保存到搜索历史
|
||||
if (!searchHistory.value.includes(keyword)) {
|
||||
searchHistory.value.unshift(keyword)
|
||||
if (searchHistory.value.length > 10) {
|
||||
searchHistory.value = searchHistory.value.slice(0, 10)
|
||||
}
|
||||
}
|
||||
|
||||
// 执行搜索 - 使用模拟数据
|
||||
// hasSearched.value = true
|
||||
showResults.value = true
|
||||
|
||||
// 过滤模拟数据
|
||||
searchResults.value = mockShops.filter(shop =>
|
||||
shop.name.toLowerCase().includes(keyword.toLowerCase())
|
||||
)
|
||||
|
||||
// 如果没有匹配结果，显示所有数据（方便演示）
|
||||
if (searchResults.value.length === 0) {
|
||||
searchResults.value = mockShops
|
||||
}
|
||||
}
|
||||
|
||||
// 从历史/热门搜索
|
||||
const searchFromHistory = (keyword) => {
|
||||
searchKeyword.value = keyword
|
||||
onSearch()
|
||||
}
|
||||
|
||||
// 清除搜索
|
||||
const clearSearch = () => {
|
||||
searchKeyword.value = ''
|
||||
searchSuggestions.value = []
|
||||
showResults.value = false
|
||||
}
|
||||
|
||||
// 清除搜索历史
|
||||
const clearHistory = () => {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定清空搜索历史吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
searchHistory.value = []
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 获取标签样式类
|
||||
const getTagClass = (tagText) => {
|
||||
const tagMap = {
|
||||
'12%积分': 'tag-points',
|
||||
'15%积分': 'tag-points',
|
||||
'可用积分': 'tag-points-available',
|
||||
'可用券': 'tag-coupon'
|
||||
}
|
||||
return tagMap[tagText] || 'tag-default'
|
||||
}
|
||||
|
||||
// 格式化距离
|
||||
const formatDistance = (distance : any) => {
|
||||
if (distance < 1000) {
|
||||
return `${distance}m`
|
||||
}
|
||||
return `${(distance / 1000).toFixed(1)}km`
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search-page {
|
||||
min-height: 100vh;
|
||||
background: #F5F5F5;
|
||||
}
|
||||
|
||||
/* 顶部导航栏 */
|
||||
.nav-bar {
|
||||
background: linear-gradient(135deg, #FF6B00, #FF9500);
|
||||
height: calc(var(--status-bar-height) + 146rpx);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.nav-content {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 90rpx;
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 24rpx;
|
||||
}
|
||||
|
||||
.nav-back {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
padding: 8rpx;
|
||||
}
|
||||
|
||||
.search-input-wrapper {
|
||||
width: 60%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
color: #222222;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.search-placeholder {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.clear-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
font-size: 15px;
|
||||
color: #FFFFFF;
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
/* 搜索内容区域 */
|
||||
.content-wrapper {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
background: #FAFAFA;
|
||||
min-height: calc(100vh - var(--status-bar-height) - 60px);
|
||||
}
|
||||
|
||||
/* 搜索历史和热门搜索 */
|
||||
.search-history-section {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.history-section,
|
||||
.hot-section {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.delete-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.history-tags,
|
||||
.hot-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.history-tag,
|
||||
.hot-tag {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E0E0E0;
|
||||
border-radius: 4px;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
.history-tag-text,
|
||||
.hot-tag-text {
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.hot-tag .top-tag {
|
||||
color: #FF6B00;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 搜索建议 */
|
||||
.suggestions-section {
|
||||
background: #FFFFFF;
|
||||
margin: 16px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.suggestion-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid #F0F0F0;
|
||||
}
|
||||
|
||||
.suggestion-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.suggestion-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 12px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.suggestion-text {
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
/* 搜索结果 */
|
||||
.search-results-section {
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.results-list {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* 商家列表 */
|
||||
.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: bold;
|
||||
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;
|
||||
}
|
||||
|
||||
/* 无搜索结果 */
|
||||
.no-results {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 80px 20px;
|
||||
}
|
||||
|
||||
.no-results-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-bottom: 16px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.no-results-text {
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.no-results-hint {
|
||||
font-size: 14px;
|
||||
color: #999999;
|
||||
}
|
||||
</style>
|
||||
1037
.svn/pristine/14/140ba14f185ca2ad9f501e77f81845d3df15c837.svn-base
Normal file
1037
.svn/pristine/14/140ba14f185ca2ad9f501e77f81845d3df15c837.svn-base
Normal file
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,208 @@
|
||||
<template>
|
||||
<view style="margin: 20rpx 30rpx;">
|
||||
<view class="" style="border-radius: 20rpx; background-color: #fff; padding: 20rpx; ">
|
||||
<view class="" style="font-weight: 600; font-size: 30rpx;">
|
||||
商品封面
|
||||
</view>
|
||||
<view class=""
|
||||
style=" margin-top: 20rpx; width: 100%; height: 320rpx; border: 4rpx dashed #e2e2e2; border-radius: 20rpx; overflow: hidden; ">
|
||||
<view class=""
|
||||
style="width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; ">
|
||||
<img :src="Service.GetIconImg('/static/goods/photo.png')" style="width: 80rpx; height: 80rpx;"
|
||||
alt="" />
|
||||
<view class="" style=" color: #666666; font-size: 28rpx;">
|
||||
上传图片
|
||||
</view>
|
||||
</view>
|
||||
<!-- <image :src="Service.GetMateUrlByImg('/static/dele/dele4.jpg')" mode="aspectFill" style="width: 100%; height: 100%; " alt="" /> -->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<view class="" style=" margin-top: 20rpx; border-radius: 20rpx; background-color: #fff; padding: 20rpx; ">
|
||||
<up-form labelWidth='90' :labelStyle="{'font-weight': 600 }" labelPosition="top" :model="goodsInfo"
|
||||
ref="form1">
|
||||
<up-form-item label="商品名称" prop="goodsInfo.name" :borderBottom="false" ref="item1">
|
||||
<up-input :customStyle="{'border-radius': '15rpx' }" placeholder="请输入商品名称" border='surround'
|
||||
v-model="goodsInfo.name"></up-input>
|
||||
</up-form-item>
|
||||
<up-form-item label="价格" prop="goodsInfo.sex" :borderBottom="false">
|
||||
<up-input prefixIcon='rmb' :prefixIconStyle="{ 'color':'#000','font-weight': 600 }"
|
||||
:customStyle="{'border-radius': '15rpx' }" placeholder="请输入价格" v-model="goodsInfo.prince"
|
||||
border="surround"></up-input>
|
||||
</up-form-item>
|
||||
<up-form-item label="描述" prop="goodsInfo.sex" :borderBottom="false">
|
||||
<up-textarea v-model="goodsInfo.des" placeholder="请输入商品描述"></up-textarea>
|
||||
</up-form-item>
|
||||
<up-form-item label="分类" prop="goodsInfo.sex" :borderBottom="false">
|
||||
<view class=""
|
||||
style="padding: 12rpx 18rpx; border-radius: 7px; border: 1rpx solid #e2e2e2; width: 100%; ">
|
||||
<view class="" @click="showClass=true"
|
||||
style="display: flex; height: 48rpx; align-items: center; justify-content: space-between;">
|
||||
<view class="" :style="{ 'color':goodsInfo.class? '#000':'#c0c4cc' } ">
|
||||
{{ goodsInfo.class?goodsInfo.class:'请选择分类'}}
|
||||
</view>
|
||||
<view class="">
|
||||
<up-icon name="arrow-right" size="14" color='#666666' :bold='true'></up-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</up-form-item>
|
||||
<up-form-item label="状态" prop="goodsInfo.sex" :borderBottom="false">
|
||||
<up-radio-group v-model="goodsInfo.status" placement="row">
|
||||
<up-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist" :key="index"
|
||||
:label="item.name" :name="item.value" @change="radioChange">
|
||||
</up-radio>
|
||||
</up-radio-group>
|
||||
</up-form-item>
|
||||
<up-form-item label="标签" :borderBottom="false">
|
||||
<view v-for="(item, index) in tabsList" @click="clickTab(index)" :key="index"
|
||||
:class="{active:!goodsInfo.tabs.includes(index),actived:goodsInfo.tabs.includes(index)}">
|
||||
{{item}}
|
||||
</view>
|
||||
</up-form-item>
|
||||
</up-form>
|
||||
</view>
|
||||
|
||||
<view class="" style="width: 100%; height: 200rpx;">
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 底部操作按钮 -->
|
||||
<view class="action-buttons">
|
||||
<u-button type="primary" @click="Service.GoPageBack()" :custom-style="ButtonStyle">取消</u-button>
|
||||
<u-button type="primary" @click="save()" :custom-style="ButtonStyle">保存</u-button>
|
||||
</view>
|
||||
|
||||
|
||||
<up-picker :show="showClass" @cancel="showClass=!showClass" @confirm="confirmClass"
|
||||
:columns="columns"></up-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onShow, onLoad } from "@dcloudio/uni-app";
|
||||
import { Service } from "@/Service/Service"
|
||||
import { ref } from "vue";
|
||||
|
||||
|
||||
let goodsInfo = ref({
|
||||
name: "",
|
||||
prince: '',
|
||||
des: "",
|
||||
class: '',
|
||||
status: '',
|
||||
tabs: []
|
||||
})
|
||||
|
||||
let showClass = ref(false)
|
||||
const columns = ref([
|
||||
['中国', '美国', '日本']
|
||||
]);
|
||||
|
||||
const radiolist = ref([
|
||||
{
|
||||
name: '上架中',
|
||||
value: '0'
|
||||
|
||||
},
|
||||
{
|
||||
name: '已下架',
|
||||
value: '1'
|
||||
}
|
||||
]);
|
||||
|
||||
|
||||
let tabsList = ref([
|
||||
'新品',
|
||||
'热销',
|
||||
'推荐',
|
||||
'折扣',
|
||||
'特惠'
|
||||
])
|
||||
|
||||
|
||||
const ButtonStyle = ref({
|
||||
backgroundColor: '#FF6600',
|
||||
borderColor: '#FF6600',
|
||||
color: '#FFFFFF',
|
||||
fontSize: '28rpx',
|
||||
height: '75rpx',
|
||||
borderRadius: '45rpx',
|
||||
marginLeft: '20rpx'
|
||||
});
|
||||
|
||||
onLoad(() => {
|
||||
|
||||
});
|
||||
|
||||
onShow(() => {
|
||||
|
||||
});
|
||||
|
||||
|
||||
const confirmClass = (e) => {
|
||||
goodsInfo.value.class = e.value[0]
|
||||
showClass.value = !showClass.value
|
||||
}
|
||||
|
||||
|
||||
const radioChange = (e) => {
|
||||
goodsInfo.value.status = e
|
||||
}
|
||||
|
||||
const clickTab = (e : any) => {
|
||||
if (goodsInfo.value.tabs.includes(e)) {
|
||||
let a = goodsInfo.value.tabs.findIndex((x) => {
|
||||
return x == e
|
||||
})
|
||||
goodsInfo.value.tabs.splice(a, 1)
|
||||
return
|
||||
}
|
||||
|
||||
goodsInfo.value.tabs.push(e)
|
||||
}
|
||||
|
||||
const save=()=>{
|
||||
Service.GoPageBack()
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #b5b5b5;
|
||||
border: 1rpx solid #b5b5b5;
|
||||
margin-right: 15rpx;
|
||||
border-radius: 23rpx;
|
||||
padding: 5rpx 16rpx;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.actived {
|
||||
color: var(--nav-mian);
|
||||
border: 1rpx solid var(--nav-mian);
|
||||
margin-right: 15rpx;
|
||||
border-radius: 23rpx;
|
||||
padding: 5rpx 16rpx;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
/* 底部操作按钮 */
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
padding: 30rpx 30rpx;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
border-top: 1rpx solid #f0f0f0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,797 @@
|
||||
<template>
|
||||
<view class="index-page">
|
||||
<!-- 页面整体加载状态 -->
|
||||
<view v-if="loding" class="page-loading">
|
||||
<!-- 固定顶部区域 -->
|
||||
<view class="top-fixed">
|
||||
<view class="status-bar-placeholder"></view>
|
||||
<view class="top-section-fixed">
|
||||
<view class="location-box-skeleton">
|
||||
<view class="skeleton-location-icon"></view>
|
||||
<view class="skeleton-location-text"></view>
|
||||
<view class="skeleton-arrow-icon"></view>
|
||||
</view>
|
||||
<view class="search-wrapper">
|
||||
<view class="search-box-skeleton"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 状态栏占位 - 沉浸式状态栏 -->
|
||||
<view class="status-bar"></view>
|
||||
|
||||
<!-- 占位区域 - 抵消固定顶部的高度 -->
|
||||
<view class="top-placeholder"></view>
|
||||
|
||||
<!-- 分类骨架屏 -->
|
||||
<view class="category-section">
|
||||
<SkeletonCategory />
|
||||
</view>
|
||||
|
||||
<!-- 商家列表骨架屏 -->
|
||||
<view class="shop-list">
|
||||
<view class="shop-waterfall">
|
||||
<view class="waterfall-column">
|
||||
<SkeletonShopCard v-for="i in 3" :key="'left-' + i" />
|
||||
</view>
|
||||
<view class="waterfall-column">
|
||||
<SkeletonShopCard v-for="i in 3" :key="'right-' + i" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 实际内容 -->
|
||||
<view v-else>
|
||||
<!-- 固定顶部区域 -->
|
||||
<view class="top-fixed">
|
||||
<view class="status-bar-placeholder"></view>
|
||||
<view class="top-section-fixed">
|
||||
<view class="location-box" @click.stop="choooseLocation()">
|
||||
<up-icon name="map" color="#fff" size="12"></up-icon>
|
||||
<text class="location-text" style="margin: 0 4rpx;" >{{ location }}</text>
|
||||
<up-icon name="arrow-right" color="#fff" size="10"></up-icon>
|
||||
</view>
|
||||
|
||||
<view class="search-wrapper">
|
||||
<view class="search-box">
|
||||
<input type="text" v-model="searchKey"
|
||||
@confirm="Service.GoPage('/pages/goods/search?search='+searchKey)" class="search-input"
|
||||
placeholder="请输入关键字" placeholder-class="search-placeholder" />
|
||||
<view @click="Service.GoPage('/pages/goods/search?search='+searchKey)" class="search-btn">搜索
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 状态栏占位 - 沉浸式状态栏 -->
|
||||
<view class="status-bar"></view>
|
||||
|
||||
<!-- 占位区域 - 抵消固定顶部的高度 -->
|
||||
<view class="top-placeholder"></view>
|
||||
|
||||
<!-- 分类导航 - 三行五列 -->
|
||||
<view class="category-section">
|
||||
<view class="category-grid">
|
||||
<view v-for="(category, index) in tabList" :key="index" class="category-item"
|
||||
@click="Service.GoPage('/pages/goods/goodsClass?type='+category.assortId+'&name='+category.name )">
|
||||
<view class="category-icon-box" :style="{ background: category.bgColor }">
|
||||
<image :src="Service.GetMateUrlByImg(category.icon)"
|
||||
style="width: 100%; height: 100%;"></image>
|
||||
</view>
|
||||
<text class="category-name">{{ category.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 商家列表 - 瀑布流布局 -->
|
||||
<view class="shop-list">
|
||||
<view class="shop-waterfall">
|
||||
<!-- 左列 -->
|
||||
<view class="waterfall-column">
|
||||
<view v-for="shop in leftGoodsList" :key="shop.merchId" class="shop-card"
|
||||
@click="Service.GoPage('/pages/community/merchantDetail?merchId='+shop.merchId)">
|
||||
<view class="shop-cover-wrapper">
|
||||
<image class="shop-cover" :src="Service.GetMateUrlByImg(shop.logo)" mode="aspectFill" />
|
||||
<!-- 浮动标签 - 左下角距离 -->
|
||||
<view class="float-tag float-distance">
|
||||
<up-icon name="map" color="#fff" size="12"></up-icon>
|
||||
<text class="tag-text">{{formatDistance(shop.distance)}}</text>
|
||||
</view>
|
||||
<!-- 右上角商家标签 -->
|
||||
<view class="shop-badges">
|
||||
<text v-if="shop.codeName=='联盟商家'" class="badge-partner">{{shop.codeName }}</text>
|
||||
<text v-else class="badge-coop">{{shop.codeName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="shop-info">
|
||||
<view class="shop-header">
|
||||
<text class="shop-name">{{ shop.name }}</text>
|
||||
</view>
|
||||
|
||||
<view class="shop-meta">
|
||||
<text class="shop-sales">月售:{{ shop.sale }}</text>
|
||||
<text class="shop-avg-price">人均{{ shop.price }}</text>
|
||||
</view>
|
||||
|
||||
<view class="shop-footer">
|
||||
<view class="shop-tags">
|
||||
|
||||
<view v-for="(coupon, idx) in shop.tips" :key="idx" :class="getTagClass(coupon)"
|
||||
style="font-size: 22rpx; margin-left: 4rpx;" class="shop-tag">
|
||||
{{ coupon }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 右列 -->
|
||||
<view class="waterfall-column">
|
||||
<view v-for="shop in rightGoodsList" :key="shop.merchId" class="shop-card"
|
||||
@click="Service.GoPage('/pages/community/merchantDetail?merchId='+shop.merchId)">
|
||||
<view class="shop-cover-wrapper">
|
||||
<image class="shop-cover" :src="Service.GetMateUrlByImg(shop.logo)" mode="aspectFill" />
|
||||
<!-- 浮动标签 - 左下角距离 -->
|
||||
<view class="float-tag float-distance">
|
||||
<up-icon name="map" color="#fff" size="12"></up-icon>
|
||||
<text class="tag-text">{{formatDistance(shop.distance)}}</text>
|
||||
</view>
|
||||
<!-- 右上角商家标签 -->
|
||||
<view class="shop-badges">
|
||||
<text v-if="shop.code=='Discounts'" class="badge-partner">联盟商家</text>
|
||||
<text v-else class="badge-coop">合作商家</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="shop-info">
|
||||
<view class="shop-header">
|
||||
<text class="shop-name">{{ shop.name }}</text>
|
||||
</view>
|
||||
|
||||
<view class="shop-meta">
|
||||
<text class="shop-sales">月售:{{ shop.sale }}</text>
|
||||
<text class="shop-avg-price">人均{{ shop.price }}</text>
|
||||
</view>
|
||||
|
||||
<view class="shop-footer">
|
||||
<view class="shop-tags">
|
||||
<view v-for="(coupon, idx) in shop.tips" :key="idx" :class="getTagClass(coupon)"
|
||||
style="font-size: 22rpx;" class="shop-tag">
|
||||
{{ coupon }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<up-loadmore :status="status" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
onLoad, onReachBottom, onShareAppMessage, onShareTimeline, onShow
|
||||
} from '@dcloudio/uni-app'
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
computed
|
||||
} from 'vue'
|
||||
import SkeletonCategory from '../../components/skeleton/skeleton-category.vue'
|
||||
import SkeletonShopCard from '../../components/skeleton/skeleton-shop-card.vue'
|
||||
import { vpLoginService, Service } from '@/Service/vp/vpLoginService'
|
||||
import { vpMerchService } from '@/Service/vp/vpMerchService'
|
||||
import { vpUserService } from '@/Service/vp/vpUserService'
|
||||
|
||||
// 数据
|
||||
let location = ref('')
|
||||
const categories = ref([])
|
||||
const shops = ref([])
|
||||
const currentCategory = ref('all')
|
||||
let status = ref('nomore')
|
||||
|
||||
let loding = ref(true)
|
||||
|
||||
let longitude = ref(0)
|
||||
let latitude = ref(0)
|
||||
|
||||
let searchKey = ref('')
|
||||
|
||||
let leftGoodsList = ref<Array<any>>([])
|
||||
let rightGoodsList = ref<Array<any>>([])
|
||||
let tabList = ref<Array<any>>([])
|
||||
let page = ref(1)
|
||||
let scene=ref('')
|
||||
onLoad((data:any) => {
|
||||
if(data.scene){
|
||||
scene.value=data.scene
|
||||
}
|
||||
if (data.q) {
|
||||
scene.value = decodeURIComponent(data.q).split('?')[1].split('=')[1]
|
||||
}
|
||||
getLocation()
|
||||
})
|
||||
|
||||
onShow(()=>{
|
||||
|
||||
})
|
||||
|
||||
// 分享
|
||||
onShareAppMessage((res) => {
|
||||
return {
|
||||
path: '/pages/index/index'
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
onShareTimeline(() => {
|
||||
return {
|
||||
path: '/pages/index/index'
|
||||
}
|
||||
})
|
||||
|
||||
onReachBottom(()=>{
|
||||
getList()
|
||||
})
|
||||
|
||||
const getLocation = () => {
|
||||
|
||||
uni.getLocation({
|
||||
isHighAccuracy:true,
|
||||
type: 'gcj02',
|
||||
success: function (res) {
|
||||
longitude.value = res.longitude
|
||||
latitude.value = res.latitude
|
||||
getAddress()
|
||||
if (!Service.GetUserToken()) {
|
||||
login()
|
||||
return
|
||||
}
|
||||
getdata()
|
||||
},
|
||||
fail: function (e) {
|
||||
console.log(e);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
const login = () => {
|
||||
uni.getProvider({
|
||||
service: 'oauth',
|
||||
success: function (res : any) {
|
||||
uni.login({
|
||||
onlyAuthorize: true,
|
||||
provider: res.provider,
|
||||
success: function (loginRes) {
|
||||
vpLoginService.WxLogin(loginRes.code, res.provider == 'weixin' ? 1 : 3, longitude.value, latitude.value, scene.value).then(content => {
|
||||
if (content.code == 0) {
|
||||
Service.SetUserToken(content.data.accToken)
|
||||
getdata()
|
||||
} else {
|
||||
Service.Msg(content.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
const getdata = () => {
|
||||
leftGoodsList.value = []
|
||||
rightGoodsList.value = []
|
||||
status.value = 'loadmore'
|
||||
page.value = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
const getList = () => {
|
||||
|
||||
if (status.value !== 'loadmore') {
|
||||
return
|
||||
}
|
||||
status.value = 'loading'
|
||||
|
||||
|
||||
vpMerchService.GetMerchList('', '', longitude.value, latitude.value,0,0, page.value).then(res => {
|
||||
loding.value = false
|
||||
res.data.merchList.forEach((goodsItem : any, GoodsIndex : number) => {
|
||||
if (GoodsIndex % 2 == 0) {
|
||||
leftGoodsList.value.push(goodsItem)
|
||||
} else {
|
||||
rightGoodsList.value.push(goodsItem)
|
||||
}
|
||||
})
|
||||
tabList.value = res.data.assortList
|
||||
status.value = res.data.merchList.length == 10 ? 'loadmore' : 'nomore'
|
||||
page.value++
|
||||
})
|
||||
}
|
||||
|
||||
const getAddress = () => {
|
||||
vpUserService.GetAddressInfo(longitude.value, latitude.value).then(res => {
|
||||
if (res.code == 0) {
|
||||
location.value = res.data.addrName
|
||||
} else {
|
||||
Service.Msg(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const choooseLocation = () => {
|
||||
uni.chooseLocation({
|
||||
success: function (res) {
|
||||
longitude.value = res.longitude
|
||||
latitude.value = res.latitude
|
||||
location.value = res.address
|
||||
getdata()
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 格式化距离
|
||||
const formatDistance = (distance : any) => {
|
||||
if (distance < 1) {
|
||||
return `${Number(distance*1000).toFixed(1)}m`
|
||||
}
|
||||
return `${(distance).toFixed(1)}km`
|
||||
}
|
||||
|
||||
// 根据标签文本获取样式类
|
||||
const getTagClass = (tagText : string) => {
|
||||
const tagMap = {
|
||||
'可用积分': 'tag-points-available',
|
||||
'可用券': 'tag-coupon'
|
||||
}
|
||||
return tagMap[tagText] || 'tag-points'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.index-page {
|
||||
min-height: 100vh;
|
||||
background: #F5F5F5;
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
|
||||
/* 状态栏占位 - 沉浸式 */
|
||||
.status-bar {
|
||||
background: linear-gradient(135deg, #FF6B00, #FF9500);
|
||||
height: var(--status-bar-height);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 固定顶部区域 - 始终固定 */
|
||||
.top-fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.status-bar-placeholder {
|
||||
background: linear-gradient(135deg, #FF6B00, #FF9500);
|
||||
height: var(--status-bar-height);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.top-section-fixed {
|
||||
background: linear-gradient(135deg, #FF6B00, #FF9500);
|
||||
padding: 65rpx 20rpx 28rpx;
|
||||
}
|
||||
|
||||
/* 占位区域 - 抵消固定顶部的高度 */
|
||||
.top-placeholder {
|
||||
height: calc(var(--status-bar-height) + 170rpx);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.location-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 28rpx;
|
||||
}
|
||||
|
||||
.location-icon-small {
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.location-text {
|
||||
font-size: 30rpx;
|
||||
color: #FFFFFF;
|
||||
font-weight: 500;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
font-size: 24rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
/* 搜索区域 */
|
||||
.search-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
/* 搜索框 */
|
||||
.search-box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #FFFFFF;
|
||||
border-radius: 32rpx;
|
||||
padding: 8rpx 28rpx;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
font-size: 26rpx;
|
||||
color: #222222;
|
||||
height: 48rpx;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
|
||||
.search-placeholder {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
background: #FF6B00;
|
||||
color: #FFFFFF;
|
||||
font-size: 24rpx;
|
||||
padding: 6rpx 18rpx;
|
||||
border-radius: 20rpx;
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 分类导航 - 三行五列 */
|
||||
.category-section {
|
||||
background: #FFFFFF;
|
||||
padding: 32rpx 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.category-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 32rpx 20rpx;
|
||||
}
|
||||
|
||||
.category-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.category-icon-box {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.category-icon-box text {
|
||||
font-size: 44rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.category-name {
|
||||
font-size: 24rpx;
|
||||
color: #222222;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 商家列表 - 瀑布流布局 */
|
||||
.shop-list {
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.shop-waterfall {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.waterfall-column {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.shop-card {
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
|
||||
break-inside: avoid;
|
||||
}
|
||||
|
||||
.shop-cover-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
}
|
||||
|
||||
.shop-cover {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 浮动标签 */
|
||||
.float-tag {
|
||||
position: absolute;
|
||||
padding: 2rpx 6rpx;
|
||||
border-radius: 3rpx;
|
||||
font-size: 16rpx;
|
||||
backdrop-filter: blur(10rpx);
|
||||
-webkit-backdrop-filter: blur(10rpx);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2rpx;
|
||||
}
|
||||
|
||||
.float-distance {
|
||||
left: 6rpx;
|
||||
bottom: 6rpx;
|
||||
background: rgba(0, 0, 0, 0.65);
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.float-distance .tag-icon {
|
||||
font-size: 14rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.float-distance .tag-text {
|
||||
font-size: 16rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.shop-info {
|
||||
padding: 16rpx;
|
||||
}
|
||||
|
||||
// 右上角
|
||||
.shop-badges {
|
||||
position: absolute;
|
||||
top: 16rpx;
|
||||
right: 16rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
|
||||
/* 商家信息 */
|
||||
.shop-header {
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.shop-name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #222222;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.shop-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.shop-sales {
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.shop-avg-price {
|
||||
font-size: 26rpx;
|
||||
color: #FF6B00;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* 商家标签 */
|
||||
.shop-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4rpx;
|
||||
}
|
||||
|
||||
/* 标签 */
|
||||
.tag-badge {
|
||||
display: inline-block;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 6rpx;
|
||||
font-size: 20rpx;
|
||||
font-weight: 500;
|
||||
margin-right: 12rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tag-coupon {
|
||||
background: #FFF8E1;
|
||||
color: #FF6B00;
|
||||
}
|
||||
|
||||
.shop-price {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #FF4D4F;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.shop-original {
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.empty {
|
||||
grid-column: 1 / -1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 120rpx 0;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 120rpx;
|
||||
color: #CCCCCC;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
/* 底部导航栏 - 小巧精致风格 */
|
||||
.tabbar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
padding: 12rpx 0 calc(12rpx + env(safe-area-inset-bottom));
|
||||
box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.04);
|
||||
z-index: 999;
|
||||
height: calc(90rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.tabbar-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10rpx 0;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tabbar-icon {
|
||||
font-size: 44rpx;
|
||||
color: #CCCCCC;
|
||||
margin-bottom: 8rpx;
|
||||
transition: all 0.3s ease;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.tabbar-text {
|
||||
font-size: 22rpx;
|
||||
color: #CCCCCC;
|
||||
font-weight: 400;
|
||||
transition: all 0.3s ease;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
/* 激活状态 */
|
||||
.tabbar-item.active .tabbar-icon {
|
||||
color: #FF6B00;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.tabbar-item.active .tabbar-text {
|
||||
color: #FF6B00;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 首页头部骨架屏样式 */
|
||||
.location-box-skeleton {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 28rpx;
|
||||
}
|
||||
|
||||
.skeleton-location-icon {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
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-right: 8rpx;
|
||||
}
|
||||
|
||||
.skeleton-location-text {
|
||||
width: 200rpx;
|
||||
height: 28rpx;
|
||||
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-right: 8rpx;
|
||||
}
|
||||
|
||||
.skeleton-arrow-icon {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
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;
|
||||
}
|
||||
|
||||
.search-box-skeleton {
|
||||
width: 100%;
|
||||
height: 60rpx;
|
||||
border-radius: 32rpx;
|
||||
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;
|
||||
}
|
||||
|
||||
@keyframes loading-white {
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
.page-loading {
|
||||
min-height: 100vh;
|
||||
background: #F5F5F5;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user