382 lines
8.5 KiB
Vue
382 lines
8.5 KiB
Vue
<template>
|
||
<view class="content">
|
||
<!-- 遮罩层 -->
|
||
<view class="mask" v-if="showMenu" @click="toggleMenu"></view>
|
||
|
||
<!-- 下拉菜单 -->
|
||
<view class="dropdown-menu" v-if="showMenu">
|
||
<view
|
||
class="menu-item"
|
||
v-for="(item, index) in menuItems"
|
||
:key="index"
|
||
@click="selectMenuItem(item)"
|
||
>
|
||
<text>{{ item }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<u-navbar
|
||
:is-back="true"
|
||
title="上传图片"
|
||
title-color="black"
|
||
:background="{ backgroundColor: '#F7F8FC' }"
|
||
:border-bottom="false"
|
||
>
|
||
<view slot="right">
|
||
<view class="menu-wrapper">
|
||
<image
|
||
src="/static/iconfont/more.svg"
|
||
mode="scaleToFill"
|
||
style="width: 48rpx; height: 48rpx; margin-right: 32rpx"
|
||
@click="toggleMenu"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</u-navbar>
|
||
|
||
<view class="content-header">
|
||
<view class="content-header-title">
|
||
{{ params.aeraNmae }} — {{ params.planName }}
|
||
</view>
|
||
</view>
|
||
|
||
<view class="planList">
|
||
<view class="plan-header">
|
||
<text>请上传区域图片</text>
|
||
</view>
|
||
<view class="plan-content">
|
||
<view class="plan-content-top">
|
||
<view class="plan-content-top-uploadBox" @click="takePhoto">
|
||
<image
|
||
src="/static/images/icon-camera.png"
|
||
mode="aspectFit"
|
||
style="width: 49rpx; height: 43rpx"
|
||
/>
|
||
<view class="plan-content-top-uploadBox-text">添加照片</view>
|
||
</view>
|
||
|
||
<view
|
||
class="plan-content-top-imgList"
|
||
v-for="(item, index) in imageList"
|
||
:key="index"
|
||
>
|
||
<image
|
||
:src="item"
|
||
mode="scaleToFill"
|
||
style="width: 180rpx; height: 180rpx"
|
||
@click="previewImage(index)"
|
||
/>
|
||
<view class="delete-icon" @click="handleDelete(index)">×</view>
|
||
</view>
|
||
</view>
|
||
<view class="plan-content-remark">
|
||
<view class="plan-content-remark-title">备注</view>
|
||
<!-- <view class="plan-content-remark-text">
|
||
备注备注备注备注备注备注备注备注备注备注备注备注
|
||
</view> -->
|
||
<u-input
|
||
v-model="remark"
|
||
type="textarea"
|
||
placeholder="请输入"
|
||
:border="false"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<u-button
|
||
class="bottom-btn"
|
||
shape="circle"
|
||
type="primary"
|
||
@click="submitForm"
|
||
>上传</u-button
|
||
>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { UploadFiles, UploadArea } from "@/api/apiList";
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
activeTab: "completed",
|
||
showMenu: false,
|
||
menuItems: ["教学楼楼道", "南广场跑道", "食堂大厅"],
|
||
// 区域名称
|
||
areaName: "操场",
|
||
// 所属计划
|
||
planName: "保洁计划",
|
||
|
||
// 备注
|
||
remark: "",
|
||
|
||
imageList: [], // 存储图片临时路径
|
||
|
||
params: {},
|
||
};
|
||
},
|
||
onLoad(options) {
|
||
console.log("options", JSON.parse(decodeURIComponent(options.params)));
|
||
this.params = JSON.parse(decodeURIComponent(options.params));
|
||
},
|
||
created() {},
|
||
methods: {
|
||
switchTab(tab) {
|
||
this.activeTab = tab;
|
||
},
|
||
toggleMenu() {
|
||
this.showMenu = !this.showMenu;
|
||
},
|
||
selectMenuItem(item) {
|
||
// 处理菜单项选择
|
||
console.log("选择了:", item);
|
||
this.areaName = item;
|
||
// 这里可以添加选择后的逻辑
|
||
this.showMenu = false;
|
||
},
|
||
|
||
// 拍照获取图片
|
||
takePhoto() {
|
||
uni.chooseImage({
|
||
count: 1, // 每次拍摄1张
|
||
sourceType: ["camera"], // 仅限拍照
|
||
sizeType: ["compressed"], // 压缩图片
|
||
success: async (res) => {
|
||
// console.log("拍照成功", res);
|
||
this.imageList = [...this.imageList, res.tempFilePaths[0]];
|
||
},
|
||
fail: (err) => {
|
||
uni.showToast({ title: "拍照失败，请重试", icon: "none" });
|
||
},
|
||
});
|
||
},
|
||
|
||
// 上传图片
|
||
async uploadFiles(filePath) {
|
||
const res = await UploadFiles(filePath);
|
||
if (res.succeed) {
|
||
this.imageList = [...this.imageList, res.data];
|
||
}
|
||
},
|
||
|
||
// 删除图片
|
||
handleDelete(index) {
|
||
this.imageList.splice(index, 1);
|
||
},
|
||
|
||
// 图片预览
|
||
previewImage(index) {
|
||
uni.previewImage({
|
||
urls: this.imageList,
|
||
current: index,
|
||
});
|
||
},
|
||
|
||
// 提交表单
|
||
async submitForm() {
|
||
if (this.imageList.length === 0) {
|
||
uni.showToast({ title: "请上传图片", icon: "none" });
|
||
return;
|
||
}
|
||
|
||
const params = {
|
||
id: this.params.areaId,
|
||
note: this.remark,
|
||
};
|
||
|
||
const formData = new FormData();
|
||
formData.append("id", this.params.areaId);
|
||
formData.append("note", this.remark);
|
||
for (const file of this.imageList) {
|
||
formData.append("files", file);
|
||
}
|
||
|
||
console.log("提交表单", params);
|
||
console.log("提交表单", picturesDto, this.remark);
|
||
|
||
const res = await UploadArea(formData);
|
||
|
||
if (res.succeed) {
|
||
// 成功的处理
|
||
uni.showToast({ title: "上传成功", icon: "success" });
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page {
|
||
background: #f7f8fc;
|
||
}
|
||
.content {
|
||
position: relative;
|
||
// height: 100vh;
|
||
padding-bottom: 32rpx;
|
||
background: #f7f8fc;
|
||
|
||
.mask {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(0, 0, 0, 0.2);
|
||
z-index: 999;
|
||
}
|
||
|
||
.content-header {
|
||
height: 180rpx;
|
||
border-radius: 16rpx;
|
||
margin: 32rpx;
|
||
display: flex;
|
||
flex-direction: column-reverse;
|
||
background: url("/static/images/region-bg.png") no-repeat center center;
|
||
background-size: 100% 100%;
|
||
|
||
&-title {
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
text-align: center;
|
||
background-color: #fff;
|
||
border-radius: 32rpx;
|
||
min-width: 80%;
|
||
padding: 0 32rpx;
|
||
margin: 0 auto 32rpx;
|
||
}
|
||
}
|
||
.planList {
|
||
margin: 0 32rpx;
|
||
border-radius: 16rpx;
|
||
background-color: #fff;
|
||
|
||
.plan-header {
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
padding: 32rpx;
|
||
border-bottom: 1px solid #f2f2f2;
|
||
}
|
||
.plan-content {
|
||
padding: 32rpx;
|
||
&-top {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 32rpx;
|
||
|
||
&-uploadBox {
|
||
border: 1px dashed #526fa3;
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
background-color: #edf2ff;
|
||
border-radius: 16rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
&-imgList {
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
&-remark {
|
||
margin-top: 32rpx;
|
||
border-radius: 16rpx;
|
||
&-title {
|
||
margin-bottom: 16rpx;
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
&-text {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
margin-top: 16rpx;
|
||
}
|
||
}
|
||
}
|
||
&.activeList {
|
||
.plan-item {
|
||
background: linear-gradient(
|
||
to bottom,
|
||
#fef7ec 0%,
|
||
#fffdfa 30%,
|
||
#ffffff 100%
|
||
);
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottom-btn {
|
||
margin: 60rpx 32rpx 0rpx;
|
||
// position: fixed;
|
||
// bottom: 32rpx;
|
||
// left: 0;
|
||
// right: 0;
|
||
}
|
||
}
|
||
|
||
.header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20rpx 32rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.title {
|
||
font-size: 36rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.menu-wrapper {
|
||
position: relative;
|
||
}
|
||
|
||
.dropdown-menu {
|
||
position: absolute;
|
||
top: 80rpx;
|
||
right: 32rpx;
|
||
background-color: #ffffff;
|
||
border-radius: 12rpx;
|
||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
|
||
width: 280rpx;
|
||
overflow: hidden;
|
||
z-index: 1000;
|
||
|
||
.menu-item {
|
||
padding: 24rpx 32rpx;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
border-bottom: 1px solid #f5f5f5;
|
||
|
||
.menu-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.menu-item:active {
|
||
background-color: #f8f8f8;
|
||
}
|
||
}
|
||
}
|
||
</style>
|