提交 ccb35db8 authored 作者: lihuihui's avatar lihuihui
...@@ -6,7 +6,6 @@ ...@@ -6,7 +6,6 @@
import Pay from '../action' import Pay from '../action'
export default { export default {
name: 'PayWeChart', name: 'PayWeChart',
data () {},
props: { props: {
requestParam: { requestParam: {
type: Object, type: Object,
......
...@@ -160,9 +160,11 @@ export default { ...@@ -160,9 +160,11 @@ export default {
this.wechatLogin() this.wechatLogin()
return return
} }
if (Cookies.get('wechat_login_error')) { const error = Cookies.get('wechat_login_error')
if (error) {
this.$toast(error)
Cookies.remove('wechat_login_error', { domain: '.ezijing.com' }) Cookies.remove('wechat_login_error', { domain: '.ezijing.com' })
wx.miniProgram.navigateBack() // wx.miniProgram.navigateBack()
} }
} }
} }
......
<template> <template>
<div> <div>
<div class="info-box"> <div class="info-box">
<img v-if="info.avatar" :src="info.avatar" alt=""> <img v-if="user.avatar" :src="user.avatar" />
<img v-else src="../../assets/images/tx.png" alt=""> <img v-else src="../../assets/images/tx.png" />
<div class="name" v-if="info.nickname">{{ info.nickname }}</div> <div class="name" v-if="user.nickname">{{ user.nickname }}</div>
<div class="name" v-else @click="goLogin">点击登录</div> <div class="name" v-else @click="login">点击登录</div>
</div> </div>
<ul> <ul>
<li v-for="(item, index) in navList" :key="index" @click="go(item.url)"> <li v-for="(item, index) in navList" :key="index" @click="toPage(item.url)">
<div class="title">{{ item.title }}</div> <div class="title">{{ item.title }}</div>
<van-icon name="arrow" class="icon"/> <van-icon name="arrow" class="icon" />
</li> </li>
</ul> </ul>
<div class="login-out" @click="logout"> <div class="login-out" @click="logout">退出登录</div>
退出登录
<!-- <van-button type="default" >退出登录</van-button> -->
</div>
</div> </div>
</template> </template>
<script> <script>
import { logout, getUser } from '@/api/account.js'
export default { export default {
name: 'my', name: 'my',
data() { data() {
return { return {
info: {},
navList: [ navList: [
{ {
title: '已购课程', title: '已购课程',
...@@ -53,16 +48,33 @@ export default { ...@@ -53,16 +48,33 @@ export default {
computed: { computed: {
isWeapp() { isWeapp() {
return this.$store.state.isWeapp return this.$store.state.isWeapp
},
user() {
return this.$store.state.user
} }
}, },
methods: { methods: {
// 登录
login() {
if (this.isWeapp) {
// 小程序
wx.miniProgram.navigateTo({ url: '/pages/login/index' })
} else {
this.$router.push({
path: '/login',
query: { redirect_uri: window.location.href }
})
}
},
// 退出登录
logout() { logout() {
logout().then(response => { this.$store.dispatch('logout').then(() => {
console.log(response, '======') // 清除小程序登录状态
wx.miniProgram.postMessage({ data: { token: '' } })
this.$toast('退出成功') this.$toast('退出成功')
}) })
}, },
go(url) { toPage(url) {
if (this.isWeapp) { if (this.isWeapp) {
wx.miniProgram.navigateTo({ wx.miniProgram.navigateTo({
url: `/pages/web/index?src=${window.location.origin}${url}` url: `/pages/web/index?src=${window.location.origin}${url}`
...@@ -70,78 +82,59 @@ export default { ...@@ -70,78 +82,59 @@ export default {
} else { } else {
this.$router.push(url) this.$router.push(url)
} }
},
goLogin() {
if (this.isWeapp) {
// 小程序
wx.miniProgram.navigateTo({
url: `/pages/login/index?redirect_uri=${encodeURIComponent(
`/exam/result?type=${this.$route.query.type}&is_create=0&papersUrl=${this.$route.query.papersUrl}`
)}`
})
} else {
this.$router.push({
path: '/login',
query: {
redirect_uri: '/my'
}
})
}
} }
}, },
mounted() { beforeMount() {
getUser().then(res => { this.$store.dispatch('checkLogin')
this.info = res
})
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.info-box{ .info-box {
display: flex;
align-items: center;
height: 2rem;
img {
width: 1.2rem;
height: 1.2rem;
margin: 0 0.2rem 0 0.4rem;
}
.name {
font-size: 0.34rem;
color: #222;
}
}
ul {
padding: 0 0.4rem;
li {
height: 1.1rem;
border-bottom: 0.01rem solid rgba(238, 238, 238, 1);
display: flex; display: flex;
align-items: center; align-items: center;
height: 2rem; .title {
img{ font-size: 0.3rem;
width: 1.2rem;
height: 1.2rem;
margin:0 .2rem 0 .4rem;
}
.name{
font-size: .34rem;
color: #222; color: #222;
} }
} .icon {
ul{ margin-left: auto;
padding: 0 .4rem;
li{
height: 1.1rem;
border-bottom: .01rem solid rgba(238,238,238,1);
display: flex;
align-items: center;
.title{
font-size: .3rem;
color: #222;
}
.icon{
margin-left: auto;
}
}
li:last-child{
border: none;
} }
} }
.login-out{ li:last-child {
position: absolute; border: none;
bottom: 2rem;
left: 50%;
-webkit-transform: translateX(-50%);
width:6.7rem;
height:.7rem;
background:rgba(247,247,247,1);
border-radius:.12rem;
text-align: center;
line-height: .7rem;
font-size: .3rem;
color: #ccc;
} }
}
.login-out {
position: absolute;
bottom: 2rem;
left: 50%;
-webkit-transform: translateX(-50%);
width: 6.7rem;
height: 0.7rem;
background: rgba(247, 247, 247, 1);
border-radius: 0.12rem;
text-align: center;
line-height: 0.7rem;
font-size: 0.3rem;
color: #ccc;
}
</style> </style>
<template> <template>
<div class="pay-bg"> <div class="pay-bg">
<img src="../../assets/images/pages.png" alt=""> <img src="../../assets/images/pages.png" alt />
<div class="pay-btn"> <div class="pay-btn">
<div class="num">¥<span>199</span>.00</div> <div class="num">
<div class="btn" @click="goPay" v-if="orderStatus == 100">立即购买</div> ¥
<div class="btn active" v-if="orderStatus == 1" @click="goHome">已购买</div> <span>199</span>.00
<div class="btn" v-if="orderStatus == -1" @click="goMyOrder">待支付</div> </div>
<div class="btn" @click="goPay" v-if="orderStatus === 100">立即购买</div>
<div class="btn active" v-if="orderStatus === 1" @click="goHome">已购买</div>
<div class="btn" v-if="orderStatus === -1" @click="goMyOrder">待支付</div>
</div> </div>
<pay-we-chart :requestParam="requestParam"></pay-we-chart> <pay-we-chart :requestParam="requestParam"></pay-we-chart>
</div> </div>
...@@ -13,16 +16,17 @@ ...@@ -13,16 +16,17 @@
<script> <script>
import * as api from '@/api/pay.js' import * as api from '@/api/pay.js'
import { getUser } from '@/api/account' import { getUser } from '@/api/account'
import { Toast } from 'vant'
export default { export default {
components: {
[Toast.name]: Toast
},
data() { data() {
const productId =
webConf.isDev === 'production'
? '6684359515615264768'
: '6682927830365372416'
return { return {
userId: '', userId: '',
requestParam: { requestParam: {
product_id: '6684359515615264768', // 提前设定 product_id: productId, // 提前设定
open_id: '', // 通过微信授权获取 open_id: '', // 通过微信授权获取
prepay_id: '', // 通过调用接口获取 prepay_id: '', // 通过调用接口获取
app_id: '', // 提前设定 app_id: '', // 提前设定
...@@ -32,34 +36,33 @@ export default { ...@@ -32,34 +36,33 @@ export default {
orderStatus: 100 orderStatus: 100
} }
}, },
mounted() {
this.getOrderStatus()
this.getOpenid()
clearInterval(this.orderStatusTime)
this.orderStatusTime = setInterval(() => {
this.getOrderStatus()
}, 1000)
},
methods: { methods: {
// 已购买
goHome() { goHome() {
Toast('您已购买!') this.$toast('您已购买!')
this.pushHistory()
window.addEventListener('popstate', function(e) {
window.location.href = '/'
}, false)
}, },
pushHistory() { // 支付
const state = { goPay() {
title: '首页', wx.miniProgram.navigateTo({
url: '#' url: `/pages/pay/index?data=${this.requestParam.product_id}`
} })
window.history.pushState(state, '首页', '#')
}, },
// 去我的订单页面
goMyOrder() { goMyOrder() {
wx.miniProgram.navigateTo({ wx.miniProgram.navigateTo({
url: `/pages/web/index?src=${window.location.origin}/my/buyCourses` url: `/pages/web/index?src=${window.location.origin}/my/buyCourses`
}) })
}, },
// 获取订单状态
getOrderStatus() {
api.getOrderStatus().then(res => {
this.orderStatus = res.status
if (this.orderStatus === 1) {
this.orderStatusTime && clearInterval(this.orderStatusTime)
}
})
},
// 获取openID
getOpenid() { getOpenid() {
getUser().then(res => { getUser().then(res => {
api.getOpenid({ id: res.id, identity: 'transport' }).then(res => { api.getOpenid({ id: res.id, identity: 'transport' }).then(res => {
...@@ -68,93 +71,55 @@ export default { ...@@ -68,93 +71,55 @@ export default {
} }
}) })
}) })
},
getOrderStatus() {
api.getOrderStatus().then(res => {
this.orderStatus = res.status
})
},
goPay () {
// this.VueEvent.$emit('pay-wx-h5', {})
// this.VueEvent.$off('pay-wx-h5-callback').$on('pay-wx-h5-callback', obj => {
// if (obj.code === 200) {
// this.$router.back()
// } else {
// // this.$router.go(-2)
// Toast(obj.msg)
// }
// console.log(obj, '======')
// })
if (window.__wxjs_environment === 'miniprogram') {
wx.miniProgram.navigateTo({
// url: '/pages/pay/index?data=' + JSON.stringify(obj.data),
url: '/pages/pay/index?data=' + this.requestParam.product_id,
events: {
// 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
acceptDataFromOpenedPage: function (data) {
console.log(data)
}
},
success: function (res) {}
})
// clearInterval(this.orderStatusTime)
// this.orderStatusTime = setInterval(() => {
// this.getOrderStatus()
// }, 1000)
}
// this.VueEvent.$emit('pay-wx-chart', {})
// this.VueEvent.$off('pay-wx-chart-callback').$on('pay-wx-chart-callback', obj => {
// if (obj.code === 200) {
// } else {
// // this.$router.go(-2)
// Toast(obj.msg)
// }
// console.log(obj, '======')
// })
} }
}, },
beforeMount() { beforeMount() {
window.removeEventListener('popstate', function(e) {}, false) this.getOrderStatus()
this.orderStatusTime && clearInterval(this.orderStatusTime)
this.orderStatusTime = setInterval(this.getOrderStatus, 1000)
},
destroyed() {
this.orderStatusTime && clearInterval(this.orderStatusTime)
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.pay-bg{ .pay-bg {
width: 100%; width: 100%;
img{ img {
width: 100%; width: 100%;
} }
} }
.pay-btn{ .pay-btn {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 0; left: 0;
width:7.5rem; width: 7.5rem;
height:1rem; height: 1rem;
background:rgba(255,255,255,1); background: rgba(255, 255, 255, 1);
box-shadow:0px 0px 6px 0px rgba(0,0,0,0.05); box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.05);
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 .4rem; padding: 0 0.4rem;
.num{ .num {
font-size: .26rem; font-size: 0.26rem;
color: #FF6767; color: #ff6767;
span{ span {
font-size: .4rem; font-size: 0.4rem;
} }
} }
.btn{ .btn {
width:4.65rem; width: 4.65rem;
height:.7rem; height: 0.7rem;
background:rgba(255,103,103,1); background: rgba(255, 103, 103, 1);
border-radius:.12rem; border-radius: 0.12rem;
margin-left: auto; margin-left: auto;
text-align: center; text-align: center;
line-height: .7rem; line-height: 0.7rem;
color: #fff; color: #fff;
font-size: .3rem; font-size: 0.3rem;
} }
.active{ .active {
background: #ccc; background: #ccc;
} }
} }
......
...@@ -102,8 +102,7 @@ export default [ ...@@ -102,8 +102,7 @@ export default [
{ {
path: '/my', path: '/my',
name: 'my', name: 'my',
component: () => import('../pages/my/index.vue'), component: () => import('../pages/my/index.vue')
meta: { requiredLogin: true }
}, },
// 我的-已购课程 // 我的-已购课程
{ {
......
import Vue from 'vue' import Vue from 'vue'
import Vuex from 'vuex' import Vuex from 'vuex'
import { getUser } from '@/api/account' import { getUser, logout } from '@/api/account'
Vue.use(Vuex) Vue.use(Vuex)
export default new Vuex.Store({ export default new Vuex.Store({
state: { state: {
...@@ -26,7 +26,6 @@ export default new Vuex.Store({ ...@@ -26,7 +26,6 @@ export default new Vuex.Store({
actions: { actions: {
getEnv({ commit }) { getEnv({ commit }) {
wx.miniProgram.getEnv(function(res) { wx.miniProgram.getEnv(function(res) {
console.log(res.miniprogram) // true
commit('setIsWeapp', res.miniprogram) commit('setIsWeapp', res.miniprogram)
}) })
}, },
...@@ -42,10 +41,18 @@ export default new Vuex.Store({ ...@@ -42,10 +41,18 @@ export default new Vuex.Store({
return true return true
}) })
.catch(() => { .catch(() => {
commit('setUser', {})
return false return false
}) })
commit('setIsLogin', isLogin) commit('setIsLogin', isLogin)
return isLogin return isLogin
},
logout({ commit }) {
return logout().then(response => {
commit('setUser', {})
commit('setIsLogin', false)
return response
})
} }
} }
}) })
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论