zx_flk_app/pages/feedback/index.vue

<template>
	<view class="container">
		<navBar name="意见反馈" left="0"></navBar>
		<view style="display: flex;">
			<text class="title">问题类型</text>
			<text style="color: red; margin-left: 10rpx;">*</text>
		</view>
		<view class="title-wrapper">
			<view v-for="(item, index) in typeList" @tap="tapType(item)" :key="index"
				:class="item.type_id == typeId ? 'text-wrapper text-wrapper-i' : 'text-wrapper text-wrapper-s'">
				{{ item.type_name }}</view>
		</view>
		<view style="margin: 64rpx 0;">
			<view style="display: flex;">
				<text class="title">问题描述</text>
				<text style="color: red; margin-left: 10rpx;">*</text>
			</view>
			<view class="text-description-input">
				<textarea :enableNative="false" @input="inputContent" :value="content"
					placeholder-class="description-placeholder" placeholder="请详细说明，以便我们解决问题，最多可填写300字。"
					maxlength="300"></textarea>
			</view>
		</view>
		<view>
			<view class="title-img">
				<!-- <view class="title-img-text">问题图片</view> -->
				<view style="display: flex;">
					<text class="title">问题图片</text>
					<text style="color: red; margin-left: 10rpx;">*</text>
				</view>
				<view class="img-text">{{ imgList.length }} / 3</view>
			</view>

			<!-- <view class="upload-img-row">
				<view class="upload-img-view" v-for="(item, index) in imgList" :key="index">
					<img @tap="bindChangeImg" :data-index="index" class="upload-img" :src="item" alt="">
				</view>
				<view class="upload-img-view" v-if="imgList.length < 3">
					<img @tap="bindUpImg" class="upload-img" src="https://qiniu.bms16.com/Fv3KFmim5gle_kWR9g1Mym56lJpC"
						alt="">
				</view>
			</view> -->
			
			<uploaders :max="3" :car_info="imgList"
				@update-car-images="handleCarImagesUpdate"></uploaders>

		</view>
		<view class="submit-btn-view">
			<view v-if="typeId != '' && imgList.length != 0 && content != ''" class="submit" @tap="submitFeedback">提交
			</view>
			<view v-else class="submit-btn">提交</view>
		</view>
	</view>
</template>

<script>
	const http = require('../../common/http.js');
	const config = require('../../common/config.js');
	const common = require('../../common/common.js');
	import uploaders from '@/component/uploaders/uploaders';
	export default {
		components:{
			uploaders
		},
		data() {
			return {
				typeList: [{
						type_id: 1,
						type_name: '车辆'
					},
					{
						type_id: 2,
						type_name: '电池'
					},
					{
						type_id: 3,
						type_name: '电柜'
					},
					{
						type_id: 4,
						type_name: '应用操作'
					},
					{
						type_id: 5,
						type_name: '其他'
					},
				],
				typeId: '',
				content: '',
				imgList: [],
				isDiabled: false,
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			// this.loadTypeList()
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {

		},
		methods: {
			handleCarImagesUpdate(updatedImages) {
				// 这里会接收到子组件传来的更新后的图片URL数组
				this.imgList = updatedImages
			},
			loadTypeList() {
				http.postApi(config.API_DAYHIRE_REPORT_REPORT_TYPE, {}, (resp) => {
					if (resp.data.code === 200) {
						this.setData({
							typeList: resp.data.data.list
						});
					} else {
						common.simpleToast(resp.data.msg)
					}
				})
			},

			tapType({
				type_id
			}) {
				this.setData({
					typeId: type_id
				})
			},

			inputContent(e) {
				const content_text = e.detail.value
				if (content_text.length >= 300) {
					common.simpleToast('最多输入300字');
				} else {
					this.setData({
						content: content_text
					})
				}
			},

			bindUpImg: function() {
				const that = this;
				let _imgList = this.imgList
				common.upLoadImgQiNiu(function(imgUrl) {
					_imgList.push(imgUrl)
					that.setData({
						imgList: _imgList
					});
				});
			},

			bindChangeImg(e) {
				const that = this;
				const index = e.currentTarget.dataset.index
				let _imgList1 = this.imgList
				common.upLoadImgQiNiu(function(imgUrl) {
					_imgList1.splice(index, 1, imgUrl)
					that.setData({
						imgList: _imgList1
					});
				});
			},

			submitFeedback() {
				const imgList = this.imgList.map(item=>{
					return item.url
				})
				const pData = {
					content: this.content,
					image_list: imgList,
					type_id: this.typeId
				}
				const that = this
				http.postApi(config.API_DAYHIRE_REPORT_REPORT, pData, (resp) => {
					if (resp.data.code === 200) {
						// that.setData({
						// 	isDiabled:true
						// })
						common.simpleToast('提交成功')
						setTimeout(() => {
							wx.navigateBack({
								delta: 1 // 返回上一级页面
							})
						}, 1000)
					} else {
						common.simpleToast(resp.data.msg)
					}
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.container {
		padding: 0 32rpx 0;
		background-color: white;
		height: 100vh;
	}

	.title {
		font-size: 40rpx;
		color: #2A3A5A;
		font-weight: 600;
		margin-bottom: 40rpx;
	}

	.title-wrapper {
		display: flex;
		flex-wrap: wrap;
		margin-right: -32rpx;
	}

	.text-wrapper {
		padding: 24rpx 0;
		text-align: center;
		width: 218rpx;
		background: #F3F8FF;
		border-radius: 16rpx;
		margin: 0 16rpx 16rpx 0;
		font-size: 32rpx;
		border: 4rpx solid transparent
	}

	.text-wrapper-s {
		background-color: #F3F8FF;
		color: #2A3A5A;
	}

	.text-wrapper-i {
		color: #0A59F7;
		background: #FFFFFF;
		border-color: #0A59F7;
	}

	.text-description-input {
		background: #F3F8FF;
		padding-left: 32rpx;
		padding-top: 24rpx;
	}

	.description-placeholder {
		color: #828DA2;
		font-size: 28rpx;
	}

	.title-img {
		font-size: 40rpx;
		color: #2A3A5A;
		font-weight: 600;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.img-text {
		font-size: 32rpx;
		color: #9FA7B7;
		font-weight: 400;
	}

	.upload-img-row {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.upload-img-view {
		margin-right: 20rpx;
	}

	.upload-img {
		width: 206rpx;
		height: 206rpx;
	}

	.submit-btn-view {
		border-top: 2rpx solid #F4F5F6;
		padding-top: 24rpx;
		position: fixed;
		bottom: 0;
		width: 93%
	}

	.submit-btn {
		background: #060809;
		opacity: 0.2;
		border-radius: 70rpx;
		color: #FFF;
		font-size: 32rpx;
		text-align: center;
		padding: 24rpx 0;
		margin: 0 0 24rpx 0;
	}

	.submit {
		background: #060809;
		border-radius: 40rpx;
		color: #FFF;
		font-size: 32rpx;
		text-align: center;
		padding: 24rpx 0;
		margin: 0 32rpx 24rpx 32rpx;
	}
</style>