3 changed files with 796 additions and 0 deletions
@ -0,0 +1,337 @@ |
|||||
|
<template> |
||||
|
<view class="page1"> |
||||
|
<view class="title"> |
||||
|
<view class="title-sreach"> |
||||
|
<view class="back-btn" @tap="back" :style="{'top': menuButtonInfo.top +'px'}"> |
||||
|
<uni-icons type="left" size="28"></uni-icons> |
||||
|
</view> |
||||
|
<view class="title-name" :style="{'padding-top': menuButtonInfo.top +'px'}"> |
||||
|
数据统计 |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view style="margin-top: -60px;"> |
||||
|
<uni-datetime-picker style="margin-bottom:20rpx;" v-model="range" type="daterange" @change="searchList" /> |
||||
|
</view> |
||||
|
<view style="width: 100%;margin: 20rpx auto;background: #fff;"> |
||||
|
<view class="box"> |
||||
|
<view style="width: 69%;"> |
||||
|
<view style="width: 50rpx;height: 50rpx;float: left;margin-right: 20rpx;"> |
||||
|
<uni-icons type="cart" size="24" color="red"></uni-icons> |
||||
|
</view> |
||||
|
销售金额 |
||||
|
</view> |
||||
|
<view style="width: 30%;text-align: right;"> |
||||
|
<text style="display: inline-block;width: 150rpx;text-align: center;">{{shopInfo.totalAmount}}</text> |
||||
|
|
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="box"> |
||||
|
<view style="width: 69%;"> |
||||
|
<view style="width: 50rpx;height: 50rpx;float: left;margin-right: 20rpx;"> |
||||
|
<uni-icons type="cart" size="24" color="red"></uni-icons> |
||||
|
</view> |
||||
|
销量 |
||||
|
</view> |
||||
|
<view style="width: 30%;text-align: right;"> |
||||
|
<text style="display: inline-block;width: 150rpx;text-align: center;">{{shopInfo.totalJCount}}</text> |
||||
|
|
||||
|
</view> |
||||
|
</view> |
||||
|
<view style="width: 100%;height: 10rpx;background: #eee;"></view> |
||||
|
<view class="box"> |
||||
|
<view style="width: 69%;"> |
||||
|
<view style="width: 50rpx;height: 50rpx;float: left;margin-right: 20rpx;"> |
||||
|
<uni-icons type="wallet" size="24" color="red"></uni-icons> |
||||
|
</view> |
||||
|
销售利润 |
||||
|
</view> |
||||
|
<view style="width: 30%;text-align: right;"> |
||||
|
<text style="display: inline-block;width: 150rpx;text-align: center;">{{shopInfo.totalProfit==null?0:shopInfo.totalProfit}}</text> |
||||
|
|
||||
|
</view> |
||||
|
</view> |
||||
|
<view style="width: 100%;height: 10rpx;background: #eee;"></view> |
||||
|
<view class="box"> |
||||
|
<view style="width: 69%;"> |
||||
|
<view style="width: 50rpx;height: 50rpx;float: left;margin-right: 20rpx;"> |
||||
|
<uni-icons type="refreshempty" size="24" color="red"></uni-icons> |
||||
|
</view> |
||||
|
退货金额 |
||||
|
</view> |
||||
|
<view style="width: 30%;text-align: right;"> |
||||
|
<text style="display: inline-block;width: 150rpx;text-align: center;">{{shopInfo.returnTotalAmount}}</text> |
||||
|
|
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="box"> |
||||
|
<view style="width: 69%;"> |
||||
|
<view style="width: 50rpx;height: 50rpx;float: left;margin-right: 20rpx;"> |
||||
|
<uni-icons type="refreshempty" size="24" color="red"></uni-icons> |
||||
|
</view> |
||||
|
退货数 |
||||
|
</view> |
||||
|
<view style="width: 30%;text-align: right;"> |
||||
|
<text style="display: inline-block;width: 150rpx;text-align: center;">{{shopInfo.returnTotalCount}}</text> |
||||
|
|
||||
|
</view> |
||||
|
</view> |
||||
|
<view style="width: 100%;height: 10rpx;background: #eee;"></view> |
||||
|
|
||||
|
<view class="box"> |
||||
|
<view style="width: 69%;"> |
||||
|
<view style="width: 50rpx;height: 50rpx;float: left;margin-right: 20rpx;"> |
||||
|
<uni-icons type="staff" size="24" color="red"></uni-icons> |
||||
|
</view> |
||||
|
下单客户 |
||||
|
</view> |
||||
|
<view style="width: 30%;text-align: right;"> |
||||
|
<text style="display: inline-block;width: 150rpx;text-align: center;">{{shopInfo.totalCCount}}</text> |
||||
|
|
||||
|
</view> |
||||
|
</view> |
||||
|
<!-- <view class="box" @tap="goDetail('rexiao')"> |
||||
|
<view style="width: 69%;"> |
||||
|
<view style="width: 50rpx;height: 50rpx;float: left;margin-right: 20rpx;"> |
||||
|
<uni-icons type="fire" size="24" color="red"></uni-icons> |
||||
|
</view> |
||||
|
热销商品 |
||||
|
</view> |
||||
|
<view style="width: 30%;"> |
||||
|
<text style="display: inline-block;width: 150rpx;text-align: center;"></text> |
||||
|
<uni-icons type="right" size="24" color="#777"></uni-icons> |
||||
|
</view> |
||||
|
</view> --> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
menuButtonInfo: {}, |
||||
|
range:[], |
||||
|
shopInfo:{ |
||||
|
totalProfit:0, |
||||
|
returnTotalAmount:0, |
||||
|
saleReturnCost:0 |
||||
|
} |
||||
|
}; |
||||
|
}, |
||||
|
onShow(){ |
||||
|
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect() |
||||
|
if(this.range ==''){ |
||||
|
this.getMonth(); |
||||
|
} |
||||
|
this.getSaleInfo(); |
||||
|
}, |
||||
|
methods: { |
||||
|
getSaleInfo() { |
||||
|
this.shopInfo = { |
||||
|
totalProfit:0, |
||||
|
returnTotalAmount:0, |
||||
|
saleReturnCost:0 |
||||
|
} |
||||
|
this.tui.request("/app/sale/getShopAll", "POST", { |
||||
|
pageVo: { |
||||
|
pageSize: 5, |
||||
|
pageNumber: 1 |
||||
|
}, |
||||
|
shopId:uni.getStorageSync('shopId'), |
||||
|
startTime:this.range[0], |
||||
|
endTime:this.range[1] |
||||
|
}, false, false).then((res) => { |
||||
|
if (res.code == 200) { |
||||
|
this.shopInfo = res.result |
||||
|
} else { |
||||
|
this.tui.toast(res.message) |
||||
|
} |
||||
|
|
||||
|
}) |
||||
|
}, |
||||
|
//获取当月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] |
||||
|
}, |
||||
|
back() { |
||||
|
uni.navigateBack() |
||||
|
}, |
||||
|
searchList() { |
||||
|
this.priceList = []; |
||||
|
this.getSaleInfo() |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
page { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
font-size: 24rpx; |
||||
|
background: #F5F8F5; |
||||
|
color: #00231C; |
||||
|
} |
||||
|
|
||||
|
.page1 { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
font-size: 24rpx; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat; |
||||
|
width: 100%; |
||||
|
height: 20%; |
||||
|
} |
||||
|
|
||||
|
.title-sreach { |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
height: 200rpx; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.back-btn { |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
} |
||||
|
|
||||
|
.title-name { |
||||
|
padding-top: 55px; |
||||
|
font-size: 36rpx; |
||||
|
font-weight: 700; |
||||
|
flex: 1; |
||||
|
text-align: center; |
||||
|
} |
||||
|
.contentPadding { |
||||
|
padding: 28rpx 20rpx; |
||||
|
background-color: #fff; |
||||
|
color: #909399; |
||||
|
|
||||
|
.title { |
||||
|
padding-left: 20rpx; |
||||
|
font-size: 32rpx; |
||||
|
color: #303133; |
||||
|
margin-bottom: 26rpx; |
||||
|
line-height: 66rpx; |
||||
|
|
||||
|
image { |
||||
|
display: inline-block; |
||||
|
width: 40rpx; |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
|
||||
|
.btn { |
||||
|
text-align: right; |
||||
|
width: 24%; |
||||
|
float: right; |
||||
|
font-size: 26rpx; |
||||
|
color: $u-primary; |
||||
|
} |
||||
|
} |
||||
|
.grid-text { |
||||
|
font-size: 28rpx; |
||||
|
margin-bottom: 26rpx; |
||||
|
text-align: center; |
||||
|
} |
||||
|
} |
||||
|
.u-grid-item { |
||||
|
width: 30% !important; |
||||
|
height: 160rpx; |
||||
|
background: linear-gradient(#84C1FF, #C4E1FF) !important; |
||||
|
margin-left: 3%; |
||||
|
border-radius: 30rpx; |
||||
|
margin-top: 20rpx !important; |
||||
|
color: #fff !important; |
||||
|
|
||||
|
} |
||||
|
.cardText { |
||||
|
font-size: 24rpx; |
||||
|
} |
||||
|
|
||||
|
.priceText { |
||||
|
color: $u-primary; |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
.u-grid-item:nth-child(2) { |
||||
|
background: linear-gradient(#FFBB77, #FFDCB9) !important; |
||||
|
} |
||||
|
|
||||
|
.u-grid-item:nth-child(3) { |
||||
|
background: linear-gradient(#1AFD9C, #7AFEC6) !important; |
||||
|
} |
||||
|
|
||||
|
.u-grid-item:nth-child(4) { |
||||
|
background: linear-gradient(#1AFD9C, #7AFEC6) !important; |
||||
|
} |
||||
|
.u-grid-item:nth-child(5) { |
||||
|
background: linear-gradient(#FFBB77, #FFDCB9) !important; |
||||
|
} |
||||
|
.u-grid-item:nth-child(6) { |
||||
|
background: linear-gradient(#84C1FF, #C4E1FF) !important; |
||||
|
} |
||||
|
.u-count-num { |
||||
|
color: #FFF !important; |
||||
|
text-align:center; |
||||
|
} |
||||
|
.uni-date{ |
||||
|
background: #fff; |
||||
|
} |
||||
|
.uni-tooltip-popup{ |
||||
|
width: 180rpx; |
||||
|
} |
||||
|
.u-icon{ |
||||
|
padding: 0 0 0 16rpx !important; |
||||
|
} |
||||
|
.u-zidingyi{ |
||||
|
width: 22% !important; |
||||
|
height: 160rpx; |
||||
|
background: linear-gradient(#84C1FF, #C4E1FF) !important; |
||||
|
margin-left: 3%; |
||||
|
border-radius: 30rpx; |
||||
|
margin-top: 20rpx !important; |
||||
|
color: #fff !important; |
||||
|
text-align: center; |
||||
|
padding-top: 20rpx; |
||||
|
} |
||||
|
.u-zidingyi:nth-child(2) { |
||||
|
background: linear-gradient(#FFBB77, #C4E1FF) !important; |
||||
|
} |
||||
|
.u-zidingyi:nth-child(3) { |
||||
|
background: linear-gradient(#84C1FF, #7AFEC6) !important; |
||||
|
} |
||||
|
.u-zidingyi:nth-child(4) { |
||||
|
background: linear-gradient(#84C1FF, #C4E1FF) !important; |
||||
|
} |
||||
|
.box{ |
||||
|
width: 100%; |
||||
|
height: 100rpx; |
||||
|
padding-left: 20rpx; |
||||
|
display: flex; |
||||
|
line-height: 100rpx; |
||||
|
font-size: 34rpx; |
||||
|
border-bottom: 1px solid #eee; |
||||
|
} |
||||
|
.tan-lirun{ |
||||
|
margin-top: 20rpx; |
||||
|
width: 45%; |
||||
|
height: 120rpx; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
text-align: center; |
||||
|
float: left; |
||||
|
background-image: linear-gradient(#84C1FF, #C4E1FF) !important; |
||||
|
color: #fff; |
||||
|
border-radius: 10px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,187 @@ |
|||||
|
<template> |
||||
|
<view class="page1"> |
||||
|
<view class="title"> |
||||
|
<view class="title-sreach"> |
||||
|
<view class="back-btn" @tap="back" :style="{'top': menuButtonInfo.top +'px'}"> |
||||
|
<uni-icons type="left" size="28"></uni-icons> |
||||
|
</view> |
||||
|
<view class="title-name" :style="{'padding-top': menuButtonInfo.top +'px'}"> |
||||
|
账单结算 |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view style="margin: -60px auto 0;"> |
||||
|
<view class=""> |
||||
|
<view class="content11"> |
||||
|
2026 |
||||
|
</view> |
||||
|
<view class="box1"> |
||||
|
<view class="content22"> |
||||
|
<view class=""> |
||||
|
10/25-10/25账单 |
||||
|
</view> |
||||
|
<view class=""> |
||||
|
共<text>0</text>单 |
||||
|
<uni-icons type="right" size="12"></uni-icons> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view style="border-bottom: 1px solid #eee;"> |
||||
|
<view class="content33"> |
||||
|
<view class="content44"> |
||||
|
商品金额 |
||||
|
</view> |
||||
|
<view class=""> |
||||
|
$0.00 |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="content33"> |
||||
|
<view class="content44"> |
||||
|
餐盒费 |
||||
|
</view> |
||||
|
<view class=""> |
||||
|
$0.00 |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="content33"> |
||||
|
<view class="content44"> |
||||
|
活动成本 |
||||
|
</view> |
||||
|
<view class=""> |
||||
|
$0.00 |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="content33"> |
||||
|
<view class="content44"> |
||||
|
平台服务费 |
||||
|
</view> |
||||
|
<view class=""> |
||||
|
$0.00 |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class=""> |
||||
|
<view class="content33"> |
||||
|
<view class="content44"> |
||||
|
结算金额 |
||||
|
</view> |
||||
|
<view class=""> |
||||
|
$0.00 |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="content33"> |
||||
|
<view class="content44"> |
||||
|
本期期初 |
||||
|
</view> |
||||
|
<view class=""> |
||||
|
$0.00 |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="content33"> |
||||
|
<view class="content44"> |
||||
|
实际打款金额 |
||||
|
</view> |
||||
|
<view class=""> |
||||
|
$0.00 |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
menuButtonInfo: {} |
||||
|
} |
||||
|
}, |
||||
|
onShow() { |
||||
|
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect() |
||||
|
}, |
||||
|
onLoad(option) { |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
back() { |
||||
|
uni.navigateBack() |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
page { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
font-size: 24rpx; |
||||
|
background: #F5F8F5; |
||||
|
color: #00231C; |
||||
|
} |
||||
|
|
||||
|
.page1 { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
font-size: 24rpx; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat; |
||||
|
width: 100%; |
||||
|
height: 20%; |
||||
|
} |
||||
|
|
||||
|
.title-sreach { |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
height: 200rpx; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.back-btn { |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
} |
||||
|
|
||||
|
.title-name { |
||||
|
padding-top: 55px; |
||||
|
font-size: 36rpx; |
||||
|
font-weight: 700; |
||||
|
flex: 1; |
||||
|
text-align: center; |
||||
|
} |
||||
|
.box1 { |
||||
|
width: 95%; |
||||
|
margin: 0 auto 20rpx; |
||||
|
background: #fff; |
||||
|
border-radius: 20rpx; |
||||
|
padding: 20rpx; |
||||
|
} |
||||
|
.content11{ |
||||
|
height: 35px; |
||||
|
line-height: 35px; |
||||
|
padding-left: 20px; |
||||
|
font-size: 14px; |
||||
|
font-weight: 700; |
||||
|
} |
||||
|
.content22{ |
||||
|
display: flex; |
||||
|
height: 30px; |
||||
|
line-height: 22px; |
||||
|
border-bottom: 1px solid #eee; |
||||
|
font-size: 13px; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
.content33{ |
||||
|
height: 25px; |
||||
|
line-height: 25px; |
||||
|
display: flex; |
||||
|
} |
||||
|
.content44{ |
||||
|
flex: 1; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,272 @@ |
|||||
|
<template> |
||||
|
<view class="page1"> |
||||
|
<view class="title"> |
||||
|
<view class="title-sreach"> |
||||
|
<view class="back-btn" @tap="back" :style="{'top': menuButtonInfo.top +'px'}"> |
||||
|
<uni-icons type="left" size="28"></uni-icons> |
||||
|
</view> |
||||
|
<view class="title-name" :style="{'padding-top': menuButtonInfo.top +'px'}"> |
||||
|
商家订单 |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="title-tab"> |
||||
|
<scroll-view class="status-scroll-view" scroll-x enable-flex :show-scrollbar="false" |
||||
|
:scroll-with-animation="true"> |
||||
|
<view class="status-list"> |
||||
|
<view v-for="(item, index) in statusList" :key="index" class="status-item" |
||||
|
:class="{ 'active': currentIndex === index }" @click="handleStatusClick(index)"> |
||||
|
<text class="status-text">{{ item.name }}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</scroll-view> |
||||
|
</view> |
||||
|
<view class="box1" @tap="goDetail"> |
||||
|
<view style="display: flex;height: 25px;border-bottom: 1px solid #eee;"> |
||||
|
<view> |
||||
|
#0001 |
||||
|
</view> |
||||
|
<view style="flex: 1;display: flex;padding-left: 10px;"> |
||||
|
2026-02-28 16:08 <text>已退款</text> |
||||
|
</view> |
||||
|
<view> |
||||
|
已关闭 |
||||
|
</view> |
||||
|
</view> |
||||
|
<view style="height: 60px;padding-top: 10px;"> |
||||
|
<view style="height: 25px;line-height: 25px;font-size: 14px;font-weight: 700;"> |
||||
|
商品 <text>共<text>1</text>件</text> |
||||
|
</view> |
||||
|
<view style="display: flex;"> |
||||
|
<view style="flex: 1;"> |
||||
|
鱼香肉丝 |
||||
|
</view> |
||||
|
<view style="width: 50px;"> |
||||
|
X1 |
||||
|
</view> |
||||
|
<view> |
||||
|
¥5.00 |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="box1" @tap="goDetail"> |
||||
|
<view style="display: flex;height: 25px;border-bottom: 1px solid #eee;"> |
||||
|
<view> |
||||
|
#0001 |
||||
|
</view> |
||||
|
<view style="flex: 1;display: flex;padding-left: 10px;"> |
||||
|
2026-02-28 16:08 <text>已退款</text> |
||||
|
</view> |
||||
|
<view> |
||||
|
已关闭 |
||||
|
</view> |
||||
|
</view> |
||||
|
<view style="height: 60px;padding-top: 10px;"> |
||||
|
<view style="height: 25px;line-height: 25px;font-size: 14px;font-weight: 700;"> |
||||
|
商品 <text>共<text>1</text>件</text> |
||||
|
</view> |
||||
|
<view style="display: flex;"> |
||||
|
<view style="flex: 1;"> |
||||
|
鱼香肉丝 |
||||
|
</view> |
||||
|
<view style="width: 50px;"> |
||||
|
X1 |
||||
|
</view> |
||||
|
<view> |
||||
|
¥5.00 |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
currentIndex: 0, |
||||
|
menuButtonInfo: {}, |
||||
|
statusList: [{ |
||||
|
name: '待接单', |
||||
|
value: 0, |
||||
|
checked: true |
||||
|
}, |
||||
|
{ |
||||
|
name: '待发货', |
||||
|
value: 1, |
||||
|
checked: false |
||||
|
}, |
||||
|
{ |
||||
|
name: '待退款', |
||||
|
value: 2, |
||||
|
checked: false |
||||
|
}, |
||||
|
{ |
||||
|
name: '待售后', |
||||
|
value: 3, |
||||
|
checked: false |
||||
|
}, |
||||
|
{ |
||||
|
name: '已发货', |
||||
|
value: 4, |
||||
|
checked: false |
||||
|
}, |
||||
|
{ |
||||
|
name: '已完成', |
||||
|
value: 5, |
||||
|
checked: false |
||||
|
}, |
||||
|
{ |
||||
|
name: '已取消', |
||||
|
value: 6, |
||||
|
checked: false |
||||
|
}, |
||||
|
{ |
||||
|
name: '已售后', |
||||
|
value: 7, |
||||
|
checked: false |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
onShow() { |
||||
|
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect() |
||||
|
}, |
||||
|
onLoad(option) { |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
goDetail(){ |
||||
|
uni.navigateTo({ |
||||
|
url:'/package1/order/orderDetail' |
||||
|
}) |
||||
|
}, |
||||
|
handleStatusClick(index) { |
||||
|
if (this.currentIndex === index) return; |
||||
|
this.currentIndex = index; |
||||
|
}, |
||||
|
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; |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat; |
||||
|
width: 100%; |
||||
|
height: 20%; |
||||
|
} |
||||
|
|
||||
|
.title-sreach { |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
height: 200rpx; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.back-btn { |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
} |
||||
|
|
||||
|
.title-name { |
||||
|
padding-top: 55px; |
||||
|
font-size: 36rpx; |
||||
|
font-weight: 700; |
||||
|
flex: 1; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.title-tab { |
||||
|
display: flex; |
||||
|
margin: -60px auto 0; |
||||
|
} |
||||
|
|
||||
|
.status-scroll-view { |
||||
|
width: 100%; |
||||
|
white-space: nowrap; |
||||
|
/* 辅助滚动,与 flex 配合确保不换行 */ |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
.status-list { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
flex-wrap: nowrap; |
||||
|
align-items: center; |
||||
|
padding: 0 0; |
||||
|
/* 可根据设计添加左右留白,但会影响“一排5个”精准计算,故留白为0 */ |
||||
|
min-height: 88rpx; |
||||
|
/* 保证内部项撑开高度 */ |
||||
|
} |
||||
|
|
||||
|
/* 每个状态项:宽度为屏幕宽度的1/5,保证一行正好显示5个,超出滚动 */ |
||||
|
.status-item { |
||||
|
flex-shrink: 0; |
||||
|
width: 20vw; |
||||
|
/* 关键:屏幕宽度的1/5,正好一排5个 */ |
||||
|
text-align: center; |
||||
|
padding: 20rpx 0; |
||||
|
position: relative; |
||||
|
box-sizing: border-box; |
||||
|
transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); |
||||
|
/* 点击反馈 */ |
||||
|
-webkit-tap-highlight-color: transparent; |
||||
|
} |
||||
|
|
||||
|
.status-text { |
||||
|
font-size: 28rpx; |
||||
|
color: #666666; |
||||
|
font-weight: normal; |
||||
|
line-height: 1.4; |
||||
|
transition: color 0.2s, font-weight 0.2s; |
||||
|
} |
||||
|
|
||||
|
/* 激活状态样式 */ |
||||
|
.status-item.active .status-text { |
||||
|
color: #ff6b35; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
/* 激活指示条(下划线) */ |
||||
|
.status-item.active::after { |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
left: 50%; |
||||
|
transform: translateX(-50%); |
||||
|
width: 40rpx; |
||||
|
height: 4rpx; |
||||
|
background-color: #ff6b35; |
||||
|
border-radius: 2rpx; |
||||
|
transition: width 0.2s ease; |
||||
|
} |
||||
|
|
||||
|
.box1 { |
||||
|
width: 95%; |
||||
|
margin: 20rpx auto; |
||||
|
background: #fff; |
||||
|
border-radius: 20rpx; |
||||
|
padding: 20rpx; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue