login.vue 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251
  1. <template>
  2. <view class="container login">
  3. <view class="login-main">
  4. <image class="logo" src="https://static.caimei365.com/app/img/icon/logo@2x.png" mode=""></image>
  5. </view>
  6. <view class="login-form">
  7. <view class="login-input">
  8. <input type="text"
  9. v-model="params.mobileOrEmail"
  10. maxlength="30"
  11. class="input"
  12. placeholder="请输入邮箱/手机号"
  13. />
  14. </view>
  15. <view class="login-input">
  16. <input v-show="isShowEye" type="text" v-model="params.password" maxlength="18" class="input" placeholder="请输入密码" autocomplete="new-password"/>
  17. <input v-show="!isShowEye" type="password" v-model="params.password" :password="true" maxlength="18" class="input" placeholder="请输入密码" autocomplete="new-password"/>
  18. <view class="iconfont" :class="isShowEye ? iconEyen : iconEyes" @click="passwordClick"></view>
  19. </view>
  20. <view class="login-input link">
  21. <view class="login-reg" @click.stop="navigatorRegirst('/pages/login/register-select')">免费注册</view>
  22. <view class="login-pwd" @click.stop="this.$api.navigateTo('/pages/login/password')">忘记密码?</view>
  23. </view>
  24. </view>
  25. <view class="login-btn" @click="confirmLogin">登录</view>
  26. <view class="login-btn-last" @click.stop="this.$api.navigateTo(`/pages/login/logincode?data=${getOption}`)">邀请码登录></view>
  27. </view>
  28. </template>
  29. <script>
  30. import { mapState,mapMutations } from 'vuex';
  31. import authorize from '@/common/config/authorize.js'
  32. import wxLogin from "@/common/config/wxLogin.js"
  33. export default{
  34. data() {
  35. return{
  36. isShowEye:false,
  37. iconEyes:'icon-yanjing_yincang_o',
  38. iconEyen:'icon-yanjing_xianshi_o',
  39. getOption:'', //页面传递参数
  40. params:{
  41. mobileOrEmail:'',//用户登录账号
  42. password:'',//用户登录密码
  43. unionId:''
  44. }
  45. }
  46. },
  47. onLoad(option) {
  48. this.getOption = JSON.stringify(option)
  49. },
  50. computed: {
  51. ...mapState(['hasLogin','isWxAuthorize','isLoginType'])
  52. },
  53. methods:{
  54. ...mapMutations(['login']),
  55. async confirmLogin(){
  56. if( this.params.mobileOrEmail == ''){
  57. this.$util.msg('请输入账户名',2000)
  58. return
  59. }
  60. if( this.params.password == ''){
  61. this.$util.msg('请输入密码',2000)
  62. return
  63. }
  64. this.AorganizationLogin()
  65. },
  66. AorganizationLogin(){
  67. this.UserService.AorganizationLogin(this.params)
  68. .then(response =>{
  69. if(response.code === 0){
  70. this.storeUpdataeStatus(response.data)
  71. this.$api.navigateTo(`/pages/login/bindwechat?data=${JSON.stringify(this.getOption)}&codeType=${response.code}`)
  72. }else if(response.code === -3){
  73. this.$util.modal('','您的企业账号审核未通过,请修改资料','前往修改','',false,() =>{
  74. this.$store.commit('updateStatus',response.data)
  75. this.$api.navigateTo('/pages/login/apply-supplier')
  76. })
  77. }else{
  78. this.$util.msg(response.msg,2000);
  79. }
  80. })
  81. },
  82. storeUpdataeStatus(data){
  83. uni.setStorageSync('token',data.token)
  84. this.$store.commit('updateStatus',data)
  85. this.login(data);
  86. },
  87. navigatorRegirst(url){
  88. // 友盟埋点注册入口点击事件
  89. if(process.env.NODE_ENV != 'development'){
  90. this.$uma.trackEvent('Um_Event_Regiest', {
  91. Um_Key_PageName: '立即注册',
  92. Um_Key_SourcePage: '登录页面',
  93. })
  94. }
  95. this.$api.navigateTo(url)
  96. },
  97. passwordClick() { //密码显隐操作
  98. this.isShowEye = !this.isShowEye;
  99. },
  100. async InitAuthorize(){ //是否已授权 0:为取消授权 1:为已授权 2:为未操作
  101. wxLogin.wxLoginQuick()
  102. }
  103. },
  104. onShow() {
  105. this.$api.getStorage().then((resolve) =>{
  106. this.params.unionId = resolve.unionId ? resolve.unionId : 0
  107. })
  108. this.InitAuthorize()
  109. }
  110. }
  111. </script>
  112. <style lang="scss">
  113. .login{
  114. width: 100%;
  115. height: auto;
  116. .model-warp.none{
  117. display: none;
  118. }
  119. .model-warp.show{
  120. display: block;
  121. }
  122. .login-main{
  123. width: 100%;
  124. display: flex;
  125. flex-direction: column;
  126. align-items: center;
  127. height: 189rpx;
  128. padding:60rpx 0 40rpx 0;
  129. margin-bottom: 70rpx;
  130. .logo{
  131. width:467rpx;
  132. height: 189rpx;
  133. display: block;
  134. }
  135. }
  136. .login-input{
  137. width: 600rpx;
  138. height: 88rpx;
  139. padding: 24rpx 0;
  140. margin: 0 auto;
  141. margin-bottom: 30rpx;
  142. background: #FFFFFF;
  143. position: relative;
  144. box-sizing: border-box;
  145. border-bottom: 1px solid #e1e1e1;
  146. .input{
  147. width: 100%;
  148. height: 100%;
  149. background: #FFFFFF;
  150. font-size: $font-size-28;
  151. line-height: 88rpx;
  152. color: #333333;
  153. }
  154. .iconfont{
  155. position: absolute;
  156. right: 0;
  157. top: 0;
  158. font-size: 44rpx;
  159. color: #999999;
  160. font-weight: bold;
  161. z-index: 99;
  162. width: 96rpx;
  163. height: 96rpx;
  164. line-height: 96rpx;
  165. text-align: center;
  166. }
  167. &.link{
  168. background: #FFFFFF;
  169. margin-bottom: 40rpx;
  170. padding: 0 0;
  171. line-height: 40rpx;
  172. font-size: $font-size-28;
  173. border-bottom: none;
  174. .login-reg{
  175. float: left;
  176. color: $color-system;
  177. }
  178. .login-pwd{
  179. float: right;
  180. color: $text-color;
  181. }
  182. }
  183. }
  184. .login-btn{
  185. width: 600rpx;
  186. height: 88rpx;
  187. border-radius: 44rpx;
  188. font-size: $font-size-28;
  189. line-height: 88rpx;
  190. color: #FFFFFF;
  191. margin: 0 auto;
  192. text-align: center;
  193. background: $btn-confirm;
  194. }
  195. .login-btn-last{
  196. width: 600rpx;
  197. height: 86rpx;
  198. font-size: $font-size-28;
  199. line-height: 88rpx;
  200. color: $color-system;
  201. margin: 0 auto;
  202. text-align: center;
  203. margin-top: 100rpx;
  204. }
  205. .login-tel{
  206. width: 702rpx;
  207. font-size: $font-size-28;
  208. line-height: 80rpx;
  209. margin: 0 auto;
  210. color: $text-color;
  211. text-align: center;
  212. margin-top: 150rpx;
  213. }
  214. .model-authorization{
  215. width: 100%;
  216. height: 100%;
  217. position: fixed;
  218. top: 0;
  219. left: 0;
  220. z-index: 999;
  221. .authorization{
  222. width: 518rpx;
  223. height: 320rpx;
  224. position: absolute;
  225. background: rgba(255,255,255,.7);
  226. left: 0;
  227. right: 0;
  228. bottom: 0;
  229. top: 0;
  230. margin: auto;
  231. .to-btn{
  232. position: absolute;
  233. top: 0;
  234. left: 0;
  235. right: 0;
  236. bottom: 0;
  237. margin: auto;
  238. width: 70%;
  239. height: 88rpx;
  240. font-size: $font-size-28;
  241. line-height: 88rpx;
  242. color: #FFFFFF;
  243. text-align: center;
  244. border-radius: 44rpx;
  245. }
  246. }
  247. }
  248. }
  249. </style>