init
This commit is contained in:
748
pages/code/code.vue
Normal file
748
pages/code/code.vue
Normal file
@@ -0,0 +1,748 @@
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<!-- 页面标题 -->
|
||||
<view class="page-title">订单列表</view>
|
||||
|
||||
<!-- 搜索区域 - 仅保留时间查询 -->
|
||||
<view class="search-box">
|
||||
<view class="search-item">
|
||||
<text class="label">订单日期</text>
|
||||
<view class="date-picker" @click="showDatePicker = true">
|
||||
<text>{{ dateRangeText || '选择日期范围' }}</text>
|
||||
<text class="arrow">▼</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="search-buttons">
|
||||
<button class="search-btn" @click="handleQuery">查询</button>
|
||||
<button class="reset-btn" @click="resetQuery">重置</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 订单列表 -->
|
||||
<view class="order-list">
|
||||
<!-- 加载中 -->
|
||||
<view class="loading" v-if="loading">
|
||||
<view class="spinner"></view>
|
||||
<text>加载中...</text>
|
||||
</view>
|
||||
|
||||
<!-- 错误提示 -->
|
||||
<view class="error" v-if="errorMsg">
|
||||
<text>{{ errorMsg }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view class="empty" v-if="!loading && !errorMsg && orderList.length === 0">
|
||||
<text>该时间段内暂无订单数据</text>
|
||||
</view>
|
||||
|
||||
<!-- 列表标题 -->
|
||||
<view class="list-header" v-if="!loading && !errorMsg && orderList.length > 0">
|
||||
<view class="header-item" style="width: 35%;">订单号</view>
|
||||
<!-- <view class="header-item" style="width: 12%;">顾客姓名</view> -->
|
||||
<!-- <view class="header-item" style="width: 8%;">桌号</view> -->
|
||||
<view class="header-item" style="width: 15%;">订单类型</view>
|
||||
<view class="header-item" style="width: 15%;">订单状态</view>
|
||||
<view class="header-item" style="width: 15%;">应收金额</view>
|
||||
<view class="header-item" style="width: 15%;">实收金额</view>
|
||||
<!-- <view class="header-item" style="width: 15%;">支付方式</view> -->
|
||||
</view>
|
||||
|
||||
<!-- 列表内容 -->
|
||||
<view class="list-body" v-if="!loading && !errorMsg && orderList.length > 0">
|
||||
<view class="order-item" v-for="(order, index) in orderList" :key="order.id || index">
|
||||
<view class="order-cell" style="width: 35%;">{{ order.id || '-' }}</view>
|
||||
<!-- <view class="order-cell" style="width: 12%;">{{ order.customerName || '-' }}</view> -->
|
||||
<!-- <view class="order-cell" style="width: 8%;">{{ order.tableId || '-' }}</view> -->
|
||||
<view class="order-cell" style="width: 15%;">
|
||||
<view class="tag" :class="getTypeClass(order.orderType)">{{ getOrderType(order.orderType) }}</view>
|
||||
</view>
|
||||
<view class="order-cell" style="width: 15%;">
|
||||
<view class="tag" :class="getStatusClass(order.orderStatus)">{{ getOrderStatus(order.orderStatus) }}</view>
|
||||
</view>
|
||||
<view class="order-cell" style="width: 15%;">¥{{ formatMoney(order.totalAmount) }}</view>
|
||||
<view class="order-cell" style="width: 15%;">¥{{ formatMoney(order.actualReceivedAmount) }}</view>
|
||||
<!-- <view class="order-cell" style="width: 15%;">{{ getPaymentMethod(order.paymentMethod) || '-' }}</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 分页 -->
|
||||
<view class="pagination" v-if="!loading && !errorMsg && total > 0">
|
||||
<view class="pagination-info">
|
||||
<text>共 {{ total }} 条，第 {{ queryParams.pageNum }}/{{ totalPages }} 页</text>
|
||||
</view>
|
||||
<view class="pagination-buttons">
|
||||
<button
|
||||
class="page-btn"
|
||||
@click="prevPage"
|
||||
:disabled="queryParams.pageNum <= 1"
|
||||
>上一页</button>
|
||||
<button
|
||||
class="page-btn"
|
||||
@click="nextPage"
|
||||
:disabled="queryParams.pageNum >= totalPages"
|
||||
>下一页</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 日期选择器弹窗 -->
|
||||
<view class="picker-mask" v-if="showDatePicker" @click="showDatePicker = false"></view>
|
||||
<view class="picker-popup" v-if="showDatePicker">
|
||||
<view class="picker-title">
|
||||
<text @click="showDatePicker = false">取消</text>
|
||||
<text>选择日期范围</text>
|
||||
<text @click="confirmDate">确定</text>
|
||||
</view>
|
||||
<picker-view
|
||||
class="date-picker-view"
|
||||
:value="datePickerValue"
|
||||
@change="onDateChange"
|
||||
>
|
||||
<picker-view-column>
|
||||
<view v-for="(year, index) in years" :key="index">{{ year }}年</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view v-for="(month, index) in months" :key="index">{{ month }}月</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view v-for="(day, index) in days" :key="index">{{ day }}日</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view>至</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view v-for="(year, index) in years" :key="index">{{ year }}年</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view v-for="(month, index) in months" :key="index">{{ month }}月</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view v-for="(day, index) in days" :key="index">{{ day }}日</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import orderApi from '@/common/http/eatery/order.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 订单列表数据
|
||||
orderList: [],
|
||||
// 加载状态
|
||||
loading: false,
|
||||
// 错误信息
|
||||
errorMsg: '',
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
startDate: '',
|
||||
endDate: ''
|
||||
},
|
||||
// 支付方式列表
|
||||
paymentMethods: [],
|
||||
// 日期范围文本
|
||||
dateRangeText: '',
|
||||
// 日期选择器显示状态
|
||||
showDatePicker: false,
|
||||
// 日期选择器数据
|
||||
years: [],
|
||||
months: [],
|
||||
days: [],
|
||||
// 日期选择器值
|
||||
datePickerValue: [],
|
||||
// 开始日期和结束日期
|
||||
startDateObj: null,
|
||||
endDateObj: null,
|
||||
// 订单类型映射
|
||||
orderTypeMap: {
|
||||
'1': '堂食',
|
||||
'2': '外卖'
|
||||
},
|
||||
// 订单状态映射
|
||||
orderStatusMap: {
|
||||
'1': '待结算',
|
||||
'2': '已结算',
|
||||
'3': '已取消'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
// 总页数
|
||||
totalPages() {
|
||||
return Math.ceil(this.total / this.queryParams.pageSize)
|
||||
}
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
// 初始化日期数据
|
||||
this.initDateData()
|
||||
// 获取支付方式
|
||||
this.getPaymentMethods()
|
||||
// 默认加载最近7天数据
|
||||
this.handleQuery()
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 初始化日期选择器数据
|
||||
*/
|
||||
initDateData() {
|
||||
const now = new Date()
|
||||
const year = now.getFullYear()
|
||||
|
||||
// 生成年份数据（近3年）
|
||||
this.years = []
|
||||
for (let i = year - 2; i <= year; i++) {
|
||||
this.years.push(i)
|
||||
}
|
||||
|
||||
// 生成月份数据
|
||||
this.months = []
|
||||
for (let i = 1; i <= 12; i++) {
|
||||
this.months.push(i)
|
||||
}
|
||||
|
||||
// 生成日期数据
|
||||
this.days = []
|
||||
for (let i = 1; i <= 31; i++) {
|
||||
this.days.push(i)
|
||||
}
|
||||
|
||||
// 设置默认日期（最近7天）
|
||||
const start = new Date()
|
||||
start.setDate(start.getDate() - 7)
|
||||
this.startDateObj = start
|
||||
this.endDateObj = now
|
||||
|
||||
// 设置日期选择器初始值
|
||||
this.datePickerValue = [
|
||||
this.years.indexOf(start.getFullYear()),
|
||||
start.getMonth(),
|
||||
start.getDate() - 1,
|
||||
0, // 分隔符
|
||||
this.years.indexOf(now.getFullYear()),
|
||||
now.getMonth(),
|
||||
now.getDate() - 1
|
||||
]
|
||||
|
||||
// 更新日期文本
|
||||
this.updateDateRangeText()
|
||||
},
|
||||
|
||||
/**
|
||||
* 更新日期范围文本
|
||||
*/
|
||||
updateDateRangeText() {
|
||||
if (this.startDateObj && this.endDateObj) {
|
||||
const formatDate = (date) => {
|
||||
return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`
|
||||
}
|
||||
this.dateRangeText = `${formatDate(this.startDateObj)} 至 ${formatDate(this.endDateObj)}`
|
||||
this.queryParams.startDate = formatDate(this.startDateObj)
|
||||
this.queryParams.endDate = formatDate(this.endDateObj)
|
||||
} else {
|
||||
this.dateRangeText = ''
|
||||
this.queryParams.startDate = ''
|
||||
this.queryParams.endDate = ''
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 日期选择变化
|
||||
*/
|
||||
onDateChange(e) {
|
||||
const val = e.detail.value
|
||||
|
||||
// 解析开始日期
|
||||
const startYear = this.years[val[0]]
|
||||
const startMonth = this.months[val[1]]
|
||||
const startDay = this.days[val[2]]
|
||||
|
||||
// 解析结束日期
|
||||
const endYear = this.years[val[4]]
|
||||
const endMonth = this.months[val[5]]
|
||||
const endDay = this.days[val[6]]
|
||||
|
||||
// 更新日期对象
|
||||
this.startDateObj = new Date(startYear, startMonth - 1, startDay)
|
||||
this.endDateObj = new Date(endYear, endMonth - 1, endDay)
|
||||
},
|
||||
|
||||
/**
|
||||
* 确认日期选择
|
||||
*/
|
||||
confirmDate() {
|
||||
// 确保开始日期不晚于结束日期
|
||||
if (this.startDateObj > this.endDateObj) {
|
||||
uni.showToast({ title: '开始日期不能晚于结束日期', icon: 'none' })
|
||||
return
|
||||
}
|
||||
this.updateDateRangeText()
|
||||
this.showDatePicker = false
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取支付方式列表
|
||||
*/
|
||||
getPaymentMethods() {
|
||||
orderApi.getPaymentMethods().then(res => {
|
||||
if (res.data && Array.isArray(res.data)) {
|
||||
this.paymentMethods = res.data.map(item => ({
|
||||
value: item.dictValue,
|
||||
text: item.dictLabel
|
||||
}))
|
||||
}
|
||||
}).catch(err => {
|
||||
console.error('获取支付方式失败:', err)
|
||||
// 不阻断主流程，仅在控制台输出错误
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 分页查询订单 - 修复数据不显示问题
|
||||
*/
|
||||
getOrderPage() {
|
||||
// 重置错误信息
|
||||
this.errorMsg = ''
|
||||
// 显示加载状态
|
||||
this.loading = true
|
||||
|
||||
// 检查日期参数是否完整
|
||||
if (!this.queryParams.startDate || !this.queryParams.endDate) {
|
||||
this.loading = false
|
||||
this.errorMsg = '请选择完整的日期范围'
|
||||
return
|
||||
}
|
||||
|
||||
// 调用API查询数据
|
||||
orderApi.getOrderPage(this.queryParams)
|
||||
.then(res => {
|
||||
// 确保返回数据格式正确
|
||||
if (res && typeof res === 'object') {
|
||||
// 适配不同的API返回格式
|
||||
const data = res.data || res
|
||||
this.orderList = Array.isArray(data.rows) ? data.rows : []
|
||||
this.total = typeof data.total === 'number' ? data.total : 0
|
||||
} else {
|
||||
this.orderList = []
|
||||
this.total = 0
|
||||
this.errorMsg = '数据格式错误'
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('获取订单失败:', err)
|
||||
this.orderList = []
|
||||
this.total = 0
|
||||
this.errorMsg = '获取订单失败，请重试'
|
||||
})
|
||||
.finally(() => {
|
||||
// 无论成功失败都关闭加载状态
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 查询按钮触发
|
||||
*/
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getOrderPage()
|
||||
},
|
||||
|
||||
/**
|
||||
* 重置查询条件
|
||||
*/
|
||||
resetQuery() {
|
||||
// 重置为最近7天
|
||||
const now = new Date()
|
||||
const start = new Date()
|
||||
start.setDate(start.getDate() - 7)
|
||||
this.startDateObj = start
|
||||
this.endDateObj = now
|
||||
|
||||
// 更新日期选择器值
|
||||
this.datePickerValue = [
|
||||
this.years.indexOf(start.getFullYear()),
|
||||
start.getMonth(),
|
||||
start.getDate() - 1,
|
||||
0, // 分隔符
|
||||
this.years.indexOf(now.getFullYear()),
|
||||
now.getMonth(),
|
||||
now.getDate() - 1
|
||||
]
|
||||
|
||||
this.updateDateRangeText()
|
||||
this.queryParams.pageNum = 1
|
||||
this.getOrderPage()
|
||||
},
|
||||
|
||||
/**
|
||||
* 上一页
|
||||
*/
|
||||
prevPage() {
|
||||
if (this.queryParams.pageNum > 1) {
|
||||
this.queryParams.pageNum--
|
||||
this.getOrderPage()
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 下一页
|
||||
*/
|
||||
nextPage() {
|
||||
if (this.queryParams.pageNum < this.totalPages) {
|
||||
this.queryParams.pageNum++
|
||||
this.getOrderPage()
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取订单类型文本
|
||||
*/
|
||||
getOrderType(type) {
|
||||
return this.orderTypeMap[type] || '未知'
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取订单类型样式类
|
||||
*/
|
||||
getTypeClass(type) {
|
||||
const classMap = {
|
||||
'1': 'type-dining',
|
||||
'2': 'type-takeout'
|
||||
}
|
||||
return classMap[type] || 'type-default'
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取订单状态文本
|
||||
*/
|
||||
getOrderStatus(status) {
|
||||
return this.orderStatusMap[status] || '未知'
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取订单状态样式类
|
||||
*/
|
||||
getStatusClass(status) {
|
||||
const classMap = {
|
||||
'1': 'status-pending',
|
||||
'2': 'status-settled',
|
||||
'3': 'status-canceled'
|
||||
}
|
||||
return classMap[status] || 'status-default'
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取支付方式文本
|
||||
*/
|
||||
getPaymentMethod(method) {
|
||||
const methodItem = this.paymentMethods.find(item => item.value === method)
|
||||
return methodItem ? methodItem.text : '未知'
|
||||
},
|
||||
|
||||
/**
|
||||
* 格式化金额
|
||||
*/
|
||||
formatMoney(amount) {
|
||||
// 处理可能的null/undefined值
|
||||
if (amount === null || amount === undefined) return '0.00'
|
||||
// 转换为数字并保留两位小数
|
||||
return parseFloat(amount).toFixed(2)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-container {
|
||||
padding: 20rpx;
|
||||
background-color: #f5f7fa;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin: 30rpx 0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.search-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 140rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.date-picker {
|
||||
flex: 1;
|
||||
height: 70rpx;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 8rpx;
|
||||
padding: 0 15rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.search-buttons {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
flex: 1;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
background-color: #03AE80;
|
||||
color: #fff;
|
||||
border-radius: 8rpx;
|
||||
font-size: 28rpx;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
flex: 1;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
background-color: #f5f5f5;
|
||||
color: #666;
|
||||
border-radius: 8rpx;
|
||||
font-size: 28rpx;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
|
||||
.order-list {
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 20rpx;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 100rpx 0;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
border: 5rpx solid #eee;
|
||||
border-top-color: #03AE80;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.error {
|
||||
text-align: center;
|
||||
padding: 100rpx 0;
|
||||
color: #ff3b30;
|
||||
}
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
padding: 100rpx 0;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.list-header {
|
||||
display: flex;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 8rpx 8rpx 0 0;
|
||||
overflow: hidden;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.header-item {
|
||||
padding: 15rpx 10rpx;
|
||||
text-align: center;
|
||||
border-right: 1px solid #eee;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.header-item:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.list-body {
|
||||
border: 1px solid #eee;
|
||||
border-top: none;
|
||||
border-radius: 0 0 8rpx 8rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.order-item {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.order-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.order-cell {
|
||||
padding: 15rpx 10rpx;
|
||||
text-align: center;
|
||||
border-right: 1px solid #eee;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.order-cell:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: inline-block;
|
||||
padding: 5rpx 10rpx;
|
||||
border-radius: 4rpx;
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.type-dining {
|
||||
background-color: #007aff;
|
||||
}
|
||||
|
||||
.type-takeout {
|
||||
background-color: #4cd964;
|
||||
}
|
||||
|
||||
.type-default {
|
||||
background-color: #999;
|
||||
}
|
||||
|
||||
.status-pending {
|
||||
background-color: #ff9500;
|
||||
}
|
||||
|
||||
.status-settled {
|
||||
background-color: #4cd964;
|
||||
}
|
||||
|
||||
.status-canceled {
|
||||
background-color: #ff3b30;
|
||||
}
|
||||
|
||||
.status-default {
|
||||
background-color: #999;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 20rpx;
|
||||
padding: 10rpx 0;
|
||||
}
|
||||
|
||||
.pagination-info {
|
||||
color: #666;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.pagination-buttons {
|
||||
display: flex;
|
||||
gap: 15rpx;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
padding: 0 25rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
background-color: #f5f5f5;
|
||||
color: #666;
|
||||
border-radius: 8rpx;
|
||||
font-size: 26rpx;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
|
||||
.page-btn:disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.picker-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 998;
|
||||
}
|
||||
|
||||
.picker-popup {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.picker-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.picker-title text {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.picker-title text:first-child,
|
||||
.picker-title text:last-child {
|
||||
color: #03AE80;
|
||||
}
|
||||
|
||||
.date-picker-view {
|
||||
width: 100%;
|
||||
height: 400rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user