assess-app/page_subpack/transition/components/add-file.vue

<template>
	<view class="text-color-12">
		<view class="p-30">
      <en-input :label="'文件密码'"
                v-model="msgData.password" type="digit" placeholder="文件有密码必填"></en-input>
			<textarea class="sys-from-background-color r-20 textarea p-20 m-t20" name="" id="" cols="30" rows="10"
				v-model="msgData.msg" :maxlength="999" :placeholder="placeholder"></textarea>
			<view class="size-26 m-tb20 sys-weight-600">上传附件</view>
			<view class="">
				<view class="sys-from-background-color row-justify-sb center p-20 m-b16 r-20"
					v-for="(file,fileIndex) in msgData.file_list" :key="fileIndex">
					<view class="row-c">
						<image class="wh-60 m-r20" src="/page_subpack/static/img/task-details/icon-pdf.png"
							v-if="file.file_type===1" mode="aspectFill"></image>
						<image class="wh-60 m-r20" src="/page_subpack/static/img/task-details/icon-word.png"
							v-else-if="file.file_type===2" mode="aspectFill"> </image>
						<image class="wh-60 m-r20" src="/page_subpack/static/img/task-details/icon-excel.png" v-else
							mode="aspectFill"> </image>
						<view class="size-24 text-color-666 ellipsis" style="max-width: 500rpx;"> {{file.name}}</view>
					</view>
					<image class="delete-iocn wh-25" src="/page_subpack/static/img/task-details/hint-subtract.png"
						@click.stop="delFile(fileIndex)" mode=""></image>
				</view>
				<view class="sys-from-background-color row-c p-20 r-20" @click.stop="uploadingWord()" v-if="is_multifile===true || msgData.file_list.length<1">
					<image class="wh-80 m-r20" src="/page_subpack/static/img/task-details/add-file.png"
						mode="aspectFill">
					</image>
					<view class="column">
						<text class="select-file size-24">选择文件</text>
						<text class="size-24 text-color-666">支持上传文件：pdf</text>
					</view>
				</view>
			</view>
		</view>
		<EnButton @onSubmit="clickBut"></EnButton>

	</view>
</template>

<script>
	import tools from "@/service/tools";
	import txUploadFile from "@/service/txOssSts";
  import {
    addTransferPdf, cancelPassword
  } from "@/api/transfer";
  import EnInput from "@/components/en-from/en-input/en-input.vue";

	export default {
    components: {EnInput},
		props: {
			is_button: {
				type: Boolean,
				default: false
			},
      is_multifile: {
        type: Boolean,
        default: true
      },
			placeholder: {
				default: '留个言吧~~'
			}

		},
		data() {
			return {
				msgData: {
					business_id: '',
					msg: '',
          password: '',
					reply_id: 0,
					msg_img: [],
					file_list: [],
				},
				videoUrl: '',
				isAjax: false,
			}
		},

		methods: {
      cancelPassword(){
        cancelPassword(this.msgData).then(res=>{
          if(res.code===1){
            this.msgData.file_list=res.data
            this.addTransferPdf()
          }else {
            tools.error(res.msg)
            this.isAjax = false;
          }
        })
      },

			clickBut() {
				if (this.isAjax) {
					return;
				}
				if(this.msgData.password!==''){
          this.cancelPassword()
        }else {
          this.addTransferPdf()
        }
			},
      addTransferPdf(){
        addTransferPdf(this.msgData).then((res) => {
          if (res.code === 1) {
            tools.success(res.msg)
            this.$emit('newMsg')
            this.msgData.msg = ''
            this.msgData.password = ''
            this.msgData.file_list = []
          } else {
            tools.error(res.msg)

          }
          this.isAjax = false;
        })
      },
			delFile(fileIndex) {
				this.msgData.file_list.splice(fileIndex, 1)
				this.fileNum = -1
			},

			uploadingWord() {
				tools.showLoading()
				wx.chooseMessageFile({
					count: 5, //默认100
					type: 'file', //默认100
					extension: ['pdf'],
					success: (res) => {
						console.log('---------------------------------------------');
						console.log(res);
						if (res.tempFiles.length > 0) {
							res.tempFiles.forEach((tempFilePath) => {
								console.log(tempFilePath)
								txUploadFile(tempFilePath.path).then((data) => {
									if (!data) {
										tools.error('上传失败')
									} else {
										console.log({
											'name': tempFilePath.name,
											'file_type': tools.getFileType(data
												.Location),
											'url': data.Location
										})
										this.msgData.file_list.push({
											'name': tempFilePath.name,
											'file_type': tools.getFileType(data
												.Location),
											'url': data.Location
										})
									}
								})
							})
							tools.hideLoading()
						} else {
							tools.error("请选择上传文件")
							tools.hideLoading()
						}
					},
					fail: (e) => {
						tools.hideLoading()
					}
				});

			},

		}
	}
</script>

<style lang="scss" scoped>
	.nav {
		font-size: 18px;
		font-weight: bold;
		text-align: center;
		padding: 30rpx 0 15rpx;
		background: #fff;
	}

	.textarea {
		width: calc(100% - 40rpx);
		max-height: 100rpx;
		font-size: 28rpx;
	}

	.popup-block {
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		overflow: hidden;
		background-color: #f5f5f5;

		.popup-row {
			height: 100rpx;
			background-color: #fff;
			text-align: center;
			line-height: 100rpx;
			border-bottom: 2rpx solid #f5f5f5;

			&:nth-child(4) {
				margin-bottom: 20rpx;
			}

			&:last-child {
				height: 112rpx;
				border: none;
				line-height: 112rpx;
			}

			&:active {
				background-color: rgb(244, 244, 244);
			}
		}
	}

	.image-content {
		display: flex;
		flex-wrap: wrap;

		.image-box {
			position: relative;

			.image-item {
				width: 130rpx;
				height: 130rpx;
				border-radius: 10rpx;
			}

			.video-icon {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			.delete-iocn {
				position: absolute;
				right: -10rpx;
				top: -10rpx;
			}
		}

		.add-image {
			width: 128rpx;
			height: 128rpx;
			border-radius: 10rpx;
			background: #F7F9FE;
			border: 1rpx dashed #999999;
		}
	}

	.select-file {
		width: 132rpx;
		height: 44rpx;
		background: #FFFFFF;
		border-radius: 6rpx;
		border: 1rpx solid #DDDDDD;
		line-height: 44rpx;
		text-align: center;
		display: inline-block;
		margin-bottom: 10rpx;
	}
</style>