Skip to content

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

项目优化

上级 b3849abf
显示空白字符变更
内嵌 并排
正在显示 包含 283 行增加 和 136 行删除
data/src/goods/1.js
浏览文件 @ c1a14627
......@@ -26,7 +26,10 @@ export default [
class_id: '7017001355222974464',
total_price_desc: '课程费用4300元/人，考试费/认证费/教材费合计680元/人',
sku_id: '7014129405609902080',
spu_id: '7014129404863315968'
spu_id: '7014129404863315968',
is_free: false,
is_new: true,
is_test: false
},
{
category: 'PAAP（Ⅰ）',
......@@ -85,7 +88,10 @@ export default [
class_id: '7017001355222974464',
total_price_desc: '',
sku_id: '7018148152972673024',
spu_id: '7018148152758763520'
spu_id: '7018148152758763520',
is_free: false,
is_new: true,
is_test: false
},
{
category: 'PAAP（Ⅰ）',
......@@ -130,7 +136,10 @@ export default [
class_id: '7017001355222974464',
total_price_desc: '',
sku_id: '7018148297881681920',
spu_id: '7018148297659383808'
spu_id: '7018148297659383808',
is_free: false,
is_new: true,
is_test: false
},
{
category: 'PAAP（Ⅰ）',
......@@ -175,7 +184,10 @@ export default [
class_id: '7017001355222974464',
total_price_desc: '',
sku_id: '7018148355993763840',
spu_id: '7018148355750494208'
spu_id: '7018148355750494208',
is_free: false,
is_new: true,
is_test: false
},
{
category: 'PAAP（Ⅰ）',
......@@ -220,7 +232,10 @@ export default [
class_id: '7017001355222974464',
total_price_desc: '',
sku_id: '7018148401996890112',
spu_id: '7018148401443241984'
spu_id: '7018148401443241984',
is_free: false,
is_new: true,
is_test: false
},
{
category: 'PAAP（Ⅰ）',
......@@ -265,7 +280,10 @@ export default [
class_id: '7017001355222974464',
total_price_desc: '',
sku_id: '7018148446439735296',
spu_id: '7018148446183882752'
spu_id: '7018148446183882752',
is_free: false,
is_new: true,
is_test: false
},
{
category: 'PAAP（Ⅰ）',
......@@ -310,7 +328,10 @@ export default [
class_id: '7017001355222974464',
total_price_desc: '',
sku_id: '7018148498998558720',
spu_id: '7018148498784649216'
spu_id: '7018148498784649216',
is_free: false,
is_new: true,
is_test: false
},
{
category: 'PAAP（Ⅰ）',
......@@ -355,7 +376,10 @@ export default [
class_id: '7017001355222974464',
total_price_desc: '',
sku_id: '7018148559375564800',
spu_id: '7018148559153266688'
spu_id: '7018148559153266688',
is_free: false,
is_new: false,
is_test: false
},
{
category: 'PAAP（Ⅰ）',
......@@ -400,6 +424,9 @@ export default [
class_id: '7017001355222974464',
total_price_desc: '',
sku_id: '7018148600190337024',
spu_id: '7018148600018370560'
spu_id: '7018148600018370560',
is_free: false,
is_new: true,
is_test: false
}
]
data/src/goods/2.js
浏览文件 @ c1a14627
......@@ -26,7 +26,10 @@ export default [
class_id: '7017001355222974464',
total_price_desc: '课程费用7000元/人，考试费/认证费/教材费合计680元/人',
sku_id: '7014130347952570368',
spu_id: '7014130347390533632'
spu_id: '7014130347390533632',
is_free: false,
is_new: true,
is_test: false
},
{
category: 'PAAP（Ⅱ）',
......@@ -71,7 +74,10 @@ export default [
class_id: '7017001355222974464',
total_price_desc: '',
sku_id: '7018152688009347072',
spu_id: '7018152687816409088'
spu_id: '7018152687816409088',
is_free: false,
is_new: true,
is_test: false
},
{
category: 'PAAP（Ⅱ）',
......@@ -116,7 +122,10 @@ export default [
class_id: '7017001355222974464',
total_price_desc: '',
sku_id: '7018152880926359552',
spu_id: '7018152880771170304'
spu_id: '7018152880771170304',
is_free: false,
is_new: true,
is_test: false
},
{
category: 'PAAP（Ⅱ）',
......@@ -161,7 +170,10 @@ export default [
class_id: '7017001355222974464',
total_price_desc: '',
sku_id: '7018152942817509376',
spu_id: '7018152942582628352'
spu_id: '7018152942582628352',
is_free: false,
is_new: true,
is_test: false
},
{
category: 'PAAP（Ⅱ）',
......@@ -206,7 +218,10 @@ export default [
class_id: '7017001355222974464',
total_price_desc: '',
sku_id: '7018153065505095680',
spu_id: '7018153065345712128'
spu_id: '7018153065345712128',
is_free: false,
is_new: true,
is_test: false
},
{
category: 'PAAP（Ⅱ）',
......@@ -251,7 +266,10 @@ export default [
class_id: '7017001355222974464',
total_price_desc: '',
sku_id: '7018153097708961792',
spu_id: '7018153097490857984'
spu_id: '7018153097490857984',
is_free: false,
is_new: true,
is_test: false
},
{
category: 'PAAP（Ⅱ）',
......@@ -296,7 +314,10 @@ export default [
class_id: '7017001355222974464',
total_price_desc: '',
sku_id: '7018153138490179584',
spu_id: '7018153138276270080'
spu_id: '7018153138276270080',
is_free: false,
is_new: false,
is_test: false
},
{
category: 'PAAP（Ⅱ）',
......@@ -341,7 +362,10 @@ export default [
class_id: '7017001355222974464',
total_price_desc: '',
sku_id: '7018153186531737600',
spu_id: '7018153185999060992'
spu_id: '7018153185999060992',
is_free: false,
is_new: false,
is_test: false
},
{
category: 'PAAP（Ⅱ）',
......@@ -386,6 +410,9 @@ export default [
class_id: '7017001355222974464',
total_price_desc: '',
sku_id: '7018153236649476096',
spu_id: '7018153236393623552'
spu_id: '7018153236393623552',
is_free: false,
is_new: false,
is_test: false
}
]
data/src/goods/3.js
浏览文件 @ c1a14627
......@@ -26,7 +26,10 @@ export default [
class_id: '7017001355222974464',
total_price_desc: '课程费用12000元/人，考试费/认证费/教材费合计980元/人',
sku_id: '7014130543629434880',
spu_id: '7014130542861877248'
spu_id: '7014130542861877248',
is_free: false,
is_new: true,
is_test: false
},
{
category: 'PAAM',
......@@ -71,7 +74,10 @@ export default [
class_id: '7017001355222974464',
total_price_desc: '',
sku_id: '7018154999255400448',
spu_id: '7018154999087628288'
spu_id: '7018154999087628288',
is_free: false,
is_new: true,
is_test: false
},
{
category: 'PAAM',
......@@ -116,7 +122,10 @@ export default [
class_id: '7017001355222974464',
total_price_desc: '',
sku_id: '7018155082088710144',
spu_id: '7018155081837051904'
spu_id: '7018155081837051904',
is_free: false,
is_new: true,
is_test: false
},
{
category: 'PAAM',
......@@ -161,7 +170,10 @@ export default [
class_id: '7017001355222974464',
total_price_desc: '',
sku_id: '7018155124648312832',
spu_id: '7018155124409237504'
spu_id: '7018155124409237504',
is_free: false,
is_new: true,
is_test: false
},
{
category: 'PAAM',
......@@ -206,7 +218,10 @@ export default [
class_id: '7017001355222974464',
total_price_desc: '',
sku_id: '7018155185348280320',
spu_id: '7018155185100816384'
spu_id: '7018155185100816384',
is_free: false,
is_new: true,
is_test: false
},
{
category: 'PAAM',
......@@ -251,7 +266,10 @@ export default [
class_id: '7017001355222974464',
total_price_desc: '',
sku_id: '7018155221046001664',
spu_id: '7018155220798537728'
spu_id: '7018155220798537728',
is_free: false,
is_new: true,
is_test: false
},
{
category: 'PAAM',
......@@ -296,7 +314,10 @@ export default [
class_id: '7017001355222974464',
total_price_desc: '',
sku_id: '7018155258798931968',
spu_id: '7018155258513719296'
spu_id: '7018155258513719296',
is_free: false,
is_new: true,
is_test: false
},
{
category: 'PAAM',
......@@ -341,7 +362,10 @@ export default [
class_id: '7017001355222974464',
total_price_desc: '',
sku_id: '7018155294282743808',
spu_id: '7018155294085611520'
spu_id: '7018155294085611520',
is_free: false,
is_new: false,
is_test: false
},
{
category: 'PAAM',
......@@ -386,7 +410,10 @@ export default [
class_id: '7017001355222974464',
total_price_desc: '',
sku_id: '7018155330718662656',
spu_id: '7018155330425061376'
spu_id: '7018155330425061376',
is_free: false,
is_new: false,
is_test: false
},
{
category: 'PAAM',
......@@ -431,7 +458,10 @@ export default [
class_id: '7017001355222974464',
total_price_desc: '',
sku_id: '7018155379125125120',
spu_id: '7018155378894438400'
spu_id: '7018155378894438400',
is_free: false,
is_new: false,
is_test: false
},
{
category: 'PAAM',
......@@ -476,7 +506,10 @@ export default [
class_id: '7017001355222974464',
total_price_desc: '',
sku_id: '7018155430316605440',
spu_id: '7018155430069141504'
spu_id: '7018155430069141504',
is_free: false,
is_new: false,
is_test: false
},
{
category: 'PAAM',
......@@ -521,6 +554,9 @@ export default [
class_id: '7017001355222974464',
total_price_desc: '',
sku_id: '7018155468174393344',
spu_id: '7018155467947900928'
spu_id: '7018155467947900928',
is_free: false,
is_new: false,
is_test: false
}
]
src/modules/home/components/Course.vue
浏览文件 @ c1a14627
......@@ -49,7 +49,7 @@ watchEffect(() => {
const courseIndex = $ref(0)
const handleDetail = (id: any) => {
router.push(`/shop/detail/${id}`)
router.push(`/shop/?id=${id}`)
}
const handleBuy = (item: any) => {
if (item.isBuy === true) {
......@@ -177,7 +177,6 @@ const handleBuy = (item: any) => {
</h2>
<img :src="item.imgH5" class="img1" />
<div class="btn-box">
{{ item.isBuy }}
<div class="btn1" @click="handleDetail(item.id)">查看详情</div>
<div class="btn2" @click="handleBuy(item)">
{{ item.isBuy === true ? '联系我们' : '立即购买' }}
......
src/modules/pay/views/Order.vue
浏览文件 @ c1a14627
......@@ -5,7 +5,7 @@ import { getOrderList } from '../api'
import { useDevice } from '@/composables/useDevice'
import { useShopStore } from '@/stores/shop'
import { useUserStore } from '@/stores/user'
import ContactDialog from '../../shop/components/ContactDialog.vue'
interface Props {
id: string
}
......@@ -17,6 +17,8 @@ const { mobile } = useDevice()
const router = useRouter()
const route = useRoute()
const buyDialogVisible = ref(false)
const orderId = useStorage('order_detail_id', route.query.order_detail_id)
const order = ref<Order>()
async function getOrder() {
......@@ -44,7 +46,11 @@ const start_time = getDateTime(0)
const end_time = getDateTime(90)
const handleStudy = () => {
if (shopItem?.is_new === true) {
buyDialogVisible.value = true
} else {
window.open('https://fi-learning.ezijing.com')
}
}
const handlePrev = () => {
router.replace({ path: `/shop/detail/${shopItem?.id}` })
......@@ -87,7 +93,8 @@ const handlePrev = () => {
<div class="course_con">
<img
src="https://img1.baidu.com/it/u=3009731526,373851691&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
@click="handlePrev" />
@click="handlePrev"
/>
<div class="course_dec">
<div class="info_title">{{ shopItem?.title }}</div>
<div class="info_date">有效期：{{ start_time }} 至 {{ end_time }}</div>
......@@ -106,6 +113,7 @@ const handlePrev = () => {
<div class="study_con" @click="handleStudy">开始学习</div>
</div>
</div>
<ContactDialog v-model:buyDialogVisible="buyDialogVisible" />
</div>
</template>
......
src/modules/shop/components/ContactDialog.vue
浏览文件 @ c1a14627
......@@ -82,6 +82,7 @@ const handleCancel = () => {
.buy_alert {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
.alert_con {
text-align: center;
......
src/modules/shop/components/CourseCatalogH5.vue
浏览文件 @ c1a14627
......@@ -21,7 +21,7 @@ const handleDetail = (item: any) => {
<div class="info_line"></div>
<div class="info_con1" v-if="shopItem?.type === '课程包'">
<div class="course_list" v-for="(item, index) in shopItem?.course_list" :key="index" @click="handleDetail(item)">
<img :src="item.image_url" />
<img :src="item.image_url" alt="" />
<div class="list_info">
<div class="tit">{{ item.title }}</div>
<div class="hour">{{ item.course_hour }}</div>
......
src/modules/shop/components/CourseCatalogPC.vue
浏览文件 @ c1a14627
......@@ -21,7 +21,7 @@ const handleDetail = (item: any) => {
<div class="info_line"></div>
<div class="info_con1" v-if="shopItem?.type === '课程包'">
<div class="course_list" v-for="(item, index) in shopItem?.course_list" :key="index" @click="handleDetail(item)">
<img :src="item.image_url" />
<img :src="item.image_url" alt="" />
<div class="list_info">
<div class="tit">{{ item.title }}</div>
<div class="hour">{{ item.course_hour }}</div>
......
src/modules/shop/components/CourseFooter.vue
浏览文件 @ c1a14627
......@@ -18,14 +18,17 @@ const buyDialogVisible = ref(false)
const handleBuyCourse = () => {
if (user.isLogin) {
if (props.payStatus === '4' || props.shopItem?.isBuy === true) {
// window.open('https://fi-learning.ezijing.com')
if (props.shopItem?.category === 'system_course') {
buyDialogVisible.value = true
} else {
window.open('https://fi-learning.ezijing.com')
}
} else {
if (props.shopItem?.category === 'free_course') {
buyDialogVisible.value = true
} else {
// if (props.shopItem?.type === '课程包') {
// buyDialogVisible.value = true
// } else {
router.push(`/shop/pay/${props.shopItem?.id}`)
// }
}
}
} else {
window.location.href = `${import.meta.env.VITE_LOGIN_URL}?rd=${encodeURIComponent(location.href)}`
......@@ -46,7 +49,7 @@ const handleBuyCourse = () => {
</div>
</template>
<div class="footer_btn" @click="handleBuyCourse">
{{ payStatus === '4' || shopItem?.isBuy === true ? '联系我们' : '立即购买' }}
{{ payStatus === '4' || shopItem?.isBuy === true || shopItem?.is_free === true ? '立即学习' : '立即购买' }}
</div>
</div>
<div class="detail_footer" v-else>
......@@ -55,27 +58,22 @@ const handleBuyCourse = () => {
<div class="footer_left" v-if="shopItem?.type === '课程包'">
<div class="left_tit">
总学费 <span class="tit_price">¥{{ shopItem?.price }}</span>
<!-- <div class="footer_price">
<div class="price_icon">¥</div>
<div class="price_price">{{ shopItem?.price }}</div>
</div> -->
</div>
<div class="left_desc">{{ shopItem?.total_price_desc }}</div>
</div>
<div class="footer_left" v-else>
<div class="left_tit">课程价格</div>
<div class="left_tit1" v-if="shopItem?.is_free === true">免费</div>
<div class="left_tit" v-else>
课程价格
<span class="tit_price">¥{{ shopItem?.price }}</span>
</div>
</div>
</template>
<div class="footer_btn" @click="handleBuyCourse" v-if="payStatus === '4' || shopItem?.isBuy === true">
<div class="btn_buy">联系我们</div>
<div class="footer_btn" @click="handleBuyCourse">
<div class="btn_buy">
{{ payStatus === '4' || shopItem?.isBuy === true || shopItem?.is_free === true ? '立即学习' : '立即购买' }}
</div>
<div class="footer_btn" @click="handleBuyCourse" v-else>
<!-- <div class="footer_price">
<div class="price_icon">¥</div>
<div class="price_price">{{ shopItem?.price }}</div>
</div> -->
<div class="btn_buy">立即购买</div>
</div>
</div>
<ContactDialog v-model:buyDialogVisible="buyDialogVisible" />
......@@ -165,9 +163,15 @@ const handleBuyCourse = () => {
}
}
.footer_left {
.left_tit1 {
color: #aa1941;
font-size: 0.36rem;
font-weight: bold;
}
.left_tit {
font-size: 0.24rem;
color: #333333;
font-weight: 500;
.tit_price {
color: #aa1941;
font-size: 0.36rem;
......
src/modules/shop/components/CourseFor.vue
浏览文件 @ c1a14627
......@@ -6,7 +6,7 @@ defineProps({
})
</script>
<template>
<div class="course_info">
<div class="course_info">
<div class="course_info course_info1">
<div class="info_tit">适用人群</div>
<div class="info_line"></div>
......@@ -15,12 +15,9 @@ defineProps({
</div>
</template>
<style lang="scss" scoped>
.is-pc{
.course_info {
.is-pc {
.course_info {
margin-top: 40px;
.info_tit {
......@@ -44,27 +41,26 @@ defineProps({
line-height: 32px;
color: #666666;
}
}
}
}
.is-h5{
.course_info{
.info_tit{
.is-h5 {
.course_info {
.info_tit {
font-size: 0.28rem;
font-weight: 500;
color: #333333;
}
.info_line{
.info_line {
display: none;
}
.info_con{
padding:0.2rem;
background: #F4F8FB;
.info_con {
padding: 0.2rem;
background: #f4f8fb;
font-size: 0.24rem;
font-weight: 400;
line-height: 0.4rem;
color: #666666;
margin-top:0.2rem;
margin-top: 0.2rem;
border-radius: 0.16rem;
}
}
......
src/modules/shop/components/CourseList.vue
浏览文件 @ c1a14627
......@@ -12,9 +12,7 @@ const page = reactive({ size: 10, currentPage: 1 })
// 筛选之后的数据
const courseFilterList = $computed(() => {
return props.courseList.filter(
(item: any) => item.category === props.type || props.type === ''
)
return props.courseList.filter((item: any) => item.category === props.type || props.type === '')
})
// 当前页的数据
......@@ -23,8 +21,7 @@ const currentCourseList = $computed<any[]>(() => {
const start = (page.currentPage - 1) * page.size
// 结束位置 = 当前页 x 每页的大小
const end = page.currentPage * page.size
const pageList = courseFilterList.slice(start, end)
return pageList
return courseFilterList.slice(start, end)
})
const paginationLayout = $computed(() => {
......@@ -34,11 +31,7 @@ const paginationLayout = $computed(() => {
<template>
<div class="course_list">
<CourseListItem
:courseItem="item"
v-for="(item, index) in currentCourseList"
:key="index"
></CourseListItem>
<CourseListItem :courseItem="item" v-for="(item, index) in currentCourseList" :key="index"></CourseListItem>
</div>
<div class="pagination" v-if="courseFilterList.length > page.size">
<el-pagination
......
src/modules/shop/components/CourseListItem.vue
浏览文件 @ c1a14627
......@@ -2,7 +2,6 @@
import ContactDialog from '../components/ContactDialog.vue'
import { useDevice } from '@/composables/useDevice'
import { useUserStore } from '@/stores/user'
const { mobile } = useDevice()
const user = useUserStore()
......@@ -23,14 +22,17 @@ const handleDatail = (item: any) => {
const handleBuy = (courseItem: any) => {
if (user.isLogin) {
if (courseItem?.isBuy === true) {
// window.open('https://fi-learning.ezijing.com')
if (courseItem?.is_new === true) {
buyDialogVisible.value = true
} else {
window.open('https://fi-learning.ezijing.com')
}
} else {
if (courseItem?.is_free === true) {
buyDialogVisible.value = true
} else {
// if (courseItem.type === '课程包') {
// buyDialogVisible.value = true
// } else {
router.push(`/shop/pay/${courseItem.id}`)
// }
}
}
} else {
window.location.href = `${import.meta.env.VITE_LOGIN_URL}?rd=${encodeURIComponent(location.href)}`
......@@ -59,14 +61,17 @@ const handleBuy = (courseItem: any) => {
</div>
</div>
<div class="right_bottom">
<div class="bottom_price" v-if="!mobile">
<div class="bottom_price" v-if="!mobile && courseItem?.price !== 0">
<div class="price_icon">¥</div>
<div class="price_num">{{ courseItem?.price }}</div>
</div>
<div class="bottom_price" v-if="!mobile && courseItem?.price === 0">
<div class="price_icon">免费</div>
</div>
<div class="bottom_btn">
<div class="btn_detail" v-if="!mobile" @click="handleDatail(courseItem?.id)">查看详情</div>
<div class="btn_buy" @click="handleBuy(courseItem)">
{{ courseItem?.isBuy === true ? '联系我们' : '立即购买' }}
{{ courseItem?.isBuy === true || courseItem?.category === 'free_course' ? '立即学习' : '立即购买' }}
</div>
</div>
</div>
......@@ -112,6 +117,7 @@ const handleBuy = (courseItem: any) => {
position: absolute;
top: 10px;
right: 10px;
text-align: center;
}
}
.con_right {
......@@ -125,7 +131,7 @@ const handleBuy = (courseItem: any) => {
.use_icon {
width: 67px;
height: 21px;
background: #f4eadb;
background: rgba(244, 234, 219, 0.39);
border-radius: 2px;
font-size: 14px;
font-weight: 400;
......@@ -191,6 +197,7 @@ const handleBuy = (courseItem: any) => {
line-height: 32px;
color: #e2971d;
cursor: pointer;
text-align: center;
}
.btn_buy {
width: 96px;
......@@ -203,6 +210,7 @@ const handleBuy = (courseItem: any) => {
color: #ffffff;
margin-left: 20px;
cursor: pointer;
text-align: center;
}
}
}
......@@ -242,6 +250,7 @@ const handleBuy = (courseItem: any) => {
position: absolute;
top: 10px;
right: 10px;
text-align: center;
}
}
.con_right {
......
src/modules/shop/components/DetailBanner.vue
浏览文件 @ c1a14627
......@@ -33,14 +33,17 @@ const shareTit = computed(() => {
const handleBuyCourse = () => {
if (user.isLogin) {
if (props.payStatus === '4' || props.shopItem?.isBuy === true) {
// window.open('https://fi-learning.ezijing.com')
if (props.shopItem?.is_new === true) {
buyDialogVisible.value = true
} else {
window.open('https://fi-learning.ezijing.com')
}
} else {
if (props.shopItem?.is_free === true) {
buyDialogVisible.value = true
} else {
// if (props.shopItem?.type === '课程包') {
// buyDialogVisible.value = true
// } else {
router.push(`/shop/pay/${props.shopItem?.id}`)
// }
}
}
} else {
window.location.href = `${import.meta.env.VITE_LOGIN_URL}?rd=${encodeURIComponent(location.href)}`
......@@ -100,6 +103,7 @@ const handleCopyLink = () => {
<div class="detail_banner">
<div class="banner_con">
<img class="con_img" :src="shopItem?.image_url" />
<template v-if="!mobile">
<div class="con_info">
<div class="info_tit">{{ shopItem?.title }}</div>
......@@ -121,17 +125,22 @@ const handleCopyLink = () => {
<div class="detail_buy">
<div class="buy_left">
<div class="left_status" v-if="payStatus === '4' || shopItem?.isBuy === true">已购买</div>
<div class="left_price" v-else>
<template v-else>
<div class="left_price" v-if="shopItem?.price !== 0">
<div class="price_icon">¥</div>
<div class="price_num">{{ shopItem?.price }}</div>
</div>
<div class="left_price" v-else>
<div class="price_icon">免费</div>
</div>
</template>
<div class="left_tip">
<div class="tip1 tip">支付安全</div>
<div class="tip1 tip" v-if="shopItem?.price !== 0">支付安全</div>
<div class="tip2 tip">课程回放</div>
</div>
</div>
<div class="buy_right" @click="handleBuyCourse" v-if="!mobile">
{{ payStatus === '4' || shopItem?.isBuy === true ? '联系我们' : '立即购买' }}
{{ payStatus === '4' || shopItem?.isBuy === true || shopItem?.is_free === true ? '立即学习' : '立即购买' }}
</div>
</div>
<div class="detail_info" v-if="mobile">
......@@ -436,6 +445,7 @@ const handleCopyLink = () => {
margin-top: 0.2rem;
padding: 0.15rem 1.2rem;
display: flex;
justify-content: space-around;
align-items: center;
border-radius: 0.08rem;
......
src/modules/shop/components/IncludeCourseCard.vue
浏览文件 @ c1a14627
......@@ -127,8 +127,7 @@ defineProps({
img {
width: 1.6rem;
height: 0.9rem;
border-radius: 0.06rem;
object-fit: cover;
border-radius: 0.05rem;
}
.course_info {
margin-left: 0.14rem;
......
src/modules/shop/components/RecommendCourse.vue
浏览文件 @ c1a14627
......@@ -182,7 +182,7 @@ const handleDetail = item => {
.img {
// width: 2.2rem;
height: 1.4rem;
border-radius: 6px;
border-radius: 0.06rem;
}
.item_right {
margin-left: 0.21rem;
......@@ -192,6 +192,8 @@ const handleDetail = item => {
font-size: 0.28rem;
font-weight: 500;
color: #333333;
// width: 3.69rem;
// white-space: wrap;
}
.right_price {
display: flex;
......
src/modules/shop/views/Index.vue
浏览文件 @ c1a14627
......@@ -2,16 +2,20 @@
import CourseList from '../components/CourseList.vue'
import { useShopStore } from '@/stores/shop'
import { useDevice } from '@/composables/useDevice'
const route = useRoute()
const { mobile } = useDevice()
const shopStore = useShopStore()
let activeName = $ref('0')
let activeNameH5 = $ref(0)
const handleTabClick = (tab: any) => {
if (tab.index === '4') {
window.open('https://prp.ezijing.com')
window.location.reload()
}
}
watchEffect(() => {
if (route.query.id) !mobile ? (activeName = route.query.id.toString()) : (activeNameH5 = Number(route.query.id))
})
</script>
<template>
......@@ -19,8 +23,8 @@ const handleTabClick = (tab: any) => {
<img src="https://webapp-pub.ezijing.com/project_online/paa/shop_banner.jpg" class="shop_banner" />
<div class="shop_con">
<div class="con_tab">
<el-tabs class="my-tabs" @tab-click="handleTabClick">
<el-tab-pane v-for="(item, index) in shopStore.filters.slice(0, 4)" :key="index" lazy>
<el-tabs class="my-tabs" @tab-click="handleTabClick" v-model="activeName">
<el-tab-pane v-for="(item, index) in shopStore.filters" :key="index" lazy>
<template #label>
{{ item.label }}
</template>
......@@ -33,8 +37,8 @@ const handleTabClick = (tab: any) => {
<div class="main_shop" v-else>
<img src="https://webapp-pub.ezijing.com/project_online/paa/shop_banner.jpg" class="shop_banner" />
<van-tabs>
<van-tab :title="item.label" v-for="(item, index) in shopStore.filters.slice(0, 4)" :key="index" lazy>
<van-tabs v-model:active="activeNameH5">
<van-tab :title="item.label" v-for="(item, index) in shopStore.filters" :key="index" lazy>
<CourseList :type="item.value" :courseList="shopStore.shopList" :key="index" />
</van-tab>
</van-tabs>
......
src/modules/shop/views/View.vue
浏览文件 @ c1a14627
......@@ -10,6 +10,7 @@ import RecommendCourse from '../components/RecommendCourse.vue'
import CourseFooter from '../components/CourseFooter.vue'
import { useShopStore } from '@/stores/shop'
import { useDevice } from '@/composables/useDevice'
const { mobile } = useDevice()
const shopStore = useShopStore()
const route = useRoute()
......@@ -18,15 +19,6 @@ const courseItem: any = ref([]) // 课程所属课程包
courseItem.value = shopStore.shopList.filter(
(item: any) => item.type === '课程包' && item.child_ids.includes(shopStore.shopItem?.id)
)
const recommendCourse = computed(() => {
if (shopStore.shopItem?.type === '课程包') {
// 课程包推荐课程
return shopStore.shopRelatedList
} else {
// 单一课程推荐的课程
return shopStore.shopRelatedListOther
}
})
</script>
<template>
......@@ -34,31 +26,58 @@ const recommendCourse = computed(() => {
<DetailBanner :shopItem="shopStore.shopItem" :payStatus="payStatus" />
<div class="detail_con">
<div class="con_left">
<div>
<IncludeCourseCard v-if="shopStore.shopItem?.type !== '课程包'" :courseItem="courseItem" />
<div class="left_course" v-if="shopStore.shopItem?.type === '课程包'">
<IncludeCourseCard
v-if="
shopStore.shopItem?.type === '课程' &&
shopStore.shopItem?.category !== 'system_course' &&
shopStore.shopItem?.category !== 'free_course'
"
:courseItem="courseItem"
/>
<div
class="left_course"
v-if="
shopStore.shopItem?.type === '课程包' ||
shopStore.shopItem?.category === 'system_course' ||
shopStore.shopItem?.category === 'free_course'
"
>
<CourseIntrouduce :shopItem="shopStore.shopItem" />
<CourseFor v-if="!mobile" :shopItem="shopStore.shopItem" />
<CourseCatalogPC :shopItem="shopStore.shopItem" />
</div>
<CourseFor :shopItem="shopStore.shopItem" />
<CourseCatalogPC v-if="shopStore.shopItem?.type === '课程包'" :shopItem="shopStore.shopItem" />
</div>
</div>
<div class="con_right">
<!-- <TeacherCard :lecturerList="shopStore.shopItem?.lecturer_list" /> -->
<RecommendCourse :shopRelatedList="recommendCourse" />
<RecommendCourse :shopRelatedList="shopStore.shopRelatedList" />
</div>
</div>
<CourseFooter :payStatus="payStatus" :shopItem="shopStore.shopItem" v-if="shopStore.shopItem?.type == '课程包'" />
</div>
<div class="course_detail" v-else>
<DetailBanner :shopItem="shopStore.shopItem" :payStatus="payStatus" />
<IncludeCourseCard v-if="shopStore.shopItem?.type !== '课程包'" :courseItem="courseItem" />
<div class="detail_con" v-if="shopStore.shopItem?.type == '课程包'">
<CourseIntrouduce :shopItem="shopStore.shopItem" />
<IncludeCourseCard
v-if="
shopStore.shopItem?.type === '课程' &&
shopStore.shopItem?.category !== 'system_course' &&
shopStore.shopItem?.category !== 'free_course'
"
:courseItem="courseItem"
/>
<div class="detail_con">
<CourseIntrouduce
:shopItem="shopStore.shopItem"
v-if="
shopStore.shopItem?.type === '课程包' ||
shopStore.shopItem?.category !== 'system_course' ||
shopStore.shopItem?.category !== 'free_course'
"
/>
<!-- <TeacherCard :lecturerList="shopStore.shopItem?.lecturer_list" /> -->
<CourseCatalogH5 :shopItem="shopStore.shopItem" />
<CourseCatalogH5 :shopItem="shopStore.shopItem" v-if="shopStore.shopItem?.type === '课程包'" />
</div>
<RecommendCourse :shopRelatedList="recommendCourse" />
<RecommendCourse :shopRelatedList="shopStore.shopRelatedList" />
<CourseFooter :payStatus="payStatus" :shopItem="shopStore.shopItem" />
</div>
</template>
......
src/stores/shop.ts
浏览文件 @ c1a14627
import { ITEM_RENDER_EVT } from 'element-plus/es/components/virtual-list/src/defaults'
import { defineStore } from 'pinia'
import { useUserStore } from './user'
interface ShopFilter {
label: string
value: string
children?: any
courseList: any
isActive?: boolean
}
type ShopListItem = Record<string, any>
......@@ -29,22 +32,32 @@ export const useShopStore = defineStore('shop', () => {
if (found) {
found.course_list =
found.child_ids && found.child_ids.length
? found.child_ids.map((id: string) => shopList.value.find(item => item.id === id))
: shopList.value.filter(item => item.child_ids?.includes(found.id))
? found.child_ids
.map((id: string) => shopList.value.find(item => item.id === id))
.filter((it: any) => !it.is_test)
: shopList.value.filter(item => item.child_ids?.includes(found.id)).filter(it => !it.is_test)
}
return found
})
// 相关推荐商品列表
const shopRelatedList = computed(() => {
return shopList.value.filter(item => item.category !== shopItem.value?.category && item.type === '课程包')
})
const shopRelatedListOther = computed(() => {
if (shopItem.value?.category === 'free_course') {
return shopList.value.filter(item => item.category === 'system_course' && !item.is_test)
} else if (shopItem.value?.type === '课程包') {
return shopList.value.filter(
(item: ShopListItem) => item.category === shopItem.value?.category && item.id !== shopItem.value?.id && item.type === '课程'
item => item.type === shopItem.value?.type && !item.is_test && item.id !== shopItem.value?.id
)
} else {
return shopList.value.filter(
item =>
item.type === shopItem.value?.type &&
!item.is_test &&
item.id !== shopItem.value?.id &&
item.category === shopItem.value?.category
)
}
})
return { filters, list, shopList, shopItem, shopRelatedList, shopRelatedListOther }
return { filters, list, shopList, shopItem, shopRelatedList }
})
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论