xingmingyi_applet/pages/user/mine/feedBack.vue

<template>
	<view class="home">
		<view class="putWarp dffd">
			<view @click="showfeadAction" class="putin dfsb">
				<text class="fontbase flex1">请选择反馈类型</text>
				<text class="textgrey fontssm">{{ title.text }}</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="putWarp dffd">
			<view class="putin spec ">
				<text class="fontbase flex1">请描述你要反馈的问题</text>
				<textarea
					class="lyCon"
					maxlength="-1"
					v-model="content"
					placeholder="如：对我们的商品或者服务有那些意见？你希望我们在哪些地方进行完善，你有哪些好的建议请及时的进行反馈，我们会及时进行处理的..."
				/>
			</view>
		</view>
		<view class="putWarp dffd">
			<view class="putin spec">
				<text class="fontbase flex1">请上传图片、问题截图等文件 (选填)</text>
				<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>
			<!-- <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>
		<view class="putWarp dffd">
			<view class="putin spec ">
				<text class="fontbase flex1">联系方式（选填，便于我们与你联系）</text>
				<input class="mt20" type="number" v-model="phone" placeholder="请输入手机号码" />
			</view>
		</view>
		<u-button color="#ED742F" @click="clickHandle" throttleTime="2000" class="custom-style" text="提交"></u-button>
		<y-action-sheet ref="yActionSheet" @onConfirm="refund"></y-action-sheet>
	</view>
</template>

<script>
import { pathToBase64 } from '@/common/tool/pathToBase64.js';
export default {
	data() {
		return {
			title: '',
			content: '',
			phone: '',
			uUpload: [] // 组件实例
		};
	},
	onLoad(opt) {},
	onShow() {},
	methods: {
		//申请退款选择原因
		showfeadAction(data) {
			this.$refs.yActionSheet.open({
				title: '反馈类型',
				list: [
					{
						text: '型号拍错'
					},
					{
						text: '买多了'
					},
					{
						text: '不想要了'
					},
					{
						text: '数量选择错误'
					},
					{
						text: '其他'
					}
				]
			});
		},
		//申请退款提交
		async refund(reason) {
			this.title = reason;
		},

		clickHandle() {
			if (!this.title.text) {
				return this.$api.toast('请选择反馈类型', 1000);
			}
			if (!this.content) {
				return this.$api.toast('请输入反馈内容', 1000);
			}
			let arr = [];
			this.uUpload.forEach(item => {
				arr.push(item.id);
			});
			this.$api
				.request('user/setFeedback', {
					title: this.title.text,
					content: this.content,
					phone: this.phone || '',
					image: arr.toString() || ''
				})
				.then(data => {
					if (data.code == '200') {
						this.$api.toast(data.msg);
						setTimeout(res => {
							uni.navigateBack({
								delta: 1
							});
						}, 300);
					} else {
						this.$api.toast(data.msg);
					}
				});
		},
		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 });
							})
							.catch(res => {});
					});
				}
			});
		}
	}
};
</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;
		}
		.spec {
			.lyCon {
				width: 100%;
				height: 80rpx;
				padding: 24rpx 0;
				font-size: 24rpx;
			}
		}
	}
	.custom-style {
		background: linear-gradient(90deg, #ffac4c 0%, #ff8a00 100%);
		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>