hengmei-one/pagesA/suggestions/suggestions.vue

<template>
	<view>
		<!-- 状态栏 -->
		<status-nav :titleVal="'投诉与建议'" :statusTitle="true"></status-nav>
		<!-- 自定义二级分类 -->
		<!-- 列表 -->
		<view :style="{paddingTop: statusHNH+'px'}" class="pad-zy20">
			<view class="bacf mar-s25 pad-zy20 radius20 fon28 col3 pad-x40">
				<!-- 问题类型 -->
				<view class="disac pad-s32">
					<view class="flexs mar-y20 titlel">问题类型</view>
					<view @tap="openXial" class="disjbac width100 radius10 pad-zy20 xiala posir">
						<view>{{category}}</view>
						<image :class="isZhuan?'zhuan':'nozhuan'" src="/static/public/sanj.png" mode="aspectFill"></image>
						<!-- 下拉列表 -->
						<view v-if="isZhuan" class="posia bacf radius10 xial-box">
							<view class="pad-zy20 xial-item-box">
								<view @tap="chooseXia(indexl)" :class="xialCurrent==indexl?'pcol':''" v-for="(iteml,indexl) in xialone" :key="indexl">{{iteml.title}}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 建议意见 -->
				<view class="dis mar-s20">
					<view class="mar-y20 flexs mar-s20 titlel">建议意见</view>
					<view class="width100 radius10 pad20 borbot-cc" style="height: 300rpx;">
						<textarea v-model="tmsg" class="fon28" maxlength="500" style="height: 300rpx;width: auto;" placeholder="请把您的意见及意见填写在这里" placeholder-style="color:#999999;"/>
					</view>
				</view>
				<!-- 姓      名 -->
				<view class="disac mar-s30">
					<view class="mar-y20 flexs titlel disjb">
						<view>姓</view>
						<view class="mar-y10">名</view>
					</view>
					<view class="width100 radius10 pad-zy20 borbot-cc height-68">
						<input v-model="tname" class="fon28 height-68" type="text" value="" placeholder="请输入姓名" placeholder-style="color:#999999;"/>
					</view>
				</view>
				<!-- 联系电话 -->
				<view class="disac mar-s20">
					<view class="mar-y20 flexs titlel">联系电话</view>
					<view class="width100 radius10 pad-zy20 borbot-cc height-68">
						<input v-model="tphone" maxlength="11" class="fon28 height-68" type="text" value="" placeholder="请输入联系电话" placeholder-style="color:#999999;"/>
					</view>
				</view>
				<!-- 底部按钮 -->
				<view @tap="submit" class="fon30 radius20 tc colf bold0 btnl" :style="{background:publicColor}">{{btnCon}}</view>
			</view>
			<!-- 弹框 -->
			<pu-po :isShowT="isShowT" :isCenter="true" :contentVal="'提交成功！等待审核'" :comfrimVal="'好的'" @comfirmev="comfirmev"></pu-po>
		</view>
		<!-- 底部客服 -->
		<public-customer :nright="20" :nbottom="100"></public-customer>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusHNH:uni.getStorageSync('statusHNH'),
				publicColor:uni.getStorageSync('publicColor'),//主题颜色
				isShowT:false,
				category:'',
				tname:'',//联系人姓名
				tphone:'',//联系方式
				tmsg:'',//留言信息
				touId:'',
				isZhuan:false,
				xialCurrent:0,
				xialone:[],
				btnCon:'立即提交'
			}
		},
		onShow() {
			this.$toolAll.tools.isLogin()
		},
		onLoad() {
			this.checkCate()
		},
		methods: {
			checkCate(){
				this.$requst.post('user/feedback-types').then(res=>{
					// console.log('问题类型列表：',res);
					if(res.code==0){
						if(res.data.length!=0){
							res.data.forEach(item=>{
								let obj = {
									id:item.id,
									title:item.title
								}
								this.xialone.push(obj)
							})
							this.category = this.xialone[0].title
							this.touId = this.xialone[0].id
						}
					}
				},error=>{})
			},
			submit(){
				if(!this.tmsg){
					this.$toolAll.tools.showToast('请输入意见及建议')
				} else {
					if(this.tphone!=''){
						if(this.$toolAll.tools.isPhone(this.tphone)){
							this.$toolAll.tools.showToast('请输入正确的手机号')
						} else {
							this.eventEv()
						}
					} else {
						this.eventEv()
					}
				}
			},
			eventEv(){
				let parmas = {
					type_id:this.touId,
					content:this.tmsg,
					user_name:this.tname,
					user_phone:this.tphone
				}
				if(this.btnCon == '立即提交'){
					// this.$toolAll.tools.showToast('正在提交...')
					this.btnCon = '正在提交...'
					this.$requst.post('user/add-feedback',parmas).then(res=>{
						// uni.hideToast()
						if(res.code==0){
							this.isShowT = true
						} else {
							this.btnCon = '返回'
							this.$toolAll.tools.showToast(res.msg)
						}
					},error=>{})
				} else {
					uni.navigateBack({delta:1})
				}
			},
			comfirmev(){
				uni.navigateBack({delta:1})
			},
			openXial(){
				this.isZhuan = !this.isZhuan
				// console.log('开启下拉');
			},
			chooseXia(index){
				this.xialCurrent = index
				this.btnCon = '立即提交'
				this.category = this.xialone[index].title
				this.touId = this.xialone[index].id
			},
		}
	}
</script>

<style>
</style>