|
|
<template>
|
|
|
<view class="app-container">
|
|
|
<u-navbar
|
|
|
leftText="返回"
|
|
|
title="现场检查录入"
|
|
|
:autoBack="true"
|
|
|
:placeholder="true"
|
|
|
/>
|
|
|
<view class="form-item">
|
|
|
<view class="form-title">
|
|
|
现场检查打卡
|
|
|
<text></text>
|
|
|
</view>
|
|
|
<view class="item-input">
|
|
|
<u-button
|
|
|
text="点击打卡"
|
|
|
size="small"
|
|
|
color="linear-gradient(90deg, #3976F1 0%, #3CA0F6 100%)"
|
|
|
:custom-style="{
|
|
|
width: '130rpx',
|
|
|
height: '65rpx',
|
|
|
margin: '0',
|
|
|
}"
|
|
|
></u-button>
|
|
|
<view class="already">
|
|
|
<u-icon
|
|
|
name="checkmark-circle-fill"
|
|
|
color="#32B78B"
|
|
|
size="28rpx"
|
|
|
></u-icon>
|
|
|
<text>已完成打卡</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="form-item">
|
|
|
<view class="form-title"><text></text>店铺名称</view>
|
|
|
<view class="nob-input view-global">
|
|
|
<u--input
|
|
|
placeholder="请输入名称"
|
|
|
border="none"
|
|
|
:customStyle="{ height: '45rpx' }"
|
|
|
v-model="value"
|
|
|
></u--input>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="form-item">
|
|
|
<view class="form-title"><text></text>发现隐患</view>
|
|
|
<view class="nob-input view-global">
|
|
|
<u--textarea
|
|
|
v-model="value"
|
|
|
placeholder="请输入内容"
|
|
|
border="none"
|
|
|
></u--textarea>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="form-item">
|
|
|
<view class="form-title"><text></text>现场照片</view>
|
|
|
<view class="upload-images nob-input view-global">
|
|
|
<view class="upload-btn">
|
|
|
<view class="upload-icon" @click="upload">
|
|
|
<u-icon
|
|
|
name="camera-fill"
|
|
|
size="50rpx"
|
|
|
color="rgb(211, 212, 214)"
|
|
|
></u-icon>
|
|
|
</view>
|
|
|
<text class="upload-text"
|
|
|
>最多可上传5个图片，支持上传jpg.png等格式文件</text
|
|
|
>
|
|
|
</view>
|
|
|
<view class="file-list">
|
|
|
<view
|
|
|
class="file-item"
|
|
|
v-for="(item, index) in fileList"
|
|
|
:key="index"
|
|
|
>
|
|
|
<view class="close-btn">
|
|
|
<u-icon name="minus-circle-fill" color="#EB5B47"></u-icon>
|
|
|
</view>
|
|
|
|
|
|
<image :src="item.url" mode="aspectFill"></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="form-item">
|
|
|
<view class="form-title"><text></text>现场录音文件</view>
|
|
|
<view class="upload-images nob-input view-global">
|
|
|
<view class="upload-btn">
|
|
|
<view class="upload-icon" @click="upload">
|
|
|
<u-icon
|
|
|
name="plus"
|
|
|
size="50rpx"
|
|
|
color="rgb(211, 212, 214)"
|
|
|
></u-icon>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="audio-list">
|
|
|
<view class="list-item" v-for="item in 3" :key="item">
|
|
|
<view class="item-name">
|
|
|
<image
|
|
|
src="/static/images/file-type.png"
|
|
|
mode=""
|
|
|
class="item-type"
|
|
|
></image>
|
|
|
asdadad.mp3
|
|
|
</view>
|
|
|
<u-icon name="minus-circle-fill" color="#EB5B47"></u-icon>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="form-item">
|
|
|
<view class="form-title"><text></text>是否发起整改</view>
|
|
|
<view class="form-radio">
|
|
|
<u-radio-group v-model="radiovalue1" placement="row">
|
|
|
<u-radio
|
|
|
:customStyle="{ marginRight: '80rpx' }"
|
|
|
v-for="(item, index) in radiolist1"
|
|
|
:key="index"
|
|
|
:label="item.name"
|
|
|
:name="item.name"
|
|
|
>
|
|
|
</u-radio>
|
|
|
</u-radio-group>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="form-item">
|
|
|
<view class="form-title"><text></text>设置整改时限</view>
|
|
|
<view
|
|
|
class="nob-input view-global"
|
|
|
style="display: flex; align-items: center"
|
|
|
>
|
|
|
<u--input
|
|
|
placeholder="请输入名称"
|
|
|
border="none"
|
|
|
:customStyle="{ height: '45rpx' }"
|
|
|
v-model="value"
|
|
|
></u--input>
|
|
|
<text style="color: #9da2ab; font-size: 28rpx">工作日</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="form-item">
|
|
|
<view class="form-title"><text></text>是否发送至主体</view>
|
|
|
<view class="form-radio">
|
|
|
<u-radio-group v-model="radiovalue1" placement="row">
|
|
|
<u-radio
|
|
|
:customStyle="{ marginRight: '80rpx' }"
|
|
|
v-for="(item, index) in radiolist1"
|
|
|
:key="index"
|
|
|
:label="item.name"
|
|
|
:name="item.name"
|
|
|
>
|
|
|
</u-radio>
|
|
|
</u-radio-group>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view v-show="false">
|
|
|
<uni-file-picker ref="files" />
|
|
|
</view>
|
|
|
|
|
|
<fixed-buttom title="提交"></fixed-buttom>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
value: null,
|
|
|
radiovalue1: "是",
|
|
|
fileList: [
|
|
|
{
|
|
|
url: "https://cdn.uviewui.com/uview/album/1.jpg",
|
|
|
},
|
|
|
{
|
|
|
url: "https://cdn.uviewui.com/uview/album/1.jpg",
|
|
|
},
|
|
|
{
|
|
|
url: "https://cdn.uviewui.com/uview/album/1.jpg",
|
|
|
},
|
|
|
{
|
|
|
url: "https://cdn.uviewui.com/uview/album/1.jpg",
|
|
|
},
|
|
|
{
|
|
|
url: "https://cdn.uviewui.com/uview/album/1.jpg",
|
|
|
},
|
|
|
],
|
|
|
radiolist1: [
|
|
|
{
|
|
|
name: "是",
|
|
|
disabled: false,
|
|
|
},
|
|
|
{
|
|
|
name: "否",
|
|
|
disabled: false,
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
upload() {
|
|
|
this.$refs.files.choose();
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.app-container {
|
|
|
.form-item {
|
|
|
.form-title {
|
|
|
position: relative;
|
|
|
font-size: 30rpx;
|
|
|
font-weight: bold;
|
|
|
color: #2e2f31;
|
|
|
margin-bottom: 20rpx;
|
|
|
}
|
|
|
|
|
|
.form-title text {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
bottom: 0;
|
|
|
height: 12rpx;
|
|
|
width: 140rpx;
|
|
|
background: url("/static/images/juxing.png");
|
|
|
background-size: cover;
|
|
|
max-width: 300rpx;
|
|
|
z-index: 0;
|
|
|
}
|
|
|
|
|
|
.item-input {
|
|
|
margin-bottom: 30rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
.already {
|
|
|
margin-left: 45rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
text {
|
|
|
margin-left: 10rpx;
|
|
|
font-size: 24rpx;
|
|
|
font-weight: 400;
|
|
|
color: #313335;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.nob-input {
|
|
|
margin-bottom: 30rpx;
|
|
|
border-radius: 16rpx;
|
|
|
background-color: #fff;
|
|
|
box-sizing: border-box;
|
|
|
padding: 25rpx;
|
|
|
}
|
|
|
|
|
|
.upload-images {
|
|
|
.upload-btn {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
.upload-icon {
|
|
|
height: 150rpx;
|
|
|
width: 150rpx;
|
|
|
background-color: #f4f5f7;
|
|
|
border-radius: 4rpx;
|
|
|
margin-right: 20rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
|
|
|
.upload-text {
|
|
|
flex: 1;
|
|
|
color: rgb(192, 196, 204);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.file-list {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-top: 40rpx;
|
|
|
|
|
|
.file-item {
|
|
|
width: calc((100% / 5) - 20rpx);
|
|
|
height: 115rpx;
|
|
|
margin-right: calc(20rpx + (20rpx / 4));
|
|
|
position: relative;
|
|
|
|
|
|
image {
|
|
|
display: inline-block;
|
|
|
height: 100%;
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
.close-btn {
|
|
|
position: absolute;
|
|
|
right: -10rpx;
|
|
|
top: -10rpx;
|
|
|
z-index: 10;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
& > .file-item:last-child {
|
|
|
margin-right: 0;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.audio-list {
|
|
|
.list-item {
|
|
|
margin-top: 20rpx;
|
|
|
width: 40%;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
|
|
|
.item-name {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
font-size: 28rpx;
|
|
|
font-weight: 400;
|
|
|
color: #2e2f31;
|
|
|
|
|
|
.item-type {
|
|
|
height: 28rpx;
|
|
|
width: 28rpx;
|
|
|
margin-right: 15rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.form-radio {
|
|
|
margin-bottom: 30rpx;
|
|
|
box-sizing: border-box;
|
|
|
padding: 0 25rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|
