物流查询
This commit is contained in:
砂糖
55
pages/workbench/express/components/ExpressRemainTime.vue
Normal file
55
pages/workbench/express/components/ExpressRemainTime.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<view class="remain-span">
|
||||
<view v-if="status === 2">
|
||||
<uni-tag text="已完成" type="success" />
|
||||
</view>
|
||||
<view v-else-if="status === 3">
|
||||
<uni-tag text="异常" type="error" />
|
||||
</view>
|
||||
<template v-else>
|
||||
<view v-if="isTimeout">
|
||||
<uni-tag text="超时" type="error" />
|
||||
</view>
|
||||
<view v-else>
|
||||
<uni-tag :text="'剩余' + remainDays + '天'" type="info" />
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ExpressRemainTime',
|
||||
props: {
|
||||
planDate: {
|
||||
type: [String, Date],
|
||||
required: false
|
||||
},
|
||||
status: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
remainDays() {
|
||||
if (!this.planDate) return '-';
|
||||
const now = new Date();
|
||||
const plan = new Date(this.planDate);
|
||||
const diff = plan.getTime() - now.getTime();
|
||||
return Math.ceil(diff / (1000 * 60 * 60 * 24));
|
||||
},
|
||||
isTimeout() {
|
||||
if (!this.planDate) return false;
|
||||
const now = new Date();
|
||||
const plan = new Date(this.planDate);
|
||||
return now.getTime() > plan.getTime();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.remain-span {
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
103
pages/workbench/express/components/ExpressStatusEditor.vue
Normal file
103
pages/workbench/express/components/ExpressStatusEditor.vue
Normal file
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<view>
|
||||
<view v-if="!isCustomExpress" style="color: #606266;">
|
||||
<text>{{ lastUpdateTime || '-' }}</text>
|
||||
<view v-if="lastStatus" class="ellipsis" style="max-width: 400rpx; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; font-size: 26rpx;">
|
||||
{{ lastStatus }}
|
||||
</view>
|
||||
<view v-else style="font-size: 26rpx; color: #999; display: inline-block;">未发货或无法获取</view>
|
||||
</view>
|
||||
<view v-else>
|
||||
<text @click="openDialog" style="color:#409EFF;text-decoration:underline;">{{ lastUpdateTime || '点击填写' }}</text>
|
||||
<text @click="openDialog" style="color:#409EFF;text-decoration:underline; margin-left: 16rpx;">{{ lastStatus || '点击填写' }}</text>
|
||||
</view>
|
||||
<uni-popup ref="statusPopup" type="bottom">
|
||||
<view class="popup-content popup-bottom">
|
||||
<view class="form-row">
|
||||
<text>物流状态</text>
|
||||
<uni-easyinput v-model="form.lastStatus" placeholder="请输入物流状态" />
|
||||
</view>
|
||||
<view class="form-row">
|
||||
<text>更新时间</text>
|
||||
<uni-datetime-picker v-model="form.lastUpdateTime" type="datetime" :clear-icon="false" placeholder="请选择更新时间" />
|
||||
</view>
|
||||
<view class="popup-actions">
|
||||
<uni-button @click="closeDialog">取消</uni-button>
|
||||
<uni-button type="primary" @click="handleSave">确定</uni-button>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { EExpressType } from '@/util/enums';
|
||||
export default {
|
||||
name: 'ExpressStatusEditor',
|
||||
props: {
|
||||
lastStatus: String,
|
||||
lastUpdateTime: String,
|
||||
expressType: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
lastStatus: '',
|
||||
lastUpdateTime: ''
|
||||
},
|
||||
EExpressType
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isCustomExpress() {
|
||||
if (!this.EExpressType || typeof this.EExpressType !== 'object') {
|
||||
return true;
|
||||
}
|
||||
const expressTypeList = Object.values(this.EExpressType);
|
||||
return !expressTypeList.includes(this.expressType);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openDialog() {
|
||||
this.form.lastStatus = this.lastStatus || '';
|
||||
this.form.lastUpdateTime = this.lastUpdateTime || '';
|
||||
this.$refs.statusPopup.open();
|
||||
},
|
||||
closeDialog() {
|
||||
this.$refs.statusPopup.close();
|
||||
},
|
||||
handleSave() {
|
||||
if (!this.form.lastStatus || !this.form.lastUpdateTime) {
|
||||
uni.showToast({ title: '请填写完整物流状态和更新时间', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
this.$emit('update:lastStatus', this.form.lastStatus);
|
||||
this.$emit('update:lastUpdateTime', this.form.lastUpdateTime);
|
||||
this.$emit('save', {
|
||||
lastStatus: this.form.lastStatus,
|
||||
lastUpdateTime: this.form.lastUpdateTime
|
||||
});
|
||||
this.closeDialog();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.popup-content { padding: 20rpx; }
|
||||
.popup-bottom {
|
||||
width: 100vw;
|
||||
background: #fff;
|
||||
border-top-left-radius: 24rpx;
|
||||
border-top-right-radius: 24rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.form-row { display: flex; align-items: center; margin-bottom: 16rpx; }
|
||||
.form-row text { width: 120rpx; }
|
||||
.popup-actions { display: flex; justify-content: flex-end; gap: 20rpx; margin-top: 20rpx; }
|
||||
</style>
|
||||
669
pages/workbench/express/express.vue
Normal file
669
pages/workbench/express/express.vue
Normal file
@@ -0,0 +1,669 @@
|
||||
<template>
|
||||
<view class="express-page">
|
||||
<!-- 顶部搜索与新增 -->
|
||||
<view class="search-bar">
|
||||
<view class="search-container">
|
||||
<view class="search-input">
|
||||
<u-search v-model="searchKeyword" placeholder="搜索物流编号" @confirm="onSearch" @keyup.enter="onSearch"
|
||||
class="custom-search-input" :show-action="false" />
|
||||
</view>
|
||||
<view class="add-button" @click="handleAdd">
|
||||
<u-icon name="plus" :color="$im-primary" size="18"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 列表区 -->
|
||||
<scroll-view scroll-y class="express-list" @scrolltolower="loadMore">
|
||||
<view v-for="item in expressList" :key="item.expressId" class="express-card">
|
||||
<!-- 第一行：物流公司、单号、状态 -->
|
||||
<view class="card-header new-header">
|
||||
<text class="express-company">{{ item.expressType || '-' }}</text>
|
||||
<text class="express-code">{{ item.expressCode || '-' }}</text>
|
||||
<text class="status" :class="'status-' + item.status">{{ statusText(item.status) }}</text>
|
||||
</view>
|
||||
<!-- 第二行：发货方向（对方->负责人）及联系方式 -->
|
||||
<view class="row row-between row-arrow">
|
||||
<view class="row-party">
|
||||
<text class="party-label">{{ item.supplyName || '-' }}</text>
|
||||
<text class="party-phone">{{ item.supplyPhone || '-' }}</text>
|
||||
</view>
|
||||
<text class="arrow">→</text>
|
||||
<view class="row-party">
|
||||
<text class="party-label">{{ item.ownerName || '-' }}</text>
|
||||
<text class="party-phone">{{ item.ownerPhone || '-' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 第三行：计划到货时间和剩余天数 -->
|
||||
<view class="row row-between">
|
||||
<text class="plan-date">计划到货：{{ item.planDate || '-' }}</text>
|
||||
<ExpressRemainTime :planDate="item.planDate" :status="item.status" />
|
||||
</view>
|
||||
<!-- 第四行：物流状态编辑器 -->
|
||||
<view class="row">
|
||||
<ExpressStatusEditor :lastStatus.sync="item.lastStatus" :lastUpdateTime.sync="item.lastUpdateTime"
|
||||
:expressType="item.expressType" @save="val => handleStatusSave(item, val)" />
|
||||
</view>
|
||||
<!-- 第五行：备注 -->
|
||||
<view class="row remark-row">
|
||||
<text class="remark-label">备注：</text>
|
||||
<text class="remark-content">{{ item.remark || '-' }}</text>
|
||||
</view>
|
||||
<!-- 第六行：操作按钮 -->
|
||||
<view class="card-actions new-actions">
|
||||
<!-- 未确认：确认、修改 -->
|
||||
<template v-if="item.status === 0">
|
||||
<view class="action-btn action-confirm" @click="handleUpdateStatus(item, 1)">确认</view>
|
||||
<view class="action-btn action-edit" @click="handleUpdate(item)">修改</view>
|
||||
</template>
|
||||
<!-- 进行中：完成、同步、异常 -->
|
||||
<template v-else-if="item.status === 1">
|
||||
<view class="action-btn action-finish" @click="handleUpdateStatus(item, 2)">完成</view>
|
||||
<view class="action-btn action-sync" @click="handleRefresh(item)">同步</view>
|
||||
<view class="action-btn action-exception" @click="handleUpdateStatus(item, 3)">异常</view>
|
||||
</template>
|
||||
<!-- 已完成：无操作按钮，仅显示删除 -->
|
||||
<template v-else-if="item.status === 2">
|
||||
<!-- 空 -->
|
||||
</template>
|
||||
<!-- 异常：同步 -->
|
||||
<template v-else-if="item.status === 3">
|
||||
<view class="action-btn action-sync" @click="handleRefresh(item)">同步</view>
|
||||
</template>
|
||||
<!-- 编辑和删除按钮始终显示 -->
|
||||
<view class="action-btn action-edit" @click="handleUpdate(item)">编辑</view>
|
||||
<view class="action-btn action-delete" @click="handleDelete(item)">删除</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="loadingMore" class="loading-more">加载中...</view>
|
||||
<view v-if="noMore" class="no-more">没有更多了</view>
|
||||
</scroll-view>
|
||||
|
||||
|
||||
<!-- 新增/编辑弹窗 -->
|
||||
<uni-popup ref="editPopup" type="bottom">
|
||||
<view class="popup-content popup-bottom">
|
||||
<view class="form-row">
|
||||
<text>物流编号</text>
|
||||
<uni-easyinput v-model="form.expressCode" placeholder="请输入物流编号" />
|
||||
</view>
|
||||
<view class="form-row">
|
||||
<text>对方姓名</text>
|
||||
<uni-easyinput v-model="form.supplyName" placeholder="请输入对方姓名" />
|
||||
</view>
|
||||
<view class="form-row">
|
||||
<text>对方手机</text>
|
||||
<uni-easyinput v-model="form.supplyPhone" placeholder="请输入对方手机" />
|
||||
</view>
|
||||
<view class="form-row">
|
||||
<text>负责人</text>
|
||||
<oa-user-select v-model="form.ownerId" />
|
||||
</view>
|
||||
<view class="form-row">
|
||||
<text>负责人手机</text>
|
||||
<uni-easyinput v-model="form.ownerPhone" placeholder="请输入负责人手机" />
|
||||
</view>
|
||||
<view class="form-row">
|
||||
<text>计划到货</text>
|
||||
<uni-easyinput v-model="form.planDate" placeholder="请输入计划到货时间" />
|
||||
</view>
|
||||
<view class="form-row">
|
||||
<text>物流公司</text>
|
||||
<oa-dict-select v-model="form.expressType" :dictType="'oa_express_type'" placeholder="请选择物流公司" />
|
||||
</view>
|
||||
<view class="form-row">
|
||||
<text>备注</text>
|
||||
<uni-easyinput v-model="form.remark" placeholder="请输入备注" />
|
||||
</view>
|
||||
<view class="popup-actions">
|
||||
<uni-button type="primary" @click="submitForm">保存</uni-button>
|
||||
<uni-button @click="cancel">取消</uni-button>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
|
||||
<!-- 异常登记弹窗 -->
|
||||
<uni-popup ref="exceptionPopup" type="bottom">
|
||||
<view class="popup-content popup-bottom">
|
||||
<view class="form-row">
|
||||
<text>问题描述</text>
|
||||
<uni-easyinput v-model="exceptionForm.description" placeholder="请输入问题描述" />
|
||||
</view>
|
||||
<view class="form-row">
|
||||
<text>汇报时间</text>
|
||||
<uni-easyinput v-model="exceptionForm.reportTime" placeholder="请选择汇报时间" />
|
||||
</view>
|
||||
<view class="form-row">
|
||||
<text>备注</text>
|
||||
<uni-easyinput v-model="exceptionForm.remark" placeholder="请输入备注" />
|
||||
</view>
|
||||
<view class="popup-actions">
|
||||
<uni-button type="primary" @click="submitException">确 定</uni-button>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { addExpress, delExpress, getExpress, listExpress, updateExpress } from '@/api/oa/express';
|
||||
import ExpressStatusEditor from './components/ExpressStatusEditor.vue';
|
||||
import ExpressRemainTime from './components/ExpressRemainTime.vue';
|
||||
import { addExpressQuestion } from '@/api/oa/expressQuestion';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ExpressStatusEditor,
|
||||
ExpressRemainTime,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
expressList: [],
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
loadingMore: false,
|
||||
noMore: false,
|
||||
form: {
|
||||
ownerUser: {},
|
||||
},
|
||||
expressDetail: {},
|
||||
loading: false,
|
||||
exceptionForm: {
|
||||
description: '',
|
||||
reportTime: '',
|
||||
remark: ''
|
||||
},
|
||||
currentExceptionItem: null,
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
handleStatusSave(row, val) {
|
||||
row.lastStatus = val.lastStatus;
|
||||
row.lastUpdateTime = val.lastUpdateTime;
|
||||
updateExpress(row).then(() => {
|
||||
uni.showToast({ title: '保存成功', icon: 'success' });
|
||||
this.getList();
|
||||
});
|
||||
},
|
||||
getList(isLoadMore = false) {
|
||||
if (this.loadingMore) return;
|
||||
this.loadingMore = true;
|
||||
listExpress({ pageNum: this.pageNum, pageSize: this.pageSize }).then(res => {
|
||||
const rows = res.rows || [];
|
||||
if (isLoadMore) {
|
||||
this.expressList = this.expressList.concat(rows);
|
||||
} else {
|
||||
this.expressList = rows;
|
||||
}
|
||||
this.total = res.total || 0;
|
||||
this.noMore = rows.length < this.pageSize;
|
||||
}).finally(() => {
|
||||
this.loadingMore = false;
|
||||
});
|
||||
},
|
||||
loadMore() {
|
||||
if (this.noMore || this.loadingMore) return;
|
||||
this.pageNum++;
|
||||
this.getList(true);
|
||||
},
|
||||
handleAdd() {
|
||||
this.form = { ownerUser: {} };
|
||||
this.$refs.editPopup.open();
|
||||
},
|
||||
handleUpdate(item) {
|
||||
getExpress(item.expressId).then(res => {
|
||||
const data = res.data || {};
|
||||
this.form = {
|
||||
...data,
|
||||
ownerUser: data.ownerUser || {},
|
||||
};
|
||||
this.$refs.editPopup.open();
|
||||
});
|
||||
},
|
||||
handleDelete(item) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要删除该物流单吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
delExpress(item.expressId).then(() => {
|
||||
uni.showToast({ title: '删除成功', icon: 'success' });
|
||||
this.pageNum = 1;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
submitForm() {
|
||||
// 提交时将负责人信息拆分到 ownerName/ownerPhone 字段
|
||||
const submitData = { ...this.form };
|
||||
if (submitData.expressId) {
|
||||
updateExpress(submitData).then(() => {
|
||||
uni.showToast({ title: '修改成功', icon: 'success' });
|
||||
this.$refs.editPopup.close();
|
||||
this.pageNum = 1;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addExpress(submitData).then(() => {
|
||||
uni.showToast({ title: '新增成功', icon: 'success' });
|
||||
this.$refs.editPopup.close();
|
||||
this.pageNum = 1;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
},
|
||||
cancel() {
|
||||
this.$refs.editPopup.close();
|
||||
},
|
||||
handleDetail(item) {
|
||||
getExpress(item.expressId).then(res => {
|
||||
this.expressDetail = res.data || {};
|
||||
this.$refs.detailPopup.open();
|
||||
});
|
||||
},
|
||||
closeDetailPopup() {
|
||||
this.$refs.detailPopup.close();
|
||||
},
|
||||
handleUpdateStatus(item, status) {
|
||||
if (status === 3) {
|
||||
this.currentExceptionItem = item;
|
||||
this.$refs.exceptionPopup.open();
|
||||
this.exceptionForm = {
|
||||
description: '',
|
||||
reportTime: this.formatDate(new Date()),
|
||||
remark: ''
|
||||
};
|
||||
return;
|
||||
}
|
||||
item.status = status;
|
||||
updateExpress(item).then(() => {
|
||||
uni.showToast({ title: '状态更新成功', icon: 'success' });
|
||||
this.getList();
|
||||
});
|
||||
},
|
||||
submitException() {
|
||||
const item = this.currentExceptionItem;
|
||||
addExpressQuestion({
|
||||
expressId: item.expressId,
|
||||
description: this.exceptionForm.description,
|
||||
reportTime: this.exceptionForm.reportTime,
|
||||
remark: this.exceptionForm.remark
|
||||
}).then(() => {
|
||||
item.status = 3;
|
||||
return updateExpress(item);
|
||||
}).then(() => {
|
||||
uni.showToast({ title: '异常登记成功', icon: 'success' });
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.$refs.exceptionPopup.close();
|
||||
this.exceptionForm = {
|
||||
description: '',
|
||||
reportTime: '',
|
||||
remark: ''
|
||||
};
|
||||
this.currentExceptionItem = null;
|
||||
});
|
||||
},
|
||||
formatDate(date) {
|
||||
const pad = n => n < 10 ? '0' + n : n;
|
||||
return date.getFullYear() + '-' + pad(date.getMonth() + 1) + '-' + pad(date.getDate()) + ' '
|
||||
+ pad(date.getHours()) + ':' + pad(date.getMinutes()) + ':' + pad(date.getSeconds());
|
||||
},
|
||||
handleRefresh(item) {
|
||||
// 实现同步逻辑
|
||||
uni.showToast({ title: '同步成功', icon: 'success' });
|
||||
this.getList();
|
||||
},
|
||||
statusText(status) {
|
||||
switch (status) {
|
||||
case 0: return '未确认';
|
||||
case 1: return '进行中';
|
||||
case 2: return '已完成';
|
||||
case 3: return '异常';
|
||||
default: return '-';
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.express-page {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.express-list {
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
.express-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0 2rpx 8rpx #eee;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.new-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.express-company {
|
||||
color: #409EFF;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.express-code {
|
||||
color: #333;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.status {
|
||||
margin-left: auto;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-0 {
|
||||
color: #faad14;
|
||||
}
|
||||
|
||||
.status-1 {
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.status-2 {
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
.status-3 {
|
||||
color: #f5222d;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 16rpx 0;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
padding-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.express-card .row:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.row-between {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.row-arrow {
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.row-party {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rpx;
|
||||
}
|
||||
|
||||
.party-label {
|
||||
color: #333;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.party-phone {
|
||||
color: #888;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
color: #bbb;
|
||||
font-size: 32rpx;
|
||||
margin: 0 8rpx;
|
||||
}
|
||||
|
||||
.plan-date {
|
||||
color: #666;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.remark-row {
|
||||
background: #f7f7f7;
|
||||
border-radius: 8rpx;
|
||||
padding: 8rpx 12rpx;
|
||||
margin-top: 6rpx;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
margin-bottom: 16rpx;
|
||||
padding-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.remark-label {
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.remark-content {
|
||||
color: #333;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.new-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 16rpx;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: 8rpx 28rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
margin-left: 0;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.action-confirm {
|
||||
background: #f6ffed;
|
||||
color: #52c41a;
|
||||
border: 1rpx solid #b7eb8f;
|
||||
}
|
||||
|
||||
.action-confirm:active {
|
||||
background: #d9f7be;
|
||||
}
|
||||
|
||||
.action-finish {
|
||||
background: #e6f7ff;
|
||||
color: #1890ff;
|
||||
border: 1rpx solid #91d5ff;
|
||||
}
|
||||
|
||||
.action-finish:active {
|
||||
background: #bae7ff;
|
||||
}
|
||||
|
||||
.action-sync {
|
||||
background: #fffbe6;
|
||||
color: #faad14;
|
||||
border: 1rpx solid #ffe58f;
|
||||
}
|
||||
|
||||
.action-sync:active {
|
||||
background: #fff1b8;
|
||||
}
|
||||
|
||||
.action-exception {
|
||||
background: #fff7e6;
|
||||
color: #fa541c;
|
||||
border: 1rpx solid #ffd591;
|
||||
}
|
||||
|
||||
.action-exception:active {
|
||||
background: #ffe7ba;
|
||||
}
|
||||
|
||||
.action-edit {
|
||||
background: #f6ffed;
|
||||
color: #389e0d;
|
||||
border: 1rpx solid #b7eb8f;
|
||||
}
|
||||
|
||||
.action-edit:active {
|
||||
background: #d9f7be;
|
||||
}
|
||||
|
||||
.action-detail {
|
||||
background: #f0f5ff;
|
||||
color: #2f54eb;
|
||||
border: 1rpx solid #adc6ff;
|
||||
}
|
||||
|
||||
.action-detail:active {
|
||||
background: #d6e4ff;
|
||||
}
|
||||
|
||||
/* 删除按钮：红色文字，边框和背景更警示 */
|
||||
.action-delete {
|
||||
background: #fff1f0;
|
||||
color: #f5222d;
|
||||
border: 1rpx solid #ffa39e;
|
||||
}
|
||||
|
||||
.action-delete:active {
|
||||
background: #ffccc7;
|
||||
}
|
||||
|
||||
.loading-more,
|
||||
.no-more {
|
||||
text-align: center;
|
||||
color: #888;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.popup-bottom {
|
||||
width: 100vw;
|
||||
background: #fff;
|
||||
border-top-left-radius: 24rpx;
|
||||
border-top-right-radius: 24rpx;
|
||||
box-sizing: border-box;
|
||||
z-index: 9999;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.form-row text {
|
||||
width: 120rpx;
|
||||
}
|
||||
|
||||
.popup-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 20rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
display: flex;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
/* 新增按钮样式 */
|
||||
.add-btn-wrapper {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 60rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
background: #409EFF;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4rpx 16rpx #b3d8ff;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.add-btn:active {
|
||||
background: #66b1ff;
|
||||
}
|
||||
|
||||
.add-btn .iconfont {
|
||||
color: #fff;
|
||||
font-size: 60rpx;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
padding: 20rpx;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.task-type-button-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.task-type-button,
|
||||
.add-button {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
background-color: transparent;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user