upload.vue 7.1 KB
<template>
	<view class="main" style="display: flex; flex-wrap: wrap;  margin-top: 40rpx;">
		<view class="box" v-for="(item,index) in fileList">
			<u-upload :fileList="item.url" @afterRead="(event) => afterRead(event,item,index)" @delete="(event) => deletePic(event,index)"
				width="200rpx" height="200rpx" name="1" multiple :maxCount="1">
			<!-- 	<image :src="imggList[index].url"
					mode="widthFix" style="width: 220rpx;height:220rpx;"></image> -->
				</u-upload>
				
			<!-- <u-upload ref="uUpload" :action="action" :auto-upload="true" ></u-upload> -->
			<!-- <u-upload
				:action="action" :auto-upload="true" :fileList="item.url"
				></u-upload> -->
			<p>{{item.title}}</p>
		</view>

		<view class="btnupload" style="margin-top: 50rpx;display: flex;justify-content: center;">
			<u-button shape="circle" text="确认发布" style="color: white;"
				color="linear-gradient(to right, #46BAEC,#2F67D3)" @click="submit"></u-button>
		</view>
	</view>
</template>

<script>
	import config from '@/common/config'
	export default {
		data() {
			return {
				action: config.baseUrl + '/api/common/upload',
				imggList:[],
				info: {},
				flag: null,
				fileList: [
					// {
					// 	id: 3,
					// 	title: '整机左前45°',
					// 	url: [
					// 		{
					// 			url:'https://shebeiwang.oss-cn-zhangjiakou.aliyuncs.com/uploads/20230710/a9c9acd8ae4a905c3a60335661a099e5.png'
					// 		}
					// 	]
					// },
					// {
					// 	id: 3,
					// 	title: '整机右后45°',
					// 	url: []
					// },
					// {
					// 	id: 3,
					// 	title: '发动机左侧',
					// 	url: []
					// },
					// {
					// 	id: 3,
					// 	title: '发动机右侧',
					// 	url: []
					// },
					// {
					// 	id: 3,
					// 	title: '变速箱°',
					// 	url: []
					// },
					// {
					// 	id: 3,
					// 	title: '驾驶室工作台',
					// 	url: []
					// },
					// {
					// 	id: 3,
					// 	title: '工作装置整体',
					// 	url: []
					// },
					// {
					// 	id: 3,
					// 	title: '整机铭牌',
					// 	url: []
					// },
					// {
					// 	id: 3,
					// 	title: '环保信息铭牌',
					// 	url: []
					// }
				],
			}
		},
		onLoad(option) {
			let pages = getCurrentPages();  //获取所有页面栈实例列表
			let prevPage = pages[ pages.length - 2 ];  //上一页页面实例
			prevPage.$vm.isFlash = 1;
			
			console.log(option);
			this.flag = option.val
			if (option.info) {
				this.info = JSON.parse(option.info)
				if(this.info.images_json){
					this.fileList = JSON.parse(this.info.images_json)
				}
				console.log(this.info);
			}
			uni.$u.http.post('/api/equip/equip_image',{
				category_id: this.info.category_id
			}).then(res => {
				console.log(res);
				if(res.code == 0){
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				}
				this.imggList = res.data[0].image_arr.map(item => {
					return{
						url: item.pic
					}
				})
				if(this.fileList.length == 0){
					this.fileList = res.data[0].image_arr.map(item => {
						return{
							title: item.value,
							url:[
								
							]
						}
					})
				}
				
			}).catch(err => {
				uni.showToast({
					title:err.msg
				})
			})
			// this.fileList = JSON.parse(this.info.images_json) 
			// console.log(this.fileList); 
			// let arr
			// this.fileList.forEach((item,index) => {
			//   this.fileList[index] = Object.keys(item).map(val => ({
			// 	        title: val,
			// 	        url: item[val]
			// 	    }))
			// })
			// this.fileList = this.fileList.flat(Infinity)
			// console.log(this.fileList);
		},
		methods: {
			submit() {
				let p = JSON.parse(JSON.stringify(this.info))
				delete p.name
				delete p.brand_name
				delete p.xh_name
				// let images_json = this.fileList.map(item => {
				// 	return{
				// 		[item.title]: item.url && item.url[0] && item.url[0].thumb || ''
				// 	}
				// });
				let curAds = this.info
				if((uni.getStorageSync('detailAds') == '') || (uni.getStorageSync('detailAds') !== curAds) ){
					uni.setStorageSync('detailAds',this.info.region)
				}
				let ads = uni.getStorageSync('detailAds')
				p.dList.forEach(item => {
					if(item.type == 1 ){
						item.value = parseInt(item.value)
					}else if(item.type == 2){
						item.value = parseFloat(item.value)
					}
				})
				p.xhList.forEach(item => {
					if(item.type == 1 ){
						item.value = parseInt(item.value)
					}else if(item.type == 2){
						item.value = parseFloat(item.value)
					}
				})
				p.category_fields_json = JSON.stringify(p.dList)
				p.xinghao_fields_json = JSON.stringify(p.xhList)
				delete p.dList
				delete p.xhList
				delete p.price_unit
				p.address = ads
				p.province = ads.slice(0, 3)
				p.city = ads.slice(3, 6)
				p.region = ads.slice(6, 9)
				uni.$u.http.post(this.flag === "sale" ? '/api/equip/add_equip_sale' : '/api/equip/add_equip_hire', {
					...p,
					images_json: JSON.stringify(this.fileList)
				}).then(res => {

					uni.showToast({
						title: res.msg,
						icon: 'none'
					})

					if (res.code == 1) {

						let pagearr = getCurrentPages(); //获取应用页面栈
						let currentPage = pagearr[pagearr.length - 2]; //获取当前页面信息
						console.log('option:', currentPage) //获取页面传递的信息
						currentPage.$vm.category_id = ''
						currentPage.$vm.name = ''
						setTimeout(() => {
							uni.navigateBack({
								delta: 3
							})
						}, 1500)
					}


				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: 'none'
					})
					uni.reLaunch({
						url: 'pages/index/buy'
					})
				})
			},
			// 删除图片
			deletePic(event,idx) {
				this.fileList[idx].url = []
			},
			// 新增图片
			async afterRead(event, item, index) {
				// 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList[index].url.length
				lists.map((item) => {
					this.fileList[index].url.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					console.log(result, "数据");
					let item = this.fileList[index].url[fileListLen]
					this.fileList[index].url.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.action,
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						header: {
							token: uni.getStorageSync('token')
						},
						success: (res) => {
							console.log('是是撒', res);
							setTimeout(() => {
								resolve(JSON.parse(res.data).data.fullurl)
							}, 1000)
						}
					});
				})
			},
		}
	}
</script>

<style lang="scss">
	.main {
		padding: 0 32rpx;
	}

	.box {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 18rpx;
		margin-top: 18rpx;
		color: #000000e6;
		font-size: 28rpx;
		font-weight: 400;
		p{
			margin-right: 18rpx;
		}
		
		&:nth-child(3n){
			margin-right: 0;
		}
	}
	.btnupload{
		width: 702rpx;
		margin: 0 auto;
	}
</style>