juliancheng/pages/mine/tousu.vue

<template>
	<view class="main">
		<view class="top">
			<image src="../../static/index/img1.png" mode=""></image>
		</view>
		<view class="upload">
			<view class="title">
				<text class="title-item">投诉建议：</text>
			</view>
			<view class="upload-content">
				<textarea v-model="ComplaintContent" placeholder="说说你的问题,描述清楚问题解决更快哦~" maxlength="1000" class="upl" />
				</view>
			<view class="upload-content margin-top-sm">
				<input class="upl" style="height: 80rpx;" type="text" v-model="username" placeholder="请输入您的真实姓名" />	
			</view>
			<view class="upload-content margin-top-sm">
				<input class="upl" style="height: 80rpx;" type="text" v-model="phone" placeholder="请输入您的手机号" />		
			</view>
			<!-- <view class="prompt">
				提交投诉后，24小时内会有专人联系解决，敬请谅解
			</view> -->
			<view class="sub" @click="submit">提交反馈</view>
		</view>
		<!-- <view class="footer">
			<view class="flex flex-direction align-start">
				<text style="color: #999999;">联系我们：</text>
				<view class="">
					<text class="cuIcon-mail text-gray" style="font-size: 32rpx;"></text>
					<text class="margin-left-sm">541417720@qq.com</text>
				</view>
				<view class="">
					<text class="cuIcon-phone text-gray" style="font-size: 32rpx;"></text>
					<text class="margin-left-sm">13676933748</text>
				</view>
			</view>
		</view> -->
    </view>
</template>

<script>
    // 注册一个进度条
    var _self;
    
    export default {
		name: 'Complaint',
        data() {
            return {
                percent:0,
				ComplaintContent:'',
				username:"",
				phone:""
            }
        },
        onLoad() {
            _self = this;
        },
        methods: {
			async submit(){
				console.log('123')
				if(this.ComplaintContent == (null || '')){
					uni.showToast({
						title: '请填写投诉信息' ,
						icon:"none"
					})
					return false
				}
				if(this.username==""){
					uni.showToast({
						title: '请输入姓名',
						icon:"none"
					})
					return false
				}
				if(this.phone==""){
					uni.showToast({
						title: '请输入手机号',
						icon:"none"
					})
					return false
				}
				let res = await this.$request.post('/api/Complaint/addComplaint',{
					content: this.ComplaintContent,
					name:this.username,
					phone:this.phone
				});
				if(res.code == 200){
					uni.showToast({
						title: '投诉成功',
						content: res.message
					})
					setTimeout(function() {
						uni.navigateBack();
					}, 2000);
				}else if(res.code == 10001){
					uni.showModal({
						title: '提示',
						content: '一个小时内只能提交一次',
						showCancel: false
					})
				}else if(res.code == 10002){
					uni.showToast({
						title: '请填写信息'
					})
				}else{
					uni.showToast({
						title: '投诉失败',
						content: res.message
					})
				}
			},
        }
    }
</script>

<style>
	.footer {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.7);
		text-align: center;
		/* height: 40rpx; */
		line-height: 40rpx;
		margin: 0 5vw;
		margin-top: 50rpx;
	}
	
	.footer text {
		font-size: 24rpx;
	
	}
	page{
	  margin: 0;
	  padding: 0;
	  background: #f5f5f5;
	  height: 100%;
	}
	.main{
	  width: 100%;
	  height: 100%;
	  position: relative;
	  margin-bottom: 55px;
	}
	.top{
		width: 100vw;
		height: 42vw;
	}
	.top image{
		width: 100%;
		height: 100%;
		padding: 10px;
	}
	.upload{
		width: 100%;
		height: auto;
		background: #fff;
		padding: 15px;
	}
	.upload .title{
		width: 100%;
		/* display: flex; */
	}
	.title, .prompt{
		margin: 10px 0;
	}
	.prompt{
		color: #555864;
		font-size: 25rpx;
	}
	.upload .title .title-item{
		flex-shrink: 0;
		font-size: 32rpx;
		font-weight: 400;
		font-family: PingFangSC-Regular, sans-serif;
	}
	.upload .upl{
		width: 100%;
		/* margin-left: calc( 10% - 7.5px ); */
		/* margin-top: 20px; */
		/* height: 100px; */
		border: 2px solid #f0f0f0;
		/* line-height: 100px; */
		/* text-align: center; */
		font-size: 14px;
		border-radius: 15px;
		padding: 10px;
		/* margin: 10px calc( 50% - 57px ); */
	}
	.upload .sub{
		height: 75rpx;
		line-height: 75rpx;
		text-align: center;
		color: #fff;
		background: #F1C554;
		border-radius: 30px;
		margin: 45rpx auto;
		width: 600rpx;
		background-color:rgb(251, 198, 0);
		box-shadow: 0 0 50rpx 0 rgba(0, 0, 0, 0.1);
	}
	.upload-content{
		display: flex;
		justify-content: content;
		align-items: center;
	}
</style>