PropertyApp/pages/repair/comps/item.vue

<template>
	<view>
		<MeScroll  :up="up" :down="down" @up="upFn" :fixed="false" @down="downFn" @init="initMeScroll">
			<card @handleRepair="handleRepair" :list="list"></card>
			<!-- 详情 -->
					<u-popup v-model="popupShow" mode="center" width="650" :closeable="true" border-radius="10">
						<view style="padding: 60rpx 40rpx 10rpx;">
							<u-form label-width="150" :model="form" label-position="top">
								<u-form-item label="照片上传" >
									<view class="cu-form-group">
										<view class="grid col-4 grid-square flex-sub">
											<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
												<image :src="imgList[index]" mode="aspectFill"></image>
												<view class="cu-tag bg-red" @tap.stop="DelImg" :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>
								</u-form-item>
								<u-form-item label="处理情况" required=true><u-input v-model="detail"/></u-form-item>
							</u-form>
							<view @click="submit()" class="flex cu-btn bg-blue" style="margin: 60rpx 0 10rpx;padding: 40rpx;">
								确定
							</view>
						</view>
					</u-popup>
		</MeScroll>
	</view>
</template>
<script>
	import MeScroll from '@/components/mescroll-body/mescroll-uni.vue'
	import card from '@/components/repair/repair'
	var app=getApp()
	var _this = this;
	export default {
		components:{
			MeScroll,card
		},
		props: {
			refresh:Boolean,
			type: Number,
			i: Number,
			item:Object
		},
		data() {
			return {
				//照片上传及处理情况
				imgList: [],
				imgMaxNum: 4,
				detail:'',
				detailTemp:{},
				
				//弹出
				popupShow:false,
				
				isInit: false, // 是否初始化
				list: [], // 列表数据
				mescroll: null, // mescroll 对象
				// 上拉配置参数
				up: {
					noMoreSize: 5, 
					auto: true,
					page: {
						page: 0,
						size: 10
					}
				},
				// 下拉配置参数
				down: {
					use: true, 
					auto: false
				}
			}
		},
		watch:{
			refresh() {
				console.log("我要刷新了");
				this.mescroll.resetUpScroll()
			},
			type(val) {
				if(!this.isInit && val === this.i) {
					this.mescroll.resetUpScroll()
				}
			}
		},
		mounted() {
			if(!this.isInit && this.i === 0) {
				this.mescroll.resetUpScroll()
			}
		},
		methods: {
			/**
			 * @param {Object} item
			 * 点击处理工单
			 */
			handleRepair(item){
				console.log("进入时item：", item)
				this.detailTemp = item,
				this.popupShow=true,
				this.imgList = [],
				this.detail = ''
			},
			/**
			 * 确认提交工单情况s
			 */
			submit(){
				this.detailTemp.picArr = this.imgList.join(",")
				console.log("临时item",this.detailTemp)
				// this.detailTemp.
				this.$showModel('确定把该工单置为已处理状态？').then(res=>{
					if(this.detail == ''){
						this.$u.toast('请填写处理情况')
						return
					}else{
						this.detailTemp.handleStatus=1,
						this.detailTemp.estimateStatus=0
						this.$api.estateRepair.submit(this.detailTemp).then(res=>{
							this.$u.toast('操作成功')
							this.mescroll.resetUpScroll()
							this.popupShow=false
						})
					}
				})
			},
			/**
			 * @param {Object} index
			 * 拍照或者从图库选择照片上传照片
			 */
			ChooseImage() {
				_this = this;
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera','album'], //从相机、相册选择
					success: (res) => {
						var tempFilePaths = res.tempFilePaths;
						if (_this.imgList.length+tempFilePaths.length > _this.imgMaxNum) {
							uni.showToast({
								title: '超过上传图片的最大数量',
								icon: 'none'
							})
						} else {
							if (_this.imgList.length != 0) {
								_this.imgList = _this.imgList.concat(res.tempFilePaths);
							} else {
								_this.imgList = res.tempFilePaths;
							}
							for (var i = 0; i < tempFilePaths.length; i++) { 
								uni.uploadFile({
									url: "https://www.example.com/upload",
									filePath: tempFilePaths[i],
									name: "file", // 一定要与后台@RequestParam("file") MultipartFile变量名一致
									success(res) {
										console.log(res);
									}
								});
							}
						}
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				this.imgList.splice(e.currentTarget.dataset.index, 1)
			},
			
			/**
			 * @param {Object} mescroll 初始化组件
			 */
			initMeScroll(mescroll) {
				this.mescroll = mescroll
			},
			/**
			 * @param {Object} mescroll 上拉回调
			 */
			upFn(mescroll) {
				let that=this
				let data={
					current:mescroll.num,
					size:mescroll.size,
					handleStatus:this.item.value
				}
				// if (this.item.value==2) {
				// 	data.handleStatus=1
				// 	data.estimateStatus=0
				// }
				try{
					this.$api.estateRepair.page(data).then(res=>{
						let data=res.data.records
						console.log(data);
						let length=data.length
						mescroll.endBySize(length, res.data.total);
						if(mescroll.num == 1) that.list = []; 
						that.list=that.list.concat(data); 
					})
				}catch(e){
					mescroll.endErr();
				}
			},
			/**
			 * 下拉回调
			 * */
			downFn(mescroll) {
				setTimeout(()=>{
					this.list=[]
					this.mescroll.resetUpScroll()
				},1500)
			},
		}
	}
</script>

<style lang="scss" scoped>
	view{
		box-sizing: border-box;
	}
</style>