299 lines
7.0 KiB
Vue
299 lines
7.0 KiB
Vue
|
<template>
|
|||
|
|
<view class="add-repair-container">
|
|||
|
|
<!-- 可滚动内容区 -->
|
|||
|
|
<view class="add-repair-scroll-content">
|
|||
|
|
<!-- 地址选择 -->
|
|||
|
|
<view class="add-repair-section">
|
|||
|
|
<view class="add-repair-address-btn">
|
|||
|
|
<view class="add-repair-address-text">请选择房屋所在地址</view>
|
|||
|
|
<image class="add-repair-address-img" src="/static/ic_add_repair_01.png" />
|
|||
|
|
</view>
|
|||
|
|
<view class="add-repair-detail">
|
|||
|
|
<view class="add-repair-detail1">详细地址 </view>
|
|||
|
|
<view class="add-repair-detail2">例1栋2单元101室1</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 报事报修类型 -->
|
|||
|
|
<view class="add-repair-section2">
|
|||
|
|
<view class="add-repair-label">报事报修</view>
|
|||
|
|
<view class="add-repair-type-list">
|
|||
|
|
<view v-for="(item, idx) in repairTypes" :key="idx"
|
|||
|
|
:class="['add-repair-type-btn', selectedType === item ? 'selected' : '']"
|
|||
|
|
@click="selectType(item)">{{ item }}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="add-repair-label2">其他服务</view>
|
|||
|
|
<view class="add-repair-type-list">
|
|||
|
|
<view v-for="(item, idx) in otherTypes" :key="idx" class="add-repair-type-btn">{{ item }}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 问题详情 -->
|
|||
|
|
<view class="add-repair-section">
|
|||
|
|
<view class="add-repair-label">问题详情 <text class="add-repair-optional">(非必填)</text></view>
|
|||
|
|
<textarea class="add-repair-detail-textarea" placeholder="如果以上报事不能解决您的问题，可以在这里填写说明" />
|
|||
|
|
</view>
|
|||
|
|
<!-- 上传照片 -->
|
|||
|
|
<view class="add-repair-section">
|
|||
|
|
<view class="add-repair-label">上传照片 <text class="add-repair-optional">(非必填，最多三张)</text></view>
|
|||
|
|
<view class="add-repair-upload-list">
|
|||
|
|
<!-- 修改部分：添加点击事件和图片预览 -->
|
|||
|
|
<view
|
|||
|
|
class="add-repair-upload-box"
|
|||
|
|
@click="handleImageUpload"
|
|||
|
|
>
|
|||
|
|
<view class="add-repair-upload-plus">+</view>
|
|||
|
|
<view class="add-repair-upload-text">上传图片</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 显示已选图片 -->
|
|||
|
|
<view v-for="(image, index) in selectedImages" :key="index" class="add-repair-upload-box">
|
|||
|
|
<image :src="image.path" class="add-repair-upload-image" @click.stop="previewImage(image.path)" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 提交按钮 -->
|
|||
|
|
<button class="add-repair-submit-btn" @click="goRepaired">提交</button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// 导入MediaSelector和MediaType
|
|||
|
|
import MediaSelector, { MediaType } from '@/utils/mediaSelector';
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
repairTypes: ['安装挂件', '维修下水', '维修水阀', '疏通管道', '维修线路', '更换灯泡', '维修门窗', '其他维修'],
|
|||
|
|
otherTypes: ['园区安保', '通水通电', '维修线路'],
|
|||
|
|
selectedType: '更换灯泡',
|
|||
|
|
selectedImages: [] // 存储已选图片
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
selectType(item) {
|
|||
|
|
this.selectedType = item;
|
|||
|
|
},
|
|||
|
|
// 新增：处理图片上传
|
|||
|
|
async handleImageUpload() {
|
|||
|
|
try {
|
|||
|
|
// 调用MediaSelector选择图片，最多选择3张
|
|||
|
|
const images = await MediaSelector.choose({
|
|||
|
|
type: MediaType.IMAGE,
|
|||
|
|
count: 3 - this.selectedImages.length // 根据剩余数量选择
|
|||
|
|
});
|
|||
|
|
// 将选择的图片添加到selectedImages数组
|
|||
|
|
this.selectedImages = [...this.selectedImages, ...images];
|
|||
|
|
} catch (error) {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 预览图片
|
|||
|
|
previewImage(path) {
|
|||
|
|
MediaSelector.preview(path, MediaType.IMAGE);
|
|||
|
|
},
|
|||
|
|
goRepaired(){
|
|||
|
|
uni.navigateTo({ url: '/pages/mine/myRepair/repaired' });
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.add-repair-container {
|
|||
|
|
height: 100vh;
|
|||
|
|
background: #f7f7f7;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.add-repair-back {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 37rpx;
|
|||
|
|
width: 15rpx;
|
|||
|
|
height: 33rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.add-repair-title {
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
color: #000;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.add-repair-scroll-content {
|
|||
|
|
flex: 1;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
padding-bottom: 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.add-repair-section {
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
margin: 22rpx 30rpx 0 30rpx;
|
|||
|
|
padding: 24rpx 46rpx 24rpx 44rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.add-repair-section2 {
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
margin: 22rpx 30rpx 0 30rpx;
|
|||
|
|
padding: 24rpx 26rpx 24rpx 26rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.add-repair-address-btn {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 48rpx;
|
|||
|
|
background: #fff;
|
|||
|
|
border: 2rpx solid #2186FF;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
margin-bottom: 30rpx;
|
|||
|
|
padding-left: 18rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.add-repair-address-text {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #007CFF;
|
|||
|
|
margin-right: 15rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.add-repair-address-img {
|
|||
|
|
width: 11rpx;
|
|||
|
|
height: 21rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.add-repair-detail {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.add-repair-detail1 {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.add-repair-detail2 {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #676767;
|
|||
|
|
margin-left: 39rpx;
|
|||
|
|
}
|
|||
|
|
.add-repair-label {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #000000;
|
|||
|
|
font-weight: 500;
|
|||
|
|
margin-bottom: 41rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.add-repair-label2 {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #000000;
|
|||
|
|
font-weight: 500;
|
|||
|
|
margin-bottom: 25rpx;
|
|||
|
|
margin-top: 25rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.add-repair-type-list {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 28rpx 21rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.add-repair-type-btn {
|
|||
|
|
flex: 0 0 calc((100% - 42rpx) / 3);
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
height: 73rpx;
|
|||
|
|
background: #F2F7FF;
|
|||
|
|
color: #2186FF;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
border: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.add-repair-type-btn.selected {
|
|||
|
|
background: #2186FF;
|
|||
|
|
color: #fff;
|
|||
|
|
border: 2rpx solid #2186FF;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.add-repair-type-btn.dashed {
|
|||
|
|
border: 2rpx dashed #BDBDBD;
|
|||
|
|
background: #fff;
|
|||
|
|
color: #2186FF;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.add-repair-optional {
|
|||
|
|
color: #888;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
font-weight: 400;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.add-repair-detail-textarea {
|
|||
|
|
width: 75vw;
|
|||
|
|
min-height: 120rpx;
|
|||
|
|
background: #F7F8FA;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #888;
|
|||
|
|
padding: 18rpx;
|
|||
|
|
margin-top: 18rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.add-repair-upload-list {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 18rpx;
|
|||
|
|
margin-top: 18rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.add-repair-upload-box {
|
|||
|
|
width: 140rpx;
|
|||
|
|
height: 140rpx;
|
|||
|
|
border: 2rpx dashed #BDBDBD;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
background: #fafbfc;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.add-repair-upload-plus {
|
|||
|
|
font-size: 60rpx;
|
|||
|
|
color: #BDBDBD;
|
|||
|
|
margin-bottom: 8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.add-repair-upload-text {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #888;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.add-repair-submit-btn {
|
|||
|
|
width: 90vw;
|
|||
|
|
height: 80rpx;
|
|||
|
|
background: linear-gradient(90deg, #2186FF 0%, #4FC3F7 100%);
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 40rpx;
|
|||
|
|
margin: 48rpx auto 0 auto;
|
|||
|
|
display: block;
|
|||
|
|
font-weight: bold;
|
|||
|
|
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.18);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 新增图片预览样式 */
|
|||
|
|
.add-repair-upload-image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
object-fit: cover;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</style>
|