jje_spread_uniapp/components/addRemarkPopup/addRemarkPopup.vue

<template>
	<view>
		<uni-popup ref="addRemarkPopup" type="center">
			<view class="addRemarkPopup flex-col">
				<view class="content">
					<view class="flex-row justify-between item">
						<text class="label">备注：</text>
						<textarea class="textarea"  v-model="expandUser.remake" placeholder-style="color:#999999" placeholder="请输入备注"/>
					</view>

					<view class="flex-row justify-between item">
						<view class="flex-col justify-center">
							<text class="label">备注地址：</text>
						</view>
						<input class="input"  v-model="expandUser.remarkAddress" placeholder="请输入备注地址" />
					</view>

					<view class="flex-row justify-between item">
						<text class="label">现场照片：</text>
						<view class="imageList">

							<view class="addImage leftFloat" v-for="(item,index) in scenePhotoArr" :key="index">
								<image  :src="item.url"></image>
							</view>

							<view class="addImage leftFloat flex-col justify-center" @click="updateAvatar">
								<uni-icons type="plusempty" size="30"></uni-icons>
								<text>现场照片</text>
							</view>
						</view>
					</view>
				</view>
				<view class="flex-row">
					<button class="button" type="primary" @click="addRemark">确定</button>
					<button class="button" @click="closePopup">取消</button>
				</view>

			</view>
		</uni-popup>
	</view>
</template>

<script>
	import Button from "../../uni_modules/uv-ui-tools/libs/mixin/button";
	export default {
		name:"addRemarkPopup",
		components: {Button},
		data() {
			return {
				ilist:3,
				expandUser:{},
				scenePhotoArr:[],
				param:{
					id:'',
					remake:'',
					remarkAddress:'',
					scenePhoto:''
				}
			};
		},
		methods:{



			updateAvatar(){
				let that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
						let tempUrl = res.tempFiles[0].path
						uni.uploadFile({
							url: that.$baseUrl + '/resource/oss/upload', //仅为示例，非真实的接口地址
							filePath:tempUrl,
							name: 'file',
							header: {
								// "Content-Type": "multipart/form-data",
								// 'X-Access-Token': uni.getStorageSync('token'),
								'Authorization': 'Bearer ' + uni.getStorageSync('accessToken'),
							},
							success: (uploadFileRes) => {
								let res = JSON.parse(uploadFileRes.data)
								console.log('+++++++++++++++++chooseavatar+++++++++++++++++++++++',uploadFileRes.data)
								console.log('+++++++++++++++++res.data+++++++++++++++++++++++',res.data)
								res.data.url = res.data.url.replace(/^http:/, "https:")
								that.scenePhotoArr.push(res.data)

							}
						});

					}
				})

			},


			addRemark(){

				let scenePhotoStr =''
				this.scenePhotoArr.forEach(i=>{
					if (scenePhotoStr === ''){
						scenePhotoStr += i.ossId
					}else {
						scenePhotoStr +=  ',' + i.ossId
					}
				})
				this.$api.service.addRemark({
					id:this.expandUser.id,
					remake:this.expandUser.remake,
					remarkAddress:this.expandUser.remarkAddress,
					scenePhoto:scenePhotoStr
				}).then(res=>{
					uni.$u.toast('添加成功')
					this.closePopup()
				})
				console.log(this.expandUser)
			},


			closePopup(){
				this.$refs.addRemarkPopup.close()
			},


			openPopup(id){
				this.param.id = id
				this.expandUser = {}
				this.scenePhotoArr = []

				this.expandUserDetail(id)
				this.$refs.addRemarkPopup.open()
			},


			expandUserDetail(id){
				console.log('++++++++++++++++++++++++++++')
				this.$api.service.expandUserDetail({
					expandUserId:id
				}).then(async res=>{
					this.expandUser = res.data.data
					if (this.expandUser.scenePhoto){
						let arr =  this.expandUser.scenePhoto.split(',')
						for (const imgId of arr) {
							let oss = await this.$commonUtils.getImgUrlByOssId(imgId)
							this.scenePhotoArr.push(oss[0])
							this.$set(this.scenePhotoArr)
						}
					}

					this.$set(this.expandUser)
					console.log('人员详情',this.expandUser)
					console.log('现场图片',this.scenePhotoArr)
				})
			},

		}
	}
</script>

<style scoped lang="less">

	.addRemarkPopup{
		width: 750rpx;
		height: 900rpx;
		background: #FFFFFF;
	}
	.content{
		padding: 0 32rpx;
		height: 730rpx;
		overflow: auto;

	}
	.textarea{
		width: 500rpx;
		height: 250rpx;
		border: 2rpx solid #f7f7f7;
		font-size: 26rpx;
	}
	.input{
		width: 500rpx;
		height: 70rpx;
		border: 2rpx solid #f7f7f7;
		font-size: 26rpx;
	}

	.item{
		margin-top: 20rpx;
	}
	.label{
		font-size: 28rpx;
	}
	.button{
		width: 200rpx;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 30rpx;
		margin-top: 50rpx;
	}
	.imageList{
		width: 530rpx;
		min-height: 240rpx;
	}
	.addImage{
		width: 200rpx;
		height: 240rpx;
		border: 2rpx solid #f7f7f7;
		align-items: center;
		font-size: 28rpx;
		line-height: 80rpx;
		margin-left: 30rpx;
		margin-top: 10rpx;
		image{
			width: 200rpx;
			height: 240rpx;
		}
	}

	.leftFloat{
		float: left;
	}


</style>