jxsLogin.html 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport"
  7. content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover" />
  8. <title></title>
  9. <!-- 引入样式文件 -->
  10. <link rel="stylesheet"
  11. href="https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/103548289110001/1758012584633/vant.css" />
  12. <!-- 必须先引入vue, 后使用vant-ui -->
  13. <script
  14. src="https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/103548289110001/1742017957144/vue.js"></script>
  15. <!-- 引入vant的组件库-->
  16. <!-- 引入 Vant 的 JS 文件 -->
  17. <script
  18. src="https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/103548289110001/1758012748487/vant.min.js"></script>
  19. <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  20. <script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"></script>
  21. <!-- <script src="js/vconsole.min.js"></script>
  22. <script>
  23. var vConsole = new window.VConsole();
  24. </script> -->
  25. </head>
  26. <style>
  27. body {
  28. margin: 0;
  29. padding: 0;
  30. }
  31. .box {
  32. width: 100vw;
  33. height: 100vh;
  34. box-sizing: border-box;
  35. background: #FAFAFA;
  36. }
  37. .page4 {
  38. width: 100vw;
  39. height: 500px;
  40. background: url('./img/jxs_login.png') no-repeat;
  41. background-size: 100%;
  42. background-repeat: no-repeat;
  43. }
  44. .jxs_logo {
  45. width: 40px;
  46. height: 40px;
  47. margin-top: 70px;
  48. margin-left: 25px;
  49. }
  50. .jxs_welcome {
  51. font-size: 16px;
  52. font-weight: 500;
  53. color: #222222;
  54. margin-top: 20px;
  55. margin-left: 25px;
  56. }
  57. .jxs_title {
  58. font-size: 18px;
  59. font-weight: bold;
  60. color: #222222;
  61. margin-top: 10px;
  62. margin-left: 25px;
  63. }
  64. .jxs_form {
  65. height: calc(100vh - 272px);
  66. background: rgba(250,250,250,0.5);
  67. border-radius: 20px 20px 0px 0px;
  68. border: 1px solid #FFFFFF;
  69. margin-top: 40px;
  70. padding: 20px;
  71. }
  72. .van-cell {
  73. height: 60px;
  74. padding: 20px 15px;
  75. line-height: 20px;
  76. border-radius: 20px;
  77. margin-bottom: 15px;
  78. }
  79. .flex_box {
  80. position: relative;
  81. }
  82. .verifyCodeImage {
  83. height: 60px;
  84. position: absolute;
  85. right: 15px;
  86. top: 0px;
  87. width: 120px;
  88. }
  89. .login_btn {
  90. width: 100%;
  91. height: 60px;
  92. line-height: 60px;
  93. text-align: center;
  94. font-weight: bold;
  95. font-size: 16px;
  96. color: #fff;
  97. background: #1677FF;
  98. border-radius: 20px;
  99. }
  100. .jxs_mer_title {
  101. font-weight: 500;
  102. font-size: 16px;
  103. color: #222222;
  104. padding-left: 5px;
  105. padding-right: 5px;
  106. }
  107. .mer_list {
  108. height: calc(100vh - 272px - 80px);
  109. overflow: auto;
  110. }
  111. .mer_item {
  112. padding: 20px 15px;
  113. background: #FFFFFF;
  114. border-radius: 20px;
  115. font-weight: 400;
  116. font-size: 14px;
  117. color: #222222;
  118. margin-top: 20px;
  119. height: 60px;
  120. box-sizing: border-box;
  121. border: 1px solid #FFFFFF;
  122. }
  123. .mer_item_active {
  124. background: #E6F0FF;
  125. border: 1px solid #1677FF;
  126. font-weight: 500;
  127. color: #1677FF;
  128. }
  129. .mer_item:last-child {
  130. margin-bottom: 20px;
  131. }
  132. .jxs_remember {
  133. font-size: 12px;
  134. font-weight: 400;
  135. color: #222222;
  136. margin-bottom: 40px;
  137. }
  138. </style>
  139. <body>
  140. <div id="box" class="box">
  141. <div class="page4">
  142. <img class="jxs_logo" src="./img/jxs_logo.png" />
  143. <div class="jxs_welcome">您好,欢迎使用</div>
  144. <div class="jxs_title">上汽通用五菱-经销商管理看板</div>
  145. <div class="jxs_form" v-if="loginSuccess">
  146. <div class="jxs_mer_title">选择商户</div>
  147. <div class="mer_list">
  148. <div class="mer_item" :class="{'mer_item_active': merIndex === index}" v-for="(item, index) in merList" :key="item.id" :key="index" @click="handleSelectMer(item.id, index)">{{item.name}}</div>
  149. </div>
  150. <van-button class="login_btn" :loading="loading" @click="handleToJxs">确定</van-button>
  151. </div>
  152. <div class="jxs_form" v-else>
  153. <van-field v-model="phone" placeholder="请输入手机号"></van-field>
  154. <van-field v-model="password" type="password" placeholder="请输入密码"></van-field>
  155. <div class="flex_box">
  156. <van-field v-model="verifyCode" placeholder="请输入验证码"></van-field>
  157. <img class="verifyCodeImage" :src="verifyCodeImage" @click="handleGetVerifyCode">
  158. </div>
  159. <van-checkbox v-model="singleSave" icon-size="16px" class="jxs_remember">记住密码</van-checkbox>
  160. <van-button class="login_btn" :loading="loading" @click="handleLogin">登录</van-button>
  161. </div>
  162. </div>
  163. </div>
  164. </body>
  165. <script>
  166. new Vue({
  167. el: '#box',
  168. data() {
  169. return {
  170. phone: localStorage.getItem('phone') || '',
  171. password: localStorage.getItem('password') || '',
  172. verifyCode: '',
  173. verifyCodeImage: '',
  174. contentTypeValue: '',
  175. tokenValue: '',
  176. loading: false,
  177. loginSuccess: false,
  178. merList: [],
  179. merIndex: null,
  180. tenancyId: null,
  181. tenancyName: '',
  182. singleSave: localStorage.getItem('singleSave') === 'true'
  183. }
  184. },
  185. created() {
  186. this.bId = this.getQueryParam('bId')
  187. this.env = this.getQueryParam('env')
  188. if (!this.env || this.env === 'prod') {
  189. this.httpUrl = 'https://wlapi.wefanbot.com'
  190. // this.httpUrl = 'http://192.168.1.128:18993'
  191. } else {
  192. this.httpUrl = 'http://test.wefanbot.com:18993'
  193. // this.httpUrl = 'http://192.168.1.128:18993'
  194. }
  195. this.handleGetVerifyCode()
  196. },
  197. methods: {
  198. handleGetVerifyCode() {
  199. fetch(this.httpUrl + `/scrm/p/chart/verifyCode?width=120&height=35&lineSize=10`)
  200. .then(res => {
  201. const resHeader = res.headers
  202. this.contentTypeValue = resHeader.get("verifycodesession")
  203. return res.json()
  204. }).then(result => {
  205. let { data, code, msg } = result
  206. if (code === 1) {
  207. this.verifyCodeImage = data
  208. } else {
  209. vant.Toast.fail(msg)
  210. }
  211. })
  212. },
  213. handleLogin() {
  214. if (!this.phone) {
  215. vant.Toast.fail('请输入手机号')
  216. return
  217. }
  218. if (!this.password) {
  219. vant.Toast.fail('请输入密码')
  220. return
  221. }
  222. if (!this.verifyCode) {
  223. vant.Toast.fail('请输入验证码')
  224. return
  225. }
  226. if (!this.contentTypeValue) {
  227. vant.Toast.fail('验证码失效,请重新获取')
  228. return
  229. }
  230. this.loading = true
  231. fetch(this.httpUrl + `/scrm/v1/user-info/p/userNameLogin`, {
  232. method: 'post',
  233. body: JSON.stringify({
  234. clientType: 0,
  235. userName: this.phone,
  236. password: this.password,
  237. verifyCode: this.verifyCode,
  238. verifyCodeSession: this.contentTypeValue
  239. }),
  240. headers: {
  241. 'Content-Type': 'application/json'
  242. }
  243. }).then(res => {
  244. const resHeader = res.headers
  245. this.tokenValue = resHeader.get("token")
  246. localStorage.setItem('tokenValue', this.tokenValue)
  247. return res.json()
  248. }).then(result => {
  249. let { data, code, msg } = result
  250. if (code === 1) {
  251. if (this.singleSave) {
  252. localStorage.setItem('singleSave', this.singleSave)
  253. localStorage.setItem('phone', this.phone)
  254. localStorage.setItem('password', this.password)
  255. } else {
  256. localStorage.removeItem('singleSave')
  257. localStorage.removeItem('phone')
  258. localStorage.removeItem('password')
  259. }
  260. this.getAdminList()
  261. this.loginSuccess = true
  262. } else {
  263. vant.Toast.fail(msg)
  264. this.handleGetVerifyCode()
  265. }
  266. }).finally(() => {
  267. this.loading = false
  268. })
  269. },
  270. getAdminList() {
  271. const headers = new Headers()
  272. headers.append('token', this.tokenValue)
  273. fetch(this.httpUrl + `/scrm/v1/user-info/o/adminList`, {
  274. method: 'GET',
  275. headers: headers
  276. }).then(res => {
  277. return res.json()
  278. }).then(result => {
  279. let { data, code, msg } = result
  280. if (code === 1) {
  281. this.merList = data || []
  282. } else {
  283. vant.Toast.fail(msg)
  284. }
  285. })
  286. },
  287. handleSelectMer(id, index) {
  288. this.merIndex = index
  289. this.tenancyId = id
  290. this.tenancyName = this.merList[index].name || ''
  291. },
  292. handleToJxs() {
  293. if (!this.tenancyId) {
  294. vant.Toast.fail('请先选择商户')
  295. return
  296. }
  297. localStorage.setItem('tenancyIdValue', this.tenancyId)
  298. localStorage.setItem('tenancyNameValue', this.tenancyName)
  299. var currentQueryParams = window.location.search
  300. window.location.replace('jxs.html' + currentQueryParams)
  301. },
  302. // 截取url中的数据
  303. getQueryParam(paramName) {
  304. // 获取当前URL的查询字符串部分
  305. const queryString = window.location.search;
  306. // 创建一个URLSearchParams对象
  307. const urlParams = new URLSearchParams(queryString);
  308. // 返回指定参数的值,如果不存在则返回null
  309. return urlParams.get(paramName);
  310. },
  311. }
  312. })
  313. </script>
  314. </html>