Skip to content

X
x-learn
提交 1ef40519 authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

移除无用文件

上级 58813a3a
显示空白字符变更
内嵌 并排
正在显示 包含 4 行增加 和 1779 行删除
src/components/CourseList.vue
浏览文件 @ 1ef40519
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
</template> </template>
<template v-else> <template v-else>
<slot name="empty"> <slot name="empty">
<p class="empty">暂无内容</p> <div class="empty">暂无内容</div>
</slot> </slot>
</template> </template>
</div> </div>
......
src/components/layout/header.vue
浏览文件 @ 1ef40519
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<router-link to="/">{{ title }}</router-link> <router-link to="/">{{ title }}</router-link>
</div> </div>
<div class="tool"> <div class="tool">
<app-search-bar @search="handleSearch" /> <app-search-bar :value="$route.query.keywords" @search="handleSearch" />
<nav class="nav"> <nav class="nav">
<router-link to="/">首页</router-link> <router-link to="/">首页</router-link>
<router-link to="/my">我的</router-link> <router-link to="/my">我的</router-link>
......
src/pages/buy/api.js deleted 100644 → 0
浏览文件 @ 58813a3a
import httpRequest from '@/utils/axios'
/**
* 获取openid
*/
export function getOpenId(params) {
return httpRequest.get('/usercenter/user/get-user-openid', params)
}
/**
* 获取商品
*/
export function getProduct(productId) {
return httpRequest.get(`/api/zy/v2/mall/product/${productId}`)
}
/**
* 生成订单
*/
export function genOrder(data) {
return httpRequest.post('/api/zy/v2/mall/order/pre', data, {
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
})
}
/**
* 获取订单
*/
export function getOrder(orderId) {
return httpRequest.get(`/api/zy/v2/mall/order/${orderId}`)
}
/**
* 获取订单状态
*/
export function getOrderStatus() {
return httpRequest.get('/api/zy/v2/mall/order/status')
}
src/pages/buy/components/androidBuy.vue deleted 100644 → 0
浏览文件 @ 58813a3a
<template>
<div class="pay-bg2">
<div class="top-view">
<img src="../../../assets/images/pay/top-bj.png" class="bj" />
<img src="../../../assets/images/pay/top-btn.png" class="btn" @click="goPay" />
<img src="../../../assets/images/pay/c1.png" class="content" />
</div>
<div class="main-cen">
<img src="../../../assets/images/pay/c2.png" class="c2" />
<img src="../../../assets/images/pay/c3.png" class="c3" />
<img src="../../../assets/images/pay/c4.png" class="c4" />
<img src="../../../assets/images/pay/c5.png" class="c5" />
</div>
<div class="btn-box">
<div class="text">
<div class="fle">
<div class="l">特惠价</div>
<div class="c">199.00</div>
<div class="r">原价999.00</div>
</div>
<div class="new-b" v-if="orderStatus === 0">课程有效期剩余{{expireDay}}天</div>
</div>
<div class="btn" @click="goPay" v-if="orderStatus === 100">立即购买</div>
<div class="btn" v-if="orderStatus === 1" @click="goHome">已购买</div>
<div class="btn" v-if="orderStatus === -1" @click="goMyOrder">待支付</div>
<div class="btn" @click="goPay" v-if="orderStatus === 0">续费</div>
</div>
<pay-we-chart :requestParam="requestParam"></pay-we-chart>
<!-- isPopShow -->
<div class="succ-pop" v-if="isPopShow">
<div class="pop">
<div class="close" @click="isPopShow = false">×</div>
<div class="tit">恭喜您，课程已购买成功！</div>
<div class="txt">请添加助教微信，有任何问题可随时沟通老师。</div>
<img src="../../../assets/images/pay/pay-izq.png" alt />
<div class="btns">添加客服微信</div>
<!-- <img @click="imagePreview" src="https://zws-imgs-pub.ezijing.com/static/public/dcef7bc62237a077b10d7e49c44a1e51.jpg" alt=""> -->
</div>
</div>
<h5-pay :productId="productId"></h5-pay>
</div>
</template>
<script>
import { mapState } from 'vuex'
import { ImagePreview } from 'vant'
import * as api from '../api'
import h5Pay from './h5Pay.vue'
export default {
components: { h5Pay },
props: {
productId: { type: String, required: true }
},
data() {
return {
isPopShow: false,
expireDay: 0,
orderStatusTime: null,
orderStatus: 100
}
},
computed: {
...mapState(['isWeapp', 'isAndroid', 'isIos', 'isVip', 'isLogin']),
isWeappPay() {
return this.isWeapp && !this.isIos
}
},
mounted() {
this.getOrder()
},
methods: {
// 获取订单状态
getOrder() {
api.getOrderStatus().then(response => {
this.orderStatus = response.status
this.expireDay = response.expire_day
})
},
imagePreview() {
ImagePreview(['https://zws-imgs-pub.ezijing.com/static/public/dcef7bc62237a077b10d7e49c44a1e51.jpg'])
},
tikeOrderStatus() {
if (this.isLogin) {
this.orderStatusTime = setInterval(this.getOrderStatus, 1000)
}
},
// 已购买
goHome() {
this.$toast('您已购买全部服务，可直接使用')
},
// 支付
goPay() {
if (this.orderStatus === 1) {
this.$toast('您已购买全部服务，可直接使用')
return false
}
this.tikeOrderStatus()
wx.miniProgram.navigateTo({
url: `/pages/pay/index?data=${this.productId}`
})
},
// 去我的订单页面
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.isPopShow = true
this.orderStatusTime && clearInterval(this.orderStatusTime)
}
})
}
},
destroyed() {
this.orderStatusTime && clearInterval(this.orderStatusTime)
}
}
</script>
<style lang="scss" scoped>
.pay-bg2 {
.top-view {
position: relative;
.bj {
width: 100%;
}
.btn {
position: absolute;
top: 3.25rem;
right: 0.7rem;
width: 3.42rem;
height: 0.85rem;
}
.content {
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translate(-50%, 50%);
width: 6.58rem;
height: 2.82rem;
}
}
.main-cen {
padding: 1.9rem 0.52rem 1.5rem 0.52rem;
.c2 {
width: 100%;
}
.c3 {
margin-top: 0.5rem;
width: 100%;
}
.c4 {
margin-top: 0.5rem;
width: 100%;
}
.c5 {
margin-top: 0.5rem;
width: 100%;
}
}
.btn-box {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 1rem;
background: rgba(171, 27, 48, 1);
.btn {
position: absolute;
top: 0;
right: 0;
width: 3.3rem;
height: 1rem;
background: linear-gradient(-90deg, rgba(204, 157, 93, 1), rgba(247, 213, 161, 1));
font-size: 0.37rem;
color: rgba(80, 41, 3, 1);
line-height: 1rem;
text-align: center;
font-weight: bold;
}
.text {
.fle {
display: flex;
div {
line-height: 100%;
}
}
.l {
font-size: 0.22rem;
color: rgba(255, 255, 255, 1);
line-height: 100%;
margin: 0.43rem 0 0 0.34rem;
background: linear-gradient(-90deg, rgba(204, 158, 94, 1) 0%, rgba(247, 214, 161, 1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
opacity: 0.8;
}
.c {
margin-top: 0.3rem;
margin-left: 0.15rem;
font-size: 0.44rem;
color: rgba(255, 255, 255, 1);
background: linear-gradient(-90deg, rgba(204, 158, 94, 1) 0%, rgba(247, 214, 161, 1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.r {
font-size: 0.22rem;
color: rgba(204, 158, 94, 1);
line-height: 100%;
opacity: 0.9;
margin: 0.43rem 0 0 0.17rem;
// background:linear-gradient(-90deg,rgba(204,158,94,1) 0%, rgba(247,214,161,1) 100%);
// -webkit-background-clip:text;
// -webkit-text-fill-color:transparent;
text-decoration: line-through;
}
.new-b {
font-size: 0.22rem;
color: rgba(255, 255, 255, 1);
line-height: 100%;
opacity: 0.8;
margin: 0 0 0 0.34rem;
background: linear-gradient(-90deg, rgba(204, 158, 94, 1) 0%, rgba(247, 214, 161, 1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
}
}
.succ-pop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
.pop {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
width: 5.9rem;
height: 6.98rem;
background: rgba(255, 255, 255, 1);
border-radius: 0.12rem;
.tit {
line-height: 1.1rem;
text-align: center;
font-size: 0.3rem;
color: #222;
font-weight: bold;
}
.txt {
width: 5.1rem;
font-size: 0.3rem;
color: rgba(34, 34, 34, 1);
margin: 0 auto;
}
// img{
// width: 4.3rem;
// height: 4.3rem;
// margin: 0.4rem auto;
// display: block;
// }
img {
width: 3.16rem;
height: 3rem;
margin: 0.6rem auto 0.45rem auto;
display: block;
}
.btns {
width: 4.5rem;
height: 0.7rem;
background: #c62245;
border-radius: 0.12rem;
margin: 0 auto;
text-align: center;
line-height: 0.7rem;
font-size: 0.3rem;
color: #fff;
}
.close {
position: absolute;
top: -0.8rem;
right: 0;
font-size: 0.6rem;
color: #fff;
}
}
}
.b-b-i {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
</style>
src/pages/buy/components/h5Pay.vue deleted 100644 → 0
浏览文件 @ 58813a3a
<template>
<div></div>
</template>
<script>
import * as api from '../api.js'
export default {
name: 'wxPay',
props: {
productId: { type: String, required: true }
},
data() {
return {
openId: '',
order: { options: {} }
}
},
computed: {
// 用户信息
user() {
return this.$store.state.user
},
// 是否登录
isLogin() {
return this.$store.state.isLogin
}
},
methods: {
// 获取openid
getOpenId() {
api.getOpenId({ id: this.user.id, identity: 'transport' }).then(response => {
this.openId = response.data.openid
// 生成订单
this.genOrder()
})
},
// 生成订单
genOrder() {
const params = {
product_id: this.productId,
open_id: this.openId,
type: 'certs-h5'
}
api.genOrder(params).then(response => {
this.order = response.data
// 调起微信支付
this.wxPay()
})
},
// 微信支付
wxPay() {
const options = this.order.options
WeixinJSBridge.invoke(
'getBrandWCPayRequest',
{
appId: options.appId, // 公众号名称，由商户传入
timeStamp: options.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
nonceStr: options.nonceStr, // 支付签名随机串，不长于 32 位
package: `prepay_id=${this.order.prepay_id}`, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
signType: options.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
paySign: options.paySign // 支付签名
},
function (res) {
if (res.err_msg === 'get_brand_wcpay_request:ok') {
// 使用以上方式判断前端返回,微信团队郑重提示：
// res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
this.$toast('支付成功')
// 支付成功后的回调函数
this.$emit('success', res)
} else {
this.$toast('支付失败')
this.$emti('fail', res)
}
}
)
// wx.chooseWXPay({
// timestamp: options.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
// nonceStr: options.nonceStr, // 支付签名随机串，不长于 32 位
// package: `prepay_id=${this.order.prepay_id}`, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
// signType: options.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
// paySign: options.paySign, // 支付签名
// success: res => {
// this.$toast('支付成功')
// // 支付成功后的回调函数
// this.$emit('success', res)
// },
// fail: error => {
// this.$toast('支付失败')
// this.$emti('fail', error)
// }
// })
},
pay() {
this.getOpenId()
}
}
}
</script>
src/pages/buy/components/iosBuy.vue deleted 100644 → 0
浏览文件 @ 58813a3a
<template>
<div class="pay-bg2">
<div class="top-view">
<img src="../../../assets/images/pay/top-bj-ios.png" class="bj" />
<img src="../../../assets/images/pay/top-btn-ios.png" class="btn" @click="handlePay" />
<img src="../../../assets/images/pay/c1.png" class="content" />
</div>
<div class="main-cen">
<img src="../../../assets/images/pay/c2.png" class="c2" />
<img src="../../../assets/images/pay/c3.png" class="c3" />
<img src="../../../assets/images/pay/c4.png" class="c4" />
<img src="../../../assets/images/pay/c5.png" class="c5" />
</div>
<div class="btn-box" v-if="isVip">
<div class="text">
<div class="fle">
<div class="l">特惠价</div>
<div class="c">199.00</div>
<div class="r">原价999.00</div>
</div>
<div class="new-b" v-if="orderStatus === 0">课程有效期剩余{{expireDay}}天</div>
</div>
<div class="btn" @click="goPay" v-if="orderStatus === 100">立即开通</div>
<div class="btn" v-if="orderStatus === 1" @click="goHome">已开通</div>
<div class="btn" v-if="orderStatus === -1" @click="goMyOrder">待支付</div>
<div class="btn" @click="goPay" v-if="orderStatus === 0">续费</div>
</div>
<img @click="goPayIos" src="../../../assets/images/pay/bottom-btn-ios.png" class="b-b-i" v-else />
<pay-we-chart :requestParam="requestParam"></pay-we-chart>
<div class="succ-pop" v-if="isPopShow">
<div class="pop">
<div class="close" @click="isPopShow = false">×</div>
<div class="tit">恭喜您，课程已开通成功！</div>
<div class="txt">请添加助教微信，有任何问题可随时沟通老师。</div>
<img src="../../../assets/images/pay/pay-izq.png" alt />
<div class="btns">添加客服微信</div>
</div>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex'
import { ImagePreview } from 'vant'
import * as api from '@/api/pay.js'
import { getUser } from '@/api/account'
export default {
metaInfo: {
title: '课程详情'
},
data() {
const productId = webConf.isDev === 'production' ? '6684359515615264768' : '6682927830365372416'
return {
isPopShow: false,
expireDay: 0,
userId: '',
requestParam: {
product_id: productId, // 提前设定
open_id: '', // 通过微信授权获取
prepay_id: '', // 通过调用接口获取
app_id: '', // 提前设定
app_secret: '' // 提前设定
},
orderStatusTime: null,
orderStatus: 100
}
},
computed: {
...mapState(['isWeapp', 'isAndroid', 'isIos', 'isVip', 'isLogin']),
isWeappPay() {
return this.isWeapp && !this.isIos
}
},
methods: {
getOrder() {
this.isLogin &&
api.getOrderStatus().then(res => {
this.expireDay = res.expire_day
this.orderStatus = res.status
})
},
imagePreview() {
ImagePreview(['https://zws-imgs-pub.ezijing.com/static/public/dcef7bc62237a077b10d7e49c44a1e51.jpg'])
},
async tikeOrderStatus() {
const isLogin = await this.$store.dispatch('checkLogin')
if (isLogin) {
this.orderStatusTime = setInterval(this.getOrderStatus, 1000)
}
},
// 已开通
goHome() {
this.$toast('您已开通全部服务，可直接使用')
},
// 支付
goPay() {
if (this.orderStatus === 1) {
this.$toast('您已开通全部服务，可直接使用')
return false
}
this.tikeOrderStatus()
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.isPopShow = true
this.orderStatusTime && clearInterval(this.orderStatusTime)
}
})
},
// 获取openID
getOpenid() {
getUser().then(res => {
api.getOpenid({ id: res.id, identity: 'transport' }).then(res => {
if (res.code === 0) {
this.requestParam.open_id = res.data.openid
}
})
})
},
handlePay() {
this.$emit('pay')
}
},
mounted() {
this.getOrder()
},
destroyed() {
this.orderStatusTime && clearInterval(this.orderStatusTime)
}
}
</script>
<style lang="scss" scoped>
.pay-bg2 {
.top-view {
position: relative;
.bj {
width: 100%;
}
.btn {
position: absolute;
top: 3.25rem;
right: 0.7rem;
width: 3.42rem;
height: 0.85rem;
}
.content {
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translate(-50%, 50%);
width: 6.58rem;
height: 2.82rem;
}
}
.main-cen {
padding: 1.9rem 0.52rem 1.5rem 0.52rem;
.c2 {
width: 100%;
}
.c3 {
margin-top: 0.5rem;
width: 100%;
}
.c4 {
margin-top: 0.5rem;
width: 100%;
}
.c5 {
margin-top: 0.5rem;
width: 100%;
}
}
.btn-box {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 1rem;
background: rgba(171, 27, 48, 1);
.btn {
position: absolute;
top: 0;
right: 0;
width: 3.3rem;
height: 1rem;
background: linear-gradient(-90deg, rgba(204, 157, 93, 1), rgba(247, 213, 161, 1));
font-size: 0.37rem;
color: rgba(80, 41, 3, 1);
line-height: 1rem;
text-align: center;
font-weight: bold;
}
.text {
.fle {
display: flex;
div {
line-height: 100%;
}
}
.l {
font-size: 0.22rem;
color: rgba(255, 255, 255, 1);
line-height: 100%;
margin: 0.43rem 0 0 0.34rem;
background: linear-gradient(-90deg, rgba(204, 158, 94, 1) 0%, rgba(247, 214, 161, 1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
opacity: 0.8;
}
.c {
margin-top: 0.3rem;
margin-left: 0.15rem;
font-size: 0.44rem;
color: rgba(255, 255, 255, 1);
background: linear-gradient(-90deg, rgba(204, 158, 94, 1) 0%, rgba(247, 214, 161, 1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.r {
font-size: 0.22rem;
color: rgba(204, 158, 94, 1);
line-height: 100%;
opacity: 0.9;
margin: 0.43rem 0 0 0.17rem;
// background:linear-gradient(-90deg,rgba(204,158,94,1) 0%, rgba(247,214,161,1) 100%);
// -webkit-background-clip:text;
// -webkit-text-fill-color:transparent;
text-decoration: line-through;
}
.new-b {
font-size: 0.22rem;
color: rgba(255, 255, 255, 1);
line-height: 100%;
opacity: 0.8;
margin: 0 0 0 0.34rem;
background: linear-gradient(-90deg, rgba(204, 158, 94, 1) 0%, rgba(247, 214, 161, 1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
}
}
.succ-pop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
.pop {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
width: 5.9rem;
height: 6.98rem;
background: rgba(255, 255, 255, 1);
border-radius: 0.12rem;
.tit {
line-height: 1.1rem;
text-align: center;
font-size: 0.3rem;
color: #222;
font-weight: bold;
}
.txt {
width: 5.1rem;
font-size: 0.3rem;
color: rgba(34, 34, 34, 1);
margin: 0 auto;
}
// img{
// width: 4.3rem;
// height: 4.3rem;
// margin: 0.4rem auto;
// display: block;
// }
img {
width: 3.16rem;
height: 3rem;
margin: 0.6rem auto 0.45rem auto;
display: block;
}
.btns {
width: 4.5rem;
height: 0.7rem;
background: #c62245;
border-radius: 0.12rem;
margin: 0 auto;
text-align: center;
line-height: 0.7rem;
font-size: 0.3rem;
color: #fff;
}
.close {
position: absolute;
top: -0.8rem;
right: 0;
font-size: 0.6rem;
color: #fff;
}
}
}
.b-b-i {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
</style>
src/pages/buy/index.vue deleted 100644 → 0
浏览文件 @ 58813a3a
<template>
<div class="pay-bg2">
<div class="top-view">
<img src="../../assets/images/pay/top-bj.png" class="bj" />
<img src="../../assets/images/pay/top-btn.png" class="btn" @click="goPay" />
<img src="../../assets/images/pay/c1.png" class="content" />
</div>
<div class="main-cen">
<img src="../../assets/images/pay/c2.png" class="c2" />
<img src="../../assets/images/pay/c3.png" class="c3" />
<img src="../../assets/images/pay/c4.png" class="c4" />
<img src="../../assets/images/pay/c5.png" class="c5" />
</div>
<div class="btn-box">
<div class="text">
<div class="fle">
<div class="l">特惠价</div>
<div class="c">199.00</div>
<div class="r">原价999.00</div>
</div>
<div class="new-b" v-if="orderStatus === 0">课程有效期剩余{{expireDay}}天</div>
</div>
<div class="btn" @click="goPay" v-if="orderStatus === 100">立即购买</div>
<div class="btn" v-if="orderStatus === 1" @click="goHome">已购买</div>
<div class="btn" v-if="orderStatus === -1" @click="goPay">待支付</div>
<div class="btn" @click="goPay" v-if="orderStatus === 0">续费</div>
</div>
<!-- popVisible -->
<div class="succ-pop" v-if="popVisible">
<div class="pop">
<div class="close" @click="popVisible = false">×</div>
<div class="tit">恭喜您，课程已购买成功！</div>
<div class="txt">请添加助教微信，有任何问题可随时沟通老师。</div>
<img
@click="imagePreview"
src="https://zws-imgs-pub.ezijing.com/static/public/dcef7bc62237a077b10d7e49c44a1e51.jpg"
/>
</div>
</div>
<h5-pay :productId="productId" ref="h5pay"></h5-pay>
</div>
</template>
<script>
import { mapState } from 'vuex'
import { ImagePreview } from 'vant'
import * as api from './api'
import h5Pay from './components/h5Pay.vue'
export default {
components: { h5Pay },
data() {
const productId = webConf.isDev === 'production' ? '6684359515615264768' : '6682927830365372416'
return {
productId,
popVisible: false,
expireDay: 0,
orderStatusTimer: null,
orderStatus: 100
}
},
computed: {
...mapState(['isWeapp', 'isAndroid', 'isIos', 'isVip', 'isLogin']),
isWeappPay() {
return this.isWeapp && !this.isIos
}
},
methods: {
// 获取订单状态
getOrderStatus() {
return api.getOrderStatus().then(response => {
this.orderStatus = response.status
this.expireDay = response.expire_day
return response
})
},
// 自动获取订单状态
autoGetOrderStatus() {
this.orderStatusTimer = setInterval(() => {
this.getOrderStatus().then(response => {
if (this.orderStatus === 1) {
this.popVisible = true
this.clearOrderStatusTimer()
}
})
}, 1000)
},
// 清除订单定时
clearOrderStatusTimer() {
this.orderStatusTimer && clearInterval(this.orderStatusTimer)
},
// 预览图片
imagePreview() {
ImagePreview(['https://zws-imgs-pub.ezijing.com/static/public/dcef7bc62237a077b10d7e49c44a1e51.jpg'])
},
// 已购买
goHome() {
this.$toast('您已购买全部服务，可直接使用')
},
// 支付
goPay() {
if (this.orderStatus === 1) {
this.$toast('您已购买全部服务，可直接使用')
return false
}
// 自动获取订单状态
this.autoGetOrderStatus()
// 调起微信支付
this.$refs.h5pay.pay()
}
},
mounted() {
this.isLogin && this.getOrderStatus()
},
destroyed() {
this.clearOrderStatusTimer()
}
}
</script>
<style lang="scss" scoped>
.pay-bg2 {
.top-view {
position: relative;
.bj {
width: 100%;
}
.btn {
position: absolute;
top: 3.25rem;
right: 0.7rem;
width: 3.42rem;
height: 0.85rem;
}
.content {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 50%);
width: 6.58rem;
height: 2.82rem;
}
}
.main-cen {
padding: 1.9rem 0.52rem 1.5rem 0.52rem;
.c2 {
width: 100%;
}
.c3 {
margin-top: 0.5rem;
width: 100%;
}
.c4 {
margin-top: 0.5rem;
width: 100%;
}
.c5 {
margin-top: 0.5rem;
width: 100%;
}
}
.btn-box {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 1rem;
background: rgba(171, 27, 48, 1);
.btn {
position: absolute;
top: 0;
right: 0;
width: 3.3rem;
height: 1rem;
background: linear-gradient(-90deg, rgba(204, 157, 93, 1), rgba(247, 213, 161, 1));
font-size: 0.37rem;
color: rgba(80, 41, 3, 1);
line-height: 1rem;
text-align: center;
font-weight: bold;
}
.text {
.fle {
display: flex;
div {
line-height: 100%;
}
}
.l {
font-size: 0.22rem;
color: rgba(255, 255, 255, 1);
line-height: 100%;
margin: 0.43rem 0 0 0.34rem;
background: linear-gradient(-90deg, rgba(204, 158, 94, 1) 0%, rgba(247, 214, 161, 1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
opacity: 0.8;
}
.c {
margin-top: 0.3rem;
margin-left: 0.15rem;
font-size: 0.44rem;
color: rgba(255, 255, 255, 1);
background: linear-gradient(-90deg, rgba(204, 158, 94, 1) 0%, rgba(247, 214, 161, 1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.r {
font-size: 0.22rem;
color: rgba(204, 158, 94, 1);
line-height: 100%;
opacity: 0.9;
margin: 0.43rem 0 0 0.17rem;
// background:linear-gradient(-90deg,rgba(204,158,94,1) 0%, rgba(247,214,161,1) 100%);
// -webkit-background-clip:text;
// -webkit-text-fill-color:transparent;
text-decoration: line-through;
}
.new-b {
font-size: 0.22rem;
color: rgba(255, 255, 255, 1);
line-height: 100%;
opacity: 0.8;
margin: 0 0 0 0.34rem;
background: linear-gradient(-90deg, rgba(204, 158, 94, 1) 0%, rgba(247, 214, 161, 1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
}
}
.succ-pop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
.pop {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
width: 5.9rem;
height: 6.98rem;
background: rgba(255, 255, 255, 1);
border-radius: 0.12rem;
.tit {
line-height: 1.1rem;
text-align: center;
font-size: 0.3rem;
color: #222;
font-weight: bold;
}
.txt {
width: 5.1rem;
font-size: 0.3rem;
color: rgba(34, 34, 34, 1);
margin: 0 auto;
}
// img{
// width: 4.3rem;
// height: 4.3rem;
// margin: 0.4rem auto;
// display: block;
// }
img {
width: 3.16rem;
height: 3rem;
margin: 0.6rem auto 0.45rem auto;
display: block;
}
.btns {
width: 4.5rem;
height: 0.7rem;
background: #c62245;
border-radius: 0.12rem;
margin: 0 auto;
text-align: center;
line-height: 0.7rem;
font-size: 0.3rem;
color: #fff;
}
.close {
position: absolute;
top: -0.8rem;
right: 0;
font-size: 0.6rem;
color: #fff;
}
}
}
.b-b-i {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
</style>
src/pages/contact/index.vue
浏览文件 @ 1ef40519
<template> <template>
<app-container title="联系客服" class="contact"> <app-container title="联系客服" class="contact">
<p><img src="../../assets/images/ser-icon1.png" />客服微信：1777777777</p> <p><img src="../../assets/images/ser-icon1.png" />客服微信：18610017891</p>
<p><img src="../../assets/images/ser-icon2.png" />客服电话：1777777777</p> <p><img src="../../assets/images/ser-icon2.png" />客服电话：18610017891</p>
<p><img src="../../assets/images/ser-icon3.png" />工作时间：工作日9:00-12:00,13:00-18:00</p> <p><img src="../../assets/images/ser-icon3.png" />工作时间：工作日9:00-12:00,13:00-18:00</p>
<div class="footer"> <div class="footer">
<div class="item"> <div class="item">
......
src/pages/my/buyCourses.vue deleted 100644 → 0
浏览文件 @ 58813a3a
<template>
<div class="main-container" v-show="loaded">
<ul v-if="dataList.length">
<li class="order-item" v-for="(item, index) in dataList" :key="index">
<div class="order-info">
<div class="no-c"></div>
<img :src="item.product_image" />
<div class="txt">{{item.product_name}}</div>
</div>
<div class="deti">
<div class="tit">课程状态：</div>
<div class="val">{{item.status | courseStatusText }}</div>
</div>
<div class="deti">
<div class="tit">共计：</div>
<div class="val">￥{{parseInt(item.total_fee)/100}}</div>
</div>
<div class="deti">
<div class="invo" v-if="item.status == 1" @click="goInvoice">查看发票</div>
<div class="val col" v-if="item.status === '-1'" @click="goBuy(item)">继续支付</div>
<div class="val col mar" v-else>{{item.status | orderStatusText}}</div>
</div>
</li>
</ul>
<van-empty description="暂无内容" v-else />
<div class="succ-pop" v-if="isPopShow">
<div class="pop">
<div class="close" @click="isPopShow = false">×</div>
<div class="tit">恭喜您，课程已购买成功！</div>
<div class="txt">请添加客服微信，有任何问题可随时沟通客服。</div>
<img src="../../assets/images/pay/pay-izq.png" alt />
<a href="https://mp.weixin.qq.com/s/dQVf6EWwCGJOthUbpIrQMg">
<div class="btns">添加客服微信</div>
</a>
<!-- <img @click="imagePreview" src="https://zws-imgs-pub.ezijing.com/static/public/dcef7bc62237a077b10d7e49c44a1e51.jpg" alt=""> -->
</div>
</div>
</div>
</template>
<script>
import * as api from '@/api/pay.js'
export default {
metaInfo: {
title: '已购课程'
},
data() {
return {
isPopShow: false,
loaded: false,
list: [],
orderTime: null,
goFlag: true
}
},
computed: {
isIos() {
return this.$store.state.isIos
},
isWeapp() {
return this.$store.state.isWeapp
},
// ios小程序里过滤未支付的订单
dataList() {
if (this.isIos && this.isWeapp) {
return this.list.filter(item => item.status !== '-1')
}
return this.list
}
},
mounted() {
this.getMyOrder()
},
filters: {
courseStatusText(status) {
return status === '1' ? '已付款' : '未付款'
},
orderStatusText(status) {
const map = {
'-1': '待支付',
0: '已取消',
1: '购买成功',
2: '已超时'
}
return map[status]
}
},
methods: {
goInvoice() {
if (this.isWeapp) {
wx.miniProgram.navigateTo({
url: `/pages/web/index?src=${window.location.origin}/my/invoice`
})
} else {
this.$router.push({
path: '/my/invoice'
})
}
},
getMyOrder() {
api
.getMyOrder()
.then(res => {
if (res.code === 0) {
this.list = res.data.orders
}
})
.finally(() => {
this.loaded = true
})
},
goBuy(data) {
if (this.goFlag) {
this.goFlag = false
clearInterval(this.orderTime)
this.orderTime = setInterval(() => {
this.getMyOrder()
api.getOrderStatus().then(res => {
if (this.orderStatus === 1) {
this.isPopShow = true
clearInterval(this.orderTime)
}
})
}, 1000)
setTimeout(() => {
this.goFlag = true
}, 1000)
wx.miniProgram.navigateTo({
url: `/pages/pay/index?data=${data.product_id}`
})
}
}
}
}
</script>
<style lang="scss" scoped>
.main-container {
ul {
padding-top: 0.4rem;
padding-bottom: env(safe-area-inset-bottom);
}
.order-item {
margin-bottom: 0.4rem;
}
.order-info {
position: relative;
.no-c {
position: absolute;
top: 0;
left: 0;
z-index: 9;
width: 100%;
height: 100%;
}
display: flex;
img {
width: 2.4rem;
height: 2.4rem;
display: block;
background-color: #eee;
object-fit: contain;
}
.txt {
margin-left: 0.2rem;
font-size: 0.3rem;
color: #222;
word-wrap: break-word;
font-weight: bold;
}
}
.deti {
display: flex;
margin-top: 0.4rem;
.tit {
font-size: 0.26rem;
color: #222;
}
.val {
font-size: 0.26rem;
color: #222;
margin-left: auto;
font-weight: bold;
}
.invo {
font-size: 0.3rem;
margin-left: auto;
}
.col {
color: #ff6767;
font-size: 0.3rem;
}
.mar {
margin-left: 0.3rem;
}
}
}
.succ-pop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
.pop {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
width: 5.9rem;
height: 6.98rem;
background: rgba(255, 255, 255, 1);
border-radius: 0.12rem;
.tit {
line-height: 1.1rem;
text-align: center;
font-size: 0.3rem;
color: #222;
font-weight: bold;
}
.txt {
width: 5.1rem;
font-size: 0.3rem;
color: rgba(34, 34, 34, 1);
margin: 0 auto;
}
// img{
// width: 4.3rem;
// height: 4.3rem;
// margin: 0.4rem auto;
// display: block;
// }
img {
width: 3.16rem;
height: 3rem;
margin: 0.6rem auto 0.45rem auto;
display: block;
}
.btns {
width: 4.5rem;
height: 0.7rem;
background: #c62245;
border-radius: 0.12rem;
margin: 0 auto;
text-align: center;
line-height: 0.7rem;
font-size: 0.3rem;
color: #fff;
}
.close {
position: absolute;
top: -0.8rem;
right: 0;
font-size: 0.6rem;
color: #fff;
}
}
}
</style>
src/pages/my/feedback.vue deleted 100644 → 0
浏览文件 @ 58813a3a
<template>
<div class="feed-h">
<div class="feed-box">
<div class="title">留下您的宝贵意见，我们会第一时间联系您</div>
<textarea name="" id="" v-model="contentText" @blur="showBtn = true" @focus="showBtn = false"></textarea>
<div class="title">您的联系方式</div>
<input type="number" v-model="mobile" @blur="showBtn = true" @focus="showBtn = false">
</div>
<div v-if="showBtn" class="feed-btn" @click="submit">提交</div>
</div>
</template>
<script>
import * as api from '@/api/my.js'
import { Toast } from 'vant'
export default {
metaInfo: {
title: '意见反馈'
},
components: {
[Toast.name]: Toast
},
mounted() {
const resizeHeight = document.body.clientHeight
window.addEventListener('resize', () => {
document.body.clientHeight === resizeHeight ? this.showBtn = true : this.showBtn = false
window.scroll(0, 0)
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
document.documentElement.scrollTop = document.body.scrollTop = scrollTop
})
},
data() {
return {
showBtn: true,
contentText: '',
mobile: ''
}
},
methods: {
submit() {
if (this.contentText === '') {
Toast({ message: '请输入意见' })
return false
}
if (!/^1[34578]\d{9}$/.test(this.mobile)) {
Toast({ message: '请输入正确手机号' })
return false
}
api.submitFeedback({ title: this.mobile, contents: this.contentText }).then(res => {
Toast({ message: '已提交' })
this.contentText = ''
this.mobile = ''
})
}
}
}
</script>
<style lang="scss" scoped>
.feed-h{
position: fixed;
top: 0;
left: 0;
}
.feed-box{
padding: 0 .4rem;
.title{
color: #222;
font-size: .3rem;
line-height: 1.1rem;
font-weight: bold;
}
textarea{
padding:.1rem .2rem;
resize:none;
width:6.3rem;
height:3.77rem;
border-radius:.07rem;
border:0.01rem solid rgba(204,204,204,1);
font-size:.26rem;
color:rgba(34,34,34,1);
line-height: .43rem;
}
input{
padding:0 .2rem;
outline: none;
width:6.3rem;
height:.8rem;
border-radius:.07rem;
border:.01rem solid rgba(204,204,204,1);
color:rgba(34,34,34,1);
font-size:.26rem;
}
}
.feed-btn{
position: fixed;
bottom: .4rem;
left: 50%;
-webkit-transform: translateX(-50%);
text-align: center;
line-height: .7rem;
width:6.7rem;
height:.7rem;
background:#C62245;
border-radius:.12rem;
font-weight:bold;
color:rgba(255,255,255,1);
line-height: .7rem;
}
</style>
src/pages/my/index.vue deleted 100644 → 0
浏览文件 @ 58813a3a
<template>
<div>
<div class="info-box">
<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="toPage(item.url)">
<div class="title">{{ item.title }}</div>
<van-icon name="arrow" class="icon" />
</li>
</ul>
<!-- <div class="login-out" @click="logout" v-if="user.id">退出登录</div> -->
</div>
</template>
<script>
export default {
metaInfo: {
title: '我的'
},
name: 'my',
data() {
return {
navList: [
{
title: '已购课程',
url: '/my/buyCourses'
},
{
title: '已学课程',
url: '/my/learn'
},
{
title: '学习提醒',
url: '/my/alarm'
},
{
title: '已做试题',
url: '/my/questionsList'
},
{
title: '收藏试题',
url: '/my/collectQuestions'
},
// {
// title: '消息/通知',
// url: '/my/buyCourses'
// },
{
title: '意见反馈',
url: '/my/feedback'
},
{
title: '联系客服',
url: '/my/service'
}
]
}
},
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() {
this.$store.dispatch('logout').then(() => {
this.$toast('退出成功')
// 清除小程序登录状态
wx.miniProgram.postMessage({ data: { token: '' } })
wx.miniProgram.switchTab({ url: '/pages/index/index' })
})
},
toPage(url) {
if (this.isWeapp) {
wx.miniProgram.navigateTo({
url: `/pages/web/index?src=${window.location.origin}${url}`
})
} else {
this.$router.push(url)
}
}
},
beforeMount() {
this.$store.dispatch('checkLogin')
}
}
</script>
<style lang="scss" scoped>
.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;
align-items: center;
.title {
font-size: 0.3rem;
color: #222;
}
.icon {
margin-left: auto;
}
}
li:last-child {
border: none;
}
}
.login-out {
position: absolute;
bottom: 2rem;
left: 50%;
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>
src/pages/my/invoice.vue deleted 100644 → 0
浏览文件 @ 58813a3a
<template>
<div class="invoice-box">
<div class="top-tipc">
<div class="tit">开票内容：网络课程费</div>
<div class="txt">根据国家税务部门规定开具商品明细</div>
</div>
<div class="emil">
<div class="tit">请您将以下开票信息发送至邮箱：</div>
<div class="em">jtaqgl@ezijing.com</div>
</div>
<div class="detail">
<div class="tit">发邮件需提供以下</div>
<div class="con">
<div class="t">发票信息</div>
<div class="p">1.发票抬头（需提供）</div>
<div class="p">2.纳税人识别号（公司开票需提供）</div>
<div class="p">3.注册地址（公司专票需提供）</div>
<div class="p">4.联系电话（公司专票需提供）</div>
<div class="p">5.开户银行（公司专票需提供）</div>
</div>
<div class="con">
<div class="t">发票邮寄信息</div>
<div class="p">1.收件人姓名</div>
<div class="p">2.收件人电话</div>
<div class="p">3.收件地址</div>
</div>
<div class="con">
<div class="t">提示：</div>
<div class="p">1.请务必将信息正确完整提供给我们，我们会尽快</div>
<div class="p">把发票邮寄给您。</div>
<div class="p">2.发票只能开一次，无法重复开票</div>
</div>
</div>
</div>
</template>
<script>
export default {
metaInfo: {
title: '申请发票'
}
}
</script>
<style lang="scss" scoped>
.invoice-box{
padding: .4rem;
}
.top-tipc{
height: 1.36rem;
margin-bottom: .4rem;
background:#F47885;
border-radius:.2rem;
padding-top: .3rem;
.tit{
font-weight: bold;
font-size: .3rem;
line-height: 100%;
color: #fff;
margin: 0 0 .2rem .3rem;
}
.txt{
font-size:.26rem;
color: #fff;
margin-left: .3rem;
line-height: 100%;
}
}
.emil{
padding: 0 0 .2rem .3rem;
border-bottom: .01rem solid rgba(238,238,238,1);
.tit{
font-weight:bold;
color:rgba(34,34,34,1);
font-size:.3rem;
line-height: 100%;
}
.em{
font-size:.3rem;
margin-top: .2rem;
color: #999;
}
}
.detail{
padding: .2rem .3rem;
.tit{
font-size: .3rem;
font-weight:bold;
color:rgba(34,34,34,1);
line-height:100%;
}
.con{
margin-top: .4rem;
font-size: .26rem;
color: #999;
.t{
color:rgba(34,34,34,1);
margin-bottom: .2rem;
line-height: 100%;
}
.p{
margin-bottom: .15rem;
line-height: 100%;
}
}
}
</style>
src/pages/my/service.vue deleted 100644 → 0
浏览文件 @ 58813a3a
<template>
<div class="serv-box">
<img class="top-bar" src="../../assets/images/top-bar.png" />
<ul class="contact-info">
<li>
<img src="../../assets/images/ser-icon1.png" />
<div class="txt">
<span>客服微信:</span>
<a href="tel:18610017891">18610017891</a>
</div>
</li>
<li>
<img src="../../assets/images/ser-icon2.png" />
<div class="txt">
<span>客服电话:</span>
<a href="tel:18610017891">18610017891</a>
</div>
</li>
<li>
<img src="../../assets/images/ser-icon3.png" />
<div class="txt">
<span>工作时间:</span> 工作日9:00-12:00,13:00-18:00
</div>
</li>
</ul>
<div class="contact-button" style="margin-bottom:1.66rem;">
<a href="https://mp.weixin.qq.com/s/dQVf6EWwCGJOthUbpIrQMg">客服二维码添加微信</a>
</div>
<ul class="contact-info">
<li>
<img src="../../assets/images/ser-icon1.png" />
<div class="txt">
<span>想了解更多，请关注官方公众号</span>
</div>
</li>
</ul>
<div class="contact-button">
<a href="https://mp.weixin.qq.com/s/DDnEkhe32jY09t8rCNuRhw">关注公众号</a>
</div>
</div>
</template>
<script>
export default {
metaInfo: {
title: '联系客服'
},
methods: {}
}
</script>
<style lang="scss" scoped>
.top-bar {
width: 100%;
display: block;
}
.contact-info {
padding-left: 0.7rem;
padding-top: 0.2rem;
li {
display: flex;
margin-bottom: 0.48rem;
img {
width: 0.5rem;
height: 0.5rem;
display: block;
}
.txt {
margin-left: 0.3rem;
line-height: 0.5rem;
font-size: 0.3rem;
color: rgba(34, 34, 34, 1);
span {
font-weight: bold;
}
}
}
}
.contact-button {
margin: 0.88rem 0.4rem;
height: 40px;
color: #fff;
line-height: 40px;
text-align: center;
background-color: #af1b40;
border-radius: 6px;
a {
display: block;
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论