Skip to content

T
transport-show-h5
提交 02419504 authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

增加小程序跳转

上级 2474e663
隐藏空白字符变更
内嵌 并排
正在显示 包含 336 行增加 和 23 行删除
src/api/account.js
浏览文件 @ 02419504
......@@ -29,3 +29,7 @@ export function sendResetPasswordCode(data) {
export function logout() {
return httpRequest.post('https://learn-pbcsf.ezijing.com/api/clear/cookie')
}
// 获取用户信息
export function getUser() {
return httpRequest.get('/zy/user/getinfo')
}
src/components/FreeCourseItem.vue
浏览文件 @ 02419504
......@@ -16,10 +16,17 @@ export default {
props: {
data: { type: Object, required: true }
},
computed: {
isWeapp() {
return this.$store.state.isWeapp
}
},
methods: {
onClick(data) {
if (this.isWeapp) {
wx.miniProgram.navigateTo(`/pages/course/item?id=${data.course_id}`)
wx.miniProgram.navigateTo({
url: `/pages/course/item?id=${data.course_id}`
})
} else {
window.alert('请在微信小程序中打开')
}
......
src/index.html
浏览文件 @ 02419504
......@@ -10,6 +10,7 @@
<body>
<div id="app"></div>
<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script type="text/javascript" src="https://zws-imgs-pub.ezijing.com/static/build/learn-mba/static/common/runtime.js"></script>
</body>
</html>
<style>
......
src/main.js
浏览文件 @ 02419504
......@@ -49,10 +49,14 @@ router.beforeEach((to, from, next) => {
// before.update(to, from, next)
next()
})
window.G.$instance_vue = new Vue({
store,
router,
i18n,
render: h => h(App)
}).$mount('#app')
// 获取环境
store.dispatch('getEnv')
// 获取环境
store.dispatch('getUser')
src/pages/home/index.vue
浏览文件 @ 02419504
......@@ -21,7 +21,7 @@
</li>
</ul>
</div>
<card title="课程试听">
<card title="课程试听" style="padding-bottom:40px;">
<free-course-item v-for="item in courseList" :data="item" :key="item.course_id"></free-course-item>
</card>
</div>
......@@ -43,6 +43,11 @@ export default {
courseList: [] // 免费课程列表
}
},
computed: {
isWeapp() {
return this.$store.state.isWeapp
}
},
methods: {
// 获取课程试听列表
getCourseList() {
......@@ -52,11 +57,40 @@ export default {
},
// 搜索
toSearch() {
this.$router.push({ name: 'search' })
if (this.isWeapp) {
wx.miniProgram.navigateTo({
url: `/pages/web/index?src=${window.location.origin}/search`
})
} else {
this.$router.push({ name: 'search' })
}
},
// 点击导航
onClickNav(name) {
this.$router.push({ name })
async onClickNav(name) {
const isLogin = await this.$store.dispatch('checkLogin')
if (isLogin) {
// 已登录
if (this.isWeapp) {
// 小程序
wx.miniProgram.navigateTo({
url: `/pages/web/index?src=${window.location.origin}/course/learn`
})
} else {
// h5
this.$router.push({ name })
}
} else {
// 未登录
if (this.isWeapp) {
// 小程序
wx.miniProgram.navigateTo({
url: `/pages/web/index?src=${window.location.origin}/login`
})
} else {
// h5
this.$router.push({ name: 'login' })
}
}
}
},
beforeMount() {
......
src/pages/login/bind.vue 0 → 100644
浏览文件 @ 02419504
<template>
<div class="login">
<div class="login-box">
<div class="login-hd">
<h2 class="login-title">绑定</h2>
</div>
<div class="login-bd">
<div class="login-form">
<!-- 账号登录 -->
<account-login ref="form" @submit="onSubmit"></account-login>
<!-- 验证码登录 -->
<!-- <code-login ref="form" @submit="onSubmit"></code-login> -->
<div class="login-button" @click="handleSubmit">立即绑定</div>
</div>
</div>
<div class="login-ft">
<p class="login-tips">
登录遇到困难？请点击
<span class="forget-password" @click="passwordVisible = true">找回密码</span>
</p>
</div>
</div>
</div>
</template>
<script>
import Cookies from 'js-cookie'
import * as api from '@/api/account'
import AccountLogin from './accountLogin.vue'
import CodeLogin from './codeLogin.vue'
export default {
components: { AccountLogin, CodeLogin },
data() {
const UA = navigator.userAgent.toLowerCase()
return {
ruleForm: {
type: 1,
account: '',
password: '',
RememberMe: true,
service: 'https://h5.ezijing.com'
},
passwordVisible: false,
isWechat: /micromessenger/.test(UA),
unionid: Cookies.get('wechat_login_no_phone_error')
}
},
computed: {
// 重定向地址
redirectURI() {
const { query } = this.$route
return query.redirect_uri ? decodeURIComponent(query.redirect_uri) : ''
}
},
methods: {
handleSubmit() {
this.$refs.form.submit()
},
// 提交
onSubmit(data) {
this.unionid ? this.bindWechat(data) : this.loginRequest(data)
},
// 登录
loginRequest(data) {
const params = Object.assign({}, this.ruleForm, data)
api
.login(params)
.then(response => {
this.loginSuccess(response)
})
.catch(error => {
error.response && this.$toast(error.response.data.message)
})
},
// 绑定微信并登录
bindWechat() {
const data = Object.assign({}, this.ruleForm, { unionid: this.unionid })
api
.bindWechat(data)
.then(response => {
this.loginSuccess(response)
})
.catch(error => {
error.response && this.$toast(error.response.data.message)
})
},
// 登录成功
loginSuccess(response) {
if (response.code === 0) {
Cookies.remove('wechat_login_error', { domain: '.ezijing.com' })
Cookies.remove('wechat_login_no_phone_error', {
domain: '.ezijing.com'
})
if (this.redirectURI) {
window.location.href = this.redirectURI
} else {
this.$router.replace('/')
}
// this.$router.replace('/')
} else {
this.$toast(response.msg)
}
},
wechatLogin() {
const appId = 'wx451c01d40d090d7a'
// 回调地址
const redirectURI = `${process.env.VUE_APP_WECHAT_REDIRECT_URL}?needCheck=false&identity=friend&redirectUrl=${window.location.origin}`
// 微信的地址
const wechatUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${encodeURIComponent(
redirectURI
)}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
// 打开地址
window.location.href = wechatUrl
},
checkWechatLogin() {
return !!(
Cookies.get('wechat_login_error') ||
Cookies.get('wechat_login_no_phone_error')
)
}
},
created() {
// if (this.isWechat && !this.checkWechatLogin()) {
// this.wechatLogin()
// }
}
}
</script>
<style lang="scss">
.login {
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
background: url('../../assets/images/login_bg.png') no-repeat;
background-size: contain;
}
.login-box {
position: absolute;
top: 100px;
left: 50px;
right: 50px;
height: 400px;
padding: 20px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
border-radius: 20px;
}
.login-hd {
padding: 10px 0;
}
.login-title {
display: inline-block;
font-size: 24px;
color: #2b7ce9;
border-bottom: 5px solid #2b7ce9;
}
.login-bd {
margin-top: 20px;
flex: 1;
}
.login-button {
margin-top: 20px;
height: 40px;
font-size: 12px;
color: #fff;
line-height: 40px;
background: linear-gradient(
270deg,
rgba(43, 124, 233, 1) 0%,
rgba(103, 168, 255, 1) 100%
);
text-align: center;
border-radius: 3px;
cursor: pointer;
}
.login-ft {
padding: 40px 0;
}
.login-tips {
text-align: center;
font-size: 12px;
color: #999;
.forget-password {
color: #1989fa;
}
}
.login {
.van-field {
margin-bottom: 20px;
padding: 0;
flex-direction: column;
}
.van-field__label {
font-size: 12px;
color: #222;
margin-bottom: 5px;
padding-left: 10px;
}
.van-field__control {
padding: 8px;
border: 1px solid #ccc;
border-radius: 3px;
}
}
</style>
src/pages/login/login.vue
浏览文件 @ 02419504
<template>
<div class="login">
<h1 class="title">
全国道路运输企业主要负责人和
<br />安全生产管理人员安全考核管理
</h1>
<div class="login-box">
<div class="login-hd">
<h2 class="login-title">登录</h2>
......@@ -13,13 +17,13 @@
<div class="login-button" @click="handleSubmit">立即登录</div>
</div>
</div>
<!-- <div class="login-ft">
<p class="login-tips">
登录遇到困难？请点击
<span class="forget-password" @click="passwordVisible = true">找回密码</span>
</p>
<div class="login-ft">
<ul>
<li @click="wechatLogin">
<img src="../../assets/images/login_wechat.png" alt="微信登录" />微信登录
</li>
</ul>
</div>
<password v-model="passwordVisible" />-->
</div>
</div>
</template>
......@@ -29,10 +33,9 @@ import Cookies from 'js-cookie'
import * as api from '@/api/account'
import AccountLogin from './accountLogin.vue'
import CodeLogin from './codeLogin.vue'
import Password from './password.vue'
export default {
components: { AccountLogin, CodeLogin, Password },
components: { AccountLogin, CodeLogin },
data() {
const UA = navigator.userAgent.toLowerCase()
return {
......@@ -94,6 +97,8 @@ export default {
Cookies.remove('wechat_login_no_phone_error', {
domain: '.ezijing.com'
})
this.$store.commit('setToken', response.data.TGC)
wx.miniProgram.postMessage({ data: { token: response.data.TGC } })
if (this.redirectURI) {
window.location.href = this.redirectURI
} else {
......@@ -121,11 +126,6 @@ export default {
Cookies.get('wechat_login_no_phone_error')
)
}
},
created() {
// if (this.isWechat && !this.checkWechatLogin()) {
// this.wechatLogin()
// }
}
}
</script>
......@@ -163,7 +163,7 @@ export default {
flex: 1;
}
.login-button {
margin-top: 20px;
margin-top: 40px;
height: 40px;
font-size: 12px;
color: #fff;
......@@ -178,7 +178,19 @@ export default {
cursor: pointer;
}
.login-ft {
padding: 40px 0;
padding: 20px 0;
li {
display: inline-block;
height: 30px;
line-height: 30px;
font-size: 12px;
color: #ccc;
cursor: pointer;
}
img {
width: 30px;
margin-right: 5px;
}
}
.login-tips {
text-align: center;
......@@ -189,6 +201,14 @@ export default {
}
}
.login {
.title {
padding: 30px 0;
font-size: 15px;
font-weight: 600;
color: #fff;
line-height: 30px;
text-align: center;
}
.van-field {
margin-bottom: 20px;
padding: 0;
......@@ -197,6 +217,7 @@ export default {
.van-field__label {
font-size: 12px;
color: #222;
line-height: 1;
margin-bottom: 5px;
padding-left: 10px;
}
......
src/store/index.js
浏览文件 @ 02419504
import Vue from 'vue'
import Vuex from 'vuex'
import { getUser } from '@/api/account'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
isWeapp: false,
isLogin: false,
token: '',
user: {}
},
mutations: {
setToken(state, token) {
state.token = token
},
setUser(state, user) {
state.user = user
},
setIsWeapp(state, isWeapp) {
state.isWeapp = isWeapp
},
setIsLogin(state, isLogin) {
state.isLogin = isLogin
}
},
actions: {}
actions: {
getEnv({ commit }) {
wx.miniProgram.getEnv(function(res) {
console.log(res.miniprogram) // true
commit('setIsWeapp', res.miniprogram)
})
},
getUser({ commit }) {
getUser().then(response => {
commit('setUser', response)
})
},
async checkLogin({ commit }) {
const isLogin = await getUser()
.then(response => {
commit('setUser', response)
return true
})
.catch(() => {
return false
})
commit('setIsLogin', isLogin)
return isLogin
}
}
})
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论