| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport"
- content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover" />
- <title></title>
- <!-- 引入样式文件 -->
- <link rel="stylesheet"
- href="https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/103548289110001/1758012584633/vant.css" />
- <!-- 必须先引入vue, 后使用vant-ui -->
- <script
- src="https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/103548289110001/1742017957144/vue.js"></script>
- <!-- 引入vant的组件库-->
- <!-- 引入 Vant 的 JS 文件 -->
- <script
- src="https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/103548289110001/1758012748487/vant.min.js"></script>
- <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
- <script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"></script>
- <!-- <script src="js/vconsole.min.js"></script>
- <script>
- var vConsole = new window.VConsole();
- </script> -->
- </head>
- <style>
- body {
- margin: 0;
- padding: 0;
- }
- .box {
- width: 100vw;
- height: 100vh;
- box-sizing: border-box;
- background: #FAFAFA;
- }
- .page4 {
- width: 100vw;
- height: 500px;
- background: url('./img/jxs_login.png') no-repeat;
- background-size: 100%;
- background-repeat: no-repeat;
- }
- .jxs_logo {
- width: 40px;
- height: 40px;
- margin-top: 70px;
- margin-left: 25px;
- }
- .jxs_welcome {
- font-size: 16px;
- font-weight: 500;
- color: #222222;
- margin-top: 20px;
- margin-left: 25px;
- }
- .jxs_title {
- font-size: 18px;
- font-weight: bold;
- color: #222222;
- margin-top: 10px;
- margin-left: 25px;
- }
- .jxs_form {
- height: calc(100vh - 272px);
- background: rgba(250,250,250,0.5);
- border-radius: 20px 20px 0px 0px;
- border: 1px solid #FFFFFF;
- margin-top: 40px;
- padding: 20px;
- }
- .van-cell {
- height: 60px;
- padding: 20px 15px;
- line-height: 20px;
- border-radius: 20px;
- margin-bottom: 15px;
- }
- .flex_box {
- position: relative;
- }
- .verifyCodeImage {
- height: 60px;
- position: absolute;
- right: 15px;
- top: 0px;
- width: 120px;
- }
- .login_btn {
- width: 100%;
- height: 60px;
- line-height: 60px;
- text-align: center;
- font-weight: bold;
- font-size: 16px;
- color: #fff;
- background: #1677FF;
- border-radius: 20px;
- }
- .jxs_mer_title {
- font-weight: 500;
- font-size: 16px;
- color: #222222;
- padding-left: 5px;
- padding-right: 5px;
- }
- .mer_list {
- height: calc(100vh - 272px - 80px);
- overflow: auto;
- }
- .mer_item {
- padding: 20px 15px;
- background: #FFFFFF;
- border-radius: 20px;
- font-weight: 400;
- font-size: 14px;
- color: #222222;
- margin-top: 20px;
- height: 60px;
- box-sizing: border-box;
- border: 1px solid #FFFFFF;
- }
- .mer_item_active {
- background: #E6F0FF;
- border: 1px solid #1677FF;
- font-weight: 500;
- color: #1677FF;
- }
- .mer_item:last-child {
- margin-bottom: 20px;
- }
- .jxs_remember {
- font-size: 12px;
- font-weight: 400;
- color: #222222;
- margin-bottom: 40px;
- }
- </style>
- <body>
- <div id="box" class="box">
- <div class="page4">
- <img class="jxs_logo" src="./img/jxs_logo.png" />
- <div class="jxs_welcome">您好,欢迎使用</div>
- <div class="jxs_title">上汽通用五菱-经销商管理看板</div>
- <div class="jxs_form" v-if="loginSuccess">
- <div class="jxs_mer_title">选择商户</div>
- <div class="mer_list">
- <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>
- </div>
- <van-button class="login_btn" :loading="loading" @click="handleToJxs">确定</van-button>
- </div>
- <div class="jxs_form" v-else>
- <van-field v-model="phone" placeholder="请输入手机号"></van-field>
- <van-field v-model="password" type="password" placeholder="请输入密码"></van-field>
- <div class="flex_box">
- <van-field v-model="verifyCode" placeholder="请输入验证码"></van-field>
- <img class="verifyCodeImage" :src="verifyCodeImage" @click="handleGetVerifyCode">
- </div>
- <van-checkbox v-model="singleSave" icon-size="16px" class="jxs_remember">记住密码</van-checkbox>
- <van-button class="login_btn" :loading="loading" @click="handleLogin">登录</van-button>
- </div>
- </div>
- </div>
- </body>
- <script>
- new Vue({
- el: '#box',
- data() {
- return {
- phone: localStorage.getItem('phone') || '',
- password: localStorage.getItem('password') || '',
- verifyCode: '',
- verifyCodeImage: '',
- contentTypeValue: '',
- tokenValue: '',
- loading: false,
- loginSuccess: false,
- merList: [],
- merIndex: null,
- tenancyId: null,
- tenancyName: '',
- singleSave: localStorage.getItem('singleSave') === 'true'
- }
- },
- created() {
- this.bId = this.getQueryParam('bId')
- this.env = this.getQueryParam('env')
- if (!this.env || this.env === 'prod') {
- this.httpUrl = 'https://wlapi.wefanbot.com'
- // this.httpUrl = 'http://192.168.1.128:18993'
- } else {
- this.httpUrl = 'http://test.wefanbot.com:18993'
- // this.httpUrl = 'http://192.168.1.128:18993'
- }
- this.handleGetVerifyCode()
- },
- methods: {
- handleGetVerifyCode() {
- fetch(this.httpUrl + `/scrm/p/chart/verifyCode?width=120&height=35&lineSize=10`)
- .then(res => {
- const resHeader = res.headers
- this.contentTypeValue = resHeader.get("verifycodesession")
- return res.json()
- }).then(result => {
- let { data, code, msg } = result
- if (code === 1) {
- this.verifyCodeImage = data
- } else {
- vant.Toast.fail(msg)
- }
- })
- },
- handleLogin() {
- if (!this.phone) {
- vant.Toast.fail('请输入手机号')
- return
- }
- if (!this.password) {
- vant.Toast.fail('请输入密码')
- return
- }
- if (!this.verifyCode) {
- vant.Toast.fail('请输入验证码')
- return
- }
- if (!this.contentTypeValue) {
- vant.Toast.fail('验证码失效,请重新获取')
- return
- }
- this.loading = true
- fetch(this.httpUrl + `/scrm/v1/user-info/p/userNameLogin`, {
- method: 'post',
- body: JSON.stringify({
- clientType: 0,
- userName: this.phone,
- password: this.password,
- verifyCode: this.verifyCode,
- verifyCodeSession: this.contentTypeValue
- }),
- headers: {
- 'Content-Type': 'application/json'
- }
- }).then(res => {
- const resHeader = res.headers
- this.tokenValue = resHeader.get("token")
- localStorage.setItem('tokenValue', this.tokenValue)
- return res.json()
- }).then(result => {
- let { data, code, msg } = result
- if (code === 1) {
- if (this.singleSave) {
- localStorage.setItem('singleSave', this.singleSave)
- localStorage.setItem('phone', this.phone)
- localStorage.setItem('password', this.password)
- } else {
- localStorage.removeItem('singleSave')
- localStorage.removeItem('phone')
- localStorage.removeItem('password')
- }
- this.getAdminList()
- this.loginSuccess = true
- } else {
- vant.Toast.fail(msg)
- this.handleGetVerifyCode()
- }
- }).finally(() => {
- this.loading = false
- })
- },
- getAdminList() {
- const headers = new Headers()
- headers.append('token', this.tokenValue)
- fetch(this.httpUrl + `/scrm/v1/user-info/o/adminList`, {
- method: 'GET',
- headers: headers
- }).then(res => {
- return res.json()
- }).then(result => {
- let { data, code, msg } = result
- if (code === 1) {
- this.merList = data || []
- } else {
- vant.Toast.fail(msg)
- }
- })
- },
- handleSelectMer(id, index) {
- this.merIndex = index
- this.tenancyId = id
- this.tenancyName = this.merList[index].name || ''
- },
- handleToJxs() {
- if (!this.tenancyId) {
- vant.Toast.fail('请先选择商户')
- return
- }
- localStorage.setItem('tenancyIdValue', this.tenancyId)
- localStorage.setItem('tenancyNameValue', this.tenancyName)
- var currentQueryParams = window.location.search
- window.location.replace('jxs.html' + currentQueryParams)
- },
- // 截取url中的数据
- getQueryParam(paramName) {
- // 获取当前URL的查询字符串部分
- const queryString = window.location.search;
- // 创建一个URLSearchParams对象
- const urlParams = new URLSearchParams(queryString);
- // 返回指定参数的值,如果不存在则返回null
- return urlParams.get(paramName);
- },
- }
- })
- </script>
- </html>
|