dtx_store/pages/feedback/feedback.vue

<template>
	<view>
		<view class="feedback-block">
			<view class="feedback-title">您有任何意见与建议</view>
			<view class="feedback-radiobox">
				<view class="feedback-radiobox-item" @click="changeRadio('页面闪退')" :class="{'show': radioValue === '页面闪退'}">页面闪退</view>
				<view class="feedback-radiobox-item" @click="changeRadio('操作体验')" :class="{'show': radioValue === '操作体验'}">操作体验</view>
				<view class="feedback-radiobox-item" @click="changeRadio('账号问题')" :class="{'show': radioValue === '账号问题'}">账号问题</view>
				<view class="feedback-radiobox-item" @click="changeRadio('功能异常')" :class="{'show': radioValue === '功能异常'}">功能异常</view>
				<view class="feedback-radiobox-item" @click="changeRadio('产品建议')" :class="{'show': radioValue === '产品建议'}">产品建议</view>
				<view class="feedback-radiobox-item" @click="changeRadio('其他问题')" :class="{'show': radioValue === '其他问题'}">其他问题</view>
			</view>
		</view>
		<view class="feedback-block">
			<view class="feedback-title">问题说明<text>*</text></view>
			<view class="feedback-sbutitle">请对您所遇到的问题进行尽可能详细的描述</view>
			<view class="feedback-textarea">
				<textarea maxlength="200" v-model="description" />
				<view class="feedback-textarea-size">{{description.length}}/200</view>
			</view>
		</view>
		<view class="feedback-block">
			<view class="feedback-title">联系方式</view>
			<input class="feedback-input" type="number" v-model="mobile" maxlength="11" placeholder="输入手机号码" />
		</view>
		<!-- 提交按钮 -->
		<view class="btn">
			<button type="default" @click="subFeedback">提交</button>
		</view>
	</view>
</template>

<script>
	import { feedbacks } from '@/apis/interfaces/versions'
	export default {
		data() {
			return {
				radioValue : "页面闪退",
				description: "",
				mobile	   : "",
				systemInfo : {}
			}
		},
		onLoad(){
			uni.getSystemInfo({
				success: systemRes => {
					this.systemInfo = {
						brand	 : systemRes.brand,
						models	 : systemRes.model,
						pixel	 : systemRes.pixelRatio,
						width	 : systemRes.windowWidth,
						height	 : systemRes.windowHeight,
						version	 : systemRes.system,
						platform : systemRes.platform,
						font_size: systemRes.fontSizeSetting,
						client_id: systemRes.deviceId,
					}
				}
			})
		},
		onNavigationBarButtonTap() {
			uni.makePhoneCall({
				phoneNumber: '18704601568'
			})
		},
		methods: {
			changeRadio(e){
				if(this.radioValue === e) return
				this.radioValue = e
			},
			subFeedback(){
				if(this.description === ''){
					uni.showToast({
						title: '问题说明不能为空',
						icon : 'none'
					})
					return
				}
				feedbacks({
					type    	: this.radioValue,
					description	: this.description,
					mobile		: this.mobile,
					...this.systemInfo
				}).then(res => {
					uni.showModal({
						title	   : '提示',
						content	   : '我们已收到您的反馈，感谢您对平台建议反馈与支持~',
						showCancel : false,
						cancelColor: '#34CE98',
						success	   : ()=> {
							uni.navigateBack()
						}
					})
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			}
		}
	}
</script>

<style scoped>
	.feedback-block{
		padding: 30rpx;
		border-top: solid 20rpx #F8F8F8;
	}
	.feedback-title{
		font-size: 34rpx;
		font-weight: bold;
		line-height: 40rpx;
	}
	.feedback-title text{
		color: #e6576b;
		padding-left: 5rpx;
	}
	.feedback-radiobox{
		display: flex;
		flex-wrap: wrap;
		margin: 20rpx -10rpx 0;
	}
	.feedback-radiobox-item{
		position: relative;
		width: calc(33.33% - 20rpx);
		display: inline-block;
		margin: 10rpx;
		background: #F8F8F8;
		text-align: center;
		line-height: 70rpx;
		border-radius: 30rpx;
		font-size: 30rpx;
	}
	.feedback-radiobox-item.show{
		background: #34CE98;
		color: white;
	}
	.feedback-sbutitle{
		font-size: 28rpx;
		padding-top: 10rpx;
		color: gray;
	}
	.feedback-textarea{
		background: #F8F8F8;
		border-radius: 20rpx;
		padding: 20rpx;
		margin-top: 20rpx;
	}
	.feedback-textarea textarea{
		width: 100%;
		height: 200rpx;
		font-size: 32rpx;
	}
	.feedback-textarea-size{
		text-align: right;
		font-size: 28rpx;
		color: gray;
	}
	.feedback-input{
		background: #F8F8F8;
		border-radius: 20rpx;
		height: 90rpx;
		line-height: 90rpx;
		margin-top: 20rpx;
		font-size: 32rpx;
		padding: 0 20rpx;
	}
	.btn{
		padding: 30rpx;
	}
	.btn button{
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 45rpx;
		background: #34CE98;
		font-size: 34rpx;
		font-weight: bold;
		color: white;
		border: none;
		padding: 0;
	}
	.btn button:after{
		display: none;
	}
</style>