<template>
|
<view class="order-container">
|
<!-- 顶部搜索区域 -->
|
<view class="search-bar">
|
<view class="search-box">
|
<uni-easyinput v-model="searchQuery" placeholder="请输入订单号搜索" prefixIcon="search"
|
@iconClick="handleSearchIconClick" />
|
<view class="filter-icon" @click="showFilterPopup">
|
<uni-icons type="filter" size="24" color="#666"></uni-icons>
|
</view>
|
</view>
|
</view>
|
|
<!-- 状态筛选器 -->
|
<scroll-view class="status-filter" scroll-x>
|
<view v-for="status in statusFilters" :key="status.value" class="filter-item"
|
:class="{active: activeStatus === status.value}" @click="changeStatus(status.value)">
|
<text>{{status.label}}</text>
|
<view class="status-indicator" :style="{background: status.color}"></view>
|
</view>
|
</scroll-view>
|
|
<!-- 订单列表 - 添加虚拟列表优化 -->
|
<scroll-view class="order-list" scroll-y :style="{height: `calc(100vh - ${isH5 ? '180px' : '260rpx'})`}"
|
@scrolltolower="loadMore" @refresherrefresh="refreshList" refresher-enabled
|
:refresher-triggered="refreshing" enable-back-to-top :scroll-with-animation="true">
|
<view v-for="(order, index) in orderList" :key="index" class="order-item" @click="showOrderDetail(order)">
|
<view class="order-header">
|
<text class="order-no">订单号: {{order.orderNo}}</text>
|
<uni-tag :text="getStatus(order.status)" :type="getStatusType(order.status)" size="small" />
|
</view>
|
<view class="order-info">
|
<text class="create-time">客户信息: {{order.customer}}</text>
|
</view>
|
<view class="order-info">
|
<text class="create-time">创建时间: {{formatDisplayDate(order.createTime)}}</text>
|
<text class="material-count">物料: {{order.materials?order.materials.length:0}}种</text>
|
</view>
|
</view>
|
<uni-load-more :status="loadStatus"></uni-load-more>
|
</scroll-view>
|
|
<!-- 底部操作按钮 -->
|
<view class="action-btn" @click="showCreateOrderPopup">
|
<uni-icons type="plus-filled" size="30" color="#fff"></uni-icons>
|
</view>
|
|
<!-- 筛选弹窗 -->
|
<uni-popup ref="filterPopup" type="bottom">
|
<view class="filter-popup">
|
<view class="popup-header">
|
<text>筛选条件</text>
|
<uni-icons type="close" size="24" @click="hideFilterPopup"></uni-icons>
|
</view>
|
<view class="filter-content">
|
<uni-forms ref="filterForm">
|
<uni-forms-item label="订单号" name="orderNo">
|
<uni-easyinput v-model="filterForm.orderNo" placeholder="请输入订单号" />
|
</uni-forms-item>
|
<!-- <uni-forms-item label="创建时间" name="createTime">
|
<uni-datetime-picker v-model="filterForm.createTime" type="daterange" :clear-icon="true"
|
start-placeholder="开始日期" end-placeholder="结束日期" />
|
</uni-forms-item> -->
|
</uni-forms>
|
<button class="submit-btn" @click="submitFilter">确认筛选</button>
|
</view>
|
</view>
|
</uni-popup>
|
|
<!-- 订单详情弹窗 -->
|
<uni-popup ref="detailPopup" type="bottom">
|
<view class="detail-popup">
|
<view class="popup-header">
|
<text>订单详情</text>
|
<uni-icons type="close" size="24" @click="hideDetailPopup"></uni-icons>
|
</view>
|
<scroll-view class="detail-content" scroll-y>
|
<view class="detail-section">
|
<text class="section-title">基本信息</text>
|
<view class="info-row">
|
<text>订单号:</text>
|
<text>{{currentOrder.orderNo}}</text>
|
</view>
|
<view class="info-row">
|
<text>客户信息:</text>
|
<text>{{currentOrder.customer}}</text>
|
</view>
|
<view class="info-row">
|
<text>状态:</text>
|
<uni-tag :text="getStatus(currentOrder.status)" :type="getStatusType(currentOrder.status)"
|
size="small" />
|
</view>
|
<view class="info-row">
|
<text>创建时间:</text>
|
<text>{{formatDisplayDate(currentOrder.createTime)}}</text>
|
</view>
|
</view>
|
<view class="detail-section">
|
<text class="section-title">物料清单</text>
|
<view v-for="material in currentOrder.materials" :key="material.id" class="material-item">
|
<text class="material-name">{{material.material_name}}</text>
|
<text class="material-quantity">{{material.quantity}}件</text>
|
</view>
|
</view>
|
</scroll-view>
|
<view class="detail-footer">
|
<button class="submit-btn" @click="goToDetail">
|
{{currentOrder.status !== 'completed' ? '处理订单':'查看订单'}}
|
</button>
|
</view>
|
</view>
|
</uni-popup>
|
|
<!-- 新建订单弹窗 -->
|
<uni-popup ref="createOrderPopup" type="bottom">
|
<view class="create-popup">
|
<view class="popup-header">
|
<text>新建订单</text>
|
<uni-icons type="close" size="24" @click="hideCreateOrderPopup"></uni-icons>
|
</view>
|
<scroll-view class="create-content" scroll-y>
|
<uni-forms ref="createForm">
|
<uni-forms-item label="订单编号">
|
<view class="order-no-section" @click="generateOrderNo">
|
<text class="order-no-value">{{createForm.orderNo || '点击生成订单号'}}</text>
|
</view>
|
</uni-forms-item>
|
|
<uni-forms-item label="原始单据" name="originalDoc">
|
<view class="doc-upload">
|
<button class="upload-btn" @click="takePhoto"
|
v-if="!createForm.originalDoc">拍照上传</button>
|
<view class="doc-preview" v-if="createForm.originalDoc">
|
<image :src="createForm.originalDoc" mode="aspectFit"></image>
|
<uni-icons type="close" size="24" @click="removeOriginalDoc"></uni-icons>
|
</view>
|
</view>
|
</uni-forms-item>
|
|
<uni-forms-item label="订单备注" name="remark">
|
<uni-easyinput v-model="createForm.remark" placeholder="请输入订单备注" type="textarea" />
|
</uni-forms-item>
|
|
</uni-forms>
|
<button class="submit-btn" @click="submitCreateOrder">提交订单</button>
|
</scroll-view>
|
</view>
|
</uni-popup>
|
|
<!-- 侧边操作弹窗 -->
|
<uni-popup ref="sideActionPopup" type="right">
|
<view class="side-action-popup">
|
<view class="popup-header">
|
<uni-icons type="close" size="24" @click="hideSideActionPopup"></uni-icons>
|
</view>
|
|
<!-- 用户信息区域 -->
|
<view class="user-info-section">
|
<view class="avatar">
|
<text>{{userInfo.username ? userInfo.username.substring(0, 1).toUpperCase() : 'U'}}</text>
|
</view>
|
<view class="user-details">
|
<text class="nickname">{{userInfo.username || '用户'}}</text>
|
<text class="role">{{userInfo.role || '普通用户'}}</text>
|
</view>
|
</view>
|
|
<view class="side-action-content">
|
<!-- <view class="action-item" @click="goToScan">
|
<uni-icons type="scan" size="24" color="#409eff"></uni-icons>
|
<text>扫码</text>
|
</view>
|
<view class="action-item" @click="goToHistory">
|
<uni-icons type="calendar" size="24" color="#409eff"></uni-icons>
|
<text>历史记录</text>
|
</view>
|
<view class="action-item" @click="goToSettings">
|
<uni-icons type="gear" size="24" color="#409eff"></uni-icons>
|
<text>设置</text>
|
</view> -->
|
<view class="action-item" @click="activateSoftware">
|
<uni-icons type="star" size="24" color="#409eff"></uni-icons>
|
<text>激活软件</text>
|
</view>
|
<view class="action-item logout" @click="logout">
|
<uni-icons type="poweroff" size="24" color="#f56c6c"></uni-icons>
|
<text>退出登录</text>
|
</view>
|
</view>
|
</view>
|
</uni-popup>
|
</view>
|
</template>
|
|
<script>
|
import orderservice from '@/services/orderService'
|
import {
|
config
|
} from '@/config/config'
|
|
export default {
|
components: {},
|
onShow() {
|
this.loadOrders()
|
},
|
created() {
|
// 注册orderservice到Vue实例
|
this.$orderservice = orderservice
|
},
|
// 处理导航栏按钮点击
|
onNavigationBarButtonTap() {
|
this.$refs.sideActionPopup.open()
|
},
|
data() {
|
return {
|
isH5: false,
|
// 搜索相关
|
searchQuery: '',
|
filterForm: {
|
orderNo: '',
|
createTime: []
|
},
|
|
// 状态筛选
|
statusFilters: [{
|
label: '全部',
|
value: 'all',
|
color: '#42b983'
|
},
|
{
|
label: '待处理',
|
value: 'pending',
|
color: '#e6a23c'
|
},
|
{
|
label: '处理中',
|
value: 'processing',
|
color: '#409eff'
|
},
|
{
|
label: '已完成',
|
value: 'completed',
|
color: '#67c23a'
|
},
|
// {
|
// label: '已取消',
|
// value: 'cancelled',
|
// color: '#f56c6c'
|
// }
|
],
|
activeStatus: 'all',
|
|
// 订单列表
|
orderList: [],
|
currentPage: 1,
|
pageSize: 10,
|
loadStatus: 'more',
|
refreshing: false,
|
|
// 当前选中订单
|
currentOrder: {
|
orderNo: '',
|
status: '',
|
statusText: '',
|
createTime: '',
|
customer: '',
|
materials: []
|
},
|
|
// 新建订单
|
createForm: {
|
orderNo: '',
|
remark: '',
|
originalDoc: '',
|
customer: ''
|
},
|
|
// 用户信息
|
userInfo: {}
|
}
|
},
|
onLoad() {
|
this.createForm.orderNo = '';
|
const user = uni.getStorageSync(config.storageKeys.userInfo);
|
if (user) {
|
this.userInfo = user;
|
} else {
|
uni.redirectTo({
|
url: '/pages/login/login'
|
})
|
}
|
},
|
methods: {
|
getStatus(status) {
|
const statusTexts = {
|
pending: '待处理',
|
processing: '处理中',
|
completed: '已完成',
|
cancelled: '已取消'
|
}
|
|
return statusTexts[status];
|
},
|
|
async generateOrderNo() {
|
// console.log(this.createForm);
|
if (!this.createForm.orderNo || this.createForm.orderNo.length === 0) {
|
const date = new Date();
|
//#ifdef APP-PLUS
|
const seqService = require("@/services/seqService.js").default;
|
const result = await seqService.getOrderSeq();
|
this.createForm.orderNo = `ORD-${date.getFullYear()}${(date.getMonth() + 1)
|
.toString()
|
.padStart(2, "0")}${date
|
.getDate()
|
.toString()
|
.padStart(2, "0")}-${result.toString().padStart(4, "0")}`;
|
//#endif
|
|
//#ifdef H5
|
const random = Math.floor(Math.random() * 10000);
|
this.createForm.orderNo = `ORD-${date.getFullYear()}${(date.getMonth() + 1)
|
.toString()
|
.padStart(2, "0")}${date
|
.getDate()
|
.toString()
|
.padStart(2, "0")}-${random.toString().padStart(4, "0")}`;
|
//#endif
|
}
|
},
|
|
// 搜索相关方法
|
handleSearchIconClick() {
|
this.searchQuery = ''
|
this.$refs.filterPopup.open()
|
},
|
|
showFilterPopup() {
|
if (!this.$refs.filterPopup) {
|
console.error('filterPopup ref not found')
|
return
|
}
|
this.$refs.filterPopup.open()
|
},
|
|
hideFilterPopup() {
|
this.$refs.filterPopup.close()
|
},
|
|
submitFilter() {
|
this.hideFilterPopup()
|
this.refreshList()
|
},
|
|
// 状态筛选方法
|
changeStatus(status) {
|
this.activeStatus = status
|
this.refreshList()
|
},
|
|
getStatusType(status) {
|
const map = {
|
pending: 'warning',
|
processing: 'primary',
|
completed: 'success',
|
cancelled: 'error'
|
}
|
return map[status] || 'default'
|
},
|
|
// 格式化日期显示
|
formatDisplayDate(dateString) {
|
if (!dateString) return ''
|
const date = new Date(dateString)
|
return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
|
},
|
|
// 订单列表方法
|
async loadOrders() {
|
try {
|
const orderService = require('@/services/orderService').default
|
// #ifdef H5
|
// 临时使用模拟数据
|
const mockData2 = orderService.getMockOrders(this.pageSize)
|
|
if (this.currentPage === 1) {
|
this.orderList = mockData2
|
} else {
|
this.orderList = [...this.orderList, ...mockData2]
|
}
|
this.loadStatus = mockData2.length < this.pageSize ? 'noMore' : 'more'
|
// #endif
|
|
// #ifdef APP-PLUS
|
const mockData = await orderService.getOrderList(this.activeStatus, this.filterForm.orderNo,
|
null,
|
this.currentPage, this.pageSize)
|
|
if (this.currentPage === 1) {
|
this.orderList = mockData
|
} else {
|
this.orderList = [...this.orderList, ...mockData]
|
}
|
|
this.loadStatus = mockData.length < this.pageSize ? 'noMore' : 'more'
|
// #endif
|
|
} catch (error) {
|
console.error(error)
|
uni.showToast({
|
title: '加载失败',
|
icon: 'none'
|
})
|
}
|
},
|
|
async refreshList() {
|
this.refreshing = true
|
this.currentPage = 1
|
await this.loadOrders()
|
this.refreshing = false
|
},
|
|
async loadMore() {
|
if (this.loadStatus === 'noMore') return
|
this.currentPage++
|
await this.loadOrders()
|
},
|
|
// 订单详情方法
|
async showOrderDetail(order) {
|
|
const materials = order.materials;
|
|
const scanrecordService = require('@/services/scanrecordService').default
|
|
for (var index = 0; index < materials.length; index++) {
|
var element = materials[index];
|
//#ifdef APP-PLUS
|
const scanrecords = await scanrecordService.getScanRecord(
|
order.orderNo, element.material_name);
|
order.materials[index].quantity = scanrecords[0].quantity;
|
//#endif
|
}
|
this.currentOrder = order
|
this.$refs.detailPopup.open()
|
},
|
|
hideDetailPopup() {
|
this.$refs.detailPopup.close()
|
},
|
|
goToDetail() {
|
this.hideDetailPopup()
|
|
if (this.currentOrder.status !== 'completed') {
|
const tabs = this.currentOrder.materials.map(mat => ({
|
...mat,
|
name: mat.material_name
|
}))
|
|
if (this.currentOrder.materials.length > 0) {
|
this.createForm.orderNo = '';
|
this.createForm.originalDoc = '';
|
this.createForm.remark = '';
|
// 跳转到订单详情页
|
uni.navigateTo({
|
url: `/pages/order/detail?orderNo=${encodeURIComponent(
|
this.currentOrder.orderNo
|
)}&createTime=${encodeURIComponent(
|
this.currentOrder.createTime.toLocaleString()
|
)}&materials=${encodeURIComponent(
|
JSON.stringify(tabs)
|
)}&customer=${this.currentOrder.customer}`,
|
success: () => {},
|
fail: err => {
|
console.error("跳转订单详情失败:", err);
|
uni.showToast({
|
title: "跳转失败，请重试",
|
icon: "none"
|
});
|
}
|
});
|
} else {
|
this.createForm.orderNo = '';
|
this.createForm.originalDoc = '';
|
this.createForm.remark = '';
|
uni.navigateTo({
|
url: `/pages/create/create?orderNo=${this.currentOrder.orderNo}&addOrOnlyAdjust=1&customer=${this.currentOrder.customer}`
|
})
|
}
|
} else {
|
const tabs = this.currentOrder.materials.map(mat => ({
|
...mat,
|
name: mat.material_name
|
}))
|
// 跳转到订单详情页
|
uni.navigateTo({
|
url: `/pages/order/detail?orderNo=${encodeURIComponent(
|
this.currentOrder.orderNo
|
)}&createTime=${encodeURIComponent(
|
this.currentOrder.createTime.toLocaleString()
|
)}&materials=${encodeURIComponent(
|
JSON.stringify(tabs)
|
)}&dealOrView=2&customer=${this.currentOrder.customer}`,
|
success: () => {},
|
fail: err => {
|
console.error("跳转订单详情失败:", err);
|
uni.showToast({
|
title: "跳转失败，请重试",
|
icon: "none"
|
});
|
}
|
});
|
}
|
|
},
|
|
// 新建订单方法
|
showCreateOrderPopup() {
|
this.$refs.createOrderPopup.open()
|
},
|
|
hideCreateOrderPopup() {
|
this.$refs.createOrderPopup.close()
|
// this.createForm = {
|
// orderNo: '',
|
// remark: '',
|
// originalDoc: ''
|
// }
|
},
|
|
// 拍照上传原始单据
|
takePhoto() {
|
uni.chooseImage({
|
count: 1,
|
sourceType: ['camera'],
|
success: (res) => {
|
this.createForm.originalDoc = res.tempFilePaths[0]
|
|
uni.saveImageToPhotosAlbum({
|
filePath: this.createForm.originalDoc,
|
success: () => console.log("已保存到相册")
|
});
|
}
|
})
|
},
|
|
// 删除原始单据
|
removeOriginalDoc() {
|
this.createForm.originalDoc = ''
|
},
|
|
async submitCreateOrder() {
|
if (!this.createForm.originalDoc) {
|
uni.showToast({
|
title: '请上传原始单据',
|
icon: 'none'
|
})
|
return
|
}
|
|
if (!this.createForm.orderNo || this.createForm.orderNo.length === 0) {
|
uni.showToast({
|
title: '请生成订单号',
|
icon: 'none'
|
})
|
return
|
}
|
|
try {
|
// #ifdef APP-PLUS
|
await this.$orderservice.createOrder(this.createForm)
|
// #endif
|
|
const order = this.createForm.orderNo;
|
const cust = this.createForm.customer;
|
this.createForm.orderNo = '';
|
this.createForm.originalDoc = '';
|
this.createForm.remark = '';
|
this.createForm.customer = '';
|
uni.showToast({
|
title: '创建成功',
|
icon: 'success'
|
})
|
uni.navigateTo({
|
url: `/pages/create/create?orderNo=${order}&addOrOnlyAdjust=1&customer=${cust}`
|
})
|
this.hideCreateOrderPopup()
|
// this.refreshList()
|
} catch (error) {
|
console.error(error)
|
uni.showToast({
|
title: '创建失败',
|
icon: 'none'
|
})
|
}
|
},
|
|
// 侧边操作弹窗方法
|
hideSideActionPopup() {
|
this.$refs.sideActionPopup.close()
|
},
|
|
goToScan() {
|
this.hideSideActionPopup()
|
uni.scanCode({
|
success: (res) => {
|
uni.showToast({
|
title: '扫码成功',
|
icon: 'success'
|
})
|
// 这里可以根据扫码结果进行相应的处理
|
},
|
fail: () => {
|
uni.showToast({
|
title: '扫码失败',
|
icon: 'none'
|
})
|
}
|
})
|
},
|
|
goToHistory() {
|
this.hideSideActionPopup()
|
uni.navigateTo({
|
url: '/pages/history/history'
|
})
|
},
|
|
goToSettings() {
|
this.hideSideActionPopup()
|
uni.navigateTo({
|
url: '/pages/settings/settings'
|
})
|
},
|
|
// 激活软件
|
activateSoftware() {
|
uni.navigateTo({
|
url: '/pages/system/activation',
|
success: () => {},
|
fail: (err) => {
|
console.error('跳转激活页面失败:', err)
|
uni.showToast({
|
title: '跳转失败，请重试',
|
icon: 'none'
|
})
|
}
|
})
|
},
|
|
// 退出登录
|
logout() {
|
uni.showModal({
|
title: '提示',
|
content: '确定要退出登录吗？',
|
success: (res) => {
|
if (res.confirm) {
|
// 这里可以添加退出登录的逻辑
|
uni.showLoading({
|
title: '正在退出'
|
})
|
|
// 模拟退出过程
|
setTimeout(() => {
|
uni.hideLoading()
|
// 清除用户信息
|
|
uni.setStorageSync(config.storageKeys.userInfo, null)
|
uni.setStorageSync(config.storageKeys.authToken, null)
|
uni.setStorageSync(config.storageKeys.tokenExpiry, null)
|
|
// 跳转到登录页面
|
uni.reLaunch({
|
url: '/pages/login/login'
|
})
|
}, 1000)
|
}
|
}
|
})
|
}
|
},
|
|
mounted() {
|
this.loadOrders()
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.order-container {
|
height: 100vh;
|
display: flex;
|
flex-direction: column;
|
background-color: #f5f7fa;
|
|
// 搜索栏样式
|
.search-bar {
|
padding: 20rpx;
|
background-color: #fff;
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
|
.search-box {
|
display: flex;
|
align-items: center;
|
|
.filter-icon {
|
margin-left: 20rpx;
|
padding: 10rpx;
|
}
|
}
|
}
|
|
// 状态筛选器样式
|
.status-filter {
|
white-space: nowrap;
|
padding: 20rpx;
|
background-color: #fff;
|
border-bottom: 1rpx solid #eee;
|
width: calc(100% - 20px);
|
|
.filter-item {
|
display: inline-flex;
|
flex-direction: column;
|
align-items: center;
|
padding: 0 30rpx;
|
position: relative;
|
|
&.active {
|
text {
|
color: #409eff;
|
font-weight: bold;
|
}
|
}
|
|
text {
|
font-size: 28rpx;
|
color: #666;
|
}
|
|
.status-indicator {
|
width: 40rpx;
|
height: 6rpx;
|
border-radius: 3rpx;
|
margin-top: 10rpx;
|
}
|
}
|
}
|
|
// 订单列表样式
|
.order-list {
|
flex: 1;
|
background-color: #f5f7fa;
|
padding-bottom: 180rpx;
|
/* 增加底部空间，防止按钮遮挡 */
|
|
.order-item {
|
margin: 20rpx;
|
padding: 30rpx;
|
background-color: #fff;
|
border-radius: 16rpx;
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
|
.order-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 20rpx;
|
|
.order-no {
|
font-size: 30rpx;
|
font-weight: bold;
|
color: #333;
|
}
|
|
.uni-tag {
|
margin-left: 10rpx;
|
}
|
}
|
|
.order-info {
|
display: flex;
|
justify-content: space-between;
|
font-size: 26rpx;
|
color: #999;
|
|
.create-time {
|
flex: 1;
|
}
|
|
.material-count {
|
text-align: right;
|
min-width: 120rpx;
|
}
|
}
|
}
|
}
|
|
// 底部操作按钮
|
.action-btn {
|
position: fixed;
|
right: 40rpx;
|
bottom: 80rpx;
|
width: 100rpx;
|
height: 100rpx;
|
border-radius: 50%;
|
background-color: #409eff;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
box-shadow: 0 4rpx 20rpx rgba(64, 158, 255, 0.3);
|
z-index: 99;
|
box-sizing: border-box;
|
}
|
|
// 弹窗公共样式
|
.popup-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 30rpx;
|
border-bottom: 1rpx solid #eee;
|
|
text {
|
font-size: 32rpx;
|
font-weight: bold;
|
}
|
}
|
|
// 表单item样式
|
.uni-forms-item {
|
display: flex;
|
margin-bottom: 20rpx;
|
align-items: center;
|
|
.uni-forms-item__label {
|
width: 150rpx !important;
|
flex: none;
|
font-size: 28rpx;
|
color: #666;
|
padding-right: 20rpx;
|
text-align: right;
|
}
|
|
.uni-forms-item__content {
|
flex: 1;
|
min-width: 0;
|
}
|
}
|
|
// 筛选弹窗样式
|
.filter-popup {
|
background-color: #fff;
|
border-radius: 30rpx 30rpx 0 0;
|
width: 100%;
|
box-sizing: border-box;
|
|
.filter-content {
|
padding: 30rpx;
|
width: 100%;
|
box-sizing: border-box;
|
bottom: 50px;
|
|
.submit-btn {
|
margin-top: 40rpx;
|
background-color: #409eff;
|
color: #fff;
|
width: 100%;
|
box-sizing: border-box;
|
padding: 0 20rpx;
|
bottom: 20px;
|
}
|
|
.uni-easyinput,
|
.uni-datetime-picker {
|
width: 100% !important;
|
box-sizing: border-box;
|
}
|
}
|
}
|
|
// 详情弹窗样式
|
.detail-popup {
|
background-color: #fff;
|
border-radius: 30rpx 30rpx 0 0;
|
max-height: 70vh;
|
display: flex;
|
flex-direction: column;
|
|
.detail-content {
|
padding: 30rpx;
|
flex: 1;
|
overflow-y: auto;
|
width: calc(100% - 32px);
|
bottom: 50px;
|
|
.detail-section {
|
margin-bottom: 40rpx;
|
|
.section-title {
|
display: block;
|
font-size: 30rpx;
|
font-weight: bold;
|
margin-bottom: 20rpx;
|
color: #333;
|
}
|
|
.info-row {
|
display: flex;
|
justify-content: space-between;
|
margin-bottom: 15rpx;
|
font-size: 28rpx;
|
color: #666;
|
}
|
|
.material-item {
|
display: flex;
|
justify-content: space-between;
|
padding: 20rpx 0;
|
border-bottom: 1rpx solid #f5f5f5;
|
|
.material-name {
|
font-size: 28rpx;
|
color: #333;
|
}
|
|
.material-quantity {
|
font-size: 28rpx;
|
color: #409eff;
|
}
|
}
|
|
.action-btn {
|
margin-top: 40rpx;
|
background-color: #409eff;
|
color: #fff;
|
}
|
}
|
}
|
}
|
|
// 新建订单弹窗样式
|
.create-popup {
|
background-color: #fff;
|
border-radius: 30rpx 30rpx 0 0;
|
max-height: 70vh;
|
width: 100%;
|
box-sizing: border-box;
|
padding: 0 20rpx;
|
padding-bottom: 40px;
|
|
.create-content {
|
padding: 30rpx;
|
max-height: calc(70vh - 120rpx);
|
width: 100%;
|
box-sizing: border-box;
|
bottom: 50px;
|
|
.doc-upload {
|
margin-bottom: 30rpx;
|
|
.upload-btn {
|
background-color: #409eff;
|
color: #fff;
|
font-size: 28rpx;
|
height: 80rpx;
|
line-height: 80rpx;
|
}
|
|
.doc-preview {
|
margin-top: 20rpx;
|
position: relative;
|
border: 1rpx dashed #ddd;
|
padding: 20rpx;
|
border-radius: 8rpx;
|
|
image {
|
width: 100%;
|
height: 250rpx;
|
margin-bottom: 20rpx;
|
}
|
|
.uni-icons {
|
position: absolute;
|
right: 10rpx;
|
top: 10rpx;
|
background-color: rgba(0, 0, 0, 0.5);
|
color: #fff;
|
border-radius: 50%;
|
padding: 5rpx;
|
}
|
}
|
}
|
|
.submit-btn {
|
margin: 40rpx 0 20rpx;
|
background-color: #409eff;
|
color: #fff;
|
position: sticky;
|
z-index: 1;
|
}
|
}
|
}
|
}
|
|
.order-no-section {
|
padding: 24rpx;
|
background-color: #f8f8f8;
|
border-radius: 8rpx;
|
margin-bottom: 30rpx;
|
display: flex;
|
align-items: center;
|
cursor: pointer;
|
|
.order-no-label {
|
font-size: 28rpx;
|
color: #666;
|
}
|
|
.order-no-value {
|
font-size: 30rpx;
|
font-weight: bold;
|
color: #2979ff;
|
flex: 1;
|
}
|
}
|
|
.detail-footer {
|
padding: 20rpx 30rpx;
|
background: #fff;
|
border-top: 1rpx solid #eee;
|
}
|
|
.submit-btn {
|
width: 100%;
|
height: 80rpx;
|
line-height: 80rpx;
|
background: #2979ff;
|
color: #fff;
|
border-radius: 40rpx;
|
font-size: 28rpx;
|
margin: 0;
|
}
|
|
// 侧边操作弹窗样式
|
.side-action-popup {
|
background-color: #fff;
|
height: 100%;
|
width: 60vw;
|
display: flex;
|
flex-direction: column;
|
|
.popup-header {
|
padding: 30rpx;
|
border-bottom: 1rpx solid #eee;
|
display: flex;
|
justify-content: flex-end;
|
|
text {
|
font-size: 32rpx;
|
font-weight: bold;
|
}
|
}
|
|
// 用户信息区域样式
|
.user-info-section {
|
display: flex;
|
align-items: center;
|
padding: 40rpx 30rpx;
|
background-color: #f8f9fa;
|
border-bottom: 1rpx solid #eee;
|
|
.avatar {
|
width: 100rpx;
|
height: 100rpx;
|
border-radius: 50%;
|
background-color: #409eff;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
margin-right: 20rpx;
|
|
text {
|
color: #fff;
|
font-size: 40rpx;
|
font-weight: bold;
|
}
|
}
|
|
.user-details {
|
display: flex;
|
flex-direction: column;
|
|
.nickname {
|
font-size: 32rpx;
|
font-weight: bold;
|
color: #333;
|
margin-bottom: 10rpx;
|
}
|
|
.role {
|
font-size: 24rpx;
|
color: #666;
|
background-color: #e6f1fc;
|
padding: 4rpx 12rpx;
|
border-radius: 20rpx;
|
display: inline-block;
|
}
|
}
|
}
|
|
.side-action-content {
|
padding: 30rpx;
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
|
.action-item {
|
display: flex;
|
align-items: center;
|
padding: 30rpx 0;
|
border-bottom: 1rpx solid #f5f5f5;
|
|
text {
|
margin-left: 20rpx;
|
font-size: 30rpx;
|
color: #333;
|
}
|
|
&:active {
|
background-color: #f9f9f9;
|
}
|
|
&.logout {
|
margin-top: auto; // 将退出登录按钮推到底部
|
border-top: 1rpx solid #eee;
|
border-bottom: none;
|
|
text {
|
color: #f56c6c;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
