login.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428
  1. <!-- 登录 -->
  2. <template>
  3. <view id="login">
  4. <!-- <img class="login-max-big" src="@/images/img_bg_dl.png"> -->
  5. <img class="login-max-big" :src="loginBanner">
  6. <view class="login-box">
  7. <view class="tabTitle">
  8. <view class="tabTitle_li" @tap="tabClick(index)" :key="index" v-for="(item,index) in tabText">
  9. <view :class="{on:curTab==index}" class="tabTitle_text">{{item}}</view>
  10. <view :class="{on:curTab==index}" class="tabTitle_across"></view>
  11. </view>
  12. </view>
  13. <view class="input-max-box-one">
  14. <view class="input-box">
  15. <img src="@/images/img_log_in_account.png"/>
  16. <input type="text" v-model="username" placeholder="请输入账号" maxlength="20">
  17. </view>
  18. </view>
  19. <view class="input-max-box-two">
  20. <view class="input-box">
  21. <img src="@/images/img_log_in_password.png"/>
  22. <input type="password" v-model="password" placeholder="请输入密码" maxlength="20">
  23. </view>
  24. </view>
  25. <view class="check-box" @click="checkboxChange">
  26. <img v-if="checkedType" src="@/images/icon_13.png"/>
  27. <img v-if="!checkedType" src="@/images/icon_12.png"/>
  28. <view>记住我</view>
  29. </view>
  30. <view class="button-box" @click="login">登录</view>
  31. <view class="supplier" v-if="curTab==1">
  32. <view class="supplier_l" @click="handleClick('forget')">忘记密码</view>
  33. <view class="supplier_r" @click="handleClick('register')">没有账号,<text>立即注册</text></view>
  34. </view>
  35. </view>
  36. <!-- <img class="top-back" src="@/images/img_sys_bg.png"/> -->
  37. </view>
  38. </template>
  39. <script>
  40. import { config } from '@/api/request/config.js'
  41. import { login,getLogoInfo,getDemoInfoList,getOpenId,getUrlConfig,getGentleIdentifier} from '@/api/index.js'
  42. import { Encrypt,Decrypt} from '@/utils/secret.js'
  43. export default {
  44. data() {
  45. return {
  46. identityStatus:1,
  47. username:"",
  48. password:"",
  49. checkedType:false,
  50. loginBanner:uni.getStorageSync('loginBanner'),
  51. infoList:[],//模板消息Id
  52. tabText:['师生登录','供应商登录'],
  53. curTab:0,
  54. pageType:0,
  55. }
  56. },
  57. onLoad(option) {
  58. //供应商注册成功后返回到供应商注册页面
  59. if(option.status){
  60. this.identityStatus=2
  61. }
  62. if(uni.getStorageSync('userName') && uni.getStorageSync('password')){
  63. this.username = uni.getStorageSync('userName');
  64. this.password = uni.getStorageSync('password');
  65. this.checkedType = true;
  66. }
  67. },
  68. onShow(){
  69. this.getLogoInfo();
  70. this.getUrlConfig();
  71. },
  72. methods: {
  73. //顶部tab点击
  74. tabClick(index) {
  75. this.curTab = index;
  76. },
  77. //获取用户身份标识"adminGentle": false, 管理员身份 "rectifyGentle": false, 整改身份"applyGentle": false 检查者身份
  78. async getGentleIdentifier(){
  79. let self = this;
  80. const {data} = await getGentleIdentifier();
  81. if(data.code==200){
  82. // 如果是管理员 检查者和整改者
  83. if(data.data.adminGentle && (data.data.applyGentle || data.data.myApplyGentle) && data.data.rectifyGentle){
  84. self.pageType=1
  85. }else if(data.data.adminGentle && (data.data.applyGentle || data.data.myApplyGentle) && !data.data.rectifyGentle){
  86. self.pageType=1
  87. }else if(data.data.adminGentle && !data.data.applyGentle && data.data.rectifyGentle){
  88. self.pageType=1
  89. }else if(!data.data.adminGentle && (data.data.applyGentle || data.data.myApplyGentle) && data.data.rectifyGentle){
  90. self.pageType=2
  91. }else if(data.data.adminGentle && !data.data.applyGentle && !data.data.rectifyGentle){
  92. self.pageType=1
  93. }else if(!data.data.adminGentle && (data.data.applyGentle || data.data.myApplyGentle) && !data.data.rectifyGentle){
  94. self.pageType=2
  95. }else if(!data.data.adminGentle && !data.data.applyGentle && data.data.rectifyGentle){
  96. self.pageType=3
  97. }else if(!data.data.adminGentle && !data.data.applyGentle && !data.data.rectifyGentle){
  98. console.log('暂无权限')
  99. self.pageType='mine'
  100. }
  101. uni.setStorageSync('gentleIdentifier',self.pageType)
  102. uni.setStorageSync('gentleIdentifierData',data.data)
  103. console.log('安全检查身份',self.pageType)
  104. if(self.pageType=='mine'){
  105. uni.redirectTo({
  106. url: '/pages/mine',
  107. });
  108. }else{
  109. uni.redirectTo({
  110. url: '/pages/home',
  111. });
  112. }
  113. }
  114. },
  115. //获取openID
  116. async getOpenId(){
  117. let _this=this;
  118. let code=uni.getStorageSync('code')
  119. const {data} = await getOpenId({code:code});
  120. if(data.code==200){
  121. }else if(data.code==500){
  122. }
  123. },
  124. switchClick(){
  125. if(this.identityStatus==1){
  126. this.identityStatus=2;
  127. }else{
  128. this.identityStatus=1;
  129. }
  130. },
  131. async getLogoInfo(){
  132. const {data} = await getLogoInfo();
  133. if(data.code == 200){
  134. this.loginBanner = config.base_url + data.data.loginBanner;
  135. uni.setStorageSync('loginBanner',config.base_url + data.data.loginBanner)
  136. uni.setStorageSync('homepageBanner',config.base_url + data.data.homepageBanner)
  137. uni.setStorageSync('videoCover',config.base_url + data.data.videoCover)
  138. }
  139. },
  140. async getUrlConfig(){
  141. const {data} = await getUrlConfig();
  142. if(data.code == 200){
  143. //文件预览地址
  144. uni.setStorageSync('filePreviewUrl','https://'+data.data.fileExtranetUrl)
  145. //摄像头代理访问地址
  146. uni.setStorageSync('cameraExtranetAgent','https://'+data.data.cameraExtranetAgent)
  147. //摄像头地址ip段
  148. uni.setStorageSync('cameraIntranetAgent',data.data.cameraIntranetAgent)
  149. //摄像头访问地址
  150. uni.setStorageSync('cameraUrl','https://'+data.data.cameraExtranetUrl)
  151. //MQTT地址
  152. uni.setStorageSync('mqttUrl',Decrypt(data.data.mqttExtranetUrl))
  153. //MQTT账号
  154. uni.setStorageSync('mqttUser',Decrypt(data.data.mqttExtranetUser))
  155. //MQTT密码
  156. uni.setStorageSync('mqttPassword',Decrypt(data.data.mqttExtranetPassword))
  157. }
  158. },
  159. checkboxChange() {
  160. this.checkedType = !this.checkedType;
  161. },
  162. //点击事件
  163. handleClick(doType) {
  164. if(doType=='register'){//供应商注册
  165. uni.redirectTo({
  166. url: '/pages_supplier/register/register?pageStatus=0'
  167. });
  168. }else if(doType=='forget'){//忘记密码
  169. uni.showModal({
  170. showCancel:false,
  171. confirmColor:'#0183FA',
  172. content: '请您联系学校相关管理人员申请重置密码',
  173. success: function (res) {
  174. if (res.confirm) {
  175. }
  176. }
  177. });
  178. }
  179. },
  180. async login() {
  181. let self = this;
  182. let obj = {
  183. username:this.username,
  184. password:this.password,
  185. }
  186. const {data} = await login(obj)
  187. if(data.code == 200){
  188. uni.setStorageSync('token','Bearer '+data.data.access_token);
  189. uni.setStorageSync('userId',data.data.user_id);
  190. this.getOpenId();//获取openid
  191. if(data.data.type == "00" ||data.data.type == "11"){//管理端
  192. uni.setStorageSync('userType',"1");
  193. }else if(data.data.type == 22){//学生端
  194. uni.setStorageSync('userType',"2");
  195. }else if(data.data.type == 33){//供应商端
  196. uni.setStorageSync('userType',"3");
  197. }
  198. if(this.checkedType){
  199. uni.setStorageSync('userName',this.username)
  200. uni.setStorageSync('password',this.password)
  201. }else{
  202. uni.removeStorageSync('userName')
  203. uni.removeStorageSync('password')
  204. }
  205. //获取身份标识
  206. this.getGentleIdentifier();
  207. }
  208. },
  209. },
  210. }
  211. </script>
  212. <style lang="stylus" scoped>
  213. #login{
  214. height:100%;
  215. width:100%;
  216. background #f5f5f5
  217. position relative
  218. .login-max-big{
  219. width:750rpx;
  220. height:1177rpx;
  221. z-index:0;
  222. }
  223. .login-box{
  224. z-index:3;
  225. position: absolute
  226. top:446rpx;
  227. left:46rpx;
  228. width:658rpx;
  229. height:700rpx;
  230. // background #fff
  231. /* 切换按钮 */
  232. .tabTitle{
  233. display flex;
  234. width:100%;
  235. height: 100rpx;
  236. position: absolute;
  237. top: 50rpx;
  238. justify-content: center;
  239. >view:nth-of-type(1){
  240. margin-right: 100rpx;
  241. }
  242. .tabTitle_li{
  243. width:168rpx;
  244. text-align center;
  245. .tabTitle_text{
  246. display: inline-block;
  247. font-size: 32rpx;
  248. font-family: PingFang SC;
  249. font-weight: 500;
  250. color: #333333;
  251. line-height: 90rpx;
  252. &.on{
  253. color:#0183FA;
  254. }
  255. }
  256. .tabTitle_across{
  257. width: 100rpx;
  258. height: 4rpx;
  259. background: #0183FA;
  260. border-radius: 2rpx;
  261. margin-left 30rpx;
  262. display none;
  263. &.on{
  264. display block;
  265. }
  266. }
  267. }
  268. }
  269. border-radius:20rpx;
  270. .input-max-box-one{
  271. overflow: hidden;
  272. margin-top:68rpx;
  273. .input-box{
  274. display flex
  275. width:600rpx;
  276. height:80rpx;
  277. border:1rpx solid #e0e0e0;
  278. border-radius:40rpx;
  279. margin:147rpx auto 0;
  280. img{
  281. width:28rpx;
  282. height:32rpx;
  283. margin:24rpx 31rpx;
  284. }
  285. input{
  286. flex:1;
  287. font-size:24rpx;
  288. height:80rpx;
  289. line-height:80rpx;
  290. margin-right:31rpx;
  291. }
  292. }
  293. .text-box{
  294. height:59rpx;
  295. line-height:59rpx;
  296. color:#DC1616;
  297. font-size:24rpx;
  298. margin-left:102rpx;
  299. }
  300. }
  301. .input-max-box-two{
  302. margin-top:40rpx;
  303. .input-box{
  304. display flex
  305. width:600rpx;
  306. height:80rpx;
  307. border:1rpx solid #e0e0e0;
  308. border-radius:40rpx;
  309. margin:0 auto 0;
  310. img{
  311. width:30rpx;
  312. height:32rpx;
  313. margin:24rpx 30rpx;
  314. }
  315. input{
  316. flex:1;
  317. font-size:24rpx;
  318. height:80rpx;
  319. line-height:80rpx;
  320. margin-right:31rpx;
  321. }
  322. }
  323. .text-box{
  324. height:59rpx;
  325. line-height:59rpx;
  326. color:#DC1616;
  327. font-size:24rpx;
  328. margin-left:102rpx;
  329. }
  330. }
  331. .check-box{
  332. margin:30rpx 0 30rpx 104rpx;
  333. width:300rpx;
  334. height:50rpx;
  335. display:flex;
  336. img{
  337. margin-top:10rpx;
  338. width:32rpx;
  339. height:32rpx;
  340. margin-right:10rpx;
  341. }
  342. view{
  343. font-size:24rpx;
  344. line-height:50rpx;
  345. }
  346. }
  347. .button-box{
  348. width: 600rpx;
  349. line-height: 80rpx;
  350. background: #0183FA;
  351. border-radius: 40rpx;
  352. font-size: 36rpx;
  353. color:#fff;
  354. text-align center
  355. margin:0 auto 0;
  356. }
  357. /* 供应商注册 */
  358. .supplier{
  359. display: flex;
  360. justify-content: space-between;
  361. margin:30rpx 40rpx 0;
  362. .supplier_l{
  363. font-size: 24rpx;
  364. font-family: PingFang SC;
  365. font-weight: 400;
  366. color: #333333;
  367. line-height: 24rpx;
  368. }
  369. .supplier_r{
  370. font-size: 24rpx;
  371. font-family: PingFang SC;
  372. font-weight: 400;
  373. color: #333333;
  374. line-height: 24rpx;
  375. >text{
  376. color: #0183FA;
  377. }
  378. }
  379. }
  380. /* 供应商切换 */
  381. .switch_btn{
  382. display: flex;
  383. justify-content: center;
  384. align-items: center;
  385. font-size: 24rpx;
  386. font-family: PingFang SC;
  387. font-weight: 400;
  388. color: #0183FA;
  389. line-height: 24rpx;
  390. margin-top: 60rpx;
  391. >img{
  392. width: 24rpx;
  393. height: 24rpx;
  394. margin-left: 12rpx;
  395. }
  396. }
  397. }
  398. .top-back{
  399. z-index:2;
  400. position: absolute
  401. top:261rpx;
  402. left:375rpx;
  403. height:296rpx;
  404. width:366rpx;
  405. }
  406. }
  407. </style>