<template> <view class="page"> <u-navbar title="订单管理" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37' title-size='36' height='50' id="navbar"> </u-navbar> <view class="toptab"> <view class=""> 订单状态 <u-icon name="arrow-down-fill" color="#3D3D3D" size="24"></u-icon> </view> <view class=""> 支付方式 <u-icon name="arrow-down-fill" color="#3D3D3D" size="24"></u-icon> </view> <view class=""> 时间筛选 <u-icon name="arrow-down-fill" color="#3D3D3D" size="24"></u-icon> </view> </view> <view class="list"> <view class="list_item" v-for="(item,index) in 5" :key="index" @click="btnxq"> <view class="top"> <view class=""> 订单编号:1238951464125741 </view> <view class="zt"> 已完成 </view> </view> <view class="xinxi"> 店铺名称:福鼎-西湖店 </view> <view class="xinxi"> 房间名称:竹韵包厢 </view> <view class="xinxi"> <view class=""> 订单时间:2024-12-05 13:45 </view> <view class="price"> ¥20.00 </view> </view> <view class="bot"> <view class="time"> <text v-if="false"> 剩余时间:<text>00小时55分39秒</text></text> </view> <view class="jieshu"> 退款 </view> </view> </view> </view> </view> </template> <script> export default { data() { return { bgc: { backgroundColor: "#fff", }, } }, onLoad() { }, onShow() { this.getlist() }, methods: { getlist(){ this.$u.get(`/app/order/orderList?statusList=1,2`).then(res =>{ if(res.code == 200){ } }) }, // 点击跳转到订单详情 btnxq(){ uni.navigateTo({ url:'/page_moban/orderxq' }) } } } </script> <style lang="scss"> /deep/ .u-iconfont, /deep/ .u-title{ padding-bottom: 20rpx; } /deep/ .uicon-arrow-down-fill{ margin-left: 16rpx; } .list{ width: 100%; height: 80vh; overflow: scroll; .list_item{ width: 750rpx; height: 420rpx; background: #FFFFFF; margin-top: 20rpx; .top{ display: flex; justify-content: space-between; height: 94rpx; line-height: 94rpx; padding: 0 32rpx; box-sizing: border-box; .zt{ color: #3D3D3D; } border-bottom: 1px solid #D8D8D8; } .xinxi{ padding: 0 32rpx; box-sizing: border-box; margin-top: 24rpx; font-size: 28rpx; color: #3D3D3D; display: flex; justify-content: space-between; .price{ font-weight: 600; font-size: 28rpx; color: #48893B; } } .bot{ padding: 0 32rpx; padding-top: 24rpx; box-sizing: border-box; border-top: 1px solid #D8D8D8; margin-top: 28rpx; display: flex; justify-content: space-between; align-items: center; .jieshu{ width: 194rpx; height: 64rpx; border-radius: 14rpx 14rpx 14rpx 14rpx; border: 2rpx solid #48893B; font-weight: 600; font-size: 32rpx; color: #48893B; text-align: center; line-height: 64rpx; } .time{ text{ color: #48893B; } } } } } page { background: #F6F6F6; } .toptab{ width: 100%; height: 90rpx; line-height: 90rpx; display: flex; align-items: center; justify-content: space-between; padding: 0 58rpx; box-sizing: border-box; background-color: #fff; } </style>