elink-star
/
epmet-apartment-work-mp
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

上传不好使 优化

wyx
wangyx 1 month ago
parent
2143c3bb4c
commit
dcb2153dd8
4 changed files with 407 additions and 402 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      pages/tabBar/sdPage/dfReport.vue
  2. 6
      pages/tabBar/sdPage/sfReport.vue
  3. 8
      pages/tabBar/xjPage/xj.vue
  4. 789
      pagesA/force/index/index.vue

6
pages/tabBar/sdPage/dfReport.vue
View File

@ -60,9 +60,9 @@
:preview-full-image="true" :preview-full-image="true"
:deletable="true" :deletable="true"
:show-upload-list="true" :show-upload-list="true"
:file-list="item.fileList" :fileList="item.fileList"
accept="image" accept="all"
@after-read="afterRead($event,index)" @afterRead="afterRead($event,index)"
@delete="onDelete($event,index)" @delete="onDelete($event,index)"
> >
<view class="custom-upload-btn"> <view class="custom-upload-btn">

6
pages/tabBar/sdPage/sfReport.vue
View File

@ -60,9 +60,9 @@
:preview-full-image="true" :preview-full-image="true"
:deletable="true" :deletable="true"
:show-upload-list="true" :show-upload-list="true"
:file-list="item.fileList" :fileList="item.fileList"
accept="image" accept="all"
@after-read="afterRead($event,index)" @afterRead="afterRead($event,index)"
@delete="onDelete($event,index)" @delete="onDelete($event,index)"
> >
<view class="custom-upload-btn"> <view class="custom-upload-btn">

8
pages/tabBar/xjPage/xj.vue
View File

@ -34,9 +34,9 @@
:preview-full-image="true" :preview-full-image="true"
:deletable="true" :deletable="true"
:show-upload-list="true" :show-upload-list="true"
:file-list="fileList" :fileList="fileList"
accept="image,video" accept="all"
@after-read="afterRead" @afterRead="afterRead"
@delete="onDelete" @delete="onDelete"
> >
<view class="custom-upload-btn"> <view class="custom-upload-btn">
@ -75,7 +75,7 @@ import {
queryDeptDropdownList, queryDeptDropdownList,
} from "@/common/rec"; } from "@/common/rec";
import { getdeptList,addInspection } from '@/common/api'; import { getdeptList,addInspection } from '@/common/api';
import { uploadImage } from '@/pages/api'; import { uploadImage } from '@/pages/api.js';
import { getDicts } from "@/common/system/dict/data"; import { getDicts } from "@/common/system/dict/data";
export default { export default {

789
pagesA/force/index/index.vue
View File

@ -1,412 +1,417 @@
<template> <template>
<view> <view>
<view class="top-bg"></view> <view class="top-bg"></view>
<view class="container"> <view class="container">
<u-form :model="form" ref="uForm" label-width="90"> <u-form :model="form" ref="uForm" label-width="90">
<view class="info-card"> <view class="info-card">
<u-form-item label="身份证号" prop="idCard"> <u-form-item prop="idCard">
<u-input <u-input v-model="form.idCard" placeholder="请输入身份证号" border="none" input-align="left"
v-model="form.idCard" suffixIcon="search" suffixIconStyle="color: #909399" @confirm="handleQuery" />
placeholder="请输入身份证号" </u-form-item>
border="none" </view>
input-align="left" <view class="cont" v-if="showInfo">
suffixIcon="search" <view class="info-card">
suffixIconStyle="color: #909399" <u-form-item label="姓名" prop="name" required>
@confirm="handleQuery" <text style="text-align: right">{{ baseInfo.graduateName }}</text>
/>
</u-form-item>
</view>
<view class="info-card"> <!-- <u-input
<u-form-item label="姓名" prop="name" required> v-model="baseInfo.graduateName"
<text style="text-align: right">{{ baseInfo.graduateName }}</text> placeholder="请输入姓名"
border="none"
input-align="right"
:disabled="true"
/> -->
</u-form-item>
<view style="border-bottom: 2rpx solid #e5e5e5; margin: 0"></view>
<u-form-item label="房间" prop="room" required>
<text style="text-align: right">{{ roomAllPath }}</text>
<!-- <u-input <!-- <u-input
v-model="baseInfo.graduateName" v-model="roomAllPath"
placeholder="请输入姓名" placeholder="请输入房间"
border="none" border="none"
input-align="right" input-align="right"
:disabled="true" :disabled="true"
/> --> /> -->
</u-form-item> </u-form-item>
<view style="border-bottom: 2rpx solid #e5e5e5; margin: 0"></view> <view style="border-bottom: 2rpx solid #e5e5e5; margin: 0"></view>
<u-form-item label="房间" prop="room" required> <u-form-item label="手机号" prop="phone" required>
<text style="text-align: right">{{ roomAllPath }}</text> <text style="text-align: right">{{ baseInfo.telephone }}</text>
<!-- <u-input <!-- <u-input
v-model="roomAllPath" v-model="baseInfo.telephone"
placeholder="请输入房间" placeholder="请输入手机号"
border="none" border="none"
input-align="right" input-align="right"
:disabled="true" :disabled="true"
/> --> /> -->
</u-form-item> </u-form-item>
<view style="border-bottom: 2rpx solid #e5e5e5; margin: 0"></view> <view style="border-bottom: 2rpx solid #e5e5e5; margin: 0"></view>
<u-form-item label="手机号" prop="phone" required> <u-form-item label="退房日期" prop="leaveDate" required @click="showDate = false">
<text style="text-align: right">{{ baseInfo.telephone }}</text> <text style="text-align: right">{{ baseInfo.checkOutTime }}</text>
<!-- <u--input
v-model="baseInfo.checkOutTime"
placeholder="请选择退房日期"
border="none"
readonly
input-align="right"
></u--input> -->
</u-form-item>
<!-- <u-form-item
label="问题类型"
prop="problemType"
required
@click="showProblemTypePicker = true"
>
<u-input
v-model="form.problemType"
placeholder="请选择问题类型"
border="none"
input-align="right"
readonly
/>
</u-form-item> -->
</view>
<view class="desc-card">
<view class="label-des">说明</view>
<u-textarea v-model="forceCheckoutDesc" ref="textarea" placeholder="请输入内容（不超过500字）"
maxlength="500" height="150" border="none"
custom-style="background:#f7f7f7;border-radius:12rpx;padding:16rpx;"></u-textarea>
<view class="label-des">上传图片/视频</view>
<u-upload accept="all" :fileList="fileList" @afterRead="afterRead" @delete="deletePic" multiple
:maxCount="10" uploadIconColor="#12c3c3" :previewImage="true">
<view class="custom-upload-btn">
<view class="icon-box">
<image class="camera-icon" src="/static/img/camera-icon.png" mode="aspectFill">
</image>
</view>
<!-- <u-input <view class="upload-tips">点击上传</view>
v-model="baseInfo.telephone" </view>
placeholder="请输入手机号" </u-upload>
border="none" </view>
input-align="right" <view class="submit-box">
:disabled="true" <u-button type="primary" shape="circle" @click="submit" :custom-style="btnStyle">提交</u-button>
/> --> </view>
</u-form-item>
<view style="border-bottom: 2rpx solid #e5e5e5; margin: 0"></view>
<u-form-item
label="退房日期"
prop="leaveDate"
required
@click="showDate = false"
>
<text style="text-align: right">{{ baseInfo.checkOutTime }}</text>
<!-- <u--input
v-model="baseInfo.checkOutTime"
placeholder="请选择退房日期"
border="none"
readonly
input-align="right"
></u--input> -->
</u-form-item>
<!-- <u-form-item
label="问题类型"
prop="problemType"
required
@click="showProblemTypePicker = true"
>
<u-input
v-model="form.problemType"
placeholder="请选择问题类型"
border="none"
input-align="right"
readonly
/>
</u-form-item> -->
</view>
<view class="desc-card">
<view class="label-des">说明</view>
<u-textarea
v-model="forceCheckoutDesc"
ref="textarea"
placeholder="请输入内容（不超过500字）"
maxlength="500"
height="150"
border="none"
custom-style="background:#f7f7f7;border-radius:12rpx;padding:16rpx;"
></u-textarea>
<view class="label-des">上传图片/视频</view>
<u-upload
accept="all"
:fileList="fileList"
@afterRead="afterRead"
@delete="deletePic"
multiple
:maxCount="10"
uploadIconColor="#12c3c3"
:previewImage="true"
>
<view class="custom-upload-btn">
<view class="icon-box">
<image
class="camera-icon"
src="/static/img/camera-icon.png"
mode="aspectFill"
></image>
</view>
<view class="upload-tips">点击上传</view> </view>
</view>
</u-upload> </u-form>
</view> <u-datetime-picker :show="showDate" v-model="form.pickerValue" mode="date" @confirm="onDateConfirm"
<view class="submit-box"> @cancel="showDate = false" />
<u-button <u-picker :show="showProblemTypePicker" :columns="[problemTypeOptions]" @confirm="onProblemTypeConfirm"
type="primary" @cancel="showProblemTypePicker = false" keyName="label" />
shape="circle" </view>
@click="submit" </view>
:custom-style="btnStyle"
>提交</u-button
>
</view>
</u-form>
<u-datetime-picker
:show="showDate"
v-model="form.pickerValue"
mode="date"
@confirm="onDateConfirm"
@cancel="showDate = false"
/>
<u-picker
:show="showProblemTypePicker"
:columns="[problemTypeOptions]"
@confirm="onProblemTypeConfirm"
@cancel="showProblemTypePicker = false"
keyName="label"
/>
</view>
</view>
</template> </template>
<script> <script>
import { uploadImage, getResidentInfo, forceRelease } from "../../../pages/api"; import {
export default { uploadImage,
data() { getResidentInfo,
return { forceRelease
btnStyle: } from "../../../pages/api";
"background:linear-gradient(90deg,#0DC6C6 0%,#13C2C2 100%);font-size:36rpx;border-radius:48rpx;width:60vw;height:80rpx; margin-bottom:60rpx;", export default {
form: { data() {
room: "", return {
name: "", btnStyle: "background:linear-gradient(90deg,#0DC6C6 0%,#13C2C2 100%);font-size:36rpx;border-radius:48rpx;width:60vw;height:80rpx; margin-bottom:60rpx;",
idCard: "", form: {
phone: "", room: "",
leaveDate: "", name: "",
desc: "", idCard: "",
imageUrl: "", phone: "",
pickerValue: "", leaveDate: "",
problemType: "", desc: "",
}, imageUrl: "",
forceCheckoutDesc: "", pickerValue: "",
baseInfo: { problemType: "",
roomId: "", },
}, forceCheckoutDesc: "",
descRemark: "", baseInfo: {
fileList: [], roomId: "",
img1: [], },
showDate: false, descRemark: "",
minDate: "2000-01-01", fileList: [],
maxDate: "2100-12-31", img1: [],
descStyle: showDate: false,
"background:#f7f8fa;border-radius:12rpx;padding:24rpx;font-size:28rpx;color:#222;min-height:250rpx;box-sizing:border-box;", minDate: "2000-01-01",
problemTypeOptions: [ maxDate: "2100-12-31",
{ label: "违法居住条款，故意破坏房间设施", value: 1 }, descStyle: "background:#f7f8fa;border-radius:12rpx;padding:24rpx;font-size:28rpx;color:#222;min-height:250rpx;box-sizing:border-box;",
], problemTypeOptions: [{
showProblemTypePicker: false, // 控制选择器显示 label: "违法居住条款，故意破坏房间设施",
}; value: 1
}, }, ],
computed: { showProblemTypePicker: false, // 控制选择器显示
roomAllPath() { showInfo: true
const { apartmentName, buildingName, unitName, roomTypeName } = };
this.baseInfo; },
return `${apartmentName || ""}${buildingName || ""}${unitName || ""}${ computed: {
roomAllPath() {
const {
apartmentName,
buildingName,
unitName,
roomTypeName
} =
this.baseInfo;
return `${apartmentName || ""}${buildingName || ""}${unitName || ""}${
roomTypeName || "" roomTypeName || ""
}`; }`;
}, },
}, },
methods: { methods: {
handleQuery() { handleQuery() {
getResidentInfo({ idCard: this.form.idCard }).then((res) => { getResidentInfo({
if (res.code === 200) { idCard: this.form.idCard
console.log("查询结果:", res); }).then((res) => {
this.baseInfo = res.data; if (res.code === 200) {
this.baseInfo.roomId = res.data.roomId; console.log("查询结果:", res);
} this.baseInfo = res.data;
}); if (this.baseInfo) {
}, this.showInfo = true
// 上传前校验 }
beforeRead(event) { this.baseInfo.roomId = res.data.roomId;
// 可以在这里做文件大小、类型校验 }
const { file } = event; });
if (file.size > 10 * 1024 * 1024) { },
// 10MB // 上传前校验
uni.showToast({ title: "文件过大", icon: "none" }); beforeRead(event) {
return false; // 可以在这里做文件大小、类型校验
} const {
return true; file
}, } = event;
if (file.size > 10 * 1024 * 1024) {
// 10MB
uni.showToast({
title: "文件过大",
icon: "none"
});
return false;
}
return true;
},
// 选择文件后上传 // 选择文件后上传
async afterRead(event) { async afterRead(event) {
let lists = [].concat(event.file); let lists = [].concat(event.file);
let fileListLen = this[`fileList${event.name}`].length; let fileListLen = this[`fileList${event.name}`].length;
lists.map((item) => { lists.map((item) => {
this[`fileList${event.name}`].push({ this[`fileList${event.name}`].push({
...item, ...item,
status: "uploading", status: "uploading",
message: "上传中", message: "上传中",
}); });
}); });
for (let i = 0; i < lists.length; i++) { for (let i = 0; i < lists.length; i++) {
const result = await uploadImage(lists[i].url); const result = await uploadImage(lists[i].url);
let item = this[`fileList${event.name}`][fileListLen]; let item = this[`fileList${event.name}`][fileListLen];
this[`fileList${event.name}`].splice( this[`fileList${event.name}`].splice(
fileListLen, fileListLen,
1, 1,
Object.assign(item, { Object.assign(item, {
status: "success", status: "success",
message: "", message: "",
url: result.url, url: result.url,
}) })
); );
fileListLen++; fileListLen++;
} }
var arry = []; var arry = [];
this.fileList.filter((v, i) => { this.fileList.filter((v, i) => {
arry.push(v.url); arry.push({
}); name: v.name || '',
this.img1 = arry; format: v.type,
}, url: v.url
// 删除文件 });
deletePic(event) { });
this[`fileList${event.name}`].splice(event.index, 1); // this.img1 = arry;
var arry = []; },
this.fileList.filter((v, i) => { // 删除文件
arry.push(v.url); deletePic(event) {
}); this[`fileList${event.name}`].splice(event.index, 1);
this.img1 = arry; var arry = [];
}, this.fileList.filter((v, i) => {
onProblemTypeConfirm(e) { arry.push({
const selectedItem = e.value[0]; name: v.name || '',
this.form.problemType = selectedItem.label; // 显示标签 format: v.type,
this.form.problemTypeValue = selectedItem.value; // 保存值 url: v.url
this.showProblemTypePicker = false; });
}, });
submit() { // this.img1 = arry;
const params = { },
// idCard: this.baseInfo.idCard, onProblemTypeConfirm(e) {
chooseRoomRecId: this.baseInfo.chooseRecId, const selectedItem = e.value[0];
checkOutType: 1, //0正常退房1强制退房 this.form.problemType = selectedItem.label; // 显示标签
// questionType: this.form.problemTypeValue, this.form.problemTypeValue = selectedItem.value; // 保存值
content: this.forceCheckoutDesc, this.showProblemTypePicker = false;
imageList: this.fileList, //退房检查图片 },
}; submit() {
console.log(params, "params"); const params = {
// idCard: this.baseInfo.idCard,
chooseRoomRecId: this.baseInfo.chooseRecId,
checkOutType: 1, //0正常退房1强制退房
// questionType: this.form.problemTypeValue,
content: this.forceCheckoutDesc,
imageList: this.fileList, //退房检查图片
};
console.log(params, "params");
this.handleTempSave(params); this.handleTempSave(params);
}, },
handleTempSave(params) { handleTempSave(params) {
forceRelease(params).then((res) => { forceRelease(params).then((res) => {
uni.showToast({ title: res.msg, icon: "success" }); uni.showToast({
uni.switchTab({ url: "/pages/tabBar/work/index" }); title: res.msg,
}); icon: "success"
}, });
}, uni.switchTab({
}; url: "/pages/tabBar/work/index"
});
});
},
},
};
</script> </script>
<style scoped> <style scoped>
.top-bg { .top-bg {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100vw; width: 100vw;
height: 220rpx; height: 260rpx;
background: linear-gradient(120deg, #c6e6f7 0%, #e3e5fc 100%); background: linear-gradient(120deg, #c6e6f7 0%, #e3e5fc 100%);
z-index: 0; z-index: 0;
} }
.container {
position: relative; .container {
z-index: 1; position: relative;
padding: 32rpx 24rpx 0 24rpx; z-index: 1;
background: transparent; padding: 32rpx 24rpx 0 24rpx;
min-height: 80vh; background: transparent;
} min-height: 80vh;
.info-card { }
background: #fff;
border-radius: 24rpx; .info-card {
padding: 0rpx 24rpx 0 24rpx; background: #fff;
margin-bottom: 24rpx; border-radius: 24rpx;
box-shadow: 0 4rpx 16rpx 0 #e6f6fd; padding: 0rpx 24rpx 0 24rpx;
} margin-bottom: 24rpx;
::v-deep .u-form-item__body__left { box-shadow: 0 4rpx 16rpx 0 #e6f6fd;
color: #6a7fa3 !important; }
font-size: 28rpx !important;
font-weight: 500; ::v-deep .u-form-item__body__left {
} color: #6a7fa3 !important;
.u-form-item__body__left .u-form-item__body__left__required { font-size: 28rpx !important;
color: #ff5a5a !important; font-weight: 500;
margin-right: 4rpx; }
font-size: 28rpx;
} .u-form-item__body__left .u-form-item__body__left__required {
color: #ff5a5a !important;
margin-right: 4rpx;
font-size: 28rpx;
}
.u-form-item__body__right {
text-align: right;
color: #222;
font-size: 28rpx;
}
.u-form-item {
border-bottom: 1rpx solid #f2f4f8 !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.u-form-item:last-child {
border-bottom: none !important;
}
.desc-card {
background: #fff;
border-radius: 20rpx;
padding: 24rpx 20rpx 24rpx 20rpx;
margin-bottom: 24rpx;
box-shadow: 0 2rpx 8rpx #f2f4f8;
}
.label-des {
color: #68758b;
font-size: 30rpx;
margin: 20rpx 0;
}
.custom-desc-textarea {
background: #f7f8fa !important;
border-radius: 12rpx !important;
padding: 24rpx !important;
font-size: 28rpx !important;
color: #222 !important;
min-height: 500rpx !important;
box-sizing: border-box;
}
.custom-upload-btn {
width: 160rpx;
height: 160rpx;
background: #fafafa;
border: 2rpx solid #f0f0f0;
border-radius: 16rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 20rpx 16rpx 0 0;
}
.icon-box {
width: 60rpx;
height: 60rpx;
background: #ceeced;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.camera-icon {
width: 36rpx;
height: 36rpx;
}
.upload-tips {
color: #bbb;
font-size: 24rpx;
margin-top: 8rpx;
}
/* u-upload自定义按钮样式（如需更改） */
.u-upload__wrap__button {
background: #f7f8fa !important;
border-radius: 16rpx !important;
width: 120rpx !important;
height: 120rpx !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
}
.u-form-item__body__right { .u-upload__wrap__button .u-icon {
text-align: right; color: #2fd7e6 !important;
color: #222; font-size: 48rpx !important;
font-size: 28rpx; }
}
.u-form-item { .u-upload__wrap__button .u-upload__wrap__button__text {
border-bottom: 1rpx solid #f2f4f8 !important; color: #b0b0b0 !important;
margin-bottom: 0 !important; font-size: 24rpx !important;
padding-bottom: 0 !important; margin-top: 8rpx;
} }
.u-form-item:last-child {
border-bottom: none !important;
}
.desc-card { ::v-deep .u-form-item__body__left__content__label span {
background: #fff; color: #68758b;
border-radius: 20rpx; font-size: 30rpx;
padding: 24rpx 20rpx 24rpx 20rpx; }
margin-bottom: 24rpx; </style>
box-shadow: 0 2rpx 8rpx #f2f4f8;
}
.label-des {
color: #68758b;
font-size: 30rpx;
margin: 20rpx 0;
}
.custom-desc-textarea {
background: #f7f8fa !important;
border-radius: 12rpx !important;
padding: 24rpx !important;
font-size: 28rpx !important;
color: #222 !important;
min-height: 500rpx !important;
box-sizing: border-box;
}
.custom-upload-btn {
width: 160rpx;
height: 160rpx;
background: #fafafa;
border: 2rpx solid #f0f0f0;
border-radius: 16rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 20rpx 16rpx 0 0;
}
.icon-box {
width: 60rpx;
height: 60rpx;
background: #ceeced;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.camera-icon {
width: 36rpx;
height: 36rpx;
}
.upload-tips {
color: #bbb;
font-size: 24rpx;
margin-top: 8rpx;
}
/* u-upload自定义按钮样式（如需更改） */
.u-upload__wrap__button {
background: #f7f8fa !important;
border-radius: 16rpx !important;
width: 120rpx !important;
height: 120rpx !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
}
.u-upload__wrap__button .u-icon {
color: #2fd7e6 !important;
font-size: 48rpx !important;
}
.u-upload__wrap__button .u-upload__wrap__button__text {
color: #b0b0b0 !important;
font-size: 24rpx !important;
margin-top: 8rpx;
}
::v-deep .u-form-item__body__left__content__label span {
color: #68758b;
font-size: 30rpx;
}
</style>
Write Preview
Loading…
Cancel
Save