bawangcan-user/pagesB/pages/member/feedback.vue

<template>
	<view>
		<view class="feedback-title">
			<view class="content">
				<view class="title">请选择问题反馈类型：</view>
				<view class="choicebox">
					<view class="choices">
						<view v-for="(item,index) in choicelist" class="choices-item" :key="index" :class="{changeStyle:changeSelectStyle == index}"  @click="changeStyle(index)"> {{item.name}} </view>
					</view>
				</view>
				<view>
					<textarea placeholder="请填写15字以上的内容描述，我们将尽快给您回复" style="height:200rpx;" v-model="sendDate.content" placeholder-style="font-size: 24rpx;color: #999999;" />
				</view>
			</view>
			<!-- <text @tap="chooseMsg">快速键入</text> -->
		</view>
		<!-- <view class="feedback-body"><textarea placeholder="请详细描述你的问题和意见..." v-model="sendDate.content" class="feedback-textare" /></view>
		<view class="feedback-title"><text>QQ/邮箱</text></view>
		<view class="feedback-body"><input class="feedback-input" v-model="sendDate.contact" placeholder="方便我们联系你 " /></view> -->
		<!-- <view class="feedback-title feedback-star-view">
			<text>应用评分</text>
			<view class="feedback-star-view">
				<text class="feedback-star" v-for="(value, key) in stars" :key="key" :class="key < sendDate.score ? 'active' : ''" @tap="chooseStar(value)"></text>
			</view>
		</view> -->
		<view class="feedback-body">
			<input class="feedback-input" v-model="sendDate.contact" placeholder="请输入qq或者邮箱方便我们联系你 " />
		</view>
		<view type="primary" class="button" @tap="send">提交</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				msgContents: ['界面显示错乱', '启动缓慢，卡出翔了', 'UI无法直视，丑哭了', '偶发性崩溃'],
				stars: [1, 2, 3, 4, 5],
				imageList: [],
				sendDate: {
					score: 5,
					content: '',
					contact: ''
				},
				text: '',
				choicelist: [{
						"name": "其他反馈"
					},
					{
						"name": "优化建议"
					},

				],
				changeSelectStyle: '',
				isshow: true
			};
		},
		// onLoad() {
		// 	let deviceInfo = {
		// 		appid: plus.runtime.appid,
		// 		imei: plus.device.imei, //设备标识
		// 		p: plus.os.name === 'Android' ? 'a' : 'i', //平台类型，i表示iOS平台，a表示Android平台。
		// 		md: plus.device.model, //设备型号
		// 		app_version: plus.runtime.version,
		// 		plus_version: plus.runtime.innerVersion, //基座版本号
		// 		os: plus.os.version,
		// 		net: '' + plus.networkinfo.getCurrentType()
		// 	};
		// 	this.sendDate = Object.assign(deviceInfo, this.sendDate);
		// },
		methods: {
			close(e) {
				this.imageList.splice(e, 1);
			},
			changeStyle(index) {
				this.changeSelectStyle = index;
			},
			chooseMsg() {
				//快速输入
				uni.showActionSheet({
					itemList: this.msgContents,
					success: res => {
						this.sendDate.content = this.msgContents[res.tapIndex];
					}
				});
			},
			chooseImg() {
				//选择图片
				uni.chooseImage({
					sourceType: ['camera', 'album'],
					sizeType: 'compressed',
					count: 8 - this.imageList.length,
					success: res => {
						this.imageList = this.imageList.concat(res.tempFilePaths);
					}
				});
			},
			chooseStar(e) {
				//点击评星
				this.sendDate.score = e;
			},
			previewImage() {
				//预览图片
				uni.previewImage({
					urls: this.imageList
				});
			},
			send() {
				//发送反馈
				console.log(JSON.stringify(this.sendDate));

				if (!this.sendDate.content) {
					uni.showToast({
						icon: 'none',
						title: '请输入反馈内容'
					});
					return;
				}
				if (!this.sendDate.contact) {
					uni.showToast({
						icon: 'none',
						title: '请填写QQ或邮箱'
					});
					return;
				}
				// uni.report('意见反馈', this.sendDate);
				this.$queue.showLoading('加载中...');
				this.$Request
					.postJson('/message/add', {
						state: 2,
						title: this.sendDate.contact,
						content: JSON.stringify(this.sendDate)
					})
					.then(res => {
						if (res.code === 0) {
							uni.showToast({
								title: '反馈成功'
							});
							setTimeout(function() {
								uni.navigateBack();
							}, 1000);
						} else {
							uni.hideLoading();
							uni.showModal({
								showCancel: false,
								title: '反馈失败',
								content: res.msg
							});
						}
					});
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #F6F6F6;
	}

	.feedback-title {
		height: 400rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin: 0 32rpx;
		margin-top: 32rpx;
	}

	.feedback-title .content {
		margin: 0 32rpx;
	}

	.feedback-title .title {
		padding-top: 24rpx;
		margin-bottom: 8rpx;
		font-size: 28rpx;
		color: #000000;
	}

	.feedback-submit {
		background: #007aff;
		color: #ffffff;
		margin: 20rpx;
	}


	.choices {
		padding-top: 20rpx;
		margin-bottom: 16rpx;
		display: flex;
	}
	 .choices-item {
		padding: 0 20rpx;
		font-size: 24rpx;
		background: #F5F5F5;
		border: 2rpx solid #999999;
		border-radius: 4rpx;
		color: #999999;
		margin-right: 20rpx;
	}
	.feedback-body{
		width: 100%;
		padding: 0 32rpx;
		margin-top: 24rpx;
		input{
			background: #fff;
			width: 97%;
			height: 32rpx;
			padding: 20rpx 12rpx;
			border-radius: 8rpx;
		}
	}

	.button {
		width: 240rpx;
		height: 52rpx;
		background: linear-gradient(141deg, #FF4848 0%, #FF2929 100%);
		border-radius: 24rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		padding-top: 8rpx;
		padding-left: 100rpx;
		margin: 0 auto;
		margin-top: 20rpx;
	}

	.changeStyle {
		background: #F8E3DF;
		border: 1px solid #FF6A6A;
		border-radius: 4rpx;
		color: #FF7171;
	}
</style>