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

1

master
wangfukang 1 month ago
parent
6e250d7e0d
commit
ae4697136d
1 changed files with 347 additions and 41 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. 388
      pages/index/index.vue

388
pages/index/index.vue
View File

@ -126,9 +126,7 @@
<view class="like-left">
<view class="like-content-title">
<view style="width: 100%;font-weight: 700;">爆品拼团</view>
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/0eeb2e28f84a43a0aefddd8edb430d73.png"
alt=""
style="width: 140rpx;height: 64rpx;position: absolute;top: -16rpx;left: 40%;" />
<img src="/static/images/img/yousanjiao.png" alt=""
style="width: 28rpx;height: 28rpx;position: absolute;top: 20rpx;right: 12rpx;">
</view>
@ -147,7 +145,8 @@
<view class="list-price" style="color: #00231C;">
￥{{item.productList[0].originalPrice}}</view>
<view class="list-total">
拼团<text style="color: red;">￥{{item.productList[0].groupPrice}}</text>
<text style="color: red;">￥{{item.productList[0].groupPrice}}</text>
<view class="group-cta">去拼团</view>
</view>
</view>
</view>
@ -165,7 +164,8 @@
<view class="list-price" style="color: #00231C;">
￥{{item.productList[0].originalPrice}}</view>
<view class="list-total">
拼团<text style="color: red;">￥{{item.productList[0].groupPrice}}</text>
<text style="color: red;">￥{{item.productList[0].groupPrice}}</text>
<view class="group-cta">去拼团</view>
</view>
</view>
</view>
@ -174,9 +174,7 @@
<view class="like-left">
<view class="like-content-title">
<view style="font-weight: 700;">爆品拼团</view>
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/0eeb2e28f84a43a0aefddd8edb430d73.png"
alt=""
style="width: 140rpx;height: 64rpx;position: absolute;top: -16rpx;left: 40%;" />
<img src="/static/images/img/yousanjiao.png" alt=""
style="width: 28rpx;height: 28rpx;position: absolute;top: 20rpx;right: 12rpx;">
</view>
@ -195,7 +193,8 @@
<view class="list-price" style="color: #00231C;">
￥{{item.productList[0].originalPrice}}</view>
<view class="list-total">
拼团<text style="color: red;">￥{{item.productList[0].groupPrice}}</text>
<text style="color: red;">￥{{item.productList[0].groupPrice}}</text>
<view class="group-cta">去拼团</view>
</view>
</view>
</view>
@ -213,7 +212,8 @@
<view class="list-price" style="color: #00231C;">
￥{{item.productList[0].originalPrice}}</view>
<view class="list-total">
拼团<text style="color: red;">￥{{item.productList[0].groupPrice}}</text>
<text style="color: red;">￥{{item.productList[0].groupPrice}}</text>
<view class="group-cta">去拼团</view>
</view>
</view>
</view>
@ -261,7 +261,8 @@
</view>
</view>
</view>
<view class="title-sort" v-if="lastScrollTop>583" :style="{'top': (navBarHeight+76) + 'px'}">
<view class="title-sort" :class="{'title-sort--sticky': lastScrollTop>583}"
:style="{'top': (navBarHeight+94) + 'px'}">
<view class="sort-member" style="position: relative;">
<view @tap="checkAdd">
取餐地址 <text style="font-size: 20rpx;">▼</text>
@ -285,9 +286,11 @@
佣金
</view>
</view>
<view class="sort-text" v-if="lastScrollTop>583" :style="{'top': (navBarHeight+126) + 'px'}">
<view style="display: flex; width: 100%;">
<view @tap="searchOrder('delgetarea',item)" class="guize1-qusong"
<view class="sort-text"
v-if="getAreaData.id != undefined || putAreaData.id != undefined || checkYongjin"
:style="{'top': (navBarHeight+146) + 'px'}">
<view class="sort-text-inner">
<view @tap="searchOrder('delgetarea')" class="guize1-qusong"
v-if="getAreaData.id != undefined">
<view class="qusong1">
取
@ -296,7 +299,7 @@
{{getAreaData.title}}
</view>
</view>
<view @tap="searchOrder('delputarea',item)" class="guize1-qusong"
<view @tap="searchOrder('delputarea')" class="guize1-qusong"
v-if="putAreaData.id != undefined">
<view class="qusong1">
送
@ -305,14 +308,27 @@
{{putAreaData.title}}
</view>
</view>
<view @tap="searchOrder('delyongjin')" class="guize1-qusong" v-if="checkYongjin">
<view class="qusong1">
佣
</view>
<view class="qusong2 commission-chip">
佣金优先
</view>
</view>
<view @tap="clearCheck"
v-if="getAreaData.id != undefined || putAreaData.id != undefined"
style="color:#00BFFF;">
v-if="getAreaData.id != undefined || putAreaData.id != undefined || checkYongjin"
class="clear-filter">
清空
</view>
</view>
</view>
<view :style="{'height':lastScrollTop>583?'900px':'auto'}">
<view class="delivery-list-wrap">
<view class="empty-delivery" v-if="deliveryItem.length <= 0">
<view class="empty-delivery-icon">校园</view>
<view class="empty-delivery-title">暂时没有可抢订单</view>
<view class="empty-delivery-desc">可以切换分类或调整筛选条件，新的校园订单会在这里出现</view>
</view>
<view class="list-1" v-for="(item,index) in deliveryItem" :key="index"
@tap="goDetail('search',item)">
<view class="daoda-time">
@ -1173,10 +1189,16 @@
this.searchForm.order = ''
}
} else if (type == 'delgetarea') {
this.searchForm.getAreaId = ''
this.getAreaData = {}
} else if (type == 'delputarea') {
this.searchForm.putAreaId = ''
this.putAreaData = {}
} else if (type == 'delyongjin') {
this.checkYongjin = false
this.searchForm.order = ''
}
this.searchForm.pageNum = 1
this.getDelivery();
},
// 获取用户位置
@ -1218,8 +1240,23 @@
this.searchForm.kuaidiData = [];
}
this.getDelivery()
this.$nextTick(() => {
this.scrollToDaimaiPanel()
})
this.$forceUpdate()
},
scrollToDaimaiPanel() {
const query = uni.createSelectorQuery().in(this);
query.select('#menuList').boundingClientRect(rect => {
if (!rect) return;
const stickyTop = this.navBarHeight + 46;
const target = rect.top + this.lastScrollTop - stickyTop;
uni.pageScrollTo({
scrollTop: target > 0 ? target : 0,
duration: 260
});
}).exec();
},
makeCall(phone) {
uni.makePhoneCall({
phoneNumber: phone
@ -1367,13 +1404,13 @@
.order-msg-box::after {
content: '';
width: 180rpx;
height: 180rpx;
width: 260rpx;
height: 150rpx;
border-radius: 50%;
background: rgba(255, 216, 168, 0.22);
background: linear-gradient(135deg, rgba(255, 244, 217, 0.24) 0%, rgba(255, 244, 217, 0) 72%);
position: absolute;
right: -72rpx;
top: -96rpx;
right: -130rpx;
top: -80rpx;
}
.order-msg-left {
@ -1499,13 +1536,13 @@
.menu-box::after {
content: '';
width: 210rpx;
height: 210rpx;
width: 280rpx;
height: 160rpx;
border-radius: 50%;
background: rgba(166, 255, 234, 0.28);
background: linear-gradient(135deg, rgba(166, 255, 234, 0.18) 0%, rgba(166, 255, 234, 0) 74%);
position: absolute;
right: -92rpx;
top: -122rpx;
right: -150rpx;
top: -92rpx;
}
.menu-list {
@ -1558,7 +1595,7 @@
box-sizing: border-box;
position: sticky;
top: 0;
z-index: 90;
z-index: 96;
border-radius: 34rpx;
background: rgba(255, 255, 255, 0.62);
}
@ -1716,6 +1753,20 @@
border-radius: 34rpx;
overflow: hidden;
box-shadow: 0 18rpx 42rpx rgba(81, 139, 91, 0.1);
position: relative;
}
.like-content-box::before {
content: '';
width: 240rpx;
height: 520rpx;
background: linear-gradient(110deg, rgba(255, 255, 255, 0) 0%, rgba(255, 250, 213, 0.32) 45%, rgba(255, 255, 255, 0) 100%);
position: absolute;
top: -60rpx;
left: -280rpx;
transform: rotate(16deg);
animation: groupLightSweep 4.6s ease-in-out infinite;
z-index: 1;
}
.like-left {
@ -1727,6 +1778,13 @@
margin: 50rpx 0 0 3.3%;
box-shadow: 0 12rpx 28rpx rgba(0, 35, 28, 0.05);
overflow: hidden;
position: relative;
z-index: 2;
animation: groupCardFloat 3.6s ease-in-out infinite;
}
.like-left:nth-child(2) {
animation-delay: 0.45s;
}
.like-content-title {
@ -1735,6 +1793,24 @@
position: relative;
line-height: 70rpx;
padding: 0 10rpx;
color: #173f36;
}
.like-content-title::before {
content: 'HOT';
height: 28rpx;
line-height: 28rpx;
padding: 0 10rpx;
border-radius: 999rpx;
background: linear-gradient(135deg, #ff8f70 0%, #ffd46f 100%);
color: #fff;
font-size: 18rpx;
font-weight: 900;
position: absolute;
top: 20rpx;
right: 42rpx;
box-shadow: 0 6rpx 12rpx rgba(255, 143, 112, 0.22);
animation: hotBadgePulse 1.5s ease-in-out infinite;
}
.like-content {
@ -1745,29 +1821,34 @@
.content-list {
display: flex;
margin-bottom: 10rpx;
transition: transform 0.18s ease;
border-radius: 20rpx;
transition: transform 0.18s ease, background 0.18s ease;
}
.content-list:active {
transform: scale(0.98);
background: rgba(255, 247, 215, 0.42);
transform: scale(0.98) translateY(-2rpx);
}
.list-img {
width: 37%;
height: 120rpx;
padding: 10rpx;
width: 42%;
height: 132rpx;
padding: 8rpx 6rpx 8rpx 10rpx;
position: relative;
box-sizing: border-box;
}
.list-img img {
width: 100%;
height: 100%;
border-radius: 14rpx;
box-shadow: 0 8rpx 16rpx rgba(0, 35, 28, 0.08);
}
.list-product {
width: 60%;
padding-top: 4rpx;
width: 56%;
padding: 4rpx 4rpx 0 12rpx;
box-sizing: border-box;
}
.list-name {
@ -1786,6 +1867,7 @@
left: 10rpx;
font-weight: 700;
box-shadow: 0 4rpx 10rpx rgba(0, 35, 28, 0.08);
animation: groupMemberPulse 1.8s ease-in-out infinite;
}
.list-text {
@ -1803,6 +1885,109 @@
.list-total {
font-size: 20rpx;
font-weight: 800;
color: #5f4a24;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 2rpx;
}
.list-total text {
font-size: 22rpx;
font-weight: 900;
animation: groupPricePop 1.7s ease-in-out infinite;
}
.group-cta {
display: inline-block;
height: 30rpx;
line-height: 30rpx;
margin-left: 6rpx;
padding: 0 10rpx;
border-radius: 999rpx;
background: linear-gradient(135deg, #ff8f70 0%, #ffd46f 100%);
color: #fff;
font-size: 18rpx;
font-weight: 900;
box-shadow: 0 6rpx 14rpx rgba(255, 143, 112, 0.24);
animation: groupCtaNudge 1.9s ease-in-out infinite;
}
@keyframes groupLightSweep {
0% {
left: -300rpx;
opacity: 0;
}
35% {
opacity: 1;
}
70% {
left: 720rpx;
opacity: 0;
}
100% {
left: 720rpx;
opacity: 0;
}
}
@keyframes groupCardFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-5rpx);
}
}
@keyframes hotBadgePulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.08);
}
}
@keyframes groupMemberPulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.06);
}
}
@keyframes groupPricePop {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.08);
}
}
@keyframes groupCtaNudge {
0%,
100% {
transform: translateX(0);
}
50% {
transform: translateX(5rpx);
}
}
.list-1 {
@ -2062,11 +2247,17 @@
display: flex;
position: sticky;
top: 0;
z-index: 90;
z-index: 95;
background: rgba(255, 255, 255, 0.96);
padding: 20rpx 10rpx 0;
box-sizing: border-box;
box-shadow: 0 12rpx 26rpx rgba(0, 35, 28, 0.05);
border-bottom-left-radius: 26rpx;
border-bottom-right-radius: 26rpx;
}
.title-sort--sticky {
animation: stickyPanelIn 0.24s ease;
}
.sort-text {
@ -2074,10 +2265,19 @@
display: flex;
position: sticky;
top: 0;
z-index: 90;
z-index: 94;
background: rgba(255, 255, 255, 0.96);
padding: 0 10rpx 4rpx;
padding: 0 10rpx 8rpx;
box-sizing: border-box;
box-shadow: 0 12rpx 22rpx rgba(0, 35, 28, 0.04);
animation: filterChipIn 0.22s ease;
}
.sort-text-inner {
display: flex;
align-items: center;
flex-wrap: wrap;
width: 100%;
}
.sort-member {
@ -2101,7 +2301,7 @@
overflow: scroll;
background: rgba(0, 35, 28, 0.82);
position: absolute;
top: 145rpx;
top: 76rpx;
right: 0;
border-radius: 24rpx;
color: #fff;
@ -2115,7 +2315,10 @@
.guize1-qusong {
display: flex;
margin: 0 40rpx 20rpx 0;
align-items: center;
margin: 0 18rpx 14rpx 0;
max-width: 300rpx;
animation: filterChipIn 0.22s ease;
}
.qusong1 {
@ -2141,6 +2344,109 @@
font-weight: 700;
border-top-right-radius: 40rpx;
border-bottom-right-radius: 40rpx;
max-width: 230rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.commission-chip {
background: rgba(255, 221, 176, 0.72);
}
.clear-filter {
height: 40rpx;
padding: 0 20rpx;
margin-bottom: 14rpx;
border-radius: 999rpx;
background: rgba(0, 191, 255, 0.08);
color: #00A8D8;
font-size: 24rpx;
font-weight: 800;
line-height: 40rpx;
}
.delivery-list-wrap {
min-height: 520rpx;
}
.empty-delivery {
width: 98%;
min-height: 360rpx;
margin: 24rpx auto 0;
padding: 54rpx 36rpx;
box-sizing: border-box;
border-radius: 36rpx;
border: 1px solid rgba(166, 255, 234, 0.5);
background:
radial-gradient(circle at 78% 8%, rgba(255, 216, 168, 0.28) 0, rgba(255, 216, 168, 0) 150rpx),
linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 255, 251, 0.96) 100%);
box-shadow: 0 16rpx 38rpx rgba(0, 35, 28, 0.06);
text-align: center;
animation: emptyFloatIn 0.32s ease;
}
.empty-delivery-icon {
width: 104rpx;
height: 104rpx;
margin: 0 auto 22rpx;
border-radius: 36rpx;
background: linear-gradient(135deg, #fff7d7 0%, #a6ffea 100%);
color: #125e50;
font-size: 28rpx;
font-weight: 900;
line-height: 104rpx;
box-shadow: 0 14rpx 26rpx rgba(0, 35, 28, 0.08);
}
.empty-delivery-title {
color: #243f38;
font-size: 30rpx;
font-weight: 900;
}
.empty-delivery-desc {
width: 88%;
margin: 14rpx auto 0;
color: #74817d;
font-size: 24rpx;
line-height: 38rpx;
}
@keyframes stickyPanelIn {
0% {
opacity: 0.88;
transform: translateY(-8rpx);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes filterChipIn {
0% {
opacity: 0;
transform: translateY(-8rpx) scale(0.98);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes emptyFloatIn {
0% {
opacity: 0;
transform: translateY(18rpx);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.box1 {
width: 95%;

Write Preview
Loading…
Cancel
Save