小程序完成（账号密码登录、风格修改、签字功能）
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>
|
||||
|
||||
+161
-43
@@ -14,24 +14,28 @@
|
||||
</view>
|
||||
<!--<image src="https://raw.githubusercontent.com/weilanwl/ColorUI/master/demo/images/wave.gif" mode="scaleToFill" class="gif-wave"></image>-->
|
||||
</view>
|
||||
<view class="padding flex text-center text-grey bg-white shadow-warp">
|
||||
<view class="flex flex-sub flex-direction solid-right">
|
||||
<view class="text-xxl text-green">{{myBasisInfo.today_sum}}</view>
|
||||
<view class="margin-top-sm">今日重量</view>
|
||||
<!-- 今日数据统计 -->
|
||||
<view class="stats-container">
|
||||
<view class="stat-card stat-count">
|
||||
<view class="stat-icon">📊</view>
|
||||
<view class="stat-value">{{myBasisInfo.today_count}}</view>
|
||||
<view class="stat-label">今日数量</view>
|
||||
</view>
|
||||
<view class="flex flex-sub flex-direction solid-right">
|
||||
<view class="text-xxl text-blue">{{myBasisInfo.today_count}}</view>
|
||||
<view class="margin-top-sm">今日数量</view>
|
||||
<view class="stat-card stat-weight">
|
||||
<view class="stat-icon">⚖️</view>
|
||||
<view class="stat-value">{{myBasisInfo.today_sum}}</view>
|
||||
<view class="stat-label">今日重量</view>
|
||||
</view>
|
||||
<view class="flex flex-sub flex-direction">
|
||||
<view class="text-xxl text-red">{{myBasisInfo.today_abnormal}}</view>
|
||||
<view class="margin-top-sm">今日异常</view>
|
||||
<view class="stat-card stat-abnormal">
|
||||
<view class="stat-icon">⚠️</view>
|
||||
<view class="stat-value">{{myBasisInfo.today_abnormal}}</view>
|
||||
<view class="stat-label">今日异常</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg radius">
|
||||
<view class="cu-item arrow">
|
||||
<navigator class="content" url="/pages/main/inventory" hover-class="none">
|
||||
<text class="cuIcon-deletefill text-cyan"></text>
|
||||
<text class="cuIcon-deletefill text-blue"></text>
|
||||
<text class="text-grey">科室汇总</text>
|
||||
</navigator>
|
||||
</view>
|
||||
@@ -43,26 +47,20 @@
|
||||
</view> -->
|
||||
<view class="cu-item arrow">
|
||||
<navigator class="content" url="/pages/plugin/handList" hover-class="none">
|
||||
<text class="cuIcon-selectionfill text-cyan"></text>
|
||||
<text class="cuIcon-selectionfill text-blue"></text>
|
||||
<text class="text-grey">交接列表</text>
|
||||
</navigator>
|
||||
</view>
|
||||
<view class="cu-item arrow">
|
||||
<navigator class="content" url="/pages/plugin/personalInformation" hover-class="none">
|
||||
<text class="cuIcon-myfill text-cyan"></text>
|
||||
<text class="cuIcon-myfill text-blue"></text>
|
||||
<text class="text-grey">个人信息</text>
|
||||
</navigator>
|
||||
</view>
|
||||
<view class="cu-item arrow">
|
||||
<navigator class="content" url="/pages/plugin/about" hover-class="none">
|
||||
<text class="cuIcon-medalfill text-cyan"></text>
|
||||
<text class="text-grey">关于我们</text>
|
||||
</navigator>
|
||||
</view>
|
||||
<view class="cu-item arrow">
|
||||
<navigator class="content" hover-class="none" @click="buttonClick">
|
||||
<text class="cuIcon-myfill text-cyan"></text>
|
||||
<text class="text-grey">注销账户</text>
|
||||
<text class="cuIcon-myfill text-blue"></text>
|
||||
<text class="text-grey">退出登录</text>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
@@ -117,28 +115,30 @@
|
||||
},
|
||||
buttonClick(){
|
||||
console.info(getApp().globalData)
|
||||
|
||||
// 将数据库中的数据清空
|
||||
let that = this;
|
||||
uni.request({
|
||||
url: 'https://lekapi.opmonitor.com/?c=app_api&a=clearData',
|
||||
data: {openid: getApp().globalData.openid},
|
||||
header: {
|
||||
'Content-type': 'application/json'
|
||||
},
|
||||
success: function(res){
|
||||
// 将globalData清空并刷新
|
||||
getApp().globalData.openid = ''
|
||||
console.info(getApp().globalData)
|
||||
// 跳转到首页
|
||||
uni.reLaunch({
|
||||
url: '/pages/plugin/home'
|
||||
})
|
||||
},
|
||||
fail: () => {
|
||||
console.info('小程序域名不正确，请检查域名的正确性')
|
||||
}
|
||||
uni.reLaunch({
|
||||
url: '/pages/register/login'
|
||||
})
|
||||
// 将数据库中的数据清空
|
||||
// let that = this;
|
||||
// uni.request({
|
||||
// url: 'https://lekapi.opmonitor.com/?c=app_api&a=clearData',
|
||||
// data: {openid: getApp().globalData.openid},
|
||||
// header: {
|
||||
// 'Content-type': 'application/json'
|
||||
// },
|
||||
// success: function(res){
|
||||
// // 将globalData清空并刷新
|
||||
// getApp().globalData.openid = ''
|
||||
// console.info(getApp().globalData)
|
||||
// // 跳转到首页
|
||||
// uni.reLaunch({
|
||||
// url: '/pages/plugin/home'
|
||||
// })
|
||||
// },
|
||||
// fail: () => {
|
||||
// console.info('小程序域名不正确，请检查域名的正确性')
|
||||
// }
|
||||
// })
|
||||
|
||||
}
|
||||
}
|
||||
@@ -152,7 +152,7 @@
|
||||
}
|
||||
|
||||
.UCenter-bg {
|
||||
background:-webkit-linear-gradient(right,#15D2BB,#2CC9E9);
|
||||
background:-webkit-linear-gradient(right,#4a90e2,#357abd);
|
||||
background-size: cover;
|
||||
height: 550rpx;
|
||||
display: flex;
|
||||
@@ -224,4 +224,122 @@
|
||||
border: 2px solid #fff;
|
||||
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* 统计数据容器 */
|
||||
.stats-container {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 40rpx 20rpx;
|
||||
margin: -80rpx 30rpx 30rpx 30rpx;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 24rpx;
|
||||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
backdrop-filter: blur(10rpx);
|
||||
border: 1px solid rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
/* 统计卡片 */
|
||||
.stat-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24rpx 20rpx;
|
||||
border-radius: 20rpx;
|
||||
width: 200rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.stat-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: -50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* 今日数量卡片 */
|
||||
.stat-count {
|
||||
background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
|
||||
box-shadow: 0 6rpx 24rpx rgba(74, 144, 226, 0.35);
|
||||
}
|
||||
|
||||
.stat-count .stat-icon {
|
||||
font-size: 44rpx;
|
||||
margin-bottom: 8rpx;
|
||||
filter: drop-shadow(0 2rpx 8rpx rgba(0, 0, 0, 0.15));
|
||||
}
|
||||
|
||||
.stat-count .stat-value {
|
||||
font-size: 48rpx;
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
margin-bottom: 6rpx;
|
||||
text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.stat-count .stat-label {
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 今日重量卡片 */
|
||||
.stat-weight {
|
||||
background: linear-gradient(135deg, #27ae60 0%, #1e8449 100%);
|
||||
box-shadow: 0 6rpx 24rpx rgba(39, 174, 96, 0.35);
|
||||
}
|
||||
|
||||
.stat-weight .stat-icon {
|
||||
font-size: 44rpx;
|
||||
margin-bottom: 8rpx;
|
||||
filter: drop-shadow(0 2rpx 8rpx rgba(0, 0, 0, 0.15));
|
||||
}
|
||||
|
||||
.stat-weight .stat-value {
|
||||
font-size: 48rpx;
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
margin-bottom: 6rpx;
|
||||
text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.stat-weight .stat-label {
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 今日异常卡片 */
|
||||
.stat-abnormal {
|
||||
background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
|
||||
box-shadow: 0 6rpx 24rpx rgba(231, 76, 60, 0.35);
|
||||
}
|
||||
|
||||
.stat-abnormal .stat-icon {
|
||||
font-size: 44rpx;
|
||||
margin-bottom: 8rpx;
|
||||
filter: drop-shadow(0 2rpx 8rpx rgba(0, 0, 0, 0.15));
|
||||
}
|
||||
|
||||
.stat-abnormal .stat-value {
|
||||
font-size: 48rpx;
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
margin-bottom: 6rpx;
|
||||
text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.stat-abnormal .stat-label {
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<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>
|
||||
<cu-custom bgColor="bg-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">个人信息</block></cu-custom>
|
||||
<view class="photoView">
|
||||
<view class="photoImage">
|
||||
<open-data type="userAvatarUrl"></open-data>
|
||||
@@ -33,9 +33,6 @@
|
||||
<input :value="phone" name="phone" @input="getPhone"></input>
|
||||
</view>
|
||||
</form>
|
||||
<view class="padding flex flex-direction" style="padding-top: 100rpx;">
|
||||
<button class="cu-btn round bg-cyan margin-tb-sm lg" @click="buttonClick">修改</button>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<cu-custom bgColor="bg-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">签名确认</block></cu-custom>
|
||||
|
||||
<view class="sign-container">
|
||||
<view class="sign-info">
|
||||
<text class="info-label">交接人：</text>
|
||||
<text class="info-value">{{handName}}</text>
|
||||
</view>
|
||||
|
||||
<view class="canvas-wrapper">
|
||||
<canvas
|
||||
class="sign-canvas"
|
||||
canvas-id="signCanvas"
|
||||
@touchstart="touchStart"
|
||||
@touchmove="touchMove"
|
||||
@touchend="touchEnd"
|
||||
@touchcancel="touchEnd"
|
||||
disable-scroll="true"
|
||||
></canvas>
|
||||
</view>
|
||||
|
||||
<view class="btn-container">
|
||||
<button class="clear-btn" @click="clearCanvas">清除</button>
|
||||
<button class="confirm-btn" @click="confirmSign">确认</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
id: '',
|
||||
handName: '',
|
||||
ctx: null,
|
||||
isDrawing: false,
|
||||
hasSigned: false
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
console.log('接收到的参数：', options);
|
||||
this.id = decodeURIComponent(options.id || '');
|
||||
this.handName = decodeURIComponent(options.handName || '');
|
||||
console.log('id:', this.id, 'handName:', this.handName);
|
||||
},
|
||||
onReady() {
|
||||
this.initCanvas();
|
||||
},
|
||||
methods: {
|
||||
initCanvas() {
|
||||
const ctx = uni.createCanvasContext('signCanvas', this);
|
||||
this.ctx = ctx;
|
||||
ctx.setStrokeStyle('#000000');
|
||||
ctx.setLineWidth(4);
|
||||
ctx.setLineCap('round');
|
||||
ctx.setLineJoin('round');
|
||||
},
|
||||
touchStart(e) {
|
||||
this.isDrawing = true;
|
||||
this.hasSigned = true;
|
||||
const touch = e.touches[0];
|
||||
this.ctx.beginPath();
|
||||
this.ctx.moveTo(touch.x, touch.y);
|
||||
},
|
||||
touchMove(e) {
|
||||
if (!this.isDrawing) return;
|
||||
const touch = e.touches[0];
|
||||
this.ctx.lineTo(touch.x, touch.y);
|
||||
this.ctx.stroke();
|
||||
},
|
||||
touchEnd(e) {
|
||||
if (this.isDrawing) {
|
||||
this.ctx.stroke();
|
||||
this.ctx.closePath();
|
||||
}
|
||||
this.isDrawing = false;
|
||||
},
|
||||
clearCanvas() {
|
||||
uni.getSystemInfo({
|
||||
success: (res) => {
|
||||
this.ctx.clearRect(0, 0, res.windowWidth, 800);
|
||||
}
|
||||
});
|
||||
this.hasSigned = false;
|
||||
},
|
||||
confirmSign() {
|
||||
if (!this.hasSigned) {
|
||||
uni.showToast({
|
||||
title: '请先签名',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId: 'signCanvas',
|
||||
fileType: 'png',
|
||||
success: (res) => {
|
||||
console.log('签名图片路径：', res.tempFilePath);
|
||||
uni.showToast({
|
||||
title: '签名已确认',
|
||||
icon: 'success',
|
||||
duration: 2000
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.navigateBack();
|
||||
}, 500);
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('保存签名失败', err);
|
||||
uni.showToast({
|
||||
title: '签名保存失败',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
}, this);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.page {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
/* 签名容器 */
|
||||
.sign-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - 100rpx);
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
/* 签名信息 */
|
||||
.sign-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 30rpx;
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
margin-bottom: 30rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 32rpx;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 32rpx;
|
||||
color: #4a90e2;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 画布包裹层 */
|
||||
.canvas-wrapper {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 20rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* 签名画布 */
|
||||
.sign-canvas {
|
||||
width: 100%;
|
||||
height: 800rpx;
|
||||
border: 2px dashed #d0dbe6;
|
||||
border-radius: 16rpx;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
/* 按钮容器 */
|
||||
.btn-container {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 30rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 清除按钮 */
|
||||
.clear-btn {
|
||||
flex: 1;
|
||||
margin-right: 20rpx;
|
||||
background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
|
||||
color: #666;
|
||||
border: none;
|
||||
border-radius: 24rpx;
|
||||
padding: 28rpx 0;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.clear-btn::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* 确认按钮 */
|
||||
.confirm-btn {
|
||||
flex: 1;
|
||||
margin-left: 20rpx;
|
||||
background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 24rpx;
|
||||
padding: 28rpx 0;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 6rpx 24rpx rgba(74, 144, 226, 0.35);
|
||||
}
|
||||
|
||||
.confirm-btn::after {
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user