door-uniapp-240802/service-uniapp-client/pages/complain/complain.vue

<!-- 投诉建议 -->
<template>
	<view class="complain">
		<mNavbar title="投诉建议" :leftClick="leftClick"></mNavbar>

		<view class="content">
			<view class="c-input">
				<textarea v-model="form.suggestion" :maxlength="maxNum" @input="GetNumber"
					placeholder="请输入投诉/建议的内容....."></textarea>
				<view class="input-num">{{ inputNum }} / {{ maxNum }}</view>
			</view>

			<view class="c-input">
				<input v-model="remark" type="text" placeholder="备注（选填）" />
			</view>

			<!-- 上传图片 -->
			<view class="upload">
				<view class="upload-title">上传图片/视频</view>
				<view class="image-list">
					<view @click="selectImg(item)" v-for="(item,index) in form.images" class="image-item">
						<image :src="item" mode=""></image>
					</view>

					<view @click="fileUploads" v-if="uploadNum < maxUploadNum" class="add-img-btn">
						<image src="/static/complain/img.png" mode="scaleToFill"></image>
					</view>
				</view>
			</view>
		</view>

		<view class="add-btn">
			<view @click="complain" class="btn">
				提交审核
			</view>
		</view>

		<van-action-sheet v-model:show="show" :actions="actions" @select="selectionOperation" />

	</view>
</template>

<script>
	import mNavbar from '@/components/base/m-navbar.vue'
	import { showImagePreview } from 'vant';
	
	export default {
		components: {
			mNavbar
		},
		data() {
			return {
				maxNum: 600, //最大输入字数
				inputNum: 0, //已输入的字数
				form: {
					suggestion: '', //投诉建议,内容
					images : [],
					remark : ''
				},
				actions: [{
						index : 0,
						name: '查看图片'
					},
					{
						index : 1,
						name: '删除图片'
					}
				],
				show : false,
				maxUploadNum : 5,	//最大上传5张
				currentImg : null,		//用户点击的图片
				uploadNum : 0,		//已上传张数
			}
		},
		methods: {
			//返回个人中心
			leftClick() {
				uni.switchTab({
					url: '/pages/index/center'
				})
			},

			//获取输入字数
			GetNumber(e) {
				this.inputNum = e.detail.cursor;
			},

			//投诉
			complain() {

			},
			
			//用户选择查看图片或者删除图片
			selectionOperation(item){
				let { index } = item
				if(index){
					this.removeImg()
				}else{
					this.viewImg()
				}
			},
			
			//图片列表删除一张图片
			removeImg(){
				this.form.images = this.form.images.filter(item => {
					return item != this.currentImg
				})
				this.show = false
				this.uploadNum = this.form.images.length
			},
			
			//查看图片
			viewImg(){
				showImagePreview([this.currentImg]);
			},
			
			//选择图片
			selectImg(item){
				this.show = true;
				this.currentImg = item;
			},
			
			//图片上传
			fileUploads() {
				uni.chooseImage({
					count: 1, // 默认9，设置为1表示单选  
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有  
					sourceType: ['album'], // 可以指定来源是相册还是相机，默认二者都有 
					
					success: (res) => {
						let resultPromise = [];
						
						//上传单张图片逻辑
						this.uploadFileToOSS(res.tempFiles[0]).then(imgPath => {
							this.form.images.push(imgPath)
							this.uploadNum++
						})
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.complain {

		.content {
			width: 96%;
			margin: 0rpx auto;
			padding-bottom: 80rpx;

			.c-input {
				background: #F6F6F6;
				border-radius: 20rpx;
				margin-top: 20rpx;
				box-sizing: border-box;
				padding: 40rpx;

				textarea {
					width: 100%;
				}

				.input-num {
					text-align: right;
					color: #BCB7B7;
					font-size: 22rpx;
				}
			}

			.upload {

				.upload-title {
					margin: 30rpx 0rpx;
				}

				.image-list {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;

					.image-item,
					.add-img-btn {
						width: calc(375rpx - 10px);
						height: calc(375rpx - 10px);
						overflow: hidden;
						border-radius: 20rpx;
						box-sizing: border-box;
						border: 2px dashed #ccc;
						margin-bottom: 25rpx;

						image {
							width: calc(375rpx - 10px);
							height: calc(375rpx - 10px);
						}
					}
				}
			}
		}

		.add-btn {
			position: fixed;
			display: flex;
			justify-content: center;
			align-items: center;
			left: 0;
			bottom: 0;
			width: 750rpx;
			height: 100rpx;
			background: white;

			.btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 85%;
				height: 80rpx;
				border-radius: 40rpx;
				color: white;
				text-align: center;
				font-size: 28rpx;
				background: #EF8C94;
			}
		}
	}
</style>