dev/dcp-web-gate/src_old/views/conferenceServices/ConferenceFeedback.vue

<template>
  <div class="autoBox container-box">
    <div class="bread-crumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: 'home' }">{{lang=='en'? 'Home': '首页'}}</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: 'ConferenceServices'}">{{lang=='en'? 'Conferences': '会议'}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{lang=='en'? 'Feedback': '会议反馈'}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="content-box">
        <div class="confrence-item">
        <div class="confrence-item-title">{{meetingTitle}}</div>
        <div class="confrence-item-body" v-if="lang=='en'">
          <el-form :model="form" :rules="rulesEn" ref="feedbackEn" label-width="100px" key="1">
            <el-form-item label="Name">
              <el-input v-model="form.umsUsername" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="Tel." prop="userMobile">
              <el-input v-model="form.userMobile" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="Affiliation">
              <el-input v-model="form.unit" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="Possition">
              <el-input v-model="form.job" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="Opinion" prop="ideaPointOpinion">
              <el-input type="textarea" v-model="form.ideaPointOpinion" :rows="5" placeholder=""></el-input>
            </el-form-item>
            <el-form-item>
              <div style="text-align: center;">
                <el-button type="primary" style="margin-right: 40px" @click="submitOpinion('feedbackEn')">Submit</el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <div class="confrence-item-body" v-else>
          <el-form :model="form" :rules="rulesZh" ref="feedback" label-width="100px" key="2">
            <el-form-item label="姓名">
              <el-input v-model="form.umsUsername" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="userMobile">
              <el-input v-model="form.userMobile" placeholder="请输入联系电话"></el-input>
            </el-form-item>
            <el-form-item label="单位">
              <el-input v-model="form.unit" placeholder="请输入单位"></el-input>
            </el-form-item>
            <el-form-item label="职务">
              <el-input v-model="form.job" placeholder="请输入职务"></el-input>
            </el-form-item>
            <el-form-item label="反馈意见" prop="ideaPointOpinion">
              <el-input type="textarea" v-model="form.ideaPointOpinion" :rows="5" placeholder="请输入反馈意见"></el-input>
            </el-form-item>
            <el-form-item>
              <div style="text-align: center;">
                <el-button type="primary" style="margin-right: 40px" @click="submitOpinion('feedback')">提交</el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {feedBack} from "@/api/meeting/meetingOutInfo";
import Base from "@/views/base/Base";
export default {
    extends: Base,
    data(){
      
      var checkTel =  (rule, value, callback)=> {
        let reg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
        if(value && !reg.test(value)){
          callback(new Error('请输入正确的11位手机号'));
        }else{
          callback();
        }
      }
      return {
          rulesZh: {
            userMobile: [
              { validator: checkTel, trigger: 'blur'},
            ],
            ideaPointOpinion: [
              { required: true, message: '请填写反馈意见', trigger: 'blur'},
            ]
          },
          rulesEn: {
            ideaPointOpinion: [
              { required: true, message: 'Please enter Opinion.', trigger: 'blur'},
            ]
          },
          form: {
              // meetingId: localStorage.getItem('conferenceId'),
              meetingId: this.$route.query.key,
              umsUsername: '',
              userMobile: '',
              unit: '',
              job: '',
              ideaPointOpinion: ''
          },
          lang: '',
          meetingTitle: ''
      }
    },
    mounted(){
      this.getMeetingTitle();
    },
    created(){
      this.lang = this.$i18n.locale;
    },
    watch: {
        '$i18n.locale'(val){
            this.lang = val;
            this.getMeetingTitle();
        }
    },
    methods: {
      getMeetingTitle(){
        if(this.$route.params.key){
          this.meetingTitle = this.lang=='en'? this.$route.params.key.meetingNameEn: this.$route.params.key.meetingName
        }
      },
      submitOpinion(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.save()
          }else{
            return false;
          }
        });
      },
      save(){
        console.log('meetingId:', this.form.meetingId)
        this.submitHandler((token) => {
          feedBack(JSON.stringify(this.form), token).then(res=>{
            console.log(res)
            if(res.status == "200"){
              let msgTxt = this.lang=='en'? 'Submitted successfully. Thank you for your feedback': '提交成功，感谢反馈';
              this.$message({
                message: msgTxt,
                type: 'success'
              });
              this.$router.go(-1);
            }
          }).catch((error) => {
            this.resetToken();
          });
        });
      }
    },
}
</script>

<style scoped>
* {
  box-sizing: border-box;
}
.container-box {
  margin: 10px auto;
  background: #fff;
  padding: 0 20px;
  min-height: calc( 100vh - 420px );
}
.bread-crumb {
  background: #fff;
  padding: 20px 0;
}
.content-box {
  position: relative;
  padding-bottom: 40px;
  padding: 60px 100px 40px 100px;
}
.confrence-item-title{
  text-align: center;
  font-size: 24px;
  color: #333;
  margin-bottom: 40px;
}
</style>