<template> <view class=""> <statusNav :ifReturn="isReturn" navBarTitle="意见反馈"></statusNav> <container-subgroup-two> <view slot="content" style="margin: 0 -30rpx 30rpx -30rpx;"> <view class="opinion-type">意见类型</view> <view class="opinion-type-content"> <view class="li" @click="opinionType(index)" :class="typeNum==index ? 'on':''" v-for="(item,index) in typeData">{{item.title}}</view> </view> <view class="feedback-input"> <input type="text" v-model="opinion" class="inputCss" placeholder="请填写您的意见或建议内容" placeholder-class="inputCss-input" /> <input type="text" v-model="name" class="inputCss" placeholder="请输入联系人姓名" placeholder-class="inputCss-input" /> <input type="text" v-model="phone" class="inputCss" placeholder="请输入联系人电话" placeholder-class="inputCss-input" /> <view class="fault-pictures" @tap="chooseImg"> <image :src="imgSrc" v-if="imgSrc!=''" mode="aspectFill" lazy-load style="width: 100%;"></image> <view class="disjcac fc" v-if="imgSrc==''"> <image class="img" src="/static/iocn/gz.png" mode="aspectFill" lazy-load></image> <view class="text">请上传图片</view> </view> </view> </view> <view class="feedback-approach"> <view class="feedback-con"> <image class="icon" src="/static/iocn/tel.png" mode=""></image> <view class="feedback-tel-con"> <view class="text">服务监督电话:</view> <!-- <view class="tel bold">156 1566 0510</view> --> <view class="tel bold">{{feedbackPhone}}</view> </view> </view> <view class="feedback-con"> <image class="icon" src="/static/iocn/date.png" mode=""></image> <view class="feedback-tel-con"> <view class="text">反馈受理时间:</view> <view class="tel bold">{{feedbackTime}}</view> </view> </view> </view> <button class="submit-button" @tap="submitData" type="default">提交反馈</button> </view> </container-subgroup-two> <footTabOne :current="3"></footTabOne> </view> </template> <script> import statusNav from '../../components/status-nav.vue'; import footTabOne from "../../components/foot-tabs/foot-tab-one.vue" import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue'; import { uploadImg } from '@/jsFile/public-api.js'; export default { components: { footTabOne, statusNav, containerSubgroupTwo }, data() { return { isReturn: false, // 已经类型数组 typeData: [], typeNum: 0, opinion: '', name: '', phone: '', imgSrc: '', flag: true, feedbackPhone:'',//服务监督电话 feedbackTime:'',//反馈受理时间 type_id:''//意见类型id } }, onLoad() { this.checkFeedback(); }, methods: { // 提交反馈事件 submitData() { if (this.checkEmpty()) { if (this.flag) { this.flag = false; let params = { type_id: this.type_id, picture: this.imgSrc, contact_name: this.name, contact_phone: this.phone, content: this.opinion } this.$requst.post('/universal/api.feedback/feedback',params).then(res=>{ if(res.code) { this.$toolAll.tools.showToast('反馈成功'); this.imgSrc = ''; this.name = ''; this.phone = ''; this.opinion = ''; } else { this.flag = true; } }) } } }, // 判空事件 checkEmpty() { let result = false; if (!this.opinion) { this.$toolAll.tools.showToast('请输入意见或建议'); } else if (!this.name) { this.$toolAll.tools.showToast('请输入联系人姓名'); } else if (this.$toolAll.tools.isPhone(this.phone)) { this.$toolAll.tools.showToast('请正确输入联系人电话'); } else { result = true; } return result; }, // 图片选择事件 chooseImg() { console.log( uni.getStorageSync("token")) uni.chooseImage({ success: (chooseImageRes) => { const tempFilePaths = chooseImageRes.tempFilePaths[0]; this.imgSrc = tempFilePaths; uploadImg({path:tempFilePaths}).then(res=>{ if(res.code) { this.$toolAll.tools.showToast('上传成功'); } }) },fail:(err)=> { this.$toolAll.tools.checkQx(err.code); } }); }, // 查询意见反馈类型 checkFeedback() { this.$requst.get('/universal/api.feedback/feedback_type', { page: 1, list_rows: 200 }).then(res => { let newData = res.data; if(res.code){ this.typeData = []; // 反馈受理时间 this.feedbackTime = `${newData.start_time} - ${newData.end_time}`; // 服务监督电话 this.feedbackPhone = this.$toolAll.tools.phoneAddChat(newData.phone); if(newData.type_list.length) { newData.type_list.forEach(item=>{ let obj = { title:item.name, id:item.type_id } this.typeData.push(obj); }) // 初始化意见类型id this.type_id = this.typeData[0].id; } } }) }, opinionType(index) { this.typeNum = index; this.type_id = this.typeData[index].id; } } } </script> <style> page { background-color: #F7F7F7; } .opinion-type { width: 100%; height: 80rpx; line-height: 80rpx; padding: 0 40rpx; box-sizing: border-box; border-top: 2rpx solid #EAEAEA; border-bottom: 2rpx solid #EAEAEA; background-color: #FFFFFF; font-size: 36rpx; font-weight: bold; } .opinion-type-content .li { width: 214rpx; height: 68rpx; background-color: #FFFFFF; text-align: center; line-height: 68rpx; color: #9f9898; font-size:30rpx; border-radius: 8rpx; margin-bottom: 24rpx; } .opinion-type-content { padding: 22rpx 40rpx 0rpx; display: flex; justify-content: space-between; flex-wrap: wrap; } .opinion-type-content .on { background-color: #00A2E9; color: #FFFFFF; } .inputCss { height: 78rpx; width: 100%; box-sizing: border-box; padding: 0rpx 17rpx; font-size: 30rpx; border-radius: 10rpx; background-color: #FFFFFF; color: #000000; display: flex; margin-bottom: 16rpx; align-items: center; } .inputCss-input { font-size: 26rpx; color: #9f9898; } .feedback-input { padding: 0 40rpx; } .fault-pictures { display: flex; align-items: center; justify-content: center; margin-top: 18rpx; height: 388rpx; box-sizing: border-box; width: 100%; background-color: #FFFFFF; flex-direction: column; } .fault-pictures .img { width: 62rpx; margin-bottom: 27rpx; height: 62rpx; } .fault-pictures .text { font-size: 26rpx; color: #9f9898; } .feedback-con { width: 320rpx; border-radius: 8rpx; background-color: #ffe5e5; display: flex; align-items: center; box-sizing: border-box; padding: 16rpx 0 16rpx 26rpx; } .feedback-con .icon { width: 40rpx; height: 40rpx; margin-right: 18rpx; } .feedback-tel-con .text { font-size: 24rpx; margin-bottom: 10rpx; } .feedback-tel-con .tel { font-size: 28rpx; } .feedback-approach { padding: 0 40rpx; display: flex; align-items: center; justify-content: space-between; margin-top: 14rpx; } .submit-button { width: 686rpx; margin-top: 58rpx; border-radius: 50rpx; height: 90rpx; background-color: #02A2ea !important; line-height: 90rpx; color: #FFFFFF !important; text-align: center; font-size: 30rpx; } </style>