1.合并前段时间写的页面
This commit is contained in:
299
pages/sys/user/myRepair/addRepair.vue
Normal file
299
pages/sys/user/myRepair/addRepair.vue
Normal file
@@ -0,0 +1,299 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user