335 lines
8.0 KiB
Vue
335 lines
8.0 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="top">
|
||
<u-cell-group>
|
||
<u-cell-item
|
||
:arrow="false"
|
||
title="保洁人员"
|
||
:value="dataInfo.userName"
|
||
:title-style="{
|
||
color: '#303133',
|
||
fontSize: '32rpx',
|
||
}"
|
||
:value-style="{
|
||
color: '#303133',
|
||
fontSize: '32rpx',
|
||
}"
|
||
></u-cell-item>
|
||
<u-cell-item
|
||
:arrow="false"
|
||
title="上报时间"
|
||
:value="reportingTime"
|
||
:title-style="{
|
||
color: '#303133',
|
||
fontSize: '32rpx',
|
||
}"
|
||
:value-style="{
|
||
color: '#303133',
|
||
fontSize: '32rpx',
|
||
}"
|
||
></u-cell-item>
|
||
</u-cell-group>
|
||
</view>
|
||
|
||
<!-- <view class="title">保洁区域</view> -->
|
||
|
||
<view class="bottom">
|
||
<u-form
|
||
:model="form"
|
||
:rules="rules"
|
||
ref="uForm"
|
||
label-width="400rpx"
|
||
:label-style="{ fontSize: '32rpx' }"
|
||
>
|
||
<!-- 区域选择（多选） -->
|
||
<u-form-item :label="dataInfo.name" prop="areas">
|
||
<!-- <u-input v-model="form.cleaner" placeholder="请输入故障" /> -->
|
||
<view style="width: 100%; font-size: 32rpx; text-align: right"
|
||
>NFC卡损坏</view
|
||
>
|
||
</u-form-item>
|
||
|
||
<!-- 备注（文本域） -->
|
||
<u-form-item label="备注" prop="note" label-position="top">
|
||
<u-input
|
||
v-model="form.note"
|
||
placeholder="请对故障进行描述"
|
||
autoHeight
|
||
maxlength="200"
|
||
count
|
||
type="textarea"
|
||
></u-input>
|
||
</u-form-item>
|
||
|
||
<!-- 图片上传 -->
|
||
<u-form-item label="图片" prop="images" label-position="top">
|
||
<!-- <u-upload
|
||
v-model="form.images"
|
||
:max-count="3"
|
||
:previewFullImage="true"
|
||
:multiple="true"
|
||
@afterRead="handleImageUpload"
|
||
@delete="handleImageDelete"
|
||
></u-upload> -->
|
||
<view v-if="!form.url" class="upload-box" @click="takePhoto">
|
||
<image
|
||
src="/static/images/icon-camera.png"
|
||
mode="aspectFit"
|
||
style="width: 49rpx; height: 43rpx"
|
||
/>
|
||
</view>
|
||
|
||
<view v-else class="upload-image">
|
||
<image
|
||
:src="form.url"
|
||
mode="aspectFit"
|
||
style="width: 100%; height: 100%"
|
||
/>
|
||
<view class="delete-icon" @click="handleDelete">×</view>
|
||
</view>
|
||
</u-form-item>
|
||
</u-form>
|
||
</view>
|
||
|
||
<!-- 提交按钮 -->
|
||
<u-button
|
||
shape="circle"
|
||
type="primary"
|
||
style="margin-top: 40rpx"
|
||
@click="submitForm"
|
||
>保存</u-button
|
||
>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { ReportingNFCDanger, GetPlanInfoAre, UploadFiles } from "@/api/apiList";
|
||
|
||
import { dateFormat } from "@/utils/utils";
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
reportingTime: "", // 当时时间 2025-4-14 10:00
|
||
form: {
|
||
note: "", // 备注
|
||
url: "", // 图片
|
||
},
|
||
areaOptions: [
|
||
{ label: "东大门操场", value: "east_gate" },
|
||
{ label: "西区教学楼", value: "west_building" },
|
||
{ label: "中心花园", value: "central_garden" },
|
||
],
|
||
rules: {
|
||
cleaner: [
|
||
{
|
||
required: true,
|
||
message: "请填写保洁人员",
|
||
trigger: ["blur", "change"],
|
||
},
|
||
],
|
||
reportingTime: [
|
||
{
|
||
required: true,
|
||
message: "请选择上报时间",
|
||
trigger: ["change"],
|
||
},
|
||
],
|
||
areas: [
|
||
{
|
||
type: "array",
|
||
required: true,
|
||
message: "请至少选择一个清洁区域",
|
||
trigger: ["change"],
|
||
},
|
||
],
|
||
url: [
|
||
{
|
||
type: "array",
|
||
min: 1,
|
||
required: true,
|
||
message: "请至少上传一张现场照片",
|
||
trigger: ["change"],
|
||
},
|
||
],
|
||
},
|
||
|
||
params: {},
|
||
|
||
dataInfo: {},
|
||
};
|
||
},
|
||
|
||
onLoad(options) {
|
||
console.log("options", JSON.parse(decodeURIComponent(options.params)));
|
||
this.params = JSON.parse(decodeURIComponent(options.params));
|
||
},
|
||
|
||
created() {
|
||
this.reportingTime = dateFormat(new Date(), "YYYY-MM-DD HH:mm");
|
||
this.getAreaInfo();
|
||
},
|
||
|
||
methods: {
|
||
// 图片上传处理 废弃
|
||
handleImageUpload(event) {
|
||
const files = event.file;
|
||
// 这里添加实际的上传逻辑
|
||
this.form.images.push(...files.map((file) => ({ url: file.url })));
|
||
},
|
||
|
||
// 图片删除处理 废弃
|
||
handleImageDelete(index) {
|
||
this.form.images.splice(index, 1);
|
||
},
|
||
|
||
// 拍照获取图片
|
||
takePhoto() {
|
||
uni.chooseImage({
|
||
count: 1, // 每次拍摄1张
|
||
sourceType: ["camera"], // 仅限拍照
|
||
sizeType: ["compressed"], // 压缩图片
|
||
success: async (res) => {
|
||
console.log("拍照成功", res);
|
||
this.form.url = res.tempFilePaths[0];
|
||
|
||
// this.uploadFiles(res.tempFilePaths[0]);
|
||
},
|
||
fail: (err) => {
|
||
uni.showToast({ title: "拍照失败，请重试", icon: "none" });
|
||
},
|
||
});
|
||
},
|
||
|
||
// 删除图片
|
||
handleDelete() {
|
||
this.form.url = "";
|
||
},
|
||
|
||
// 获取区域信息
|
||
async getAreaInfo() {
|
||
const res = await GetPlanInfoAre({
|
||
id: this.params.id,
|
||
});
|
||
|
||
if (res.succeed) {
|
||
this.dataInfo = res.data;
|
||
}
|
||
},
|
||
|
||
// 表单提交
|
||
async submitForm() {
|
||
if (!this.form.url) {
|
||
uni.showToast({ title: "请上传图片", icon: "none" });
|
||
return;
|
||
}
|
||
|
||
const res = await UploadFiles([this.form.url]);
|
||
if (!res.succeed) return;
|
||
|
||
const params = {
|
||
note: this.form.note,
|
||
planInfoId: this.dataInfo.planInfoId,
|
||
reportingTime: this.reportingTime.replace(" ", "T"),
|
||
userId: this.dataInfo.userId,
|
||
id: this.dataInfo.id,
|
||
url: res.data[0].path,
|
||
};
|
||
|
||
const res1 = await ReportingNFCDanger(params);
|
||
|
||
if (res1.succeed) {
|
||
const queryParams = encodeURIComponent(JSON.stringify(this.params));
|
||
uni.showModal({
|
||
title: "提示",
|
||
content: "任务已完成，快去上传图片吧",
|
||
confirmText: "去上传图片",
|
||
showCancel: false,
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
uni.navigateTo({
|
||
url: "/pages/index/uploadPhoto?params=" + queryParams,
|
||
});
|
||
}
|
||
},
|
||
});
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page {
|
||
background-color: #f3f5fa !important;
|
||
}
|
||
.content {
|
||
height: auto;
|
||
// min-height: 100vh;
|
||
padding: 24rpx 32rpx;
|
||
background-color: #f3f5fa;
|
||
|
||
.top {
|
||
background: #ffffff;
|
||
border-radius: 22rpx;
|
||
padding: 0rpx 10rpx;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.bottom {
|
||
background: #ffffff;
|
||
border-radius: 22rpx;
|
||
padding: 0rpx 40rpx;
|
||
margin-bottom: 30rpx;
|
||
padding-bottom: 30rpx;
|
||
|
||
.upload-box {
|
||
border: 1px dashed #526fa3;
|
||
width: 130rpx;
|
||
height: 130rpx;
|
||
background-color: #edf2ff;
|
||
border-radius: 16rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.upload-image {
|
||
width: 130rpx;
|
||
height: 130rpx;
|
||
border-radius: 16rpx;
|
||
|
||
position: relative;
|
||
.delete-icon {
|
||
position: absolute;
|
||
right: -10rpx;
|
||
top: -10rpx;
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
background: rgba(110, 110, 110, 0.6);
|
||
border-radius: 50%;
|
||
color: white;
|
||
text-align: center;
|
||
line-height: 36rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.title {
|
||
font-size: 38rpx;
|
||
color: #1a1a1b;
|
||
margin: 42rpx 0 32rpx 0;
|
||
font-weight: bold;
|
||
}
|
||
|
||
// 调整复选框布局
|
||
.u-checkbox-group {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 30rpx;
|
||
}
|
||
}
|
||
</style>
|