shangmenanmo/additionalvue/news3/components/afterSales.vue

<template>
<view>
	<u-popup v-model="afterSale" width="80%" border-radius="10" :closeable="true" mode="center">
		<view class="afterSales">
			<view class="filterTitle">
				确定转移至售后
			</view>
			<view class="filterItem">
				<view class="filterItemContent">
					<view class="itemTitle">
						上传照片 <text style="color:#FF5042">*</text><text>最多可传5张图片</text>
					</view>
					<u-upload
						:fileList="finishImageList"
						:previewFullImage="true" 
						@afterRead="afterRead"
						:maxCount="8" width="180" height="180"
						upload-text="上传照片"
						@delete="deletePic"
						name="1"
						multiple
					></u-upload>
				</view>
				<view class="filterItemContent">
					<view class="itemTitle">
						备注
					</view>
					<u-input v-model="remark" placeholder="请输入您的留言" type="textarea"  :auto-height="true" />
				</view>
				
			</view>
			<view class="submit">
				确定
			</view>
		</view>
	</u-popup>
</view>
</template>

<script>
export default{
	data(){
		return{
			afterSale:false,
			finishImageList:[],
			remark:'',
		}
	},
	methods:{
		// 新增图片
		async afterRead(event) {
			
			let lists = [].concat(event.file)
			let fileListLen = this[`fileList${event.name}`].length
			lists.map((item) => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				})
			})
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url)
				
				if(JSON.parse(result).code==1){
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}else{
					this[`fileList${event.name}`].splice(fileListLen, 1)
				}
				
			}
			
		},
		//上传照片
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				// let a = uni.uploadFile({
				// 	url: this.baseUrl+'/api/common/upload', // 仅为示例，非真实的接口地址
				// 	filePath: url,
				// 	name: 'file',
				// 	formData: {
				// 		user: 'test',
				// 		token:getToken()
				// 	},
				// 	success: (res) => {
				// 		if(JSON.parse(res.data).code==1){
				// 			setTimeout(() => {
				// 				this.finishImageList.push({url:JSON.parse(res.data).data.fullurl,path:JSON.parse(res.data).data.url})
				// 				resolve(res.data)
				// 			}, 1000)
				// 		}else{
				// 			uni.$u.toast(JSON.parse(res.data).msg)
							
				// 			resolve(res.data)
				// 		}
				// 	},
				// 	fail: (res) => {
				// 		console.log(res,"rrr")
				// 	}
				// });
			})
		},
		//删除图片
		deletePic(event) {
			
			this.finishImageList.splice(event.index, 1)
		},
	}
}
</script>

<style lang="scss" scoped>

.afterSales{
	padding:32upx;
	.filterTitle{
		font-size: 32upx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 700;
		color: #303030;
		text-align: center;
	}
	.filterItem{
		.filterItemContent{
			margin-top:40upx;
			.itemTitle{
				
				font-size: 28upx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #303030;
				margin-bottom:20upx;
				text{
				
					font-size: 28upx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #B5B5B5;
				
				}
				
			}
			
			
		}
		::v-deep .u-input{
			height: 160upx;
			background: #F7F8FA;
			border-radius: 3px 3px 3px 3px;
			opacity: 1;
			
		}
		::v-deep .u-input__textarea{
			padding: 20upx;
		}
	}
	.submit{
		width: 100%;
		height: 100rpx;
		background: #FFAAA4;
		border-radius: 6px 6px 6px 6px;
		opacity: 1;
		line-height: 100rpx;
		font-size: 28upx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		margin-top:40upx;
		text-align: center;
	}
}
</style>