mirror of
https://gitee.com/java110/WechatOwnerService.git
synced 2026-02-23 21:36:38 +08:00
优化空置房申请，增加图片资料上传
This commit is contained in:
905166056
parent
8fc44e39e0
commit
55b42a6324
197
components/vc-upload/vc-upload.vue
Normal file
197
components/vc-upload/vc-upload.vue
Normal file
@ -0,0 +1,197 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="cu-bar bg-white ">
|
||||
<view class="action">
|
||||
{{title}}
|
||||
</view>
|
||||
<view class="action" v-if="canEdit">
|
||||
{{imgList.length}}/{{maxPhotoNum}}
|
||||
</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" @click.stop="preview(index)">
|
||||
<image :src="img" mode='aspectFill'></image>
|
||||
<view class="cu-tag bg-red" v-if="canEdit" @tap.stop="deleteImage(index)">
|
||||
<text class="cuIcon-close"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="solids" @tap="ChooseImage" v-if="canEdit && imgList.length < maxPhotoNum">
|
||||
<text class="cuIcon-cameraadd"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as TanslateImage from '../../lib/java110/utils/translate-image.js';
|
||||
import conf from '../../conf/config.js'
|
||||
const context = require("../../lib/java110/Java110Context.js");
|
||||
const factory = context.factory;
|
||||
export default {
|
||||
name:"vc-upload",
|
||||
data() {
|
||||
return {
|
||||
photos: [],
|
||||
imgList: [],
|
||||
};
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '图片上传'
|
||||
},
|
||||
maxPhotoNum: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
sendImgList: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
count: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
sizeType: {
|
||||
type: Array,
|
||||
default () {
|
||||
return ['original', 'compressed']
|
||||
}
|
||||
},
|
||||
sourceType: {
|
||||
type: Array,
|
||||
default () {
|
||||
return ['album', 'camera']
|
||||
}
|
||||
},
|
||||
canEdit: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
obj: {
|
||||
photos(newName, oldName) {
|
||||
this.sendData();
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
photos:function(val){
|
||||
this.sendData();
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
mounted() {
|
||||
this.imgList = this.sendImgList;
|
||||
if(this.imgList.length > 0){
|
||||
uni.showLoading({
|
||||
title: "图片加载中...",
|
||||
mask: true
|
||||
})
|
||||
}
|
||||
this.imgList.forEach((item, index) => {
|
||||
let url = '';
|
||||
if(item.indexOf("http") != -1){
|
||||
url = item;
|
||||
}else{
|
||||
url = conf.commonBaseUrl + item;
|
||||
}
|
||||
uni.request({
|
||||
url: url,
|
||||
method: 'GET',
|
||||
responseType: 'arraybuffer',
|
||||
success: async res => {
|
||||
let base64 = wx.arrayBufferToBase64(res.data); //把arraybuffer转成base64
|
||||
let Base64Url = 'data:image/jpeg;base64,' + base64; //不加上这串字符，在页面无法显示
|
||||
this.photos.push(Base64Url);
|
||||
if(this.photos.length == this.imgList.length){
|
||||
uni.hideLoading();
|
||||
}
|
||||
}
|
||||
});
|
||||
// uni.downloadFile({
|
||||
// url: conf.commonBaseUrl + item,
|
||||
// success: (imgRes) => {
|
||||
// this.imgList[index] = imgRes.tempFilePath;
|
||||
// wx.getFileSystemManager().readFile({
|
||||
// filePath: imgRes.tempFilePath,
|
||||
// encoding: 'base64',
|
||||
// success: (base64Res) => {
|
||||
// let base64 = 'data:image/png;base64,' + base64Res.data
|
||||
// this.photos.push(base64);
|
||||
// if(this.photos.length == this.imgList.length){
|
||||
// uni.hideLoading();
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
})
|
||||
},
|
||||
methods:{
|
||||
// 向父组件传递base64数据
|
||||
sendData() {
|
||||
this.$emit('sendImagesData', this.photos)
|
||||
},
|
||||
// 删除
|
||||
deleteImage: function(index) {
|
||||
this.imgList.splice(index, 1);
|
||||
this.photos.splice(index, 1);
|
||||
},
|
||||
// 添加
|
||||
ChooseImage: function() {
|
||||
let that = this;
|
||||
wx.chooseImage({
|
||||
count: this.count, // 选择数量
|
||||
sizeType: this.sizeType, //原图或压缩图
|
||||
sourceType: this.sourceType, // 相册或拍摄
|
||||
success: (res) => {
|
||||
var tempFilePaths = res.tempFilePaths[0]
|
||||
|
||||
that.imgList.push(tempFilePaths);
|
||||
that.$forceUpdate();
|
||||
//#ifdef H5
|
||||
TanslateImage.translate(tempFilePaths, (url) => {
|
||||
that.photos.push(url);
|
||||
})
|
||||
//#endif
|
||||
|
||||
//#ifdef MP-WEIXIN
|
||||
factory.base64.urlTobase64(tempFilePaths).then(function(_res) {
|
||||
that.photos.push(_res);
|
||||
});
|
||||
//#endif
|
||||
}
|
||||
});
|
||||
},
|
||||
// 预览
|
||||
preview: function(index){
|
||||
let urls = this.imgList;
|
||||
// 空集合 return
|
||||
if(urls.length < 1){
|
||||
return;
|
||||
}
|
||||
// domain拼接
|
||||
urls.forEach((item, index) => {
|
||||
let start = item.indexOf("/callComponent");
|
||||
if(start == 0){
|
||||
urls[index] = conf.commonBaseUrl + item;
|
||||
}
|
||||
})
|
||||
uni.previewImage({
|
||||
current: index,
|
||||
urls: urls
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -94,6 +94,28 @@
|
||||
<view class="title">申请说明</view>
|
||||
<input type="text" v-model="createRemark">
|
||||
</view>
|
||||
<view class="block__title">图片材料</view>
|
||||
<view class="cu-bar bg-white ">
|
||||
<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[index]">
|
||||
<image :src='imgList[index]' mode='aspectFill'></image>
|
||||
<view class="cu-tag bg-red" @tap="deleteImage(index)" :data-index="index">
|
||||
<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="btn-box">
|
||||
<button type="default" class="btn-sub" @click="subApply()">提交申请</button>
|
||||
</view>
|
||||
@ -105,6 +127,7 @@
|
||||
|
||||
<script>
|
||||
// pages/my/myHouseDetail.js
|
||||
import * as TanslateImage from '../../lib/java110/utils/translate-image.js';
|
||||
import context from '../../lib/java110/Java110Context.js'
|
||||
const factory = context.factory;
|
||||
import {compareDate,addDay,date2String} from '../../lib/java110/utils/DateUtil.js'
|
||||
@ -126,6 +149,8 @@
|
||||
feeTypeCds: [],
|
||||
feeId: '',
|
||||
feeTypeCd: '',
|
||||
imgList: [],
|
||||
photos: [],
|
||||
};
|
||||
},
|
||||
|
||||
@ -259,6 +284,44 @@
|
||||
this.bindEndDate = e.detail.value;
|
||||
},
|
||||
|
||||
/**
|
||||
* 删除图片
|
||||
* @param {Object} e
|
||||
*/
|
||||
deleteImage: function(e) {
|
||||
let imageArr = this.$data.imgList;
|
||||
imageArr.splice(e, 1);
|
||||
this.photos.splice(e, 1);
|
||||
},
|
||||
/**
|
||||
* 选择图片
|
||||
* @param {Object} e
|
||||
*/
|
||||
ChooseImage: function(e) {
|
||||
let that = this;
|
||||
wx.chooseImage({
|
||||
count: 4, //默认9
|
||||
sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
|
||||
sourceType: ['album','camera'], //从相册选择
|
||||
success: (res) => {
|
||||
that.$data.imgList.push(res.tempFilePaths[0]);
|
||||
var tempFilePaths = res.tempFilePaths[0]
|
||||
|
||||
//#ifdef H5
|
||||
TanslateImage.translate(tempFilePaths, (url) => {
|
||||
that.photos.push(url);
|
||||
})
|
||||
//#endif
|
||||
|
||||
//#ifdef MP-WEIXIN
|
||||
factory.base64.urlTobase64(tempFilePaths).then(function(_res) {
|
||||
that.photos.push(_res);
|
||||
});
|
||||
//#endif
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 提交申请
|
||||
*/
|
||||
@ -298,8 +361,8 @@
|
||||
ardId: '',
|
||||
applyType: this.applyType,
|
||||
feeId: this.feeId,
|
||||
photos: this.photos
|
||||
}
|
||||
console.log(params);
|
||||
saveApplyRoomDiscount(params).then(function(_res){
|
||||
uni.showToast({
|
||||
title: '申请成功'
|
||||
|
||||
@ -31,6 +31,7 @@
|
||||
<view class="title">当前进度</view>
|
||||
{{applyDetail.stateName}}
|
||||
</view>
|
||||
<uploadImage v-if="applyDetail.urls.length > 0" ref="vcUploadRef" :maxPhotoNum="maxPhotoNum" :sendImgList="sendImgList" :canEdit="canEdit" :title="imgTitle"></uploadImage>
|
||||
|
||||
<view class="button_up_blank"></view>
|
||||
|
||||
@ -39,15 +40,23 @@
|
||||
|
||||
<script>
|
||||
import context from '../../lib/java110/Java110Context.js';
|
||||
import {queryApplyRoomDiscount} from '../../api/applyRoom/applyRoomApi.js'
|
||||
import uploadImage from "../../components/vc-upload/vc-upload.vue";
|
||||
const factory = context.factory;
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
applyDetail: {},
|
||||
maxPhotoNum: 4,
|
||||
sendImgList: [],
|
||||
canEdit: false,
|
||||
imgTitle: '图片材料'
|
||||
};
|
||||
},
|
||||
|
||||
components: {},
|
||||
components: {
|
||||
uploadImage
|
||||
},
|
||||
props: {},
|
||||
|
||||
/**
|
||||
@ -56,7 +65,17 @@
|
||||
onLoad: function(options) {
|
||||
let _that = this;
|
||||
context.onLoad(options);
|
||||
_that.applyDetail = JSON.parse(options.room);
|
||||
|
||||
let params = {
|
||||
communityId: options.communityId,
|
||||
page: 1,
|
||||
row: 1,
|
||||
ardId: options.ardId
|
||||
}
|
||||
queryApplyRoomDiscount(params).then(function(_res){
|
||||
_that.applyDetail = _res.data[0];
|
||||
_that.sendImgList = _res.data[0].urls;
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
@ -98,8 +117,14 @@
|
||||
* 查看跟踪记录
|
||||
*/
|
||||
showRecord: function(){
|
||||
let apply = {
|
||||
communityId: this.applyDetail.communityId,
|
||||
roomName: this.applyDetail.roomName,
|
||||
roomId: this.applyDetail.roomId,
|
||||
ardId: this.applyDetail.ardId,
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: '/pages/myApplyRoom/myApplyRoomRecord?apply=' + JSON.stringify(this.applyDetail)
|
||||
url: '/pages/myApplyRoom/myApplyRoomRecord?apply=' + JSON.stringify(apply)
|
||||
});
|
||||
},
|
||||
}
|
||||
|
||||
@ -100,7 +100,7 @@
|
||||
|
||||
toApplyRoomDetail: function(_item) {
|
||||
this.vc.navigateTo({
|
||||
url: '/pages/myApplyRoom/myApplyRoomDetail?room=' + JSON.stringify(_item)
|
||||
url: '/pages/myApplyRoom/myApplyRoomDetail?ardId=' + _item.ardId + '&communityId=' + _item.communityId
|
||||
});
|
||||
},
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user