179crm_user_app/pages_user/user/default.vue

<template>
	<view class="content">
		<view class="inner">
			<view class="align-center justify-between wrap">
				<view class="add-img" @tap="chooseImage">
					<image src="/static/images/user/add_picture_icon24.png" class="w40 h40"></image>
					
				</view>
				<!-- <view class="img" v-for="(item,index) in imgList" :key="index" @tap="viewImage" :data-url="imgList[index]">
					<image :src="item"></image>
					<image class="close-img" src="@/static/images/close32.png" mode="" @tap.stop="delImg" :data-index="index"></image>
					<view class="text">
						<view class="title">体检报告</view>
						<view class="time">2021-04-21</view>
					</view>
				</view> -->
				<view class="img" v-for="(item,index) in dataList" :key="index" @tap="viewImage" :data-url="dataList[index]" @longpress="cancel(item)">
					<image :src="item.url" ></image>
					<!-- <image class="close-img" src="@/static/images/close32.png" mode="" @tap.stop="delImg" :data-index="index"></image> -->
					<view class="text">
						<view class="title">体检报告</view>
						<view class="time">{{utils.timeFormat(item.createTime,'yyyy-mm-dd')}}</view>
					</view>
				</view>
				<view class="img"></view>
			</view>
		</view>
	</view>
</template>

<script>
	
	import {
		addAttachment,addUrl,
		getAttachment,deleteAttachment
	} from '@/api/companyUser.js'
	export default {
		
		data() {
			return {
				curDate: '',
				markDays: [],
				type: null,
				patientId: null,
				famaleurl: "/static/images/health/female_profile.png",
				maleurl: "/static/images/health/my_heads.png",
				checked: 1,
				dataList:[],
				imgList:[],
				photos:[],
				list:[]
			};
		},
		onLoad(option) {
			console.log(option)
			if(option.id){
			this.parentId=option.id
			uni.setNavigationBarTitle({
			title: option.fileName
			});
			this.getAttachment()
			}
         
		},
		methods: {
			//日历
			onDayClick(data) {
				this.curDate = data.date;
			},
			navgetTo() {
				uni.navigateTo({
					url: '/pages_user/user/addIndicator'
				})
			},
			getAttachment() {
				let data = {
					parentId:this.parentId,
					pageNum: 1,
					pageSize: 100
				}
				getAttachment(data).then(
					res => {
						if (res.code == 200) {
							this.dataList = res.data.list
							this.list=res.data.list.map(item=>item.url)
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
			cancel(item){
				var that=this
							uni.showModal({
							    title: '提示',
							    content: '确定删除文件吗',
							    success: function (res) {
							        if (res.confirm) {
										deleteAttachment(item.attachmentId).then(res => {
											if(res.code==200){
												uni.showToast({
													icon:'success',
													title: '删除成功！',
												});
												uni.$emit('refreshMyFolder');
												that.getAttachment()
												 
											}else{
												uni.showToast({
													icon:'none',
													title: res.msg,
												});
											}
										});
							        } 
									else if (res.cancel) {
										
							        }
							    }
							});
						},
		// 选择上传的图片
		chooseImage() {
			console.log('图片')
			var that = this;
			uni.showActionSheet({
				itemList: ['相册', '拍照'],
				success: function(res) {
					if (res.tapIndex == 0) {
						//从相册选择
						that.chooseImageFunction('album')
					} else if (res.tapIndex == 1) {
						//拍照
						that.chooseImageFunction('camera')
					}
				},
				fail: function(res) {
					
				}
			});
		},
		chooseImageFunction: function(type) {
			var that = this;
			uni.chooseImage({
				count:10, // 默认9
				sourceType: [type],
				success: (res) => {
					console.log(res,'res')
					uni.uploadFile({
						url: uni.getStorageSync('requestPath')+'/app/common/uploadOSS', //仅为示例，非真实的接口地址
						filePath: res.tempFilePaths[0],
						name: 'file',
						formData: {
							'user': 'test'  // 上传附带参数
						},
						success: (uploadFileRes) => {
							console.log(uploadFileRes.data,'data')
							if (this.imgList.length != 0) {
								this.imgList = this.imgList.concat(res.tempFilePaths)
							} else {
								this.imgList = res.tempFilePaths
							}
							this.photos=this.photos.concat(JSON.parse(uploadFileRes.data).url)
							this.addAttachment()
						}
					}); 
				}
			});
		},
		addAttachment(){
			var data={
				type:1,
				urlList:this.photos,
				parentId:this.parentId
			}
			addUrl(data).then(
				res => {
					if (res.code == 200) {
						uni.showToast({
							icon: 'success',
							title: "操作成功",
						});
						uni.$emit('refreshMyFolder');
						this.getAttachment()
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg,
						});
					}
				},
				rej => {}
			);
		},
		
		// 查看图片
		viewImage(e) {
			var data=e.currentTarget.dataset.url
			// console.log(data.url,'url')
			uni.previewImage({
				urls: this.list,
				current: data.url
			});
		},
		// 删除上传的图片
		delImg(e) {
			var that = this;
			uni.showModal({
				title: '提示',
				content: '确定要删除照片吗？',
				cancelText: '取消',
				confirmText: '确定',
				success: res => {
					if (res.confirm) {
						that.imgList.splice(e.currentTarget.dataset.index, 1)
						this.photos.splice(e.currentTarget.dataset.index, 1);
					}
				},
			})
		},
			// 出生日期选择
			bindDateChange: function(e) {
				this.form.birthday = e.target.value
			},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background: #fff;
	}

	.content {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.top-fixed {
			position: absolute;
			top: 0;
			background: #FFFFFF;
			padding: 20rpx;
			width: 100%;
			box-sizing: border-box;
		}

		.inner {
			// height: calc(100% - 120upx);
			padding:20upx;
			// padding-top: 110rpx;
            .add-img{
				width: 226rpx;
				height: 264rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #F5F7FA;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
margin-bottom:20rpx ;
			}
			.img{
				width: 226rpx;
				height: 264rpx;
				border-radius:16rpx;
				overflow: hidden;
				position: relative;
				margin-bottom:20rpx ;
				image{
					width: 100%;
					height: 100%;
				}

				.close-img{
					width: 32upx;
					height: 32upx;
					position: absolute;
					top:2upx;
					right: 2upx;
				}
				.text{
					position: absolute;
					bottom: 0;
					z-index: 9;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					width: 100%;
					padding: 20rpx;
					    box-sizing: border-box;
					.title{
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #FFFFFF;
						text-align: left;
					}
					.time{
						font-weight: 400;
						font-size: 22rpx;
						color: #FFFFFF;
						text-align: left;
					}
				}
			}
			
		}

	}
</style>