ConferenceFeedback.vue 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
  1. <template>
  2. <div class="autoBox container-box">
  3. <div class="bread-crumb">
  4. <el-breadcrumb separator="/">
  5. <el-breadcrumb-item :to="{ path: 'home' }">{{lang=='en'? 'Home': '首页'}}</el-breadcrumb-item>
  6. <el-breadcrumb-item :to="{ path: 'ConferenceServices'}">{{lang=='en'? 'Conferences': '会议'}}</el-breadcrumb-item>
  7. <el-breadcrumb-item>{{lang=='en'? 'Feedback': '会议反馈'}}</el-breadcrumb-item>
  8. </el-breadcrumb>
  9. </div>
  10. <div class="content-box">
  11. <div class="confrence-item">
  12. <div class="confrence-item-title">{{meetingTitle}}</div>
  13. <div class="confrence-item-body" v-if="lang=='en'">
  14. <el-form :model="form" :rules="rulesEn" ref="feedbackEn" label-width="100px" key="1">
  15. <el-form-item label="Name">
  16. <el-input v-model="form.umsUsername" placeholder=""></el-input>
  17. </el-form-item>
  18. <el-form-item label="Tel." prop="userMobile">
  19. <el-input v-model="form.userMobile" placeholder=""></el-input>
  20. </el-form-item>
  21. <el-form-item label="Affiliation">
  22. <el-input v-model="form.unit" placeholder=""></el-input>
  23. </el-form-item>
  24. <el-form-item label="Possition">
  25. <el-input v-model="form.job" placeholder=""></el-input>
  26. </el-form-item>
  27. <el-form-item label="Opinion" prop="ideaPointOpinion">
  28. <el-input type="textarea" v-model="form.ideaPointOpinion" :rows="5" placeholder=""></el-input>
  29. </el-form-item>
  30. <el-form-item>
  31. <div style="text-align: center;">
  32. <el-button type="primary" style="margin-right: 40px" @click="submitOpinion('feedbackEn')">Submit</el-button>
  33. </div>
  34. </el-form-item>
  35. </el-form>
  36. </div>
  37. <div class="confrence-item-body" v-else>
  38. <el-form :model="form" :rules="rulesZh" ref="feedback" label-width="100px" key="2">
  39. <el-form-item label="姓名">
  40. <el-input v-model="form.umsUsername" placeholder="请输入姓名"></el-input>
  41. </el-form-item>
  42. <el-form-item label="联系电话" prop="userMobile">
  43. <el-input v-model="form.userMobile" placeholder="请输入联系电话"></el-input>
  44. </el-form-item>
  45. <el-form-item label="单位">
  46. <el-input v-model="form.unit" placeholder="请输入单位"></el-input>
  47. </el-form-item>
  48. <el-form-item label="职务">
  49. <el-input v-model="form.job" placeholder="请输入职务"></el-input>
  50. </el-form-item>
  51. <el-form-item label="反馈意见" prop="ideaPointOpinion">
  52. <el-input type="textarea" v-model="form.ideaPointOpinion" :rows="5" placeholder="请输入反馈意见"></el-input>
  53. </el-form-item>
  54. <el-form-item>
  55. <div style="text-align: center;">
  56. <el-button type="primary" style="margin-right: 40px" @click="submitOpinion('feedback')">提交</el-button>
  57. </div>
  58. </el-form-item>
  59. </el-form>
  60. </div>
  61. </div>
  62. </div>
  63. </div>
  64. </template>
  65. <script>
  66. import {feedBack} from "@/api/meeting/meetingOutInfo";
  67. import Base from "@/views/base/Base";
  68. export default {
  69. extends: Base,
  70. data(){
  71. var checkTel = (rule, value, callback)=> {
  72. let reg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
  73. if(value && !reg.test(value)){
  74. callback(new Error('请输入正确的11位手机号'));
  75. }else{
  76. callback();
  77. }
  78. }
  79. return {
  80. rulesZh: {
  81. userMobile: [
  82. { validator: checkTel, trigger: 'blur'},
  83. ],
  84. ideaPointOpinion: [
  85. { required: true, message: '请填写反馈意见', trigger: 'blur'},
  86. ]
  87. },
  88. rulesEn: {
  89. ideaPointOpinion: [
  90. { required: true, message: 'Please enter Opinion.', trigger: 'blur'},
  91. ]
  92. },
  93. form: {
  94. // meetingId: localStorage.getItem('conferenceId'),
  95. meetingId: this.$route.query.key,
  96. umsUsername: '',
  97. userMobile: '',
  98. unit: '',
  99. job: '',
  100. ideaPointOpinion: ''
  101. },
  102. lang: '',
  103. meetingTitle: ''
  104. }
  105. },
  106. mounted(){
  107. this.getMeetingTitle();
  108. },
  109. created(){
  110. this.lang = this.$i18n.locale;
  111. },
  112. watch: {
  113. '$i18n.locale'(val){
  114. this.lang = val;
  115. this.getMeetingTitle();
  116. }
  117. },
  118. methods: {
  119. getMeetingTitle(){
  120. if(this.$route.params.key){
  121. this.meetingTitle = this.lang=='en'? this.$route.params.key.meetingNameEn: this.$route.params.key.meetingName
  122. }
  123. },
  124. submitOpinion(formName){
  125. this.$refs[formName].validate((valid) => {
  126. if (valid) {
  127. this.save()
  128. }else{
  129. return false;
  130. }
  131. });
  132. },
  133. save(){
  134. console.log('meetingId:', this.form.meetingId)
  135. this.submitHandler((token) => {
  136. feedBack(JSON.stringify(this.form), token).then(res=>{
  137. console.log(res)
  138. if(res.status == "200"){
  139. let msgTxt = this.lang=='en'? 'Submitted successfully. Thank you for your feedback': '提交成功,感谢反馈';
  140. this.$message({
  141. message: msgTxt,
  142. type: 'success'
  143. });
  144. this.$router.go(-1);
  145. }
  146. }).catch((error) => {
  147. this.resetToken();
  148. });
  149. });
  150. }
  151. },
  152. }
  153. </script>
  154. <style scoped>
  155. * {
  156. box-sizing: border-box;
  157. }
  158. .container-box {
  159. margin: 10px auto;
  160. background: #fff;
  161. padding: 0 20px;
  162. min-height: calc( 100vh - 420px );
  163. }
  164. .bread-crumb {
  165. background: #fff;
  166. padding: 20px 0;
  167. }
  168. .content-box {
  169. position: relative;
  170. padding-bottom: 40px;
  171. padding: 60px 100px 40px 100px;
  172. }
  173. .confrence-item-title{
  174. text-align: center;
  175. font-size: 24px;
  176. color: #333;
  177. margin-bottom: 40px;
  178. }
  179. </style>