groupon-wx/pages/columnGoods/HotNewGoods/feedback.vue

<template>
	<view class="feedback-wrapper">

		<view>
			<textarea type="text" placeholder="请输入您要反馈的内容" v-model="param.content" />
		</view>
		<view class="flex-col">
			<text class="info" selectable="false" space="false" decode="false">
				上传图片
			</text>
			<view v-if="param.imgUrl">
				<view class="qr-cord-box ">
					<uni-badge class="uni-badge-left-margin" text="X" absolute="rightTop" size="small" @click="clickBadge">
						<image class="image" :src="param.imgUrl" ></image>
					</uni-badge>
				</view>
			</view>
			<view  v-else>
				<view class="qr-cord-box flex-col">
					<image class="add-file-image " src="../../../static/images/addFile.png"  @click="uploadQrCord"></image>
				</view>
			</view>
		</view>
		<view class="inputPhone flex-row justify-start">
			<text class="info" selectable="false" space="false" decode="false">
				电话号码：
			</text>
			<input class="input " type="number"  placeholder="请输入您的电话号码" v-model="param.phone" />
		</view>
		<view class="sub_btn" @click="subMit">
			<button class='modifyBnt' >提交</button>
		</view>
	</view>
</template>

<script>
	import {saveFilecontent} from '@/api/groupon.js'
export default {
	name: 'feedback',
	data () {
		return {
			fileList1: [],
			param:{
				type:1,
				content:'',
				imgUrl:'',
				phone:''
			},
		}
	},
	onLoad () {
	},
	methods: {
		/**
		 * 上传微信二维码
		 */
		uploadQrCord(){
			let _this = this;
			this.$util.uploadImageOne({
				name: "file"
			}, function(res) {
				console.log("上传文件成功+++++++++++++++++++",res.data.link)
				_this.param.imgUrl = res.data.link
			});

		},

		clickBadge(){
			this.param.imgUrl ='';
			console.log("点击了XX")
		},

		subMit () {
			if (!this.param.content) {
				return this.$util.Tips({
					title: this.$t(`请输入建议内容`)
				})
			}

			saveFilecontent(this.param).then(res => {
				uni.$u.toast(res.msg)
				setTimeout(()=>{
					uni.navigateBack({
						delta: 1
					})
				},2000)
			}).catch(err =>{
				uni.$u.toast(err)
			})
		}
	}
}
</script>
<style scoped lang="scss">

	@import '../../../static/css/common.css';

	.qr-cord-box{
		width: 200rpx;
		height: 200rpx;
		border: 1px solid rgba(238, 238, 238, 1);
		.image{
			width: 200rpx;
			height: 200rpx;
		}
		.add-file-image{
			width: 100rpx;
			height: 100rpx;
			margin-left: 50rpx;
			margin-top: 50rpx;
		}
		text{
			overflow-wrap: break-word;
			color: rgba(153, 153, 153, 1);
			font-size: 28rpx;
			font-weight: NaN;
			text-align: center;
			white-space: nowrap;
			line-height: 40rpx;
			margin-top: 20rpx;
		}
	}

.feedback-wrapper{
	background: #fff;
	padding: 30rpx;
}
.info{
height: 44rpx;
font-size: 28rpx;
font-weight: 400;
/*color: #999999;*/
line-height: 44rpx;
}
.modifyBnt {
	width: 85%;

	margin: auto;
	margin-top: 50rpx;
	height: 84rpx;
	background: #B42A3E;
	border-radius: 8rpx;
	font-size: 32rpx;
	color: #fff;
	text-align: center;
	line-height: 84rpx;
}
	.inputPhone{
		margin-top: 20rpx;
	}
	.input{
		border: 1px solid rgba(238, 238, 238, 1);
	}
</style>