recycapp/pages/index/cancleOrder.vue

<template>
	<view class="content">
		<u-popup :show="cancleShow" @open="open" :round="30">
			<view class="cancleBox">
				<view class="flex-between" style="margin-bottom: 50rpx;">
					<text class="cancleTitle">取消原因</text>
					<u-icon name="close" color="#333333" size="16" bold @click="close"></u-icon>
				</view>
				<view class="" v-for="item in cancleList">
					<view class="checkBox">
						<image v-if="cancleType==item.id" @click="selecCancle(0)"
							:src="path+'/assets/img/icon/selected.png'" class="checkIcon"></image>
						<image v-else @click="selecCancle(item.id,item.name)" :src="path+'/assets/img/icon/noSelected.png'"
							class="checkIcon"></image>
						<view class="checkText" :class="{checkEle:cancleType==item.id}">
							{{item.name}}
						</view>
					</view>
					<view class="uploadBox" v-show="cancleType==4 && item.id==4">
						<view class="text1">上传现场照片或备注已电联确认</view>
						<u-upload
						    :fileList="fileList1"
						    @afterRead="afterRead"
						    @delete="deletePic"
						    name="1"
						    multiple
						    :maxCount="10"
						  ></u-upload>
					</view>
				</view>
				<view class="flex-around" style="margin-top: 20rpx;">
					<view class="cancleBtn flex-center" @click="close">取消</view>
					<view class="conformBtn flex-center" @click="conform2">确认</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props:{
			cancleShow: {
			    type: Boolean,
				default: false
			},
		},
		data() {
			return {
				fileList1: [],
				cancleType: '',
				cancleList: [{
						id: 1,
						name: '时间冲突'
					},
					{
						id: 2,
						name: '多次联系不上'
					},
					{
						id: 3,
						name: '操作失误'
					},
					{
						id: 4,
						name: '不符合回收标准'
					},
					{
						id: 5,
						name: '地址错误'
					},
					{
						id: 6,
						name: '超出服务范围'
					},
					{
						id: 7,
						name: '其他'
					}
				],
				imgList: [],
				reasonName: ''
			}
		},
		onShow() {
			
		},
		onHide() {},
		onLoad() {
			
		},
		onShareAppMessage(res) {
			
		},
		onReachBottom() {},
		methods: {
			conform2(){
				let data = {
					id: this.cancleType,
					name: this.reasonName
				}
				console.log('dsss')
				if(this.cancleType == 4){
					data.list = this.imgList;
					this.$emit('cancleReason', data)
				}else{
					this.$emit('cancleReason', data)
				}
			},
			selecCancle(id,name) {
				console.log('ddddddd')
				this.cancleType = id;
				this.reasonName = name
			},
			open(){
				
			},
			close(){
				this.$emit('closeCancle');
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				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);
				  let item = this[`fileList${event.name}`][fileListLen];
				  this[`fileList${event.name}`].splice(
					fileListLen,
					1,
					Object.assign(item, {
					  status: "success",
					  message: "",
					  url: result,
					})
				  );
				  fileListLen++;
				}
			},
			uploadFilePromise(url) {
				console.log(url, 'dfff')
				let _this = this;
				return new Promise((resolve, reject) => {
					_this.$api.uploadImg(url,res=>{
						console.log(res,'=====')
						if(res.code == '1'){
							setTimeout(() => {
								resolve(res.data.data);
							}, 1000);
							// resolve(res.data);
							this.imgList= this.imgList.concat([res.data.url])
							// this.$emit('uploadImg',this.imgList)
							console.log(res.data, this.imgList, '-----------')
						}else{ 
							uni.showToast({ title: res.msg , icon: 'fail' })
						}
					}) 
					console.log(this.imgList)
				 //  let a = uni.uploadFile({
					// url: "https://admin.dbcdq.cn/api/feedback/upload", // 仅为示例，非真实的接口地址
					// filePath: url,
					// name: "file",
					// formData: {
					//   user: "test",
					// },
					// success: (res) => {
					//   setTimeout(() => {
					// 	resolve(res.data.data);
					//   }, 1000);
					// },
				 //  });
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: rgba(251, 249, 256, 1)
	}
	.cancleBox {
		padding: 58rpx 49rpx;

		.cancleTitle {
			font-weight: bold;
			font-size: 36rpx;
			color: #000000;
			// margin-bottom: 50rpx;
		}

		.checkBox {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			padding: 30rpx 0;

			.checkIcon {
				width: 32rpx;
				height: 32rpx;
			}

			.checkText {
				font-weight: 500;
				font-size: 30rpx;
				color: #666666;
				margin-left: 18rpx;
			}

			.checkEle {
				color: #FB8F0C;
			}
		}
	}	
	.uploadBox{
		padding: 0 45rpx;
		.text1{
			font-weight: 500;
			font-size: 24rpx;
			color: #999999;
			margin-bottom: 24rpx;
		}
	}
	.cancleBtn{
		width: 330rpx;
		height: 90rpx;
		background: #F6F6F6;
		border-radius: 45rpx;
		border: 1rpx solid #F6F6F6;
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
	}
	.conformBtn{
		width: 330rpx;
		height: 90rpx;
		background: #FB7D06;
		border-radius: 45rpx;
		border: 1rpx solid #FB7D06;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
		margin-left: 12rpx;
	}
</style>