mrr.sj.front/pages/shop/home.vue

1179 lines
27 KiB
Vue
Raw Normal View History

2026-03-24 11:45:13 +08:00
<template>
<view class="artisan-page">
<view v-show="currentIndex == 0">
<view class="bg">
<!-- 顶部导航栏 -->
<custom-navbar title="商家" :show-back="true" title-color="#000000"
backgroundColor="transparent"></custom-navbar>
<!-- 头像信息区 -->
<view class="profile-section">
<view class="profile-info">
<image class="avatar" v-if="userInfo.head_photo" :src="userInfo.head_photo" mode="aspectFill">
</image>
<view class="info-content">
<view class="name">{{ userInfo.name }}</view>
<view class="welcome">欢迎使用美融融商家</view>
</view>
</view>
<view class="center-btn" @click="goRoleMy">
<text class="center-text"> 商家中心</text>
<image class="arrow-right" src="/static/images/arrow_right.png" mode="aspectFit"></image>
</view>
</view>
</view>
<view class="switch-section">
<view class="center-btn">
<text class="switch-tip" v-if="userInfo.order_taking == 1">已开启接单</text>
<text class="switch-tip" v-if="userInfo.order_taking == 2">已关闭接单</text>
</view>
<view class="switch-box" @click="handleSwitchChange()"
:class="{ disswitch: userInfo.order_taking == 2 }">
<text class="switch-text" v-if="userInfo.order_taking == 1">接单</text>
<view class="switch-yuan"></view>
<text class="switch-text" v-if="userInfo.order_taking == 2">不接单</text>
</view>
</view>
<!-- 订单类型 -->
<view class="order-class" :style="{paddingBottom:count != 0?`60rpx`:`40rpx`}">
<scroll-view scroll-x="true" scroll-with-animation>
<view class="order-types">
<view class="order-type-item" @click="searchTypeOrder(0)" :class="{ active: typeId == 0 }">
<text class="type-name">到店订单</text>
<view class="active-line" v-if="typeId == 0"></view>
</view>
<view class="order-type-item" @click="searchTypeOrder(2)" :class="{ active: typeId == 2 }">
<text class="type-name">自营到店订单</text>
<view class="active-line" v-if="typeId == 2"></view>
</view>
<view class="order-type-item" @click="searchTypeOrder(1)" :class="{ active: typeId == 1 }">
<text class="type-name">工位订单</text>
<view class="active-line" v-if="typeId == 1"></view>
</view>
<view class="order-type-item" @click="searchTypeOrder(3)" :class="{ active: typeId == 3 }">
<text class="type-name">上门订单</text>
<view class="active-line" v-if="typeId == 3"></view>
</view>
<view class="order-type-item" @click="searchTypeOrder(4)" :class="{ active: typeId == 4 }">
<text class="type-name">自营上门订单</text>
<view class="active-line" v-if="typeId == 4"></view>
</view>
</view>
</scroll-view>
<scroll-view class="order-state" scroll-x="true" scroll-with-animation v-if="typeId == 1">
<view class="order-state-item" @click="handleOrderState(2)" :class="{ active: typeOrder == 2 }">
<text class="state-name">待接单({{ ordernum.djd }})</text>
</view>
<view class="order-state-item" @click="handleOrderState(3, 0)" :class="{ active: typeOrder == 3 }">
<text class="state-name">待开始({{ ordernum.dfw }})</text>
</view>
<view class="order-state-item" @click="handleOrderState(4)" :class="{ active: typeOrder == 4 }">
<text class="state-name">待完成({{ ordernum.dwc }})</text>
</view>
</scroll-view>
<view class="order-state" v-else-if="typeId == 3 || typeId == 4">
<view class="order-state-item" @click="handleOrderType(2)" :class="{ active: typeOrder == 2 }">
<text class="state-name">待接单({{ ordernum.noconfirmnum }})</text>
</view>
<view class="order-state-item" @click="handleOrderType(3)" :class="{ active: typeOrder == 3 }">
<text class="state-name">待开始({{ ordernum.noservernum }})</text>
</view>
<view class="order-state-item" @click="handleOrderType(4)" :class="{ active: typeOrder == 4 }">
<text class="state-name">待完成({{ ordernum.nocompletednum }})</text>
</view>
</view>
<view class="order-state" v-else>
<view class="order-state-item" @click="handleOrderType(3)" :class="{ active: typeOrder == 3 }">
<text class="state-name">待服务({{ ordernum.noservernum }})</text>
</view>
<view class="order-state-item" @click="handleOrderType(4)" :class="{ active: typeOrder == 4 }">
<text class="state-name">待完成({{ ordernum.nocompletednum }})</text>
</view>
</view>
</view>
<!-- 订单列表 -->
<!-- -->
<view class="order-list" v-if="count != 0">
<view class="order_item" v-for="(item, i) in orderList" :key="item.id">
<OrderCard v-if="typeId != 1" :haveButton="haveButton" :showState="false" :dataItem="item"
:typeId="typeId" @cancel="cancelOrder($event, item)" @start="startOrder($event, item)"
@done="endOrder($event, item)" @goOrderDetail="goOrderDetail" />
<WorkHourOrderCard v-else :showState="false" :dataItem="item" :typeId="typeId"
@cancel="cancelOrder($event, item)" @accept="confirmOrder($event, item)"
@start="startOrder($event, item)" @done="endOrder($event, item)" @goOrderDetail="goOrderDetail">
</WorkHourOrderCard>
</view>
</view>
<noData v-else></noData>
<!-- <view class="nothings-box" v-else>
<text class="nothings-text">暂无数据...</text>
</view> -->
<serviceCodeInput :show="showInput" @close="showInput = false" @confirm="onConfirm" />
</view>
<MyPage v-show="currentIndex == 1" :unbindReadNum="unbindReadNum"></MyPage>
<MyTabBar @change="changeIndex" :tabList="tabList" :currentIndex="currentIndex"></MyTabBar>
</view>
</template>
<script>
import OrderCard from "./components/orderCard2.vue";
import WorkHourOrderCard from "./workSpace/components/orderCard.vue";
import request from "../../utils/request";
import MyTabBar from "@/components/MyTabBar.vue";
import MyPage from "./my.vue";
import {
debounce
} from "../../utils/debounce";
import serviceCodeInput from "../../components/service-code-input/service-code-input.vue";
export default {
components: {
serviceCodeInput,
MyTabBar,
MyPage,
OrderCard,
WorkHourOrderCard,
},
data() {
return {
unbindReadNum: 0,
haveButton: true,
clickType: false, //点击状态,防止连续点击
tabList: [{
text: "首页",
selectedIcon: "/static/images/tabbar/home_icon_active.png",
icon: "/static/images/tabbar/home_icon_dis.png",
},
{
text: "我的",
selectedIcon: "/static/images/tabbar/my_icon_active.png",
icon: "/static/images/tabbar/my_icon_dis.png",
},
],
urlList: [{
weChatRefund: "/sj/yhwechatrefund",
aliRefund: "/sj/yhalirefund",
startOrder: "/sj/startserver",
endOrder: "/sj/endserver",
ordernum: "/sj/ordernum",
list: "/sj/sjgetyhorder",
},
{
weChatRefund: "/sj/workSeatOrder/weChatRefund",
aliRefund: "/sj/workSeatOrder/aliRefund",
startOrder: "/sj/workSeatOrder/start",
endOrder: "/sj/workSeatOrder/end",
ordernum: "/sj/workSeatOrder/orderNum",
list: "/sj/workSeatOrder/list",
},
{
weChatRefund: "/sj/orderSelf/weChatRefund",
aliRefund: "/sj/orderSelf/aliRefund",
startOrder: "/sj/orderSelf/start",
endOrder: "/sj/orderSelf/end",
ordernum: "/sj/orderSelf/orderNum",
list: "/sj/orderSelf/list",
},
{
ordernum: "/sj/sjonsiteordernum",
list: "/sj/sjonsiteorder",
},
{
ordernum: "/sj/sjonsiteordernumself",
list: "/sj/sjonsiteorderself",
},
],
typeId: 0, // 0 用户订单 1 商家订单 2 工时订单
currentIndex: 0,
days: null, // 今天0明天1后天2
noClick: true, //防止重复点击状态
userInfo: {},
typeOrder: 3, // 2 等待确认 3 待服务 4 待完成
ordernum: {},
orderList: [],
handelOrder: {},
showInput: false,
timeRange: "7days",
count: 0,
isLoad: true, //加载完成
page: 1,
limit: 10,
chartOpts: {
color: ["#E8101E"],
padding: [15, 15, 0, 15],
enableScroll: false,
legend: false,
xAxis: {
gridType: "solid",
gridColor: "#F0F0F0",
fontColor: "#999999",
rotateLabel: false,
},
yAxis: {
gridType: "dash",
splitNumber: 4,
gridColor: "#F0F0F0",
fontColor: "#999999",
format: "value",
},
extra: {
line: {
type: "straight",
width: 2,
},
},
},
chartData: {
categories: ["03-19", "03-20", "03-21", "03-21", "03-21", "03-21"],
series: [{
name: "订单量",
data: [1.0, 0, 0, 0, 0, 0],
}, ],
},
};
},
async onLoad() {
// 获取状态栏高度
const systemInfo = uni.getSystemInfoSync();
const userInfo = await request.post("/user/getuser", {
type: 3,
});
this.userInfo = userInfo.data;
this.$store.commit("setSjInfo", userInfo.data);
// 存储商家地址
this.getOrderNumber();
this.getOrderList();
},
async onReachBottom() {
console.log("onReachBottom");
if (this.count <= this.page * this.limit || !this.isLoad) {
return;
}
this.page++;
this.getOrderList(false);
},
async onPullDownRefresh() {
await this.getOrderNumber();
this.getOrderList();
},
onShow() {
this.getUnbindReadNum()
},
methods: {
getUnbindReadNum() {
request.post("/sj/getUnbindReadNum").then(res => {
if (res.code) {
this.unbindReadNum = res.data.count
}
})
},
// 处理不同类型订单的点击
searchTypeOrder(type) {
this.haveButton = true
this.typeId = type;
if (type == 1) {
this.typeOrder = 2; // 工位订单
} else {
this.typeOrder = 3; // 用户订单
}
if (type == 3 || type == 4) {
this.haveButton = false
this.typeOrder = 2;
}
this.stateOrder = 2;
this.days = null;
this.getOrderNumber();
this.getOrderList();
},
handleOrderType(type) {
// 处理不同类型订单的点击
this.typeOrder = type;
this.getOrderList();
},
// 处理不同订单状态的点击
handleOrderState(type, days) {
this.typeOrder = type;
this.stateOrder = type;
// if (type == 3) {
// this.days = days;
// console.log(1111, this.getDateStr(days));
// } else {
// this.days = null;
// }
this.getOrderList();
},
// 获取日期字符串
getDateStr(days) {
const date = new Date();
date.setDate(date.getDate() + days);
return `${date.getFullYear()}-${(date.getMonth() + 1)
.toString()
.padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")}`;
},
//getProfileLoding获取上个页面返回后调用提示
async getProfileLoding(title) {
setTimeout(() => {
uni.showToast({
title: "保存成功",
duration: 1000,
});
}, 300);
let {
data
} = await request.post("/user/getuser", {
type: 3,
});
//存储商家地址
uni.setStorageSync("shopdependency", data.dependency);
},
changeIndex(index) {
console.log(index);
if (index == 1) {
this.getUnbindReadNum()
}
this.currentIndex = index;
},
syrorsjordertaking() {
request
.post("/sj/sjordertaking", {
sjid: this.userInfo.id,
order_taking: this.userInfo.order_taking,
})
.then((result) => {
request
.post("/user/getuser", {
type: 3,
})
.then((result) => {
this.userInfo.order_taking = result.data.order_taking;
});
});
},
getOrderNumber() {
let url = this.urlList[this.typeId].ordernum;
let date = {};
if (this.typeId == 1) {
date = {
sj_id: this.userInfo.id,
};
} else {
date = {
sjid: this.userInfo.id,
};
}
request.post(url, date).then((res) => {
this.ordernum = res.data;
});
},
getOrderList(isRefresh = true) {
this.isLoad = false;
if (isRefresh) {
this.page = 1;
this.limit = 10;
this.orderList = [];
}
let url = this.urlList[this.typeId].list;
let date = {};
if (this.typeId == 0 || this.typeId == 2) {
date = {
sjid: this.userInfo.id,
state: this.typeOrder,
};
}
if (this.typeId == 1) {
date = {
page: this.page,
limit: this.limit,
state: this.typeOrder,
date: this.days,
};
}
if (this.typeId == 3 || this.typeId == 4) {
date = {
page: this.page,
limit: this.limit,
sjid: this.userInfo.id,
state: this.typeOrder,
};
}
request
.post(url, date)
.then((res) => {
if (isRefresh) {
if (this.typeId == 1 || this.typeId == 2) {
this.orderList = res.data.list;
this.count = res.data.count;
return;
}
this.orderList = res.data;
this.count = res.count;
} else {
if (this.typeId == 1 || this.typeId == 2) {
this.orderList = [...this.orderList, ...res.data.list];
this.count = res.data.count;
return;
}
this.orderList = [...this.orderList, ...res.data];
this.count = res.count;
}
})
.finally(() => {
this.isLoad = true;
uni.stopPullDownRefresh();
});
},
handleSwitchChange(e) {
if (this.noClick) {
// 第一次点击
this.noClick = false;
this.orderSwitch = e;
if (this.userInfo.order_taking == 1) {
this.userInfo.order_taking = 2;
} else if (this.userInfo.order_taking == 2) {
this.userInfo.order_taking = 1;
}
this.syrorsjordertaking();
setTimeout(() => {
this.noClick = true;
}, 1000);
}
},
goRoleMy() {
uni.$uv.throttle(() => {
this.currentIndex = 1;
// uni.navigateTo({
// url: "/pages/shop/my",
// });
}, 500)
},
goMoreSetting() {
uni.navigateTo({
url: "/pages/artisan/unavailable-time",
});
},
// 去订单详情
goOrderDetail(item) {
let path = "";
if (this.typeId == 0 || this.typeId == 3 || this.typeId == 4) {
path = `/pages/shop/userorder-detail?id=${item.id}&haveButton=${this.haveButton}`;
} else if (this.typeId == 1) {
path = `/pages/shop/SellerDetail?id=${item.id}`;
} else if (this.typeId == 2) {
path = `/pages/shop/userorder-detail?id=${item.id}&order_type=2`;
}
console.log(path);
uni.navigateTo({
url: path,
});
},
// 报名入口
goToCompetition() {},
switchTimeRange(range) {
this.timeRange = range;
},
// 取消订单
cancelOrder(e, order) {
uni.showModal({
title: "取消订单",
content: "确定要取消该订单吗?(订单取消后,支付金额将原路退回)",
success: (res) => {
if (res.confirm) {
// TODO: 取消订单
let data = {
orderNo: order.number,
amount: order.pay_money,
sjid: this.userInfo.id,
};
let url = "";
if (order.pay_kind == 1) {
url = "";
} else if (order.pay_kind == 2) {
url = this.urlList[this.typeId].weChatRefund;
} else if (order.pay_kind == 3) {
url = this.urlList[this.typeId].aliRefund;
}
console.log(data, url);
if (this.clickType) {
return
}
this.clickType = true
request
.post(url, data)
.then((res) => {
console.log("取消订单返回结果", res);
if (res.state == 1 || res.code == 1 || res.code == 200) {
uni.showToast({
title: "取消成功!",
icon: "none",
});
this.getOrderNumber();
this.getOrderList();
} else {
uni.showToast({
title: res.msg,
icon: "none",
});
}
})
.catch((err) => {
console.log(err);
}).finally(() => {
this.clickType = false
});
}
},
});
},
// 接单
confirmOrder(e, order) {
if (this.clickType) {
return
}
this.clickType = true
request
.post("/sj/workSeatOrder/sure", {
id: order.id,
})
.then((res) => {
uni.showToast({
title: "已接单",
icon: "none",
});
if (res.code == 200) {
this.getOrderNumber();
this.getOrderList();
}
}).finally(() => {
this.clickType = false
});
},
// 开始服务
startOrder(e, order) {
if (order.team_buy_order_state == 1) {
uni.showToast({
title: "订单当前处于拼团中,服务将在拼团完成后才开启~",
icon: "none",
});
return
}
this.showInput = true;
this.handelOrder = order;
},
// 输入完成
onConfirm(code) {
this.showInput = false;
if (this.clickType) {
return
}
this.clickType = true
request
.post(this.urlList[this.typeId].startOrder, {
id: this.handelOrder.id,
server_code: code,
sjid: this.userInfo.id,
})
.then((res) => {
console.log(res);
if (res.state == 1 || res.code == 200) {
uni.showToast({
title: res.msg,
icon: "none",
});
this.getOrderNumber();
this.getOrderList();
} else {
uni.showToast({
title: res.msg,
icon: "none",
});
}
this.handelOrder = {};
}).finally(() => {
this.clickType = false
});
},
// 完成服务
endOrder: debounce(function(e, order) {
if (this.clickType) {
return
}
this.clickType = true
request
.post(this.urlList[this.typeId].endOrder, {
id: order.id,
sjid: this.userInfo.id,
})
.then((res) => {
console.log("res====================", res);
if (res.state == 1 || res.code == 200) {
uni.showToast({
title: res.msg,
icon: "none",
});
this.getOrderNumber();
this.getOrderList();
}
}).finally(() => {
this.clickType = false
});
}, 500),
},
};
</script>
<style lang="less" scoped>
// page {
// background-color: #fafafa;
// padding-bottom: 40rpx;
// }
.artisan-page {
/* min-height: 100vh; */
position: relative;
padding-bottom: 110rpx;
}
.artisan-page::before {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
height: 580rpx !important;
background-image: url("/static/images/bg.png");
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
z-index: 1;
}
.bg {
position: relative;
}
.bg::before {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
height: 272rpx !important;
/* #ifdef APP-PLUS || MP-WEIXIN */
height: calc(272rpx + var(--status-bar-height)) !important;
/* #endif */
background-image: url("/static/images/bg.png");
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
z-index: 999;
}
.profile-section,
.switch-section,
.order-class,
.order-list,
.nothings-box {
position: relative;
z-index: 99;
}
.profile-section {
position: fixed;
top: 88rpx;
left: 0;
right: 0;
height: 184rpx;
/* background-color: transparent; */
z-index: 999;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
padding: 0 24rpx;
}
.profile-info {
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
}
.avatar {
width: 96rpx;
height: 96rpx;
border-radius: 50rpx;
margin-right: 24rpx;
background-color: #333333;
border: 4rpx solid #ffffff;
}
.name {
font-size: 36rpx;
font-weight: 500;
color: #000000;
}
.welcome {
font-weight: 400;
font-size: 22rpx;
color: #999999;
line-height: 30rpx;
text-align: left;
font-style: normal;
}
.center-text {
font-weight: 400;
font-size: 28rpx;
color: #333333;
line-height: 37rpx;
text-align: left;
font-style: normal;
}
.switch-section {
margin: 184rpx 24rpx 32rpx;
height: 82rpx;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
font-size: 28rpx;
background-image: url("/static/images/shop/jdBj.png");
background-size: cover;
/* 确保图片覆盖整个屏幕 */
background-repeat: no-repeat;
/* 防止图片重复 */
background-position: center center;
/* 图片居中显示 */
border-radius: 14rpx;
padding: 0 32rpx;
box-shadow: 0 4rpx 16rpx 0 rgba(210, 213, 224, 0.5);
}
.switch-box {
/* width: 126rpx; */
height: 52rpx;
line-height: 52rpx;
border-radius: 26rpx;
background-color: #E8101E;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
padding: 0 6rpx;
}
.switch-text {
font-size: 24rpx;
padding: 0 12rpx;
color: #ffffff;
}
.switch-yuan {
width: 40rpx;
height: 40rpx;
border-radius: 20rpx;
background-color: #fff;
}
.switch-box.disswitch {
background-color: rgba(0, 0, 0, 0.1);
}
.switch-box.disswitch .switch-yuan {
margin-left: 0;
}
.switch-box.disswitch {
background-color: rgba(0, 0, 0, 0.1);
}
.switch-box.disswitch .switch-yuan {
margin-left: 0;
margin-right: 4rpx;
}
.switch-tip {
font-weight: 400;
font-size: 28rpx;
color: #333333;
line-height: 37rpx;
text-align: left;
font-style: normal;
}
.competition-section {
margin: 24rpx;
background-color: #ffffff;
border-radius: 12rpx;
padding: 24rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
.comp-left {
display: flex;
align-items: center;
}
.trophy-icon {
width: 48rpx;
height: 48rpx;
margin-right: 16rpx;
}
.comp-right {
display: flex;
align-items: center;
color: #999999;
font-size: 24rpx;
}
.arrow-icon {
width: 32rpx;
height: 32rpx;
margin-left: 8rpx;
}
.statistics-section {
margin: 24rpx;
background-color: #ffffff;
border-radius: 12rpx;
padding: 24rpx;
}
.stat-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24rpx;
}
.stat-title {
font-size: 32rpx;
font-weight: 500;
}
.time-filter {
display: flex;
align-items: center;
font-size: 24rpx;
color: #999999;
}
.time-filter text {
margin-left: 24rpx;
}
.time-filter .active {
color: #E8101E;
}
.chart-container {
height: 400rpx;
margin-bottom: 24rpx;
}
.order-class {
padding-bottom: 20rpx;
overflow: hidden;
width: 750rpx;
margin: 36rpx 0 0;
border-radius: 28rpx 28rpx 28rpx 28rpx;
background-color: #fff;
.order-types {
margin: 0 20px;
height: 49px;
display: flex;
justify-content: flex-start;
// border-bottom: 1px solid rgba(255, 225, 225, 0.2);
align-items: center;
flex-wrap: nowrap;
column-gap: 40rpx;
.order-type-item {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
margin-top: 0;
transition: all 0.3s ease;
.type-name {
font-weight: 500;
font-size: 30rpx;
color: #333333;
line-height: 42rpx;
text-align: left;
font-style: normal;
white-space: nowrap;
}
}
.order-type-item.active {
position: relative;
background-color: #fff;
.type-name {
color: #E8101E;
}
}
}
}
.active-line {
width: 28rpx;
height: 6rpx;
border-radius: 4rpx;
background-color: #E8101E;
position: absolute;
bottom: -10rpx;
z-index: 99;
}
.order-state {
width: 726rpx;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
margin-top: 10rpx;
padding: 0 36rpx;
gap: 16rpx;
/* H5 必须添加以下属性 */
/* #ifdef H5 */
white-space: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
/* iOS平滑滚动 */
/* #endif */
::v-deep .uni-scroll-view-content {
display: flex !important;
flex-flow: row nowrap !important;
justify-content: flex-start !important;
align-items: center !important;
/* H5 需要添加 */
/* #ifdef H5 */
width: max-content !important;
min-width: 100% !important;
/* #endif */
}
}
.order-state-item {
box-sizing: border-box;
height: 56rpx;
background: #F3F5F6;
border-radius: 10rpx;
padding: 0 20rpx;
font-weight: 400;
font-size: 28rpx;
color: #333333;
line-height: 56rpx;
text-align: left;
font-style: normal;
margin-right: 50rpx;
}
.state- {
margin: 12rpx 0;
}
.order-state-item.active {
background: #FEE5E7;
color: #E8101E;
}
.order-state__user {
margin-top: 10rpx;
padding-left: 36rpx;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
column-gap: 50rpx;
.order-state-item {
margin-right: 0rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
// padding: 0 30rpx;
width: auto;
height: 56rpx;
}
.state-name {
margin: 0;
}
}
.order-list {
background-color: #f5f5f5;
border-radius: 28rpx 28rpx 0 0;
padding-top: 24rpx;
margin-top: -40rpx;
padding-bottom: 280rpx;
}
.order-item {
background-color: #ffffff;
border-radius: 16rpx;
padding: 32rpx;
margin: 0 24rpx 24rpx;
box-shadow: 0 8rpx 16rpx 0 rgba(210, 213, 224, 0.5);
}
.order-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8rpx;
}
.service-name {
font-size: 28rpx;
color: #333333;
font-weight: 500;
flex: 1;
}
.order-info {
margin-bottom: 32rpx;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: flex-start;
}
.address,
.service-time,
.order-number {
flex: 1;
font-size: 24rpx;
color: #666666;
}
.order-footer {
display: flex;
justify-content: space-between;
align-items: center;
}
.order-actions {
padding-top: 32rpx;
border-top: 1rpx solid rgba(0, 0, 0, 0.05);
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;
gap: 24rpx;
}
.action-btn {
/* width: 96rpx;
height: 40rpx; */
padding: 8rpx 12rpx;
display: flex;
justify-content: center;
align-items: center;
border-radius: 6rpx;
}
.action-btn.cancel,
.action-btn.confirm {
border: 1rpx solid rgba(51, 51, 51, 0.12);
box-sizing: border-box;
}
.action-btn.cancel .action-text,
.action-btn.confirm .action-text {
font-size: 28rpx;
color: #333333;
font-weight: 400;
}
.action-btn.verify {
border: 1rpx solid rgba(252, 67, 124, 0.12);
box-sizing: border-box;
}
.action-btn.verify .action-text {
font-size: 28rpx;
color: #E8101E;
}
.nothings-box {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
padding: 280rpx 0 0;
}
.nothings-text {
font-size: 32rpx;
font-weight: 500;
color: #999999;
text-align: center;
font-style: italic;
}
.arrow-right {
width: 11rpx;
height: 22rpx;
margin-top: 10rpx;
margin-left: 15rpx;
// padding-right: 10rpx;
}
/* APP适配 */
/* #ifdef APP-PLUS */
.nav-bar {
padding-top: 0;
}
.profile-section {
top: calc(var(--status-bar-height) + 88) rpx;
}
/* #endif */
/* 小程序适配 */
/* #ifdef MP-WEIXIN */
.nav-bar {
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
}
.profile-section {
top: calc(var(--status-bar-height) + 88rpx);
}
/* #endif */
</style>