aluminium-trading-uniapp-240925/pages_order/center/helpFeedback.vue

<template>
	<view class="page">

		<navbar :title="$t('components.helpFeedback')" leftClick @leftClick="$utils.navigateBack" />

		<view class="frame">
			<!--帮助与反馈-->
			<view class="helpFeedback">
				<view class="title"> {{ $t('components.helpAndFeedback') }} <span style="color: red;">*</span></view>
				<view class="desc">
					<textarea :placeholder="$t('components.pleaseSubmit')" v-model="form.content"/>
				</view>
			</view>


      <!--问题截图-->
			<view class="problemImg">
				<view class="title">{{ $t('components.screenshot') }} <span style="color: red;">*</span></view>
				<view class="img">
					<uv-upload :fileList="fileList" :maxCount="5" multiple width="150rpx" height="150rpx"
						@delete="deleteImage" @afterRead="afterRead" :previewFullImage="true">
					</uv-upload>
				</view>
			</view>

			<!--联系方式-->
			<view class="name_phone">
				<view class="title">{{ $t('components.contactInfo') }} <span style="color: red;">*</span></view>
				<view class="items">
					<view class="item">
						<view>{{ $t('components.contactName') }}</view>
						<view>
							<input :placeholder="$t('components.enterContactName')" clearable v-model="form.userName"></input>
						</view>
					</view>
					<view class="item">
						<view>{{ $t('components.lxPhone') }}</view>
						<view>
							<input :placeholder="$t('components.plePhoneNumber')" clearable v-model="form.userPhone"></input>
						</view>
					</view>
				</view>
			</view>

			<!--提交反馈-->
			<view class="btns">
				<view @click="submitFeedback" class="btn">
					{{ $t('components.submitFeedback') }}
				</view>
			</view>
		</view>

	</view>
</template>
<script>
import topbar from "@/components/base/topbar.vue";
import tabber from "@/components/base/tabbar.vue";

export default {
		name: "helpFeedback",
		components: {
			tabber,
			topbar
		},
		data() {
			return {
				fileList: [],
				form: {
					"content": "",
					"proofImg": "",
					"userName": "",
					"userPhone": ""
				}
			}
		},
		methods: {

			// 提交反馈
			// submitFeedback() {
			// 	this.form.proofImg = this.fileList.join(",")
			// 	this.$api('addSuggest', this.form, res => {
			// 		if (res.code === 200) {
			// 			uni.showToast({
			// 				title: '',
			// 				icon: 'success',
			// 				duration: 2000
			// 			})
			// 			setTimeout(() => {
			// 				uni.navigateBack(-1)
			// 			}, 1000)
			// 		}
			// 	})
				
			// },
			
			submitFeedback(){
				let data = JSON.parse(JSON.stringify(this.form))
				
				data.proofImg = this.fileList.map((item) => item.url).join(",")
				
				if(this.$utils.verificationAll(data, {
					content : this.$t('components.pleaseSubmit'),//问题和意见
					proofImg : this.$t('components.screenshot'),//
					userName : this.$t('components.enterContactName'),//
					userPhone : this.$t('components.plePhoneNumber'),//手机号码
				})){
					return
				}
				
				this.$api('addSuggest', data, res => {
					if(res.code == 200){
						uni.showToast({
							title: res.message,
							icon:'none'
						})
						
						setTimeout(uni.navigateBack, 800, -1)
					}
				})
			},
			deleteImage(e) {
				this.fileList.splice(e.index, 1)
			},
			afterRead(e) {
				let self = this
				e.file.forEach(file => {
					self.$Oss.ossUpload(file.url).then(url => {
						self.fileList.push({
							url
						})
					})
				})
			},
		},
	}
</script>


<style scoped lang="scss">
	.page {
		height: 100vh;
		background-color: #f2f5f5;

		.frame {
			padding: 40rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			gap: 40rpx;

			.helpFeedback {
				.title {}

				.desc {
					margin-top: 20rpx;
					height: 300rpx;
					border-radius: 40rpx;
					overflow: hidden;
					padding: 20rpx;
					font-size: 28rpx;
					background-color: #fff;
				}
			}

			.problemImg {

				.img {
					margin-top: 20rpx;
					height: 150rpx;
					border-radius: 40rpx;
					overflow: hidden;
					padding: 20rpx;
					font-size: 28rpx;
					background-color: #fff;
				}
			}

			.name_phone {

				.title {}

				.items {
					margin-top: 20rpx;

					.item {
						display: flex;
						align-items: center;
						background-color: #FFF;
						height: 80rpx;
						padding: 10rpx 0 0 20rpx;
						border-bottom: 1px solid #efefef;

						>view:nth-of-type(1) {
							width: 30%;
							// font-weight: 700;
						}

						>view:nth-of-type(2) {
							width: 70%;
							border-radius: 10rpx;
							overflow: hidden;


							input {
								background-color: #FFF;
								font-size: 28rpx;
								padding: 16rpx 8rpx 16rpx 15rpx;
							}
						}
					}
				}
			}

			.btns {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				gap: 20rpx;

				.btn {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 500rpx;
					height: 70rpx;
					border-radius: 40rpx;
					color: #FFF;
					font-size: 28rpx;
					margin: 20rpx 10rpx 0 0;
					background: $uni-color;
					//margin-top: 20rpx;
					border-radius: 40rpx;
				}
			}

		}
	}
</style>