|
|
<script setup>
|
|
|
/**
|
|
|
* name：
|
|
|
* user：sa0ChunLuyu
|
|
|
* date：2023年4月11日 17:56:51
|
|
|
*/
|
|
|
import {
|
|
|
ref,
|
|
|
onMounted
|
|
|
} from 'vue'
|
|
|
import {
|
|
|
OrderRefundAction,
|
|
|
OrderPayAction,
|
|
|
OrderListAction,
|
|
|
$image,
|
|
|
$response
|
|
|
} from '@/api'
|
|
|
import {
|
|
|
onShow
|
|
|
} from '@dcloudio/uni-app'
|
|
|
import {
|
|
|
useStore
|
|
|
} from '@/store'
|
|
|
const $store = useStore()
|
|
|
import Countdown from './countdown/countdown.vue'
|
|
|
const tab_active = ref(0)
|
|
|
const tabChange = (type) => {
|
|
|
tab_active.value = type
|
|
|
OrderList()
|
|
|
}
|
|
|
const tab_arr = ['全部', '待支付', '进行中', '已取消', '已完成', '已退款']
|
|
|
onMounted(() => {
|
|
|
$store.buy_info = {
|
|
|
hospital: 0,
|
|
|
combo: 0,
|
|
|
items: [],
|
|
|
group: '',
|
|
|
person: [],
|
|
|
time: {
|
|
|
id: 0,
|
|
|
date: null
|
|
|
}
|
|
|
}
|
|
|
tabChange(0)
|
|
|
})
|
|
|
const order_list = ref([])
|
|
|
const OrderList = async () => {
|
|
|
const response = await OrderListAction({
|
|
|
status: tab_active.value
|
|
|
})
|
|
|
$response(response, () => {
|
|
|
order_list.value = response.data.list.map((item) => {
|
|
|
item.buy_info = JSON.parse(item.buy_info)
|
|
|
return item
|
|
|
})
|
|
|
})
|
|
|
}
|
|
|
const changeStatus = (id, status) => {
|
|
|
let index = order_list.value.findIndex(ii => ii.id === id)
|
|
|
if (index !== -1) order_list.value[index].status = status
|
|
|
}
|
|
|
const status_arr = ['', '待支付', '已预约', '已取消', '已完成', '已退款']
|
|
|
const status_color_arr = ['', '#F02E50', '#0BBACF', '#333333', '#FF6201', '#FFA40A']
|
|
|
|
|
|
const orderClick = (info) => {
|
|
|
if (info.status === 1) {
|
|
|
OrderPay(info.id)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
const OrderPay = async (order) => {
|
|
|
const response = await OrderPayAction({
|
|
|
order,
|
|
|
pay_type: 1
|
|
|
})
|
|
|
$response(response, () => {
|
|
|
wx.requestPayment({
|
|
|
timeStamp: response.data.pay.timestamp,
|
|
|
nonceStr: response.data.pay.nonce_str,
|
|
|
package: response.data.pay.package,
|
|
|
signType: 'RSA',
|
|
|
paySign: response.data.pay.pay_sign,
|
|
|
complete: (res) => {
|
|
|
if (res.errMsg === 'requestPayment:ok') {
|
|
|
uni.navigateTo({
|
|
|
url: `/pages/buy/done/done?id=${order}`
|
|
|
})
|
|
|
} else {
|
|
|
OrderList()
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
})
|
|
|
}
|
|
|
|
|
|
const mapClick = (info) => {
|
|
|
uni.openLocation({
|
|
|
type: 'wgs84',
|
|
|
latitude: Number(info.latitude),
|
|
|
longitude: Number(info.longitude),
|
|
|
scale: 18,
|
|
|
name: info.hospital_name,
|
|
|
address: info.address
|
|
|
})
|
|
|
}
|
|
|
const order_refund = ref(0)
|
|
|
const OrderRefund = async () => {
|
|
|
uni.showLoading({
|
|
|
title: '正在退款'
|
|
|
})
|
|
|
const response = await OrderRefundAction({
|
|
|
id: order_refund.value
|
|
|
})
|
|
|
uni.hideLoading()
|
|
|
$response(response, () => {
|
|
|
uni.$lu.toast("退款成功");
|
|
|
OrderList()
|
|
|
refundClose()
|
|
|
})
|
|
|
}
|
|
|
const OrderRefundShow = (info) => {
|
|
|
order_refund.value = info.id
|
|
|
refund_show.value = true
|
|
|
}
|
|
|
|
|
|
const refund_show = ref(false)
|
|
|
const refund_popup_ref = ref(null)
|
|
|
const refundPopupRef = (e) => {
|
|
|
refund_popup_ref.value = e
|
|
|
refund_popup_ref.value.open('center')
|
|
|
}
|
|
|
const refundChange = ({
|
|
|
show
|
|
|
}) => {
|
|
|
refund_show.value = show
|
|
|
}
|
|
|
|
|
|
const refundClose = () => {
|
|
|
refund_show.value = false
|
|
|
}
|
|
|
const pingjia =(i)=>{
|
|
|
|
|
|
var info={}
|
|
|
uni.getStorage({
|
|
|
key: 'h5_list',
|
|
|
success: function (res) {
|
|
|
info=res.data
|
|
|
info.jump_path = info.jump_path.replace('question','question2')
|
|
|
info.jump_path=info.jump_path+"&orderid="+i.id
|
|
|
uni.$lu.jump(info)
|
|
|
}
|
|
|
});
|
|
|
|
|
|
|
|
|
}
|
|
|
</script>
|
|
|
<template>
|
|
|
<view>
|
|
|
<view v-if="refund_show">
|
|
|
<uni-popup :ref="refundPopupRef" type="dialog">
|
|
|
<uni-popup-dialog type="info" cancelText="关闭" confirmText="确定" title="退款确认" content="是否确认退款？"
|
|
|
@confirm="OrderRefund" @close="refundClose"></uni-popup-dialog>
|
|
|
</uni-popup>
|
|
|
</view>
|
|
|
|
|
|
<view class="top_line_wrapper"></view>
|
|
|
<view class="tab_wrapper">
|
|
|
<view @click="tabChange(k)" v-for="(i,k) in tab_arr" :key="k" class="tab_item_wrapper" :class="[
|
|
|
tab_active === k ? 'tab_item_text_active_wrapper' : ''
|
|
|
]">
|
|
|
<view class="tab_item_text_wrapper">{{ i }}</view>
|
|
|
<view class="tab_item_line_wrapper"></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="order_break_wrapper"></view>
|
|
|
<view class="order_list_wrapper">
|
|
|
<view class="no_order_wrapper" v-if="!order_list.length">
|
|
|
<view class="no_order_image_wrapper">
|
|
|
<image :src="$image('/storage/assets/mp/order/暂无订单.png')"></image>
|
|
|
</view>
|
|
|
<view class="no_order_text_wrapper">暂无订单</view>
|
|
|
</view>
|
|
|
<view @click.stop="orderClick(i)" class="order_item_wrapper" v-for="(i,k) in order_list" :key="k">
|
|
|
<view class="order_title_wrapper">
|
|
|
<view class="order_left_wrapper">
|
|
|
<view class="order_name_wrapper">
|
|
|
<view v-if="!!i.buy_info.group.id">团检套餐</view>
|
|
|
<view v-else>
|
|
|
<view v-if="!!i.buy_info.combo.id">{{ i.buy_info.combo.name }}</view>
|
|
|
<view v-else>自选项目</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view v-if="i.status === 1" class="order_need_wrapper">
|
|
|
<view class="order_need_text_wrapper">待付款</view>
|
|
|
<view class="order_need_price_wrapper">￥{{ i.price }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="order_status_wrapper" :style="{
|
|
|
color:status_color_arr[i.status]
|
|
|
}">
|
|
|
<view v-if="i.status !== 5">{{ status_arr[i.status] }}</view>
|
|
|
<view v-else>已{{ !!Number(i.price) ? '退款' : '退订' }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="order_info_wrapper">
|
|
|
<view class="order_info_line_wrapper">
|
|
|
<view class="order_info_line_title_wrapper">体检人：</view>
|
|
|
<view class="order_info_line_content_wrapper">{{ i.name }}</view>
|
|
|
</view>
|
|
|
<view class="order_info_line_wrapper">
|
|
|
<view class="order_info_line_title_wrapper">预约时间：</view>
|
|
|
<view class="order_info_line_content_wrapper">{{ i.appointment_time }}</view>
|
|
|
</view>
|
|
|
<view class="order_info_line_wrapper">
|
|
|
<view class="order_info_line_title_wrapper">订单号：</view>
|
|
|
<view class="order_info_line_content_wrapper">{{ i.show }}</view>
|
|
|
</view>
|
|
|
<view class="order_info_line_wrapper">
|
|
|
<view class="order_info_line_title_wrapper">类型：</view>
|
|
|
<view class="order_info_line_content_wrapper">{{ i.type === 1 ? '个检' : '团检' }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view v-if="i.status === 2" class="hospital_wrapper">
|
|
|
<view class="hospital_info_wrapper">
|
|
|
<view class="hospital_name_wrapper">{{ i.hospital_name }}</view>
|
|
|
<view class="hospital_address_wrapper">
|
|
|
<view class="hospital_address_icon_wrapper">
|
|
|
<image :src="$image('/storage/assets/mp/order/地址.png')"></image>
|
|
|
</view>
|
|
|
<view class="hospital_address_text_wrapper">{{ i.address }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view @click.stop="mapClick(i)" class="hospital_map_wrapper">
|
|
|
<view class="hospital_map_icon_wrapper">
|
|
|
<image :src="$image('/storage/assets/mp/order/导航.png')"></image>
|
|
|
</view>
|
|
|
<view class="hospital_map_text_wrapper">导航到医院</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view v-if="i.status === 2" class="pay_done_wrapper">
|
|
|
<view v-if="(i.refund === 0 && !!i.appointment_number)" @click="OrderRefundShow(i)" class="refund_wrapper">{{ !!Number(i.price) ? '退款' : '退订' }}</view>
|
|
|
<view class="qrcode_wrapper">
|
|
|
<image :src="$image('/storage/assets/mp/order/二维码.png')"></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view v-if="i.status !== 3" class="order_line_wrapper"></view>
|
|
|
<view v-if="i.status === 3" class="order_line_break_wrapper"></view>
|
|
|
<view class="order_price_wrapper">
|
|
|
<view v-if="i.status === 1" class="order_price_box_wrapper">
|
|
|
<view class="order_price_box_time_wrapper">
|
|
|
<view class="order_price_box_time_title_wrapper">倒计时：</view>
|
|
|
<view class="order_price_box_time_content_wrapper">
|
|
|
<Countdown @changeStatus="changeStatus" :id="i.id" :time="i.created_at"></Countdown>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="order_price_box_tip_wrapper">订单提交后请在2小时内完成支付，超时作废</view>
|
|
|
</view>
|
|
|
<view v-if="i.status === 2" class="order_price_box_wrapper">
|
|
|
<view class="order_pay_time_wrapper">支付时间 {{ i.pay_time }}</view>
|
|
|
<view class="order_pay_price_wrapper">
|
|
|
<view class="order_pay_price_title_wrapper">已付</view>
|
|
|
<view class="order_pay_price_content_wrapper">￥{{ i.price }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view v-if="i.status === 4" class="order_price_box_wrapper">
|
|
|
<view class="order_pay_time_wrapper">到检时间 {{ i.check_time }}</view>
|
|
|
<view class="pingjia" @click="pingjia(i)">评价</view>
|
|
|
<view class="order_pay_price_wrapper done_info_wrapper">
|
|
|
<view class="order_pay_price_title_wrapper">已付</view>
|
|
|
<view class="order_pay_price_content_wrapper">￥{{ i.price }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view v-if="i.status === 5" class="order_price_box_wrapper">
|
|
|
<view class="order_pay_time_wrapper">{{ !!Number(i.price) ? '退款' : '退订' }}时间 {{ i.refund_time }}</view>
|
|
|
<view v-if="!!Number(i.price)" class="order_pay_price_wrapper refund_info_wrapper">
|
|
|
<view class="order_pay_price_title_wrapper">已退款</view>
|
|
|
<view class="order_pay_price_content_wrapper">￥{{ i.price }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="blank_wrapper"></view>
|
|
|
</view>
|
|
|
</template>
|
|
|
<style>
|
|
|
page {
|
|
|
background: #ffffff;
|
|
|
}
|
|
|
</style>
|
|
|
<style scoped>
|
|
|
.order_pay_price_content_wrapper {
|
|
|
font-size: 24rpx;
|
|
|
font-weight: 500;
|
|
|
color: #0BBACF;
|
|
|
}
|
|
|
|
|
|
.order_pay_price_title_wrapper {
|
|
|
font-size: 18rpx;
|
|
|
font-weight: 500;
|
|
|
color: #0BBACF;
|
|
|
}
|
|
|
|
|
|
.order_pay_price_wrapper {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
padding: 0 12rpx;
|
|
|
height: 34rpx;
|
|
|
background: #e3f5f7;
|
|
|
border-radius: 5rpx;
|
|
|
line-height: 34rpx;
|
|
|
}
|
|
|
|
|
|
.order_pay_time_wrapper {
|
|
|
font-size: 20rpx;
|
|
|
font-weight: 500;
|
|
|
color: #999A9A;
|
|
|
line-height: 1;
|
|
|
}
|
|
|
.pingjia{
|
|
|
font-size: 20rpx;
|
|
|
font-weight: 500;
|
|
|
color: #ff5500;
|
|
|
line-height: 1;
|
|
|
border: 1px solid #ff5500;
|
|
|
padding: 5rpx;
|
|
|
border-radius: 5rpx;
|
|
|
}
|
|
|
|
|
|
.qrcode_wrapper image {
|
|
|
width: 61rpx;
|
|
|
height: 61rpx;
|
|
|
display: block;
|
|
|
}
|
|
|
|
|
|
.qrcode_wrapper {
|
|
|
width: 61rpx;
|
|
|
height: 61rpx;
|
|
|
margin-right: 25rpx;
|
|
|
margin-left: 22rpx;
|
|
|
}
|
|
|
|
|
|
.refund_wrapper {
|
|
|
width: 180rpx;
|
|
|
height: 60rpx;
|
|
|
background: rgba(230, 229, 229, 0);
|
|
|
border: 2px solid #0BBACF;
|
|
|
border-radius: 30rpx;
|
|
|
font-size: 26rpx;
|
|
|
font-weight: 500;
|
|
|
color: #0BBACF;
|
|
|
line-height: 60rpx;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.pay_done_wrapper {
|
|
|
display: flex;
|
|
|
justify-content: flex-end;
|
|
|
align-items: center;
|
|
|
margin-top: 14rpx;
|
|
|
}
|
|
|
|
|
|
.hospital_info_wrapper {
|
|
|
margin-left: 23rpx;
|
|
|
}
|
|
|
|
|
|
.hospital_map_text_wrapper {
|
|
|
font-size: 22rpx;
|
|
|
font-weight: 500;
|
|
|
color: #FFFFFF;
|
|
|
margin-left: 8rpx;
|
|
|
}
|
|
|
|
|
|
.hospital_map_icon_wrapper image {
|
|
|
width: 32rpx;
|
|
|
height: 32rpx;
|
|
|
display: block;
|
|
|
}
|
|
|
|
|
|
.hospital_map_icon_wrapper {
|
|
|
width: 32rpx;
|
|
|
height: 32rpx;
|
|
|
}
|
|
|
|
|
|
.hospital_map_wrapper {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
width: 182rpx;
|
|
|
height: 48rpx;
|
|
|
background: linear-gradient(90deg, #23D3AF, #0DC5CF);
|
|
|
border: 2px solid #D0EEEF;
|
|
|
border-radius: 24rpx;
|
|
|
margin-right: 5rpx;
|
|
|
}
|
|
|
|
|
|
.hospital_address_text_wrapper {
|
|
|
font-size: 20rpx;
|
|
|
font-weight: 400;
|
|
|
color: #757676;
|
|
|
line-height: 1;
|
|
|
margin-left: 11rpx;
|
|
|
overflow: hidden;
|
|
|
white-space: nowrap;
|
|
|
text-overflow: ellipsis;
|
|
|
width: 350rpx;
|
|
|
}
|
|
|
|
|
|
.hospital_address_icon_wrapper image {
|
|
|
width: 20rpx;
|
|
|
height: 24rpx;
|
|
|
display: block;
|
|
|
}
|
|
|
|
|
|
.hospital_address_icon_wrapper {
|
|
|
width: 20rpx;
|
|
|
height: 24rpx;
|
|
|
}
|
|
|
|
|
|
.hospital_address_wrapper {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-top: 17rpx;
|
|
|
}
|
|
|
|
|
|
.hospital_name_wrapper {
|
|
|
font-size: 24rpx;
|
|
|
font-weight: 500;
|
|
|
color: #333333;
|
|
|
line-height: 1;
|
|
|
}
|
|
|
|
|
|
.hospital_wrapper {
|
|
|
width: 648rpx;
|
|
|
height: 110rpx;
|
|
|
background: #effafb;
|
|
|
margin: 26rpx auto 0;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
|
|
|
.order_list_wrapper {
|
|
|
position: fixed;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
top: 120rpx;
|
|
|
overflow-y: auto;
|
|
|
padding-bottom: 50rpx;
|
|
|
}
|
|
|
|
|
|
.no_order_text_wrapper {
|
|
|
font-size: 28rpx;
|
|
|
font-weight: 500;
|
|
|
color: #CDCDCD;
|
|
|
line-height: 1;
|
|
|
margin-top: 20rpx;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.no_order_image_wrapper image {
|
|
|
width: 381rpx;
|
|
|
height: 251rpx;
|
|
|
display: block;
|
|
|
}
|
|
|
|
|
|
.no_order_image_wrapper {
|
|
|
width: 381rpx;
|
|
|
height: 251rpx;
|
|
|
margin: 140rpx auto 0;
|
|
|
}
|
|
|
|
|
|
.order_price_box_tip_wrapper {
|
|
|
height: 34rpx;
|
|
|
background: rgba(255, 98, 1, 0.1);
|
|
|
border: 1px solid rgba(255, 98, 1, 0.3);
|
|
|
border-radius: 5rpx;
|
|
|
font-size: 18rpx;
|
|
|
font-weight: 500;
|
|
|
color: #FF6201;
|
|
|
line-height: 34rpx;
|
|
|
padding: 0 10rpx;
|
|
|
}
|
|
|
|
|
|
.order_price_box_time_content_wrapper {
|
|
|
font-size: 20rpx;
|
|
|
font-weight: 500;
|
|
|
color: #F02E50;
|
|
|
}
|
|
|
|
|
|
.order_price_box_time_title_wrapper {
|
|
|
font-size: 20rpx;
|
|
|
font-weight: 500;
|
|
|
color: #999A9A;
|
|
|
}
|
|
|
|
|
|
.order_price_box_time_wrapper {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.order_price_box_wrapper {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
padding: 20rpx;
|
|
|
}
|
|
|
|
|
|
.refund_info_wrapper.order_pay_price_wrapper {
|
|
|
background: #E8F2F4;
|
|
|
}
|
|
|
|
|
|
.refund_info_wrapper>.order_pay_price_title_wrapper {
|
|
|
color: #668EA7;
|
|
|
}
|
|
|
|
|
|
.refund_info_wrapper>.order_pay_price_content_wrapper {
|
|
|
color: #668EA7;
|
|
|
}
|
|
|
|
|
|
.done_info_wrapper.order_pay_price_wrapper {
|
|
|
background: #EDF1F1;
|
|
|
}
|
|
|
|
|
|
.done_info_wrapper>.order_pay_price_title_wrapper {
|
|
|
color: #181818;
|
|
|
}
|
|
|
|
|
|
.done_info_wrapper>.order_pay_price_content_wrapper {
|
|
|
color: #181818;
|
|
|
}
|
|
|
|
|
|
.order_line_wrapper {
|
|
|
width: 648rpx;
|
|
|
height: 1rpx;
|
|
|
background: #323232;
|
|
|
opacity: 0.07;
|
|
|
margin: 25rpx auto 0;
|
|
|
}
|
|
|
|
|
|
.order_line_break_wrapper {
|
|
|
width: 648rpx;
|
|
|
height: 1rpx;
|
|
|
margin: 25rpx auto 0;
|
|
|
}
|
|
|
|
|
|
.order_info_wrapper {
|
|
|
margin-left: 20rpx;
|
|
|
margin-top: 36rpx;
|
|
|
}
|
|
|
|
|
|
.order_info_line_content_wrapper {
|
|
|
font-size: 26rpx;
|
|
|
font-weight: 500;
|
|
|
color: #444444;
|
|
|
line-height: 40rpx;
|
|
|
}
|
|
|
|
|
|
.order_info_line_wrapper {
|
|
|
height: 40rpx;
|
|
|
line-height: 40rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.order_info_line_title_wrapper {
|
|
|
width: 150rpx;
|
|
|
font-size: 26rpx;
|
|
|
font-weight: 500;
|
|
|
color: #999A9A;
|
|
|
line-height: 40rpx;
|
|
|
}
|
|
|
|
|
|
.order_status_wrapper {
|
|
|
font-size: 30rpx;
|
|
|
font-weight: 500;
|
|
|
margin-right: 13rpx;
|
|
|
}
|
|
|
|
|
|
.order_need_text_wrapper {
|
|
|
font-size: 18rpx;
|
|
|
font-weight: 500;
|
|
|
color: #F02E50;
|
|
|
}
|
|
|
|
|
|
.order_need_price_wrapper {
|
|
|
font-size: 26rpx;
|
|
|
font-weight: 500;
|
|
|
color: #F02E50;
|
|
|
}
|
|
|
|
|
|
.order_need_wrapper {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
text-align: center;
|
|
|
justify-content: center;
|
|
|
line-height: 34rpx;
|
|
|
height: 34rpx;
|
|
|
padding: 0 12rpx;
|
|
|
background: #f8eaed;
|
|
|
border-radius: 5rpx;
|
|
|
margin-left: 15rpx;
|
|
|
}
|
|
|
|
|
|
.order_name_wrapper {
|
|
|
font-size: 32rpx;
|
|
|
font-weight: 500;
|
|
|
color: #222222;
|
|
|
max-width: 260rpx;
|
|
|
line-height: 1;
|
|
|
overflow: hidden;
|
|
|
white-space: nowrap;
|
|
|
text-overflow: ellipsis;
|
|
|
}
|
|
|
|
|
|
.order_left_wrapper {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.order_title_wrapper {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
margin-top: 27rpx;
|
|
|
margin-left: 21rpx;
|
|
|
}
|
|
|
|
|
|
.order_break_wrapper {
|
|
|
background: #f3f3f3;
|
|
|
width: 750rpx;
|
|
|
height: 15rpx;
|
|
|
}
|
|
|
|
|
|
.order_item_wrapper {
|
|
|
overflow: hidden;
|
|
|
width: 690rpx;
|
|
|
margin: 20rpx auto 0;
|
|
|
background: linear-gradient(0deg, rgba(235, 250, 251, 0.4), rgba(249, 254, 254, 0.4));
|
|
|
box-shadow: 0rpx 3rpx 6rpx 4rpx rgba(2, 95, 78, 0.14);
|
|
|
border-radius: 10rpx;
|
|
|
}
|
|
|
|
|
|
.tab_item_line_wrapper {
|
|
|
width: 43rpx;
|
|
|
height: 6rpx;
|
|
|
background: #0BBACF;
|
|
|
border-radius: 3rpx;
|
|
|
margin: 0 auto;
|
|
|
opacity: 0;
|
|
|
}
|
|
|
|
|
|
.tab_item_wrapper {
|
|
|
height: 88rpx;
|
|
|
width: 200rpx;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.tab_item_text_wrapper {
|
|
|
font-size: 28rpx;
|
|
|
font-weight: 500;
|
|
|
color: #3F3F3F;
|
|
|
line-height: 83rpx;
|
|
|
}
|
|
|
|
|
|
.tab_wrapper {
|
|
|
width: 750rpx;
|
|
|
height: 88rpx;
|
|
|
background: #FFFFFF;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-around;
|
|
|
padding-top: 12rpx;
|
|
|
}
|
|
|
|
|
|
.tab_item_text_active_wrapper>.tab_item_text_wrapper {
|
|
|
color: #0BBACF;
|
|
|
}
|
|
|
|
|
|
.tab_item_text_active_wrapper>.tab_item_line_wrapper {
|
|
|
opacity: 1;
|
|
|
}
|
|
|
</style> |