root
/
school_uni
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

1

master
wangfukang 1 month ago
parent
69a3df7d40
commit
a49667cde5
1 changed files with 167 additions and 111 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 272
      pages/index/index.vue

272
pages/index/index.vue
View File

@ -1,10 +1,10 @@
<template>
<view class="page1" :class="{'is-sticky': lastScrollTop>583}">
<view class="page1" :class="{'is-sticky': lastScrollTop>stickyTrigger}">
<view class="swiper-container">
<view class="swiper-page" v-if="currentIndex == 0">
<view style="position: relative;height: 545rpx;">
<view style="width:100%;height: 260rpx;position: fixed;top: 0;background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;z-index: 90;"
v-if="lastScrollTop>583"></view>
v-if="lastScrollTop>stickyTrigger"></view>
<view class="campus-hero campus-hero--ad">
<swiper class="swiper hero-bg-swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
:interval="interval" :duration="duration">
@ -135,30 +135,21 @@
</view>
</view>
<view class="like-box">
<view class="like-head" style="position: relative;">
<view class="like-title">
<img @tap="pageshow" src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/e0c44bc9b69a46559d3aa4160d3cf4a5.png"
alt="" />
<view class="like-content-box">
<view class="brand-memory-strip">
<text>省钱榜 Top1</text>
<text>爆款指数 ↑</text>
<text>拼团王在线</text>
</view>
<view class="seckill-entry" @tap="goSeckillGroup">
<view class="seckill-entry seckill-entry--in-card" @tap="goSeckillGroup" style="margin-bottom: 10rpx;">
<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" style="padding-left: 20rpx;">
<view class="seckill-entry-title">秒杀团</view>
<view class="seckill-entry-sub">速速加入，就等你啦！</view>
</view>
<view class="seckill-entry-btn">抢</view>
</view>
</view>
<view class="like-content-box">
<view class="brand-memory-strip">
<text>热闹值 {{88 + waimaiCount}}</text>
<text>省钱榜 Top1</text>
<text>爆款指数 ↑</text>
<text>拼团王在线</text>
</view>
<view class="group-orbit group-orbit-a"></view>
<view class="group-orbit group-orbit-b"></view>
<view class="like-left like-world-left">
@ -166,8 +157,8 @@
<view style="width: 100%;font-weight: 700;">食堂星球热拼</view>
<image class="like-hot-gif" src="/static/images/img/loading.gif" mode="aspectFit"></image>
<img src="/static/images/img/yousanjiao.png" alt=""
style="width: 28rpx;height: 28rpx;position: absolute;top: 20rpx;right: 12rpx;padding-bottom: 10rpx;">
<!-- <img src="/static/images/img/yousanjiao.png" alt=""
style="width: 28rpx;height: 28rpx;position: absolute;top: 20rpx;right: 12rpx;padding-bottom: 10rpx;"> -->
</view>
<view class="like-content">
<view class="content-list" v-if="item.position == 'home_center_left_top' "
@ -215,8 +206,8 @@
<view style="font-weight: 700;">宿舍搭子开团</view>
<image class="like-hot-gif" src="/static/images/img/loading.gif" mode="aspectFit"></image>
<img src="/static/images/img/yousanjiao.png" alt=""
style="width: 28rpx;height: 28rpx;position: absolute;top: 20rpx;right: 12rpx;padding-bottom: 10rpx;">
<!-- <img src="/static/images/img/yousanjiao.png" alt=""
style="width: 28rpx;height: 28rpx;position: absolute;top: 20rpx;right: 12rpx;padding-bottom: 10rpx;"> -->
</view>
<view class="like-content">
<view class="content-list" v-if="item.position == 'home_center_right_top' "
@ -262,7 +253,12 @@
</view>
</view>
<view class="daimai-box" style="padding-bottom:180rpx;">
<view class="daimai-tab" id="menuList" :class="{'daimai-tab--sticky': lastScrollTop>583}"
<view class="earn-guide">
<view class="earn-guide-light"></view>
<text class="earn-guide-main">顺路送几单，挣点零花钱</text>
<text class="earn-guide-tag">接受直接购买指派单额外有佣金哦</text>
</view>
<view class="daimai-tab" id="menuList" :class="{'daimai-tab--sticky': lastScrollTop>stickyTrigger}"
:style="{'top': (navBarHeight+46) + 'px'}">
<view class="daimai-tab-item" :class="{'active': checked == 'waimai'}"
@tap="checkTab1('waimai')">
@ -301,7 +297,7 @@
</view>
</view>
</view>
<view class="title-sort" v-if="(lastScrollTop>300 || getAreaData.id != undefined || putAreaData.id != undefined || checkYongjin)" :class="{'title-sort--sticky': lastScrollTop>583}"
<view class="title-sort" v-if="(lastScrollTop>300 || getAreaData.id != undefined || putAreaData.id != undefined || checkYongjin)" :class="{'title-sort--sticky': lastScrollTop>stickyTrigger}"
:style="{'top': (navBarHeight+90) + 'px'}">
<view class="sort-member" style="position: relative;">
<view @tap="checkAdd">
@ -376,9 +372,14 @@
</view>
<view class="list-1" v-for="(item,index) in deliveryItem" :key="index"
@tap="productDetail(item)">
<view class="daoda-time-row">
<view class="appointment-delivery-tag" v-if="item.appointmentDelivery == 1">
预约配送
</view>
<view class="daoda-time">
送达时间：{{item.mustFinishTime != null ? item.mustFinishTime : '' | formatHourMinute }}
</view>
</view>
<view class="order-page">
<view class="maotou" v-if="item.deliveryType == 1 && !item.workerId">
外卖
@ -773,6 +774,7 @@
checked: 'waimai',
navBarHeight: 0,
menuListOffsetTop: 0,
stickyTrigger: 583,
lastScrollTop: 0,
lastRefreshTime: 0,
worker: null,
@ -848,7 +850,7 @@
const minute = String(date.getMinutes()).padStart(2, '0');
// 拼接格式：日-日-时:分
return `${day}-${hour}:${minute}`;
return `${hour}:${minute}`;
},
delNode(data) {
// 1. 统一转为字符串
@ -882,9 +884,11 @@
}
}
this._scrollTopRaw = scrollTop;
// 模板里只关心 >300 / >583 两个布尔判断，所以把 lastScrollTop 阶段化：
// <300 → 0；300~583 → 400；>583 → 600，确保跨阶段时才触发一次 setData
const stage = scrollTop > 583 ? 600 : (scrollTop > 300 ? 400 : 0);
// 模板里只关心 >300 / >stickyTrigger 两个布尔判断，所以把 lastScrollTop 阶段化，
// 确保跨阶段时才触发一次 setData。
const stickyTrigger = this.stickyTrigger || 583;
const midStage = Math.min(400, stickyTrigger);
const stage = scrollTop > stickyTrigger ? stickyTrigger + 1 : (scrollTop > 300 ? midStage : 0);
if (stage !== this.lastScrollTop) {
this.lastScrollTop = stage;
}
@ -905,6 +909,9 @@
},
onShow() {
this.indexInit()
this.$nextTick(() => {
this.refreshDaimaiStickyPosition()
})
if (this.pendingTabIndex !== null) {
const tabIndex = this.pendingTabIndex
this.pendingTabIndex = null
@ -916,13 +923,19 @@
onReady() {
// 记录分类栏相对页面的偏移量，用于上滑检测
setTimeout(() => {
this.refreshDaimaiStickyPosition()
}, 500);
},
methods: {
refreshDaimaiStickyPosition() {
const query = uni.createSelectorQuery().in(this);
query.select('#menuList').boundingClientRect(rect => {
if (rect) this.menuListOffsetTop = rect.top + (this._scrollTopRaw || 0);
if (rect) {
this.menuListOffsetTop = rect.top + (this._scrollTopRaw || 0);
this.stickyTrigger = Math.max(360, this.menuListOffsetTop - this.navBarHeight - 46);
}
}).exec();
}, 500);
},
methods: {
hasLogin() {
const token = uni.getStorageSync('hiver_token')
return !!(token && typeof token === 'string' && token.trim() && token !== 'null' && token !== 'undefined')
@ -1762,10 +1775,9 @@
.page1.is-sticky .world-dot,
.page1.is-sticky .seckill-entry,
.page1.is-sticky .seckill-entry-light,
.page1.is-sticky .seckill-entry-sub,
.page1.is-sticky .seckill-entry-btn,
.page1.is-sticky .heat-dot,
.page1.is-sticky .brand-memory-strip text {
.page1.is-sticky .earn-guide-light {
animation-play-state: paused !important;
}
@ -2221,11 +2233,11 @@
.menu-box {
width: 95%;
height: 214rpx;
height: 176rpx;
display: flex;
align-items: flex-end;
margin: 30rpx auto 0;
padding: 50rpx 8rpx 12rpx;
padding: 14rpx 8rpx 12rpx;
box-sizing: border-box;
border-radius: 38rpx;
border: 1px solid rgba(255, 255, 255, 0.9);
@ -2239,17 +2251,6 @@
overflow: hidden;
}
.menu-box::before {
content: '校园生活 · 一站搞定';
position: absolute;
left: 26rpx;
top: 17rpx;
color: #2c8b6f;
font-size: 22rpx;
font-weight: 900;
letter-spacing: 1rpx;
}
/* .menu-box::after {
content: '本周精选活动 >';
position: absolute;
@ -2492,6 +2493,57 @@
border-bottom-right-radius: 0;
}
.earn-guide {
height: 64rpx;
margin: 0 8rpx 8rpx;
padding: 0 20rpx;
box-sizing: border-box;
border-radius: 28rpx;
background:
radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.9) 0, rgba(255, 255, 255, 0) 72rpx),
linear-gradient(135deg, rgba(231, 255, 245, 0.96) 0%, rgba(255, 247, 224, 0.96) 58%, rgba(255, 233, 212, 0.96) 100%);
border: 1px solid rgba(255, 255, 255, 0.88);
box-shadow: 0 14rpx 32rpx rgba(74, 151, 111, 0.12), inset 0 1rpx 0 rgba(255, 255, 255, 0.9);
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
.earn-guide-light {
width: 180rpx;
height: 100rpx;
background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.74) 48%, rgba(255, 255, 255, 0) 100%);
position: absolute;
top: -18rpx;
left: -210rpx;
transform: rotate(12deg);
animation: seckillEntrySweep 5.2s ease-in-out infinite;
}
.earn-guide-main {
color: #0c6b58;
font-size: 24rpx;
font-weight: 900;
letter-spacing: 1rpx;
position: relative;
z-index: 1;
}
.earn-guide-tag {
height: 36rpx;
margin-left: auto;
padding: 0 14rpx;
border-radius: 999rpx;
background: rgba(255, 117, 88, 0.14);
color: #ff6a42;
font-size: 20rpx;
font-weight: 900;
line-height: 36rpx;
position: relative;
z-index: 1;
}
.daimai-tab--sticky {
background: rgba(255, 255, 255, 1);
box-shadow: 0 16rpx 36rpx rgba(130, 84, 43, 0.08);
@ -2643,9 +2695,9 @@
}
.seckill-entry {
width: 280rpx;
height: 76rpx;
padding: 0 12rpx;
width: 198rpx;
height: 56rpx;
padding: 0 10rpx;
box-sizing: border-box;
border-radius: 999rpx;
border: 1px solid rgba(255, 255, 255, 0.52);
@ -2660,6 +2712,13 @@
animation: none;
}
.seckill-entry--in-card {
position: absolute;
top: 4rpx;
right: 18rpx;
z-index: 4;
}
.seckill-entry:active {
transform: scale(0.96);
}
@ -2701,31 +2760,22 @@
}
.seckill-entry-title {
font-size: 28rpx;
font-size: 27rpx;
font-weight: 900;
line-height: 34rpx;
line-height: 62rpx;
letter-spacing: 1rpx;
text-shadow: 0 3rpx 8rpx rgba(183, 35, 0, 0.24);
}
.seckill-entry-sub {
margin-top: 2rpx;
font-size: 18rpx;
font-weight: 700;
opacity: 0.92;
white-space: nowrap;
animation: none;
}
.seckill-entry-btn {
width: 54rpx;
height: 54rpx;
width: 48rpx;
height: 48rpx;
border-radius: 50%;
background: #fff;
color: #ff3d18;
font-size: 26rpx;
font-size: 24rpx;
font-weight: 900;
line-height: 54rpx;
line-height: 48rpx;
text-align: center;
position: relative;
z-index: 1;
@ -2763,7 +2813,7 @@
linear-gradient(135deg, rgba(229, 255, 247, 0.96) 0%, rgba(255, 250, 226, 0.9) 46%, rgba(221, 255, 246, 0.96) 100%),
url("https://jewel-shop.oss-cn-beijing.aliyuncs.com/6d65d349d68f40e7886c978190b6ea33.png") no-repeat;
background-size: 100%, 100%, 100%, 100%;
margin-top: 10rpx;
margin-top: 0;
display: flex;
border-radius: 34rpx;
overflow: hidden;
@ -2802,6 +2852,33 @@
z-index: 1;
}
.brand-memory-strip {
position: absolute;
left: 18rpx;
right: 286rpx;
top: 20rpx;
height: 32rpx;
display: flex;
align-items: center;
overflow: hidden;
z-index: 4;
pointer-events: none;
}
.brand-memory-strip text {
flex-shrink: 0;
height: 32rpx;
margin-right: 10rpx;
padding: 0 12rpx;
border-radius: 999rpx;
background: rgba(255, 255, 255, 0.8);
color: #0f695b;
font-size: 18rpx;
font-weight: 900;
line-height: 32rpx;
box-shadow: 0 6rpx 14rpx rgba(0, 35, 28, 0.06);
}
.like-left {
width: 45%;
background:
@ -2810,7 +2887,7 @@
border: 1px solid rgba(255, 255, 255, 0.88);
border-radius: 30rpx;
height: 330rpx;
margin: 58rpx 0 0 3.3%;
margin: 70rpx 0 0 3.3%;
box-shadow: 0 18rpx 34rpx rgba(0, 35, 28, 0.08), inset 0 1rpx 0 rgba(255, 255, 255, 0.92);
overflow: hidden;
position: relative;
@ -2839,7 +2916,7 @@
content: '';
position: absolute;
right: -38rpx;
top: -38rpx;
top: -28rpx;
width: 118rpx;
height: 118rpx;
border-radius: 50%;
@ -2866,7 +2943,7 @@
height: 34rpx;
position: absolute;
top: 10rpx;
right: 42rpx;
right: 22rpx;
animation: none;
}
@ -3025,34 +3102,6 @@
animation: none;
}
.brand-memory-strip {
position: absolute;
left: 18rpx;
right: 18rpx;
top: 9rpx;
height: 32rpx;
display: flex;
align-items: center;
overflow: hidden;
z-index: 3;
pointer-events: none;
}
.brand-memory-strip text {
flex-shrink: 0;
height: 32rpx;
margin-right: 10rpx;
padding: 0 12rpx;
border-radius: 999rpx;
background: rgba(255, 255, 255, 0.78);
color: #0f695b;
font-size: 18rpx;
font-weight: 900;
line-height: 32rpx;
box-shadow: 0 6rpx 14rpx rgba(0, 35, 28, 0.06);
animation: none;
}
.group-scene-mark {
position: absolute;
right: 24rpx;
@ -3091,18 +3140,6 @@
border-color: rgba(166, 255, 234, 0.48);
}
.brand-memory-strip text:nth-child(2) {
animation-delay: 0.4s;
}
.brand-memory-strip text:nth-child(3) {
animation-delay: 0.8s;
}
.brand-memory-strip text:nth-child(4) {
animation-delay: 1.2s;
}
@keyframes groupLightSweep {
0% {
left: -380rpx;
@ -3242,6 +3279,25 @@
backface-visibility: hidden;
}
.daoda-time-row {
display: flex;
align-items: center;
margin: 20rpx 0 20rpx 20rpx;
}
.appointment-delivery-tag {
height: 48rpx;
margin-right: 12rpx;
padding: 0 16rpx;
border-radius: 14rpx;
background: linear-gradient(135deg, #ff8f1f 0%, #ff6a3d 100%);
color: #fff;
font-size: 22rpx;
font-weight: 800;
line-height: 48rpx;
box-shadow: 0 8rpx 18rpx rgba(255, 106, 61, 0.16);
}
.daoda-time {
width: 242rpx;
height: 48rpx;
@ -3253,7 +3309,7 @@
text-align: left;
background: rgba(166, 255, 234, 0.42);
color: #125e50;
margin: 20rpx 0 20rpx 20rpx;
margin: 0;
}
.shangjia {

Write Preview
Loading…
Cancel
Save