Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
 
 
 

419 Zeilen
8.5 KiB

  1. <template>
  2. <view>
  3. <view class="head">
  4. <text>智能高效客户管理平台</text>
  5. </view>
  6. <view class="input">
  7. <view class="cwjs-cells item-flex">
  8. <view class="cwjs-item center">
  9. <image src="https://qufang.oss-cn-beijing.aliyuncs.com/channelHelper/user.png" class="logo_input">
  10. </image>
  11. <input class="cwjs-item cwjs-input" v-model="username" placeholder="请输入账号名" type="number" maxlength="11" placeholder-style="color:#AAAAAA"></input>
  12. </view>
  13. </view>
  14. <view class="cwjs-cells item-flex" style="margin-top:13rpx;">
  15. <view class="cwjs-item center">
  16. <image src="https://qufang.oss-cn-beijing.aliyuncs.com/channelHelper/lock.png" class="logo_input">
  17. </image>
  18. <input class="cwjs-item cwjs-input" placeholder="请输入密码" placeholder-style="color:#AAAAAA" type="password" v-model="password" maxlength="16" v-if="passwordType"></input>
  19. <input class="cwjs-item cwjs-input" placeholder="请输入密码" placeholder-style="color:#AAAAAA" maxlength="16" v-model="password" v-else></input>
  20. </view>
  21. <view class="imagesBox" @tap="changeBindPassword">
  22. <image
  23. :src="'https://qufang.oss-cn-beijing.aliyuncs.com/upload/icon/xcx/jjycrm/login/' + (passwordType==true?'close_eyes.png':'open_eyes.png')"
  24. class="images" mode="scaleToFill"></image>
  25. </view>
  26. </view>
  27. <view class="textbox">
  28. <view class="textbox-1" @tap="bindVerification">验证码登录</view>
  29. <view class="textbox-2"></view>
  30. <view class="textbox-11" @tap="bindpassword">忘记密码</view>
  31. </view>
  32. </view>
  33. <view class="button" @tap="bindWxBLogin">登录</view>
  34. <image src="https://qufang.oss-cn-beijing.aliyuncs.com/upload/icon/xcx/jjycrm/login/footer.png" class="footer">
  35. </image>
  36. </view>
  37. </template>
  38. <script>
  39. var util = require("../../utils/util.js");
  40. var config = require("../../config");
  41. var app = getApp();
  42. var WXB_SESSION_LOGIN_DATA = 'weapp_session_login_data';
  43. export default {
  44. data() {
  45. return {
  46. username: '',
  47. //获取到的用户名的值
  48. password: '',
  49. //获取到的密码栏中的值
  50. passwordType: true,
  51. agreeChecked: true
  52. };
  53. },
  54. onLoad: function(options) {
  55. uni.hideToast();
  56. },
  57. methods: {
  58. //验证码登录
  59. bindVerification() {
  60. uni.navigateTo({
  61. url: '/pages/login/Verification?role=1',
  62. })
  63. },
  64. //忘记密码
  65. bindpassword() {
  66. uni.navigateTo({
  67. url: '/pages/login/Verification?role=2',
  68. })
  69. },
  70. //密码选择
  71. changeBindPassword: function(e) {
  72. this.passwordType=!this.passwordType;
  73. },
  74. //登录
  75. bindWxBLogin: function(e) {
  76. util.showBusy('正在登录...');
  77. var that = this;
  78. if (this.username == '') {
  79. util.showNone("请输入账号名");
  80. return false;
  81. }
  82. if (this.password == '') {
  83. util.showNone("请输入密码");
  84. return false;
  85. }
  86. var loginParams = {
  87. loginName: this.username,
  88. password: this.password
  89. };
  90. // 请求服务器登录地址,获得会话信息
  91. uni.request({
  92. url: config.service.login,
  93. header: {
  94. 'content-type': 'application/json'
  95. },
  96. method: "POST",
  97. data: loginParams,
  98. success: function(result) {
  99. var data = result.data; //console.log("登陆信息", data);
  100. if (data && data.code == 10000) {
  101. var res = data.data;
  102. if (res) {
  103. var data = {
  104. 'token': res
  105. };
  106. uni.setStorageSync(WXB_SESSION_LOGIN_DATA, data); //写入缓存
  107. that.getMenu()
  108. that.getUser();
  109. util.showSuccess('登录成功');
  110. } else {
  111. util.showNone("账号名或密码错误,请重试");
  112. return false;
  113. }
  114. // 没有正确响应会话信息
  115. } else {
  116. util.showNone(data.message);
  117. return false;
  118. }
  119. },
  120. // 响应错误
  121. fail: function(loginResponseError) {
  122. util.showNone("网络异常,请重试");
  123. return false;
  124. }
  125. });
  126. },
  127. getUser(){
  128. util.getRequestPromise(config.service.getUser, {}, false, "GET").then(data => {
  129. if (data.zkProperties) {
  130. } else {
  131. data.zkProperties = [{
  132. id: "",
  133. propertyName: ''
  134. }]
  135. }
  136. let lopan = {
  137. id: data.zkProperties[0].id,
  138. name: data.zkProperties[0].propertyName
  139. }
  140. uni.setStorageSync("fendianindex", 0); //写入缓存
  141. uni.setStorageSync("weapp_session_userInfo_data", data); //写入缓存
  142. uni.setStorageSync("buildingID", lopan); //楼盘id写入缓存
  143. uni.switchTab({
  144. url: '/pages/index/index'
  145. });
  146. });
  147. },
  148. getMenu(){
  149. this.$u.get("/user/getMenu").then(data => {
  150. uni.setStorageSync("weapp_session_Menu_data", data)
  151. })
  152. }
  153. }
  154. };
  155. </script>
  156. <style lang="scss">
  157. .cwjs-logo {
  158. display: block;
  159. width: 219rpx;
  160. height: 158rpx;
  161. margin: 54rpx auto 66rpx;
  162. }
  163. .cwjs-tips {
  164. font-size: 24rpx;
  165. padding: 80rpx 0;
  166. color: #8a8a8a;
  167. }
  168. .cwjs-form {
  169. position: relative;
  170. margin: 0;
  171. background-color: #fff;
  172. border-radius: 10px;
  173. padding: 20rpx 40rpx 113rpx;
  174. }
  175. .cwjs-cells {
  176. width: 569rpx;
  177. display: flex;
  178. flex-direction: row;
  179. justify-content: space-between;
  180. align-items: center;
  181. margin: 0 auto;
  182. height: 88rpx;
  183. overflow: hidden;
  184. border-bottom: 1rpx solid #BFC7D3;
  185. position: relative;
  186. }
  187. .center {
  188. flex: 1;
  189. }
  190. .cwjs-input {
  191. height: 48rpx;
  192. line-height: 48rpx;
  193. padding: 23rpx 23rpx 23rpx 78rpx;
  194. font-size: 28rpx;
  195. font-family: PingFangSC-Regular, PingFang SC;
  196. color: #000;
  197. }
  198. .images {
  199. display: block;
  200. width: 40rpx;
  201. height: 21rpx;
  202. margin-right: 30rpx;
  203. margin-top: 33.5rpx;
  204. }
  205. .mod-btn {
  206. position: absolute;
  207. bottom: -80rpx;
  208. left: 50%;
  209. margin-left: -80rpx;
  210. }
  211. .mod-btn .button {
  212. width: 160rpx;
  213. height: 160rpx;
  214. background: linear-gradient(180deg, rgba(116, 197, 230, 1) 0%, rgba(64, 147, 201, 1) 100%);
  215. border: 10rpx solid rgba(255, 255, 255, 1);
  216. border-radius: 100%;
  217. font-size: 36rpx;
  218. color: #fff;
  219. display: flex;
  220. justify-content: center;
  221. align-items: center;
  222. }
  223. .mod-btn .button::after {
  224. content: ""
  225. }
  226. .retPassword {
  227. display: inline;
  228. width: auto;
  229. font-size: 28rpx;
  230. color: rgba(64, 147, 201, 1);
  231. line-height: 40rpx;
  232. float: right;
  233. }
  234. .retPassword:active {
  235. background-color: #fff;
  236. }
  237. .appliyAdmin {
  238. position: absolute;
  239. left: 50%;
  240. margin-left: -57rpx;
  241. bottom: 100rpx;
  242. width: 114rpx;
  243. font-size: 28rpx;
  244. color: rgba(255, 255, 255, 1);
  245. line-height: 40rpx;
  246. }
  247. /* 头部 */
  248. .head {
  249. width: 750rpx;
  250. height: 410rpx;
  251. background-image: url(https://qufang.oss-cn-beijing.aliyuncs.com/channelHelper/background.png);
  252. background-size: 100vw auto;
  253. background-repeat: no-repeat;
  254. }
  255. .background {
  256. width: 750rpx;
  257. height: 400rpx;
  258. position: absolute;
  259. top: -3rpx;
  260. left: 0;
  261. }
  262. .logo {
  263. width: 248upx;
  264. height: 248upx;
  265. display: block;
  266. position: absolute;
  267. top: 134rpx;
  268. left: 240.5rpx;
  269. }
  270. .head text {
  271. font-size: 34rpx;
  272. font-family: PingFangSC-Medium, PingFang SC;
  273. font-weight: 500;
  274. color: #008EF2;
  275. position: absolute;
  276. top: 353rpx;
  277. width: 100%;
  278. text-align: center;
  279. }
  280. /* 输入框 */
  281. .input {
  282. width: 100%;
  283. height: auto;
  284. padding: 0 105rpx;
  285. box-sizing: border-box;
  286. }
  287. .logo_input {
  288. width: 34rpx;
  289. height: 38rpx;
  290. position: absolute;
  291. top: 25rpx;
  292. left: 0;
  293. }
  294. /* 登录 */
  295. .button {
  296. width: 603rpx;
  297. height: 89rpx;
  298. background: rgba(72, 149, 255, 1);
  299. box-shadow: 0rpx 2rpx 14rpx 0rpx rgba(151, 192, 255, 1);
  300. border-radius: 45rpx;
  301. text-align: center;
  302. line-height: 89rpx;
  303. color: #fff;
  304. margin: 0 auto;
  305. margin-top: 239rpx;
  306. font-size: 34rpx;
  307. }
  308. .footer {
  309. width: 100%;
  310. height: 157rpx;
  311. position: absolute;
  312. bottom: 0;
  313. left: 0;
  314. }
  315. .agreeBox {
  316. /* text-align: center; */
  317. /* width: 450rpx; */
  318. /* padding-left: 145rpx; */
  319. font-size: 28rpx;
  320. color: #88909E;
  321. margin: 0 auto;
  322. margin-top: 30rpx;
  323. position: relative;
  324. display: flex;
  325. margin-left: 83upx;
  326. }
  327. checkbox {
  328. transform: scale(0.5);
  329. }
  330. checkbox-group {
  331. display: inline;
  332. }
  333. navigator {
  334. display: inline
  335. }
  336. .agreeBox image {
  337. width: 26rpx;
  338. height: 26rpx;
  339. display: block;
  340. position: absolute;
  341. top: 9rpx;
  342. left: 18rpx;
  343. margin-right: 19rpx;
  344. }
  345. .imagesBox {
  346. width: 80rpx;
  347. height: 88rpx;
  348. }
  349. .chooseBox {
  350. width: 60rpx;
  351. height: 60rpx;
  352. }
  353. .login {
  354. text-decoration: underline;
  355. text-align: center;
  356. margin-top: 40px;
  357. color: #88909E;
  358. font-size: 28rpx;
  359. }
  360. .textbox {
  361. width: 569rpx;
  362. display: flex;
  363. margin-top: 40rpx;
  364. }
  365. .textbox-1 {
  366. width: 30%;
  367. font-size: 30rpx;
  368. color: #999999;
  369. }
  370. .textbox-11 {
  371. width: 30%;
  372. text-align: right;
  373. font-size: 30rpx;
  374. color: #999999;
  375. }
  376. .textbox-2 {
  377. width: 40%;
  378. }
  379. </style>