login.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457
  1. <template>
  2. <div class="login">
  3. <img
  4. src="https://www.idea-co-sf.com/gardenProduct/image/bj01.png"
  5. alt=""
  6. class="logobig2"
  7. />
  8. <!-- <div class="logintype" v-if="loginStatus">-->
  9. <!-- <div-->
  10. <!-- @click="changeLoginType('企业用户')"-->
  11. <!-- :class="loginType == '企业用户' ? 'checkbox ischecked' : 'checkbox'"-->
  12. <!-- >-->
  13. <!-- 企业用户-->
  14. <!-- </div>-->
  15. <!-- <div-->
  16. <!-- @click="changeLoginType('管理用户')"-->
  17. <!-- :class="loginType == '管理用户' ? 'checkbox ischecked' : 'checkbox'"-->
  18. <!-- >-->
  19. <!-- 管理用户-->
  20. <!-- </div>-->
  21. <!-- </div>-->
  22. <div class="loginBody">
  23. <div class="loginTypeBox">
  24. <div class="loginTypeItem" @click="changeLoginType('企业用户')">
  25. <span
  26. class="loginTypeName"
  27. :class="loginType === '企业用户' ? 'ischecked' : ''"
  28. >企业用户</span
  29. >
  30. <div class="bottomLine" v-show="loginType === '企业用户'"></div>
  31. </div>
  32. <div class="loginTypeItem" @click="changeLoginType('管理用户')">
  33. <span
  34. class="loginTypeName"
  35. :class="loginType === '管理用户' ? 'ischecked' : ''"
  36. >管理用户</span
  37. >
  38. <div class="bottomLine" v-show="loginType === '管理用户'"></div>
  39. </div>
  40. </div>
  41. <div class="loginBox">
  42. <div class="inputBox">
  43. <img
  44. src="https://www.idea-co-sf.com/gardenProduct/image/comicon.svg"
  45. alt=""
  46. style="height: 60rpx; left: 32rpx"
  47. />
  48. <input
  49. type="text"
  50. placeholder="请输入用户名"
  51. v-model="loginForm.userName"
  52. class="inputCont"
  53. placeholder-class="b-palceholder"
  54. />
  55. </div>
  56. <div class="inputBox">
  57. <img
  58. src="https://www.idea-co-sf.com/gardenProduct/image/pswicon.svg"
  59. alt=""
  60. style="height: 60rpx; left: 32rpx"
  61. />
  62. <input
  63. type="password"
  64. placeholder="请输入密码"
  65. v-model="loginForm.password"
  66. class="inputCont"
  67. placeholder-class="b-palceholder"
  68. />
  69. </div>
  70. <div class="inputBox">
  71. <img
  72. src="https://www.idea-co-sf.com/gardenProduct/image/yzmicon.svg"
  73. alt=""
  74. style="height: 60rpx; left: 32rpx"
  75. />
  76. <input
  77. type="text"
  78. placeholder="请输入验证码"
  79. class="yanzhengma"
  80. v-model="loginForm.code"
  81. placeholder-class="b-palceholder"
  82. />
  83. <img
  84. :src="loginForm.captchaImage"
  85. @click="captchaImageRefresh(loginForm)"
  86. class="yanzhengImg"
  87. />
  88. </div>
  89. <!-- <div class="pswBox" @click="forgetPsw()">-->
  90. <!-- <p>忘记密码?</p>-->
  91. <!-- </div>-->
  92. <div>
  93. <button class="loginbtn" @click="loginClick">提交</button>
  94. </div>
  95. </div>
  96. <div class="bottomTips">
  97. <label class="radio">
  98. <radio value="r1" checked="true" color="rgba(3, 101, 249, 1)" />
  99. 已阅读并同意<span style="color: rgba(3, 101, 249, 1)"
  100. >《服务协议条款及隐私政策》</span
  101. >
  102. </label>
  103. </div>
  104. <!-- <van-dialog id="van-toast" />-->
  105. </div>
  106. </div>
  107. </template>
  108. <script>
  109. import Dialog from "../..//wxcomponents/weapp/dist/dialog/dialog.js";
  110. import { login, loginByCompany } from "@/js_sdk/http.js";
  111. export default {
  112. data() {
  113. return {
  114. loginStatus: true,
  115. loginType: "企业用户",
  116. loginForm: {
  117. userName: "",
  118. password: "",
  119. code: "",
  120. type: "FRAME",
  121. captchaId: "",
  122. captchaImage: "",
  123. rememberMe: true,
  124. },
  125. };
  126. },
  127. mounted() {
  128. // login()
  129. this.captchaImageRefresh(this.loginForm);
  130. },
  131. onLoad(options) {
  132. if (options.loginType) {
  133. this.loginType = options.loginType;
  134. }
  135. },
  136. methods: {
  137. changeLoginType(e) {
  138. console.log(this.loginType);
  139. this.loginStatus = false;
  140. this.loginType = e;
  141. this.loginStatus = true;
  142. },
  143. getPhoneNumber(e) {
  144. wx.login({
  145. success(res) {
  146. // console.log(res);
  147. let data = {
  148. loginCode: res.code,
  149. phoneCode: e.detail.code,
  150. };
  151. loginByWeixin2(data).then((e) => {
  152. // console.log(e.data.user);
  153. wx.setStorageSync("USERINFO", JSON.stringify(e.data.user));
  154. uni.switchTab({
  155. url: "/pages/index/index",
  156. });
  157. });
  158. },
  159. });
  160. },
  161. goqy() {
  162. uni.navigateTo({
  163. url: "/pages/subPackages/gocompnay/index",
  164. });
  165. },
  166. gozhfw() {
  167. wx.navigateToMiniProgram({
  168. appId: "wx15404cced62d7b37",
  169. success(res) {
  170. // 打开成功
  171. },
  172. fail(e) {
  173. console.log(e);
  174. },
  175. });
  176. },
  177. captchaImageRefresh: function (_form) {
  178. _form.captchaId = this.$common.uuid(8);
  179. _form.captchaImage =
  180. this.$constant.BASE_URI +
  181. "/captcha/captchaImage?type=math&captchaId=" +
  182. _form.captchaId +
  183. "&s=" +
  184. Math.random();
  185. },
  186. forgetPsw() {
  187. wx.showModal({
  188. title: "提示!",
  189. content: "管理端修改密码需要拨打客服电话咨询,是否拨打?",
  190. success: function (res) {
  191. if (res.confirm) {
  192. uni.makePhoneCall({
  193. phoneNumber: "", //电话号码
  194. success: function (e) {},
  195. fail: function (e) {},
  196. });
  197. }
  198. },
  199. });
  200. },
  201. loginClick() {
  202. if (this.loginType === "企业用户") {
  203. this.UserLogin();
  204. } else {
  205. this.login();
  206. }
  207. },
  208. UserLogin() {
  209. const _this = this;
  210. if (!this.loginForm.userName || !this.loginForm.password) {
  211. uni.showModal({
  212. title: "提示",
  213. content: "请输入账号和密码",
  214. icon: "error",
  215. showCancel: false,
  216. });
  217. return;
  218. }
  219. wx.login({
  220. success(e) {
  221. console.log(e);
  222. _this.loginForm.loginCode = e.code;
  223. loginByCompany(_this.loginForm).then((res) => {
  224. if (res.msg == "正常") {
  225. uni.showToast({
  226. title: "登录成功",
  227. icon: "none",
  228. mask: true,
  229. duration: 2000,
  230. });
  231. wx.setStorageSync("USERINFO", JSON.stringify(res.user_));
  232. uni.switchTab({
  233. url: "/pages/index/index",
  234. });
  235. } else {
  236. uni.showToast({
  237. title: res.errmsg,
  238. icon: "none",
  239. mask: true,
  240. duration: 2000,
  241. });
  242. _this.captchaImageRefresh(_this.loginForm);
  243. }
  244. });
  245. },
  246. });
  247. // this.$auth.setUserType(this.$auth.TYPE_FRAME);
  248. },
  249. login() {
  250. const _this = this;
  251. if (!this.loginForm.userName || !this.loginForm.password) {
  252. uni.showModal({
  253. title: "提示",
  254. content: "请输入账号和密码",
  255. icon: "error",
  256. showCancel: false,
  257. });
  258. return;
  259. }
  260. wx.login({
  261. success(e) {
  262. console.log(e);
  263. _this.loginForm.loginCode = e.code;
  264. login(_this.loginForm).then((res) => {
  265. console.log(res);
  266. if (res.errmsg == "成功") {
  267. uni.showToast({
  268. title: "登录成功",
  269. icon: "none",
  270. mask: true,
  271. duration: 2000,
  272. });
  273. console.log(res.data.user);
  274. wx.setStorageSync("USERINFO", JSON.stringify(res.data.user));
  275. uni.switchTab({
  276. url: "/pages/index/index",
  277. });
  278. } else {
  279. uni.showToast({
  280. title: res.errmsg,
  281. icon: "none",
  282. mask: true,
  283. duration: 2000,
  284. });
  285. _this.captchaImageRefresh(_this.loginForm);
  286. }
  287. });
  288. },
  289. });
  290. // this.$auth.setUserType(this.$auth.TYPE_FRAME);
  291. },
  292. onShareAppMessage: function () {},
  293. },
  294. };
  295. </script>
  296. <style lang="scss">
  297. .login {
  298. background: white;
  299. height: 100%;
  300. overflow: hidden;
  301. .logTit {
  302. width: 80vw;
  303. left: 10vw;
  304. top: 60vw;
  305. display: flex;
  306. flex-direction: column;
  307. justify-content: center;
  308. align-items: center;
  309. position: absolute;
  310. z-index: 1;
  311. color: rgba(51, 51, 51, 1);
  312. font-size: 4vw;
  313. p {
  314. color: rgba(102, 102, 102, 1);
  315. font-size: 4vw;
  316. margin-top: 0.5vw;
  317. }
  318. .titletxt {
  319. font-size: 48rpx;
  320. font-family: Taipei Sans TC Beta-Bold, Taipei Sans TC Beta;
  321. font-weight: bold;
  322. color: #333333;
  323. }
  324. .titletxt2 {
  325. font-size: 32rpx;
  326. font-family: PingFang SC-Regular, PingFang SC;
  327. font-weight: 400;
  328. color: #666666;
  329. }
  330. }
  331. .logobig2 {
  332. width: 100vw;
  333. height: 400rpx;
  334. position: absolute;
  335. left: 0;
  336. z-index: 0;
  337. }
  338. .loginBox {
  339. width: 86vw;
  340. left: 7vw;
  341. top: 156rpx;
  342. position: absolute;
  343. }
  344. .inputBox {
  345. position: relative;
  346. display: flex;
  347. align-items: center;
  348. margin-bottom: 30rpx;
  349. img {
  350. position: absolute;
  351. width: 7vw;
  352. // padding-top: 40px;
  353. }
  354. .yanzhengImg {
  355. right: 0 !important;
  356. width: 20vw;
  357. height: 10vw;
  358. z-index: 10;
  359. }
  360. .yanzhengImgBox {
  361. height: 50px;
  362. display: flex;
  363. align-items: center;
  364. }
  365. input {
  366. background: black;
  367. width: 100%;
  368. height: 76rpx;
  369. padding: 5rpx 0 5rpx 92rpx;
  370. border: 1rpx solid rgba(29, 24, 188, 0.05);
  371. margin: 5rpx 0;
  372. font-size: 32rpx;
  373. background: rgba(243, 245, 249, 1) !important;
  374. border-radius: 16rpx;
  375. }
  376. .b-palceholder {
  377. color: rgba(179, 179, 179, 1);
  378. }
  379. .yanzhengma {
  380. width: 100%;
  381. }
  382. }
  383. .pswBox {
  384. width: 100%;
  385. display: flex;
  386. justify-content: flex-end;
  387. margin: 20px 0;
  388. color: rgba(29, 24, 188, 1);
  389. }
  390. .van-button {
  391. margin-top: 15rpx;
  392. border-radius: 60px;
  393. }
  394. .loginbtn {
  395. margin-top: 50rpx;
  396. border-radius: 16rpx !important;
  397. padding: 24rpx;
  398. background: rgba(3, 101, 249, 1);
  399. color: white;
  400. font-size: 36rpx;
  401. }
  402. .bottomTips {
  403. width: 100vw;
  404. position: fixed;
  405. bottom: 100rpx;
  406. text-align: center;
  407. color: #999999;
  408. font-size: 28rpx;
  409. }
  410. @media screen and (max-height: 454px) {
  411. .bottomTips {
  412. display: none;
  413. }
  414. }
  415. .loginBody {
  416. background: white;
  417. border-radius: 16px 16px 0 0;
  418. position: relative;
  419. top: 336rpx;
  420. height: 1112rpx;
  421. .loginTypeBox {
  422. display: flex;
  423. justify-content: space-evenly;
  424. font-size: 40rpx;
  425. padding-top: 48rpx;
  426. color: rgba(86, 93, 106, 1);
  427. }
  428. .loginTypeItem {
  429. position: relative;
  430. .bottomLine {
  431. width: 40px;
  432. height: 6px;
  433. background: linear-gradient(90deg, #0365f9 0%, #85b5ff 100%);
  434. border-radius: 3px 3px 3px 3px;
  435. position: absolute;
  436. bottom: 0;
  437. z-index: 0;
  438. left: 40rpx;
  439. }
  440. .loginTypeName {
  441. position: relative;
  442. z-index: 1;
  443. }
  444. .ischecked {
  445. color: rgba(6, 35, 59, 1);
  446. font-weight: 600;
  447. }
  448. }
  449. }
  450. }
  451. </style>