This commit is contained in:
李彪 2025-04-10 16:49:48 +08:00
commit 6e79d1658d
4 changed files with 212 additions and 70 deletions

View File

@ -74,7 +74,11 @@
<view class="success-box">
<view class="box-content">
<view class="logo">
<image style="width: 100%; height: 100%; " src="/static/images/msg-success.png" alt="" /></image>
<image
style="width: 100%; height: 100%"
src="/static/images/msg-success.png"
alt=""
/>
</view>
<view class="content-title">刷卡成功</view>
<view class="btn-box">
@ -89,9 +93,15 @@
<view class="error-box">
<view class="box-content">
<view class="logo">
<image style="width: 100%; height: 100%; " src="/static/images/msg-error.png" alt="" /></image>
<image
style="width: 100%; height: 100%"
src="/static/images/msg-error.png"
alt=""
/>
</view>
<view class="content-title">
NFC卡异常或丢失可尝试重新刷卡或提交卡片异常信息
</view>
<view class="content-title">刷卡失败</view>
<view class="btn-box">
<view class="btn-cancel" @click="errorShow = false">暂不</view>
<view class="btn-success" @click="exceptionReportFn">异常上报</view>
@ -191,7 +201,7 @@ export default {
//
uploadFn() {
console.log("%c%s", "color:red", "上传图片");
//
this.successShow = false;
uni.navigateTo({
@ -388,14 +398,14 @@ export default {
background: linear-gradient(to bottom, #a7dafc, white 60%, white);
border-radius: 30rpx;
// border:1px solid red;
position:relative;
.logo{
position:absolute;
top:-50rpx;
left:50%;
transform:translateX(-50%);
width:200rpx;
height:200rpx;
position: relative;
.logo {
position: absolute;
top: -50rpx;
left: 50%;
transform: translateX(-50%);
width: 200rpx;
height: 200rpx;
}
.content-title {
position: absolute;
@ -444,25 +454,27 @@ export default {
.box-content {
height: 450rpx;
background-color: #ffffff;
background: linear-gradient(to bottom, #FFEDDF, white 60%, white);
border-radius:30rpx;
background: linear-gradient(to bottom, #ffeddf, white 60%, white);
border-radius: 30rpx;
// border:1px solid red;
position:relative;
.logo{
position:absolute;
top:-50rpx;
left:50%;
transform:translateX(-50%);
width:200rpx;
height:200rpx;
position: relative;
.logo {
position: absolute;
top: -50rpx;
left: 50%;
transform: translateX(-50%);
width: 200rpx;
height: 200rpx;
// background-color:red;
}
.content-title {
position: absolute;
top: 40%;
width: 100%;
left: 50%;
transform: translateX(-50%);
width: 80%;
color: black;
font-size: 40rpx;
font-size: 32rpx;
text-align: center;
}
.btn-box {
@ -482,16 +494,16 @@ export default {
font-size: 30rpx;
color: #32353b;
}
.btn-success{
width:200rpx;
height:70rpx;
background-color:#F76590;
border-radius:50rpx;
display:flex;
align-items:center;
justify-content:center;
font-size:30rpx;
color:white;
.btn-success {
width: 200rpx;
height: 70rpx;
background-color: #f76590;
border-radius: 50rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 30rpx;
color: white;
}
}
}

View File

@ -2,29 +2,58 @@
<view class="content">
<view class="top">
<u-cell-group>
<u-cell-item :arrow="false" title="保洁人员" value="小饼"></u-cell-item>
<u-cell-item
:arrow="false"
title="保洁人员"
:value="baseInfo.cleaner"
:title-style="{
color: '#303133',
fontSize: '32rpx',
}"
:value-style="{
color: '#303133',
fontSize: '32rpx',
}"
></u-cell-item>
<u-cell-item
:arrow="false"
title="上报时间"
value="2025.4.1"
:value="baseInfo.reportTime"
: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="title">保洁区域</view> -->
<view class="bottom">
<u-form :model="form" :rules="rules" ref="uForm" label-width="200">
<u-form
:model="form"
:rules="rules"
ref="uForm"
label-width="200"
:label-style="{ fontSize: '32rpx' }"
>
<!-- 区域选择多选 -->
<u-form-item label="东大门操场" prop="areas" required>
<u-input v-model="form.cleaner" placeholder="请输入故障" />
<u-form-item :label="baseInfo.area" 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="notes" label-position="top">
<u-input
v-model="form.notes"
placeholder="请输入备注信息"
placeholder="请对故障进行描述"
autoHeight
maxlength="200"
count
@ -33,41 +62,60 @@
</u-form-item>
<!-- 图片上传 -->
<u-form-item
label="现场照片"
prop="images"
required
label-position="top"
>
<u-upload
<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>
></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 @click="submitForm" style="margin-top: 40rpx" type="primary"
<u-button
shape="circle"
type="primary"
style="margin-top: 40rpx"
@click="submitForm"
>保存</u-button
>
</view>
</template>
<script>
import { ReportingNFCDanger } from "@/api/apiList";
export default {
data() {
return {
baseInfo: {
cleaner: "小饼", //
reportTime: "2025.4.1", //
area: "东大门操场", //
},
form: {
cleaner: "", //
reportTime: "", //
areas: [], //
notes: "", //
images: [], //
url: "", //
},
areaOptions: [
{ label: "东大门操场", value: "east_gate" },
@ -97,7 +145,7 @@ export default {
trigger: ["change"],
},
],
images: [
url: [
{
type: "array",
min: 1,
@ -122,37 +170,119 @@ export default {
this.form.images.splice(index, 1);
},
//
submitForm() {
this.$refs.uForm.validate().then((valid) => {
if (valid) {
uni.showToast({
title: "提交成功",
icon: "success",
});
//
}
//
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 submitForm() {
if (!this.form.url) {
uni.showToast({ title: "请上传图片", icon: "none" });
return;
}
console.log(this.form);
return;
const res = await ReportingNFCDanger({
...this.form,
//
id: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
userId: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
reportingTime: "2025-04-10T08:02:40.917Z",
note: "string",
url: "string",
planInfoId: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
});
if (res.succeed) {
console.log(res);
uni.showToast({ title: "上报成功", icon: "success" });
}
},
},
};
</script>
<style lang="scss" scoped>
page {
background-color: #f3f5fa;
}
.content {
height: auto;
min-height: 100vh;
// min-height: 100vh;
padding: 24rpx 32rpx;
background-color: #f3f5fa;
.bottom,
.top {
background: #ffffff;
border-radius: 22rpx;
padding: 0rpx 32rpx;
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;

View File

@ -121,7 +121,7 @@ export default {
planList: [],
};
},
created() {
onShow() {
this.getPlanList();
},
methods: {

View File

@ -281,7 +281,7 @@ page {
top: -10rpx;
width: 36rpx;
height: 36rpx;
background: #6d6d6d;
background: rgba(110, 110, 110, 0.6);
border-radius: 50%;
color: white;
text-align: center;