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

Merge branch 'master' of http://8.140.253.224:3000/root/school_uni

master
tianyi 4 weeks ago
parent
1abfb61aee 643d17730f
commit
9e6a3e5ce7
1 changed files with 192 additions and 50 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. 242
      pages/index/index.vue

242
pages/index/index.vue
View File

@ -23,6 +23,28 @@
</swiper-item>
</swiper>
<view class="" style="background: #fff;">
<view class="order-msg-box" v-if="orderLists.length <= 0">
<view class="order-msg-left">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/ecd00dab1c9c44198d765bc08bc1bd71.png"
alt="" />
</view>
<view class="order-msg-center">
<view
style="font-weight: 700;font-size: 30rpx;line-height: 60rpx;margin-top: 5%;">
<text>拼团更省哦</text>
</view>
<view style="font-size: 24rpx;">
快去拼团享优惠吧！
</view>
</view>
<view class="order-msg-right" @tap.stop="$refs.pagesPopup.open()">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/d93d893296ed46ea99cfd0e8e2835eaa.png"
alt="" />
</view>
</view>
<swiper class="swiper" vertical circular :autoplay="orderLists.length > 0"
:interval="onlineWorkerInterval" :duration="onlineWorkerDuration"
style="height: 74px;margin-top: -50px;">
@ -65,8 +87,7 @@
</view>
<view class="menu-box"
:style="{'margin-top':orderLists.length < 1?'-140rpx':'','height':orderLists.length < 1?'190rpx':'','padding-top':orderLists.length < 1?'40rpx':''}">
<view class="menu-box">
<view class="menu-list" @tap="goDetail('1')">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/7690c4f897604fca804ea932bc3c1239.png"
alt="" />
@ -201,58 +222,42 @@
</view>
</view>
<view class="daimai-box" style="padding-bottom:180rpx;">
<view class="daimai-tab" id="menuList"
:style="{'top': (navBarHeight+46) + 'px','background':lastScrollTop>583?'#fff':''}">
<view @tap="checkTab1('waimai')" style="flex: 1;">
<view class="like-title"
style="position: relative;width: 160rpx;height: 50rpx;margin-top:8rpx;"
v-if="checked == 'waimai'">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/4d3207adb25546f68ce4d3428e571867.png"
alt="" style="width: 160rpx;height: 50rpx;" />
<text
style="position: absolute;top: 0;left: 60rpx;font-size: 30rpx;font-weight: 700;height: 50rpx;line-height: 40rpx;">（{{waimaiCount}}）</text>
</view>
<view style="font-size: 30rpx;font-weight: 700;margin-left: 20rpx;color: #777;" v-else>
外卖({{waimaiCount}})
</view>
</view>
<view @tap="checkTab1('kuaidi')" style="margin-left: 20rpx;flex: 1;">
<view class="like-title"
style="position: relative;width: 160rpx;height: 50rpx;margin-top:8rpx;"
v-if="checked == 'kuaidi'">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/aeff6530c1c4486e9c7d088522de0c98.png"
alt="" style="width: 160rpx;height: 50rpx;">
<text
style="position: absolute;top: 0;left: 60rpx;font-size: 30rpx;font-weight: 700;height: 50rpx;line-height: 40rpx;">（{{kuaidiCount}}）</text>
</view>
<view style="font-size: 30rpx;font-weight: 700;margin-left: 20rpx;color: #777;" v-else>
快递({{kuaidiCount}})
<view class="daimai-tab" id="menuList" :class="{'daimai-tab--sticky': lastScrollTop>583}"
:style="{'top': (navBarHeight+46) + 'px'}">
<view class="daimai-tab-item" :class="{'active': checked == 'waimai'}"
@tap="checkTab1('waimai')">
<view class="daimai-tab-glow"></view>
<view class="daimai-tab-icon">饭</view>
<view class="daimai-tab-info">
<text class="daimai-tab-label">外卖</text>
<text class="daimai-tab-count">{{waimaiCount}}</text>
</view>
</view>
<view @tap="checkTab1('paotui')" style="margin-left: 20rpx;flex: 1;">
<view class="like-title"
style="position: relative;width: 160rpx;height: 50rpx;margin-top:8rpx;"
v-if="checked == 'paotui'">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/e2cccb5ad1534b2aaae9b2b67ed401b4.png"
alt="" style="width: 160rpx;height: 50rpx;">
<text
style="position: absolute;top: 0;left: 60rpx;font-size: 30rpx;font-weight: 700;height: 50rpx;line-height: 40rpx;">（{{paotuiCount}}）</text>
<view class="daimai-tab-item" :class="{'active': checked == 'kuaidi'}"
@tap="checkTab1('kuaidi')">
<view class="daimai-tab-glow"></view>
<view class="daimai-tab-icon">递</view>
<view class="daimai-tab-info">
<text class="daimai-tab-label">快递</text>
<text class="daimai-tab-count">{{kuaidiCount}}</text>
</view>
<view style="font-size: 30rpx;font-weight: 700;margin-left: 20rpx;color: #777;" v-else>
跑腿({{paotuiCount}})
</view>
<view class="daimai-tab-item" :class="{'active': checked == 'paotui'}"
@tap="checkTab1('paotui')">
<view class="daimai-tab-glow"></view>
<view class="daimai-tab-icon">跑</view>
<view class="daimai-tab-info">
<text class="daimai-tab-label">跑腿</text>
<text class="daimai-tab-count">{{paotuiCount}}</text>
</view>
<view @tap="checkTab1('zhipai')" style="margin-left: 20rpx;flex: 1;" v-if="worker != null">
<view class="like-title"
style="position: relative;width: 160rpx;height: 50rpx;margin-top:8rpx;"
v-if="checked == 'zhipai'">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/2bfc2333818b47478572e4d1a430049a.png"
alt="" style="width: 160rpx;height: 50rpx;">
<text
style="position: absolute;top: 0;left: 80rpx;font-size: 30rpx;font-weight: 700;height: 50rpx;line-height: 40rpx;">（{{zhipaiCount}}）</text>
</view>
<view style="font-size: 30rpx;font-weight: 700;margin-left: 20rpx;color: #777;" v-else>
指派单({{zhipaiCount}})
<view class="daimai-tab-item" :class="{'active': checked == 'zhipai'}"
@tap="checkTab1('zhipai')" v-if="worker != null">
<view class="daimai-tab-glow"></view>
<view class="daimai-tab-icon">派</view>
<view class="daimai-tab-info">
<text class="daimai-tab-label">指派单</text>
<text class="daimai-tab-count">{{zhipaiCount}}</text>
</view>
</view>
</view>
@ -1493,11 +1498,148 @@
.daimai-tab {
display: flex;
height: 60rpx;
line-height: 60rpx;
align-items: center;
height: 88rpx;
padding: 8rpx;
margin: 0 -4rpx;
box-sizing: border-box;
position: sticky;
top: 0;
z-index: 90;
border-radius: 34rpx;
background: rgba(255, 255, 255, 0.62);
}
.daimai-tab--sticky {
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 16rpx 36rpx rgba(130, 84, 43, 0.08);
}
.daimai-tab-item {
flex: 1;
min-width: 0;
height: 68rpx;
margin-right: 10rpx;
border-radius: 26rpx;
border: 1px solid rgba(255, 184, 116, 0.16);
background: rgba(255, 252, 244, 0.82);
box-shadow: 0 8rpx 22rpx rgba(130, 84, 43, 0.04);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
color: #7d756c;
transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.35), box-shadow 0.22s ease, background 0.22s ease, color 0.22s ease;
}
.daimai-tab-item:last-child {
margin-right: 0;
}
.daimai-tab-item:active {
transform: scale(0.94);
box-shadow: 0 4rpx 12rpx rgba(255, 150, 93, 0.14);
}
.daimai-tab-item.active {
border-color: rgba(255, 188, 119, 0.72);
background: linear-gradient(135deg, #fff7d7 0%, #ffd8a8 45%, #ffb8a3 100%);
box-shadow: 0 14rpx 30rpx rgba(255, 158, 100, 0.28);
color: #63351d;
transform: translateY(-4rpx);
animation: daimaiTabPop 0.34s cubic-bezier(0.2, 0.9, 0.3, 1.35);
}
.daimai-tab-item.active:active {
transform: translateY(-2rpx) scale(0.96);
}
.daimai-tab-glow {
width: 88rpx;
height: 88rpx;
border-radius: 50%;
background: rgba(255, 255, 255, 0.42);
position: absolute;
top: -38rpx;
right: -26rpx;
opacity: 0;
transform: scale(0.6);
transition: opacity 0.22s ease, transform 0.26s ease;
}
.daimai-tab-item.active .daimai-tab-glow {
opacity: 1;
transform: scale(1.08);
}
.daimai-tab-icon {
width: 40rpx;
height: 40rpx;
margin-right: 8rpx;
border-radius: 14rpx;
background: rgba(255, 221, 176, 0.56);
color: #724126;
font-size: 22rpx;
font-weight: 900;
line-height: 40rpx;
text-align: center;
z-index: 1;
}
.daimai-tab-item.active .daimai-tab-icon {
background: rgba(255, 255, 255, 0.5);
color: #63351d;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.36);
}
.daimai-tab-info {
min-width: 0;
display: flex;
align-items: center;
z-index: 1;
}
.daimai-tab-label {
font-size: 24rpx;
font-weight: 900;
white-space: nowrap;
letter-spacing: 1rpx;
}
.daimai-tab-count {
min-width: 30rpx;
height: 30rpx;
margin-left: 6rpx;
padding: 0 8rpx;
border-radius: 999rpx;
background: rgba(255, 221, 176, 0.66);
color: #724126;
font-size: 20rpx;
font-weight: 900;
line-height: 30rpx;
text-align: center;
box-sizing: border-box;
}
.daimai-tab-item.active .daimai-tab-count {
background: rgba(255, 255, 255, 0.88);
color: #ff734d;
box-shadow: 0 4rpx 12rpx rgba(255, 115, 77, 0.18);
}
@keyframes daimaiTabPop {
0% {
transform: translateY(0) scale(0.94);
}
65% {
transform: translateY(-6rpx) scale(1.04);
}
100% {
transform: translateY(-4rpx) scale(1);
}
}
.like-title {

Write Preview
Loading…
Cancel
Save