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> |