|
|
|
@ -1,879 +1,25 @@ |
|
|
|
<template> |
|
|
|
<view class="pending-page" :class="{'store-scene': isStoreScene}"> |
|
|
|
<view class="pending-fixed"> |
|
|
|
<view class="nav-row"> |
|
|
|
<view class="back-btn" @tap="back"> |
|
|
|
<uni-icons type="left" size="28" :color="searchIconColor"></uni-icons> |
|
|
|
</view> |
|
|
|
<view class="nav-title">加入立即省钱</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="tab-card"> |
|
|
|
<view class="tab-item" v-for="item in tabs" :key="item.scene" |
|
|
|
:class="{'tab-item-active': scene === item.scene}" @tap="switchScene(item.scene)"> |
|
|
|
<text>{{item.label}}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="search-row"> |
|
|
|
<view class="search-card"> |
|
|
|
<view class="search-box"> |
|
|
|
<uni-icons type="search" size="18" :color="searchIconColor"></uni-icons> |
|
|
|
<input type="text" v-model="query.keyWord" confirm-type="search" placeholder="搜索商品或商家" |
|
|
|
@confirm="searchGroup" /> |
|
|
|
<view class="search-btn" @tap="searchGroup">搜索</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="seckill-entry" @tap="goSeckillGroup"> |
|
|
|
<view class="heat-dot heat-dot-a"></view> |
|
|
|
<view class="heat-dot heat-dot-b"></view> |
|
|
|
<view class="seckill-entry-light"></view> |
|
|
|
<view class="seckill-entry-info"> |
|
|
|
<view class="seckill-entry-title">秒杀团</view> |
|
|
|
</view> |
|
|
|
<view class="seckill-entry-btn">抢</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="hero-holder"></view> |
|
|
|
|
|
|
|
<view class="list-wrap"> |
|
|
|
<view class="empty-card" v-if="groupList.length === 0 && loadStatus !== 'loading'"> |
|
|
|
<view class="empty-icon">拼</view> |
|
|
|
<view class="empty-title">暂时没有待成团</view> |
|
|
|
<view class="empty-sub">换个关键词试试，或者稍后再来看看同学们的新团</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="group-card" v-for="(item,index) in groupList" :key="item.id" @tap="joinGroup(item)"> |
|
|
|
<view class="rank-pill">热拼 {{index + 1}}</view> |
|
|
|
<view class="shop-row"> |
|
|
|
<view class="shop-img"> |
|
|
|
<image :src="item.uiShopIcon" mode="aspectFill"></image> |
|
|
|
<view class="scene-mark">{{isStoreScene ? '团' : '饭'}}</view> |
|
|
|
</view> |
|
|
|
<view class="shop-info"> |
|
|
|
<view class="shop-name">{{item.uiShopName}}</view> |
|
|
|
<view class="product-name">{{item.uiProductName}}</view> |
|
|
|
<view class="tag-row"> |
|
|
|
<text>{{item.uiShopType}}</text> |
|
|
|
<text>{{item.uiTargetMembers}}人成团</text> |
|
|
|
<text>还差{{item.uiMissingMembers}}人</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="product-row"> |
|
|
|
<image :src="item.uiProductImage" mode="aspectFill"></image> |
|
|
|
<view class="product-copy"> |
|
|
|
<view class="price-row"> |
|
|
|
<text class="group-label">拼团价</text> |
|
|
|
<text class="price">¥{{item.uiGroupPrice}}</text> |
|
|
|
</view> |
|
|
|
<view class="progress-bar"> |
|
|
|
<view class="progress-inner" :style="item.uiProgressStyle"></view> |
|
|
|
</view> |
|
|
|
<view class="progress-copy">{{item.uiCurrentMembers}}人已拼 · 点击参与这一团</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="card-bottom"> |
|
|
|
<view class="time-copy">{{item.uiExpireText}}</view> |
|
|
|
<view class="join-btn">{{isStoreScene ? '参与到店团' : '参与拼饭局'}}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<uni-load-more :status="loadStatus" v-if="groupList.length > 0" /> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<home-group-pending ref="pendingPanel" :embedded="false" /> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { requireLoginToCurrentPage } from '@/utils/authRedirect.js' |
|
|
|
import homeGroupPending from '@/components/tab-bar/homeGroupPending.vue' |
|
|
|
|
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
scene: 'takeaway', |
|
|
|
tabs: [{ |
|
|
|
label: '饭团', |
|
|
|
scene: 'takeaway' |
|
|
|
}, { |
|
|
|
label: '团购', |
|
|
|
scene: 'storeGroup' |
|
|
|
}], |
|
|
|
loadStatus: 'more', |
|
|
|
navPaddingStyle: '', |
|
|
|
totalPages: 1, |
|
|
|
query: { |
|
|
|
regionId: '', |
|
|
|
status: 0, |
|
|
|
isFace: 0, |
|
|
|
merchantType: 1, |
|
|
|
pageNumber: 1, |
|
|
|
pageSize: 10, |
|
|
|
keyWord: '' |
|
|
|
}, |
|
|
|
groupList: [] |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
isStoreScene() { |
|
|
|
return this.scene === 'storeGroup' |
|
|
|
}, |
|
|
|
searchIconColor() { |
|
|
|
return this.isStoreScene ? '#f0642f' : '#08735d' |
|
|
|
} |
|
|
|
components: { |
|
|
|
homeGroupPending |
|
|
|
}, |
|
|
|
onLoad(option) { |
|
|
|
this.scene = this.normalizeScene(option && option.scene) |
|
|
|
this.query.merchantType = this.isStoreScene ? 2 : 1 |
|
|
|
this.initRegion() |
|
|
|
this.$nextTick(() => { |
|
|
|
if (this.$refs.pendingPanel && this.$refs.pendingPanel.init) { |
|
|
|
this.$refs.pendingPanel.init(option) |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
onReachBottom() { |
|
|
|
if (this.loadStatus === 'loading' || this.query.pageNumber >= this.totalPages) return |
|
|
|
this.query.pageNumber += 1 |
|
|
|
this.getGroupList() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
normalizeScene(scene) { |
|
|
|
return scene === 'storeGroup' ? 'storeGroup' : 'takeaway' |
|
|
|
}, |
|
|
|
initRegion() { |
|
|
|
const area = uni.getStorageSync('area') |
|
|
|
if (!area) { |
|
|
|
this.tui.toast('请先选择区域') |
|
|
|
return |
|
|
|
} |
|
|
|
try { |
|
|
|
const areaInfo = typeof area === 'string' ? JSON.parse(area) : area |
|
|
|
this.query.regionId = areaInfo.id || '' |
|
|
|
} catch (e) { |
|
|
|
this.query.regionId = '' |
|
|
|
} |
|
|
|
if (!this.query.regionId) { |
|
|
|
this.tui.toast('请先选择区域') |
|
|
|
return |
|
|
|
} |
|
|
|
this.getGroupList() |
|
|
|
}, |
|
|
|
searchGroup() { |
|
|
|
this.query.pageNumber = 1 |
|
|
|
this.totalPages = 1 |
|
|
|
this.groupList = [] |
|
|
|
this.getGroupList() |
|
|
|
}, |
|
|
|
switchScene(scene) { |
|
|
|
const nextScene = this.normalizeScene(scene) |
|
|
|
if (this.scene === nextScene) return |
|
|
|
this.scene = nextScene |
|
|
|
this.query.merchantType = this.isStoreScene ? 2 : 1 |
|
|
|
this.query.keyWord = '' |
|
|
|
this.query.pageNumber = 1 |
|
|
|
this.totalPages = 1 |
|
|
|
this.groupList = [] |
|
|
|
this.loadStatus = 'more' |
|
|
|
this.getGroupList() |
|
|
|
}, |
|
|
|
getGroupList() { |
|
|
|
if (!this.query.regionId) return |
|
|
|
this.loadStatus = 'loading' |
|
|
|
this.tui.request('/mall/admin/orderGroup/page', 'POST', this.query, false, false).then((res) => { |
|
|
|
if (res.code == 200) { |
|
|
|
const result = res.result || {} |
|
|
|
const list = Array.isArray(result.records) ? result.records.map(item => this.formatGroupItem(item)) : [] |
|
|
|
if (this.query.pageNumber === 1) { |
|
|
|
this.groupList = list |
|
|
|
} else { |
|
|
|
this.groupList = [...this.groupList, ...list] |
|
|
|
} |
|
|
|
this.totalPages = result.pages || result.totalPages || 1 |
|
|
|
this.loadStatus = this.query.pageNumber >= this.totalPages ? 'nomore' : 'more' |
|
|
|
} else { |
|
|
|
this.loadStatus = 'nomore' |
|
|
|
this.tui.toast(res.message) |
|
|
|
} |
|
|
|
}).catch(() => { |
|
|
|
this.loadStatus = 'nomore' |
|
|
|
}) |
|
|
|
}, |
|
|
|
joinGroup(item) { |
|
|
|
if (!requireLoginToCurrentPage()) return |
|
|
|
const shopItem = item.shopItem || {} |
|
|
|
if (!shopItem.id) { |
|
|
|
this.tui.toast('商家信息缺失，暂时无法参团') |
|
|
|
return |
|
|
|
} |
|
|
|
const sceneQuery = this.isStoreScene ? '&orderScene=storeGroup' : '' |
|
|
|
const shopItemStr = encodeURIComponent(JSON.stringify(shopItem)) |
|
|
|
uni.navigateTo({ |
|
|
|
url: '/package2/group/groupBuySingle?type=shop&item=' + shopItemStr + |
|
|
|
'&groupId=' + item.id + |
|
|
|
'&targetMembers=' + (item.targetMembers || 2) + |
|
|
|
'&isFaceToFace=0' + sceneQuery |
|
|
|
}) |
|
|
|
}, |
|
|
|
goSeckillGroup() { |
|
|
|
if (!requireLoginToCurrentPage()) return |
|
|
|
uni.navigateTo({ |
|
|
|
url: '/package3/seckill/seckillGroup' |
|
|
|
}) |
|
|
|
}, |
|
|
|
getShopIcon(item) { |
|
|
|
return (item.shopItem && item.shopItem.shopIcon) || item.productPicture || '/static/images/img/shangpintu.png' |
|
|
|
}, |
|
|
|
formatGroupItem(item) { |
|
|
|
return { |
|
|
|
...item, |
|
|
|
uiShopIcon: this.getShopIcon(item), |
|
|
|
uiProductImage: item.productPicture || this.getShopIcon(item), |
|
|
|
uiShopName: this.getShopName(item), |
|
|
|
uiProductName: item.productName || '同学发起的拼团', |
|
|
|
uiShopType: this.getShopType(item), |
|
|
|
uiTargetMembers: item.targetMembers || 2, |
|
|
|
uiCurrentMembers: item.currentMembers || 0, |
|
|
|
uiMissingMembers: this.missingMembers(item), |
|
|
|
uiGroupPrice: this.formatPrice(item.groupPrice), |
|
|
|
uiExpireText: this.formatExpireText(item), |
|
|
|
uiProgressStyle: this.buildProgressStyle(item) |
|
|
|
} |
|
|
|
}, |
|
|
|
getShopName(item) { |
|
|
|
return (item.shopItem && item.shopItem.shopName) || item.shopName || '未知商家' |
|
|
|
}, |
|
|
|
getShopType(item) { |
|
|
|
const shopItem = item.shopItem || {} |
|
|
|
return shopItem.shopTypeTitle || (shopItem.shopTakeaway && shopItem.shopTakeaway.type) || (this.isStoreScene ? '团购' : '美食') |
|
|
|
}, |
|
|
|
missingMembers(item) { |
|
|
|
const target = Number(item.targetMembers || 2) |
|
|
|
const current = Number(item.currentMembers || 0) |
|
|
|
return Math.max(target - current, 0) |
|
|
|
}, |
|
|
|
buildProgressStyle(item) { |
|
|
|
const target = Number(item.targetMembers || 2) |
|
|
|
const current = Number(item.currentMembers || 0) |
|
|
|
const percent = target > 0 ? Math.min(100, Math.max(12, Math.round(current / target * 100))) : 12 |
|
|
|
return 'width: ' + percent + '%;' |
|
|
|
}, |
|
|
|
formatPrice(price) { |
|
|
|
const num = Number(price || 0) |
|
|
|
return num ? num.toFixed(2) : '--' |
|
|
|
}, |
|
|
|
formatExpireText(item) { |
|
|
|
if (!item.expireTime) return '24小时内成团' |
|
|
|
const expire = new Date(item.expireTime).getTime() |
|
|
|
const diff = expire - Date.now() |
|
|
|
if (isNaN(expire) || diff <= 0) return '即将结束' |
|
|
|
const hours = Math.floor(diff / 3600000) |
|
|
|
const minutes = Math.floor((diff % 3600000) / 60000) |
|
|
|
return hours > 0 ? '剩余约' + hours + '小时' + minutes + '分' : '剩余约' + minutes + '分' |
|
|
|
}, |
|
|
|
back() { |
|
|
|
uni.navigateBack() |
|
|
|
if (this.$refs.pendingPanel && this.$refs.pendingPanel.loadMore) { |
|
|
|
this.$refs.pendingPanel.loadMore() |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.pending-page { |
|
|
|
min-height: 100vh; |
|
|
|
padding-bottom: 140rpx; |
|
|
|
background: |
|
|
|
radial-gradient(circle at 12% 8%, rgba(197, 255, 153, 0.5), transparent 34%), |
|
|
|
radial-gradient(circle at 90% 18%, rgba(175, 255, 231, 0.48), transparent 36%), |
|
|
|
linear-gradient(180deg, #f6ffea 0%, #f7fff9 42%, #fff9ef 100%); |
|
|
|
color: #06382f; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
.store-scene { |
|
|
|
background: |
|
|
|
radial-gradient(circle at 82% 120rpx, rgba(255, 241, 210, 0.86) 0, rgba(255, 241, 210, 0) 260rpx), |
|
|
|
radial-gradient(circle at 10% 260rpx, rgba(255, 190, 185, 0.3) 0, rgba(255, 190, 185, 0) 240rpx), |
|
|
|
linear-gradient(180deg, #ffd0b8 0%, #ffe6d6 260rpx, #fff7ef 560rpx, #fffaf6 100%); |
|
|
|
color: #3f2618; |
|
|
|
} |
|
|
|
|
|
|
|
.pending-fixed { |
|
|
|
width: 100%; |
|
|
|
position: fixed; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
z-index: 1000; |
|
|
|
padding: 88rpx 26rpx 22rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
background: rgba(247, 255, 249, 0.94); |
|
|
|
box-shadow: 0 12rpx 30rpx rgba(20, 115, 88, 0.08); |
|
|
|
backdrop-filter: blur(18rpx); |
|
|
|
} |
|
|
|
|
|
|
|
.store-scene .pending-fixed { |
|
|
|
background: rgba(255, 249, 243, 0.96); |
|
|
|
box-shadow: 0 12rpx 30rpx rgba(178, 102, 48, 0.1); |
|
|
|
} |
|
|
|
|
|
|
|
.hero-holder { |
|
|
|
width: 100%; |
|
|
|
height: 396rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.nav-row { |
|
|
|
position: relative; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
height: 64rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.back-btn { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
width: 64rpx; |
|
|
|
height: 64rpx; |
|
|
|
border-radius: 999rpx; |
|
|
|
background: rgba(255, 255, 255, 0.96); |
|
|
|
border: 1rpx solid rgba(255, 255, 255, 0.82); |
|
|
|
box-shadow: 0 8rpx 18rpx rgba(0, 45, 29, 0.08); |
|
|
|
box-sizing: border-box; |
|
|
|
flex-shrink: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.nav-title { |
|
|
|
position: absolute; |
|
|
|
left: 50%; |
|
|
|
width: 220rpx; |
|
|
|
height: 64rpx; |
|
|
|
color: #073d33; |
|
|
|
font-size: 34rpx; |
|
|
|
font-weight: 900; |
|
|
|
line-height: 64rpx; |
|
|
|
text-align: center; |
|
|
|
transform: translateX(-50%); |
|
|
|
white-space: nowrap; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
} |
|
|
|
|
|
|
|
.store-scene .nav-title { |
|
|
|
color: #3f2618; |
|
|
|
} |
|
|
|
|
|
|
|
.tab-card { |
|
|
|
display: flex; |
|
|
|
height: 76rpx; |
|
|
|
margin-top: 24rpx; |
|
|
|
padding: 8rpx; |
|
|
|
border-radius: 999rpx; |
|
|
|
background: rgba(255, 255, 255, 0.72); |
|
|
|
box-shadow: inset 0 0 0 1rpx rgba(255, 255, 255, 0.82); |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
.tab-item { |
|
|
|
flex: 1; |
|
|
|
height: 60rpx; |
|
|
|
border-radius: 999rpx; |
|
|
|
color: rgba(7, 61, 51, 0.56); |
|
|
|
font-size: 27rpx; |
|
|
|
font-weight: 900; |
|
|
|
line-height: 60rpx; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
.tab-item-active { |
|
|
|
background: linear-gradient(90deg, #dcff9c, #baffec); |
|
|
|
color: #08735d; |
|
|
|
box-shadow: 0 10rpx 24rpx rgba(13, 114, 82, 0.14); |
|
|
|
} |
|
|
|
|
|
|
|
.store-scene .tab-item { |
|
|
|
color: rgba(84, 43, 22, 0.56); |
|
|
|
} |
|
|
|
|
|
|
|
.store-scene .tab-item-active { |
|
|
|
background: linear-gradient(135deg, #ff7444 0%, #ffae53 100%); |
|
|
|
color: #fff; |
|
|
|
box-shadow: 0 10rpx 24rpx rgba(255, 126, 39, 0.2); |
|
|
|
} |
|
|
|
|
|
|
|
.search-row { |
|
|
|
width: 100%; |
|
|
|
margin: 18rpx auto 0; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.search-card { |
|
|
|
flex: 1; |
|
|
|
min-width: 0; |
|
|
|
margin-right: 14rpx; |
|
|
|
height: 60rpx; |
|
|
|
padding: 0; |
|
|
|
border-radius: 999rpx; |
|
|
|
background: rgba(255, 255, 255, 0.76); |
|
|
|
box-shadow: 0 18rpx 42rpx rgba(20, 115, 88, 0.12); |
|
|
|
box-sizing: border-box; |
|
|
|
position: relative; |
|
|
|
z-index: 3; |
|
|
|
} |
|
|
|
|
|
|
|
.store-scene .search-card { |
|
|
|
box-shadow: 0 18rpx 42rpx rgba(178, 102, 48, 0.12); |
|
|
|
} |
|
|
|
|
|
|
|
.search-box { |
|
|
|
height: 60rpx; |
|
|
|
padding: 0 12rpx; |
|
|
|
border-radius: 999rpx; |
|
|
|
background: #fff; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.search-box input { |
|
|
|
flex: 1; |
|
|
|
min-width: 0; |
|
|
|
height: 60rpx; |
|
|
|
margin-left: 10rpx; |
|
|
|
font-size: 22rpx; |
|
|
|
color: #243d36; |
|
|
|
} |
|
|
|
|
|
|
|
.search-btn { |
|
|
|
width: 74rpx; |
|
|
|
height: 38rpx; |
|
|
|
border-radius: 999rpx; |
|
|
|
background: linear-gradient(90deg, #dcff9c, #baffec); |
|
|
|
color: #08735d; |
|
|
|
font-size: 20rpx; |
|
|
|
font-weight: 900; |
|
|
|
line-height: 38rpx; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
.store-scene .search-btn { |
|
|
|
background: linear-gradient(135deg, #ff7444 0%, #ffae53 100%); |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
|
|
|
|
.seckill-entry { |
|
|
|
width: 172rpx; |
|
|
|
height: 60rpx; |
|
|
|
padding: 0 10rpx; |
|
|
|
border-radius: 999rpx; |
|
|
|
border: 1rpx solid rgba(255, 255, 255, 0.52); |
|
|
|
background: |
|
|
|
radial-gradient(circle at 18% 4%, rgba(255, 255, 255, 0.55) 0, rgba(255, 255, 255, 0) 76rpx), |
|
|
|
linear-gradient(135deg, #ff4b27 0%, #ff8b18 48%, #ffd257 100%); |
|
|
|
box-shadow: 0 16rpx 30rpx rgba(255, 91, 39, 0.24), 0 0 40rpx rgba(255, 188, 80, 0.26); |
|
|
|
box-sizing: border-box; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
flex-shrink: 0; |
|
|
|
position: relative; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
.seckill-entry:active { |
|
|
|
transform: scale(0.96); |
|
|
|
} |
|
|
|
|
|
|
|
.seckill-entry-light { |
|
|
|
width: 190rpx; |
|
|
|
height: 120rpx; |
|
|
|
background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.76) 46%, rgba(255, 255, 255, 0) 100%); |
|
|
|
position: absolute; |
|
|
|
top: -20rpx; |
|
|
|
left: -220rpx; |
|
|
|
transform: rotate(12deg); |
|
|
|
animation: seckillEntrySweep 4.8s ease-in-out infinite; |
|
|
|
} |
|
|
|
|
|
|
|
.seckill-entry-info { |
|
|
|
flex: 1; |
|
|
|
min-width: 0; |
|
|
|
padding-left: 14rpx; |
|
|
|
position: relative; |
|
|
|
z-index: 1; |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
|
|
|
|
.seckill-entry-title { |
|
|
|
font-size: 26rpx; |
|
|
|
font-weight: 900; |
|
|
|
line-height: 60rpx; |
|
|
|
letter-spacing: 1rpx; |
|
|
|
text-shadow: 0 3rpx 8rpx rgba(183, 35, 0, 0.24); |
|
|
|
} |
|
|
|
|
|
|
|
.seckill-entry-btn { |
|
|
|
width: 42rpx; |
|
|
|
height: 42rpx; |
|
|
|
border-radius: 50%; |
|
|
|
background: #fff; |
|
|
|
color: #ff3d18; |
|
|
|
font-size: 24rpx; |
|
|
|
font-weight: 900; |
|
|
|
line-height: 42rpx; |
|
|
|
text-align: center; |
|
|
|
position: relative; |
|
|
|
z-index: 1; |
|
|
|
box-shadow: 0 8rpx 18rpx rgba(158, 32, 0, 0.22); |
|
|
|
animation: seckillBtnBeat 2.8s ease-in-out infinite; |
|
|
|
} |
|
|
|
|
|
|
|
.heat-dot { |
|
|
|
width: 12rpx; |
|
|
|
height: 12rpx; |
|
|
|
position: absolute; |
|
|
|
border-radius: 50%; |
|
|
|
background: rgba(255, 255, 255, 0.92); |
|
|
|
box-shadow: 0 0 16rpx rgba(255, 255, 255, 0.88); |
|
|
|
z-index: 1; |
|
|
|
animation: heatParticle 3.2s ease-in-out infinite; |
|
|
|
} |
|
|
|
|
|
|
|
.heat-dot-a { |
|
|
|
left: 28rpx; |
|
|
|
top: 18rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.heat-dot-b { |
|
|
|
right: 64rpx; |
|
|
|
bottom: 16rpx; |
|
|
|
animation-delay: 0.5s; |
|
|
|
} |
|
|
|
|
|
|
|
.list-wrap { |
|
|
|
width: 94%; |
|
|
|
margin: 0 auto; |
|
|
|
position: relative; |
|
|
|
z-index: 1; |
|
|
|
} |
|
|
|
|
|
|
|
.empty-card, |
|
|
|
.group-card { |
|
|
|
border-radius: 34rpx; |
|
|
|
background: rgba(255, 255, 255, 0.86); |
|
|
|
box-shadow: 0 18rpx 44rpx rgba(19, 91, 70, 0.12); |
|
|
|
border: 1rpx solid rgba(255, 255, 255, 0.86); |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
.store-scene .empty-card, |
|
|
|
.store-scene .group-card { |
|
|
|
box-shadow: 0 16rpx 34rpx rgba(178, 102, 48, 0.12); |
|
|
|
border-color: rgba(255, 221, 188, 0.72); |
|
|
|
} |
|
|
|
|
|
|
|
.empty-card { |
|
|
|
min-height: 460rpx; |
|
|
|
padding-top: 110rpx; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
.empty-icon { |
|
|
|
width: 100rpx; |
|
|
|
height: 100rpx; |
|
|
|
margin: 0 auto 22rpx; |
|
|
|
border-radius: 34rpx; |
|
|
|
background: linear-gradient(135deg, #e8ffb8, #b8ffe9); |
|
|
|
color: #08735d; |
|
|
|
font-size: 34rpx; |
|
|
|
font-weight: 900; |
|
|
|
line-height: 100rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.store-scene .empty-icon { |
|
|
|
background: linear-gradient(135deg, #ff9a72 0%, #ffd38a 100%); |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
|
|
|
|
.empty-title { |
|
|
|
font-size: 30rpx; |
|
|
|
font-weight: 900; |
|
|
|
} |
|
|
|
|
|
|
|
.empty-sub { |
|
|
|
width: 78%; |
|
|
|
margin: 14rpx auto 0; |
|
|
|
color: rgba(0, 35, 28, 0.56); |
|
|
|
font-size: 24rpx; |
|
|
|
line-height: 38rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.group-card { |
|
|
|
margin-bottom: 22rpx; |
|
|
|
padding: 20rpx 18rpx 18rpx; |
|
|
|
position: relative; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
.rank-pill { |
|
|
|
position: absolute; |
|
|
|
right: 18rpx; |
|
|
|
top: 18rpx; |
|
|
|
z-index: 2; |
|
|
|
padding: 5rpx 13rpx; |
|
|
|
border-radius: 999rpx; |
|
|
|
background: rgba(219, 255, 157, 0.72); |
|
|
|
color: #08735d; |
|
|
|
font-size: 18rpx; |
|
|
|
font-weight: 900; |
|
|
|
} |
|
|
|
|
|
|
|
.store-scene .rank-pill { |
|
|
|
background: #fff0dc; |
|
|
|
color: #e96632; |
|
|
|
} |
|
|
|
|
|
|
|
.shop-row { |
|
|
|
display: flex; |
|
|
|
} |
|
|
|
|
|
|
|
.shop-img { |
|
|
|
width: 168rpx; |
|
|
|
height: 168rpx; |
|
|
|
flex-shrink: 0; |
|
|
|
border-radius: 30rpx; |
|
|
|
overflow: hidden; |
|
|
|
position: relative; |
|
|
|
background: #f4fff3; |
|
|
|
box-shadow: 0 14rpx 28rpx rgba(20, 75, 57, 0.14); |
|
|
|
} |
|
|
|
|
|
|
|
.shop-img image { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.scene-mark { |
|
|
|
width: 42rpx; |
|
|
|
height: 42rpx; |
|
|
|
border-radius: 50%; |
|
|
|
background: rgba(255, 255, 255, 0.92); |
|
|
|
color: #ff5a35; |
|
|
|
font-size: 22rpx; |
|
|
|
font-weight: 900; |
|
|
|
line-height: 42rpx; |
|
|
|
text-align: center; |
|
|
|
position: absolute; |
|
|
|
left: 10rpx; |
|
|
|
top: 10rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.shop-info { |
|
|
|
flex: 1; |
|
|
|
min-width: 0; |
|
|
|
padding-left: 20rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
.shop-name { |
|
|
|
padding-right: 92rpx; |
|
|
|
font-size: 33rpx; |
|
|
|
line-height: 42rpx; |
|
|
|
font-weight: 900; |
|
|
|
white-space: nowrap; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
} |
|
|
|
|
|
|
|
.product-name { |
|
|
|
margin-top: 10rpx; |
|
|
|
color: rgba(0, 35, 28, 0.58); |
|
|
|
font-size: 24rpx; |
|
|
|
line-height: 34rpx; |
|
|
|
white-space: nowrap; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
} |
|
|
|
|
|
|
|
.store-scene .product-name { |
|
|
|
color: #876247; |
|
|
|
} |
|
|
|
|
|
|
|
.tag-row { |
|
|
|
margin-top: 16rpx; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
.tag-row text { |
|
|
|
display: inline-block; |
|
|
|
margin: 0 8rpx 8rpx 0; |
|
|
|
padding: 5rpx 10rpx; |
|
|
|
border-radius: 12rpx; |
|
|
|
background: rgba(184, 255, 225, 0.62); |
|
|
|
color: #08735d; |
|
|
|
font-size: 20rpx; |
|
|
|
font-weight: 900; |
|
|
|
} |
|
|
|
|
|
|
|
.store-scene .tag-row text { |
|
|
|
background: #fff0dc; |
|
|
|
color: #d65f2c; |
|
|
|
} |
|
|
|
|
|
|
|
.product-row { |
|
|
|
margin-top: 18rpx; |
|
|
|
padding: 14rpx; |
|
|
|
border-radius: 26rpx; |
|
|
|
background: rgba(255, 250, 237, 0.72); |
|
|
|
display: flex; |
|
|
|
} |
|
|
|
|
|
|
|
.store-scene .product-row { |
|
|
|
background: #fff7ee; |
|
|
|
} |
|
|
|
|
|
|
|
.product-row image { |
|
|
|
width: 110rpx; |
|
|
|
height: 110rpx; |
|
|
|
border-radius: 22rpx; |
|
|
|
background: #fff; |
|
|
|
flex-shrink: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.product-copy { |
|
|
|
flex: 1; |
|
|
|
min-width: 0; |
|
|
|
padding-left: 16rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
.price-row { |
|
|
|
height: 42rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.group-label { |
|
|
|
margin-right: 10rpx; |
|
|
|
padding: 4rpx 9rpx; |
|
|
|
border-radius: 10rpx; |
|
|
|
background: #fff0dc; |
|
|
|
color: #b4572d; |
|
|
|
font-size: 19rpx; |
|
|
|
font-weight: 900; |
|
|
|
} |
|
|
|
|
|
|
|
.price { |
|
|
|
color: #f0441f; |
|
|
|
font-size: 30rpx; |
|
|
|
font-weight: 900; |
|
|
|
} |
|
|
|
|
|
|
|
.progress-bar { |
|
|
|
height: 14rpx; |
|
|
|
margin-top: 16rpx; |
|
|
|
border-radius: 999rpx; |
|
|
|
background: rgba(214, 239, 210, 0.8); |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
.progress-inner { |
|
|
|
height: 100%; |
|
|
|
border-radius: 999rpx; |
|
|
|
background: linear-gradient(90deg, #a6ffea 0%, #e3ff96 100%); |
|
|
|
} |
|
|
|
|
|
|
|
.store-scene .progress-inner { |
|
|
|
background: linear-gradient(90deg, #ff7444 0%, #ffd16e 100%); |
|
|
|
} |
|
|
|
|
|
|
|
.progress-copy { |
|
|
|
margin-top: 10rpx; |
|
|
|
color: rgba(0, 35, 28, 0.52); |
|
|
|
font-size: 21rpx; |
|
|
|
font-weight: 800; |
|
|
|
} |
|
|
|
|
|
|
|
.store-scene .progress-copy { |
|
|
|
color: #8f715b; |
|
|
|
} |
|
|
|
|
|
|
|
.card-bottom { |
|
|
|
height: 58rpx; |
|
|
|
margin-top: 16rpx; |
|
|
|
padding-top: 12rpx; |
|
|
|
border-top: 1rpx solid rgba(20, 90, 70, 0.08); |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.time-copy { |
|
|
|
flex: 1; |
|
|
|
color: rgba(0, 35, 28, 0.58); |
|
|
|
font-size: 22rpx; |
|
|
|
font-weight: 800; |
|
|
|
} |
|
|
|
|
|
|
|
.store-scene .time-copy { |
|
|
|
color: #8f715b; |
|
|
|
} |
|
|
|
|
|
|
|
.join-btn { |
|
|
|
width: 160rpx; |
|
|
|
height: 50rpx; |
|
|
|
border-radius: 999rpx; |
|
|
|
background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1)); |
|
|
|
color: #08735d; |
|
|
|
font-size: 24rpx; |
|
|
|
font-weight: 900; |
|
|
|
line-height: 50rpx; |
|
|
|
text-align: center; |
|
|
|
box-shadow: 0 12rpx 24rpx rgba(13, 114, 82, 0.16); |
|
|
|
} |
|
|
|
|
|
|
|
.store-scene .join-btn { |
|
|
|
background: linear-gradient(135deg, #ff7444 0%, #ff9f38 100%); |
|
|
|
color: #fff; |
|
|
|
box-shadow: 0 12rpx 24rpx rgba(255, 126, 39, 0.24); |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes seckillEntrySweep { |
|
|
|
0% { |
|
|
|
left: -220rpx; |
|
|
|
opacity: 0; |
|
|
|
} |
|
|
|
|
|
|
|
38% { |
|
|
|
opacity: 0; |
|
|
|
} |
|
|
|
|
|
|
|
58% { |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
|
|
|
|
100% { |
|
|
|
left: 220rpx; |
|
|
|
opacity: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes seckillBtnBeat { |
|
|
|
0%, |
|
|
|
100% { |
|
|
|
transform: scale(1); |
|
|
|
} |
|
|
|
|
|
|
|
50% { |
|
|
|
transform: scale(1.1); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes heatParticle { |
|
|
|
0%, |
|
|
|
100% { |
|
|
|
opacity: 0.5; |
|
|
|
transform: translateY(0) scale(1); |
|
|
|
} |
|
|
|
|
|
|
|
50% { |
|
|
|
opacity: 1; |
|
|
|
transform: translateY(-6rpx) scale(1.2); |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
wangfukang
2 weeks ago