第一次上传
This commit is contained in:
@@ -0,0 +1,309 @@
|
||||
<template>
|
||||
<view class="points-mall-page">
|
||||
<view class="page-content">
|
||||
<!-- 1. 顶部轮播图 (原生 <swiper> 实现) -->
|
||||
<view class="swiper-section">
|
||||
<swiper class="swiper-container" circular autoplay :interval="3000" :duration="500"
|
||||
@change="e => swiperCurrent = e.detail.current">
|
||||
<swiper-item v-for="(item, index) in swiperList" :key="index">
|
||||
<view class="swiper-item">
|
||||
<view class="image-placeholder swiper-image">
|
||||
<image :src="item" style="width: 100%; height: 100%;" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<!-- 自定义指示点 -->
|
||||
<view class="swiper-dots">
|
||||
<view class="dot" :class="{ active: index === swiperCurrent }" v-for="(item, index) in swiperList"
|
||||
:key="index"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 2. 主体内容：左右联动 -->
|
||||
<view class="main-content">
|
||||
<!-- 左侧分类栏 -->
|
||||
<scroll-view class="left-panel" scroll-y>
|
||||
<view class="category-item" :class="{ active: currentCategory === cat.typeId }"
|
||||
v-for="(cat, index) in categories" :key="index" @click="selectCategory(cat)">
|
||||
<text class="name">{{ cat.name }}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 右侧商品列表 -->
|
||||
<scroll-view class="right-panel" @scrolltolower="getList()" scroll-y>
|
||||
<view class="product-list">
|
||||
<view class="product-card" v-for="(product,index) in products" :key="index"
|
||||
@click="Service.GoPage('/pages/goods/integralGoods?id='+product.goodsId)">
|
||||
<view class="image-placeholder product-image">
|
||||
<image :src="Service.GetMateUrlByImg(product.img)" style="width: 100%; height: 100%; border-radius: 20rpx;"
|
||||
mode=""></image>
|
||||
</view>
|
||||
<view class="product-info" style="flex: 1;">
|
||||
<text class="name">{{ product.goodsName }}</text>
|
||||
<view style=" margin: 10rpx 0; display: flex; align-items: center; color: #999; font-size: 26rpx; " >
|
||||
<view class="">
|
||||
销量 {{ product.sale}}
|
||||
</view>
|
||||
<view class="" style="margin-left: 20rpx;">
|
||||
库存 {{ product.stock}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="price-line" style="display: flex; align-items: center; justify-content: space-between;" >
|
||||
<text class="points">{{ product.price }} 积分</text>
|
||||
<view class="">
|
||||
<u-button type="primary" :custom-style="ButtonStyle">立即兑换</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<up-loadmore status="nomore" nomoreText="没有更多商品了"></up-loadmore>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue';
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||||
import { Service } from "@/Service/Service";
|
||||
import { vpGoodsService } from '@/Service/vp/vpGoodsService'
|
||||
|
||||
const ButtonStyle = ref({
|
||||
backgroundColor: '#FF6600',
|
||||
borderColor: '#FF6600',
|
||||
color: '#FFFFFF',
|
||||
fontSize: '24rpx',
|
||||
height: '40rpx',
|
||||
padding:'24rpx 8rpx',
|
||||
borderRadius: '45rpx',
|
||||
});
|
||||
|
||||
let keyword=ref('')
|
||||
const currentCategory = ref('1001');
|
||||
const swiperCurrent = ref(0);
|
||||
|
||||
// 轮播图数据
|
||||
let swiperList = reactive([
|
||||
'/static/dele/dele1.jpg',
|
||||
'/static/dele/dele2.jpg',
|
||||
'/static/dele/dele3.png',
|
||||
]);
|
||||
|
||||
// 分类数据
|
||||
const categories = ref<Array<any>>([]);
|
||||
|
||||
// 商品数据
|
||||
const products = ref<Array<any>>([]);
|
||||
|
||||
|
||||
let page=ref(1)
|
||||
let status=ref('nomore')
|
||||
|
||||
onLoad(() => {
|
||||
getData()
|
||||
});
|
||||
onShow(() => { });
|
||||
|
||||
|
||||
const getData=()=>{
|
||||
page.value=1
|
||||
status.value='loadmore'
|
||||
products.value=[]
|
||||
getList()
|
||||
}
|
||||
|
||||
const getList=()=>{
|
||||
if(status.value=='nomore'|| status.value=='loading' ){
|
||||
return
|
||||
}
|
||||
status.value='loading'
|
||||
swiperList=[]
|
||||
vpGoodsService.GetGoodsList(currentCategory.value,page.value).then(res=>{
|
||||
if(res.code==0){
|
||||
categories.value=res.data.goodsType
|
||||
products.value=[...products.value,...res.data.goodsList]
|
||||
res.data.bannerList.map(item=>{
|
||||
swiperList.push(Service.GetMateUrlByImg(item.img))
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const selectCategory = (cat : any) => {
|
||||
currentCategory.value = cat.typeId;
|
||||
getData()
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
|
||||
.points-mall-page {
|
||||
background-color: #f6f6f6;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.swiper-section {
|
||||
padding: 24rpx;
|
||||
position: relative;
|
||||
|
||||
.swiper-container {
|
||||
height: 300rpx;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.swiper-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-dots {
|
||||
position: absolute;
|
||||
bottom: 40rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 12rpx;
|
||||
|
||||
.dot {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
transition: all 0.3s;
|
||||
|
||||
&.active {
|
||||
width: 30rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.left-panel {
|
||||
width: 180rpx;
|
||||
background-color: #f7f7f7;
|
||||
height: 100%;
|
||||
|
||||
.category-item {
|
||||
padding: 30rpx 20rpx;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
|
||||
&.active {
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 8rpx;
|
||||
height: 40rpx;
|
||||
background-color: #fa6400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-panel {
|
||||
flex: 1;
|
||||
background-color: #fff;
|
||||
height: 920rpx;
|
||||
padding: 30rpx;
|
||||
|
||||
.product-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 30rpx;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
align-items: center;
|
||||
border-bottom: 1rpx solid #e2e2e2;
|
||||
padding-bottom: 10rpx;
|
||||
|
||||
.product-image {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 12rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
.name {
|
||||
font-size: 34rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.price-line {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
||||
.points {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #fa6400;
|
||||
}
|
||||
|
||||
.original-price {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.exchange-btn {
|
||||
background-color: #fa6400;
|
||||
color: #fff;
|
||||
border-radius: 30rpx;
|
||||
font-size: 24rpx;
|
||||
padding: 10rpx 24rpx;
|
||||
margin: 0;
|
||||
height: fit-content;
|
||||
line-height: 1.5;
|
||||
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,264 @@
|
||||
<template>
|
||||
<view class="skeleton-profile">
|
||||
<!-- 用户信息骨架 -->
|
||||
<view class="skeleton-user-header">
|
||||
<view class="skeleton-avatar"></view>
|
||||
<view class="skeleton-user-info">
|
||||
<view class="skeleton-name"></view>
|
||||
<view class="skeleton-id"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 统计卡片骨架 -->
|
||||
<view class="skeleton-stats-card">
|
||||
<view class="skeleton-stats-item">
|
||||
<view class="skeleton-stats-icon"></view>
|
||||
<view class="skeleton-stats-content">
|
||||
<view class="skeleton-stats-value"></view>
|
||||
<view class="skeleton-stats-label"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="skeleton-divider"></view>
|
||||
<view class="skeleton-stats-item">
|
||||
<view class="skeleton-stats-icon"></view>
|
||||
<view class="skeleton-stats-content">
|
||||
<view class="skeleton-stats-value"></view>
|
||||
<view class="skeleton-stats-label"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 会员码骨架 -->
|
||||
<view class="skeleton-member-code"></view>
|
||||
|
||||
<!-- 功能入口骨架 -->
|
||||
<view class="skeleton-function-grid">
|
||||
<view v-for="i in 4" :key="i" class="skeleton-function-item">
|
||||
<view class="skeleton-function-icon"></view>
|
||||
<view class="skeleton-function-name"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 菜单列表骨架 -->
|
||||
<view class="skeleton-menu">
|
||||
<view v-for="i in 3" :key="i" class="skeleton-menu-item">
|
||||
<view class="skeleton-menu-icon"></view>
|
||||
<view class="skeleton-menu-text"></view>
|
||||
<view class="skeleton-menu-arrow"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.skeleton-profile {
|
||||
min-height: 100vh;
|
||||
background: #F5F5F5;
|
||||
padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
/* 用户信息骨架 */
|
||||
.skeleton-user-header {
|
||||
background: linear-gradient(135deg, #FFF4E6, #FFE0B2);
|
||||
padding: 20rpx 20rpx 50rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.skeleton-avatar {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 60rpx;
|
||||
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: loading 1.5s ease-in-out infinite;
|
||||
margin-right: 20rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.skeleton-user-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.skeleton-name {
|
||||
height: 36rpx;
|
||||
width: 200rpx;
|
||||
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;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.skeleton-id {
|
||||
height: 32rpx;
|
||||
width: 240rpx;
|
||||
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-stats-card {
|
||||
background: #FFFFFF;
|
||||
margin: -20rpx 0 20rpx;
|
||||
border-radius: 0;
|
||||
border-top-left-radius: 24rpx;
|
||||
border-top-right-radius: 24rpx;
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.skeleton-stats-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.skeleton-stats-icon {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 12rpx;
|
||||
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: loading 1.5s ease-in-out infinite;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.skeleton-stats-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4rpx;
|
||||
}
|
||||
|
||||
.skeleton-stats-value {
|
||||
height: 36rpx;
|
||||
width: 60rpx;
|
||||
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-stats-label {
|
||||
height: 24rpx;
|
||||
width: 48rpx;
|
||||
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-divider {
|
||||
width: 1rpx;
|
||||
background: rgba(0, 0, 0, 0.08);
|
||||
height: 64rpx;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
/* 会员码骨架 */
|
||||
.skeleton-member-code {
|
||||
margin: 0 20rpx 20rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 16rpx;
|
||||
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: loading 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* 功能入口骨架 */
|
||||
.skeleton-function-grid {
|
||||
background: #FFFFFF;
|
||||
margin: 0 20rpx 20rpx;
|
||||
border-radius: 16rpx;
|
||||
padding: 32rpx 20rpx;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.skeleton-function-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.skeleton-function-icon {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
border-radius: 16rpx;
|
||||
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: loading 1.5s ease-in-out infinite;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.skeleton-function-name {
|
||||
width: 80rpx;
|
||||
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-menu {
|
||||
background: #FFFFFF;
|
||||
margin: 0 20rpx;
|
||||
border-radius: 16rpx;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.skeleton-menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 28rpx 24rpx;
|
||||
}
|
||||
|
||||
.skeleton-menu-icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
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;
|
||||
margin-right: 16rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.skeleton-menu-text {
|
||||
flex: 1;
|
||||
height: 28rpx;
|
||||
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-menu-arrow {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
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;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@keyframes loading {
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<view class="withdraw-success-container">
|
||||
<!-- 提现成功内容 -->
|
||||
<view class="success-content">
|
||||
<!-- 标题 -->
|
||||
<text class="success-title">提现成功</text>
|
||||
|
||||
<!-- 金额 -->
|
||||
<text class="amount">¥6.88</text>
|
||||
|
||||
<!-- 提示文字 -->
|
||||
<text class="hint-text">可在"微信支付-服务-钱包-账单"查看明细</text>
|
||||
</view>
|
||||
<!-- 返回按钮 -->
|
||||
<view class="" style="position: fixed; width: 100%; bottom: 200rpx; left: 0; padding: 0 100rpx; " >
|
||||
<u-button :custom-style="contactButtonStyle" type="default" :text="'返回活动页'" @click="backToActivity"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { ref } from 'vue';
|
||||
|
||||
|
||||
|
||||
// 页面加载
|
||||
onLoad((options : any) => {
|
||||
console.log('提现成功页面加载成功', options)
|
||||
})
|
||||
|
||||
// 按钮样式
|
||||
const contactButtonStyle = ref({
|
||||
backgroundColor: '#FF6600',
|
||||
borderColor: '#FF6600',
|
||||
color: '#FFFFFF',
|
||||
fontSize: '28rpx',
|
||||
height: '75rpx',
|
||||
borderRadius: '10rpx',
|
||||
});
|
||||
|
||||
// 返回活动页
|
||||
const backToActivity = () => {
|
||||
// 这里可以根据实际需求返回指定页面
|
||||
uni.navigateBack({
|
||||
delta: 1,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.withdraw-success-container {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.success-content {
|
||||
margin-top: 100rpx;
|
||||
width: 100%;
|
||||
max-width: 500rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 30rpx;
|
||||
}
|
||||
|
||||
.success-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-size: 48rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.hint-text {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
line-height: 36rpx;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
font-size: 28rpx;
|
||||
background-color: #f5f5f5;
|
||||
color: #333;
|
||||
margin-top: 60rpx;
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@media (max-width: 750rpx) {
|
||||
.success-content {
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.success-title {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-size: 44rpx;
|
||||
}
|
||||
|
||||
.hint-text {
|
||||
font-size: 22rpx;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
height: 72rpx;
|
||||
font-size: 26rpx;
|
||||
margin-top: 48rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,82 @@
|
||||
{
|
||||
"id": "uni-scss",
|
||||
"displayName": "uni-scss 辅助样式",
|
||||
"version": "1.0.3",
|
||||
"description": "uni-sass是uni-ui提供的一套全局样式 ，通过一些简单的类名和sass变量，实现简单的页面布局操作，比如颜色、边距、圆角等。",
|
||||
"keywords": [
|
||||
"uni-scss",
|
||||
"uni-ui",
|
||||
"辅助样式"
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"JS SDK",
|
||||
"通用 SDK"
|
||||
],
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "u"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "n",
|
||||
"联盟": "n"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import { Service } from '@/Service/Service';
|
||||
/*****优惠券*****/
|
||||
class vpDiscountService {
|
||||
private static GetUserDiscountListPath : string = '/Discount/GetUserDiscountList';
|
||||
/*****优惠券*****/
|
||||
static GetUserDiscountList(type:number,page:number) {
|
||||
var result = Service.Request(this.GetUserDiscountListPath, 'GET', {type,page});
|
||||
return result;
|
||||
}
|
||||
|
||||
}
|
||||
export { Service, vpDiscountService };
|
||||
@@ -0,0 +1,807 @@
|
||||
<template>
|
||||
<view class="index-page">
|
||||
<!-- 页面整体加载状态 -->
|
||||
<view v-if="loding" class="page-loading">
|
||||
<!-- 固定顶部区域 -->
|
||||
<view class="top-fixed">
|
||||
<view v-if="!isZFB" class="status-bar-placeholder"></view>
|
||||
<view class="top-section-fixed" :style="{ 'padding':isZFB?'30rpx 20rpx 28rpx':'65rpx 20rpx 28rpx' }" >
|
||||
<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 v-if="!isZFB" class="status-bar-placeholder"></view>
|
||||
<view class="top-section-fixed" :style="{ 'padding':isZFB?'30rpx 20rpx 28rpx':'65rpx 20rpx 28rpx' }" >
|
||||
<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-zfb':isZFB ,'top-placeholder':!isZFB }"></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'
|
||||
import { inject } from 'vue';
|
||||
const isZFB = inject('isZFB');
|
||||
// 数据
|
||||
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(()=>{
|
||||
if (!Service.GetUserToken()) {
|
||||
login()
|
||||
return
|
||||
}
|
||||
})
|
||||
|
||||
// 分享
|
||||
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()
|
||||
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%;
|
||||
}
|
||||
|
||||
.top-placeholder-zfb{
|
||||
height: calc(var(--status-bar-height) + 90rpx );
|
||||
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