1.报事报修接口联调
This commit is contained in:
@@ -4,54 +4,41 @@
|
||||
<view class="add-repair-scroll-content">
|
||||
<!-- 地址选择 -->
|
||||
<view class="add-repair-section">
|
||||
<view class="add-repair-address-btn" @click="goSelectLocation">
|
||||
<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>
|
||||
<input type="text" v-model="repairInfo.location" placeholder="请输入地址" class="add-repair-detail2" />
|
||||
|
||||
</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">报事报修</view>
|
||||
<view class="repair-type" @click="chooseType">
|
||||
<text class="text-type">{{ selectedType }}</text>
|
||||
<image class="right-arrow" src="/static/ic_right_arrow_g.png" />
|
||||
</view>
|
||||
<view class="add-repair-label">问题详情 <text class="add-repair-optional">(非必填)</text></view>
|
||||
<textarea class="add-repair-detail-textarea" placeholder="如果以上报事不能解决您的问题，可以在这里填写说明" />
|
||||
<textarea v-model="repairInfo.remark" 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>
|
||||
<u-upload
|
||||
:fileList="selectedImages"
|
||||
@delete="deletePic"
|
||||
name="upload"
|
||||
multiple
|
||||
maxCount="3"
|
||||
width="180"
|
||||
height="180"
|
||||
:autoUpload="false"
|
||||
></u-upload>
|
||||
</view>
|
||||
|
||||
<!-- 提交按钮 -->
|
||||
<button class="add-repair-submit-btn" @click="goRepaired">提交</button>
|
||||
<button class="add-repair-submit-btn" @click="submit">提交</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -59,47 +46,103 @@
|
||||
<script>
|
||||
// 导入MediaSelector和MediaType
|
||||
import MediaSelector, { MediaType } from '@/utils/mediaSelector';
|
||||
|
||||
import {
|
||||
uploadFiles
|
||||
} from '@/common/upload.js';
|
||||
import toast from '../../../../uview-ui/libs/function/toast';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
repairTypes: ['安装挂件', '维修下水', '维修水阀', '疏通管道', '维修线路', '更换灯泡', '维修门窗', '其他维修'],
|
||||
otherTypes: ['园区安保', '通水通电', '维修线路'],
|
||||
selectedType: '更换灯泡',
|
||||
repairInfo:{
|
||||
location:'',
|
||||
type:'1942879389453230082',
|
||||
orderImgUrl:'',
|
||||
remark:''
|
||||
},
|
||||
repairTypes: [],
|
||||
selectedType: '',
|
||||
selectedImages: [] // 存储已选图片
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getOrderType()
|
||||
},
|
||||
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) {
|
||||
|
||||
async getOrderType() {
|
||||
let params = {parentId:'1952989217332658178'}
|
||||
let res = await this.$u.api.getRepairTypes(params);
|
||||
if (res.code == '200') {
|
||||
this.repairTypes = res.data
|
||||
this.repairInfo.type = res.data[0].id;
|
||||
this.selectType(res.data[0].orderTypeName)
|
||||
}
|
||||
},
|
||||
// 预览图片
|
||||
previewImage(path) {
|
||||
MediaSelector.preview(path, MediaType.IMAGE);
|
||||
// 删除图片
|
||||
deletePic(event) {
|
||||
this.selectedImages.splice(event.index, 1);
|
||||
},
|
||||
|
||||
async submit() {
|
||||
if(!this.repairInfo.location) {
|
||||
toast('请先填写地址')
|
||||
return
|
||||
}
|
||||
if(this.selectedImages.length<=0){
|
||||
this.realSubmit()
|
||||
return
|
||||
}
|
||||
// 遍历selectedImages数组并处理图片路径
|
||||
const images = this.selectedImages.map(item => item.path.replace('file://', ''));
|
||||
const result = await uploadFiles({
|
||||
files: images,
|
||||
url: this.vuex_config.baseUrl + '/resource/oss/upload',
|
||||
name: 'file',
|
||||
vm: this // 关键：用于注入 token 等
|
||||
});
|
||||
|
||||
if (result.code == '200') {
|
||||
// 遍历result获取data.url加上,分割
|
||||
const urls = result.map(item => item.data?.url || '').filter(url => url !== '');
|
||||
this.repairInfo.orderImgUrl = urls.join(',');
|
||||
this.realSubmit()
|
||||
}
|
||||
},
|
||||
|
||||
async realSubmit(){
|
||||
let res = await this.$u.api.addOrder2(this.repairInfo);
|
||||
if (res.code == '200') {
|
||||
// 关闭页面前发送事件通知前页面刷新
|
||||
uni.$emit('refreshData', '');
|
||||
// 返回上一页
|
||||
uni.navigateBack();
|
||||
}
|
||||
},
|
||||
|
||||
// 添加chooseType方法实现
|
||||
chooseType() {
|
||||
uni.showActionSheet({
|
||||
itemList: this.repairTypes.map(item => item.orderTypeName),
|
||||
success: (res) => {
|
||||
this.selectedType = this.repairTypes[res.tapIndex].orderTypeName;
|
||||
this.repairInfo.type = this.repairTypes[res.tapIndex].id;
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log('用户取消选择或出错', err);
|
||||
}
|
||||
});
|
||||
},
|
||||
goRepaired(){
|
||||
uni.navigateTo({ url: '/pages/sys/user/myRepair/repaired' });
|
||||
},
|
||||
goSelectLocation(){
|
||||
uni.navigateTo({ url: '/pages/sys/user/myRepair/selectLocation' });
|
||||
}
|
||||
},
|
||||
goSelectLocation(){
|
||||
uni.navigateTo({ url: '/pages/sys/user/myRepair/selectLocation' });
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -110,18 +153,6 @@ export default {
|
||||
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;
|
||||
@@ -136,11 +167,25 @@ export default {
|
||||
padding: 24rpx 46rpx 24rpx 44rpx;
|
||||
}
|
||||
|
||||
.add-repair-section2 {
|
||||
background: #fff;
|
||||
border-radius: 12rpx;
|
||||
margin: 22rpx 30rpx 0 30rpx;
|
||||
padding: 24rpx 26rpx 24rpx 26rpx;
|
||||
.repair-type {
|
||||
width: 363rpx;
|
||||
height: 73rpx;
|
||||
background: #F7F7F7;
|
||||
border-radius: 10rpx;
|
||||
padding:0rpx 28rpx 0rpx 35rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
}
|
||||
.text-type{
|
||||
font-size: 24rpx;
|
||||
color:#808080;
|
||||
}
|
||||
.right-arrow{
|
||||
width: 11rpx;
|
||||
height: 21rpx;
|
||||
}
|
||||
|
||||
.add-repair-address-btn {
|
||||
@@ -180,9 +225,14 @@ export default {
|
||||
}
|
||||
|
||||
.add-repair-detail2 {
|
||||
width: 460rpx;
|
||||
height: 98rpx;
|
||||
background-color: #F7F8FA;
|
||||
border-radius: 10rpx;
|
||||
font-size: 24rpx;
|
||||
color: #676767;
|
||||
margin-left: 39rpx;
|
||||
margin-left: 25rpx;
|
||||
padding-left: 15rpx;
|
||||
}
|
||||
.add-repair-label {
|
||||
font-size: 32rpx;
|
||||
@@ -249,55 +299,18 @@ export default {
|
||||
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%);
|
||||
width: 60vw;
|
||||
height: 73rpx;
|
||||
background: linear-gradient(90deg, #005DE9 0%, #4B9BFF 100%);
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
border: none;
|
||||
border-radius: 40rpx;
|
||||
margin: 48rpx auto 0 auto;
|
||||
margin: 100rpx 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