Compare commits
4 Commits
d565ea287d
...
399650e2f0
| Author | SHA1 | Date |
|---|---|---|
 tianyi
|
399650e2f0 | 1 week ago |
|
tianyi
|
1f80962295 | 1 week ago |
|
tianyi
|
d6b5996a9d | 1 week ago |
|
tianyi
|
ef94568991 | 1 week ago |
9 changed files with 5704 additions and 38 deletions
@ -0,0 +1,609 @@ |
|||
<template> |
|||
<!-- 兼职中心 --> |
|||
<view class="page1"> |
|||
<view class="title"> |
|||
<view class="title-sreach"> |
|||
<view class="back-btn" @tap="back"> |
|||
<uni-icons type="left" size="28"></uni-icons> |
|||
</view> |
|||
<view class="title-name"> |
|||
兼职中心 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="shop-title"> |
|||
<view class="title1"> |
|||
<img src="https://ooo.0o0.ooo/2019/04/28/5cc5a71a6e3b6.png" alt="" /> |
|||
</view> |
|||
<view class="title2"> |
|||
<view class="title22"> |
|||
<view style="display: flex;font-size: 32rpx;font-weight: 700;"> |
|||
{{worker.workerName}} |
|||
<!-- <img v-if="isBaozhang" |
|||
src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/d27fa14c6bb7426482ed7821919d3aa7.png" |
|||
alt="" style="width: 140rpx;height: 32rpx;background-size: 100%;margin: 20rpx;"> |
|||
<img v-else |
|||
src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/176715c0f8ea41e7a9be8fa1c3edd670.png" |
|||
alt="" style="width: 140rpx;height: 32rpx;background-size: 100%;margin: 20rpx;"> --> |
|||
</view> |
|||
</view> |
|||
<view class="title33" @tap="goDetail('xx')"> |
|||
修改信息 |
|||
<uni-icons type="right" size="12"></uni-icons> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="shop-order"> |
|||
<view class="order1"> |
|||
待办事项 |
|||
</view> |
|||
<view class="order2"> |
|||
<view class="order22"> |
|||
|
|||
<!-- <view class="order33" @tap="goDetail('db',4)"> |
|||
<view class="order44"> |
|||
{{daiquCount}} |
|||
</view> |
|||
<view class="order55"> |
|||
待取货 |
|||
</view> |
|||
</view> |
|||
<view class="order33" @tap="goDetail('db',5)"> |
|||
<view class="order44"> |
|||
{{daisongCount}} |
|||
</view> |
|||
<view class="order55"> |
|||
待送达 |
|||
</view> |
|||
</view> --> |
|||
<view class="order33" @tap="goDetail('tui',11)"> |
|||
<view class="order44"> |
|||
{{shouhouCount}} |
|||
</view> |
|||
<view class="order55"> |
|||
待退款/售后 |
|||
</view> |
|||
</view> |
|||
<view class="order33" @tap="goDetail('pj','cha')"> |
|||
<view class="order44"> |
|||
{{chapingCount}} |
|||
</view> |
|||
<view class="order55"> |
|||
待回复差评 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="shop-order"> |
|||
<view class="order1" style="display: flex;"> |
|||
<view style="flex: 1;"> |
|||
今日实时数据 |
|||
</view> |
|||
<!-- <view @tap="goDetail('tj')"> |
|||
更多 |
|||
<uni-icons type="right" size="12"></uni-icons> |
|||
</view> --> |
|||
</view> |
|||
<view class="data2"> |
|||
<view class="data22"> |
|||
<view class="data222" @tap="goTodayOrderList"> |
|||
{{orderData.orderCount == undefined?0:orderData.orderCount}} |
|||
</view> |
|||
<view class="data333"> |
|||
完成订单 |
|||
</view> |
|||
</view> |
|||
<view class="data22"> |
|||
<view class="data222" @tap="goTodayOrderList"> |
|||
{{orderData.amount == undefined ? 0 : orderData.amount}} |
|||
</view> |
|||
<view class="data333"> |
|||
配送佣金 |
|||
</view> |
|||
</view> |
|||
<view class="data22"> |
|||
<view class="data222"> |
|||
{{orderData.afterSaleCount == undefined ? 0 : orderData.afterSaleCount}} |
|||
</view> |
|||
<view class="data333"> |
|||
退/售后笔数 |
|||
</view> |
|||
</view> |
|||
<view class="data22"> |
|||
<view class="data222"> |
|||
{{orderData.afterSaleAmount == undefined ? 0 : orderData.afterSaleAmount}} |
|||
</view> |
|||
<view class="data333"> |
|||
退/售后金额 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="shop-order"> |
|||
<view class="order1"> |
|||
必备工具 |
|||
</view> |
|||
<view class="menu2"> |
|||
|
|||
<view class="menu22" @tap="goDetail('xx')"> |
|||
<view class="menu33"> |
|||
<image src="../../static/image/dingdan/dd0.png" alt="" /> |
|||
</view> |
|||
<view class="menu44"> |
|||
规则设置 |
|||
</view> |
|||
</view> |
|||
<view class="menu22" @tap="goDetail('dd')"> |
|||
<view class="menu33"> |
|||
<image src="../../static/image/dingdan/dd1.png" alt="" /> |
|||
</view> |
|||
<view class="menu44"> |
|||
订单管理 |
|||
</view> |
|||
</view> |
|||
<view class="menu22" @tap="goDetail('qb')"> |
|||
<view class="menu33"> |
|||
<image src="../../static/image/dingdan/dd2.png" alt="" /> |
|||
</view> |
|||
<view class="menu44"> |
|||
我的钱包 |
|||
</view> |
|||
</view> |
|||
<view class="menu22" @tap="goDetail('pj','')"> |
|||
<view class="menu33"> |
|||
<image src="../../static/image/dingdan/dd3.png" alt="" /> |
|||
</view> |
|||
<view class="menu44"> |
|||
顾客评价 |
|||
</view> |
|||
</view> |
|||
<view class="menu22" @tap="goDetail('ph','')"> |
|||
<view class="menu33"> |
|||
<image src="../../static/image/dingdan/dd4.png" alt="" /> |
|||
</view> |
|||
<view class="menu44"> |
|||
排行 |
|||
</view> |
|||
</view> |
|||
<view class="menu22" @tap="goDetail('tuiRecord')"> |
|||
<view class="menu33"> |
|||
<image src="../../static/image/dingdan/dd1.png" alt="" /> |
|||
</view> |
|||
<view class="menu44"> |
|||
退款/售后记录 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
worker: {}, |
|||
orderData: {}, |
|||
chapingCount: 0, |
|||
shouhouCount: 0, |
|||
daiquCount: 0, |
|||
daisongCount: 0, |
|||
isBaozhang: false |
|||
} |
|||
}, |
|||
onShow() { |
|||
this.refreshPage() |
|||
}, |
|||
onLoad(option) { |
|||
|
|||
}, |
|||
methods: { |
|||
refreshPage() { |
|||
this.worker = uni.getStorageSync('worker') || {} |
|||
this.getData() |
|||
}, |
|||
getData() { |
|||
const worker = uni.getStorageSync('worker') || {} |
|||
this.daiquCount = 0 |
|||
this.daisongCount = 0 |
|||
this.shouhouCount = 0 |
|||
this.chapingCount = 0 |
|||
this.orderData = {} |
|||
this.NB.sendRequest("/mall/delivery/countOrderByStatusIndex", { |
|||
workerId:worker.workerId, |
|||
regionId:JSON.parse(uni.getStorageSync('area')).id |
|||
}, true, 'POST', 'application/x-www-form-urlencoded').then(res => { |
|||
if (res.code == 200) { |
|||
if(res.result != null){ |
|||
for(let i = 0;i<res.result.length;i++){ |
|||
if(res.result[i].status == 1){ |
|||
this.daiquCount = Number(res.result[i].orderCount) |
|||
}else if(res.result[i].status == 2){ |
|||
this.daisongCount = Number(res.result[i].orderCount) |
|||
}else if(res.result[i].status == 3){ |
|||
this.shouhouCount = Number(res.result[i].orderCount) |
|||
}else if(res.result[i].status == 4){ |
|||
this.chapingCount = Number(res.result[i].orderCount); |
|||
}else{ |
|||
this.orderData = res.result[i].workerIndex |
|||
} |
|||
} |
|||
} |
|||
this.$forceUpdate(); |
|||
} else { |
|||
uni.showToast({ |
|||
title: res.message, |
|||
icon: 'none' |
|||
}); |
|||
return |
|||
} |
|||
uni.hideLoading() |
|||
}) |
|||
}, |
|||
goTodayOrderList() { |
|||
uni.navigateTo({ |
|||
url: '/pages/worker/workerOrderList?today=1' |
|||
}) |
|||
}, |
|||
goDetail(type, index) { |
|||
let url = '' |
|||
switch (type) { |
|||
case 'tj': |
|||
url = '/pages/worker/dataStatistics' |
|||
break; |
|||
case 'db': |
|||
url = '/pages/shop/shopOrderList?index=' + index |
|||
break; |
|||
case 'xx': |
|||
url = '/pages/worker/partTimeJobRegister' |
|||
break; |
|||
case 'qb': |
|||
url = '/pages/worker/wallet?walletType=worker' |
|||
break; |
|||
case 'dd': |
|||
url = '/pages/worker/workerOrderList' |
|||
break; |
|||
case 'ph': |
|||
url = '/pages/worker/ranking' |
|||
break; |
|||
case 'tui': |
|||
url = '/pages/shop/afterService?type=worker' |
|||
break; |
|||
case 'tuiRecord': |
|||
url = '/pages/shop/afterService?type=worker&mode=record' |
|||
break; |
|||
case 'pj': |
|||
let item = { |
|||
shopScore: uni.getStorageSync('worker').score, |
|||
id: uni.getStorageSync('worker').workerId |
|||
} |
|||
url = '/pages/shop/shopEvaluate?item=' + JSON.stringify(item) + '&isMerchant=2&isCha=' + ( |
|||
index == 'cha' ? 1 : 0) |
|||
break; |
|||
default: |
|||
} |
|||
uni.navigateTo({ |
|||
url: url |
|||
}) |
|||
}, |
|||
back() { |
|||
uni.navigateBack() |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
page { |
|||
width: 100%; |
|||
min-height: 100%; |
|||
font-size: 24rpx; |
|||
background: #F6FBF8; |
|||
color: #00231C; |
|||
} |
|||
|
|||
.page1 { |
|||
width: 100%; |
|||
min-height: 100vh; |
|||
padding-bottom: 60rpx; |
|||
box-sizing: border-box; |
|||
position: relative; |
|||
overflow: hidden; |
|||
background: |
|||
radial-gradient(circle at 16% 210rpx, rgba(227, 255, 150, 0.62), rgba(227, 255, 150, 0) 260rpx), |
|||
radial-gradient(circle at 88% 150rpx, rgba(166, 255, 234, 0.68), rgba(166, 255, 234, 0) 280rpx), |
|||
linear-gradient(180deg, #f1ffe7 0%, #f4fff9 360rpx, #f6fbf8 100%); |
|||
} |
|||
|
|||
.title { |
|||
width: 100%; |
|||
height: 252rpx; |
|||
background: linear-gradient(135deg, rgba(227, 255, 150, 0.92), rgba(166, 255, 234, 0.86)); |
|||
position: relative; |
|||
} |
|||
|
|||
.title::after { |
|||
content: ''; |
|||
position: absolute; |
|||
left: -90rpx; |
|||
right: -90rpx; |
|||
bottom: -70rpx; |
|||
height: 150rpx; |
|||
border-radius: 0 0 50% 50%; |
|||
background: rgba(255, 255, 255, 0.28); |
|||
} |
|||
|
|||
.title-sreach { |
|||
width: 100%; |
|||
display: flex; |
|||
height: 188rpx; |
|||
position: relative; |
|||
z-index: 1; |
|||
} |
|||
|
|||
.back-btn { |
|||
padding-top: 110rpx; |
|||
width: 68rpx; |
|||
height: 68rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
border-radius: 50%; |
|||
background: rgba(255, 255, 255, 0.34); |
|||
} |
|||
|
|||
.title-name { |
|||
padding-top: 110rpx; |
|||
font-size: 38rpx; |
|||
font-weight: 900; |
|||
flex: 1; |
|||
text-align: center; |
|||
color: #153b35; |
|||
letter-spacing: 2rpx; |
|||
} |
|||
|
|||
.shop-title { |
|||
width: 92%; |
|||
margin: -70rpx auto 0; |
|||
padding: 26rpx; |
|||
background: |
|||
radial-gradient(circle at 92% 14%, rgba(166, 255, 234, 0.5), rgba(166, 255, 234, 0) 150rpx), |
|||
linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(250, 255, 248, 0.94)); |
|||
border: 1px solid rgba(255, 255, 255, 0.78); |
|||
border-radius: 34rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 28rpx; |
|||
font-weight: 800; |
|||
box-shadow: 0 18rpx 42rpx rgba(0, 55, 44, 0.1); |
|||
position: relative; |
|||
z-index: 2; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.title1 { |
|||
width: 92rpx; |
|||
height: 92rpx; |
|||
padding: 8rpx; |
|||
border-radius: 28rpx; |
|||
background: linear-gradient(135deg, #e3ff96, #a6ffea); |
|||
box-sizing: border-box; |
|||
box-shadow: 0 10rpx 24rpx rgba(32, 190, 154, 0.16); |
|||
|
|||
img { |
|||
width: 100%; |
|||
height: 100%; |
|||
border-radius: 22rpx; |
|||
display: block; |
|||
} |
|||
} |
|||
|
|||
.title2 { |
|||
flex: 1; |
|||
min-width: 0; |
|||
display: flex; |
|||
align-items: center; |
|||
margin-left: 18rpx; |
|||
} |
|||
|
|||
.title22 { |
|||
flex: 1; |
|||
min-width: 0; |
|||
color: #153b35; |
|||
} |
|||
|
|||
.title22 > view { |
|||
align-items: center; |
|||
} |
|||
|
|||
.title33 { |
|||
flex-shrink: 0; |
|||
height: 58rpx; |
|||
line-height: 58rpx; |
|||
padding: 0 18rpx; |
|||
border-radius: 999rpx; |
|||
background: rgba(255, 255, 255, 0.72); |
|||
color: #08735d; |
|||
font-size: 24rpx; |
|||
font-weight: 800; |
|||
box-shadow: inset 0 0 0 1px rgba(88, 220, 190, 0.32); |
|||
} |
|||
|
|||
.shop-order { |
|||
width: 92%; |
|||
margin: 22rpx auto 0; |
|||
background: rgba(255, 255, 255, 0.94); |
|||
border-radius: 30rpx; |
|||
padding: 0 24rpx 24rpx; |
|||
box-shadow: 0 14rpx 34rpx rgba(0, 35, 28, 0.07); |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.shop-title + .shop-order { |
|||
background: |
|||
radial-gradient(circle at 94% 12%, rgba(255, 220, 140, 0.32), rgba(255, 220, 140, 0) 150rpx), |
|||
linear-gradient(160deg, #ffffff 0%, #fffdf7 54%, #f2fff7 100%); |
|||
border: 1px solid rgba(255, 219, 145, 0.34); |
|||
} |
|||
|
|||
.shop-title + .shop-order + .shop-order { |
|||
background: |
|||
radial-gradient(circle at 8% 16%, rgba(166, 255, 234, 0.38), rgba(166, 255, 234, 0) 170rpx), |
|||
linear-gradient(145deg, #ffffff 0%, #f4fffb 52%, #eef8ff 100%); |
|||
border: 1px solid rgba(132, 232, 205, 0.28); |
|||
} |
|||
|
|||
.order1 { |
|||
height: 78rpx; |
|||
line-height: 78rpx; |
|||
font-size: 30rpx; |
|||
font-weight: 900; |
|||
color: #153b35; |
|||
border-bottom: 1px solid rgba(0, 35, 28, 0.06); |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.order1::before { |
|||
content: ''; |
|||
width: 10rpx; |
|||
height: 30rpx; |
|||
margin-right: 12rpx; |
|||
border-radius: 999rpx; |
|||
background: linear-gradient(180deg, #e3ff96, #35d6a6); |
|||
} |
|||
|
|||
.order22 { |
|||
display: flex; |
|||
min-height: 118rpx; |
|||
padding-top: 22rpx; |
|||
gap: 14rpx; |
|||
} |
|||
|
|||
.order33 { |
|||
flex: 1; |
|||
text-align: center; |
|||
padding: 14rpx 6rpx; |
|||
border-radius: 24rpx; |
|||
box-sizing: border-box; |
|||
background: rgba(255, 255, 255, 0.6); |
|||
box-shadow: inset 0 0 0 1px rgba(0, 35, 28, 0.04); |
|||
} |
|||
|
|||
.order33:active, |
|||
.menu22:active { |
|||
transform: scale(0.96); |
|||
} |
|||
|
|||
.order44 { |
|||
display: inline-flex; |
|||
min-width: 56rpx; |
|||
height: 48rpx; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 0 10rpx; |
|||
border-radius: 999rpx; |
|||
background: linear-gradient(135deg, rgba(227, 255, 150, 0.82), rgba(166, 255, 234, 0.82)); |
|||
font-size: 34rpx; |
|||
line-height: 48rpx; |
|||
font-weight: 900; |
|||
color: #08735d; |
|||
box-shadow: 0 8rpx 18rpx rgba(56, 196, 160, 0.12); |
|||
} |
|||
|
|||
.shop-title + .shop-order .order44 { |
|||
background: linear-gradient(135deg, #fff1bf, #ffd6a2); |
|||
color: #9a5412; |
|||
box-shadow: 0 8rpx 18rpx rgba(255, 163, 79, 0.14); |
|||
} |
|||
|
|||
.shop-title + .shop-order + .shop-order .order1::before { |
|||
background: linear-gradient(180deg, #a6ffea, #60b8ff); |
|||
} |
|||
|
|||
.order55, |
|||
.data333, |
|||
.menu44 { |
|||
color: #415c56; |
|||
font-size: 23rpx; |
|||
} |
|||
|
|||
.data2 { |
|||
display: flex; |
|||
min-height: 150rpx; |
|||
text-align: center; |
|||
padding-top: 26rpx; |
|||
gap: 16rpx; |
|||
} |
|||
|
|||
.data22 { |
|||
flex: 1; |
|||
position: relative; |
|||
padding: 18rpx 8rpx; |
|||
border-radius: 26rpx; |
|||
background: rgba(255, 255, 255, 0.66); |
|||
box-shadow: inset 0 0 0 1px rgba(68, 202, 185, 0.08); |
|||
} |
|||
|
|||
.data22 + .data22::before { |
|||
display: none; |
|||
} |
|||
|
|||
.data222 { |
|||
font-size: 42rpx; |
|||
line-height: 54rpx; |
|||
font-weight: 900; |
|||
color: #0b6b5a; |
|||
padding-bottom: 12rpx; |
|||
} |
|||
|
|||
.menu2 { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
text-align: center; |
|||
padding-top: 24rpx; |
|||
} |
|||
|
|||
.menu22 { |
|||
width: 25%; |
|||
height: 142rpx; |
|||
} |
|||
|
|||
.menu33 { |
|||
width: 72rpx; |
|||
height: 72rpx; |
|||
margin: 0 auto 10rpx; |
|||
border-radius: 24rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background: linear-gradient(135deg, #fff3d7, #ffd7b0); |
|||
box-shadow: 0 10rpx 22rpx rgba(255, 151, 97, 0.14); |
|||
|
|||
image { |
|||
width: 46rpx; |
|||
height: 46rpx; |
|||
background-size: 100%; |
|||
display: block; |
|||
} |
|||
} |
|||
|
|||
.menu22:nth-child(2n) .menu33 { |
|||
background: linear-gradient(135deg, #e4f4ff, #b9ddff); |
|||
} |
|||
|
|||
.menu22:nth-child(3n) .menu33 { |
|||
background: linear-gradient(135deg, #e3ff96, #a6ffea); |
|||
} |
|||
|
|||
.menu22:nth-child(4n) .menu33 { |
|||
background: linear-gradient(135deg, #fff2b8, #ffd98b); |
|||
} |
|||
|
|||
.menu44 { |
|||
height: 40rpx; |
|||
line-height: 40rpx; |
|||
font-weight: 700; |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
@ -0,0 +1,655 @@ |
|||
<template> |
|||
<view class="ranking-page"> |
|||
<view class="title"> |
|||
<view class="title-sreach"> |
|||
<view class="back-btn" @tap="back"> |
|||
<uni-icons type="left" size="26" color="#20243a"></uni-icons> |
|||
</view> |
|||
<view class="title-name"> |
|||
配送今日排行榜 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="notice-wrap" v-if="reward != ''"> |
|||
<view class="reward-card"> |
|||
<view class="reward-title"> |
|||
<view class="reward-icon"> |
|||
<text>奖</text> |
|||
</view> |
|||
<text>奖励规则</text> |
|||
</view> |
|||
<view class="reward-marquee"> |
|||
<view class="reward-marquee-inner">{{reward}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="hero"> |
|||
<view class="hero-glow hero-glow-one"></view> |
|||
<view class="hero-glow hero-glow-two"></view> |
|||
<view class="hero-copy"> |
|||
<!-- <view class="hero-tag">实时战况</view> --> |
|||
<view class="hero-title">今日配送之星</view> |
|||
<view class="hero-subtitle">按今日完成订单数排名，晚 10 点截止</view> |
|||
</view> |
|||
|
|||
<view class="podium"> |
|||
<view class="podium-card podium-second" :class="{'podium-empty': !rankItem(1).workerName}"> |
|||
<view class="podium-crown silver">2</view> |
|||
<image class="podium-avatar" :src="rankItem(1).icon || '/static/images/img/songshu.png'" mode="aspectFill"></image> |
|||
<view class="podium-name">{{displayName(rankItem(1))}}</view> |
|||
<view class="podium-count">{{displayCount(rankItem(1))}}单</view> |
|||
<view class="podium-base">NO.2</view> |
|||
</view> |
|||
<view class="podium-card podium-first" :class="{'podium-empty': !rankItem(0).workerName}"> |
|||
<view class="podium-crown gold">1</view> |
|||
<image class="podium-avatar champion" :src="rankItem(0).icon || '/static/images/img/songshu.png'" mode="aspectFill"></image> |
|||
<view class="podium-name">{{displayName(rankItem(0))}}</view> |
|||
<view class="podium-count">{{displayCount(rankItem(0))}}单</view> |
|||
<view class="podium-base">NO.1</view> |
|||
</view> |
|||
<view class="podium-card podium-third" :class="{'podium-empty': !rankItem(2).workerName}"> |
|||
<view class="podium-crown bronze">3</view> |
|||
<image class="podium-avatar" :src="rankItem(2).icon || '/static/images/img/songshu.png'" mode="aspectFill"></image> |
|||
<view class="podium-name">{{displayName(rankItem(2))}}</view> |
|||
<view class="podium-count">{{displayCount(rankItem(2))}}单</view> |
|||
<view class="podium-base">NO.3</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="content-list"> |
|||
<view class="list-head"> |
|||
<view> |
|||
<view class="list-title">今日榜单</view> |
|||
<view class="list-subtitle">多劳多得，冲刺奖励</view> |
|||
</view> |
|||
<view class="list-total">{{fireList.length}} 人上榜</view> |
|||
</view> |
|||
<view v-if="fireList.length == 0" class="empty-box"> |
|||
<image src="/static/images/img/songshu.png" mode="aspectFit"></image> |
|||
<view>暂无配送员上榜</view> |
|||
</view> |
|||
<view v-for="(item,index) in fireList" :key="index" class="content-item"> |
|||
<view class="rank-badge" :class="rankClass(index)"> |
|||
<uni-icons v-if="index < 3" type="medal-filled" size="22" :color="medalColor(index)"></uni-icons> |
|||
<text v-else>{{index + 1}}</text> |
|||
</view> |
|||
<image class="box-avatar" :src="item.icon || '/static/images/img/songshu.png'" mode="aspectFill"></image> |
|||
<view class="box-right"> |
|||
<view class="box-right-num">{{item.workerName == null?'暂无':item.workerName}}</view> |
|||
<view class="box-right-name">当前排名第 {{index + 1}}</view> |
|||
</view> |
|||
<view class="order-pill"> |
|||
<text>{{item.orderCount || 0}}</text> 单 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
range:[], |
|||
fireList:[], |
|||
indexList: [], |
|||
reward:'', |
|||
rewardList:[], |
|||
bigImg:[], |
|||
swiperDotIndex:0, |
|||
|
|||
}; |
|||
}, |
|||
onShow(){ |
|||
this.getMonth() |
|||
this.getFireList() |
|||
}, |
|||
onReachBottom() { |
|||
this.getFireList(); |
|||
|
|||
}, |
|||
methods: { |
|||
rankItem(index) { |
|||
return this.fireList[index] || {} |
|||
}, |
|||
displayName(item) { |
|||
return item.workerName || '虚位以待' |
|||
}, |
|||
displayCount(item) { |
|||
return item.orderCount || 0 |
|||
}, |
|||
rankClass(index) { |
|||
if (index == 0) return 'rank-first' |
|||
if (index == 1) return 'rank-second' |
|||
if (index == 2) return 'rank-third' |
|||
return '' |
|||
}, |
|||
medalColor(index) { |
|||
if (index == 0) return '#f8c33c' |
|||
if (index == 1) return '#b9c2d1' |
|||
return '#d99a55' |
|||
}, |
|||
lunbochange(e) { |
|||
this.current = e.detail.current |
|||
}, |
|||
getFireList(){ |
|||
this.NB.sendRequest("/mall/delivery/countOrdersLimit", { |
|||
regionId: JSON.parse(uni.getStorageSync('area')).id |
|||
}, true, 'GET', 'application/x-www-form-urlencoded').then(res => { |
|||
if (res.code == 200) { |
|||
if(res.result.data != null){ |
|||
this.fireList = res.result.data |
|||
} |
|||
|
|||
if(res.result.reward != undefined && res.result.reward != null){ |
|||
this.rewardList = res.result.reward |
|||
this.reward = '排位规则：' |
|||
for(let i = 0; i < res.result.reward.length; i++){ |
|||
this.reward += '第' + res.result.reward[i].orderNum + '名 - 奖励' + res.result.reward[i].reward + '元；' |
|||
} |
|||
this.reward += '晚上10点截止' |
|||
} |
|||
} else { |
|||
uni.showToast({ |
|||
title: res.message, |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
uni.hideLoading() |
|||
}) |
|||
}, |
|||
searchList(res) { |
|||
this.pageNum = 1; |
|||
this.fireList = []; |
|||
this.getFireList() |
|||
}, |
|||
//获取当月1日到当前时间 |
|||
getMonth() { |
|||
let date = new Date() |
|||
let year = date.getFullYear().toString() //'年' |
|||
let month = date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1).toString():(date.getMonth()+1).toString() //'月' |
|||
let da = date.getDate() < 10 ? '0'+date.getDate().toString():date.getDate().toString() //'日' |
|||
let end = year + '-' + month + '-' + da //当天 |
|||
let beg = year + '-' + month + '-01' //当月第一天 |
|||
this.range = [beg,end] |
|||
}, |
|||
largeImg(img) { |
|||
if((img.productPicture == null &&img.productPictures == null) || (img.productPicture == '' &&img.productPictures == '') || (img.productPicture == null &&img.productPictures == '') || (img.productPicture == '' &&img.productPictures == null)){ |
|||
uni.showToast({ |
|||
title: "暂无可展示的图片", |
|||
icon: 'none' |
|||
}); |
|||
return |
|||
} |
|||
this.bigImg = [] |
|||
if(img.productPicture != null){ |
|||
let data = { |
|||
productPicture:img.productPicture |
|||
} |
|||
this.bigImg.push(data) |
|||
} |
|||
if(img.productPictures != null){ |
|||
for(let i=0;i<img.productPictures.length;i++){ |
|||
this.bigImg.push(img.productPictures[i]) |
|||
} |
|||
} |
|||
this.$refs.imgPopup.open() |
|||
}, |
|||
back() { |
|||
uni.navigateBack() |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.ranking-page { |
|||
min-height: 100vh; |
|||
background: linear-gradient(180deg, #f0ffe1 0%, #eafff9 34%, #f6f8ff 100%); |
|||
padding-bottom: 60rpx; |
|||
} |
|||
|
|||
.title { |
|||
width: 100%; |
|||
background: linear-gradient(135deg, #e3ff96 0%, #c9ffcf 42%, #a6ffea 100%); |
|||
} |
|||
|
|||
.title-sreach { |
|||
width: 100%; |
|||
display: flex; |
|||
height: 176rpx; |
|||
position: relative; |
|||
} |
|||
|
|||
.back-btn { |
|||
padding-top: 100rpx; |
|||
width: 72rpx; |
|||
height: 72rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.title-name { |
|||
padding-top: 100rpx; |
|||
font-size: 36rpx; |
|||
font-weight: 800; |
|||
color: #20243a; |
|||
flex: 1; |
|||
text-align: center; |
|||
letter-spacing: 2rpx; |
|||
} |
|||
|
|||
.notice-wrap { |
|||
position: relative; |
|||
z-index: 3; |
|||
margin: 0 24rpx 20rpx; |
|||
} |
|||
|
|||
.reward-card { |
|||
display: flex; |
|||
align-items: center; |
|||
height: 82rpx; |
|||
padding: 0 14rpx 0 16rpx; |
|||
border: 1px solid rgba(119, 238, 204, 0.58); |
|||
border-radius: 28rpx; |
|||
background: |
|||
linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(245, 255, 247, 0.88) 100%), |
|||
linear-gradient(90deg, #e3ff96, #a6ffea); |
|||
box-shadow: 0 16rpx 34rpx rgba(55, 190, 166, 0.14); |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.reward-title { |
|||
flex-shrink: 0; |
|||
display: flex; |
|||
align-items: center; |
|||
padding-right: 16rpx; |
|||
color: #113c36; |
|||
font-size: 24rpx; |
|||
font-weight: 800; |
|||
} |
|||
|
|||
.reward-icon { |
|||
width: 42rpx; |
|||
height: 42rpx; |
|||
margin-right: 8rpx; |
|||
border-radius: 50%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background: linear-gradient(135deg, #e3ff96, #a6ffea); |
|||
box-shadow: 0 8rpx 16rpx rgba(74, 206, 163, 0.2); |
|||
color: #0f5a50; |
|||
font-size: 22rpx; |
|||
font-weight: 900; |
|||
} |
|||
|
|||
.reward-marquee { |
|||
flex: 1; |
|||
min-width: 0; |
|||
height: 54rpx; |
|||
overflow: hidden; |
|||
border-radius: 999rpx; |
|||
background: rgba(255, 255, 255, 0.58); |
|||
} |
|||
|
|||
.reward-marquee-inner { |
|||
display: inline-block; |
|||
min-width: 100%; |
|||
padding-left: 100%; |
|||
padding-right: 18rpx; |
|||
box-sizing: border-box; |
|||
height: 54rpx; |
|||
line-height: 54rpx; |
|||
white-space: nowrap; |
|||
color: #0f5a50; |
|||
font-size: 24rpx; |
|||
font-weight: 800; |
|||
animation: reward-marquee 16s linear infinite; |
|||
} |
|||
|
|||
@keyframes reward-marquee { |
|||
0% { |
|||
transform: translateX(0); |
|||
} |
|||
100% { |
|||
transform: translateX(-100%); |
|||
} |
|||
} |
|||
|
|||
.hero { |
|||
position: relative; |
|||
overflow: hidden; |
|||
margin: 0 24rpx; |
|||
min-height: 610rpx; |
|||
border-radius: 0 0 42rpx 42rpx; |
|||
background: |
|||
radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.38) 0, rgba(255, 255, 255, 0.2) 62rpx, transparent 64rpx), |
|||
linear-gradient(145deg, #86f2d8 0%, #8edfff 46%, #9aa7ff 100%); |
|||
box-shadow: 0 22rpx 44rpx rgba(68, 202, 185, 0.24); |
|||
} |
|||
|
|||
.hero::before { |
|||
content: ''; |
|||
position: absolute; |
|||
left: -120rpx; |
|||
top: -180rpx; |
|||
width: 620rpx; |
|||
height: 620rpx; |
|||
border-radius: 50%; |
|||
background: rgba(227, 255, 150, 0.2); |
|||
} |
|||
|
|||
.hero::after { |
|||
content: ''; |
|||
position: absolute; |
|||
right: -160rpx; |
|||
bottom: -200rpx; |
|||
width: 520rpx; |
|||
height: 520rpx; |
|||
border-radius: 50%; |
|||
background: rgba(255, 255, 255, 0.16); |
|||
} |
|||
|
|||
.hero-glow { |
|||
position: absolute; |
|||
border-radius: 50%; |
|||
filter: blur(2rpx); |
|||
} |
|||
|
|||
.hero-glow-one { |
|||
right: 74rpx; |
|||
top: 72rpx; |
|||
width: 92rpx; |
|||
height: 92rpx; |
|||
background: rgba(227, 255, 150, 0.58); |
|||
} |
|||
|
|||
.hero-glow-two { |
|||
left: 66rpx; |
|||
top: 238rpx; |
|||
width: 42rpx; |
|||
height: 42rpx; |
|||
background: rgba(255, 255, 255, 0.32); |
|||
} |
|||
|
|||
.hero-copy { |
|||
position: relative; |
|||
z-index: 2; |
|||
padding: 42rpx 40rpx 18rpx; |
|||
color: #fff; |
|||
} |
|||
|
|||
.hero-tag { |
|||
display: inline-flex; |
|||
padding: 10rpx 22rpx; |
|||
border-radius: 999rpx; |
|||
background: rgba(255, 255, 255, 0.24); |
|||
font-size: 24rpx; |
|||
color: #fff; |
|||
} |
|||
|
|||
.hero-title { |
|||
font-size: 48rpx; |
|||
font-weight: 900; |
|||
letter-spacing: 2rpx; |
|||
} |
|||
|
|||
.hero-subtitle { |
|||
margin-top: 10rpx; |
|||
font-size: 25rpx; |
|||
color: rgba(255, 255, 255, 0.82); |
|||
} |
|||
|
|||
.podium { |
|||
position: relative; |
|||
z-index: 2; |
|||
display: flex; |
|||
align-items: flex-end; |
|||
justify-content: space-between; |
|||
padding: 22rpx 28rpx 34rpx; |
|||
} |
|||
|
|||
.podium-card { |
|||
width: 204rpx; |
|||
min-height: 312rpx; |
|||
padding: 24rpx 16rpx 0; |
|||
box-sizing: border-box; |
|||
border-radius: 34rpx 34rpx 20rpx 20rpx; |
|||
background: rgba(255, 255, 255, 0.95); |
|||
text-align: center; |
|||
box-shadow: 0 18rpx 32rpx rgba(34, 54, 136, 0.18); |
|||
} |
|||
|
|||
.podium-first { |
|||
width: 232rpx; |
|||
min-height: 368rpx; |
|||
margin-bottom: 18rpx; |
|||
background: linear-gradient(180deg, #fff9dc 0%, #fff 58%); |
|||
} |
|||
|
|||
.podium-second { |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
.podium-third { |
|||
margin-bottom: -10rpx; |
|||
} |
|||
|
|||
.podium-empty { |
|||
opacity: 0.72; |
|||
} |
|||
|
|||
.podium-crown { |
|||
width: 54rpx; |
|||
height: 54rpx; |
|||
margin: 0 auto 14rpx; |
|||
border-radius: 50%; |
|||
line-height: 54rpx; |
|||
font-size: 28rpx; |
|||
font-weight: 900; |
|||
color: #fff; |
|||
} |
|||
|
|||
.gold { |
|||
background: linear-gradient(135deg, #ffc72e, #ff9f1c); |
|||
box-shadow: 0 8rpx 18rpx rgba(255, 176, 31, 0.36); |
|||
} |
|||
|
|||
.silver { |
|||
background: linear-gradient(135deg, #dbe4f1, #aeb9c9); |
|||
} |
|||
|
|||
.bronze { |
|||
background: linear-gradient(135deg, #e6ad70, #c98145); |
|||
} |
|||
|
|||
.podium-avatar { |
|||
width: 108rpx; |
|||
height: 108rpx; |
|||
border-radius: 50%; |
|||
border: 6rpx solid #fff; |
|||
box-shadow: 0 10rpx 22rpx rgba(40, 67, 146, 0.16); |
|||
} |
|||
|
|||
.podium-avatar.champion { |
|||
width: 128rpx; |
|||
height: 128rpx; |
|||
} |
|||
|
|||
.podium-name { |
|||
margin-top: 16rpx; |
|||
font-size: 28rpx; |
|||
font-weight: 800; |
|||
color: #20243a; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
} |
|||
|
|||
.podium-count { |
|||
margin-top: 8rpx; |
|||
font-size: 24rpx; |
|||
color: #6b7280; |
|||
} |
|||
|
|||
.podium-base { |
|||
margin: 22rpx -16rpx 0; |
|||
height: 72rpx; |
|||
line-height: 72rpx; |
|||
border-radius: 0 0 20rpx 20rpx; |
|||
background: linear-gradient(135deg, #3655d9, #6c7dff); |
|||
font-size: 30rpx; |
|||
font-weight: 900; |
|||
color: rgba(255, 255, 255, 0.9); |
|||
} |
|||
|
|||
.podium-first .podium-base { |
|||
background: linear-gradient(135deg, #37cfa8, #58b8ff); |
|||
} |
|||
|
|||
.podium-second .podium-base { |
|||
background: linear-gradient(135deg, #75d6cf, #80a7ff); |
|||
} |
|||
|
|||
.podium-third .podium-base { |
|||
background: linear-gradient(135deg, #7fdcb9, #8f9fff); |
|||
} |
|||
|
|||
.content-list { |
|||
width: 92%; |
|||
margin: -20rpx auto 0; |
|||
position: relative; |
|||
z-index: 4; |
|||
border-radius: 34rpx; |
|||
background: #fff; |
|||
box-shadow: 0 18rpx 40rpx rgba(38, 48, 80, 0.09); |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.list-head { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 32rpx 30rpx 22rpx; |
|||
} |
|||
|
|||
.list-title { |
|||
font-size: 34rpx; |
|||
font-weight: 900; |
|||
color: #20243a; |
|||
} |
|||
|
|||
.list-subtitle { |
|||
margin-top: 8rpx; |
|||
font-size: 24rpx; |
|||
color: #99a1b3; |
|||
} |
|||
|
|||
.list-total { |
|||
padding: 10rpx 20rpx; |
|||
border-radius: 999rpx; |
|||
background: #f1f5ff; |
|||
font-size: 24rpx; |
|||
color: #5772e8; |
|||
font-weight: 700; |
|||
} |
|||
|
|||
.empty-box { |
|||
padding: 48rpx 0 58rpx; |
|||
text-align: center; |
|||
color: #98a1b2; |
|||
font-size: 26rpx; |
|||
} |
|||
|
|||
.empty-box image { |
|||
width: 136rpx; |
|||
height: 136rpx; |
|||
margin-bottom: 12rpx; |
|||
} |
|||
|
|||
.content-item { |
|||
min-height: 148rpx; |
|||
margin: 0 24rpx; |
|||
padding: 20rpx 0; |
|||
box-sizing: border-box; |
|||
font-size: 30rpx; |
|||
border-top: 1px solid #f1f2f6; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.rank-badge { |
|||
width: 58rpx; |
|||
height: 58rpx; |
|||
margin-right: 18rpx; |
|||
border-radius: 18rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background: #f5f6fa; |
|||
color: #8b93a7; |
|||
font-size: 26rpx; |
|||
font-weight: 800; |
|||
} |
|||
|
|||
.rank-first { |
|||
background: #fff6d9; |
|||
} |
|||
|
|||
.rank-second { |
|||
background: #f0f4fa; |
|||
} |
|||
|
|||
.rank-third { |
|||
background: #fff0df; |
|||
} |
|||
|
|||
.box-avatar { |
|||
width: 94rpx; |
|||
height: 94rpx; |
|||
margin-right: 22rpx; |
|||
border-radius: 50%; |
|||
background: #f4f6fb; |
|||
} |
|||
|
|||
.box-right { |
|||
flex: 1; |
|||
min-width: 0; |
|||
} |
|||
|
|||
.box-right-num { |
|||
color: #20243a; |
|||
font-weight: 800; |
|||
font-size: 30rpx; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
} |
|||
|
|||
.box-right-name { |
|||
margin-top: 10rpx; |
|||
font-size: 24rpx; |
|||
color: #9aa2b4; |
|||
} |
|||
|
|||
.order-pill { |
|||
min-width: 112rpx; |
|||
padding: 12rpx 18rpx; |
|||
border-radius: 999rpx; |
|||
background: linear-gradient(135deg, #fff7e2, #fff0d2); |
|||
color: #9b6517; |
|||
font-size: 24rpx; |
|||
text-align: center; |
|||
} |
|||
|
|||
.order-pill text { |
|||
font-size: 34rpx; |
|||
font-weight: 900; |
|||
color: #ff9818; |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
@ -0,0 +1,814 @@ |
|||
<template> |
|||
<!-- 配送员已完成订单列表 --> |
|||
<view class="page1"> |
|||
<view class="worker-order-fixed"> |
|||
<view class="title"> |
|||
<view class="title-sreach"> |
|||
<view class="back-btn" @tap="back"> |
|||
<uni-icons type="left" size="28"></uni-icons> |
|||
</view> |
|||
<view class="title-name"> |
|||
已完成订单 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="summary-card"> |
|||
<view class="summary-label">共计送达</view> |
|||
<view class="summary-count">{{totalCount}}<text>单</text></view> |
|||
</view> |
|||
|
|||
<view class="search-card"> |
|||
<view class="date-picker-wrap"> |
|||
<uni-datetime-picker :clear-icon="false" v-model="range" type="daterange" @change="searchList" /> |
|||
</view> |
|||
<view class="reset-btn" @tap="resetDateRange">重置</view> |
|||
</view> |
|||
</view> |
|||
<view class="worker-order-fixed-holder"></view> |
|||
|
|||
<view class="list-wrap"> |
|||
<view class="box1" @tap="goDetail(item)" v-for="(item,index) in orderList" :key="index"> |
|||
<view class="order-head"> |
|||
<view class="type-tag" :class="'type-' + item.deliveryType"> |
|||
{{deliveryTypeText(item.deliveryType)}} |
|||
</view> |
|||
<view class="order-code" v-if="item.numberCode"> |
|||
#{{orderCodeText(item.numberCode)}} |
|||
</view> |
|||
<view class="done-tag">已送达</view> |
|||
</view> |
|||
|
|||
<view class="time-row"> |
|||
<text v-if="item.mustFinishTime">{{item.mustFinishTime | formatHourMinute}}前送达</text> |
|||
<text v-else>{{item.createTime | formatISOTime}}</text> |
|||
</view> |
|||
|
|||
<view class="time-detail"> |
|||
<view class="time-item" v-if="item.acceptTime"> |
|||
<text>接单</text>{{item.acceptTime | formatISOTime}} |
|||
</view> |
|||
<view class="time-item" v-if="item.arriveTime"> |
|||
<text>到店</text>{{item.arriveTime | formatISOTime}} |
|||
</view> |
|||
<view class="time-item" v-if="item.getTime"> |
|||
<text>取货</text>{{item.getTime | formatISOTime}} |
|||
</view> |
|||
<view class="time-item" v-if="item.finishTime"> |
|||
<text>送达</text>{{item.finishTime | formatISOTime}} |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="remark" v-if="item.remark != '' && item.remark != null"> |
|||
备注：{{item.remark}} |
|||
</view> |
|||
|
|||
<view class="extra-info" v-if="item.deliveryType == 2 || item.deliveryType == 3"> |
|||
<text>{{item.allCount != null ? item.allCount : 0}}件</text> |
|||
<text v-if="item.getCodes != null">取件码：{{item.getCodes}}</text> |
|||
<text v-if="item.phoneNumber != null">尾号：{{item.phoneNumber}}</text> |
|||
</view> |
|||
|
|||
<view class="route-box"> |
|||
<view class="route-line"> |
|||
<view class="route-dot get">取</view> |
|||
<view class="route-main"> |
|||
<view class="route-name">{{item.shopName || '取货点'}}</view> |
|||
<view class="route-address">{{item.shopAddress || '暂无取货地址'}}</view> |
|||
</view> |
|||
</view> |
|||
<view class="route-line"> |
|||
<view class="route-dot send">送</view> |
|||
<view class="route-main"> |
|||
<view class="route-name">{{item.receiverName || '收货人'}}</view> |
|||
<view class="route-address">{{item.receiverAddress || '暂无收货地址'}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="goods-row" v-if="item.goodsList && item.goodsList.length > 0" @tap.stop="productDetail(item)"> |
|||
<view class="goods-title"> |
|||
商品详情 |
|||
</view> |
|||
<view class="goods-desc"> |
|||
共{{item.goodsNum}}件，点击查看规格和数量 |
|||
</view> |
|||
<uni-icons type="right" size="14" color="#7a8582"></uni-icons> |
|||
</view> |
|||
|
|||
<view class="fee-row"> |
|||
<view class="big-tag" v-if="item.isBig != null && item.isBig == 1">超大/超重</view> |
|||
<view class="fee-text"> |
|||
配送佣金 <text>￥{{(item.deliveryFee + item.deliveryFeeMarketplace).toFixed(2)}}</text> |
|||
</view> |
|||
<view class="market-fee" v-if="item.deliveryFeeMarketplace != null"> |
|||
含平台￥{{item.deliveryFeeMarketplace}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="empty-box" v-if="orderList.length == 0 && loadStatus == 'nomore'"> |
|||
暂无已完成订单 |
|||
</view> |
|||
</view> |
|||
|
|||
<uni-popup ref="productPopup" background-color="transparent"> |
|||
<view class="product-popup-content"> |
|||
<view class="product-popup-header"> |
|||
<view class="product-popup-title">商品详情</view> |
|||
<view class="product-popup-subtitle">请核对商品规格和数量</view> |
|||
</view> |
|||
<view class="product-popup-list" v-if="productData != null && productData.length > 0"> |
|||
<view class="product-popup-card" v-for="(item1,index1) in productData" :key="index1"> |
|||
<view class="product-popup-img"> |
|||
<img :src="item1.productPicture" alt=""> |
|||
</view> |
|||
<view class="product-popup-info"> |
|||
<view class="product-popup-name"> |
|||
{{item1.productName}} |
|||
</view> |
|||
<view class="product-popup-spec"> |
|||
<text class="product-popup-label">规格</text> |
|||
<text class="product-popup-spec-text">{{item1.specs | delNode}}</text> |
|||
</view> |
|||
</view> |
|||
<view class="product-popup-quantity"> |
|||
<view class="product-popup-quantity-num">x{{item1.quantity}}</view> |
|||
<view class="product-popup-quantity-label">数量</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="product-popup-empty" v-else> |
|||
暂无商品详情 |
|||
</view> |
|||
</view> |
|||
</uni-popup> |
|||
|
|||
<view class="bottom-space"></view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
loadStatus: 'more', |
|||
searchForm: { |
|||
status: 3, |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
order: '', |
|||
regionId: JSON.parse(uni.getStorageSync('area')).id, |
|||
deliveryType: null, |
|||
workerId: uni.getStorageSync('worker').workerId, |
|||
startDate: '', |
|||
endDate: '' |
|||
}, |
|||
range: [], |
|||
productData: [], |
|||
totalPages: 1, |
|||
totalCount: 0, |
|||
tuanzhangOrder:[], |
|||
orderList: [], |
|||
currentIndex: 10 |
|||
} |
|||
}, |
|||
onReachBottom() { |
|||
if (this.searchForm.pageNum >= this.totalPages) return; |
|||
this.searchForm.pageNum++; |
|||
this.getList(); |
|||
}, |
|||
filters: { |
|||
formatHourMinute(value) { |
|||
if (!value) return ''; |
|||
const date = new Date(value); |
|||
const day = String(date.getDate()).padStart(2, '0'); |
|||
const hour = String(date.getHours()).padStart(2, '0'); |
|||
const minute = String(date.getMinutes()).padStart(2, '0'); |
|||
return `${day}日${hour}:${minute}`; |
|||
}, |
|||
formatISOTime(isoString) { |
|||
const date = new Date(isoString); |
|||
const year = date.getFullYear(); |
|||
const month = (date.getMonth() + 1).toString().padStart(2, '0'); |
|||
const day = date.getDate().toString().padStart(2, '0'); |
|||
const hours = date.getHours().toString().padStart(2, '0'); |
|||
const minutes = date.getMinutes().toString().padStart(2, '0'); |
|||
const seconds = date.getSeconds().toString().padStart(2, '0'); |
|||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; |
|||
}, |
|||
delNode(data) { |
|||
let str; |
|||
if (typeof data === 'object' && data !== null) { |
|||
str = JSON.stringify(data); |
|||
} else if (typeof data === 'string') { |
|||
str = data; |
|||
} else { |
|||
str = String(data); |
|||
} |
|||
return str.replace(/[{}"]/g, ''); |
|||
} |
|||
}, |
|||
onShow() { |
|||
this.searchForm.regionId = JSON.parse(uni.getStorageSync('area')).id |
|||
}, |
|||
onLoad(option) { |
|||
if (option.index) { |
|||
this.searchForm.searchStatus = option.index |
|||
this.currentIndex = option.index |
|||
} |
|||
if (option.today == 1) { |
|||
const today = this.formatDate(new Date()) |
|||
this.range = [today, today] |
|||
this.searchForm.startDate = today |
|||
this.searchForm.endDate = today |
|||
} |
|||
this.getList() |
|||
}, |
|||
methods: { |
|||
getList() { |
|||
this.loadStatus = 'loading' |
|||
let that = this |
|||
const requestForm = Object.assign({}, this.searchForm) |
|||
delete requestForm.shopId |
|||
this.NB.sendRequest("/mall/delivery/pagebyworkerHistory", requestForm, true, 'POST', 'application/json').then(res => { |
|||
that.loadStatus = 'nomore'; |
|||
if (res.code == 200) { |
|||
if (that.searchForm.pageNum == 1) { |
|||
that.orderList = res.result.records; |
|||
} else { |
|||
that.orderList = [...that.orderList, ...res.result.records] |
|||
} |
|||
for(let i=0;i<that.orderList.length;i++){ |
|||
that.orderList[i].goodsNum = 0 |
|||
if (that.orderList[i].goodsList && that.orderList[i].goodsList.length) { |
|||
for(let m=0;m<that.orderList[i].goodsList.length;m++){ |
|||
that.orderList[i].goodsNum += that.orderList[i].goodsList[m].quantity |
|||
} |
|||
} |
|||
} |
|||
that.totalPages = res.result.pages; |
|||
that.totalCount = res.result.total || that.orderList.length; |
|||
that.$forceUpdate(); |
|||
} else { |
|||
uni.showToast({ |
|||
title: res.message, |
|||
icon: 'none' |
|||
}); |
|||
return; |
|||
} |
|||
uni.hideLoading(); |
|||
}) |
|||
}, |
|||
deliveryTypeText(type) { |
|||
if (type == 1) return '外卖'; |
|||
if (type == 2) return '代取快递'; |
|||
if (type == 3) return '代跑腿'; |
|||
return '配送'; |
|||
}, |
|||
orderCodeText(numberCode) { |
|||
if (!numberCode) return ''; |
|||
if (numberCode.length > 14) return '多订单'; |
|||
return numberCode.endsWith("+") ? numberCode.slice(0, -1) : numberCode; |
|||
}, |
|||
formatDate(date) { |
|||
const year = date.getFullYear(); |
|||
const month = String(date.getMonth() + 1).padStart(2, '0'); |
|||
const day = String(date.getDate()).padStart(2, '0'); |
|||
return `${year}-${month}-${day}`; |
|||
}, |
|||
productDetail(item) { |
|||
this.productData = item.goodsList || []; |
|||
this.$refs.productPopup.open() |
|||
}, |
|||
searchList(range) { |
|||
const dateRange = range || this.range || []; |
|||
this.searchForm.startDate = dateRange[0] || ''; |
|||
this.searchForm.endDate = dateRange[1] || ''; |
|||
this.searchForm.pageNum = 1; |
|||
this.getList(); |
|||
}, |
|||
resetDateRange() { |
|||
this.range = []; |
|||
this.searchForm.startDate = ''; |
|||
this.searchForm.endDate = ''; |
|||
this.searchForm.pageNum = 1; |
|||
this.getList(); |
|||
}, |
|||
goDetail(item) { |
|||
uni.navigateTo({ |
|||
url: '/package2/shop/orderDetail?type=work&id=' + item.orderId |
|||
}) |
|||
}, |
|||
back() { |
|||
uni.navigateBack() |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
page { |
|||
width: 100%; |
|||
height: 100%; |
|||
font-size: 24rpx; |
|||
background: #F5F8F5; |
|||
color: #00231C; |
|||
} |
|||
|
|||
.page1 { |
|||
width: 100%; |
|||
height: 100%; |
|||
font-size: 24rpx; |
|||
position: relative; |
|||
padding-bottom: 40rpx; |
|||
} |
|||
|
|||
.worker-order-fixed { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
z-index: 1000; |
|||
padding-bottom: 12rpx; |
|||
background: #F5F8F5; |
|||
} |
|||
|
|||
.worker-order-fixed-holder { |
|||
height: 462rpx; |
|||
} |
|||
|
|||
.title { |
|||
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat; |
|||
width: 100%; |
|||
height: 360rpx; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.title-sreach { |
|||
width: 100%; |
|||
display: flex; |
|||
height: 200rpx; |
|||
position: relative; |
|||
} |
|||
|
|||
.back-btn { |
|||
padding-top: 110rpx; |
|||
} |
|||
|
|||
.title-name { |
|||
padding-top: 110rpx; |
|||
font-size: 36rpx; |
|||
font-weight: 700; |
|||
flex: 1; |
|||
text-align: center; |
|||
} |
|||
|
|||
.summary-card { |
|||
width: 92%; |
|||
height: 128rpx; |
|||
margin: -156rpx auto 24rpx; |
|||
padding: 24rpx 28rpx; |
|||
box-sizing: border-box; |
|||
display: flex; |
|||
align-items: center; |
|||
border-radius: 28rpx; |
|||
background: |
|||
radial-gradient(circle at 92% 0, rgba(166, 255, 234, 0.78) 0, rgba(166, 255, 234, 0) 170rpx), |
|||
#fff; |
|||
box-shadow: 0 14rpx 34rpx rgba(0, 35, 28, 0.08); |
|||
} |
|||
|
|||
.summary-label { |
|||
flex: 1; |
|||
color: #61716d; |
|||
font-size: 26rpx; |
|||
font-weight: 700; |
|||
} |
|||
|
|||
.summary-count { |
|||
color: #00231C; |
|||
font-size: 52rpx; |
|||
font-weight: 900; |
|||
line-height: 64rpx; |
|||
} |
|||
|
|||
.summary-count text { |
|||
margin-left: 6rpx; |
|||
color: #61716d; |
|||
font-size: 24rpx; |
|||
font-weight: 700; |
|||
} |
|||
|
|||
.list-wrap { |
|||
width: 92%; |
|||
margin: 0 auto; |
|||
position: relative; |
|||
z-index: 1; |
|||
} |
|||
|
|||
.search-card { |
|||
width: 92%; |
|||
margin: 0 auto 8rpx; |
|||
padding: 16rpx 18rpx; |
|||
box-sizing: border-box; |
|||
display: flex; |
|||
align-items: center; |
|||
border-radius: 22rpx; |
|||
background: #fff; |
|||
box-shadow: 0 10rpx 24rpx rgba(0, 35, 28, 0.05); |
|||
} |
|||
|
|||
.date-picker-wrap { |
|||
flex: 1; |
|||
min-width: 0; |
|||
} |
|||
|
|||
.reset-btn { |
|||
width: 88rpx; |
|||
height: 56rpx; |
|||
margin-left: 14rpx; |
|||
border-radius: 56rpx; |
|||
background: rgba(166, 255, 234, 0.48); |
|||
color: #126255; |
|||
font-size: 24rpx; |
|||
font-weight: 800; |
|||
line-height: 56rpx; |
|||
text-align: center; |
|||
} |
|||
|
|||
.box1 { |
|||
width: 100%; |
|||
margin: 18rpx auto; |
|||
background: #fff; |
|||
border-radius: 24rpx; |
|||
padding: 22rpx; |
|||
box-sizing: border-box; |
|||
box-shadow: 0 10rpx 28rpx rgba(0, 35, 28, 0.05); |
|||
} |
|||
|
|||
.order-head { |
|||
display: flex; |
|||
align-items: center; |
|||
min-height: 44rpx; |
|||
} |
|||
|
|||
.type-tag { |
|||
height: 40rpx; |
|||
line-height: 40rpx; |
|||
padding: 0 16rpx; |
|||
border-radius: 40rpx; |
|||
font-size: 22rpx; |
|||
font-weight: 700; |
|||
} |
|||
|
|||
.type-1 { |
|||
background: rgba(255, 233, 89, 1); |
|||
} |
|||
|
|||
.type-2 { |
|||
background: rgba(255, 220, 199, 1); |
|||
} |
|||
|
|||
.type-3 { |
|||
background: rgba(130, 255, 130, 1); |
|||
} |
|||
|
|||
.order-code { |
|||
flex: 1; |
|||
min-width: 0; |
|||
margin-left: 14rpx; |
|||
color: #60716c; |
|||
font-size: 22rpx; |
|||
height: 40rpx; |
|||
line-height: 40rpx; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.done-tag { |
|||
height: 38rpx; |
|||
line-height: 38rpx; |
|||
padding: 0 14rpx; |
|||
border-radius: 12rpx; |
|||
background: rgba(166, 255, 234, 0.5); |
|||
color: #0b665a; |
|||
font-size: 22rpx; |
|||
font-weight: 700; |
|||
} |
|||
|
|||
.time-row { |
|||
margin-top: 12rpx; |
|||
color: #223b36; |
|||
font-size: 28rpx; |
|||
font-weight: 800; |
|||
line-height: 38rpx; |
|||
} |
|||
|
|||
.time-detail { |
|||
display: grid; |
|||
grid-template-columns: 1fr 1fr; |
|||
gap: 8rpx 14rpx; |
|||
margin-top: 12rpx; |
|||
padding: 12rpx 14rpx; |
|||
border-radius: 16rpx; |
|||
background: rgba(247, 248, 248, 0.58); |
|||
} |
|||
|
|||
.time-item { |
|||
min-width: 0; |
|||
color: #6f7c78; |
|||
font-size: 20rpx; |
|||
line-height: 30rpx; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.time-item text { |
|||
margin-right: 8rpx; |
|||
color: #243d38; |
|||
font-weight: 800; |
|||
} |
|||
|
|||
.remark, |
|||
.extra-info { |
|||
margin-top: 14rpx; |
|||
padding: 12rpx 16rpx; |
|||
border-radius: 16rpx; |
|||
background: rgba(247, 248, 248, 0.72); |
|||
color: #5f6c69; |
|||
font-size: 22rpx; |
|||
line-height: 34rpx; |
|||
} |
|||
|
|||
.extra-info { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
gap: 12rpx 24rpx; |
|||
} |
|||
|
|||
.route-box { |
|||
margin-top: 16rpx; |
|||
padding: 14rpx 16rpx; |
|||
border: 1px solid rgba(166, 255, 234, 0.78); |
|||
border-radius: 20rpx; |
|||
} |
|||
|
|||
.route-line { |
|||
display: flex; |
|||
padding: 8rpx 0; |
|||
} |
|||
|
|||
.route-dot { |
|||
width: 38rpx; |
|||
height: 38rpx; |
|||
line-height: 38rpx; |
|||
flex-shrink: 0; |
|||
margin: 3rpx 14rpx 0 0; |
|||
text-align: center; |
|||
border-radius: 38rpx; |
|||
background: #00231C; |
|||
color: #fff; |
|||
font-size: 20rpx; |
|||
font-weight: 700; |
|||
} |
|||
|
|||
.route-dot.send { |
|||
background: #8adfca; |
|||
color: #00231C; |
|||
} |
|||
|
|||
.route-main { |
|||
flex: 1; |
|||
min-width: 0; |
|||
} |
|||
|
|||
.route-name { |
|||
color: #152d28; |
|||
font-size: 25rpx; |
|||
font-weight: 800; |
|||
line-height: 34rpx; |
|||
} |
|||
|
|||
.route-address { |
|||
margin-top: 4rpx; |
|||
color: #7a8582; |
|||
font-size: 22rpx; |
|||
line-height: 32rpx; |
|||
word-break: break-all; |
|||
} |
|||
|
|||
.goods-row { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-top: 16rpx; |
|||
padding: 14rpx 16rpx; |
|||
border-radius: 18rpx; |
|||
background: rgba(247, 248, 248, 0.72); |
|||
} |
|||
|
|||
.goods-title { |
|||
color: #172f2a; |
|||
font-size: 24rpx; |
|||
font-weight: 900; |
|||
} |
|||
|
|||
.goods-desc { |
|||
flex: 1; |
|||
min-width: 0; |
|||
margin-left: 16rpx; |
|||
color: #7a8582; |
|||
font-size: 22rpx; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.fee-row { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-top: 16rpx; |
|||
color: #64726f; |
|||
font-size: 24rpx; |
|||
line-height: 40rpx; |
|||
} |
|||
|
|||
.big-tag { |
|||
margin-right: 12rpx; |
|||
padding: 0 10rpx; |
|||
height: 32rpx; |
|||
line-height: 32rpx; |
|||
border-radius: 10rpx; |
|||
background: rgba(255, 117, 88, 1); |
|||
color: #fff; |
|||
font-size: 20rpx; |
|||
font-weight: 700; |
|||
} |
|||
|
|||
.fee-text { |
|||
flex: 1; |
|||
} |
|||
|
|||
.fee-text text { |
|||
color: #00231C; |
|||
font-size: 30rpx; |
|||
font-weight: 900; |
|||
} |
|||
|
|||
.market-fee { |
|||
color: #9aa4a1; |
|||
font-size: 20rpx; |
|||
} |
|||
|
|||
.empty-box { |
|||
padding: 120rpx 0; |
|||
color: #8b9894; |
|||
font-size: 28rpx; |
|||
text-align: center; |
|||
} |
|||
|
|||
.product-popup-content { |
|||
width: 680rpx; |
|||
max-height: 880rpx; |
|||
padding: 34rpx 28rpx 30rpx; |
|||
box-sizing: border-box; |
|||
overflow: scroll; |
|||
border-radius: 36rpx; |
|||
background: |
|||
radial-gradient(circle at 92% 4%, rgba(166, 255, 234, 0.38) 0, rgba(166, 255, 234, 0) 180rpx), |
|||
linear-gradient(180deg, #ffffff 0%, #f8fffc 100%); |
|||
box-shadow: 0 24rpx 56rpx rgba(0, 35, 28, 0.18); |
|||
} |
|||
|
|||
.product-popup-header { |
|||
margin-bottom: 26rpx; |
|||
text-align: center; |
|||
} |
|||
|
|||
.product-popup-title { |
|||
color: #143d35; |
|||
font-size: 36rpx; |
|||
font-weight: 900; |
|||
line-height: 48rpx; |
|||
} |
|||
|
|||
.product-popup-subtitle { |
|||
margin-top: 8rpx; |
|||
color: #7b8a85; |
|||
font-size: 24rpx; |
|||
line-height: 34rpx; |
|||
} |
|||
|
|||
.product-popup-list { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 20rpx; |
|||
} |
|||
|
|||
.product-popup-card { |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 22rpx; |
|||
border: 1px solid rgba(166, 255, 234, 0.58); |
|||
border-radius: 28rpx; |
|||
background: rgba(255, 255, 255, 0.88); |
|||
box-shadow: 0 12rpx 28rpx rgba(0, 35, 28, 0.06); |
|||
} |
|||
|
|||
.product-popup-img { |
|||
width: 128rpx; |
|||
height: 128rpx; |
|||
flex-shrink: 0; |
|||
overflow: hidden; |
|||
border-radius: 22rpx; |
|||
background: #f0f5f3; |
|||
} |
|||
|
|||
.product-popup-img img { |
|||
width: 100%; |
|||
height: 100%; |
|||
background-size: 100%; |
|||
} |
|||
|
|||
.product-popup-info { |
|||
flex: 1; |
|||
min-width: 0; |
|||
padding: 0 22rpx; |
|||
} |
|||
|
|||
.product-popup-name { |
|||
color: #172f2a; |
|||
font-size: 30rpx; |
|||
font-weight: 900; |
|||
line-height: 42rpx; |
|||
} |
|||
|
|||
.product-popup-spec { |
|||
display: flex; |
|||
align-items: flex-start; |
|||
margin-top: 16rpx; |
|||
} |
|||
|
|||
.product-popup-label { |
|||
flex-shrink: 0; |
|||
height: 34rpx; |
|||
padding: 0 14rpx; |
|||
border-radius: 999rpx; |
|||
background: rgba(166, 255, 234, 0.72); |
|||
color: #126255; |
|||
font-size: 20rpx; |
|||
font-weight: 800; |
|||
line-height: 34rpx; |
|||
} |
|||
|
|||
.product-popup-spec-text { |
|||
flex: 1; |
|||
margin-left: 12rpx; |
|||
color: #65736f; |
|||
font-size: 24rpx; |
|||
line-height: 34rpx; |
|||
word-break: break-all; |
|||
} |
|||
|
|||
.product-popup-quantity { |
|||
width: 92rpx; |
|||
height: 92rpx; |
|||
flex-shrink: 0; |
|||
border-radius: 28rpx; |
|||
background: linear-gradient(135deg, #fff4ce 0%, #a6ffea 100%); |
|||
color: #103f36; |
|||
text-align: center; |
|||
box-shadow: 0 10rpx 20rpx rgba(0, 35, 28, 0.08); |
|||
} |
|||
|
|||
.product-popup-quantity-num { |
|||
padding-top: 16rpx; |
|||
font-size: 30rpx; |
|||
font-weight: 900; |
|||
line-height: 34rpx; |
|||
} |
|||
|
|||
.product-popup-quantity-label { |
|||
margin-top: 2rpx; |
|||
color: #52736b; |
|||
font-size: 20rpx; |
|||
line-height: 28rpx; |
|||
} |
|||
|
|||
.product-popup-empty { |
|||
padding: 80rpx 20rpx; |
|||
border-radius: 28rpx; |
|||
background: rgba(247, 255, 251, 0.9); |
|||
color: #7b8a85; |
|||
font-size: 28rpx; |
|||
font-weight: 700; |
|||
text-align: center; |
|||
} |
|||
|
|||
.bottom-space { |
|||
width: 100%; |
|||
height: 60rpx; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue