|
|
|
@ -1,181 +1,184 @@ |
|
|
|
<template> |
|
|
|
<template> |
|
|
|
<div v-if="modules.length" class="wrap"> |
|
|
|
<div class="wrap"> |
|
|
|
<el-carousel class="carousel fadeInUp" :interval="6000" height="354px" |
|
|
|
<template v-if="modules.length"> |
|
|
|
:arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'" |
|
|
|
<el-carousel class="carousel fadeInUp" :interval="6000" height="354px" |
|
|
|
:indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'"> |
|
|
|
:arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'" |
|
|
|
<template v-for="(item, i) in modules[0].list"> |
|
|
|
:indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'"> |
|
|
|
<el-carousel-item v-if="item.pic && item.isEnable" :key="i"> |
|
|
|
<template v-for="(item, i) in modules[0].list"> |
|
|
|
<div class="pic" :style="{ backgroundImage: 'url(' + item.pic + ')' }"></div> |
|
|
|
<el-carousel-item v-if="item.pic && item.isEnable" :key="i"> |
|
|
|
<div class="text-wrap"> |
|
|
|
<div class="pic" :style="{ backgroundImage: 'url(' + item.pic + ')' }"></div> |
|
|
|
<div v-if="!GTA && !i" class="qrcode-wrap"> |
|
|
|
<div class="text-wrap"> |
|
|
|
<img class="qrcode" src="https://occupationlab.com/images/mini-program.jpg" alt=""> |
|
|
|
<div v-if="!GTA && !i" class="qrcode-wrap"> |
|
|
|
<p class="text">扫小程序下单</p> |
|
|
|
<img class="qrcode" src="https://occupationlab.com/images/mini-program.jpg" alt=""> |
|
|
|
</div> |
|
|
|
<p class="text">扫小程序下单</p> |
|
|
|
<div class="texts"> |
|
|
|
</div> |
|
|
|
<h6>{{ item.title }}</h6> |
|
|
|
<div class="texts"> |
|
|
|
<p class="sub">{{ item.des }}</p> |
|
|
|
<h6>{{ item.title }}</h6> |
|
|
|
</div> |
|
|
|
<p class="sub">{{ item.des }}</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-carousel-item> |
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
</el-carousel> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="inner"> |
|
|
|
|
|
|
|
<ul class="intro"> |
|
|
|
|
|
|
|
<template v-for="(item, i) in modules[1].list"> |
|
|
|
|
|
|
|
<li v-if="item.isEnable" :key="i" |
|
|
|
|
|
|
|
:class="[{ 'cursor-pointer': isLink(item.link.linkName) }, 'fadeInDown' + i]" @click="openLink(item)"> |
|
|
|
|
|
|
|
<img :src="item.pic" alt=""> |
|
|
|
|
|
|
|
<div class="text"> |
|
|
|
|
|
|
|
<h6>{{ item.title }}</h6> |
|
|
|
|
|
|
|
<p class="desc">{{ item.des }}</p> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</li> |
|
|
|
</el-carousel-item> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
</ul> |
|
|
|
</el-carousel> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="inner-wrap"> |
|
|
|
|
|
|
|
<div class="inner"> |
|
|
|
<div class="inner"> |
|
|
|
<div class="type-wrap"> |
|
|
|
<ul class="intro"> |
|
|
|
<div class="tab-wrap"> |
|
|
|
<template v-for="(item, i) in modules[1].list"> |
|
|
|
<div> |
|
|
|
<li v-if="item.isEnable" :key="i" |
|
|
|
<img src="@/assets/images/hot.png" alt=""> |
|
|
|
:class="[{ 'cursor-pointer': isLink(item.link.linkName) }, 'fadeInDown' + i]" @click="openLink(item)"> |
|
|
|
<img class="m-l-5 m-r-10" src="@/assets/images/type.png" alt=""> |
|
|
|
<img :src="item.pic" alt=""> |
|
|
|
</div> |
|
|
|
<div class="text"> |
|
|
|
<div class="tab-con"> |
|
|
|
<h6>{{ item.title }}</h6> |
|
|
|
<ul class="tab"> |
|
|
|
<p class="desc">{{ item.des }}</p> |
|
|
|
<li v-for="(tab, i) in tabs" :key="i" :class="{ active: curTab === tab.id }" @click="tabChange(tab)">{{ |
|
|
|
|
|
|
|
tab.name }}</li> |
|
|
|
|
|
|
|
</ul> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="search"> |
|
|
|
|
|
|
|
<img class="icon" src="@/assets/images/search.png" alt=""> |
|
|
|
|
|
|
|
<input type="text" placeholder="请输入产品名称" v-model="form.productName"> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="filter"> |
|
|
|
|
|
|
|
<template v-if="curTab == 1"> |
|
|
|
|
|
|
|
<dl> |
|
|
|
|
|
|
|
<dt>学科类别</dt> |
|
|
|
|
|
|
|
<div class="vals"> |
|
|
|
|
|
|
|
<dd :class="{ active: categoryId === '' }" @click="categoryClick({ id: '' }, 1)">全部</dd> |
|
|
|
|
|
|
|
<dd :class="{ active: categoryId === 1 }" style="margin-right: 20px" |
|
|
|
|
|
|
|
@click="categoryClick({ id: 1 }, 1)">不限 |
|
|
|
|
|
|
|
</dd> |
|
|
|
|
|
|
|
<dd v-for="(item, i) in category" :key="i" :class="{ active: categoryId === item.id }" |
|
|
|
|
|
|
|
@click="categoryClick(item, 1)">{{ item.name }}</dd> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</dl> |
|
|
|
</li> |
|
|
|
<dl v-if="categoryId && categoryId !== 1"> |
|
|
|
</template> |
|
|
|
<dt>专业类</dt> |
|
|
|
</ul> |
|
|
|
<div class="vals"> |
|
|
|
</div> |
|
|
|
<dd :class="{ active: professionalCategoryId === '' }" @click="categoryClick({ id: '' }, 2)">全部</dd> |
|
|
|
|
|
|
|
<dd v-for="(item, i) in professionalClasses" :key="i" |
|
|
|
<div class="inner-wrap"> |
|
|
|
:class="{ active: professionalCategoryId === item.id }" @click="categoryClick(item, 2)">{{ item.name |
|
|
|
<div class="inner"> |
|
|
|
}} |
|
|
|
<div class="type-wrap"> |
|
|
|
</dd> |
|
|
|
<div class="tab-wrap"> |
|
|
|
|
|
|
|
<div> |
|
|
|
|
|
|
|
<img src="@/assets/images/hot.png" alt=""> |
|
|
|
|
|
|
|
<img class="m-l-5 m-r-10" src="@/assets/images/type.png" alt=""> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</dl> |
|
|
|
<div class="tab-con"> |
|
|
|
<dl v-if="professionalCategoryId && professionalCategoryId !== 1"> |
|
|
|
<ul class="tab"> |
|
|
|
<dt>专业</dt> |
|
|
|
<li v-for="(tab, i) in tabs" :key="i" :class="{ active: curTab === tab.id }" @click="tabChange(tab)"> |
|
|
|
<div class="vals"> |
|
|
|
{{ |
|
|
|
<dd :class="{ active: professionalId === '' }" @click="categoryClick({ id: '' }, 3)">全部</dd> |
|
|
|
tab.name }}</li> |
|
|
|
<dd v-for="(item, i) in professionals" :key="i" :class="{ active: professionalId === item.id }" |
|
|
|
</ul> |
|
|
|
@click="categoryClick(item, 3)">{{ item.name }}</dd> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</dl> |
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
<dl v-if="curTab == 3"> |
|
|
|
|
|
|
|
<dt>产品标签</dt> |
|
|
|
|
|
|
|
<div class="vals"> |
|
|
|
|
|
|
|
<dd :class="{ active: form.tagId === '' }" @click="filterChange('', 'tagId')">全部</dd> |
|
|
|
|
|
|
|
<dd v-for="(item, i) in labels" :key="i" :class="{ active: form.tagId === item.tagsId }" |
|
|
|
|
|
|
|
@click="filterChange(item.tagsId, 'tagId')">{{ item.tagsName }}</dd> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</dl> |
|
|
|
<div class="search"> |
|
|
|
<template v-if="curTab == 4"> |
|
|
|
<img class="icon" src="@/assets/images/search.png" alt=""> |
|
|
|
<dl> |
|
|
|
<input type="text" placeholder="请输入产品名称" v-model="form.productName"> |
|
|
|
<dt>方案分类</dt> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="filter"> |
|
|
|
|
|
|
|
<template v-if="curTab == 1"> |
|
|
|
|
|
|
|
<dl> |
|
|
|
|
|
|
|
<dt>学科类别</dt> |
|
|
|
|
|
|
|
<div class="vals"> |
|
|
|
|
|
|
|
<dd :class="{ active: categoryId === '' }" @click="categoryClick({ id: '' }, 1)">全部</dd> |
|
|
|
|
|
|
|
<dd :class="{ active: categoryId === 1 }" style="margin-right: 20px" |
|
|
|
|
|
|
|
@click="categoryClick({ id: 1 }, 1)">不限 |
|
|
|
|
|
|
|
</dd> |
|
|
|
|
|
|
|
<dd v-for="(item, i) in category" :key="i" :class="{ active: categoryId === item.id }" |
|
|
|
|
|
|
|
@click="categoryClick(item, 1)">{{ item.name }}</dd> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</dl> |
|
|
|
|
|
|
|
<dl v-if="categoryId && categoryId !== 1"> |
|
|
|
|
|
|
|
<dt>专业类</dt> |
|
|
|
|
|
|
|
<div class="vals"> |
|
|
|
|
|
|
|
<dd :class="{ active: professionalCategoryId === '' }" @click="categoryClick({ id: '' }, 2)">全部</dd> |
|
|
|
|
|
|
|
<dd v-for="(item, i) in professionalClasses" :key="i" |
|
|
|
|
|
|
|
:class="{ active: professionalCategoryId === item.id }" @click="categoryClick(item, 2)">{{ item.name |
|
|
|
|
|
|
|
}} |
|
|
|
|
|
|
|
</dd> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</dl> |
|
|
|
|
|
|
|
<dl v-if="professionalCategoryId && professionalCategoryId !== 1"> |
|
|
|
|
|
|
|
<dt>专业</dt> |
|
|
|
|
|
|
|
<div class="vals"> |
|
|
|
|
|
|
|
<dd :class="{ active: professionalId === '' }" @click="categoryClick({ id: '' }, 3)">全部</dd> |
|
|
|
|
|
|
|
<dd v-for="(item, i) in professionals" :key="i" :class="{ active: professionalId === item.id }" |
|
|
|
|
|
|
|
@click="categoryClick(item, 3)">{{ item.name }}</dd> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</dl> |
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
<dl v-if="curTab == 3"> |
|
|
|
|
|
|
|
<dt>产品标签</dt> |
|
|
|
<div class="vals"> |
|
|
|
<div class="vals"> |
|
|
|
<dd :class="{ active: form.productClassification === '' }" |
|
|
|
<dd :class="{ active: form.tagId === '' }" @click="filterChange('', 'tagId')">全部</dd> |
|
|
|
@click="filterChange('', 'productClassification')">全部</dd> |
|
|
|
<dd v-for="(item, i) in labels" :key="i" :class="{ active: form.tagId === item.tagsId }" |
|
|
|
<dd v-for="(item, i) in classifications" :key="i" |
|
|
|
@click="filterChange(item.tagsId, 'tagId')">{{ item.tagsName }}</dd> |
|
|
|
:class="{ active: form.productClassification === item.id }" |
|
|
|
|
|
|
|
@click="filterChange(item.id, 'productClassification')">{{ item.classificationName }}</dd> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</dl> |
|
|
|
</dl> |
|
|
|
|
|
|
|
<template v-if="curTab == 4"> |
|
|
|
|
|
|
|
<dl> |
|
|
|
|
|
|
|
<dt>方案分类</dt> |
|
|
|
|
|
|
|
<div class="vals"> |
|
|
|
|
|
|
|
<dd :class="{ active: form.productClassification === '' }" |
|
|
|
|
|
|
|
@click="filterChange('', 'productClassification')">全部</dd> |
|
|
|
|
|
|
|
<dd v-for="(item, i) in classifications" :key="i" |
|
|
|
|
|
|
|
:class="{ active: form.productClassification === item.id }" |
|
|
|
|
|
|
|
@click="filterChange(item.id, 'productClassification')">{{ item.classificationName }}</dd> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</dl> |
|
|
|
|
|
|
|
<dl> |
|
|
|
|
|
|
|
<dt>方案名称</dt> |
|
|
|
|
|
|
|
<div class="vals"> |
|
|
|
|
|
|
|
<dd :class="{ active: form.websiteMallId === '' }" @click="filterChange('', 'websiteMallId')">全部</dd> |
|
|
|
|
|
|
|
<dd v-for="(item, i) in schemes" :key="i" :class="{ active: form.websiteMallId === item.id }" |
|
|
|
|
|
|
|
@click="filterChange(item.id, 'websiteMallId')">{{ item.title }}</dd> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</dl> |
|
|
|
|
|
|
|
</template> |
|
|
|
<dl> |
|
|
|
<dl> |
|
|
|
<dt>方案名称</dt> |
|
|
|
<dt>产品类型</dt> |
|
|
|
<div class="vals"> |
|
|
|
<div class="vals"> |
|
|
|
<dd :class="{ active: form.websiteMallId === '' }" @click="filterChange('', 'websiteMallId')">全部</dd> |
|
|
|
<dd :class="{ active: form.productType === '' }" @click="filterChange('', 'productType')">全部</dd> |
|
|
|
<dd v-for="(item, i) in schemes" :key="i" :class="{ active: form.websiteMallId === item.id }" |
|
|
|
<dd v-for="(item, i) in types" :key="i" :class="{ active: form.productType === item.typeId }" |
|
|
|
@click="filterChange(item.id, 'websiteMallId')">{{ item.title }}</dd> |
|
|
|
@click="filterChange(item.typeId, 'productType')">{{ item.typeName }}</dd> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</dl> |
|
|
|
</dl> |
|
|
|
</template> |
|
|
|
</div> |
|
|
|
<dl> |
|
|
|
|
|
|
|
<dt>产品类型</dt> |
|
|
|
|
|
|
|
<div class="vals"> |
|
|
|
|
|
|
|
<dd :class="{ active: form.productType === '' }" @click="filterChange('', 'productType')">全部</dd> |
|
|
|
|
|
|
|
<dd v-for="(item, i) in types" :key="i" :class="{ active: form.productType === item.typeId }" |
|
|
|
|
|
|
|
@click="filterChange(item.typeId, 'productType')">{{ item.typeName }}</dd> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</dl> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="filter m-t-20"> |
|
|
|
<div class="filter m-t-20"> |
|
|
|
<dl> |
|
|
|
<dl> |
|
|
|
<dd v-for="(item, i) in sorts" :key="i" :class="{ active: form.sort === item.id }" |
|
|
|
<dd v-for="(item, i) in sorts" :key="i" :class="{ active: form.sort === item.id }" |
|
|
|
@click="filterChange(item.id, 'sort')">{{ item.name }}</dd> |
|
|
|
@click="filterChange(item.id, 'sort')">{{ item.name }}</dd> |
|
|
|
<dd :class="{ active: form.sort === 2 || form.sort === 5 }" @click="sort">发布时间</dd> |
|
|
|
<dd :class="{ active: form.sort === 2 || form.sort === 5 }" @click="sort">发布时间</dd> |
|
|
|
<span class="caret" @click="sort"> |
|
|
|
<span class="caret" @click="sort"> |
|
|
|
<i :class="['asc', { active: form.sort === 2 }]"></i> |
|
|
|
<i :class="['asc', { active: form.sort === 2 }]"></i> |
|
|
|
<i :class="['desc', { active: form.sort === 5 }]"></i> |
|
|
|
<i :class="['desc', { active: form.sort === 5 }]"></i> |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
</dl> |
|
|
|
</dl> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="courses"> |
|
|
|
<div class="courses"> |
|
|
|
<template v-if="list.length"> |
|
|
|
<template v-if="list.length"> |
|
|
|
<ul> |
|
|
|
<ul> |
|
|
|
<li v-for="(item, i) in list" :key="i" @click="toDetail(item.mallId)"> |
|
|
|
<li v-for="(item, i) in list" :key="i" @click="toDetail(item.mallId)"> |
|
|
|
<img :src="item.coverDrawing" alt="" /> |
|
|
|
<img :src="item.coverDrawing" alt="" /> |
|
|
|
<img v-if="item.logoOfOurSchool" class="my-school" src="@/assets/images/my-school.png" alt=""> |
|
|
|
<img v-if="item.logoOfOurSchool" class="my-school" src="@/assets/images/my-school.png" alt=""> |
|
|
|
<div class="texts"> |
|
|
|
<div class="texts"> |
|
|
|
<el-tooltip effect="dark" :visible-arrow="false" :content="item.productName" placement="bottom"> |
|
|
|
<el-tooltip effect="dark" :visible-arrow="false" :content="item.productName" placement="bottom"> |
|
|
|
<div class="title">{{ item.productName }}</div> |
|
|
|
<div class="title">{{ item.productName }}</div> |
|
|
|
</el-tooltip> |
|
|
|
|
|
|
|
<div class="desc" v-html="item.productIntroduction"></div> |
|
|
|
|
|
|
|
<div class="tags"> |
|
|
|
|
|
|
|
<el-tooltip v-if="item.tagsName" class="item" effect="dark" :visible-arrow="false" |
|
|
|
|
|
|
|
:content="item.tagsName" placement="bottom"> |
|
|
|
|
|
|
|
<div> |
|
|
|
|
|
|
|
<el-tag v-for="(tag, i) in item.tagsName.split(',')" :key="i" class="tag">{{ tag }}</el-tag> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</el-tooltip> |
|
|
|
</el-tooltip> |
|
|
|
|
|
|
|
<div class="desc" v-html="item.productIntroduction"></div> |
|
|
|
|
|
|
|
<div class="tags"> |
|
|
|
|
|
|
|
<el-tooltip v-if="item.tagsName" class="item" effect="dark" :visible-arrow="false" |
|
|
|
|
|
|
|
:content="item.tagsName" placement="bottom"> |
|
|
|
|
|
|
|
<div> |
|
|
|
|
|
|
|
<el-tag v-for="(tag, i) in item.tagsName.split(',')" :key="i" class="tag">{{ tag }}</el-tag> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</el-tooltip> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div :class="['metas']"> |
|
|
|
|
|
|
|
<el-tag v-if="item.selected" type="danger" effect="dark"> |
|
|
|
|
|
|
|
官方精选 |
|
|
|
|
|
|
|
</el-tag> |
|
|
|
|
|
|
|
<el-tag v-if="item.typeName" effect="dark"> |
|
|
|
|
|
|
|
{{ item.typeName }} |
|
|
|
|
|
|
|
</el-tag> |
|
|
|
|
|
|
|
<div v-if="item.isCourse" class="meta">{{ item.learningCount }}人学过</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div :class="['metas']"> |
|
|
|
</li> |
|
|
|
<el-tag v-if="item.selected" type="danger" effect="dark"> |
|
|
|
</ul> |
|
|
|
官方精选 |
|
|
|
<div class="pagination"> |
|
|
|
</el-tag> |
|
|
|
<el-pagination background layout="total, prev, pager, next" :page-size="pageSize" :total="total" |
|
|
|
<el-tag v-if="item.typeName" effect="dark"> |
|
|
|
@current-change="handleCurrentChange" :current-page="page"></el-pagination> |
|
|
|
{{ item.typeName }} |
|
|
|
</div> |
|
|
|
</el-tag> |
|
|
|
</template> |
|
|
|
<div v-if="item.isCourse" class="meta">{{ item.learningCount }}人学过</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</li> |
|
|
|
|
|
|
|
</ul> |
|
|
|
|
|
|
|
<div class="pagination"> |
|
|
|
|
|
|
|
<el-pagination background layout="total, prev, pager, next" :page-size="pageSize" :total="total" |
|
|
|
|
|
|
|
@current-change="handleCurrentChange" :current-page="page"></el-pagination> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
|
