login.vue 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248
  1. <template>
  2. <view class="container login" v-if="isWxAuthorize">
  3. <view class="login-main">
  4. <image class="logo" src="https://admin-b.caimei365.com/userfiles/1/images/photo/2020/11/logo.png" mode=""></image>
  5. </view>
  6. <view class="login-form">
  7. <view class="login-input">
  8. <input type="text"
  9. v-model="accountNumber"
  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="password" maxlength="18" class="input" placeholder="请输入密码" autocomplete="new-password"/>
  17. <input v-show="!isShowEye" type="password" v-model="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="this.$api.navigateTo('/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 class="login-tel">客服热线:0755-22907771</view>
  28. </view>
  29. </template>
  30. <script>
  31. import { mapState,mapMutations } from 'vuex';
  32. import authorize from '@/common/config/authorize.js'
  33. import wxLogin from "@/common/config/wxLogin.js"
  34. import { organizationLogin } from '@/api/use.js'
  35. export default{
  36. data() {
  37. return{
  38. isShowEye:false,
  39. iconEyes:'icon-yanjing_yincang_o',
  40. iconEyen:'icon-yanjing_xianshi_o',
  41. accountNumber:'', //用户登录账号
  42. password:'', //用户登录密码
  43. toestText:'',
  44. telPhone:'',
  45. loginType:'', //跳转类型
  46. alertText:'',
  47. listType: '',
  48. listVal: '',
  49. detilType:'',
  50. id:'', //商品ID
  51. getOption:'' //页面传递参数
  52. }
  53. },
  54. onLoad(option) {
  55. this.getOption = JSON.stringify(option)
  56. },
  57. computed: {
  58. ...mapState(['hasLogin','isWxAuthorize','isLoginType'])
  59. },
  60. methods:{
  61. ...mapMutations(['login']),
  62. confirmLogin(){
  63. if( this.accountNumber == ''){
  64. this.$util.msg('请输入账户名',2000)
  65. return
  66. }
  67. if( this.password == ''){
  68. this.$util.msg('请输入密码',2000)
  69. return
  70. }
  71. authorize.getSetting().then(wxResponse =>{// console.log('是否已授权',res);//0:为取消授权 1:为已授权 2:为未操作
  72. if(wxResponse == 1){
  73. this.OrganizationLogin()
  74. }else{
  75. this.$api.navigateTo('/pages/authorization/authorization?type=0')
  76. }
  77. })
  78. },
  79. OrganizationLogin(){
  80. organizationLogin({mobileOrEmail:this.accountNumber,password:this.password,source:'www'}).then(response =>{
  81. this.storeUpdataeStatus(response.data)
  82. this.$api.navigateTo(`/pages/login/bindwechat?data=${JSON.stringify(this.getOption)}&codeType=${response.code}`)
  83. }).catch(error =>{
  84. this.$util.msg(error.msg,2000);
  85. })
  86. },
  87. storeUpdataeStatus(data){
  88. uni.setStorageSync('token',data.token)
  89. this.$store.commit('updateStatus',data)
  90. this.login(data);
  91. },
  92. passwordClick() { //密码显隐操作
  93. this.isShowEye = !this.isShowEye;
  94. },
  95. },
  96. onShow() {
  97. authorize.getSetting().then(wxResponse =>{// console.log('是否已授权',res);//0:为取消授权 1:为已授权 2:为未操作
  98. if(wxResponse == 1){
  99. wxLogin.wxLoginQuick()
  100. console.log(this.isLoginType)
  101. }else{
  102. this.$api.navigateTo('/pages/authorization/authorization?type=0')
  103. }
  104. })
  105. }
  106. }
  107. </script>
  108. <style lang="scss">
  109. .login{
  110. width: 100%;
  111. height: auto;
  112. .model-warp.none{
  113. display: none;
  114. }
  115. .model-warp.show{
  116. display: block;
  117. }
  118. .login-main{
  119. width: 100%;
  120. display: flex;
  121. flex-direction: column;
  122. align-items: center;
  123. height: 189rpx;
  124. padding:60rpx 0 40rpx 0;
  125. margin-bottom: 70rpx;
  126. .logo{
  127. width:467rpx;
  128. height: 189rpx;
  129. display: block;
  130. }
  131. }
  132. .login-input{
  133. width: 600rpx;
  134. height: 88rpx;
  135. padding: 24rpx 40rpx;
  136. margin: 0 auto;
  137. margin-bottom: 30rpx;
  138. background: #F7F7F7;
  139. border-radius: 44rpx;
  140. position: relative;
  141. box-sizing: border-box;
  142. .input{
  143. width: 100%;
  144. height: 100%;
  145. background: #F7F7F7;
  146. font-size: $font-size-28;
  147. line-height: 88rpx;
  148. color: #333333;
  149. }
  150. .iconfont{
  151. position: absolute;
  152. right: 0;
  153. top: 0;
  154. font-size: 44rpx;
  155. color: #999999;
  156. font-weight: bold;
  157. z-index: 99;
  158. width: 96rpx;
  159. height: 96rpx;
  160. line-height: 96rpx;
  161. text-align: center;
  162. }
  163. &.link{
  164. background: #FFFFFF;
  165. margin-bottom: 40rpx;
  166. padding: 0 24rpx;
  167. line-height: 40rpx;
  168. font-size: $font-size-28;
  169. .login-reg{
  170. float: left;
  171. color: $color-system;
  172. }
  173. .login-pwd{
  174. float: right;
  175. color: $text-color;
  176. }
  177. }
  178. }
  179. .login-btn{
  180. width: 600rpx;
  181. height: 88rpx;
  182. border-radius: 44rpx;
  183. font-size: $font-size-28;
  184. line-height: 88rpx;
  185. color: #FFFFFF;
  186. margin: 0 auto;
  187. text-align: center;
  188. background: $btn-confirm;
  189. }
  190. .login-btn-last{
  191. width: 600rpx;
  192. height: 86rpx;
  193. border-radius: 44rpx;
  194. font-size: $font-size-28;
  195. line-height: 88rpx;
  196. color: $color-system;
  197. margin: 0 auto;
  198. text-align: center;
  199. border: 1px solid $color-system;
  200. margin-top: 20rpx;
  201. }
  202. .login-tel{
  203. width: 702rpx;
  204. font-size: $font-size-28;
  205. line-height: 80rpx;
  206. margin: 0 auto;
  207. color: $text-color;
  208. text-align: center;
  209. margin-top: 150rpx;
  210. }
  211. .model-authorization{
  212. width: 100%;
  213. height: 100%;
  214. position: fixed;
  215. top: 0;
  216. left: 0;
  217. z-index: 999;
  218. .authorization{
  219. width: 518rpx;
  220. height: 320rpx;
  221. position: absolute;
  222. background: rgba(255,255,255,.7);
  223. left: 0;
  224. right: 0;
  225. bottom: 0;
  226. top: 0;
  227. margin: auto;
  228. .to-btn{
  229. position: absolute;
  230. top: 0;
  231. left: 0;
  232. right: 0;
  233. bottom: 0;
  234. margin: auto;
  235. width: 70%;
  236. height: 88rpx;
  237. font-size: $font-size-28;
  238. line-height: 88rpx;
  239. color: #FFFFFF;
  240. text-align: center;
  241. border-radius: 44rpx;
  242. }
  243. }
  244. }
  245. }
  246. </style>