xingmingyi_applet/pagesA/mall/ordRetInfo.vue

<template>
	<view class="home">
		<!-- <view v-if="type == 1" class="putWarp bb dffd">
			<view class="putin dfsb">
				<text class="fontbase flex1">填写收货状态</text>
				<input type="text" v-model="name" placeholder="已到货或未到货" />
			</view>
		</view> -->
		<view class="putWarp dffd">
			<!-- 	<view class="putin dfsb">
				<text class="fontbase flex1">申请金额</text>
				<text class="priceDan">19.9</text>
			</view> -->
			<view class="putin spec ">
				<text class="fontbase flex1">申请说明</text>
				<textarea class="lyCon" maxlength="-1" v-model="content" placeholder="请填写详细的申请说明" />
			</view>
			<view class="imgWarp dffs">
				<view class="pre-box dffs">
					<view class="pre-item dffs" v-for="(item, index) in uUpload" :key="index">
						<image class="pre-item-image" :src="item.lists" mode="widthFix"></image>
						<view class="u-delete-icon dfsb" @tap.stop="deleteItem(item.id)"><u-icon name="close" size="16" color="#ffffff"></u-icon></view>
					</view>
				</view>
				<view @tap="choose" class="imgBox dfsb"><u-icon name="plus" size="30" color="#DEDEDE"></u-icon></view>
			</view>
			<!-- <view class="imgBox dffs">
				<view class="pre-box">
					<view class="pre-item dffs" v-for="(item, index) in newsInfo.img" :key="index">
						<image @click="preview(newsInfo.img, index)" class="pre-item-image" :src="item" mode="aspectFill"></image>
					</view>
				</view>
			</view> -->
		</view>
		<u-button color="#ED742F" @click="clickHandle" throttleTime="2000" class="custom-style" text="提交申请"></u-button>
	</view>
</template>

<script>
import { pathToBase64 } from '@/common/tool/pathToBase64.js';
export default {
	data() {
		return {
			type: 1,
			id: '',
			content: '',
			uUpload: [] // 组件实例
		};
	},
	onLoad(opt) {
		this.type = opt.type || 1;
		this.id = opt.id || '';
	},
	onShow() {},
	methods: {
		clickHandle() {
			if (!this.content) {
				return this.$api.toast('请输入原因', 1000);
			}
			let arr = [];
			this.uUpload.forEach(item => {
				arr.push(item.id);
			});
			this.$api
				.request('orders/aftersale_order', {
					id: this.id,
					content: this.content,
					img: arr || ''
				})
				.then(data => {
					if (data.code == '200') {
						this.$api.toast(data.msg);
						setTimeout(res => {
							uni.navigateBack({
								delta: 1
							});
						}, 800);
					} else {
						this.$api.toast(data.msg);
					}
				})
				.catch(function(error) {
					this.$api.toast(error);
				});
		},
		deleteItem(id) {
			this.uUpload.forEach((item, ind) => {
				console.log(item);
				if (item.id == id) {
					this.uUpload.splice(ind, 1);
				}
			});
		},
		choose() {
			let that = this;
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				success: function(res) {
					console.log(res);
					var imageSrc = res.tempFilePaths[0];
					pathToBase64(imageSrc).then(base64 => {
						that.$api
							.request('common/doupload', {
								imgdata: base64
							})
							.then(res => {
								that.uUpload.push({ lists: res.data.imgurl, id: res.data.img_id });
							});
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
.home {
	padding: 20rpx 0rpx 0;

	//yanzhengma
	.u-hairline-border[data-v-3bf2dba7]:after {
		border: 0;
	}
	.tips {
		padding: 0;
		color: $promain;
		font-size: 28rpx;
		line-height: 40rpx;
		height: 40rpx;
	}
	.putWarp {
		background-color: #fff;
		padding: 0rpx 32rpx;
		align-items: center;
		margin-bottom: 20rpx;
		.priceDan {
			color: #333;
		}
		.putin {
			width: 100%;
			padding: 30rpx 0;
			input {
				text-align: right;
			}
		}
		.spec {
			.lyCon {
				width: 100%;
				height: 80rpx;
				padding: 24rpx 0;
				font-size: 24rpx;
			}
		}
	}
	.custom-style {
		background-color: #ed742e;
		color: #fff;
		width: 690rpx;
		margin-top: 200rpx;
		border-radius: 11rpx;
	}
	.imgWarp {
		width: 100%;
		margin-top: 30rpx;
		flex-wrap: wrap;
		.imgBox {
			background-color: #fff;
			border: 1px solid #f3f3f3;
			justify-content: center;
			width: 120rpx;
			height: 120rpx;
		}

		.pre-box {
			flex-wrap: wrap;
		}

		.pre-item {
			margin-right: 60rpx;
			margin-bottom: 20rpx;
			width: 120rpx;
			position: relative;
			flex-wrap: wrap;
			&:nth-of-type(4n) {
				margin-right: 0;
			}
		}

		.pre-item-image {
			width: 120rpx;
			height: auto;
		}

		.u-delete-icon {
			position: absolute;
			top: -10rpx;
			right: -10rpx;
			z-index: 10;
			background-color: #333;
			border-radius: 100rpx;
			width: 30rpx;
			height: 30rpx; 
		}
	}
}
</style>