179crm_user_app/pages_user/user/myFolder.vue

<template>
	<view class="content">
		<view class="top-fixed">
			<u-search bgColor="#F5F7FA" placeholder="请输入文件名称" v-model="keyword" :showAction="false"></u-search>
		</view>
		<view class="inner">

			<view class="align-center justify-between wrap">
				<view class="box" v-for="(item,index) in dataList" :key="index" @longpress="cancel(item)">
					<view class="img" @click="navgetTo(item)">
						<view class="num">{{item.size||0}}张</view>
					</view>
					<view class="text ellipsis">{{item.fileName}}</view>
				</view>
				<view class="box" @click="open()">
					<view class="add-img">
						<image src="/static/images/user/add_picture_icon24.png" class="w40 h40"></image>
					</view>
					<view class="text">添加文件夹</view>
				</view>
				<view class="box"></view>
			</view>
			<view class="popup-box" v-if="show">
				<view class="info-mask" @click="close()"></view>
				<view class="info-form">
					<view class="title">新建文件夹</view>
					<view class="form-box">
						<view class="form-item">
							<text class="label">文件夹名称</text>
							<input type="text" v-model="fileName" placeholder="请输入文件夹名称" class="form-input" />
						</view>
					</view>
					<view class="btns">
						<view class="sub-btn" @click="add()">确定</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		addAttachment,
		getAttachment,deleteAttachment
	} from '@/api/companyUser.js'
	export default {

		data() {
			return {
				show: false,
				curDate: '',
				markDays: [],
				type: null,
				patientId: null,
				famaleurl: "/static/images/health/female_profile.png",
				maleurl: "/static/images/health/my_heads.png",
				checked: 1,
				dataList: [],
				form: {
					userName: null,
					idCard: null,
					sex: null,
					birthday: null,
					remark: null,
				},
				fileName: null
			};
		},
		onLoad(option) {
			this.getAttachment()
			uni.$on('refreshMyFolder', () => {
				this.getAttachment()
			})
            
		},
		methods: {
			//日历
			onDayClick(data) {
				this.curDate = data.date;
			},
			navgetTo(item) {
				uni.navigateTo({
					url: '/pages_user/user/default?id='+item.attachmentId+'&fileName='+item.fileName
				})
			},
			getAttachment() {
				let data = {
					parentId:0,
					pageNum: 1,
					pageSize: 100
				}
				getAttachment(data).then(
					res => {
						if (res.code == 200) {
							this.dataList = res.data.list
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
			open() {
				this.show = true
				this.fileName=null
				// console.log('close');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			add() {
				let data = {
					// "parentId": 0,
					"type": 0, //文件类型 0:文件夹 1图片 2体检报告
					"fileName": this.fileName //文件名
				}
				addAttachment(data).then(
					res => {
						if (res.code == 200) {
							uni.showToast({
								icon: 'success',
								title: "操作成功",
							});
							this.show = false
							this.getAttachment()
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
			ed(v) {
				console.log(v)
			},
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: '删除成功！',
									});
									that.getAttachment()
								}else{
									uni.showToast({
										icon:'none',
										title: res.msg,
									});
								}
							});
				        } 
						else if (res.cancel) {
							
				        }
				    }
				});
			},
			onItemIconClick(index, item) {
				console.log(index, item)
			},
			
			// 出生日期选择
			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;
		}

		.popup-box {
			position: fixed;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			z-index: 999;
			display: flex;
			justify-content: center;
			align-items: center;

			.info-mask {
				position: fixed;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				background-color: rgba($color: #000000, $alpha: 0.5);
				z-index: 999;
			}

			.info-form {
				z-index: 1000;
				width: 650rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: 0 30upx;
				background: #FFFFFF;
				border-radius: 16upx;

				.title {
					padding: 30rpx 0rpx 15rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 40upx;
					line-height: 44upx;
					font-family: PingFang SC;
					color: #222222;
				}

				.form-box {
					width: 100%;

					.form-item {
						padding: 30upx 0;
						display: flex;
						align-items: flex-start;
						border-bottom: 1px solid #F1F1F1;

						.label {
							width: 160upx;
							text-align: left;
							font-size: 30upx;
							line-height: 44upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #222222;
							flex-shrink: 0;
						}

						input {
							text-align: left;
						}

						.form-input {
							font-size: 34upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #222222;
							text-align: left;
						}

					}
				}

				.btns {
					width: 100%;
					height: 120upx;
					padding: 0 30upx;
					display: flex;
					align-items: center;
					justify-content: center;

					.sub-btn {
						width: 100%;
						height: 88upx;
						line-height: 88upx;
						text-align: center;
						font-size: 30upx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
						background: #008FD3;
						border-radius: 44upx;
					}
				}

			}
		}

		.inner {
			// height: calc(100% - 120upx);
			padding: 20upx;
			padding-top: 130rpx;

			.box {
				width: 210rpx;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				margin-bottom: 20rpx;

				.img {
					width: 100%;
					height: 194rpx;
					background-image: url('/static/images/user/cpk_folder_bg.png');
					background-size: 100%;
					background-repeat: no-repeat;
					display: flex;
					align-items: center;
					justify-content: center;

					.num {
						width: 72rpx;
						height: 40rpx;
						background: #F29D0D;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #FFFFFF;
						text-align: center;
						line-height: 40rpx;
					}
				}

				.add-img {
					width: 210rpx;
					height: 188rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background: #F5F7FA;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
				}

				.text {
					margin-top: 20rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #222426;
					text-align: left;
					display: block;
				}
			}

			.title-box {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #898E91;
				text-align: left;
				padding: 24rpx 0;

				.select-box {
					display: flex;
					align-items: center;
					justify-content: center;

					text {
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #626468;
						margin-left: 8rpx;
					}
				}

				.select-box2 {
					width: 216rpx;
					height: 64rpx;
					background: #FFFFFF;
					border-radius: 32rpx 32rpx 32rpx 32rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					text {
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #626468;
						margin-left: 5rpx;
					}
				}

			}

			.form-box {
				// padding: 0 30upx;
				background: #FFFFFF;
				border-radius: 16upx;
				overflow: hidden;
				// margin-bottom: 20upx;

				.form-title {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #626468;
					text-align: left;
					padding: 30rpx 0;
					display: block;
				}

				.form-item {
					padding: 30upx 0;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #F1F1F1;

					&:last-child {
						border-bottom: none;
					}

					.left {
						display: flex;
						flex-direction: column;
						align-items: flex-start;

						.time {
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #898E91;
							text-align: left;
						}
					}

					.check {

						display: flex;
						align-items: center;
						justify-content: center;

						text {
							// font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #008FD3;
							margin-left: 16rpx;
						}
					}

					.label {
						// width: 150upx;
						text-align: left;
						font-weight: 500;
						font-size: 32rpx;
						color: #222426;
						text-align: left;
					}

					.num {
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 32rpx;
						color: #222426;
						line-height: 34rpx;
						display: flex;
						align-items: center;
					}
				}
			}
		}

		.sub-btn {
			// flex: 1;
			// width: 100%;
			height: 88upx;
			line-height: 88upx;
			text-align: center;
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			background: #008FD3;
			border-radius: 44upx;
			display: flex;
			align-items: center;
			border: 2rpx solid #008FD3;
			justify-content: center;

		}

		.btn-box2 {
			z-index: 9999;
			width: 100%;
			padding: 30upx;
			position: fixed;
			bottom: 0;
			left: 0;
			box-sizing: border-box;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 40rpx;



			.sub-btn2 {
				flex: auto;
				height: 88upx;
				line-height: 88upx;
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
				font-size: 32rpx;
				color: #fff;
				font-family: PingFang SC;
				font-weight: bold;
				background: #FF5030;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				margin-right: 20rpx;

				image {
					margin-right: 16rpx;
				}
			}
		}
	}
</style>