shuquAi/pages/user/work/uploadTicket/index.vue

<template>
	<view class="container">
		<!-- #ifdef H5 -->
		<view style="color: #fff;">
			<tn-nav-bar backgroundColor="#26B3A0" :bottomShadow="false">上传完成凭证
				<!-- 	<template slot="right">
					课程购买记录
				</template> -->
			</tn-nav-bar>
			<view :style="{ height: tobheight + 'px' }"></view>
		</view>

		<!-- #endif -->

		<view class="detailBox">
			<view class="label1">
				上传文案
			</view>

			<view class="textArea">
				<textarea placeholder="请输入完成说明" maxlength="200" class="textarea" v-model="textAreaValue"></textarea>
			</view>
			<view class="line">
				<view class="lineCon">

				</view>
			</view>
			<view class="label2">
				图片
			</view>
			<!-- 选择要上传的图片区域 -->
			<view class="chooscontainer">
				<view class="addpicall" v-for="(item,index) in pic_url" :key="index">
					<image style="width: 184rpx;height:186rpx;border-radius: 14rpx;" @click="previewImg(item)"
						:src="item" mode="aspectFill"></image>
					<view @click="delectImg(index)" class="del_btn">×</view>
				</view>
				<view class="addpic" @click="addquesPic" v-show="pic_url.length<9">
					<view class="addPicBox">
						<image src="/static/add.png"></image>
					</view>

				</view>
			</view>
			<view class="line">
				<view class="lineCon">

				</view>
			</view>

			<view class="label2">
				视频
			</view>
			<view class="chooscontainer" style="margin-left: 15rpx;">
				<xfx-image-upload mediaType="video" :max="6" :chooseNum="6" v-model="video_url"
					@uploadSuccess="ceshiUploadSuccess" @chooseSuccess="chooseMobile" @uploadFail="errorUpload"
					@imgDelete="delMobile" name="file" :action="upUrl"></xfx-image-upload>
			</view>
			<view class="line">
				<view class="lineCon">

				</view>
			</view>



			<view class="label2">
				PDF文件
			</view>
			<view class="chooscontainer" style="margin-left: 10rpx;flex-direction: column;">
				<view class="addpic" @click="uploadFile" v-if="!pdfFileName">
					<view class="addPicBox">
						<image src="/static/add.png"></image>
					</view>
				</view>
				<!-- <view class="" v-else> -->
				<view class="">
					{{pdfFileName}}<text v-if="pdfFileName" style="color: #26B3A0;margin-left: 20rpx;"
						@click="pdfFileName='',fileUrl=''">删除</text>
				</view>

			</view>
			<view class="kefuAndBtn">
				<view class="btn" @click="upload">
					上传
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		postTicket
	} from '@/api/tusk/index.js'
	import uploadUrl from '@/common/config.js'
	export default {
		components: {},
		data() {
			return {
				upUrl: uploadUrl.baseUrl,
				pdfFileName: '',

				tobheight: 45,

				pic_url: [],
				textAreaValue: '',


				video_url: [],



				urlConfig: "", //上传的地址,
				mobileData: [], //上传成功的数组

				task_order_id: 0,
				fileUrl: ''
			};
		},
		computed: {

		},
		watch: {

		},
		onLoad(o) {
			this.task_order_id = o.id
		},
		onReady() {

		},
		onShow() {

		},
		onUnload() {

		},
		methods: {
			async upload() {
				// console.log('用户填写的上传完成凭证内容', {
				// 	textAreaValue: this.textAreaValue,
				// 	pic_url: this.pic_url,
				// 	video_url: this.video_url,

				// 	fileUrl: this.fileUrl
				// });
				console.log('上传完成凭证参数', {
					task_order_id: this.task_order_id,
					perform: this.textAreaValue,
					perform_image: this.pic_url,
					perform_video: this.video_url,

					perform_file: [this.fileUrl]
				});
				//return

				let res = await postTicket({
					task_order_id: this.task_order_id,
					perform: this.textAreaValue,
					perform_image: this.pic_url,
					perform_video: this.video_url,

					perform_file: [this.fileUrl]
				})

				if (res.code == 0) {
					// this.detail = res.data
					uni.showToast({
						title: '上传凭证成功',
						icon: 'success'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				}
				console.log('上传完成凭证返回值', res);
			},

			//上传成功
			ceshiUploadSuccess(res) {
				console.log(res);
				/****************
				因为上传接口返回的结构不一致，所以以下代码需要根据实际的接口返回结构开发，在此只是展示如果给数组里添加的过程，仅供参考
				  ***************/
				var _res = JSON.parse(res.data);
				if (_res.code == 0) {
					console.log('文件上传成功返回值', _res);
					this.video_url.push(_res.data.url);
				}
			},
			// 未配置地址
			chooseMobile(res) {
				console.log(res);
			},
			//删除
			delMobile(del, tempFilePaths) {
				this.mobileData = del.tempFilePaths;
				console.log(this.mobileData);
			},
			// 上传失败
			errorUpload(res) {},
			handlePlay(index1) {
				this.video_url.forEach((item, index) => {
					let refId = `myVideo${index}`
					if (index != index1) {
						uni.createVideoContext(refId, this).pause()
					}
				})
			},



			//删除图片
			delectImg(i) {
				this.pic_url.splice(i, 1)
			},
			//点击预览图片
			previewImg(item) {
				uni.previewImage({
					current: item,
					urls: this.pic_url, //存放图片的数组
					loop: true,
					indicator: 'default'
				})
			},
			uploadFile() {
				console.log('1221321');
				let that = this
				uni.chooseFile({
					count: 1, //默认100
					// extension:['.zip','.doc'],
					success: function(res) {
						console.log(res.tempFilePaths[0]);
						// console.log(res.tempFiles[0].name);

						uni.uploadFile({
							url: that.upUrl, //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								console.log(JSON.parse(uploadFileRes.data).data.url);
								that.fileUrl = JSON.parse(uploadFileRes.data).data.url
								that.pdfFileName = res.tempFiles[0].name
								console.log(that.fileUrl, that.pdfFileName);

							}
						});
					}
				});
			},

			// 新增图片
			addquesPic() {
				let _this = this
				let imgList = []
				uni.chooseImage({
					count: 9 - _this.pic_url.length, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						if (_this.pic_url.length >= 9) {
							_this.$toast("只能选择9张照片")
							return
						}
						if (res.tempFilePaths.length > 0) {


							console.log('res.tempFilePaths', res);
							imgList = res.tempFilePaths
							imgList.forEach(async (item, index) => {
								uni.uploadFile({
									//后端接口地址
									url: _this.upUrl,
									filePath: imgList[index],
									name: 'file',
									//上传文件类型
									formData: {
										tag: 'avatar',
										// Authorization: uni.getStorageSync('token') || ''
									},

									// 请求头一定要加，否则 iOS 图片上传会失败
									header: {
										//'content-type': 'multipart/form-data',
										'Authorization': uni.getStorageSync('token') || ''
									},
									success: (res) => {
										console.log('上传图片返回值', res);
										//后端返回的图片名称
										let data = JSON.parse(res.data)
										_this.pic_url = _this.pic_url
											.concat(data.data.url)
									},
								})
							})
						}
					}
				})
			},
		}
	};
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>