mirror of
https://gitee.com/java110/WechatOwnerService.git
synced 2026-02-23 21:36:38 +08:00
336 lines
8.3 KiB
Vue
336 lines
8.3 KiB
Vue
<template>
|
||
<view>
|
||
<view class="block__title">房屋信息</view>
|
||
<view class="cu-form-group">
|
||
<view class="title">房屋信息</view>
|
||
<picker :value="index" :range="roomCloums" @change="_changeRoom">
|
||
<view class="picker">
|
||
{{roomName}}
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
<view class="block__title">投诉信息</view>
|
||
<view class="cu-form-group">
|
||
<view class="title">投诉类型</view>
|
||
<picker :value="complaintIndex" :range="columns" @change="_changeComplaint">
|
||
<view class="picker">
|
||
{{typeName}}
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
<view class="cu-form-group">
|
||
<view class="title">投诉人</view>
|
||
<input id="complaintName" :value="complaintName" @input="bindInput" placeholder="请输入投诉人"></input>
|
||
</view>
|
||
<view class="cu-form-group">
|
||
<view class="title">手机号</view>
|
||
<input id="tel" :value="tel" @input="bindInput" placeholder="请输入手机号"></input>
|
||
</view>
|
||
<view class="cu-form-group margin-top">
|
||
<textarea id="context" :value="context" @input="bindInput" placeholder="请输入投诉内容"></textarea>
|
||
</view>
|
||
|
||
<view class="cu-bar bg-white margin-top">
|
||
<view class="action">
|
||
图片上传
|
||
</view>
|
||
<view class="action">
|
||
{{imgList.length}}/4
|
||
</view>
|
||
</view>
|
||
<view class="cu-form-group">
|
||
<view class="grid col-4 grid-square flex-sub">
|
||
<view class="bg-img" v-for="(img,index) in imgList" :key="index" bindtap="ViewImage" :data-url="imgList[imageIndex]">
|
||
<image :src='imgList[index]' mode='aspectFill'></image>
|
||
<view class="cu-tag bg-red" @tap="deleteImage(index)" :data-index="imageIndex">
|
||
<text class="cuIcon-close"></text>
|
||
</view>
|
||
</view>
|
||
<view class="solids" @tap="ChooseImage" v-if="imgList.length<4">
|
||
<text class="cuIcon-cameraadd"></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="button_up_blank"></view>
|
||
<view class="flex flex-direction">
|
||
<button class="cu-btn bg-green margin-tb-sm lg" @click="bindOwner()">提交</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// pages/enterCommunity/enterCommunity.js
|
||
const context = require("../../context/Java110Context.js");
|
||
const constant = context.constant;
|
||
const factory = context.factory;
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
imgList: [],
|
||
imageIndex: 0,
|
||
index: null,
|
||
complaintIndex: 0,
|
||
roomCloums: [],
|
||
roomIdArr: [],
|
||
roomName: "请选择",
|
||
roomId: '',
|
||
roomShow: false,
|
||
columns: ['投诉', '建议'],
|
||
typeCds: ['809001', '809002'],
|
||
typeName: '请选择',
|
||
typeCd: '',
|
||
typeShow: false,
|
||
photoList: [],
|
||
tel: '',
|
||
context: '',
|
||
complaintName: '',
|
||
userId: '',
|
||
storeId: '',
|
||
photos: [],
|
||
communityId: ""
|
||
};
|
||
},
|
||
/**
|
||
* 生命周期函数--监听页面加载
|
||
*/
|
||
onLoad: function(options) {
|
||
let that = this;
|
||
context.onLoad(options);
|
||
context.getRooms().then(res => {
|
||
console.log(res);
|
||
let arr = res.data.rooms;
|
||
let roomCloums = [];
|
||
let roomIdArr = [];
|
||
arr.map(item => {
|
||
roomCloums.push(item.floorNum + "号楼" + item.unitNum + "单元" + item.roomNum + "室");
|
||
roomIdArr.push(item.roomId);
|
||
});
|
||
console.log(that);
|
||
that.roomCloums = roomCloums;
|
||
that.roomIdArr = roomIdArr;
|
||
that.userId = res.data.owner.appUserId;
|
||
that.communityId = res.data.owner.communityId;
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面初次渲染完成
|
||
*/
|
||
onReady: function() {},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面显示
|
||
*/
|
||
onShow: function() {},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面隐藏
|
||
*/
|
||
onHide: function() {},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面卸载
|
||
*/
|
||
onUnload: function() {},
|
||
|
||
/**
|
||
* 页面相关事件处理函数--监听用户下拉动作
|
||
*/
|
||
onPullDownRefresh: function() {},
|
||
|
||
/**
|
||
* 页面上拉触底事件的处理函数
|
||
*/
|
||
onReachBottom: function() {},
|
||
|
||
/**
|
||
* 用户点击右上角分享
|
||
*/
|
||
onShareAppMessage: function() {},
|
||
methods: {
|
||
ChooseImage: function(e) {
|
||
let that = this;
|
||
wx.chooseImage({
|
||
count: 4, //默认9
|
||
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
||
sourceType: ['album'], //从相册选择
|
||
success: (res) => {
|
||
console.log(res);
|
||
that.$data.imgList.push(res.tempFilePaths[0]);
|
||
let _base64Photo = '';
|
||
factory.base64.urlTobase64(res.tempFilePaths[0]).then(function(_res) {
|
||
_base64Photo = _res;
|
||
console.log('base64', _base64Photo);
|
||
that.photos.push(_base64Photo);
|
||
});
|
||
}
|
||
});
|
||
},
|
||
deleteImage: function(e) {
|
||
console.log(e);
|
||
let imageArr = this.$data.imgList;
|
||
imageArr.splice(e, 1);
|
||
},
|
||
_changeComplaint:function(e){
|
||
this.typeName = this.columns[e.detail.value];
|
||
this.typeCd = this.typeCds[e.detail.value];
|
||
},
|
||
_changeRoom: function(e) {
|
||
this.roomName = this.roomCloums[e.detail.value];
|
||
this.roomId = this.roomIdArr[e.detail.value];
|
||
},
|
||
bindInput: function(e) {
|
||
console.log('数据监听', e);
|
||
switch (e.target.id) {
|
||
case "complaintName":
|
||
this.$data.complaintName = e.detail.value;
|
||
break;
|
||
case "tel":
|
||
this.$data.tel = e.detail.value;
|
||
break;
|
||
case "context":
|
||
this.$data.context = e.detail.value;
|
||
break;
|
||
}
|
||
console.log(this);
|
||
},
|
||
bindOwner: function(e) {
|
||
|
||
let obj = {
|
||
"typeCd": this.typeCd,
|
||
"complaintName": this.complaintName,
|
||
"tel": this.tel,
|
||
"roomId": this.roomId,
|
||
"photos": [],
|
||
"context": this.context,
|
||
"userId": this.userId,
|
||
"communityId": this.communityId
|
||
};
|
||
let _photos = this.photos;
|
||
|
||
_photos.forEach(function(_item) {
|
||
obj.photos.push({
|
||
"photo": _item
|
||
});
|
||
});
|
||
let msg = "";
|
||
|
||
if (obj.typeCd == "") {
|
||
msg = "请选择投诉类型";
|
||
} else if (obj.complaintName == "") {
|
||
msg = "请填写投诉人";
|
||
} else if (obj.tel == "") {
|
||
msg = "请填写手机号";
|
||
} else if (obj.context == "") {
|
||
msg = "请填写投诉内容";
|
||
}
|
||
|
||
if (msg != "") {
|
||
wx.showToast({
|
||
title: msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
} else {
|
||
console.log("提交数据", obj);
|
||
context.request({
|
||
url: constant.url.saveComplaint,
|
||
header: context.getHeaders(),
|
||
method: "POST",
|
||
data: obj,
|
||
//动态数据
|
||
success: function(res) {
|
||
let _json = res.data;
|
||
if (_json.code == 0) {
|
||
wx.redirectTo({
|
||
url: '/pages/complaintList/complaintList',
|
||
});
|
||
return;
|
||
}
|
||
wx.showToast({
|
||
title: "服务器异常了",
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
},
|
||
fail: function(e) {
|
||
console.log(e);
|
||
wx.showToast({
|
||
title: "服务器异常了",
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
});
|
||
}
|
||
},
|
||
onChange: function(e) {
|
||
console.log(e);
|
||
},
|
||
onTypeConfirm: function(e) {
|
||
console.log("onConfirm", e);
|
||
this.typeName = e.detail.value;
|
||
this.typeCd = e.detail.index ? '809001' : '809002';
|
||
this.typeShow = false;
|
||
},
|
||
onTypeCancel: function(e) {
|
||
this.typeShow = false;
|
||
},
|
||
chooseType: function(e) {
|
||
this.typeShow = true;
|
||
},
|
||
onRoomConfirm: function(e) {
|
||
console.log("onConfirm", e);
|
||
this.roomName = e.detail.value;
|
||
this.roomId = this.roomIdArr[e.detail.index];
|
||
this.roomShow = false;
|
||
},
|
||
onRoomCancel: function(e) {
|
||
this.roomShow = false;
|
||
},
|
||
chooseRoom: function(e) {
|
||
this.roomShow = true;
|
||
},
|
||
afterRead: function(event) {
|
||
const {
|
||
file
|
||
} = event.detail;
|
||
|
||
let _that = this;
|
||
|
||
const {
|
||
photoList = []
|
||
} = this;
|
||
photoList.push(file);
|
||
this.photoList = photoList; // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
|
||
|
||
factory.base64.urlTobase64(file.path).then(function(_baseInfo) {
|
||
_that.photos.push(_baseInfo);
|
||
});
|
||
console.log("data信息：", this);
|
||
},
|
||
removePhoto: function(e) {
|
||
console.log(e.detail.index);
|
||
let _photoList = [];
|
||
this.photoList.forEach(function(item, index) {
|
||
if (index != e.detail.index) {
|
||
_photoList.push(item);
|
||
}
|
||
});
|
||
let _photos = [];
|
||
this.photos.forEach(function(item, index) {
|
||
if (index != e.detail.index) {
|
||
_photos.push(item);
|
||
}
|
||
});
|
||
this.photos = _photos;
|
||
this.photoList = _photoList;
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style>
|
||
@import "./complaint.css";
|
||
</style>
|