|
|
|
|
@ -1,61 +1,67 @@ |
|
|
|
|
<template> |
|
|
|
|
<view class="custom-content"> |
|
|
|
|
<uni-nav-bar dark left-icon="left" @clickLeft="back" :fixed="true" :border="false" background-color="#3E73F5" |
|
|
|
|
status-bar title="安全检查" /> |
|
|
|
|
|
|
|
|
|
<!-- 表单内容 --> |
|
|
|
|
<view class="form-section"> |
|
|
|
|
<view class="form-item required"> |
|
|
|
|
<text class="label">企业名称</text> |
|
|
|
|
<input class="input" placeholder="请输入企业名称" /> |
|
|
|
|
<view class="custom-content"> |
|
|
|
|
<uni-nav-bar :fontSizes="17" dark left-icon="left" @clickLeft="back" :fixed="true" :border="false" background-color="#3E73F5" |
|
|
|
|
status-bar title="安全检查" /> |
|
|
|
|
|
|
|
|
|
<!-- 表单内容 --> |
|
|
|
|
<view class="form-section"> |
|
|
|
|
<view class="form-item required"> |
|
|
|
|
<text class="label">企业名称</text> |
|
|
|
|
<view class="icon-btn-box"> |
|
|
|
|
<view class="icon-box"> |
|
|
|
|
<image :src="require('./image/shaixuan@2x.png')" /> |
|
|
|
|
</view> |
|
|
|
|
<view class="icon-box"> |
|
|
|
|
<image :src="require('./image/add@2x.png')" /> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
<view class="form-item required"> |
|
|
|
|
<text class="label">检查类型</text> |
|
|
|
|
<picker class="picker" :range="checkTypeList" @change="onCheckTypeChange"> |
|
|
|
|
<view class="picker-value">{{ checkTypeList[checkTypeIndex] || '请选择检查类型' }}</view> |
|
|
|
|
</picker> |
|
|
|
|
</view> |
|
|
|
|
<view class="form-item required"> |
|
|
|
|
<text class="label">检查类型</text> |
|
|
|
|
<picker class="picker" :range="checkTypeList" @change="onCheckTypeChange"> |
|
|
|
|
<view class="picker-value">{{ checkTypeList[checkTypeIndex] || '请选择检查类型' }}</view> |
|
|
|
|
</picker> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
<view class="form-item"> |
|
|
|
|
<text class="label">检查日期</text> |
|
|
|
|
<picker mode="date" :value="checkDate" @change="onDateChange"> |
|
|
|
|
<view class="picker-value">{{ checkDate }}</view> |
|
|
|
|
</picker> |
|
|
|
|
</view> |
|
|
|
|
<view class="form-item"> |
|
|
|
|
<text class="label">检查日期</text> |
|
|
|
|
<picker mode="date" :value="checkDate" @change="onDateChange"> |
|
|
|
|
<view class="picker-value">{{ checkDate }}</view> |
|
|
|
|
</picker> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
<view class="form-item"> |
|
|
|
|
<text class="label">此检查是否属于某项目</text> |
|
|
|
|
<view class="radio-group"> |
|
|
|
|
<label class="radio" v-for="(item, idx) in yesNoList" :key="idx"> |
|
|
|
|
<radio :value="item" :checked="projectChecked === item" @click="projectChecked = item" /> |
|
|
|
|
<text :class="['radio-text', { checked: projectChecked === item }]">{{ item }}</text> |
|
|
|
|
</label> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="form-item"> |
|
|
|
|
<text class="label">此检查是否属于某项目</text> |
|
|
|
|
<radio-group :value="projectChecked" @change="onProjectCheckedChange" class="radio-group"> |
|
|
|
|
<label class="radio" v-for="(item, idx) in yesNoList" :key="idx"> |
|
|
|
|
<radio class="custom-radio" :value="item" :checked="projectChecked === item" /> |
|
|
|
|
<text :class="['radio-text', { checked: projectChecked === item }]">{{ item }}</text> |
|
|
|
|
</label> |
|
|
|
|
</radio-group> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
<view class="form-item"> |
|
|
|
|
<text class="label">现场照片</text> |
|
|
|
|
<view class="photo-upload"> |
|
|
|
|
<view class="photo-placeholder">上传图片</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="form-item"> |
|
|
|
|
<text class="label">现场照片</text> |
|
|
|
|
<view class="photo-upload"> |
|
|
|
|
<view class="photo-placeholder">上传图片</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
<view class="form-item"> |
|
|
|
|
<text class="label">检查方式</text> |
|
|
|
|
<view class="check-type-btns"> |
|
|
|
|
<button v-for="(item, idx) in checkWayList" :key="idx" |
|
|
|
|
:class="['check-btn', { active: checkWay === item }]" @click="checkWay = item">{{ item |
|
|
|
|
}}</button> |
|
|
|
|
</view> |
|
|
|
|
<view class="form-item"> |
|
|
|
|
<text class="label">检查方式</text> |
|
|
|
|
<view class="check-type-btns"> |
|
|
|
|
<button v-for="(item, idx) in checkWayList" :key="idx" |
|
|
|
|
:class="['check-btn', { active: checkWay === item }]" @click="checkWay = item">{{ item |
|
|
|
|
}}</button> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- tab切换 --> |
|
|
|
|
<view class="tab-section"> |
|
|
|
|
<view class="tab-section" v-show="checkWay === '自行新增'"> |
|
|
|
|
<view class="tab-header"> |
|
|
|
|
<view v-for="(item, idx) in tabList" :key="idx" :class="['tab-item', { active: tabActive === idx }]" |
|
|
|
|
@click="tabActive = idx">{{ item }}</view> |
|
|
|
|
自行新增 |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
<view class="tab-content"> |
|
|
|
|
@ -88,20 +94,32 @@ |
|
|
|
|
|
|
|
|
|
<!-- 操作按钮组 --> |
|
|
|
|
<view class="action-btns"> |
|
|
|
|
<button class="action-btn">+ 继续添加</button> |
|
|
|
|
<button class="action-btn">编辑</button> |
|
|
|
|
<button class="action-btn">复制</button> |
|
|
|
|
<button class="action-btn">删除</button> |
|
|
|
|
<button class="action-btn"> |
|
|
|
|
<image :src="require('./image/addcircle@2x.png')" /> |
|
|
|
|
继续添加 |
|
|
|
|
</button> |
|
|
|
|
<button class="action-btn"> |
|
|
|
|
<image :src="require('./image/edit@2x.png')" /> |
|
|
|
|
编辑 |
|
|
|
|
</button> |
|
|
|
|
<button class="action-btn"> |
|
|
|
|
<image :src="require('./image/copy@2x.png')" /> |
|
|
|
|
复制 |
|
|
|
|
</button> |
|
|
|
|
<button class="action-btn"> |
|
|
|
|
<image :src="require('./image/delete@2x.png')" /> |
|
|
|
|
删除 |
|
|
|
|
</button> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
<!-- 底部操作栏 --> |
|
|
|
|
<view class="footer-bar"> |
|
|
|
|
<button class="footer-btn cancel">取消</button> |
|
|
|
|
<button class="footer-btn save">保存</button> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<!-- 底部操作栏 --> |
|
|
|
|
<view class="footer-bar"> |
|
|
|
|
<button class="footer-btn cancel">取消</button> |
|
|
|
|
<button class="footer-btn save">保存</button> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
@ -128,7 +146,10 @@ export default { |
|
|
|
|
}, |
|
|
|
|
onDateChange(e) { |
|
|
|
|
this.checkDate = e.detail.value |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
onProjectCheckedChange(e) { |
|
|
|
|
this.projectChecked = e.detail.value |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</script> |
|
|
|
|
@ -145,19 +166,42 @@ export default { |
|
|
|
|
border-radius: 16rpx; |
|
|
|
|
margin: 24rpx 0; |
|
|
|
|
padding: 24rpx; |
|
|
|
|
padding-bottom: 185rpx; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.form-item { |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
margin-bottom: 32rpx; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
|
|
|
|
|
.label { |
|
|
|
|
width: 180rpx; |
|
|
|
|
// width: 180rpx; |
|
|
|
|
color: #222; |
|
|
|
|
font-size: 30rpx; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.icon-btn-box { |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
.icon-box { |
|
|
|
|
width: 64rpx; |
|
|
|
|
height: 56rpx; |
|
|
|
|
background: #E8EFFF; |
|
|
|
|
border-radius: 16rpx; |
|
|
|
|
margin-right: 10rpx; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
justify-content: center; |
|
|
|
|
|
|
|
|
|
image { |
|
|
|
|
width: 24rpx; |
|
|
|
|
height: 24rpx; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.input, |
|
|
|
|
.picker-value, |
|
|
|
|
.textarea { |
|
|
|
|
@ -167,6 +211,7 @@ export default { |
|
|
|
|
padding: 16rpx; |
|
|
|
|
font-size: 28rpx; |
|
|
|
|
border: none; |
|
|
|
|
min-height: 70rpx; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.picker-value { |
|
|
|
|
@ -174,12 +219,11 @@ export default { |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.textarea { |
|
|
|
|
min-height: 80rpx; |
|
|
|
|
min-height: 70rpx; |
|
|
|
|
resize: none; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.photo-upload { |
|
|
|
|
flex: 1; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
@ -192,7 +236,7 @@ export default { |
|
|
|
|
align-items: center; |
|
|
|
|
justify-content: center; |
|
|
|
|
color: #3E73F5; |
|
|
|
|
font-size: 28rpx; |
|
|
|
|
font-size: 24rpx; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -225,11 +269,11 @@ export default { |
|
|
|
|
|
|
|
|
|
.check-type-btns { |
|
|
|
|
display: flex; |
|
|
|
|
gap: 16rpx; |
|
|
|
|
gap: 12rpx; |
|
|
|
|
|
|
|
|
|
.check-btn { |
|
|
|
|
padding: 8rpx 32rpx; |
|
|
|
|
border-radius: 32rpx; |
|
|
|
|
padding: 0 14rpx; |
|
|
|
|
border-radius: 8rpx; |
|
|
|
|
background: #f7f8fa; |
|
|
|
|
color: #3E73F5; |
|
|
|
|
border: none; |
|
|
|
|
@ -245,13 +289,35 @@ export default { |
|
|
|
|
.tab-section { |
|
|
|
|
background: #fff; |
|
|
|
|
border-radius: 16rpx; |
|
|
|
|
margin: 24rpx 0; |
|
|
|
|
padding: 24rpx; |
|
|
|
|
padding: 20rpx; |
|
|
|
|
border: solid 1rpx #f1f1f1; |
|
|
|
|
|
|
|
|
|
.tab-header { |
|
|
|
|
display: flex; |
|
|
|
|
border-bottom: 2rpx solid #e5e5e5; |
|
|
|
|
margin-bottom: 24rpx; |
|
|
|
|
position: relative; |
|
|
|
|
padding-bottom: 20rpx; |
|
|
|
|
padding-left: 20rpx; |
|
|
|
|
|
|
|
|
|
&::before { |
|
|
|
|
content: ""; |
|
|
|
|
position: absolute; |
|
|
|
|
left: 0; |
|
|
|
|
top: 10%; |
|
|
|
|
width: 8rpx; |
|
|
|
|
height: 30rpx; |
|
|
|
|
background: linear-gradient(180deg, #3E73F5 0%, rgba(62, 115, 245, 0) 100%); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&::after { |
|
|
|
|
content: ""; |
|
|
|
|
position: absolute; |
|
|
|
|
bottom: 0; |
|
|
|
|
left: 0; |
|
|
|
|
width: 100%; |
|
|
|
|
height: 1rpx; |
|
|
|
|
background: linear-gradient(90deg, #3E73F5 0%, rgba(62, 115, 245, 0) 100%); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.tab-item { |
|
|
|
|
padding: 16rpx 32rpx; |
|
|
|
|
@ -280,15 +346,31 @@ export default { |
|
|
|
|
.action-btns { |
|
|
|
|
display: flex; |
|
|
|
|
gap: 16rpx; |
|
|
|
|
margin-bottom: 24rpx; |
|
|
|
|
|
|
|
|
|
.action-btn { |
|
|
|
|
background: #f7f8fa; |
|
|
|
|
color: #3E73F5; |
|
|
|
|
border-radius: 32rpx; |
|
|
|
|
padding: 8rpx 24rpx; |
|
|
|
|
background: #F7F8FB; |
|
|
|
|
color: #1B1B1B; |
|
|
|
|
border-radius: 12rpx; |
|
|
|
|
padding: 0 24rpx; |
|
|
|
|
font-size: 26rpx; |
|
|
|
|
border: none; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
image { |
|
|
|
|
width: 24rpx; |
|
|
|
|
height: 24rpx; |
|
|
|
|
margin-right: 9rpx; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.form-item { |
|
|
|
|
flex-direction: column; |
|
|
|
|
align-items: inherit; |
|
|
|
|
|
|
|
|
|
.label { |
|
|
|
|
margin-bottom: 20rpx; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
@ -303,6 +385,7 @@ export default { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
padding: 24rpx 48rpx; |
|
|
|
|
padding-bottom: 70rpx; |
|
|
|
|
box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.04); |
|
|
|
|
|
|
|
|
|
.footer-btn { |
|
|
|
|
@ -310,7 +393,7 @@ export default { |
|
|
|
|
margin: 0 16rpx; |
|
|
|
|
border-radius: 48rpx; |
|
|
|
|
font-size: 32rpx; |
|
|
|
|
padding: 24rpx 0; |
|
|
|
|
padding: 6rpx 0; |
|
|
|
|
border: none; |
|
|
|
|
|
|
|
|
|
&.cancel { |
|
|
|
|
@ -347,18 +430,6 @@ export default { |
|
|
|
|
border-bottom: 4rpx solid #3E73F5; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.footer-bar { |
|
|
|
|
position: fixed; |
|
|
|
|
bottom: 0; |
|
|
|
|
left: 0; |
|
|
|
|
right: 0; |
|
|
|
|
background: #fff; |
|
|
|
|
padding: 20rpx 40rpx; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.05); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.footer-btn { |
|
|
|
|
flex: 1; |
|
|
|
|
font-size: 30rpx; |
|
|
|
|
@ -376,4 +447,24 @@ export default { |
|
|
|
|
background: #3E73F5; |
|
|
|
|
color: white; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
::v-deep .custom-radio .wx-radio-input { |
|
|
|
|
border-color: #ccc !important; |
|
|
|
|
/* 未选中时边框颜色 */ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
::v-deep .custom-radio .wx-radio-input.wx-radio-input-checked { |
|
|
|
|
background: #3E73F5 !important; |
|
|
|
|
/* 选中时背景色 */ |
|
|
|
|
border-color: #3E73F5 !important; |
|
|
|
|
/* 选中时边框颜色 */ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
::v-deep .custom-radio .wx-radio-input.wx-radio-input-checked::before { |
|
|
|
|
color: transparent !important; |
|
|
|
|
/* 隐藏默认图标 */ |
|
|
|
|
content: "" !important; |
|
|
|
|
/* 清除默认内容 */ |
|
|
|
|
} |
|
|
|
|
</style> |
