index.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  1. <template>
  2. <mobile-frame>
  3. <view class="main">
  4. <view class="two">
  5. <uni-forms ref="form" :rules="rules" :model="form" label-width="auto">
  6. <uni-forms-item label="账号" name="phone">
  7. <uni-easyinput type="text" v-model="form.phone" placeholder="请输入账号" />
  8. </uni-forms-item>
  9. <uni-forms-item label="密码" name="password">
  10. <uni-easyinput type="password" v-model="form.password" placeholder="请输入密码" />
  11. </uni-forms-item>
  12. <view class="btn">
  13. <button type="default" size="mini" @click="toSubmit('form')">登录</button>
  14. <button type="default" size="mini" @click="wxLogin()">微信信任登录</button>
  15. </view>
  16. </uni-forms>
  17. </view>
  18. </view>
  19. </mobile-frame>
  20. </template>
  21. <script>
  22. export default {
  23. data() {
  24. return {
  25. logoUrl: this.$config.logoUrl,
  26. form: {},
  27. rules: {
  28. phone: {
  29. rules: [{
  30. required: true,
  31. errorMessage: '请输入账号',
  32. },
  33. {
  34. minLength: 11,
  35. maxLength: 11,
  36. errorMessage: '账号长度在{maxLength}个字符',
  37. }
  38. ]
  39. },
  40. password: {
  41. rules: [{
  42. required: true,
  43. errorMessage: '请输入密码',
  44. }, ]
  45. },
  46. }
  47. };
  48. },
  49. onShow: function() {
  50. const that = this;
  51. that.search();
  52. },
  53. methods: {
  54. search() {
  55. const that = this;
  56. },
  57. // 提交登录
  58. toSubmit(ref) {
  59. const that = this;
  60. that.$refs[ref].validate().then(async params => {
  61. const res = await that.$api(`/user/login`, 'POST', {
  62. ...params
  63. })
  64. if (res.errcode == '0') {
  65. uni.showToast({
  66. title: '登录成功',
  67. icon: 'success'
  68. });
  69. uni.setStorage({
  70. key: 'token',
  71. data: res.data,
  72. success: function() {
  73. uni.navigateBack({
  74. delta: 1
  75. })
  76. }
  77. });
  78. } else {
  79. if (res.errcode == '-5') {
  80. // 账号无,注册账号
  81. that.createUser(params);
  82. } else {
  83. uni.showToast({
  84. title: res.errmsg,
  85. icon: 'none'
  86. });
  87. }
  88. }
  89. }).catch(err => {
  90. console.log('表单错误信息:', err);
  91. })
  92. },
  93. // 注册账号,去登录
  94. async createUser(params) {
  95. const that = this;
  96. const res = await that.$api(`/user`, 'POST', {
  97. ...params
  98. })
  99. if (res.errcode == '0') {
  100. that.userLogin(params, '1')
  101. } else {
  102. uni.showToast({
  103. title: res.errmsg,
  104. });
  105. }
  106. },
  107. // 注册微信账号,去登录
  108. async createwxUser(params) {
  109. const that = this;
  110. const res = await that.$api(`/user`, 'POST', {
  111. ...params
  112. })
  113. if (res.errcode == '0') {
  114. that.userLogin(params, '2')
  115. } else {
  116. uni.showToast({
  117. title: res.errmsg,
  118. });
  119. }
  120. },
  121. // 账号,微信登录
  122. async userLogin(params, type) {
  123. const that = this;
  124. let res;
  125. if (type == '1') {
  126. res = await that.$api(`/user/login`, 'POST', {
  127. ...params
  128. })
  129. } else if (type == '2') {
  130. res = await that.$api(`/user/wxLogin`, 'POST', {
  131. openid: params.openid
  132. })
  133. }
  134. if (res.errcode == '0') {
  135. uni.showToast({
  136. title: '登录成功',
  137. icon: 'success'
  138. });
  139. uni.setStorage({
  140. key: 'token',
  141. data: res.data,
  142. success: function() {
  143. uni.navigateBack({
  144. delta: 1
  145. })
  146. }
  147. });
  148. } else {
  149. if (res.errcode == '-5') {
  150. // 账号无,注册账号
  151. that.createwxUser(params);
  152. } else {
  153. uni.showToast({
  154. title: res.errmsg,
  155. icon: 'none'
  156. });
  157. }
  158. }
  159. },
  160. // 微信登录
  161. wxLogin() {
  162. const that = this;
  163. uni.login({
  164. provider: 'weixin',
  165. success: function(res) {
  166. // 获取平台信息
  167. uni.getSystemInfo({
  168. success: async function(arr) {
  169. let platForm = arr.uniPlatform;
  170. if (platForm == 'app') { //app平台
  171. uni.showToast({
  172. title: 'app端暂未开通微信登录',
  173. icon: 'none'
  174. });
  175. } else if (platForm == 'mp-weixin') { //微信平台
  176. const aee = await that.$api(`/wechat/api/login/app`, 'GET', {
  177. js_code: res.code,
  178. config: 'pointApp'
  179. })
  180. if (aee.errcode == '0') {
  181. // 微信登录
  182. that.userLogin({
  183. openid: aee.data.openid
  184. }, '2');
  185. } else {
  186. uni.showToast({
  187. title: res.errmsg,
  188. });
  189. }
  190. }
  191. }
  192. });
  193. },
  194. fail: function(err) {
  195. console.log(err);
  196. }
  197. })
  198. },
  199. }
  200. }
  201. </script>
  202. <style lang="scss">
  203. .main {
  204. .two {
  205. padding: 2vw;
  206. .btn {
  207. text-align: center;
  208. margin: 0 0 2vw 0;
  209. button {
  210. margin: 0 2vw;
  211. background-color: var(--f35BColor);
  212. color: var(--fffColor);
  213. }
  214. }
  215. }
  216. }
  217. </style>