hm-examples/pagesA/suggestions/suggestions.vue

188 lines
6.0 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<view>
<!-- 状态栏 -->
<status-nav :titleVal="'投诉与建议'" :statusTitle="true"></status-nav>
<!-- 自定义二级分类 -->
<!-- 列表 -->
<view :style="{paddingTop: statusHeight+'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>
<radio-group @change="changeCate" class="width100 disac">
<label class="radio disac">
<radio style="transform: scale(.7);" :value="2" checked color="#3875f6"/><text>改进意见/建议</text>
</label>
<label class="radio disac">
<radio style="transform: scale(.7);" :value="1" color="#3875f6"/><text>投诉</text>
</label>
</radio-group>
<!-- <radio-group @change="changeCate" class="width100 disac">
<label class="radio disac" v-for="(iteml,indexl) in xialone" :key="indexl">
<radio style="transform: scale(.7);" :value="iteml.id" :checked="indexl==0" color="#3875f6"/><text>{{iteml.title}}</text>
</label>
</radio-group> -->
<!-- 下拉列表 -->
<!-- <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> -->
<!-- 底部tab -->
<foot-tab :titleList="titleList" :imgList="imgList" :newcurrent='-1'></foot-tab>
<!-- 用户信息授权手机号授权 -->
<auth-userInfo-mobileInfo></auth-userInfo-mobileInfo>
</view>
</template>
<script>
export default {
data() {
return {
isShowT:false,
category:'',
tname:'',//联系人姓名
tphone:'',//联系方式
tmsg:'',//留言信息
touId:'',
isZhuan:false,
xialCurrent:0,
xialone:[],
btnCon:'立即提交',
}
},
computed: {
// 底部标题
titleList() {
return this.$store.state.titleList
},
// 底部图标
imgList() {
return this.$store.state.imgList
},
// 主题颜色
publicColor() {
return this.$store.state.publicColor
},
statusHeight() {
return this.$store.state.statusHeight
}
},
onLoad() {
if(uni.getStorageSync('phone_active')!=0 && uni.getStorageSync('is_active')!=0){
this.checkCate();
this.tphone = uni.getStorageSync('phone');
}
},
methods: {
changeCate(e){
console.log(e.detail.value);
this.touId = e.detail.value;
},
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.$toolAll.tools.isPhone(this.tphone)){
this.$toolAll.tools.showToast('请输入正确的手机号')
} 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>