membershipApplication.vue 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  1. <template>
  2. <view class="membershipApplication">
  3. <u-navbar :back-text="i18n('Back')" :back-text-style="backStyle" :title-width="350"
  4. back-icon-color="#fff" title-color="#fff"
  5. :background="background" :title="i18n('MembershipApplication')">
  6. </u-navbar>
  7. <view class="content">
  8. <view class="title">{{$t('common.MembershipApplications')}}</view>
  9. <view class="form-box">
  10. <u-form :model="form" ref="uForm" label-position="top">
  11. <u-form-item :label="$i18n.locale == 'zh'? '姓名': 'Name of the contact'" prop="name" required>
  12. <u-input v-model="form.name" :placeholder="placeholder.name" />
  13. </u-form-item>
  14. <u-form-item :label="$i18n.locale == 'zh'? '单位名称': 'Company name'" prop="unitName" required>
  15. <u-input v-model="form.unitName" :placeholder="placeholder.unitName" />
  16. </u-form-item>
  17. <u-form-item :label="$i18n.locale == 'zh'? '邮箱': 'E-mail'" prop="email" required>
  18. <u-input v-model="form.email" :placeholder="placeholder.email" />
  19. </u-form-item>
  20. <u-form-item :label="$i18n.locale == 'zh'? '联系电话': 'Contact phone number'" prop="tel" required>
  21. <u-input v-model="form.tel" :placeholder="placeholder.tel" />
  22. </u-form-item>
  23. </u-form>
  24. <u-button shape="circle" type="primary" class="custom-style" @click="submit">{{$t('common.submit')}}</u-button>
  25. </view>
  26. </view>
  27. <u-toast ref="uToast" />
  28. </view>
  29. </template>
  30. <script>
  31. import {getToken} from '@/utils/auth'
  32. export default {
  33. data() {
  34. return {
  35. background:{
  36. backgroundImage: 'linear-gradient(270deg, #4BC0E2 0%, #538BE7 100%)',
  37. },
  38. backStyle:{
  39. color:'#fff'
  40. },
  41. token: '',
  42. form: {
  43. name: '',
  44. unitName: '',
  45. email: '',
  46. tel: ''
  47. },
  48. placeholder: {
  49. name: this.$i18n.locale == 'zh'? '请输入姓名': 'Please enter the name of the contact',
  50. unitName: this.$i18n.locale == 'zh'? '请输入单位名称': 'Please enter the company name',
  51. email: this.$i18n.locale == 'zh'? '请输入邮箱': 'Please enter the e-mail',
  52. tel: this.$i18n.locale == 'zh'? '请输入联系电话': 'Please enter the contact phone number'
  53. },
  54. rules: {
  55. name: [
  56. {
  57. required: true,
  58. message: this.$i18n.locale == 'zh'? '请输入姓名': 'Please enter the name of the contact',
  59. trigger: 'blur',
  60. }
  61. ],
  62. unitName: [
  63. {
  64. required: true,
  65. message: this.$i18n.locale == 'zh'? '请输入单位名称': 'Please enter the company name',
  66. trigger: 'blur'
  67. }
  68. ],
  69. email: [
  70. {
  71. required: true,
  72. message: this.$i18n.locale == 'zh'? '请输入邮箱': 'Please enter the e-mail',
  73. trigger: 'blur',
  74. },
  75. {
  76. message: this.$i18n.locale == 'zh'? '邮箱格式不正确': 'Email format is not correct, please input again',
  77. type: 'email',
  78. trigger: 'blur'
  79. }
  80. ],
  81. tel: [
  82. {
  83. required: true,
  84. message: this.$i18n.locale == 'zh'? '请输入联系电话': 'Please enter the contact phone number',
  85. trigger: 'blur'
  86. },
  87. {
  88. validator: (rule, value, callback) => {
  89. return this.$u.test.mobile(value);
  90. },
  91. message: this.$i18n.locale == 'zh'? '手机号码不正确': 'The contact phone number is incorrect',
  92. trigger: 'blur'
  93. }
  94. ]
  95. },
  96. }
  97. },
  98. onReady() {
  99. this.$refs.uForm.setRules(this.rules);
  100. },
  101. methods: {
  102. i18n (data) {
  103. return this.$t('common.'+data);
  104. },
  105. submit() {
  106. this.$refs.uForm.validate(valid => {
  107. if (valid) {
  108. this.getToken();
  109. } else {
  110. console.log('验证失败');
  111. }
  112. });
  113. },
  114. async baseMemberApplys() {
  115. const that = this;
  116. const res = await this.$myRequest({
  117. url: '/project/baseMemberApplys/appCommitMemberApply',
  118. method: 'POST',
  119. data: {
  120. contactsName: this.form.name,
  121. unitZhName: this.form.unitName,
  122. email: this.form.email,
  123. mobilePhone: this.form.tel,
  124. language: this.$i18n.locale.toUpperCase(),
  125. token: this.token
  126. }
  127. });
  128. // console.log(res);
  129. if(res.status == 200) {
  130. uni.navigateTo({
  131. url: '/pages/service/membership/successful?value=member&key='+res.data
  132. })
  133. }else {
  134. that.$refs.uToast.show({
  135. title: that.$i18n.locale == 'zh'?'申请失败!':'Application failed!',
  136. type: 'error'
  137. });
  138. }
  139. },
  140. async getToken() {
  141. const res = await this.$myRequest({
  142. url: '/sys/token'
  143. });
  144. // console.log(res);
  145. this.token = res.data;
  146. this.baseMemberApplys();
  147. }
  148. }
  149. }
  150. </script>
  151. <style lang="scss" scoped>
  152. .membershipApplication {
  153. .content {
  154. margin-top: 20upx;
  155. background-color: #FFFFFF;
  156. padding: 30upx;
  157. height: calc(100vh - 20upx - 44px - var(--status-bar-height));
  158. }
  159. .title {
  160. color: #1777FE;
  161. font-size: 32upx;
  162. margin-bottom: 20upx;
  163. }
  164. .custom-style {
  165. width: 100%;
  166. height: 80upx;
  167. margin-top: 60upx;
  168. }
  169. }
  170. </style>