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