You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1051 lines
29 KiB

<template>
<view>
<!-- staff内容 -->
<view class="order-page" :class="{ 'order-page--primary': showRefundPrimary, 'order-page--refund-sub': isCurrentRefundOrdersTab }">
<!-- 顶部栏 -->
<u-navbar :is-back="false" title="订单管理系统" :background="{'background':'#1479ff'}" title-color="#fff"
:border-bottom="false">
</u-navbar>
<view class="b-border"></view>
<view v-if="showRefundPrimary" class="primary-tabs">
<view :class="['primary-tab', { active: primaryTab === 'orders' }]" @click="switchPrimary('orders')">订单</view>
<view :class="['primary-tab', { active: primaryTab === 'refunds' }]" @click="switchPrimary('refunds')">退款管理</view>
</view>
<block v-if="primaryTab === 'orders'">
<!-- Tabs -->
<view class="tabs">
<view v-for="(tab, idx) in orderTabs" :key="idx" :class="['tab', {active: currentTab === idx}]"
@click="changeTab(idx)">
{{ tab.name }}
</view>
</view>
<view v-if="isCurrentRefundOrdersTab" class="tabs sub-tabs">
<view v-for="(st, idx) in refundOrderSubTabs" :key="'rs-' + idx"
:class="['tab', 'sub-tab', { active: refundOrderSubTab === idx }]"
@click="changeRefundSubTab(idx)">
{{ st.name }}
</view>
</view>
<!-- 普通订单列表 -->
<view v-if="!isCurrentRefundOrdersTab" class="order">
<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
<block v-if="list.length>0">
<view class="order-list">
<view class="order-card" v-for="item in list" :key="item.id">
<view class="order-icon" :class="typeText[Number(item.type)] ? typeText[Number(item.type)].class : typeText[1].class">
{{ typeText[Number(item.type)] ? typeText[Number(item.type)].name : typeText[1].name }}
</view>
<view class="order-header">
<view class="order-time">
服务时间:<text>{{ item.time }}</text>
</view>
<view class="order-status">{{ orderListStatusLabel(item, orderTabs[currentTab].name) }}</view>
</view>
<view class="order-body">
<view class="order-left">
<block v-if="Number(item.type) === 2">
<view>服务地址:{{ homeCareServiceAddress(item) }}</view>
</block>
<block v-else>
<view>就诊医院:{{ item.hospital?item.hospital.name:'' }}</view>
</block>
<view>被服务人:{{ item.user_archive?item.user_archive.name:'' }}</view>
<view>服务项目:{{ item.accompany_product?item.accompany_product.name:'' }}</view>
<view>订单号:{{ item.no }} <text class="copy" @click="copy(item.no)">复制</text></view>
</view>
<view class="order-price">¥<text>{{ item.price }}</text></view>
</view>
<view class="order-footer">
<u-button size="mini" @click="toUrl(item.id)" shape="circle" type="default"
:custom-style="normalStyle">详情</u-button>
<u-button v-if="canApplyRefundForOrder(item)" size="mini" shape="circle" type="warning"
:custom-style="refundApplyBtnStyle" @click="applyStaffRefund(item.id)">申请退款</u-button>
<u-button v-if="isSiteMaster && (Number(item.pay_status) === 0 || Number(item.pay_status) === 3)" size="mini" shape="circle" type="default"
:custom-style="normalStyle" @click="editOrder(item.id)">修改价格</u-button>
<u-button v-if="orderTabs[currentTab] && orderTabs[currentTab].id === 5" @click="assignOrder(item.id)" size="mini" shape="circle" type="default"
:custom-style="normalStyle">分配</u-button>
</view>
</view>
</view>
<u-loadmore v-if="!(list.length===0 && select.page===1)" :margin-top="20" :margin-bottom="40"
:status="loadStatus"></u-loadmore>
</block>
<view v-else style="height: 100%;" class="d-flex ai-center jc-center">
<u-empty mode="list" text="暂无订单"></u-empty>
</view>
</scroll-view>
</view>
<!-- 退款订单列表(普通工作人员只读) -->
<view v-else class="order refund-panel">
<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottomRefundOrders">
<block v-if="staffRefundOrderList.length > 0">
<view class="order-list">
<view class="order-card refund-card" v-for="row in staffRefundOrderList" :key="row.id">
<block v-if="row.order && row.order.id">
<view class="order-icon"
:class="typeText[Number(row.order.type)] ? typeText[Number(row.order.type)].class : typeText[1].class">
{{ typeText[Number(row.order.type)] ? typeText[Number(row.order.type)].name : typeText[1].name }}
</view>
<view class="order-header">
<view class="order-time">
服务时间:<text>{{ row.order.time }}</text>
</view>
<view class="order-status">{{ refundStatusText(row.status) }}</view>
</view>
<view class="order-body">
<view class="order-left">
<view class="refund-no-in-body">退款编号:{{ row.no }}</view>
<view v-if="row.apply_reason" class="refund-reason-in-body">退款理由:{{ row.apply_reason }}</view>
<block v-if="Number(row.order.type) === 2">
<view>服务地址:{{ homeCareServiceAddress(row.order) }}</view>
</block>
<block v-else>
<view>就诊医院:{{ row.order.hospital ? row.order.hospital.name : '' }}</view>
</block>
<view>被服务人:{{ row.order.user_archive ? row.order.user_archive.name : '' }}</view>
<view>服务项目:{{ row.order.accompany_product ? row.order.accompany_product.name : '' }}</view>
<view>订单号:{{ row.order.no }} <text class="copy"
@click="copy(row.order.no)">复制</text></view>
</view>
<view class="order-price">¥<text>{{ row.order.price }}</text></view>
</view>
<view class="order-footer refund-simple-footer">
<u-button size="mini" shape="circle" type="default"
:custom-style="normalStyle" @click="toUrl(row.order.id)">详情</u-button>
</view>
</block>
</view>
</view>
<u-loadmore v-if="!(staffRefundOrderList.length===0 && staffRefundOrderSelect.page===1)" :margin-top="20"
:margin-bottom="40" :status="staffRefundOrderLoadStatus"></u-loadmore>
</block>
<view v-else class="d-flex ai-center jc-center" style="min-height: 400rpx;">
<u-empty mode="list" text="暂无退款订单"></u-empty>
</view>
</scroll-view>
</view>
</block>
<block v-else>
<view class="tabs sub-tabs">
<view v-for="(st, idx) in refundManageSubTabs" :key="'rm-' + idx"
:class="['tab', 'sub-tab', { active: refundManageSubTab === idx }]"
@click="changeRefundManageSubTab(idx)">
{{ st.name }}
</view>
</view>
<view class="order refund-panel refund-panel--manage">
<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottomRefund">
<block v-if="refundList.length > 0">
<view class="order-list">
<view class="order-card refund-card" v-for="row in refundList" :key="row.id">
<block v-if="row.order && row.order.id">
<view class="order-icon"
:class="typeText[Number(row.order.type)] ? typeText[Number(row.order.type)].class : typeText[1].class">
{{ typeText[Number(row.order.type)] ? typeText[Number(row.order.type)].name : typeText[1].name }}
</view>
<view class="order-header">
<view class="order-time">
服务时间:<text>{{ row.order.time }}</text>
</view>
<view class="order-status">{{ refundManageTabText(row.status) }}</view>
</view>
<view class="order-body">
<view class="order-left">
<view class="refund-no-in-body">退款编号:{{ row.no }}</view>
<view v-if="row.apply_reason" class="refund-reason-in-body">退款理由:{{ row.apply_reason }}</view>
<block v-if="Number(row.order.type) === 2">
<view>服务地址:{{ homeCareServiceAddress(row.order) }}</view>
</block>
<block v-else>
<view>就诊医院:{{ row.order.hospital ? row.order.hospital.name : '' }}</view>
</block>
<view>被服务人:{{ row.order.user_archive ? row.order.user_archive.name : '' }}</view>
<view>服务项目:{{ row.order.accompany_product ? row.order.accompany_product.name : '' }}</view>
<view>订单号:{{ row.order.no }} <text class="copy"
@click="copy(row.order.no)">复制</text></view>
</view>
<view class="order-price">¥<text>{{ row.order.price }}</text></view>
</view>
<view class="order-footer refund-simple-footer">
<u-button size="mini" shape="circle" type="primary"
@click="goRefundManageDetail(row.id)">详情</u-button>
</view>
</block>
<block v-else>
<view class="refund-mini-line refund-mini-line--plain">退款编号:{{ row.no }}</view>
<view class="refund-mini-line refund-mini-line--plain">状态:{{ refundManageTabText(row.status) }}</view>
<view class="order-footer refund-simple-footer">
<u-button size="mini" shape="circle" type="primary"
@click="goRefundManageDetail(row.id)">详情</u-button>
</view>
</block>
</view>
</view>
<u-loadmore v-if="!(refundList.length===0 && refundSelect.page===1)" :margin-top="20" :margin-bottom="40"
:status="refundLoadStatus"></u-loadmore>
</block>
<view v-else class="d-flex ai-center jc-center" style="min-height: 400rpx;">
<u-empty mode="list" :text="refundManageEmptyText"></u-empty>
</view>
</scroll-view>
</view>
</block>
<!-- 二维码 -->
<u-popup v-model="showPayCode" z-index="99999" :mask-close-able="false" mode="center" border-radius="12"
width="690rpx">
<view class="payment-popup">
<view class="title">付款二维码</view>
<view class="amount">
<text class="symbol">¥</text>
<text class="number">{{diff_price}}</text>
</view>
<view class="qr-code">
<!-- <image :src="qrCodeUrl" mode="aspectFit"></image> -->
<uqrcode v-if="myQrcode" ref="uqrcode" canvas-id="qrcode" :value="myQrcode" :sizeUnit="'rpx'"
:size="200" :options="{
margin: 10,
}"></uqrcode>
</view>
<view class="tips">
<text>请扫码支付差额</text>
<text class="sub-tips">支付完成后订单将自动完成</text>
</view>
<view class="close-btn">
<u-button size="mini" shape="circle" type="default" :custom-style="normalStyle"
@click="closePayCode">关闭</u-button>
<u-button size="mini" shape="circle" type="default" :custom-style="parStyle"
@click="isPayCode">我已支付</u-button>
</view>
</view>
</u-popup>
</view>
<view v-if="primaryTab === 'orders'" class="add-order-btn-wrapper">
<u-button
type="primary"
shape="circle"
class="add-order-btn"
@click="addOrder"
>新增订单</u-button>
</view>
<TabBar :tabbarList="tabbarList" :current="currentTabIndex" />
</view>
</template>
<script>
import uqrcode from '@/uni_modules/Sansnn-uQRCode/components/uqrcode/uqrcode.vue'
import { nurseTabbar, staffTabbar } from '@/common/tabbarConfig.js'
import { homeCareServiceAddress } from '@/common/homeCareAddress.js'
import { promptRefundReason, orderListStatusLabel, hasPendingRefund, refundStatusText, refundManageTabText } from '@/common/refundApply.js'
import TabBar from '@/components/tab-bar/tab-bar.vue'
export default {
components: {
uqrcode,
TabBar
},
data() {
return {
loginRole: uni.getStorageSync('login_role') || 'staff',
primaryTab: 'orders',
isSiteMaster: false,
refundList: [],
refundSelect: { page: 1, page_size: 5 },
refundLastPage: 1,
refundLoadStatus: 'loadmore',
showPayCode: false,
diff_price: '0.00',
myQrcode: '',
typeText: {
1: { name: '诊', class: 'doctor' },
2: { name: '护', class: 'nurse' }
},
currentTab: 0,
normalStyle: {
'background': '#969da7',
'color': '#fff',
'font-size': '28rpx',
'padding': '0 30rpx',
'margin-left': '15rpx'
},
parStyle: {
'background': 'linear-gradient(to right, #476de4, #7bb9f7)',
'color': '#fff',
'font-size': '28rpx',
'padding': '0 30rpx',
'margin-left': '15rpx'
},
refundApplyBtnStyle: {
'background': '#e6a23c',
'color': '#fff',
'font-size': '28rpx',
'padding': '0 26rpx',
'margin-left': '15rpx'
},
last_page: 1,
select: {
page: 1,
page_size: 5,
status: 0,
},
list: [],
loadStatus: 'loadmore',
refundOrderSubTabs: [
{ status: 0, name: '退款审核中' },
{ status: 2, name: '已驳回' },
{ status: 1, name: '已退款' },
],
refundOrderSubTab: 0,
staffRefundOrderList: [],
staffRefundOrderSelect: { page: 1, page_size: 5 },
staffRefundOrderLastPage: 1,
staffRefundOrderLoadStatus: 'loadmore',
refundManageSubTab: 0,
refundManageSubTabs: [
{ status: 0, name: '待审核' },
{ status: 1, name: '已退款' },
{ status: 2, name: '已驳回' },
],
}
},
computed: {
orderTabs() {
const base = [
{ id: 0, name: '待支付' },
{ id: 1, name: '已支付' },
{ id: 3, name: '待审核' },
]
if (!this.isSiteMaster) {
base.push({ id: 'refund_orders', name: '退款订单', isRefundOrdersTab: true })
return base
}
return [...base, { id: 5, name: '待分配' }, { id: 6, name: '已分配' }]
},
isCurrentRefundOrdersTab() {
const tab = this.orderTabs[this.currentTab]
return !!(tab && tab.isRefundOrdersTab)
},
refundManageEmptyText() {
const sub = this.refundManageSubTabs[this.refundManageSubTab]
return sub ? ('暂无' + sub.name + '记录') : '暂无退款记录'
},
showRefundPrimary() {
return !!this.isSiteMaster
},
tabbarList() {
return this.loginRole === 'nurse' ? nurseTabbar : staffTabbar
},
currentTabIndex() {
const path = '/' + (this.$mp?.page?.route || this.$route?.path || '')
return this.tabbarList.findIndex(item => path === item.pagePath)
}
},
onLoad() {
this._pendingReviewHandler = () => {
this.primaryTab = 'orders'
this.changeTab(2)
}
uni.$on('switchToPendingReview', this._pendingReviewHandler)
},
onShow() {
this.bootstrapPage()
},
onShareAppMessage() {
return {
title: '医康养服务', // 分享标题
path: '/pages/index/index', // 分享路径,通常指向首页
}
},
onUnload() {
if (this._pendingReviewHandler) {
uni.$off('switchToPendingReview', this._pendingReviewHandler)
}
},
methods: {
homeCareServiceAddress,
orderListStatusLabel,
refundStatusText,
refundManageTabText,
hasPendingRefund,
canApplyRefundForOrder(item) {
if (Number(item.pay_status) !== 1) return false
if (Number(item.status) === 4) return false
if (hasPendingRefund(item)) return false
if (item.refund_display_status === 'rejected') return true
if (item.refund_display_status && item.refund_display_status !== 'none') return false
return true
},
async applyStaffRefund(orderId) {
const reason = await promptRefundReason()
if (!reason) return
uni.showModal({
title: '确认提交',
content: '退款申请需站点总账号或运营审核通过后原路退回。',
success: async (r) => {
if (!r.confirm) return
const res = await this.$u.api.workerAccompanyRefundApply({ id: orderId, reason })
if (res === false) return
uni.showToast({ title: '已提交申请', icon: 'success' })
this.select.page = 1
this.list = []
this.getStaffOrderList()
}
})
},
apiErrorMessage(e, fallback) {
const m = e && (e.msg || e.message || (e.data && (e.data.msg || e.data.message)))
if (m && String(m).trim()) return String(m).slice(0, 60)
return fallback || '操作失败'
},
copy(text) {
uni.setClipboardData({
data: text,
success: () => {
uni.showToast({
title: '已复制',
icon: 'none'
});
}
});
},
// 详情
toUrl(id) {
uni.navigateTo({
url: '/package_sub/order/orderStaffDetail?&id=' + id
})
},
assignOrder(id) {
uni.navigateTo({
url: '/package_sub/order/assignOrder?&id=' + id
})
},
// 修改
editOrder(id) {
uni.navigateTo({
url: '/package_sub/order/editPrice?&id=' + id
})
},
addOrder() {
uni.navigateTo({
url: '/package_sub/order/service'
})
},
// 付款二维码
async showCode(item) {
const res = await this.$u.api.payCode({
no:item.no
})
if(res.result.return_code==='SUCCESS'){
this.myQrcode = res.result.code_url
this.diff_price = parseFloat(item.diff_price).toFixed(2)
this.showPayCode = true
}else{
uni.showToast({
icon:'none',
title:'获取失败'
})
}
},
closePayCode(){
this.myQrcode = ''
this.diff_price = '0.00'
this.showPayCode = false
},
isPayCode(){
this.myQrcode = ''
this.diff_price = '0.00'
this.showPayCode = false
this.list = []
this.select.page = 1
this.getStaffOrderList()
},
// 结束服务
closeOrder(item){
let that = this
uni.showModal({
title: '是否确认订单已完成?',
success(res) {
if (res.confirm) {
that.$u.api.saveOrder({
id: item.id,
status:4
}).then(res => {
that.base.toast("服务完成", 1500, function() {
setTimeout(function() {
that.select.page = 1
that.list = []
that.getStaffOrderList()
}, 1500)
})
})
}
}
})
},
changeTab(idx) {
this.currentTab = idx
const tab = this.orderTabs[idx]
if (tab && tab.isRefundOrdersTab) {
this.refundOrderSubTab = 0
this.staffRefundOrderSelect.page = 1
this.staffRefundOrderList = []
this.getStaffRefundOrderList()
return
}
this.select.status = tab.id
this.list = []
this.select.page = 1
this.getStaffOrderList()
},
changeRefundSubTab(idx) {
this.refundOrderSubTab = idx
this.staffRefundOrderSelect.page = 1
this.staffRefundOrderList = []
this.getStaffRefundOrderList()
},
async getStaffOrderList() {
try {
const params = {
page: this.select.page,
page_size: this.select.page_size,
};
if (this.select.status === 5) {
params.allocation = 'pending'
} else if (this.select.status === 6) {
params.allocation = 'assigned'
} else {
params.pay_status = this.select.status
}
const res = await this.$u.api.staffOrder(params)
if (res && res.data) {
this.last_page = res.last_page || 1
this.loadStatus = this.select.page >= this.last_page ? 'nomore' : 'loadmore'
// 第一页替换数据,其他页追加数据
if (this.select.page === 1) {
this.list = res.data;
} else {
this.list.push(...res.data);
}
} else {
this.last_page = 1
this.loadStatus = 'nomore'
// 如果没有数据,清空列表
if (this.select.page === 1) {
this.list = [];
}
uni.showToast({
title: '获取订单列表失败',
icon: 'none'
})
}
} catch (error) {
console.error('获取订单列表错误:', error)
this.last_page = 1
this.loadStatus = 'nomore'
// 出错时,如果是第一页则清空列表
if (this.select.page === 1) {
this.list = [];
}
uni.showToast({
title: '获取订单列表失败',
icon: 'none'
})
}
},
reachBottom() {
if (this.primaryTab !== 'orders' || this.isCurrentRefundOrdersTab) return
if (this.select.page >= this.last_page) {
this.loadStatus = 'nomore'
return
}
this.loadStatus = 'loading'
this.select.page++
this.getStaffOrderList()
},
reachBottomRefundOrders() {
if (!this.isCurrentRefundOrdersTab) return
if (this.staffRefundOrderSelect.page >= this.staffRefundOrderLastPage) {
this.staffRefundOrderLoadStatus = 'nomore'
return
}
this.staffRefundOrderLoadStatus = 'loading'
this.staffRefundOrderSelect.page++
this.getStaffRefundOrderList()
},
async getStaffRefundOrderList() {
try {
const sub = this.refundOrderSubTabs[this.refundOrderSubTab]
const res = await this.$u.api.staffRefundOrders({
page: this.staffRefundOrderSelect.page,
page_size: this.staffRefundOrderSelect.page_size,
refund_status: sub ? sub.status : 0,
})
if (res && res.data) {
this.staffRefundOrderLastPage = res.last_page || 1
this.staffRefundOrderLoadStatus = this.staffRefundOrderSelect.page >= this.staffRefundOrderLastPage ? 'nomore' : 'loadmore'
if (this.staffRefundOrderSelect.page === 1) {
this.staffRefundOrderList = res.data
} else {
this.staffRefundOrderList.push(...res.data)
}
} else {
this.staffRefundOrderLastPage = 1
this.staffRefundOrderLoadStatus = 'nomore'
if (this.staffRefundOrderSelect.page === 1) this.staffRefundOrderList = []
}
} catch (e) {
console.error(e)
this.staffRefundOrderLoadStatus = 'nomore'
if (this.staffRefundOrderSelect.page === 1) this.staffRefundOrderList = []
}
},
async bootstrapPage() {
await this.refreshStaffProfile()
if (this.currentTab >= this.orderTabs.length) {
this.currentTab = 0
}
if (this.primaryTab === 'orders') {
if (this.isCurrentRefundOrdersTab) {
this.staffRefundOrderSelect.page = 1
this.staffRefundOrderList = []
this.getStaffRefundOrderList()
} else {
this.select.status = this.orderTabs[this.currentTab].id
this.select.page = 1
this.list = []
this.getStaffOrderList()
}
} else {
this.refundManageSubTab = 0
this.refundSelect.page = 1
this.refundList = []
this.fetchRefundList()
}
},
async refreshStaffProfile() {
try {
const res = await this.$u.api.getStaffUser({})
const u = res && (res.data !== undefined && res.data !== null ? res.data : res)
if (u && (u.id != null || u.username)) {
const m = u.is_site_master === true || u.is_site_master === 1 || u.is_site_master === '1'
this.isSiteMaster = !!m
uni.setStorageSync('is_site_master', this.isSiteMaster ? 1 : 0)
}
} catch (e) {
this.isSiteMaster = false
}
if (!this.isSiteMaster) {
this.primaryTab = 'orders'
}
},
switchPrimary(tab) {
if (tab === 'refunds' && !this.isSiteMaster) return
this.primaryTab = tab
if (tab === 'orders') {
this.select.page = 1
this.list = []
this.getStaffOrderList()
} else {
this.refundManageSubTab = 0
this.refundSelect.page = 1
this.refundList = []
this.fetchRefundList()
}
},
changeRefundManageSubTab(idx) {
this.refundManageSubTab = idx
this.refundSelect.page = 1
this.refundList = []
this.fetchRefundList()
},
async fetchRefundList() {
try {
const sub = this.refundManageSubTabs[this.refundManageSubTab]
const res = await this.$u.api.staffRefundList({
page: this.refundSelect.page,
page_size: this.refundSelect.page_size,
status: sub ? sub.status : 0,
})
if (res && res.data) {
this.refundLastPage = res.last_page || 1
this.refundLoadStatus = this.refundSelect.page >= this.refundLastPage ? 'nomore' : 'loadmore'
if (this.refundSelect.page === 1) {
this.refundList = res.data
} else {
this.refundList.push(...res.data)
}
} else {
this.refundLastPage = 1
this.refundLoadStatus = 'nomore'
if (this.refundSelect.page === 1) this.refundList = []
}
} catch (e) {
console.error(e)
this.refundLoadStatus = 'nomore'
if (this.refundSelect.page === 1) this.refundList = []
uni.showToast({ title: '加载失败', icon: 'none' })
}
},
reachBottomRefund() {
if (this.refundSelect.page >= this.refundLastPage) {
this.refundLoadStatus = 'nomore'
return
}
this.refundLoadStatus = 'loading'
this.refundSelect.page++
this.fetchRefundList()
},
goRefundManageDetail(refundId) {
if (!refundId) return
const role = uni.getStorageSync('login_role') === 'operator' ? 'operator' : 'staff'
uni.navigateTo({
url: '/package_sub/order/refundManageDetail?id=' + refundId + '&source=' + role
})
},
}
}
</script>
<style scoped lang="scss">
.order-page {
background: #f6f8fb;
height: 100vh;
overflow: hidden;
}
.b-border {
width: 100%;
height: 30rpx;
border-radius: 0 0 120rpx 120rpx;
background-color: #1479ff;
}
.primary-tabs {
display: flex;
margin: 0 30rpx;
padding: 20rpx 0 12rpx;
gap: 20rpx;
}
.primary-tab {
flex: 1;
text-align: center;
padding: 16rpx 0;
font-size: 28rpx;
color: #666;
background: #fff;
border-radius: 12rpx;
box-shadow: 0 2rpx 8rpx #e6eaf1;
&.active {
color: #fff;
font-weight: bold;
background: linear-gradient(to right, #476de4, #7bb9f7);
box-shadow: none;
}
}
.tabs {
display: flex;
padding: 0 30rpx;
}
.tab {
flex: 1;
text-align: center;
font-size: 24rpx;
padding: 30rpx 0 20rpx 0;
color: #333333;
position: relative;
}
.tab.active {
color: #000;
font-weight: bold;
font-size: 28rpx;
}
.tab.active::after {
content: '';
display: block;
width: 70%;
height: 9rpx;
background: linear-gradient(to right, #476de4, #7bb9f7);
border-radius: 6rpx;
margin: 0 auto;
margin-top: 10rpx;
}
.sub-tabs {
padding-top: 10rpx;
padding-bottom: 10rpx;
background: #f7f9fc;
}
.sub-tab {
font-size: 22rpx;
padding: 16rpx 0 12rpx;
}
.sub-tab.active {
font-size: 24rpx;
}
.order-page--refund-sub .order {
height: calc(100vh - 360rpx);
padding-bottom: 100rpx;
}
.refund-panel--manage {
height: calc(100vh - 420rpx);
padding-bottom: 100rpx;
}
.order-page--primary .order {
height: calc(100vh - 360rpx);
padding-bottom: 170rpx;
}
.order {
height: calc(100vh - 270rpx);
padding-bottom: 170rpx;
}
.order-list {
padding: 30rpx 0;
padding-bottom: 0;
}
.order-card {
background: #fff;
border-radius: 20rpx;
margin: 0 30rpx 30rpx 30rpx;
box-shadow: 0 4rpx 16rpx #e6eaf1;
padding: 30rpx;
position: relative;
overflow: hidden;
padding-top: 25rpx;
}
.order-icon {
width: 100rpx;
height: 100rpx;
border-radius: 50%;
border: 2rpx solid #e6eaf1;
display: flex;
align-items: center;
justify-content: center;
font-size: 40rpx;
font-weight: bold;
position: absolute;
top: -15rpx;
left: -15rpx;
}
.order-icon.nurse {
color: #cce0ff;
border-color: #cce0ff;
}
.order-icon.doctor {
color: #ffe0b2;
border-color: #ffe0b2;
}
.order-header {
display: flex;
align-items: center;
padding-bottom: 20rpx;
border-bottom: 1rpx dotted #bbb;
width: calc(100% - 80rpx);
margin-left: 80rpx;
}
.order-time {
flex: 1;
color: #969da7;
font-size: 28rpx;
text {
color: #000;
}
}
.order-status {
color: #969da7;
font-size: 28rpx;
}
.order-body {
color: #333;
margin-top: 30rpx;
// margin-bottom: 20rpx;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 28rpx;
.order-left {
&>view {
margin-bottom: 20rpx;
}
}
}
.copy {
color: #969da7;
margin-left: 10rpx;
font-size: 28rpx;
}
.order-price {
color: #333;
font-size: 36rpx;
font-weight: bold;
}
.order-price text {
font-size: 46rpx;
color: #d80808;
}
.order-footer {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
row-gap: 16rpx;
}
.refund-no-in-body {
margin-bottom: 20rpx;
font-size: 26rpx;
color: #666;
}
.refund-reason-in-body {
margin-bottom: 16rpx;
font-size: 26rpx;
color: #666;
line-height: 1.5;
}
.refund-mini-line {
font-size: 24rpx;
color: #888;
&--plain {
margin: 12rpx 30rpx 6rpx 30rpx;
}
}
.refund-simple-footer {
justify-content: center;
border-top: 1rpx solid rgba(0, 0, 0, 0.06);
padding-top: 20rpx;
margin-top: 10rpx;
}
.order-actions {
display: flex;
align-items: center;
}
.payment-popup {
background: #fff;
padding: 40rpx;
.title {
font-size: 32rpx;
color: #333;
text-align: center;
font-weight: 500;
margin-bottom: 30rpx;
}
.amount {
text-align: center;
margin-bottom: 40rpx;
.symbol {
font-size: 36rpx;
color: #000;
}
.number {
font-size: 48rpx;
color: #d80808;
font-weight: bold;
}
}
.qr-code {
width: 200rpx;
height: 200rpx;
margin: 0 auto 40rpx;
image {
width: 100%;
height: 100%;
}
}
.tips {
text-align: center;
margin-bottom: 40rpx;
text {
display: block;
color: #333;
font-size: 28rpx;
line-height: 1.8;
}
.sub-tips {
color: #999;
font-size: 24rpx;
}
}
.close-btn {
width: 80%;
margin: 0 auto;
display: flex;
justify-content: center;
}
}
.add-order-btn-wrapper {
position: fixed;
left: 0;
right: 0;
bottom: 180rpx;
display: flex;
justify-content: center;
z-index: 1001;
pointer-events: none;
}
.add-order-btn {
width: 40vw;
background: linear-gradient(to right, #476de4, #7bb9f7);
color: #fff;
font-size: 32rpx;
border-radius: 50rpx;
pointer-events: auto;
}
</style>