Skip to content

P
project-online-fi
提交 5f2df40d authored 作者: matian's avatar matian
浏览文件
操作

updates

上级 aea2a7a4
隐藏空白字符变更
内嵌 并排
正在显示 包含 435 行增加 和 58 行删除
src/api/base.ts
浏览文件 @ 5f2df40d
......@@ -34,3 +34,27 @@ export function getBuyShop() {
headers: { tenant: 'paa' }
})
}
/**
* 发送验证码
*/
export function sendCode(data: any) {
return httpRequest.post('/api/usercenter/user/send-code', data, {
headers: { 'Content-Type': 'multipart/form-data' }
})
}
/**
* 检验验证码
*/
export function checkCode(params: any) {
return httpRequest.get('/api/usercenter/user/check-code', { params })
}
/**
* 提交留咨信息
*/
export function postNes(data: any) {
return httpRequest.post('/api/enrollment/v1.0/applications', data, {
headers: { 'Content-Type': 'multipart/form-data' }
})
}
src/components/layout/Header.vue
浏览文件 @ 5f2df40d
......@@ -4,7 +4,7 @@ import { useUserStore } from '@/stores/user'
import { useRoute } from 'vue-router'
import AppNav from './Nav.vue'
import { ElMessage } from 'element-plus'
// const { courses } = useUserStore()
const courseStore = useUserStore()
interface Props {
fixed?: boolean
......@@ -45,12 +45,15 @@ const isScrolled = computed(() => {
return y.value > 0
})
const handleStudy = () => {
if (JSON.parse(localStorage.getItem('courses') as string).length > 0) {
if (courseStore.courses.length > 0) {
window.open('https://paa-learning.ezijing.com')
} else {
ElMessage.warning('请先购买课程，才能开始学习')
}
}
const handleOrder = () => {
window.open('https://account-show.ezijing.com/payment')
}
</script>
<template>
......@@ -71,7 +74,7 @@ const handleStudy = () => {
</div>
<div class="app-header-right">
<template v-if="user.isLogin">
你好，{{ user.userName }}
<div @click="handleOrder" style="cursor: pointer">你好，{{ user.userName }}</div>
<div class="app-header-logout" @click="handleLogout">
<img src="https://webapp-pub.ezijing.com/project/saas/logout.png" v-if="isScrolled || !fixed" />
<img src="https://webapp-pub.ezijing.com/project_online/fi/logout_white.png" v-else />
......@@ -136,6 +139,8 @@ const handleStudy = () => {
font-size: 18px;
line-height: 50px;
margin-right: 30px;
font-weight: 400;
cursor: pointer;
}
display: flex;
......
src/components/layout/Index.vue
浏览文件 @ 5f2df40d
<script setup lang="ts">
import AppHeader from './Header.vue'
import AppFooter from './Footer.vue'
import RightAside from './RightAside.vue'
const attrs = useAttrs()
</script>
......@@ -11,5 +12,6 @@ const attrs = useAttrs()
<router-view :key="$route.fullPath"></router-view>
</section>
<AppFooter></AppFooter>
<RightAside />
</div>
</template>
src/components/layout/RightAside.vue 0 → 100644
浏览文件 @ 5f2df40d
<template>
<div class="right_bar">
<ul class="tab_btns">
<li
:class="{ enroll: true, active: tabBtnActive && tabBtnTarget === 'enroll' }"
@mouseenter="handleMsOver('enroll')"
@mouseleave="handleMsOut"
>
<p>我要报名</p>
</li>
</ul>
<transition
name="custom-classes-transition"
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight"
>
<div
id="show-enroll"
v-show="tabBtnActive"
class="tab_cont"
@mouseenter="handleMsOver('')"
@mouseleave="handleMsOut"
>
<div class="enroll_cont" id="show-enroll-content" v-show="tabBtnTarget === 'enroll'">
<h5>报名咨询</h5>
<div class="p">
<el-input v-model="formInfo.name" placeholder="请输入您的名字" size="small"></el-input>
</div>
<div class="p">
<el-input v-model="formInfo.phone" placeholder="请输入您的电话" size="small"></el-input>
</div>
<div class="p sendcode">
<el-input v-model="sendCode" placeholder="请输入验证码" size="small"></el-input
><el-button class="btn" :disabled="isBtnDisabled" id="checkedCode" @click="getSendCode">
获取验证码
</el-button>
</div>
<div class="p">
<el-button style="width: 100%" @click="submitEnroll">立即报名</el-button>
</div>
</div>
</div>
</transition>
</div>
</template>
<script>
import { sendCode, checkCode, postNes } from '@/api/base'
const MOBILE_REG = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
export default {
data() {
return {
tabBtnActive: false,
tabBtnTarget: '',
projectName: '金融硕士保研项目',
sendCode: '',
isBtnDisabled: false,
formInfo: {
name: '',
phone: '',
projectId: ''
}
}
},
watch: {
$route: {
handler: function (val, oldVal) {
if (val.path === '/studyAbroad') {
this.formInfo.projectId = '1018'
} else {
this.formInfo.projectId = '1012'
}
},
// 深度观察监听
deep: true,
immediate: true
}
},
computed: {
projectList() {
if (this.$route.path === '/internationalDegree') {
return this.projectListMap.slice(0, 7)
} else if (this.$route.path === '/studyAbroad') {
return this.projectListMap.slice(-4)
} else {
return this.projectListMap
}
}
},
methods: {
handleMsOver(type) {
this.tabBtnActive = true
if (type !== '') {
this.tabBtnTarget = type
}
},
handleMsOut(type) {
this.tabBtnActive = false
},
submitEnroll() {
let flag = true
Object.keys(this.formInfo).map(item => {
if (this.formInfo[item] === '') {
flag = false
}
})
if (!flag || !this.sendCode) {
this.$message('请完善信息')
} else if (!MOBILE_REG.test(this.formInfo.phone)) {
this.$message('手机号格式错误')
} else {
this.checkSendcode()
.then(res => {
return this.enrollQuery()
})
.then(res => {
this.$message({
type: 'success',
message: '报名成功',
duration: 5000
})
})
.catch(err => {
if (err && err.type === 'checkcode') this.$message.error(err.msg)
else this.$message.error(err.msg || '报名提交失败')
})
}
},
enrollQuery() {
const params = {
channel: localStorage.getItem('channel_num') || 19962,
project_id: this.formInfo.projectId === '9999' ? '1016' : this.formInfo.projectId,
name: this.formInfo.name,
phone: this.formInfo.phone
}
return new Promise((resolve, reject) => {
postNes(params).then(res => {
if (res && res.status === 200 && res.error === 0) {
resolve({
type: 'enroll',
state: 'success'
})
} else {
reject({
type: 'enroll',
state: 'fail',
msg: res.message || '报名提交失败'
})
}
})
})
},
getSendCode() {
if (!this.formInfo.phone) {
this.$message('手机号不能为空')
} else if (!MOBILE_REG.test(this.formInfo.phone)) {
this.$message('手机号格式错误')
} else {
const param = {
account: this.formInfo.phone,
service: 'ezijing.com'
}
sendCode(param)
.then(res => {
this.btnDisabledTimer()
if (res && res.code === 0) this.$message.success('验证码已发送，请注意查收')
else this.$message.error('获取验证码失败，请稍后再试')
})
.catch(() => {})
}
},
checkSendcode() {
const checkCodeParam = {
account: this.formInfo.phone,
code: this.sendCode,
countryCode: 86
}
return new Promise((resolve, reject) => {
checkCode(checkCodeParam).then(res => {
if (res && res.code === 0) {
res.type = 'checkcode'
resolve({
type: 'checked',
state: 'success'
})
} else {
reject({
type: 'checked',
state: 'fail',
msg: res.msg || '验证码检测失败'
})
}
})
})
},
btnDisabledTimer() {
this.isBtnDisabled = true
let count = 60
document.querySelector('#checkedCode').innerHTML = count + 's'
const timer = setInterval(() => {
count--
if (count < 1) {
clearInterval(timer)
this.isBtnDisabled = false
document.querySelector('#checkedCode').innerHTML = this.$t('aside.codeBtn')
} else {
document.querySelector('#checkedCode').innerHTML = count + 's'
}
}, 1000)
}
}
}
</script>
<style lang="scss" scoped>
.right_bar {
position: fixed;
top: 50%;
right: 10px;
z-index: 2000;
transform: translateY(-50%);
.tab_btns {
width: 100px;
font-size: 12px;
border-radius: 4px;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
overflow: hidden;
li {
padding: 70px 0 18px;
color: #999;
background-position: center 18px;
background-repeat: no-repeat;
background-color: #fff;
text-align: center;
}
li.active {
background-color: #af1b40;
color: #fff;
opacity: 0.9;
transition: 0.3s;
}
li.enroll {
position: relative;
background-image: url(https://zws-imgs-pub.ezijing.com/static/public/d434fa0ffd77892273e63e6d694cff0a.png);
}
li.enroll:after {
content: '';
width: 100%;
height: 1px;
background: #b8bcbf;
position: absolute;
left: 0;
bottom: 0;
// transform: translateX(-50%) scale(0.5);
}
li.enroll.active {
background-image: url(https://zws-imgs-pub.ezijing.com/static/public/4cbef518113d24b392be80148e921abd.png);
}
li.wx {
background-image: url(https://zws-imgs-pub.ezijing.com/static/public/5526b83d7526b2742f6eba7151c367db.png);
}
li.wx.active {
background-image: url(https://zws-imgs-pub.ezijing.com/static/public/0831ea27fee535ab0ce9f730f467b2e1.png);
}
li > p {
font-size: 12px;
line-height: 14px;
text-align: center;
// transform: scale(0.9);
line-height: 100%;
cursor: default;
}
}
.tab_cont {
position: absolute;
left: -360px;
top: -120px;
width: 346px;
height: 390px;
background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/right_bg.png);
// display:none;
h5 {
font-size: 24px;
font-weight: 400;
line-height: 19px;
color: #ffffff;
text-align: center;
margin-bottom: 25px;
}
.enroll_cont {
padding: 46px 29px 69px 29px;
box-sizing: border-box;
.p {
margin-bottom: 20px;
position: relative;
:deep(.el-input__inner) {
line-height: 40px;
height: 40px;
}
:deep(.el-input__inner::placeholder) {
font-weight: 300;
font-size: 14px;
color: #999999;
line-height: 40px;
height: 40px;
}
:deep(.el-button) {
background-color: #c1ab85;
border: 1px solid #c1ab85;
color: #ffffff;
height: 40px;
font-size: 16px;
}
}
.sendcode {
display: flex;
justify-content: space-between;
:deep(.el-input) {
width: 170px;
height: 40px;
}
:deep(.el-button) {
height: 40px;
color: #ffffff;
font-size: 14px;
margin-left: 10px;
}
:deep(.is-disabled) {
color: #c0c4cc;
cursor: not-allowed;
background-image: none;
background-color: #fff;
border-color: #ebeef5;
}
}
}
}
}
</style>
src/modules/pay/components/Order.vue
浏览文件 @ 5f2df40d
......@@ -7,6 +7,7 @@ const user = useUserStore()
const timer = ref()
const qrCodeUrl = ref('')
const payStatus = ref('')
const orderId = ref('')
// const UA = navigator.userAgent
// const isMobile = /iphone/i.test(UA) || (/android/i.test(UA) && /mobile/i.test(UA))
// const isWechat = /micromessenger/i.test(UA)
......@@ -47,12 +48,15 @@ onMounted(() => {
}, 2000)
})
})
const handleGetOrderList = (id: any) => {
getOrderList({ order_detail_id: id }).then(res => {
payStatus.value = res.data[0].order_status
orderId.value = res.data[0].order_id
if (payStatus.value === '4') {
const params = {
orderId: res.data[0].pay_order_id,
orderId: res.data[0].order_id,
payPrice: res.data[0].payment_money,
status: 'success',
payStatus: res.data[0].order_status
}
......@@ -69,7 +73,7 @@ const handleGetOrderList = (id: any) => {
<div class="main_order">
<div class="order_id">
<div class="id_tit">商品订单：</div>
<div class="id_num">11111</div>
<div class="id_num">{{ orderId }}</div>
</div>
<div class="order_price">
<div class="price_tit">支付金额：</div>
......
src/modules/pay/components/PaySucess.vue
浏览文件 @ 5f2df40d
<script setup lang="ts">
const router = useRouter()
const props = defineProps({
orderId: {
type: String
payInfo: {
type: Object
},
shopItem: {
type: Object
},
payStatus: {
type: String
}
})
const handleStudy = () => {
......@@ -18,7 +15,7 @@ const handlePrev = () => {
router.push({
path: `/shop/detail/${props.shopItem?.id}`,
query: {
payStatus: props.payStatus
payStatus: props.payInfo?.payStatus
}
})
}
......@@ -34,11 +31,11 @@ const handlePrev = () => {
<div class="con_info">
<div class="info_order">
<div class="order_tit">商品订单：</div>
<div class="order_id">{{ orderId }}</div>
<div class="order_id">{{ payInfo?.orderId }}</div>
</div>
<div class="info_price">
<div class="price_tit">支付金额：</div>
<div class="price_id">¥{{ shopItem?.price }}</div>
<div class="price_id">¥{{ payInfo?.payPrice }}</div>
</div>
<div class="info_tips">若有疑问请与客服联系，我们将尽快为您提供服务</div>
<div class="info_btn">
......
src/modules/pay/index.ts
浏览文件 @ 5f2df40d
......@@ -3,8 +3,8 @@ import AppLayout from '@/components/layout/Index.vue'
export const routes: Array<RouteRecordRaw> = [
{
path: '/pay',
path: '/shop/pay',
component: AppLayout,
children: [{ path: '/pay/:id', component: () => import('./views/Index.vue'), props: true }]
children: [{ path: '/shop/pay/:id', component: () => import('./views/Index.vue'), props: true }]
}
]
src/modules/pay/views/Index.vue
浏览文件 @ 5f2df40d
......@@ -6,16 +6,15 @@ import { useShopStore } from '@/stores/shop'
const { shopItem } = useShopStore()
const status = ref('confirm') // confirm | order | success
const payMethod = ref(0)
const payStatus = ref('')
const orderId = ref('')
const payInfo = ref({})
// const orderId = ref('')
const handleSuccess = (data: any) => {
payMethod.value = data.payMode
status.value = data.status
}
const handleOrder = (data: any) => {
orderId.value = data.orderId
payInfo.value = data
status.value = data.status
payStatus.value = data.payStatus
}
</script>
......@@ -23,7 +22,7 @@ const handleOrder = (data: any) => {
<div class="pay_main">
<Confirm :shopItem="shopItem" @success="handleSuccess" v-if="status === 'confirm'" />
<Order :shopItem="shopItem" :payMethod="payMethod" @update="handleOrder" v-if="status === 'order'" />
<PaySucess :shopItem="shopItem" :orderId="orderId" :payStatus="payStatus" v-if="status === 'success'" />
<PaySucess :shopItem="shopItem" :payInfo="payInfo" v-if="status === 'success'" />
</div>
</template>
......
src/modules/shop/components/CourseListItem.vue
浏览文件 @ 5f2df40d
......@@ -24,7 +24,7 @@ const handleBuy = (courseItem: any) => {
if (courseItem.type === '课程包') {
buyDialogVisible.value = true
} else {
router.push(`/pay/${courseItem.id}`)
router.push(`/shop/pay/${courseItem.id}`)
}
}
}
......
src/modules/shop/views/View.vue
浏览文件 @ 5f2df40d
......@@ -7,33 +7,32 @@ import ShareDialog from '../components/ShareDialog.vue'
import ContactDialog from '../components/ContactDialog.vue'
import { useShopStore } from '@/stores/shop'
const { shopItem, shopRelatedList, list, shopRelatedListOther } = useShopStore()
const shopStore = useShopStore()
const router = useRouter()
const route = useRoute()
console.log(shopItem, '------', shopRelatedList, '---111', shopRelatedListOther)
const courseItem: any = ref([]) // 课程所属课程包
courseItem.value = list.filter((item: any) => item.type === '课程包' && item.child_ids.includes(shopItem?.id))
courseItem.value = shopStore.shopList.filter(
(item: any) => item.type === '课程包' && item.child_ids.includes(shopStore.shopItem?.id)
)
const recommendCourse = computed(() => {
if (shopItem?.type === '课程包') {
if (shopStore.shopItem?.type === '课程包') {
// 课程包推荐课程
return shopRelatedList
return shopStore.shopRelatedList
} else {
// 单一课程推荐的课程
return shopRelatedListOther
return shopStore.shopRelatedListOther
}
})
const buyDialogVisible = ref(false)
const shareDialogVisible = ref(false)
const handleBuyCourse = () => {
{
if (route.query.payStatus === '4' && shopItem?.isBuy === true) {
window.open('https://paa-learning.ezijing.com')
if (route.query.payStatus === '4' || shopStore.shopItem?.isBuy === true) {
window.open('https://paa-learning.ezijing.com')
} else {
if (shopStore.shopItem?.type === '课程包') {
buyDialogVisible.value = true
} else {
if (shopItem?.type === '课程包') {
buyDialogVisible.value = true
} else {
router.push(`/pay/${shopItem?.id}`)
}
router.push(`/shop/pay/${shopStore.shopItem?.id}`)
}
}
}
......@@ -52,11 +51,11 @@ const handleShare = () => {
src="https://img1.baidu.com/it/u=3009731526,373851691&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
/>
<div class="con_info">
<div class="info_tit">{{ shopItem?.title }}</div>
<div class="info_indentify">{{ shopItem?.course_card }}</div>
<div class="info_tit">{{ shopStore.shopItem?.title }}</div>
<div class="info_indentify">{{ shopStore.shopItem?.course_card }}</div>
<div class="info_tips">
<div class="tips_card">{{ shopItem?.course_chapter }}</div>
<div class="tips_card">{{ shopItem?.course_total_hour }}</div>
<div class="tips_card">{{ shopStore.shopItem?.course_chapter }}</div>
<div class="tips_card">{{ shopStore.shopItem?.course_total_hour }}</div>
</div>
</div>
<div class="con_share">
......@@ -69,46 +68,46 @@ const handleShare = () => {
</div>
<div class="detail_buy">
<div class="buy_left">
<div class="left_price" v-if="route.query.payStatus !== '4'">
<div class="left_status" v-if="route.query.payStatus === '4' || shopStore.shopItem?.isBuy === true">已购买</div>
<div class="left_price" v-else>
<div class="price_icon">¥</div>
<div class="price_num">{{ shopItem?.price }}</div>
<div class="price_num">{{ shopStore.shopItem?.price }}</div>
</div>
<div class="left_status" v-else>已购买</div>
<div class="left_tip tip1">支付安全</div>
<div class="left_tip tip2">课程回放</div>
</div>
<div class="buy_right" @click="handleBuyCourse">
{{ route.query.payStatus === '4' || shopItem?.isBuy === true ? '立即学习' : '立即购买' }}
{{ route.query.payStatus === '4' || shopStore.shopItem?.isBuy === true ? '立即学习' : '立即购买' }}
</div>
</div>
<div class="detail_con">
<div class="con_left">
<div>
<IncludeCourseCard v-if="shopItem?.type !== '课程包'" :courseItem="courseItem" />
<IncludeCourseCard v-if="shopStore.shopItem?.type !== '课程包'" :courseItem="courseItem" />
</div>
<div>
<CourseIntroduceCard :shopItem="shopItem" />
<CourseIntroduceCard :shopItem="shopStore.shopItem" />
</div>
</div>
<div class="con_right">
<TeacherCard :lecturerList="shopItem?.lecturer_list" />
<TeacherCard :lecturerList="shopStore.shopItem?.lecturer_list" />
<RecommendCourse :shopRelatedList="recommendCourse" />
</div>
</div>
<div class="detail_footer">
<div class="footer_left">
<div class="left_tit">全部课程价格</div>
<div class="left_desc">根据课程价格累积计算</div>
</div>
<div class="footer_price" v-if="route.query.payStatus !== '4'">
<div class="price_icon">¥</div>
<div class="price_price">{{ shopItem?.price }}</div>
</div>
<div class="left_status" v-else>已购买</div>
<div class="left_status" v-if="route.query.payStatus === '4' || shopStore.shopItem?.isBuy === true">已购买</div>
<template v-else>
<div class="footer_left">
<div class="left_tit">全部课程价格</div>
<div class="left_desc">根据课程价格累积计算</div>
</div>
<div class="footer_price">
<div class="price_icon">¥</div>
<div class="price_price">{{ shopStore.shopItem?.price }}</div>
</div>
</template>
<div class="footer_btn" @click="handleBuyCourse">
{{ route.query.payStatus === '4' || shopItem?.isBuy === true ? '立即学习' : '立即购买' }}
{{ route.query.payStatus === '4' || shopStore.shopItem?.isBuy === true ? '立即学习' : '立即购买' }}
</div>
</div>
<ShareDialog v-model:shareDialogVisible="shareDialogVisible" />
......@@ -271,8 +270,15 @@ const handleShare = () => {
margin: 30px auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 46px 0 60px;
box-sizing: border-box;
.left_status {
font-size: 24px;
font-weight: normal;
line-height: 34px;
color: #666666;
}
.footer_left {
.left_tit {
font-size: 16px;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论