yangjl/sh-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

防腐

Browse Source
This commit is contained in:
杨家亮
2026-07-02 19:36:49 +08:00
parent bc80e297d5
commit cc4b55ed8e
13 changed files with 1327 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/nbd-anti-record.vue
+359
View File
@@ -0,0 +1,359 @@
<template>
<view class="anti-record">
<!-- 加载中 -->
<view v-if="loading" class="anti-record__loading">
<text class="anti-record__loading-text">加载中...</text>
</view>
<!-- 无记录 -->
<view v-else-if="!loading && list.length === 0" class="anti-record__empty">
<text class="anti-record__empty-text">暂无防腐记录</text>
</view>
<!-- 有记录 -->
<template v-else>
<view class="anti-record__section">
<view class="anti-record__header">
<view class="anti-record__bar"></view>
<text class="anti-record__title">防腐记录</text>
<text
v-if="list.length > 1"
class="anti-record__more"
@click="showPopup = true"
>查看全部({{ list.length }})</text>
</view>
<!-- 最新一条记录 -->
<view class="anti-record__card" v-if="latest">
<view class="anti-record__row">
<text class="anti-record__label">检查结果</text>
<view class="anti-record__tag" :class="latest.CheckResult === '合格' ? 'anti-record__tag--pass' : 'anti-record__tag--fail'">
<text class="anti-record__tag-icon">{{ latest.CheckResult === '合格' ? '\u2713' : '\u2717' }}</text>
<text class="anti-record__tag-text">{{ latest.CheckResult || '--' }}</text>
</view>
</view>
<view class="anti-record__row">
<text class="anti-record__label">防腐等级</text>
<text class="anti-record__value">{{ latest.AnticorrosionLevel || '--' }}</text>
</view>
<view class="anti-record__row">
<text class="anti-record__label">检查时间</text>
<text class="anti-record__value">{{ latest.CheckTime || '--' }}</text>
</view>
<view v-if="latest.CheckResult === '不合格' && latest.UnqualifiedReason" class="anti-record__row anti-record__row--stack">
<text class="anti-record__label">不合格原因</text>
<text class="anti-record__value anti-record__value--fail">{{ latest.UnqualifiedReason }}</text>
</view>
</view>
</view>
<!-- 弹窗：全部记录 -->
<view class="anti-record__overlay" v-if="showPopup" @click="showPopup = false">
<view class="anti-record__popup" @click.stop>
<view class="anti-record__popup-hd">
<text class="anti-record__popup-title">全部防腐记录</text>
<text class="anti-record__popup-close" @click="showPopup = false">✕</text>
</view>
<scroll-view class="anti-record__popup-bd" scroll-y>
<view
v-for="(item, index) in list"
:key="index"
class="anti-record__card anti-record__card--popup"
:class="item.CheckResult === '合格' ? 'anti-record__card--pass' : 'anti-record__card--fail'"
>
<view class="anti-record__row">
<text class="anti-record__label">检查结果</text>
<view class="anti-record__tag" :class="item.CheckResult === '合格' ? 'anti-record__tag--pass' : 'anti-record__tag--fail'">
<text class="anti-record__tag-icon">{{ item.CheckResult === '合格' ? '\u2713' : '\u2717' }}</text>
<text class="anti-record__tag-text">{{ item.CheckResult || '--' }}</text>
</view>
</view>
<view class="anti-record__row">
<text class="anti-record__label">防腐等级</text>
<text class="anti-record__value">{{ item.AnticorrosionLevel || '--' }}</text>
</view>
<view class="anti-record__row">
<text class="anti-record__label">检查时间</text>
<text class="anti-record__value">{{ item.CheckTime || '--' }}</text>
</view>
<view v-if="item.CheckResult === '不合格' && item.UnqualifiedReason" class="anti-record__row anti-record__row--stack">
<text class="anti-record__label">不合格原因</text>
<text class="anti-record__value anti-record__value--fail">{{ item.UnqualifiedReason }}</text>
</view>
</view>
</scroll-view>
</view>
</view>
</template>
</view>
</template>
<script setup>
import { ref, computed, watch } from 'vue'
import { reqGetAntiCorrosionCheck } from '@/api/hj.js'
const props = defineProps({
params: { type: Object, default: () => ({}) }
})
const list = ref([])
const loading = ref(false)
const showPopup = ref(false)
const latest = computed(() => list.value[0] || null)
const fetchRecords = async () => {
const { materialCode, projectId } = props.params
if (!materialCode || !projectId) return
loading.value = true
try {
const res = await reqGetAntiCorrosionCheck(props.params)
if (res.code === 1 && res.data) {
list.value = res.data
}
} catch (err) {
console.error('获取防腐记录失败:', err)
} finally {
loading.value = false
}
}
const materialCode = computed(() => props.params?.materialCode)
const projectId = computed(() => props.params?.projectId)
watch([materialCode, projectId], fetchRecords, { immediate: true })
</script>
<style lang="scss" scoped>
$primary: #2979ff;
$bg: #f4f2ee;
$card-bg: #fff;
$card-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.06);
$text: #1a1a2e;
$text-secondary: #8e99a4;
.anti-record {
&__loading,
&__empty {
padding: 40rpx 24rpx;
text-align: center;
}
&__loading-text,
&__empty-text {
font-size: 26rpx;
color: $text-secondary;
}
&__section {
margin: 0 24rpx 20rpx;
}
&__header {
display: flex;
align-items: center;
margin-bottom: 12rpx;
}
&__bar {
width: 6rpx;
height: 32rpx;
border-radius: 3rpx;
background: $primary;
margin-right: 14rpx;
}
&__title {
font-size: 30rpx;
font-weight: 700;
color: $text;
flex: 1;
}
&__more {
font-size: 24rpx;
color: $primary;
padding: 6rpx 16rpx;
background: rgba($primary, 0.08);
border-radius: 20rpx;
}
&__card {
position: relative;
box-sizing: border-box;
width: 100%;
background: $card-bg;
border-radius: 12rpx;
padding: 20rpx;
box-shadow: $card-shadow;
overflow: hidden;
&::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 6rpx;
transition: background 0.3s;
}
&--pass::before {
background: #22c55e;
}
&--fail::before {
background: #ef4444;
}
}
&__row {
display: flex;
align-items: center;
padding: 8rpx 0;
& + & {
border-top: 1rpx solid #f0f0f0;
}
&--stack {
flex-direction: column;
align-items: flex-start;
.anti-record__value {
margin-top: 8rpx;
width: 100%;
}
}
}
&__label {
font-size: 26rpx;
color: $text-secondary;
flex-shrink: 0;
margin-right: 24rpx;
width: 140rpx;
}
&__value {
font-size: 26rpx;
color: $text;
flex: 1;
text-align: left;
&--fail {
color: #dc2626;
font-size: 24rpx;
}
}
&__tag {
display: inline-flex;
align-items: center;
gap: 6rpx;
padding: 6rpx 16rpx;
border-radius: 8rpx;
min-width: 100rpx;
justify-content: center;
&--pass {
background: #ebf9f0;
}
&--fail {
background: #fef2f2;
}
&-icon {
font-size: 22rpx;
font-weight: 700;
}
&--pass &-icon {
color: #22c55e;
}
&--fail &-icon {
color: #ef4444;
}
&-text {
font-size: 24rpx;
font-weight: 600;
}
&--pass &-text {
color: #16a34a;
}
&--fail &-text {
color: #dc2626;
}
}
// ===== 弹窗 =====
&__overlay {
position: fixed;
inset: 0;
z-index: 999;
background: rgba(0, 0, 0, 0.45);
display: flex;
align-items: flex-end;
justify-content: center;
}
&__popup {
width: 100%;
height: 70vh;
background: #fff;
border-radius: 24rpx 24rpx 0 0;
display: flex;
flex-direction: column;
animation: slideUp 0.3s ease-out;
}
&__popup-hd {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24rpx 28rpx 12rpx;
border-bottom: 1rpx solid #f0f0f0;
}
&__popup-title {
font-size: 30rpx;
font-weight: 700;
color: $text;
}
&__popup-close {
font-size: 32rpx;
color: $text-secondary;
padding: 8rpx;
}
&__popup-bd {
flex: 1;
box-sizing: border-box;
overflow-y: auto;
background: #f5f5f5;
padding: 12rpx 28rpx 36rpx;
}
&__card--popup {
box-sizing: border-box;
width: 100%;
margin-bottom: 12rpx;
box-shadow: $card-shadow;
}
&__card--popup:last-child {
margin-bottom: 0;
}
}
@keyframes slideUp {
0% { transform: translateY(100%); }
100% { transform: translateY(0); }
}
</style>
components/nbd-check-btn.vue
+118
View File
@@ -0,0 +1,118 @@
<template>
<view class="check-seg">
<view
class="check-seg__item"
:class="{ 'check-seg__item--active': isPass, 'is-active-anim': isPass && animKey === 'pass' }"
@click="select(passKey)"
>
<text class="check-seg__icon">{{ '\u2713' }}</text>
<text class="check-seg__text">{{ passText }}</text>
</view>
<view
class="check-seg__item"
:class="{ 'check-seg__item--active': isFail, 'is-active-anim': isFail && animKey === 'fail' }"
@click="select(failKey)"
>
<text class="check-seg__icon">{{ '\u2717' }}</text>
<text class="check-seg__text">{{ failText }}</text>
</view>
</view>
</template>
<script setup>
import { computed, ref, watch, nextTick } from 'vue'
const props = defineProps({
modelValue: { type: [Boolean, Object], default: null },
passKey: { type: String, default: 'pass' },
failKey: { type: String, default: 'fail' },
passText: { type: String, default: '通过' },
failText: { type: String, default: '不通过' }
})
const emit = defineEmits(['update:modelValue'])
const isPass = computed(() => props.modelValue === props.passKey)
const isFail = computed(() => props.modelValue === props.failKey)
const animKey = ref('')
watch(() => props.modelValue, async () => {
animKey.value = ''
await nextTick()
animKey.value = isPass.value ? 'pass' : 'fail'
})
const select = (key) => {
emit('update:modelValue', key)
}
</script>
<style lang="scss" scoped>
.check-seg {
display: inline-flex;
border-radius: 12rpx;
overflow: hidden;
border: 1rpx solid #e5e7eb;
&__item {
display: flex;
align-items: center;
gap: 6rpx;
padding: 12rpx 24rpx;
transition: all 0.25s ease;
background: #f9fafb;
&:first-child {
border-right: 1rpx solid #e5e7eb;
}
&:active {
transform: scale(0.96);
}
&--active {
background: #ebf9f0;
.check-seg__icon { color: #22c55e; }
.check-seg__text { color: #16a34a; font-weight: 600; }
&:first-child {
border-right-color: #b7ebc6;
}
}
&--active:not(:first-child) {
background: #fef2f2;
.check-seg__icon { color: #ef4444; }
.check-seg__text { color: #dc2626; font-weight: 600; }
}
}
&__icon {
font-size: 24rpx;
color: #9ca3af;
font-weight: 700;
transition: color 0.25s ease;
}
&__text {
font-size: 24rpx;
color: #6b7280;
font-weight: 500;
transition: color 0.25s ease;
}
}
// ===== 激活动画（双选分段） =====
@keyframes popIn {
0% { transform: scale(0.5); opacity: 0; }
60% { transform: scale(1.15); }
100% { transform: scale(1); opacity: 1; }
}
.check-seg__item.is-active-anim .check-seg__icon {
animation: popIn 0.3s ease-out;
}
</style>
components/nbd-submit-bar.vue
+91
View File
@@ -0,0 +1,91 @@
<template>
<view class="submit-bar">
<view
class="submit-btn"
:class="{ 'submit-btn--loading': loading }"
:style="btnStyle"
@click="handleClick"
>
<text v-if="icon" class="submit-btn__icon">{{ icon }}</text>
<text class="submit-btn__text">{{ loading ? '提交中...' : text }}</text>
</view>
</view>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
text: { type: String, default: '提交' },
icon: { type: String, default: '' },
color: { type: String, default: '#2979ff' },
loading: { type: Boolean, default: false }
})
const emit = defineEmits(['click'])
const lighten = (hex, amount = 0.25) => {
const c = hex.replace('#', '')
const r = Math.round(parseInt(c.substring(0, 2), 16) * (1 - amount) + 255 * amount)
const g = Math.round(parseInt(c.substring(2, 4), 16) * (1 - amount) + 255 * amount)
const b = Math.round(parseInt(c.substring(4, 6), 16) * (1 - amount) + 255 * amount)
return `rgb(${r},${g},${b})`
}
const btnStyle = computed(() => ({
background: `linear-gradient(135deg, ${props.color}, ${lighten(props.color)})`,
boxShadow: `0 6rpx 24rpx ${props.color}4d`
}))
const handleClick = () => {
if (!props.loading) emit('click')
}
</script>
<style lang="scss" scoped>
$primary: #2979ff;
$bg: #f4f2ee;
.submit-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
padding: 20rpx 24rpx;
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
background: linear-gradient(180deg, rgba($bg, 0) 0%, $bg 20%);
}
.submit-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 24rpx;
border-radius: 14rpx;
transition: opacity 0.2s ease, transform 0.2s ease;
&:active {
opacity: 0.9;
transform: scale(0.98);
}
&--loading {
opacity: 0.7;
pointer-events: none;
}
&__icon {
font-size: 30rpx;
color: #fff;
margin-right: 10rpx;
}
&__text {
font-size: 30rpx;
font-weight: 600;
color: #fff;
letter-spacing: 2rpx;
}
}
</style>