register.vue 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. <template>
  2. <view>
  3. <uv-toast ref="toast"></uv-toast>
  4. <view class="page">
  5. <uv-row justify="space-between" customStyle="margin-top: 35%" class="form">
  6. <uv-col span="10" offset="1">
  7. <uv-form labelPosition="left" :model="logininfo" :rules="rules" ref="form" >
  8. <uv-col span="10" offset="1">{{$t('telno')}}</uv-col>
  9. <uv-col span="10" offset="1">
  10. <uv-form-item prop="telno">
  11. <uv-input v-model.trim="logininfo.telno" border="surround">
  12. </uv-input>
  13. </uv-form-item>
  14. </uv-col>
  15. <uv-col span="10" offset="1" customStyle="margin-top: 20px">{{$t('password')}}</uv-col>
  16. <uv-col span="10" offset="1">
  17. <uv-form-item prop="pw1">
  18. <uv-input v-model.trim="logininfo.pw1" :type="passwordtype1" border="surround">
  19. </uv-input>
  20. <template v-slot:right>
  21. <uv-icon name="eye-off-outline" color="#2979ff" size="18" v-show="!showpasswod1" @click="setshowpasswod1"></uv-icon>
  22. <uv-icon name="eye" color="#2979ff" size="18" v-show="showpasswod1" @click="setshowpasswod1"></uv-icon>
  23. </template>
  24. </uv-form-item>
  25. </uv-col>
  26. <uv-col span="10" offset="1" customStyle="margin-top: 20px">{{$t('password_repeat')}}</uv-col>
  27. <uv-col span="10" offset="1">
  28. <uv-form-item prop="pw2">
  29. <uv-input v-model.trim="logininfo.pw2" :type="passwordtype2" border="surround">
  30. </uv-input>
  31. <template v-slot:right>
  32. <uv-icon name="eye-off-outline" color="#2979ff" size="18" v-show="!showpasswod2" @click="setshowpasswod2"></uv-icon>
  33. <uv-icon name="eye" color="#2979ff" size="18" v-show="showpasswod2" @click="setshowpasswod2"></uv-icon>
  34. </template>
  35. </uv-form-item>
  36. </uv-col>
  37. <uv-col>
  38. <text @click="showPrivacyPolicy" class="privacypolicy">{{$t('privacy_policy')}}</text>
  39. </uv-col>
  40. <uv-col span="10" offset="1">
  41. <uv-button type="primary" :text="$t('register')" customStyle="margin-top: 20px" @click="submit"></uv-button>
  42. </uv-col>
  43. </uv-form>
  44. <uv-col span="10" offset="1">
  45. <uv-button type="primary" :plain="true" :throttleTime="throttleTime" :text="$t('login')" customStyle="margin-top: 2rem" @click="tolgoin"></uv-button>
  46. </uv-col>
  47. </uv-col>
  48. </uv-row>
  49. </view>
  50. </view>
  51. </template>
  52. <script>
  53. import {register,login} from "@/common/api/user.js"
  54. export default {
  55. data() {
  56. return {
  57. throttleTime:1,
  58. logininfo:{
  59. telno:'',
  60. pw1:'',
  61. pw2:'',
  62. },
  63. rules:{
  64. 'telno':[{
  65. type: 'string',
  66. required: true,
  67. message: this.$t('telno_null'),
  68. trigger: ['blur'],
  69. },{
  70. pattern: /\d{5,}/,
  71. message: this.$t('telno_error'),
  72. trigger: ['blur'],
  73. }
  74. ],
  75. 'pw1': {
  76. type: 'string',
  77. required: true,
  78. message: this.$t('password_null'),
  79. trigger: ['blur']
  80. },
  81. 'pw2':[{
  82. type: 'string',
  83. required: true,
  84. message: this.$t('password_null'),
  85. trigger: ['blur']
  86. },{
  87. validator: (rule, value, callback) => {
  88. if(value!=this.logininfo.pw1){
  89. return false
  90. }
  91. return true
  92. },
  93. message: this.$t("password_repeat_error"),
  94. trigger: ['blur']
  95. }] ,
  96. },
  97. showpasswod1:false,
  98. passwordtype1:"password",
  99. showpasswod2:false,
  100. passwordtype2:"password"
  101. }
  102. },
  103. methods: {
  104. submit(){
  105. var that = this
  106. this.$refs.form.validate().then(res => {
  107. let data ={telno:that.logininfo.telno,userpw:that.logininfo.pw1}
  108. register(data).then(res=>{
  109. res=res.data
  110. if(0==res.code){
  111. that.$refs.toast.show({
  112. type: 'error',
  113. message: that.$t("register_error")
  114. })
  115. }
  116. if(200==res.code){
  117. let data={telno:that.logininfo.telno,pw:that.logininfo.pw1}
  118. login(data,that)
  119. }
  120. })
  121. }).catch(errors => {
  122. console.log(errors)
  123. })
  124. },
  125. setshowpasswod1(){
  126. this.showpasswod1 = !this.showpasswod1
  127. if(this.showpasswod1){
  128. this.passwordtype1="text"
  129. }else{
  130. this.passwordtype1="password"
  131. }
  132. },
  133. setshowpasswod2(){
  134. this.showpasswod2 = !this.showpasswod2
  135. if(this.showpasswod2){
  136. this.passwordtype2="text"
  137. }else{
  138. this.passwordtype2="password"
  139. }
  140. },
  141. tolgoin(){
  142. uni.navigateTo({
  143. url: '/pages/login/login'
  144. });
  145. },
  146. showPrivacyPolicy(){
  147. let weburl = 'https://app.chienxutech.com:30443/Uploads/ssjprivate_en.html';
  148. uni.navigateTo({
  149. url: '/pages/webview/webview?weburl='+weburl+'&title='+this.$t('privacy_policy')
  150. });
  151. }
  152. },
  153. mounted(){
  154. uni.setNavigationBarTitle({
  155. title: this.$t('register')
  156. });
  157. this.throttleTime = getApp().globalData.throttleTime;
  158. }
  159. }
  160. </script>
  161. <style scoped>
  162. .privacypolicy{
  163. margin-top: 10px;
  164. text-align: center;
  165. color: #2979ff;
  166. font-size: 12px;
  167. }
  168. .uv-border{
  169. border-color: #909191 !important;
  170. }
  171. </style>