小程序完成（账号密码登录、风格修改、签字功能）
This commit is contained in:
+304
-22
@@ -1,29 +1,54 @@
|
||||
<template>
|
||||
<view>
|
||||
<scroll-view scroll-y class="page">
|
||||
<cu-custom bgColor="bg-cyan" :isBack="true"><block slot="backText">返回</block><block slot="content">交接列表</block></cu-custom>
|
||||
<view class="cu-bar bg-white solid-bottom">
|
||||
<view class="action">
|
||||
<text class="cuIcon-title text-green" style="color:#2CC9EA;"></text>
|
||||
<text style="color:#B4B4C3;">交接列表</text>
|
||||
</view>
|
||||
<cu-custom bgColor="bg-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">交接列表</block></cu-custom>
|
||||
|
||||
<!-- 空数据提示 -->
|
||||
<view v-if="!handDetailsInfo || handDetailsInfo.length === 0" class="empty-container">
|
||||
<text class="empty-icon">📭</text>
|
||||
<text class="empty-text">本日医废数据为空</text>
|
||||
</view>
|
||||
<view class="cu-list menu-avatar" style="margin-top:5px;">
|
||||
<view class="cu-item" v-for="(value,index) in handDetailsInfo" :key="index">
|
||||
<view class="cu-avatar round lg" style="background-image:url(https://lekapi.opmonitor.com/static/image/avatar.png);"></view>
|
||||
<view class="content">
|
||||
<view class="text-grey text-sm flex" style="">
|
||||
<text style="width:100px;">{{value.handName}}</text>
|
||||
<text style='margin-left:5%;width:100px;font-family:Montserrat-Regular;'>{{value.type}}</text>
|
||||
</view>
|
||||
<view class="text-grey text-sm flex">
|
||||
<text class="cuIcon-locationfill text-red margin-right-xs"></text>
|
||||
<text style="width:90px;">{{value.department}}</text>
|
||||
<text style="margin-left:5%;width:100px;font-size: 12px;font-weight:bold;color:red;">{{value.totalWeight}}</text>
|
||||
</view>
|
||||
|
||||
<!-- 表格展示 -->
|
||||
<view v-else class="data-wrapper" v-for="(deptData, deptIndex) in groupedHandData" :key="deptIndex">
|
||||
<!-- 科室汇总行 -->
|
||||
<view class="dept-summary-row">
|
||||
<view class="summary-cell summary-cell-dept">
|
||||
<text class="dept-icon">🏥</text>
|
||||
<text class="dept-name">{{deptData.department}}</text>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="text-grey text-xs">{{value.handTime}}</view>
|
||||
<view class="summary-cell summary-cell-count">
|
||||
<text class="summary-value">{{deptData.totalCount}}</text>
|
||||
<text class="summary-unit">袋</text>
|
||||
</view>
|
||||
<view class="summary-cell summary-cell-weight">
|
||||
<text class="summary-value">{{deptData.totalWeight}}</text>
|
||||
<text class="summary-unit">kg</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 表格形式展示分类 -->
|
||||
<view class="table-container">
|
||||
<view class="table-header">
|
||||
<view class="table-cell table-cell-type">类型</view>
|
||||
<view class="table-cell table-cell-count">袋数</view>
|
||||
<view class="table-cell table-cell-weight">重量</view>
|
||||
<view class="table-cell table-cell-hand">交接人</view>
|
||||
<view class="table-cell table-cell-action">操作</view>
|
||||
</view>
|
||||
<view class="table-row" v-for="(item, itemIndex) in deptData.items" :key="itemIndex">
|
||||
<view class="table-cell table-cell-type">
|
||||
<img :src="item.image" class="type-icon" v-if="item.image">
|
||||
<text>{{item.type}}</text>
|
||||
</view>
|
||||
<view class="table-cell table-cell-count">{{item.totalCount}}</view>
|
||||
<view class="table-cell table-cell-weight">{{item.totalWeight}}</view>
|
||||
<view class="table-cell table-cell-hand" v-if="itemIndex === 0">{{item.handName}}</view>
|
||||
<view class="table-cell table-cell-hand" v-else></view>
|
||||
<view class="table-cell table-cell-action" v-if="itemIndex === 0">
|
||||
<button class="sign-btn" @click="goToSign(item)">签</button>
|
||||
</view>
|
||||
<view class="table-cell table-cell-action" v-else></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -35,7 +60,36 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
handDetailsInfo: []
|
||||
handDetailsInfo: [],
|
||||
groupedHandData: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 按科室分组数据
|
||||
groupHandData() {
|
||||
const groups = {};
|
||||
this.handDetailsInfo.forEach(item => {
|
||||
if (!groups[item.department]) {
|
||||
groups[item.department] = {
|
||||
department: item.department,
|
||||
totalCount: 0,
|
||||
totalWeight: 0,
|
||||
items: []
|
||||
};
|
||||
}
|
||||
groups[item.department].totalCount += parseFloat(item.totalCount) || 0;
|
||||
groups[item.department].totalWeight += parseFloat(item.totalWeight) || 0;
|
||||
groups[item.department].items.push({
|
||||
...item,
|
||||
totalCount: (parseFloat(item.totalCount) || 0).toFixed(2),
|
||||
totalWeight: (parseFloat(item.totalWeight) || 0).toFixed(2)
|
||||
});
|
||||
});
|
||||
return Object.values(groups).map(group => ({
|
||||
...group,
|
||||
totalCount: group.totalCount.toFixed(2),
|
||||
totalWeight: group.totalWeight.toFixed(2)
|
||||
}));
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
@@ -46,6 +100,15 @@
|
||||
this.duty = getApp().globalData.duty
|
||||
this.getHandDetailsInfo();
|
||||
},
|
||||
watch: {
|
||||
handDetailsInfo: {
|
||||
handler(newVal) {
|
||||
this.groupedHandData = this.groupHandData;
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getHandDetailsInfo(){
|
||||
let that = this;
|
||||
@@ -62,6 +125,12 @@
|
||||
console.info('小程序域名不正确，请检查域名的正确性')
|
||||
}
|
||||
})
|
||||
},
|
||||
goToSign(item) {
|
||||
// 跳转到签名页面，传递必要的数据
|
||||
uni.navigateTo({
|
||||
url: `/pages/plugin/sign?id=${item.id}&handName=${item.handName}`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -90,4 +159,217 @@
|
||||
.cuIcon-locationfill{
|
||||
color:#2CC9EA;
|
||||
}
|
||||
|
||||
/* 空数据容器 */
|
||||
.empty-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 200rpx 0;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 120rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 32rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 数据包裹层 */
|
||||
.data-wrapper {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
/* 科室汇总行 */
|
||||
.dept-summary-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 20rpx;
|
||||
padding: 28rpx 24rpx;
|
||||
background: linear-gradient(135deg, #2980b9 0%, #1a5276 100%);
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 0 6rpx 24rpx rgba(41, 128, 185, 0.4);
|
||||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dept-summary-row::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: -20%;
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.summary-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.summary-cell-dept {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.dept-icon {
|
||||
font-size: 40rpx;
|
||||
margin-right: 14rpx;
|
||||
filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2));
|
||||
}
|
||||
|
||||
.dept-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.summary-cell-count,
|
||||
.summary-cell-weight {
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 16rpx;
|
||||
padding: 16rpx 20rpx;
|
||||
margin: 0 10rpx;
|
||||
backdrop-filter: blur(10rpx);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.summary-value {
|
||||
font-size: 36rpx;
|
||||
font-weight: 800;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.summary-unit {
|
||||
font-size: 20rpx;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* 表格容器 */
|
||||
.table-container {
|
||||
margin: 0 20rpx 20rpx 20rpx;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
background-color: #f8f9fa;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
|
||||
border: 2px solid #d4e6f1;
|
||||
}
|
||||
|
||||
/* 表头 */
|
||||
.table-header {
|
||||
display: flex;
|
||||
background: linear-gradient(90deg, #2980b9 0%, #1a5276 100%);
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
font-size: 28rpx;
|
||||
letter-spacing: 2rpx;
|
||||
padding-top: 4rpx;
|
||||
}
|
||||
|
||||
/* 表格行 */
|
||||
.table-row {
|
||||
display: flex;
|
||||
border-bottom: 1px dashed #d0dbe6;
|
||||
background-color: #fff;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.table-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.table-row:hover {
|
||||
background-color: #eaf2f8;
|
||||
transform: translateX(4rpx);
|
||||
}
|
||||
|
||||
/* 表格单元格 */
|
||||
.table-cell {
|
||||
padding: 24rpx 16rpx;
|
||||
font-size: 28rpx;
|
||||
color: #2c3e50;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
word-break: break-all;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.table-cell-type {
|
||||
flex: 2;
|
||||
justify-content: flex-start;
|
||||
padding-left: 24rpx;
|
||||
}
|
||||
|
||||
.table-cell-count {
|
||||
flex: 1;
|
||||
color: #2980b9;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.table-cell-weight {
|
||||
flex: 1;
|
||||
color: #c0392b;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.table-cell-hand {
|
||||
flex: 1.5;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.table-cell-action {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* 类型图标 */
|
||||
.type-icon {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
margin-right: 14rpx;
|
||||
border-radius: 8rpx;
|
||||
padding: 4rpx;
|
||||
background: linear-gradient(135deg, #2980b9 0%, #1a5276 100%);
|
||||
}
|
||||
|
||||
/* 签名按钮 */
|
||||
.sign-btn {
|
||||
background: linear-gradient(135deg, #2980b9 0%, #1a5276 100%);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 24rpx;
|
||||
padding: 16rpx 40rpx;
|
||||
font-size: 26rpx;
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 4rpx 16rpx rgba(41, 128, 185, 0.5);
|
||||
transition: all 0.3s ease;
|
||||
letter-spacing: 4rpx;
|
||||
}
|
||||
|
||||
.sign-btn::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.sign-btn:active {
|
||||
transform: scale(0.92);
|
||||
box-shadow: 0 2rpx 10rpx rgba(41, 128, 185, 0.4);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user